@idraw/renderer 0.4.0-beta.3 → 0.4.0-beta.30

package/README.md

@@ -64,5 +64,5 @@ renderer.on('drawFrameComplete', (e) => {
 
 ## Documents
 
-- [Documents](https://idraw.js.org/docs/en/) | [中文文档](https://idraw.js.org/docs/zh/) 
-- [Online Playground](https://idraw.js.org/playground/) | [在线API示例](https://idraw.js.org/playground/)
+- [Documents](https://idrawjs.com/docs/en/) | [中文文档](https://idrawjs.com/docs/zh/) 
+- [Online Playground](https://idrawjs.com/playground/) | [在线API示例](https://idrawjs.com/playground/)

package/dist/esm/draw/box.d.ts

@@ -1,9 +1,20 @@
 import { ViewContext2D, Element, ElementType, ElementSize, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
-export declare function drawBox(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
-    originElem: Element<ElementType>;
+export declare function getOpacity(elem: Element): number;
+export declare function drawBox(ctx: ViewContext2D, viewElem: Element, opts: {
+    originElem: Element;
     calcElemSize: ElementSize;
     pattern?: string | CanvasPattern | null;
-    renderContent: () => void;
+    renderContent?: () => void;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    parentOpacity: number;
+}): void;
+export declare function drawBoxBackground(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
+    pattern?: string | CanvasPattern | null;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;
+export declare function drawBoxBorder(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): void;

package/dist/esm/draw/box.js

@@ -1,31 +1,53 @@
 import { istype, isColorStr, generateSVGPath, rotateElement, is, getDefaultElementDetailConfig, calcViewBoxSize } from '@idraw/util';
 import { createColorStyle } from './color';
 const defaultElemConfig = getDefaultElementDetailConfig();
+export function getOpacity(elem) {
+    var _a, _b, _c, _d;
+    let opacity = 1;
+    if (((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0 && ((_c = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _c === void 0 ? void 0 : _c.opacity) <= 1) {
+        opacity = (_d = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _d === void 0 ? void 0 : _d.opacity;
+    }
+    return opacity;
+}
 export function drawBox(ctx, viewElem, opts) {
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
-    drawClipPath(ctx, viewElem, {
-        originElem,
-        calcElemSize,
-        viewScaleInfo,
-        viewSizeInfo,
-        renderContent: () => {
-            var _a, _b;
-            if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-                ctx.globalAlpha = viewElem.detail.opacity;
-            }
-            else {
-                ctx.globalAlpha = 1;
+    const { parentOpacity } = opts;
+    const opacity = getOpacity(originElem) * parentOpacity;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = originElem.detail;
+    const mainRender = () => {
+        ctx.globalAlpha = opacity;
+        drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
+        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+        ctx.globalAlpha = parentOpacity;
+    };
+    if (clipPath) {
+        drawClipPath(ctx, viewElem, {
+            originElem,
+            calcElemSize,
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+                mainRender();
             }
-            drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
-            renderContent === null || renderContent === void 0 ? void 0 : renderContent();
-            drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-            ctx.globalAlpha = 1;
+        });
+        if (typeof clipPathStrokeWidth === 'number' && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+            drawClipPathStroke(ctx, viewElem, {
+                originElem,
+                calcElemSize,
+                viewScaleInfo,
+                viewSizeInfo,
+                parentOpacity
+            });
         }
-    });
+    }
+    else {
+        mainRender();
+    }
 }
 function drawClipPath(ctx, viewElem, opts) {
-    const { renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts;
-    const totalScale = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
+    const { renderContent, originElem, calcElemSize, viewSizeInfo } = opts;
+    const totalScale = viewSizeInfo.devicePixelRatio;
     const { clipPath } = (originElem === null || originElem === void 0 ? void 0 : originElem.detail) || {};
     if (clipPath && calcElemSize && clipPath.commands) {
         const { x, y, w, h } = calcElemSize;
@@ -53,15 +75,43 @@ function drawClipPath(ctx, viewElem, opts) {
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
     }
 }
-function drawBoxBackground(ctx, viewElem, opts) {
+function drawClipPathStroke(ctx, viewElem, opts) {
+    const { renderContent, originElem, calcElemSize, viewSizeInfo, parentOpacity } = opts;
+    const totalScale = viewSizeInfo.devicePixelRatio;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = (originElem === null || originElem === void 0 ? void 0 : originElem.detail) || {};
+    if (clipPath && calcElemSize && clipPath.commands && typeof clipPathStrokeWidth === 'number' && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+        const { x, y, w, h } = calcElemSize;
+        const { originW, originH, originX, originY } = clipPath;
+        const scaleW = w / originW;
+        const scaleH = h / originH;
+        const viewOriginX = originX * scaleW;
+        const viewOriginY = originY * scaleH;
+        const internalX = x - viewOriginX;
+        const internalY = y - viewOriginY;
+        ctx.save();
+        ctx.globalAlpha = parentOpacity;
+        ctx.translate(internalX, internalY);
+        ctx.scale(totalScale * scaleW, totalScale * scaleH);
+        const pathStr = generateSVGPath(clipPath.commands || []);
+        const path2d = new Path2D(pathStr);
+        ctx.strokeStyle = clipPathStrokeColor;
+        ctx.lineWidth = clipPathStrokeWidth;
+        ctx.stroke(path2d);
+        ctx.translate(0 - internalX, 0 - internalY);
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        rotateElement(ctx, Object.assign({}, viewElem), () => {
+            renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+        });
+        ctx.restore();
+    }
+    else {
+        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+    }
+}
+export function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     const transform = [];
-    let { borderRadius } = viewElem.detail;
-    const { borderWidth } = viewElem.detail;
-    if (typeof borderWidth !== 'number') {
-        borderRadius = 0;
-    }
     if (viewElem.detail.background || pattern) {
         const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
             viewScaleInfo,
@@ -119,20 +169,13 @@ function drawBoxBackground(ctx, viewElem, opts) {
         }
     }
 }
-function drawBoxBorder(ctx, viewElem, opts) {
-    var _a, _b;
+export function drawBoxBorder(ctx, viewElem, opts) {
     if (viewElem.detail.borderWidth === 0) {
         return;
     }
     if (!isColorStr(viewElem.detail.borderColor)) {
         return;
     }
-    if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-        ctx.globalAlpha = viewElem.detail.opacity;
-    }
-    else {
-        ctx.globalAlpha = 1;
-    }
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
     let borderColor = defaultElemConfig.borderColor;
@@ -263,7 +306,6 @@ function drawBoxBorder(ctx, viewElem, opts) {
         ctx.arcTo(x, y, x + w, y, radiusList[0]);
         ctx.closePath();
         ctx.stroke();
-        ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
 }
@@ -281,6 +323,12 @@ export function drawBoxShadow(ctx, viewElem, opts) {
         ctx.restore();
     }
     else {
+        ctx.save();
+        ctx.shadowColor = 'transparent';
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowBlur = 0;
         renderContent();
+        ctx.restore();
     }
 }

package/dist/esm/draw/circle.js

@@ -1,49 +1,75 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
 import { createColorStyle } from './color';
-import { drawBoxShadow } from './box';
+import { drawBoxShadow, getOpacity } from './box';
 export function drawCircle(ctx, elem, opts) {
     const { detail, angle } = elem;
-    const { background = '#000000', borderColor = '#000000', borderWidth = 0 } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { background = '#000000', borderColor = '#000000', boxSizing, borderWidth = 0, borderDash } = detail;
+    let bw = 0;
+    if (typeof borderWidth === 'number' && borderWidth > 0) {
+        bw = borderWidth;
+    }
+    else if (Array.isArray(borderWidth) && typeof borderWidth[0] === 'number' && borderWidth[0] > 0) {
+        bw = borderWidth[0];
+    }
+    bw = bw * viewScaleInfo.scale;
+    const { x, y, w, h } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
             viewSizeInfo,
             renderContent: () => {
-                var _a, _b;
-                const a = w / 2;
-                const b = h / 2;
+                let a = w / 2;
+                let b = h / 2;
                 const centerX = x + a;
                 const centerY = y + b;
-                if (((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-                    ctx.globalAlpha = elem.detail.opacity;
+                const radiusA = a;
+                const radiusB = b;
+                if (bw > 0) {
+                    if (boxSizing === 'content-box') {
+                        a = a;
+                        b = b;
+                    }
+                    else if (boxSizing === 'center-line') {
+                        a = a - bw / 2;
+                        b = b - bw / 2;
+                    }
+                    else {
+                        a = a - bw;
+                        b = b - bw;
+                    }
                 }
-                else {
-                    ctx.globalAlpha = 1;
-                }
-                if (typeof borderWidth === 'number' && borderWidth > 0) {
-                    const ba = borderWidth / 2 + a;
-                    const bb = borderWidth / 2 + b;
+                if (a >= 0 && b >= 0) {
+                    const opacity = getOpacity(viewElem) * parentOpacity;
+                    ctx.globalAlpha = opacity;
                     ctx.beginPath();
-                    ctx.strokeStyle = borderColor;
-                    ctx.lineWidth = borderWidth;
-                    ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+                    const fillStyle = createColorStyle(ctx, background, {
+                        viewElementSize: { x, y, w, h },
+                        viewScaleInfo,
+                        opacity: ctx.globalAlpha
+                    });
+                    ctx.fillStyle = fillStyle;
+                    ctx.circle(centerX, centerY, radiusA, radiusB, 0, 0, 2 * Math.PI);
                     ctx.closePath();
-                    ctx.stroke();
+                    ctx.fill();
+                    ctx.globalAlpha = parentOpacity;
+                    if (typeof bw === 'number' && bw > 0) {
+                        const ba = bw / 2 + a;
+                        const bb = bw / 2 + b;
+                        ctx.beginPath();
+                        if (borderDash) {
+                            const lineDash = borderDash.map((n) => n * viewScaleInfo.scale);
+                            ctx.setLineDash(lineDash);
+                        }
+                        ctx.strokeStyle = borderColor;
+                        ctx.lineWidth = bw;
+                        ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+                        ctx.closePath();
+                        ctx.stroke();
+                        ctx.setLineDash([]);
+                    }
                 }
-                ctx.beginPath();
-                const fillStyle = createColorStyle(ctx, background, {
-                    viewElementSize: { x, y, w, h },
-                    viewScaleInfo,
-                    opacity: ctx.globalAlpha
-                });
-                ctx.fillStyle = fillStyle;
-                ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
-                ctx.closePath();
-                ctx.fill();
-                ctx.globalAlpha = 1;
             }
         });
     });

package/dist/esm/draw/elements.js

@@ -4,18 +4,21 @@ const defaultDetail = getDefaultElementDetailConfig();
 export function drawElementList(ctx, data, opts) {
     var _a;
     const { elements = [] } = data;
+    const { parentOpacity } = opts;
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
         const elem = Object.assign(Object.assign({}, element), {
             detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
         });
         if (opts.forceDrawAll !== true) {
-            if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+            if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.needRender(elem))) {
                 continue;
             }
         }
         try {
-            drawElement(ctx, elem, opts);
+            drawElement(ctx, elem, Object.assign(Object.assign({}, opts), {
+                parentOpacity
+            }));
         }
         catch (err) {
             console.error(err);

package/dist/esm/draw/global.d.ts

@@ -0,0 +1,2 @@
+import type { RendererDrawElementOptions, ViewContext2D, ElementGlobalDetail } from '@idraw/types';
+export declare function drawGlobalBackground(ctx: ViewContext2D, global: ElementGlobalDetail | undefined, opts: RendererDrawElementOptions): void;

package/dist/esm/draw/global.js

@@ -0,0 +1,9 @@
+export function drawGlobalBackground(ctx, global, opts) {
+    if (typeof (global === null || global === void 0 ? void 0 : global.background) === 'string') {
+        const { viewSizeInfo } = opts;
+        const { width, height } = viewSizeInfo;
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = global.background;
+        ctx.fillRect(0, 0, width, height);
+    }
+}

package/dist/esm/draw/group.js

@@ -1,17 +1,27 @@
-import { rotateElement, calcViewBoxSize } from '@idraw/util';
+import { rotateElement, calcViewBoxSize, calcViewElementSize } from '@idraw/util';
 import { drawCircle } from './circle';
 import { drawRect } from './rect';
 import { drawImage } from './image';
 import { drawText } from './text';
 import { drawSVG } from './svg';
 import { drawHTML } from './html';
-import { drawBox, drawBoxShadow } from './box';
+import { drawBox, drawBoxShadow, getOpacity } from './box';
 import { drawPath } from './path';
+const visiableMinSize = 0.4;
 export function drawElement(ctx, elem, opts) {
-    var _a;
+    var _a, _b, _c;
     if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
         return;
     }
+    const { w, h } = elem;
+    const { scale } = opts.viewScaleInfo;
+    if ((scale < 1 && (w * scale < visiableMinSize || h * scale < visiableMinSize)) || opts.parentOpacity === 0) {
+        return;
+    }
+    const { overrideElementMap } = opts;
+    if ((_c = (_b = overrideElementMap === null || overrideElementMap === void 0 ? void 0 : overrideElementMap[elem.uuid]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.invisible) {
+        return;
+    }
     try {
         switch (elem.type) {
             case 'rect': {
@@ -57,10 +67,11 @@ export function drawElement(ctx, elem, opts) {
     }
 }
 export function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
             viewSizeInfo,
@@ -70,6 +81,7 @@ export function drawGroup(ctx, elem, opts) {
                     calcElemSize: { x, y, w, h, angle },
                     viewScaleInfo,
                     viewSizeInfo,
+                    parentOpacity,
                     renderContent: () => {
                         const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
                             viewScaleInfo,
@@ -105,12 +117,12 @@ export function drawGroup(ctx, elem, opts) {
                                     y: newParentSize.y + child.y
                                 });
                                 if (opts.forceDrawAll !== true) {
-                                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.needRender(child))) {
                                         continue;
                                     }
                                 }
                                 try {
-                                    drawElement(ctx, child, Object.assign({}, opts));
+                                    drawElement(ctx, child, Object.assign(Object.assign({}, opts), { parentOpacity: parentOpacity * getOpacity(elem) }));
                                 }
                                 catch (err) {
                                     console.error(err);
@@ -118,12 +130,12 @@ export function drawGroup(ctx, elem, opts) {
                             }
                         }
                         if (elem.detail.overflow === 'hidden') {
-                            ctx.globalAlpha = 1;
                             ctx.restore();
                         }
                     }
                 });
             }
         });
+        ctx.globalAlpha = parentOpacity;
     });
 }

package/dist/esm/draw/html.js

@@ -1,17 +1,17 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
+import { getOpacity } from './box';
 export function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     rotateElement(ctx, { x, y, w, h, angle }, () => {
-        if (!content) {
+        if (!content && !opts.loader.isDestroyed()) {
             opts.loader.load(elem, opts.elementAssets || {});
         }
         if (elem.type === 'html' && content) {
-            const { opacity } = elem.detail;
-            ctx.globalAlpha = opacity ? opacity : 1;
+            ctx.globalAlpha = getOpacity(elem) * parentOpacity;
             ctx.drawImage(content, x, y, w, h);
-            ctx.globalAlpha = 1;
+            ctx.globalAlpha = parentOpacity;
         }
     });
 }

package/dist/esm/draw/image.js

@@ -1,9 +1,9 @@
-import { rotateElement, calcViewBoxSize } from '@idraw/util';
-import { drawBox, drawBoxShadow } from './box';
+import { rotateElement, calcViewBoxSize, calcViewElementSize } from '@idraw/util';
+import { drawBox, drawBoxShadow, getOpacity } from './box';
 export function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {
@@ -15,17 +15,21 @@ export function drawImage(ctx, elem, opts) {
                     calcElemSize: { x, y, w, h, angle },
                     viewScaleInfo,
                     viewSizeInfo,
+                    parentOpacity,
                     renderContent: () => {
-                        if (!content) {
+                        if (!content && !opts.loader.isDestroyed()) {
                             opts.loader.load(elem, opts.elementAssets || {});
                         }
                         if (elem.type === 'image' && content) {
-                            const { opacity } = elem.detail;
-                            ctx.globalAlpha = opacity ? opacity : 1;
+                            ctx.globalAlpha = getOpacity(elem) * parentOpacity;
                             const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
                                 viewScaleInfo,
                                 viewSizeInfo
                             });
+                            const { detail } = elem;
+                            const { scaleMode, originW = 0, originH = 0 } = detail;
+                            const imageW = ctx.$undoPixelRatio(originW);
+                            const imageH = ctx.$undoPixelRatio(originH);
                             ctx.save();
                             ctx.fillStyle = 'transparent';
                             ctx.beginPath();
@@ -37,8 +41,45 @@ export function drawImage(ctx, elem, opts) {
                             ctx.closePath();
                             ctx.fill();
                             ctx.clip();
-                            ctx.drawImage(content, x, y, w, h);
-                            ctx.globalAlpha = 1;
+                            if (scaleMode && originH && originW) {
+                                let sx = 0;
+                                let sy = 0;
+                                let sWidth = imageW;
+                                let sHeight = imageH;
+                                const dx = x;
+                                const dy = y;
+                                const dWidth = w;
+                                const dHeight = h;
+                                if (imageW > elem.w || imageH > elem.h) {
+                                    if (scaleMode === 'fill') {
+                                        const sourceScale = Math.max(elem.w / imageW, elem.h / imageH);
+                                        const newImageWidth = imageW * sourceScale;
+                                        const newImageHeight = imageH * sourceScale;
+                                        sx = (newImageWidth - elem.w) / 2 / sourceScale;
+                                        sy = (newImageHeight - elem.h) / 2 / sourceScale;
+                                        sWidth = elem.w / sourceScale;
+                                        sHeight = elem.h / sourceScale;
+                                    }
+                                    else if (scaleMode === 'tile') {
+                                        sx = 0;
+                                        sy = 0;
+                                        sWidth = elem.w;
+                                        sHeight = elem.h;
+                                    }
+                                    else if (scaleMode === 'fit') {
+                                        const sourceScale = Math.min(elem.w / imageW, elem.h / imageH);
+                                        sx = (imageW - elem.w / sourceScale) / 2;
+                                        sy = (imageH - elem.h / sourceScale) / 2;
+                                        sWidth = elem.w / sourceScale;
+                                        sHeight = elem.h / sourceScale;
+                                    }
+                                }
+                                ctx.drawImage(content, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+                            }
+                            else {
+                                ctx.drawImage(content, x, y, w, h);
+                            }
+                            ctx.globalAlpha = parentOpacity;
                             ctx.restore();
                         }
                     }

package/dist/esm/draw/index.d.ts

@@ -5,3 +5,5 @@ export { drawSVG } from './svg';
 export { drawHTML } from './html';
 export { drawText } from './text';
 export { drawElementList } from './elements';
+export { drawLayout } from './layout';
+export { drawGlobalBackground } from './global';

package/dist/esm/draw/index.js

@@ -5,3 +5,5 @@ export { drawSVG } from './svg';
 export { drawHTML } from './html';
 export { drawText } from './text';
 export { drawElementList } from './elements';
+export { drawLayout } from './layout';
+export { drawGlobalBackground } from './global';

package/dist/esm/draw/layout.d.ts

@@ -0,0 +1,2 @@
+import type { RendererDrawElementOptions, ViewContext2D, DataLayout } from '@idraw/types';
+export declare function drawLayout(ctx: ViewContext2D, layout: DataLayout, opts: RendererDrawElementOptions, renderContent: (ctx: ViewContext2D) => void): void;

package/dist/esm/draw/layout.js

@@ -0,0 +1,44 @@
+import { calcViewElementSize, calcViewBoxSize } from '@idraw/util';
+import { drawBoxShadow, drawBoxBackground, drawBoxBorder } from './box';
+export function drawLayout(ctx, layout, opts, renderContent) {
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const elem = Object.assign({ uuid: 'layout', type: 'group' }, layout);
+    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
+    const angle = 0;
+    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
+    ctx.globalAlpha = 1;
+    drawBoxShadow(ctx, viewElem, {
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+            drawBoxBackground(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+        }
+    });
+    if (layout.detail.overflow === 'hidden') {
+        const { viewScaleInfo, viewSizeInfo } = opts;
+        const elem = Object.assign({ uuid: 'layout', type: 'group' }, layout);
+        const viewElemSize = calcViewElementSize(elem, { viewScaleInfo }) || elem;
+        const viewElem = Object.assign(Object.assign({}, elem), viewElemSize);
+        const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
+            viewScaleInfo,
+            viewSizeInfo
+        });
+        ctx.save();
+        ctx.fillStyle = 'transparent';
+        ctx.beginPath();
+        ctx.moveTo(x + radiusList[0], y);
+        ctx.arcTo(x + w, y, x + w, y + h, radiusList[1]);
+        ctx.arcTo(x + w, y + h, x, y + h, radiusList[2]);
+        ctx.arcTo(x, y + h, x, y, radiusList[3]);
+        ctx.arcTo(x, y, x + w, y, radiusList[0]);
+        ctx.closePath();
+        ctx.fill();
+        ctx.clip();
+    }
+    renderContent(ctx);
+    if (layout.detail.overflow === 'hidden') {
+        ctx.restore();
+    }
+    drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+    ctx.globalAlpha = parentOpacity;
+}