@idraw/renderer 0.4.0-beta.0 → 0.4.0-beta.10

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

@@ -1,14 +1,16 @@
 import { ViewContext2D, Element, ElementType, ElementSize, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+export declare function getOpacity(elem: Element): number;
 export declare function drawBox(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     originElem: Element<ElementType>;
     calcElemSize: ElementSize;
     pattern?: string | CanvasPattern | null;
-    renderContent: Function;
+    renderContent: () => void;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    parentOpacity: number;
 }): 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);
@@ -56,11 +60,7 @@ function drawClipPath(ctx, viewElem, opts) {
 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,
@@ -119,19 +119,12 @@ function drawBoxBackground(ctx, viewElem, opts) {
     }
 }
 function drawBoxBorder(ctx, viewElem, opts) {
-    var _a, _b;
     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([]);
 }

package/dist/esm/draw/circle.js

@@ -1,49 +1,67 @@
 import { rotateElement } 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 { 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];
+    }
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = 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 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 borderWidth === 'number' && borderWidth > 0) {
+                        const ba = borderWidth / 2 + a;
+                        const bb = borderWidth / 2 + b;
+                        ctx.beginPath();
+                        ctx.strokeStyle = borderColor;
+                        ctx.lineWidth = borderWidth;
+                        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.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                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

@@ -5,13 +5,18 @@ 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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = 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 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.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                                        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 { 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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         if (!content) {
             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 { 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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(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) {
                             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 { drawUnderlay } from './underlay';

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 { drawUnderlay } from './underlay';

package/dist/esm/draw/path.js

@@ -3,8 +3,8 @@ 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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(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 { 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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(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 { 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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         if (!content) {
             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

@@ -3,8 +3,8 @@ 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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBox(ctx, viewElem, {
@@ -12,6 +12,7 @@ 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;

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

@@ -0,0 +1,2 @@
+import type { RendererDrawElementOptions, ViewContext2D, DataUnderlay } from '@idraw/types';
+export declare function drawUnderlay(ctx: ViewContext2D, underlay: DataUnderlay, opts: RendererDrawElementOptions): void;

package/dist/esm/draw/underlay.js

@@ -0,0 +1,23 @@
+import { drawBox, drawBoxShadow } from './box';
+export function drawUnderlay(ctx, underlay, opts) {
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const elem = Object.assign({ uuid: 'underlay' }, underlay);
+    const { x, y, w, h } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const angle = 0;
+    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
+    drawBoxShadow(ctx, viewElem, {
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+            drawBox(ctx, viewElem, {
+                originElem: elem,
+                calcElemSize: { x, y, w, h, angle },
+                viewScaleInfo,
+                viewSizeInfo,
+                parentOpacity,
+                renderContent: () => {
+                }
+            });
+        }
+    });
+}

package/dist/esm/index.d.ts

@@ -1,11 +1,16 @@
 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;
+    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';

package/dist/esm/index.js

@@ -1,28 +1,39 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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;
 import { EventEmitter } from '@idraw/util';
-import { drawElementList } from './draw/index';
+import { drawElementList, drawUnderlay } from './draw/index';
 import { Loader } from './loader';
 export class Renderer extends EventEmitter {
     constructor(opts) {
         super();
-        this._loader = new Loader();
-        this._opts = opts;
-        this._init();
-    }
-    _init() {
-        const { _loader: loader } = this;
-        loader.on('load', (e) => {
-            this.trigger('load', e);
-        });
-        loader.on('error', () => {
-        });
+        _Renderer_instances.add(this);
+        _Renderer_opts.set(this, void 0);
+        _Renderer_loader.set(this, new Loader());
+        __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
+        __classPrivateFieldGet(this, _Renderer_instances, "m", _Renderer_init).call(this);
+    }
+    destroy() {
+        __classPrivateFieldSet(this, _Renderer_opts, null, "f");
+        __classPrivateFieldGet(this, _Renderer_loader, "f").destroy();
+        __classPrivateFieldSet(this, _Renderer_loader, null, "f");
     }
     updateOptions(opts) {
-        this._opts = opts;
+        __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
     }
     drawData(data, opts) {
-        const { _loader: loader } = this;
-        const { calculator } = this._opts;
-        const { viewContext } = this._opts.viewContent;
+        const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
+        const { calculator } = __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 = {
             x: 0,
@@ -30,12 +41,20 @@ export class Renderer extends EventEmitter {
             w: opts.viewSizeInfo.width,
             h: opts.viewSizeInfo.height
         };
+        if (data.underlay) {
+            drawUnderlay(viewContext, data.underlay, Object.assign({ loader,
+                calculator,
+                parentElementSize, parentOpacity: 1 }, opts));
+        }
         drawElementList(viewContext, data, Object.assign({ loader,
             calculator,
-            parentElementSize, elementAssets: data.assets }, opts));
+            parentElementSize, elementAssets: data.assets, parentOpacity: 1 }, opts));
     }
     scale(num) {
-        const { sharer } = this._opts;
+        const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+        if (!sharer) {
+            return;
+        }
         const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
         if (data) {
             this.drawData(data, {
@@ -56,4 +75,22 @@ export class Renderer extends EventEmitter {
             });
         }
     }
+    setLoadItemMap(itemMap) {
+        __classPrivateFieldGet(this, _Renderer_loader, "f").setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+        return __classPrivateFieldGet(this, _Renderer_loader, "f").getLoadItemMap();
+    }
+    getLoader() {
+        return __classPrivateFieldGet(this, _Renderer_loader, "f");
+    }
 }
+_Renderer_opts = new WeakMap(), _Renderer_loader = 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', () => {
+    });
+};
+export { drawRect } from './draw';

package/dist/esm/loader.d.ts

@@ -1,17 +1,11 @@
-import type { RendererLoader, LoaderEventMap, LoadContent, LoadElementType, Element, ElementAssets } from '@idraw/types';
+import type { RendererLoader, LoaderEventMap, LoadContent, LoadItemMap, LoadElementType, Element, ElementAssets } from '@idraw/types';
 import { EventEmitter } from '@idraw/util';
 export declare class Loader extends EventEmitter<LoaderEventMap> implements RendererLoader {
-    private _loadFuncMap;
-    private _currentLoadItemMap;
-    private _storageLoadItemMap;
+    #private;
     constructor();
-    private _registerLoadFunc;
-    private _getLoadElementSource;
-    private _createLoadItem;
-    private _emitLoad;
-    private _emitError;
-    private _loadResource;
-    private _isExistingErrorStorage;
+    destroy(): void;
     load(element: Element<LoadElementType>, assets: ElementAssets): void;
     getContent(element: Element<LoadElementType>): LoadContent | null;
+    getLoadItemMap(): LoadItemMap;
+    setLoadItemMap(itemMap: LoadItemMap): void;
 }