@idraw/renderer 0.4.0-beta.4 → 0.4.0-beta.40

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

@@ -4,4 +4,7 @@ export { drawImage } from './image';
 export { drawSVG } from './svg';
 export { drawHTML } from './html';
 export { drawText } from './text';
+export { drawGroup, drawElement } from './group';
 export { drawElementList } from './elements';
+export { drawLayout } from './layout';
+export { drawGlobalBackground } from './global';

package/dist/esm/draw/index.js

@@ -4,4 +4,7 @@ export { drawImage } from './image';
 export { drawSVG } from './svg';
 export { drawHTML } from './html';
 export { drawText } from './text';
+export { drawGroup, drawElement } from './group';
 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, { originElem: elem, viewScaleInfo, viewSizeInfo });
+    ctx.globalAlpha = parentOpacity;
+}

package/dist/esm/draw/path.js

@@ -1,24 +1,57 @@
-import { rotateElement, generateSVGPath } from '@idraw/util';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { rotateElement, generateSVGPath, calcViewElementSize } from '@idraw/util';
 import { drawBox, drawBoxShadow } from './box';
 export function drawPath(ctx, elem, opts) {
+    var _a, _b;
     const { detail } = elem;
-    const { originX, originY, originW, originH } = detail;
-    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 { originX, originY, originW, originH, fillRule } = detail;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const scaleW = w / originW;
     const scaleH = h / originH;
     const viewOriginX = originX * scaleW;
     const viewOriginY = originY * scaleH;
     const internalX = x - viewOriginX;
     const internalY = y - viewOriginY;
+    const _c = elem.detail, { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = _c, restDetail = __rest(_c, ["clipPath", "clipPathStrokeColor", "clipPathStrokeWidth"]);
     const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
+    let boxViewElem = Object.assign({}, viewElem);
+    boxViewElem.detail = restDetail;
+    let boxOriginElem = Object.assign({}, elem);
+    boxOriginElem.detail = restDetail;
+    if (detail.fill && detail.fill !== 'string' && ((_b = (_a = detail.fill) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.includes('gradient'))) {
+        boxViewElem = Object.assign(Object.assign({}, viewElem), {
+            detail: Object.assign(Object.assign({}, viewElem.detail), {
+                background: detail.fill,
+                clipPath: {
+                    commands: detail.commands,
+                    originX,
+                    originY,
+                    originW,
+                    originH
+                }
+            })
+        });
+        boxOriginElem.detail = Object.assign({}, boxViewElem.detail);
+    }
     rotateElement(ctx, { x, y, w, h, angle }, () => {
-        drawBox(ctx, viewElem, {
-            originElem: elem,
+        drawBox(ctx, boxViewElem, {
+            originElem: boxOriginElem,
             calcElemSize: { x, y, w, h, angle },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
                 drawBoxShadow(ctx, viewElem, {
                     viewScaleInfo,
@@ -30,8 +63,15 @@ export function drawPath(ctx, elem, opts) {
                         const pathStr = generateSVGPath(detail.commands || []);
                         const path2d = new Path2D(pathStr);
                         if (detail.fill) {
-                            ctx.fillStyle = detail.fill;
-                            ctx.fill(path2d);
+                            if (typeof detail.fill === 'string') {
+                                ctx.fillStyle = detail.fill;
+                            }
+                            else {
+                                ctx.fillStyle = 'transparent';
+                            }
+                        }
+                        if (detail.fill) {
+                            ctx.fill(path2d, fillRule);
                         }
                         if (detail.stroke && detail.strokeWidth !== 0) {
                             ctx.strokeStyle = detail.stroke;

package/dist/esm/draw/rect.js

@@ -1,8 +1,8 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
 import { drawBox, drawBoxShadow } from './box';
 export function drawRect(ctx, elem, opts) {
-    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, {
@@ -14,6 +14,7 @@ export function drawRect(ctx, elem, opts) {
                     calcElemSize: { x, y, w, h, angle },
                     viewScaleInfo,
                     viewSizeInfo,
+                    parentOpacity,
                     renderContent: () => {
                     }
                 });

package/dist/esm/draw/svg.js

@@ -1,17 +1,17 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
+import { getOpacity } from './box';
 export function drawSVG(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 === 'svg' && 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/text.js

@@ -1,86 +1,43 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize, enhanceFontFamliy } from '@idraw/util';
 import { is, isColorStr, getDefaultElementDetailConfig } from '@idraw/util';
-import { drawBox } from './box';
+import { drawBox, drawBoxShadow } from './box';
 const detailConfig = getDefaultElementDetailConfig();
 export function drawText(ctx, elem, opts) {
-    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, calculator } = 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 }, () => {
-        drawBox(ctx, viewElem, {
-            originElem: elem,
-            calcElemSize: { x, y, w, h, angle },
+        var _a, _b;
+        drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
             viewSizeInfo,
             renderContent: () => {
-                const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
-                const fontSize = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
-                const lineHeight = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize;
-                ctx.fillStyle = elem.detail.color || detailConfig.color;
-                ctx.textBaseline = 'top';
-                ctx.$setFont({
-                    fontWeight: detail.fontWeight,
-                    fontSize: fontSize,
-                    fontFamily: detail.fontFamily
+                drawBox(ctx, viewElem, {
+                    originElem: elem,
+                    calcElemSize: { x, y, w, h, angle },
+                    viewScaleInfo,
+                    viewSizeInfo,
+                    parentOpacity
                 });
-                const detailText = detail.text.replace(/\r\n/gi, '\n');
-                const fontHeight = lineHeight;
-                const detailTextList = detailText.split('\n');
-                const lines = [];
-                let lineNum = 0;
-                detailTextList.forEach((tempText, idx) => {
-                    let lineText = '';
-                    if (tempText.length > 0) {
-                        for (let i = 0; i < tempText.length; i++) {
-                            if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.$doPixelRatio(w)) {
-                                lineText += tempText[i] || '';
-                            }
-                            else {
-                                lines.push({
-                                    text: lineText,
-                                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                                });
-                                lineText = tempText[i] || '';
-                                lineNum++;
-                            }
-                            if ((lineNum + 1) * fontHeight > h) {
-                                break;
-                            }
-                            if (tempText.length - 1 === i) {
-                                if ((lineNum + 1) * fontHeight < h) {
-                                    lines.push({
-                                        text: lineText,
-                                        width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                                    });
-                                    if (idx < detailTextList.length - 1) {
-                                        lineNum++;
-                                    }
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        lines.push({
-                            text: '',
-                            width: 0
-                        });
-                    }
-                });
-                let startY = 0;
-                if (lines.length * fontHeight < h) {
-                    if (elem.detail.verticalAlign === 'top') {
-                        startY = 0;
-                    }
-                    else if (elem.detail.verticalAlign === 'bottom') {
-                        startY += h - lines.length * fontHeight;
-                    }
-                    else {
-                        startY += (h - lines.length * fontHeight) / 2;
-                    }
-                }
-                {
-                    const _y = y + startY;
+            }
+        });
+        {
+            const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
+            const originFontSize = detail.fontSize || detailConfig.fontSize;
+            const fontSize = originFontSize * viewScaleInfo.scale;
+            if (fontSize < 2) {
+                return;
+            }
+            ctx.fillStyle = elem.detail.color || detailConfig.color;
+            ctx.textBaseline = 'top';
+            ctx.$setFont({
+                fontWeight: detail.fontWeight,
+                fontSize: fontSize,
+                fontFamily: enhanceFontFamliy(detail.fontFamily)
+            });
+            {
+                const virtualTextDetail = calculator.getVirtualFlatItem(elem.uuid);
+                if (Array.isArray(virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) && ((_a = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                     if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
                         ctx.shadowColor = detail.textShadowColor;
                     }
@@ -93,18 +50,11 @@ export function drawText(ctx, elem, opts) {
                     if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
                         ctx.shadowBlur = detail.textShadowBlur;
                     }
-                    lines.forEach((line, i) => {
-                        let _x = x;
-                        if (detail.textAlign === 'center') {
-                            _x = x + (w - line.width) / 2;
-                        }
-                        else if (detail.textAlign === 'right') {
-                            _x = x + (w - line.width);
-                        }
-                        ctx.fillText(line.text, _x, _y + fontHeight * i);
+                    (_b = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
+                        ctx.fillText(line.text, x + line.x * viewScaleInfo.scale, y + line.y * viewScaleInfo.scale);
                     });
                 }
             }
-        });
+        }
     });
 }

package/dist/esm/index.d.ts

@@ -1,12 +1,20 @@
 import { EventEmitter } from '@idraw/util';
 import type { LoadItemMap } from '@idraw/types';
+import { Loader } from './loader';
 import type { Data, BoardRenderer, RendererOptions, RendererEventMap, RendererDrawOptions } from '@idraw/types';
+import { Calculator } from './calculator';
+export { Calculator };
 export declare class Renderer extends EventEmitter<RendererEventMap> implements BoardRenderer {
     #private;
     constructor(opts: RendererOptions);
+    isDestroyed(): boolean;
+    destroy(): void;
     updateOptions(opts: RendererOptions): void;
     drawData(data: Data, opts: RendererDrawOptions): void;
     scale(num: number): void;
     setLoadItemMap(itemMap: LoadItemMap): void;
     getLoadItemMap(): LoadItemMap;
+    getLoader(): Loader;
+    getCalculator(): Calculator;
 }
+export { drawCircle, drawRect, drawImage, drawSVG, drawHTML, drawText, drawGroup, drawElement, drawElementList, drawLayout, drawGlobalBackground } from './draw';

package/dist/esm/index.js

@@ -9,25 +9,43 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_init;
+var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_calculator, _Renderer_hasDestroyed, _Renderer_init;
 import { EventEmitter } from '@idraw/util';
-import { drawElementList } from './draw/index';
+import { drawElementList, drawLayout, drawGlobalBackground } from './draw/index';
 import { Loader } from './loader';
+import { Calculator } from './calculator';
+export { Calculator };
 export class Renderer extends EventEmitter {
     constructor(opts) {
         super();
         _Renderer_instances.add(this);
         _Renderer_opts.set(this, void 0);
         _Renderer_loader.set(this, new Loader());
+        _Renderer_calculator.set(this, void 0);
+        _Renderer_hasDestroyed.set(this, false);
         __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
+        __classPrivateFieldSet(this, _Renderer_calculator, new Calculator({
+            tempContext: opts.tempContext
+        }), "f");
         __classPrivateFieldGet(this, _Renderer_instances, "m", _Renderer_init).call(this);
     }
+    isDestroyed() {
+        return __classPrivateFieldGet(this, _Renderer_hasDestroyed, "f");
+    }
+    destroy() {
+        this.clear();
+        __classPrivateFieldSet(this, _Renderer_opts, null, "f");
+        __classPrivateFieldGet(this, _Renderer_loader, "f").destroy();
+        __classPrivateFieldSet(this, _Renderer_loader, null, "f");
+        __classPrivateFieldSet(this, _Renderer_hasDestroyed, true, "f");
+    }
     updateOptions(opts) {
         __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
     }
     drawData(data, opts) {
         const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
-        const { calculator } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+        const calculator = __classPrivateFieldGet(this, _Renderer_calculator, "f");
+        const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
         const viewContext = __classPrivateFieldGet(this, _Renderer_opts, "f").viewContext;
         viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
         const parentElementSize = {
@@ -36,9 +54,18 @@ export class Renderer extends EventEmitter {
             w: opts.viewSizeInfo.width,
             h: opts.viewSizeInfo.height
         };
-        drawElementList(viewContext, data, Object.assign({ loader,
+        const drawOpts = Object.assign({ loader,
             calculator,
-            parentElementSize, elementAssets: data.assets }, opts));
+            parentElementSize, elementAssets: data.assets, parentOpacity: 1, overrideElementMap: sharer === null || sharer === void 0 ? void 0 : sharer.getActiveOverrideElemenentMap() }, opts);
+        drawGlobalBackground(viewContext, data.global, drawOpts);
+        if (data.layout) {
+            drawLayout(viewContext, data.layout, drawOpts, () => {
+                drawElementList(viewContext, data, drawOpts);
+            });
+        }
+        else {
+            drawElementList(viewContext, data, drawOpts);
+        }
     }
     scale(num) {
         const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
@@ -71,12 +98,20 @@ export class Renderer extends EventEmitter {
     getLoadItemMap() {
         return __classPrivateFieldGet(this, _Renderer_loader, "f").getLoadItemMap();
     }
+    getLoader() {
+        return __classPrivateFieldGet(this, _Renderer_loader, "f");
+    }
+    getCalculator() {
+        return __classPrivateFieldGet(this, _Renderer_calculator, "f");
+    }
 }
-_Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
+_Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_calculator = new WeakMap(), _Renderer_hasDestroyed = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
     const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
     loader.on('load', (e) => {
         this.trigger('load', e);
     });
-    loader.on('error', () => {
+    loader.on('error', (e) => {
+        console.error(e);
     });
 };
+export { drawCircle, drawRect, drawImage, drawSVG, drawHTML, drawText, drawGroup, drawElement, drawElementList, drawLayout, drawGlobalBackground } from './draw';