@idraw/renderer 0.4.0-beta.2 → 0.4.0-beta.20

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,14 +1,25 @@
 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: Function;
+    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;
 export declare function drawBoxShadow(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-    renderContent: Function;
+    renderContent: () => void;
 }): void;

package/dist/esm/draw/box.js

@@ -1,31 +1,35 @@
 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 || {};
+    const { parentOpacity } = opts;
+    const opacity = getOpacity(originElem) * parentOpacity;
     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;
-            }
+            ctx.globalAlpha = opacity;
             drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
             renderContent === null || renderContent === void 0 ? void 0 : renderContent();
             drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-            ctx.globalAlpha = 1;
+            ctx.globalAlpha = parentOpacity;
         }
     });
 }
 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;
@@ -34,8 +38,8 @@ function drawClipPath(ctx, viewElem, opts) {
         const scaleH = h / originH;
         const viewOriginX = originX * scaleW;
         const viewOriginY = originY * scaleH;
-        let internalX = x - viewOriginX;
-        let internalY = y - viewOriginY;
+        const internalX = x - viewOriginX;
+        const internalY = y - viewOriginY;
         ctx.save();
         ctx.translate(internalX, internalY);
         ctx.scale(totalScale * scaleW, totalScale * scaleH);
@@ -53,14 +57,10 @@ function drawClipPath(ctx, viewElem, opts) {
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
     }
 }
-function drawBoxBackground(ctx, viewElem, opts) {
+export function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
-    let transform = [];
-    let { borderRadius, borderWidth } = viewElem.detail;
-    if (typeof borderWidth !== 'number') {
-        borderRadius = 0;
-    }
+    const transform = [];
     if (viewElem.detail.background || pattern) {
         const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
             viewScaleInfo,
@@ -118,20 +118,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;
@@ -262,7 +255,6 @@ function drawBoxBorder(ctx, viewElem, opts) {
         ctx.arcTo(x, y, x + w, y, radiusList[0]);
         ctx.closePath();
         ctx.stroke();
-        ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
 }
@@ -280,6 +272,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,68 @@
-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.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { background = '#000000', borderColor = '#000000', boxSizing, borderWidth = 0 } = 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, viewSizeInfo }) || 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;
+                if (bw > 0) {
+                    if (boxSizing === 'border-box') {
+                        a = a - bw;
+                        b = b - bw;
+                    }
+                    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;
+                    if (typeof bw === 'number' && bw > 0) {
+                        const ba = bw / 2 + a;
+                        const bb = bw / 2 + b;
+                        ctx.beginPath();
+                        ctx.strokeStyle = borderColor;
+                        ctx.lineWidth = bw;
+                        ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+                        ctx.closePath();
+                        ctx.stroke();
+                    }
                     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, a, b, 0, 0, 2 * Math.PI);
                     ctx.closePath();
-                    ctx.stroke();
+                    ctx.fill();
+                    ctx.globalAlpha = parentOpacity;
                 }
-                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

@@ -2,17 +2,23 @@ import { getDefaultElementDetailConfig } from '@idraw/util';
 import { drawElement } from './group';
 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.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
-            continue;
+        if (opts.forceDrawAll !== true) {
+            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/group.js

@@ -1,17 +1,22 @@
-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';
 export function drawElement(ctx, elem, opts) {
     var _a;
     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 < 1 || h * scale < 1)) || opts.parentOpacity === 0) {
+        return;
+    }
     try {
         switch (elem.type) {
             case 'rect': {
@@ -57,10 +62,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.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
+    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, viewSizeInfo }) || 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 +76,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,
@@ -104,11 +111,13 @@ export function drawGroup(ctx, elem, opts) {
                                     x: newParentSize.x + child.x,
                                     y: newParentSize.y + child.y
                                 });
-                                if (!calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
-                                    continue;
+                                if (opts.forceDrawAll !== true) {
+                                    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);
@@ -116,12 +125,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.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {
@@ -15,13 +15,13 @@ 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
@@ -38,7 +38,7 @@ export function drawImage(ctx, elem, opts) {
                             ctx.fill();
                             ctx.clip();
                             ctx.drawImage(content, x, y, w, h);
-                            ctx.globalAlpha = 1;
+                            ctx.globalAlpha = parentOpacity;
                             ctx.restore();
                         }
                     }

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

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

package/dist/esm/draw/index.js

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

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, viewSizeInfo }) || 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, viewSizeInfo }) || 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;
+}

package/dist/esm/draw/path.js

@@ -1,10 +1,10 @@
-import { rotateElement, generateSVGPath } from '@idraw/util';
+import { rotateElement, generateSVGPath, calcViewElementSize } from '@idraw/util';
 import { drawBox, drawBoxShadow } from './box';
 export function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     const scaleW = w / originW;
     const scaleH = h / originH;
     const viewOriginX = originX * scaleW;
@@ -19,6 +19,7 @@ export function drawPath(ctx, elem, opts) {
             calcElemSize: { x, y, w, h, angle },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
                 drawBoxShadow(ctx, viewElem, {
                     viewScaleInfo,

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;
-    let { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || 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.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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,10 +1,10 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
 import { is, isColorStr, getDefaultElementDetailConfig } from '@idraw/util';
 import { drawBox } from './box';
 const detailConfig = getDefaultElementDetailConfig();
 export function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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 }, () => {
         drawBox(ctx, viewElem, {
@@ -12,10 +12,13 @@ export function drawText(ctx, elem, opts) {
             calcElemSize: { x, y, w, h, angle },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             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;
+                const originFontSize = detail.fontSize || detailConfig.fontSize;
+                const fontSize = originFontSize * viewScaleInfo.scale;
+                const originLineHeight = detail.lineHeight || originFontSize;
+                const lineHeight = originLineHeight * viewScaleInfo.scale;
                 ctx.fillStyle = elem.detail.color || detailConfig.color;
                 ctx.textBaseline = 'top';
                 ctx.$setFont({
@@ -32,7 +35,7 @@ export function drawText(ctx, elem, opts) {
                     let lineText = '';
                     if (tempText.length > 0) {
                         for (let i = 0; i < tempText.length; i++) {
-                            if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.$doPixelRatio(w)) {
+                            if (ctx.measureText(lineText + (tempText[i] || '')).width <= ctx.$doPixelRatio(w)) {
                                 lineText += tempText[i] || '';
                             }
                             else {
@@ -47,7 +50,7 @@ export function drawText(ctx, elem, opts) {
                                 break;
                             }
                             if (tempText.length - 1 === i) {
-                                if ((lineNum + 1) * fontHeight < h) {
+                                if ((lineNum + 1) * fontHeight <= h) {
                                     lines.push({
                                         text: lineText,
                                         width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)

package/dist/esm/index.d.ts

@@ -1,11 +1,17 @@
 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';
 export declare class Renderer extends EventEmitter<RendererEventMap> implements BoardRenderer {
-    private _opts;
-    private _loader;
+    #private;
     constructor(opts: RendererOptions);
-    private _init;
+    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;
 }
+export { drawRect } from './draw';