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

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

@@ -1,4 +1,5 @@
 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;
@@ -6,6 +7,7 @@ export declare function drawBox(ctx: ViewContext2D, viewElem: Element<ElementTyp
     renderContent: () => void;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    parentOpacity: number;
 }): void;
 export declare function drawBoxShadow(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     viewScaleInfo: ViewScaleInfo;

package/dist/esm/draw/box.js

@@ -1,25 +1,29 @@
 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;
         }
     });
 }
@@ -57,11 +61,6 @@ function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     const transform = [];
-    let { borderRadius } = viewElem.detail;
-    const { borderWidth } = viewElem.detail;
-    if (typeof borderWidth !== 'number') {
-        borderRadius = 0;
-    }
     if (viewElem.detail.background || pattern) {
         const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
             viewScaleInfo,
@@ -120,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;
@@ -263,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,10 +1,17 @@
 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 { 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 }, () => {
@@ -12,17 +19,26 @@ export function drawCircle(ctx, elem, opts) {
             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;
-                }
-                else {
-                    ctx.globalAlpha = 1;
+                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;
+                    }
                 }
+                const opacity = getOpacity(viewElem) * parentOpacity;
+                ctx.globalAlpha = opacity;
                 if (typeof borderWidth === 'number' && borderWidth > 0) {
                     const ba = borderWidth / 2 + a;
                     const bb = borderWidth / 2 + b;
@@ -43,7 +59,7 @@ export function drawCircle(ctx, elem, opts) {
                 ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
                 ctx.closePath();
                 ctx.fill();
-                ctx.globalAlpha = 1;
+                ctx.globalAlpha = parentOpacity;
             }
         });
     });

package/dist/esm/draw/elements.js

@@ -4,6 +4,7 @@ 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), {
@@ -15,7 +16,9 @@ export function drawElementList(ctx, data, opts) {
             }
         }
         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,7 +5,7 @@ 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;
@@ -57,10 +57,11 @@ export function drawElement(ctx, elem, opts) {
     }
 }
 export function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    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 +71,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,
@@ -110,7 +112,7 @@ export function drawGroup(ctx, elem, opts) {
                                     }
                                 }
                                 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 +120,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 { 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,8 +1,8 @@
 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 { 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 }, () => {
@@ -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/path.js

@@ -3,7 +3,7 @@ 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 { 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;
@@ -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,7 +1,7 @@
 import { rotateElement } from '@idraw/util';
 import { drawBox, drawBoxShadow } from './box';
 export function drawRect(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    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 }, () => {
@@ -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 { 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,7 +3,7 @@ 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 { 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 }, () => {
@@ -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/index.js

@@ -38,7 +38,7 @@ export class Renderer extends EventEmitter {
         };
         drawElementList(viewContext, data, Object.assign({ loader,
             calculator,
-            parentElementSize, elementAssets: data.assets }, opts));
+            parentElementSize, elementAssets: data.assets, parentOpacity: 1 }, opts));
     }
     scale(num) {
         const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");

package/dist/esm/loader.js

@@ -62,8 +62,8 @@ export class Loader extends EventEmitter {
             var _b;
             const html = ((_b = assets[elem.detail.html]) === null || _b === void 0 ? void 0 : _b.value) || elem.detail.html;
             const content = yield loadHTML(html, {
-                width: elem.detail.width || elem.w,
-                height: elem.detail.height || elem.h
+                width: elem.detail.originW || elem.w,
+                height: elem.detail.originH || elem.h
             });
             return {
                 uuid: elem.uuid,

package/dist/index.global.js

@@ -447,7 +447,7 @@ var __privateMethod = (obj, member, method) => {
     const { scale } = viewScaleInfo;
     let { borderRadius: borderRadius2 } = viewElem.detail;
     const { boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
-    if (typeof borderWidth2 !== "number") {
+    if (Array.isArray(borderWidth2)) {
       borderRadius2 = 0;
     }
     let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
@@ -535,24 +535,29 @@ var __privateMethod = (obj, member, method) => {
     return "#000000";
   }
   const defaultElemConfig = getDefaultElementDetailConfig();
+  function getOpacity(elem) {
+    var _a, _b, _c, _d;
+    let opacity = 1;
+    if (((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = elem == null ? void 0 : elem.detail) == null ? void 0 : _b.opacity) >= 0 && ((_c = elem == null ? void 0 : elem.detail) == null ? void 0 : _c.opacity) <= 1) {
+      opacity = (_d = elem == null ? void 0 : elem.detail) == null ? void 0 : _d.opacity;
+    }
+    return opacity;
+  }
   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 ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? 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 ? void 0 : renderContent();
         drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
@@ -589,8 +594,6 @@ var __privateMethod = (obj, member, method) => {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     const transform = [];
-    viewElem.detail;
-    viewElem.detail;
     if (viewElem.detail.background || pattern) {
       const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
         viewScaleInfo,
@@ -643,18 +646,12 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawBoxBorder(ctx, viewElem, opts) {
-    var _a, _b;
     if (viewElem.detail.borderWidth === 0) {
       return;
     }
     if (!isColorStr(viewElem.detail.borderColor)) {
       return;
     }
-    if (((_a = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _b.opacity) >= 0) {
-      ctx.globalAlpha = viewElem.detail.opacity;
-    } else {
-      ctx.globalAlpha = 1;
-    }
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
     let borderColor = defaultElemConfig.borderColor;
@@ -778,7 +775,6 @@ var __privateMethod = (obj, member, method) => {
       ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
       ctx.closePath();
       ctx.stroke();
-      ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
   }
@@ -800,8 +796,14 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawCircle(ctx, elem, opts) {
     const { detail, angle: angle2 } = elem;
-    const { background = "#000000", borderColor = "#000000", borderWidth: borderWidth2 = 0 } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { background = "#000000", borderColor = "#000000", boxSizing, borderWidth: borderWidth2 = 0 } = detail;
+    let bw = 0;
+    if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+      bw = borderWidth2;
+    } else if (Array.isArray(borderWidth2) && typeof borderWidth2[0] === "number" && borderWidth2[0] > 0) {
+      bw = borderWidth2[0];
+    }
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2 } = (calculator == null ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
@@ -809,16 +811,24 @@ var __privateMethod = (obj, member, method) => {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-          var _a, _b;
-          const a = w2 / 2;
-          const b = h2 / 2;
+          let a = w2 / 2;
+          let b = h2 / 2;
           const centerX = x2 + a;
           const centerY = y2 + b;
-          if (((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = elem == null ? void 0 : elem.detail) == null ? void 0 : _b.opacity) >= 0) {
-            ctx.globalAlpha = elem.detail.opacity;
-          } else {
-            ctx.globalAlpha = 1;
+          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;
+            }
           }
+          const opacity = getOpacity(viewElem) * parentOpacity;
+          ctx.globalAlpha = opacity;
           if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
             const ba = borderWidth2 / 2 + a;
             const bb = borderWidth2 / 2 + b;
@@ -839,13 +849,13 @@ var __privateMethod = (obj, member, method) => {
           ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
           ctx.closePath();
           ctx.fill();
-          ctx.globalAlpha = 1;
+          ctx.globalAlpha = parentOpacity;
         }
       });
     });
   }
   function drawRect(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
@@ -858,6 +868,7 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
             }
           });
@@ -867,7 +878,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
@@ -880,13 +891,13 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             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: x22, y: y22, w: w22, h: h22, radiusList } = calcViewBoxSize(viewElem, {
                   viewScaleInfo,
                   viewSizeInfo
@@ -903,7 +914,7 @@ var __privateMethod = (obj, member, method) => {
                 ctx.fill();
                 ctx.clip();
                 ctx.drawImage(content, x22, y22, w22, h22);
-                ctx.globalAlpha = 1;
+                ctx.globalAlpha = parentOpacity;
                 ctx.restore();
               }
             }
@@ -914,39 +925,37 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       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, x2, y2, w2, h2);
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       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, x2, y2, w2, h2);
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   const detailConfig = getDefaultElementDetailConfig();
   function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
@@ -955,6 +964,7 @@ var __privateMethod = (obj, member, method) => {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           const detail = {
             ...detailConfig,
@@ -1052,7 +1062,7 @@ var __privateMethod = (obj, member, method) => {
   function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const scaleW = w2 / originW;
     const scaleH = h2 / originH;
@@ -1068,6 +1078,7 @@ var __privateMethod = (obj, member, method) => {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
@@ -1151,10 +1162,11 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
+      ctx.globalAlpha = getOpacity(elem) * parentOpacity;
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
@@ -1164,6 +1176,7 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
               const { x: x22, y: y22, w: w22, h: h22, radiusList } = calcViewBoxSize(viewElem, {
                 viewScaleInfo,
@@ -1207,26 +1220,27 @@ var __privateMethod = (obj, member, method) => {
                     }
                   }
                   try {
-                    drawElement(ctx, child, { ...opts });
+                    drawElement(ctx, child, { ...opts, ...{ parentOpacity: parentOpacity * getOpacity(elem) } });
                   } catch (err) {
                     console.error(err);
                   }
                 }
               }
               if (elem.detail.overflow === "hidden") {
-                ctx.globalAlpha = 1;
                 ctx.restore();
               }
             }
           });
         }
       });
+      ctx.globalAlpha = parentOpacity;
     });
   }
   const defaultDetail = getDefaultElementDetailConfig();
   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 = {
@@ -1244,7 +1258,12 @@ var __privateMethod = (obj, member, method) => {
         }
       }
       try {
-        drawElement(ctx, elem, opts);
+        drawElement(ctx, elem, {
+          ...opts,
+          ...{
+            parentOpacity
+          }
+        });
       } catch (err) {
         console.error(err);
       }
@@ -1296,8 +1315,8 @@ var __privateMethod = (obj, member, method) => {
         var _a;
         const html2 = ((_a = assets[elem.detail.html]) == null ? void 0 : _a.value) || elem.detail.html;
         const content = await loadHTML(html2, {
-          width: elem.detail.width || elem.w,
-          height: elem.detail.height || elem.h
+          width: elem.detail.originW || elem.w,
+          height: elem.detail.originH || elem.h
         });
         return {
           uuid: elem.uuid,
@@ -1459,6 +1478,7 @@ var __privateMethod = (obj, member, method) => {
         calculator,
         parentElementSize,
         elementAssets: data.assets,
+        parentOpacity: 1,
         ...opts
       });
     }

package/dist/index.global.min.js

@@ -1 +1 @@
-var iDrawRenderer=function(e){"use strict";var t,n,i,o,l,a,r,s,c,d,h,f,u,g,w,v,y,m,p,S,x,b=(e,t,n)=>{if(!t.has(e))throw TypeError("Cannot "+n)},I=(e,t,n)=>(b(e,t,"read from private field"),n?n.call(e):t.get(e)),z=(e,t,n)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,n)},A=(e,t,n,i)=>(b(e,t,"write to private field"),i?i.call(e,n):t.set(e,n),n),T=(e,t,n)=>(b(e,t,"access private method"),n);function C(e){return"string"==typeof e&&(/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||/^[a-z]{1,}$/i.test(e))}function E(e,t){if(1===t)return e;let n=1;const i=/^\#[0-9a-f]{6,6}$/i;let o=e;if(i.test(e)?n=parseInt(e.substring(5,7).replace(/^\#/,"0x")):/^\#[0-9a-f]{8,8}$/i.test(e)&&(n=parseInt(e.substring(7,9).replace(/^\#/,"0x")),o=e.substring(0,7)),n*=t,i.test(o)&&n>0&&n<1){const e=Math.max(0,Math.min(255,Math.ceil(256*n)));o=`${o.toUpperCase()}${e.toString(16).toUpperCase()}`}return o}function k(){function e(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${e()}${e()}-${e()}-${e()}-${e()}-${e()}${e()}${e()}`}function W(e){let t=0;for(let n=0;n<e.length;n++)t+=e.charCodeAt(n)*e.charCodeAt(n)*n*n;return t.toString(16).substring(0,4)}function $(e){const t=e.length,n=Math.floor(t/2),i=e.substring(0,4).padEnd(4,"0"),o=e.substring(0,4).padEnd(4,"0");return`@assets/${W(t.toString(16).padEnd(4,i))}${W(e.substring(n-4,n).padEnd(4,i)).padEnd(4,"f")}-${W(e.substring(n-8,n-4).padEnd(4,i)).padEnd(4,"f")}-${W(e.substring(n-12,n-8).padEnd(4,i)).padEnd(4,"f")}-${W(e.substring(n-16,n-12).padEnd(4,o)).padEnd(4,"f")}-${W(e.substring(n,n+4).padEnd(4,o)).padEnd(4,"f")}${W(e.substring(n+4,n+8).padEnd(4,o)).padEnd(4,"f")}${W(o.padEnd(4,i).padEnd(4,o))}`}function P(e){return(Object.prototype.toString.call(e)||"").replace(/(\[object|\])/gi,"").trim()}const M={type(e,t){const n=P(e);return!0===t?n.toLocaleLowerCase():n},array:e=>"Array"===P(e),json:e=>"Object"===P(e),function:e=>"Function"===P(e),asyncFunction:e=>"AsyncFunction"===P(e),string:e=>"String"===P(e),number:e=>"Number"===P(e),undefined:e=>"Undefined"===P(e),null:e=>"Null"===P(e),promise:e=>"Promise"===P(e)};var O=function(e,t,n,i){return new(n||(n=Promise))((function(o,l){function a(e){try{s(i.next(e))}catch(e){l(e)}}function r(e){try{s(i.throw(e))}catch(e){l(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,r)}s((i=i.apply(e,t||[])).next())}))};const{Image:R}=window;function L(e){return new Promise(((t,n)=>{const i=new R;i.crossOrigin="anonymous",i.onload=function(){t(i)},i.onabort=n,i.onerror=n,i.src=e}))}function D(e){return O(this,void 0,void 0,(function*(){const t=yield function(e){return new Promise(((t,n)=>{const i=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(i),o.onload=function(e){var n;const i=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(i)},o.onerror=function(e){n(e)}}))}(e);return yield L(t)}))}function B(e,t){return O(this,void 0,void 0,(function*(){e=e.replace(/\&/gi,"&amp;");const n=yield function(e,t){const{width:n,height:i}=t;return new Promise(((t,o)=>{const l=new Blob([`\n    <svg \n      xmlns="http://www.w3.org/2000/svg" \n      width="${n||""}" \n      height = "${i||""}">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ${e}\n        </div>\n      </foreignObject>\n    </svg>\n    `],{type:"image/svg+xml;charset=utf-8"}),a=new FileReader;a.readAsDataURL(l),a.onload=function(e){var n;const i=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(i)},a.onerror=function(e){o(e)}}))}(e,t);return yield L(n)}))}function F(e){return"number"==typeof e&&(e>0||e<=0)}function H(e){return"number"==typeof e&&e>=0}function X(e){return"string"==typeof e&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${e}`)}function Y(e){return"string"==typeof e&&/^(data:image\/)/.test(`${e}`)}const _={x:function(e){return F(e)},y:function(e){return F(e)},w:H,h:function(e){return"number"==typeof e&&e>=0},angle:function(e){return"number"==typeof e&&e>=-360&&e<=360},number:F,numberStr:function(e){return/^(-?\d+(?:\.\d+)?)$/.test(`${e}`)},borderWidth:function(e){return H(e)},borderRadius:function(e){return F(e)&&e>=0},color:function(e){return C(e)},imageSrc:function(e){return Y(e)||X(e)},imageURL:X,imageBase64:Y,svg:function(e){return"string"==typeof e&&/^(<svg[\s]{1,}|<svg>)/i.test(`${e}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${e}`.trim())},html:function(e){let t=!1;if("string"==typeof e){let n=document.createElement("div");n.innerHTML=e,n.children.length>0&&(t=!0),n=null}return t},text:function(e){return"string"==typeof e},fontSize:function(e){return F(e)&&e>0},lineHeight:function(e){return F(e)&&e>0},textAlign:function(e){return["center","left","right"].includes(e)},fontFamily:function(e){return"string"==typeof e&&e.length>0},fontWeight:function(e){return["bold"].includes(e)},strokeWidth:function(e){return F(e)&&e>0}};class j{constructor(){this._listeners=new Map}on(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e)||[];null==n||n.push(t),this._listeners.set(e,n)}else this._listeners.set(e,[t])}off(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e);if(Array.isArray(n))for(let e=0;e<(null==n?void 0:n.length);e++)if(n[e]===t){n.splice(e,1);break}this._listeners.set(e,n||[])}}trigger(e,t){const n=this._listeners.get(e);return!!Array.isArray(n)&&(n.forEach((e=>{e(t)})),!0)}has(e){if(this._listeners.has(e)){const t=this._listeners.get(e);if(Array.isArray(t)&&t.length>0)return!0}return!1}}function U(e,t,n,i){const o=function(e){return e/180*Math.PI}(t||0);n&&(o>0||o<0)&&(e.translate(n.x,n.y),e.rotate(o),e.translate(-n.x,-n.y)),i(e),n&&(o>0||o<0)&&(e.translate(n.x,n.y),e.rotate(-o),e.translate(-n.x,-n.y))}function q(e,t,n){const i={x:(o=t).x+o.w/2,y:o.y+o.h/2};var o;U(e,t.angle||0,i,(()=>{n(e)}))}function G(e){let t="";return e.forEach((e=>{t+=e.type+e.params.join(" ")})),t}const N={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};function V(e,t){const{viewScaleInfo:n}=t,{scale:i}=n;let{borderRadius:o}=e.detail;const{boxSizing:l=N.boxSizing,borderWidth:a}=e.detail;"number"!=typeof a&&(o=0);let{x:r,y:s,w:c,h:d}=e,h=[0,0,0,0];if("number"==typeof o){const e=o*i;h=[e,e,e,e]}else Array.isArray(o)&&4===(null==o?void 0:o.length)&&(h=[o[0]*i,o[1]*i,o[2]*i,o[3]*i]);let f=0;return"number"==typeof a&&(f=(a||0)*i),"border-box"===l?(r=e.x+f/2,s=e.y+f/2,c=e.w-f,d=e.h-f):"content-box"===l?(r=e.x-f/2,s=e.y-f/2,c=e.w+f,d=e.h+f):(r=e.x,s=e.y,c=e.w,d=e.h),c=Math.max(c,1),d=Math.max(d,1),h=h.map((e=>Math.min(e,c/2,d/2))),{x:r,y:s,w:c,h:d,radiusList:h}}function J(e,t,n){if("string"==typeof t)return t;const{viewElementSize:i,viewScaleInfo:o,opacity:l=1}=n,{x:a,y:r}=i,{scale:s}=o;if("linear-gradient"===(null==t?void 0:t.type)){const{start:n,end:i,stops:o}=t,c={x:a+n.x*s,y:r+n.y*s},d={x:a+i.x*s,y:r+i.y*s},h=e.createLinearGradient(c.x,c.y,d.x,d.y);return o.forEach((e=>{h.addColorStop(e.offset,E(e.color,l))})),h}if("radial-gradient"===(null==t?void 0:t.type)){const{inner:n,outer:i,stops:o}=t,c={x:a+n.x*s,y:r+n.y*s,radius:n.radius*s},d={x:a+i.x*s,y:r+i.y*s,radius:i.radius*s},h=e.createRadialGradient(c.x,c.y,c.radius,d.x,d.y,d.radius);return o.forEach((e=>{h.addColorStop(e.offset,E(e.color,l))})),h}return"#000000"}const K={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};function Q(e,t,n){const{pattern:i,renderContent:o,originElem:l,calcElemSize:a,viewScaleInfo:r,viewSizeInfo:s}=n||{};!function(e,t,n){const{renderContent:i,originElem:o,calcElemSize:l,viewScaleInfo:a,viewSizeInfo:r}=n,s=a.scale*r.devicePixelRatio,{clipPath:c}=(null==o?void 0:o.detail)||{};if(c&&l&&c.commands){const{x:n,y:o,w:a,h:r}=l,{originW:d,originH:h,originX:f,originY:u}=c,g=a/d,w=r/h,v=n-f*g,y=o-u*w;e.save(),e.translate(v,y),e.scale(s*g,s*w);const m=G(c.commands||[]),p=new Path2D(m);e.clip(p),e.translate(0-v,0-y),e.setTransform(1,0,0,1,0,0),q(e,{...t},(()=>{null==i||i()})),e.restore()}else null==i||i()}(e,t,{originElem:l,calcElemSize:a,viewScaleInfo:r,viewSizeInfo:s,renderContent:()=>{var n,l;void 0!==(null==(n=null==t?void 0:t.detail)?void 0:n.opacity)&&(null==(l=null==t?void 0:t.detail)?void 0:l.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1,function(e,t,n){var i,o;const{pattern:l,viewScaleInfo:a,viewSizeInfo:r}=n,s=[];if(t.detail,t.detail,t.detail.background||l){const{x:n,y:c,w:d,h:h,radiusList:f}=V(t,{viewScaleInfo:a,viewSizeInfo:r});if(e.beginPath(),e.moveTo(n+f[0],c),e.arcTo(n+d,c,n+d,c+h,f[1]),e.arcTo(n+d,c+h,n,c+h,f[2]),e.arcTo(n,c+h,n,c,f[3]),e.arcTo(n,c,n+d,c,f[0]),e.closePath(),"string"==typeof l)e.fillStyle=l;else if(["CanvasPattern"].includes(M.type(l)))e.fillStyle=l;else if("string"==typeof t.detail.background)e.fillStyle=t.detail.background;else if("linear-gradient"===(null==(i=t.detail.background)?void 0:i.type)){const i=J(e,t.detail.background,{viewElementSize:{x:n,y:c,w:d,h:h},viewScaleInfo:a,opacity:e.globalAlpha});e.fillStyle=i}else if("radial-gradient"===(null==(o=t.detail.background)?void 0:o.type)){const i=J(e,t.detail.background,{viewElementSize:{x:n,y:c,w:d,h:h},viewScaleInfo:a,opacity:e.globalAlpha});if(e.fillStyle=i,s&&s.length>0)for(let t=0;t<(null==s?void 0:s.length);t++){const i=s[t];"translate"===i.method?e.translate(i.args[0]+n,i.args[1]+c):"rotate"===i.method?e.rotate(...i.args):"scale"===i.method&&e.scale(...i.args)}}e.fill(),s&&s.length>0&&e.setTransform(1,0,0,1,0,0)}}(e,t,{pattern:i,viewScaleInfo:r,viewSizeInfo:s}),null==o||o(),function(e,t,n){var i,o;if(0===t.detail.borderWidth)return;if(!C(t.detail.borderColor))return;void 0!==(null==(i=null==t?void 0:t.detail)?void 0:i.opacity)&&(null==(o=null==t?void 0:t.detail)?void 0:o.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1;const{viewScaleInfo:l}=n,{scale:a}=l;let r=K.borderColor;!0===C(t.detail.borderColor)&&(r=t.detail.borderColor);const{borderWidth:s,borderRadius:c,borderDash:d,boxSizing:h=K.boxSizing}=t.detail;let f=0;"number"==typeof s&&(f=s||1);f*=a;let u=[0,0,0,0];if("number"==typeof c){const e=c*a;u=[e,e,e,e]}else Array.isArray(c)&&4===(null==c?void 0:c.length)&&(u=[c[0]*a,c[1]*a,c[2]*a,c[3]*a]);e.strokeStyle=r;let g=[];Array.isArray(d)&&d.length>0&&(g=d.map((e=>Math.ceil(e*a))));let w=0,v=0,y=0,m=0;Array.isArray(s)&&(w=(s[0]||0)*a,v=(s[1]||0)*a,y=(s[2]||0)*a,m=(s[3]||0)*a);if(m||v||w||y){e.lineCap="butt";let{x:n,y:i,w:o,h:l}=t;"border-box"===h?(n+=m/2,i+=w/2,o=o-m/2-v/2,l=l-w/2-y/2):"content-box"===h?(n-=m/2,i-=w/2,o=o+m/2+v/2,l=l+w/2+y/2):(n=t.x,i=t.y,o=t.w,l=t.h),w&&(e.beginPath(),e.lineWidth=w,e.moveTo(n-m/2,i),e.lineTo(n+o+v/2,i),e.closePath(),e.stroke()),v&&(e.beginPath(),e.lineWidth=v,e.moveTo(n+o,i-w/2),e.lineTo(n+o,i+l+y/2),e.closePath(),e.stroke()),y&&(e.beginPath(),e.lineWidth=y,e.moveTo(n-m/2,i+l),e.lineTo(n+o+v/2,i+l),e.closePath(),e.stroke()),m&&(e.beginPath(),e.lineWidth=m,e.moveTo(n,i-w/2),e.lineTo(n,i+l+y/2),e.closePath(),e.stroke())}else{let{x:n,y:i,w:o,h:l}=t;"border-box"===h?(n=t.x+f/2,i=t.y+f/2,o=t.w-f,l=t.h-f):"content-box"===h?(n=t.x-f/2,i=t.y-f/2,o=t.w+f,l=t.h+f):(n=t.x,i=t.y,o=t.w,l=t.h),g.length>0?e.lineCap="butt":e.lineCap="square",o=Math.max(o,1),l=Math.max(l,1),u=u.map((e=>Math.min(e,o/2,l/2))),e.setLineDash(g),e.lineWidth=f,e.beginPath(),e.moveTo(n+u[0],i),e.arcTo(n+o,i,n+o,i+l,u[1]),e.arcTo(n+o,i+l,n,i+l,u[2]),e.arcTo(n,i+l,n,i,u[3]),e.arcTo(n,i,n+o,i,u[0]),e.closePath(),e.stroke(),e.globalAlpha=1}e.setLineDash([])}(e,t,{viewScaleInfo:r,viewSizeInfo:s}),e.globalAlpha=1}})}function Z(e,t,n){const{detail:i}=t,{viewScaleInfo:o,renderContent:l}=n,{shadowColor:a,shadowOffsetX:r,shadowOffsetY:s,shadowBlur:c}=i;_.number(c)?(e.save(),e.shadowColor=a||K.shadowColor,e.shadowOffsetX=(r||0)*o.scale,e.shadowOffsetY=(s||0)*o.scale,e.shadowBlur=(c||0)*o.scale,l(),e.restore()):l()}const ee={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};function te(e,t,n){var i;if(!0!==(null==(i=null==t?void 0:t.operations)?void 0:i.invisible))try{switch(t.type){case"rect":!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:l}=n,{x:a,y:r,w:s,h:c,angle:d}=(null==i?void 0:i.elementSize(t,o,l))||t,h={...t,x:a,y:r,w:s,h:c,angle:d};q(e,{x:a,y:r,w:s,h:c,angle:d},(()=>{Z(e,h,{viewScaleInfo:o,viewSizeInfo:l,renderContent:()=>{Q(e,h,{originElem:t,calcElemSize:{x:a,y:r,w:s,h:c,angle:d},viewScaleInfo:o,viewSizeInfo:l,renderContent:()=>{}})}})}))}(e,t,n);break;case"circle":!function(e,t,n){const{detail:i,angle:o}=t,{background:l="#000000",borderColor:a="#000000",borderWidth:r=0}=i,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:f,w:u,h:g}=(null==s?void 0:s.elementSize({x:t.x,y:t.y,w:t.w,h:t.h},c,d))||t,w={...t,x:h,y:f,w:u,h:g,angle:o};q(e,{x:h,y:f,w:u,h:g,angle:o},(()=>{Z(e,w,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{var n,i;const o=u/2,s=g/2,d=h+o,w=f+s;if(void 0!==(null==(n=null==t?void 0:t.detail)?void 0:n.opacity)&&(null==(i=null==t?void 0:t.detail)?void 0:i.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1,"number"==typeof r&&r>0){const t=r/2+o,n=r/2+s;e.beginPath(),e.strokeStyle=a,e.lineWidth=r,e.circle(d,w,t,n,0,0,2*Math.PI),e.closePath(),e.stroke()}e.beginPath();const v=J(e,l,{viewElementSize:{x:h,y:f,w:u,h:g},viewScaleInfo:c,opacity:e.globalAlpha});e.fillStyle=v,e.circle(d,w,o,s,0,0,2*Math.PI),e.closePath(),e.fill(),e.globalAlpha=1}})}))}(e,t,n);break;case"text":!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:l}=n,{x:a,y:r,w:s,h:c,angle:d}=(null==i?void 0:i.elementSize(t,o,l))||t,h={...t,x:a,y:r,w:s,h:c,angle:d};q(e,{x:a,y:r,w:s,h:c,angle:d},(()=>{Q(e,h,{originElem:t,calcElemSize:{x:a,y:r,w:s,h:c,angle:d},viewScaleInfo:o,viewSizeInfo:l,renderContent:()=>{const n={...ee,...t.detail},i=(n.fontSize||ee.fontSize)*o.scale,l=n.lineHeight?n.lineHeight*o.scale:i;e.fillStyle=t.detail.color||ee.color,e.textBaseline="top",e.$setFont({fontWeight:n.fontWeight,fontSize:i,fontFamily:n.fontFamily});const d=n.text.replace(/\r\n/gi,"\n"),h=l,f=d.split("\n"),u=[];let g=0;f.forEach(((t,n)=>{let i="";if(t.length>0){for(let o=0;o<t.length&&(e.measureText(i+(t[o]||"")).width<e.$doPixelRatio(s)?i+=t[o]||"":(u.push({text:i,width:e.$undoPixelRatio(e.measureText(i).width)}),i=t[o]||"",g++),!((g+1)*h>c));o++)if(t.length-1===o&&(g+1)*h<c){u.push({text:i,width:e.$undoPixelRatio(e.measureText(i).width)}),n<f.length-1&&g++;break}}else u.push({text:"",width:0})}));let w=0;u.length*h<c&&("top"===t.detail.verticalAlign?w=0:"bottom"===t.detail.verticalAlign?w+=c-u.length*h:w+=(c-u.length*h)/2);{const t=r+w;void 0!==n.textShadowColor&&C(n.textShadowColor)&&(e.shadowColor=n.textShadowColor),void 0!==n.textShadowOffsetX&&_.number(n.textShadowOffsetX)&&(e.shadowOffsetX=n.textShadowOffsetX),void 0!==n.textShadowOffsetY&&_.number(n.textShadowOffsetY)&&(e.shadowOffsetY=n.textShadowOffsetY),void 0!==n.textShadowBlur&&_.number(n.textShadowBlur)&&(e.shadowBlur=n.textShadowBlur),u.forEach(((i,o)=>{let l=a;"center"===n.textAlign?l=a+(s-i.width)/2:"right"===n.textAlign&&(l=a+(s-i.width)),e.fillText(i.text,l,t+h*o)}))}}})}))}(e,t,n);break;case"image":!function(e,t,n){const i=n.loader.getContent(t),{calculator:o,viewScaleInfo:l,viewSizeInfo:a}=n,{x:r,y:s,w:c,h:d,angle:h}=(null==o?void 0:o.elementSize(t,l,a))||t,f={...t,x:r,y:s,w:c,h:d,angle:h};q(e,{x:r,y:s,w:c,h:d,angle:h},(()=>{Z(e,f,{viewScaleInfo:l,viewSizeInfo:a,renderContent:()=>{Q(e,f,{originElem:t,calcElemSize:{x:r,y:s,w:c,h:d,angle:h},viewScaleInfo:l,viewSizeInfo:a,renderContent:()=>{if(i||n.loader.load(t,n.elementAssets||{}),"image"===t.type&&i){const{opacity:n}=t.detail;e.globalAlpha=n||1;const{x:o,y:r,w:s,h:c,radiusList:d}=V(f,{viewScaleInfo:l,viewSizeInfo:a});e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(o+d[0],r),e.arcTo(o+s,r,o+s,r+c,d[1]),e.arcTo(o+s,r+c,o,r+c,d[2]),e.arcTo(o,r+c,o,r,d[3]),e.arcTo(o,r,o+s,r,d[0]),e.closePath(),e.fill(),e.clip(),e.drawImage(i,o,r,s,c),e.globalAlpha=1,e.restore()}}})}})}))}(e,t,n);break;case"svg":!function(e,t,n){const i=n.loader.getContent(t),{calculator:o,viewScaleInfo:l,viewSizeInfo:a}=n,{x:r,y:s,w:c,h:d,angle:h}=(null==o?void 0:o.elementSize(t,l,a))||t;q(e,{x:r,y:s,w:c,h:d,angle:h},(()=>{if(i||n.loader.load(t,n.elementAssets||{}),"svg"===t.type&&i){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(i,r,s,c,d),e.globalAlpha=1}}))}(e,t,n);break;case"html":!function(e,t,n){const i=n.loader.getContent(t),{calculator:o,viewScaleInfo:l,viewSizeInfo:a}=n,{x:r,y:s,w:c,h:d,angle:h}=(null==o?void 0:o.elementSize(t,l,a))||t;q(e,{x:r,y:s,w:c,h:d,angle:h},(()=>{if(i||n.loader.load(t,n.elementAssets||{}),"html"===t.type&&i){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(i,r,s,c,d),e.globalAlpha=1}}))}(e,t,n);break;case"path":!function(e,t,n){const{detail:i}=t,{originX:o,originY:l,originW:a,originH:r}=i,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:f,w:u,h:g,angle:w}=(null==s?void 0:s.elementSize(t,c,d))||t,v=u/a,y=g/r,m=h-o*v,p=f-l*y,S=c.scale*d.devicePixelRatio,x={...t,x:h,y:f,w:u,h:g,angle:w};q(e,{x:h,y:f,w:u,h:g,angle:w},(()=>{Q(e,x,{originElem:t,calcElemSize:{x:h,y:f,w:u,h:g,angle:w},viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{Z(e,x,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{e.save(),e.translate(m,p),e.scale(S*v/c.scale,S*y/c.scale);const t=G(i.commands||[]),n=new Path2D(t);i.fill&&(e.fillStyle=i.fill,e.fill(n)),i.stroke&&0!==i.strokeWidth&&(e.strokeStyle=i.stroke,e.lineWidth=(i.strokeWidth||1)/d.devicePixelRatio,e.lineCap=i.strokeLineCap||"square",e.stroke(n)),e.translate(-m,-p),e.restore()}})}})}))}(e,t,n);break;case"group":{const i={...n.elementAssets||{},...t.detail.assets||{}};!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:l}=n,{x:a,y:r,w:s,h:c,angle:d}=(null==i?void 0:i.elementSize({x:t.x,y:t.y,w:t.w,h:t.h,angle:t.angle},o,l))||t,h={...t,x:a,y:r,w:s,h:c,angle:d};q(e,{x:a,y:r,w:s,h:c,angle:d},(()=>{Z(e,h,{viewScaleInfo:o,viewSizeInfo:l,renderContent:()=>{Q(e,h,{originElem:t,calcElemSize:{x:a,y:r,w:s,h:c,angle:d},viewScaleInfo:o,viewSizeInfo:l,renderContent:()=>{const{x:i,y:a,w:r,h:s,radiusList:c}=V(h,{viewScaleInfo:o,viewSizeInfo:l});if("hidden"===t.detail.overflow&&(e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(i+c[0],a),e.arcTo(i+r,a,i+r,a+s,c[1]),e.arcTo(i+r,a+s,i,a+s,c[2]),e.arcTo(i,a+s,i,a,c[3]),e.arcTo(i,a,i+r,a,c[0]),e.closePath(),e.fill(),e.clip()),Array.isArray(t.detail.children)){const{parentElementSize:i}=n,o={x:i.x+t.x,y:i.y+t.y,w:t.w||i.w,h:t.h||i.h,angle:t.angle},{calculator:l}=n;for(let i=0;i<t.detail.children.length;i++){let a=t.detail.children[i];if(a={...a,x:o.x+a.x,y:o.y+a.y},!0===n.forceDrawAll||(null==l?void 0:l.isElementInView(a,n.viewScaleInfo,n.viewSizeInfo)))try{te(e,a,{...n})}catch(e){console.error(e)}}}"hidden"===t.detail.overflow&&(e.globalAlpha=1,e.restore())}})}})}))}(e,t,{...n,elementAssets:i});break}}}catch(e){console.error(e)}}const ne={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};const ie=["image","svg","html"],oe=e=>{var t,n,i;let o=null;return"image"===e.type?o=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?o=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(o=(null==(i=null==e?void 0:e.detail)?void 0:i.html)||null),"string"==typeof o&&o?/^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${o}`)?o:$(o):$(`${k()}-${e.uuid}-${k()}-${k()}`)};class le extends j{constructor(){super(),z(this,o),z(this,a),z(this,s),z(this,d),z(this,f),z(this,g),z(this,v),z(this,t,{}),z(this,n,{}),z(this,i,{}),T(this,o,l).call(this,"image",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.src])?void 0:n.value)||e.detail.src,o=await L(i);return{uuid:e.uuid,lastModified:Date.now(),content:o}})),T(this,o,l).call(this,"html",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.html])?void 0:n.value)||e.detail.html,o=await B(i,{width:e.detail.width||e.w,height:e.detail.height||e.h});return{uuid:e.uuid,lastModified:Date.now(),content:o}})),T(this,o,l).call(this,"svg",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.svg])?void 0:n.value)||e.detail.svg,o=await D(i);return{uuid:e.uuid,lastModified:Date.now(),content:o}}))}load(e,t){T(this,v,y).call(this,e)||ie.includes(e.type)&&T(this,g,w).call(this,e,t)}getContent(e){var t,n;const o=oe(e);return(null==(n=null==(t=I(this,i))?void 0:t[o])?void 0:n.content)||null}getLoadItemMap(){return I(this,i)}setLoadItemMap(e){A(this,i,e)}}t=new WeakMap,n=new WeakMap,i=new WeakMap,o=new WeakSet,l=function(e,n){I(this,t)[e]=n},a=new WeakSet,r=function(e){var t,n,i;let o=null;return"image"===e.type?o=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?o=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(o=(null==(i=null==e?void 0:e.detail)?void 0:i.html)||null),o},s=new WeakSet,c=function(e){return{element:e,status:"null",content:null,error:null,startTime:-1,endTime:-1,source:T(this,a,r).call(this,e)}},d=new WeakSet,h=function(e){const t=oe(e.element),n=I(this,i)[t];n?n.startTime<e.startTime&&(I(this,i)[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime})):(I(this,i)[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime}))},f=new WeakSet,u=function(e){const t=oe(e.element),n=I(this,i)[t];n?n.startTime<e.startTime&&(I(this,i)[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime})):(I(this,i)[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime}))},g=new WeakSet,w=function(e,i){const o=T(this,s,c).call(this,e),l=oe(e);I(this,n)[l]=o;const a=I(this,t)[e.type];"function"==typeof a&&(o.startTime=Date.now(),a(e,i).then((e=>{o.content=e.content,o.endTime=Date.now(),o.status="load",T(this,d,h).call(this,o)})).catch((t=>{console.warn(`Load element source "${o.source}" fail`,t,e),o.endTime=Date.now(),o.status="error",o.error=t,T(this,f,u).call(this,o)})))},v=new WeakSet,y=function(e){var t;const i=oe(e),o=null==(t=I(this,n))?void 0:t[i];return!(!o||"error"!==o.status||!o.source||o.source!==T(this,a,r).call(this,e))};return m=new WeakMap,p=new WeakMap,S=new WeakSet,x=function(){const e=I(this,p);e.on("load",(e=>{this.trigger("load",e)})),e.on("error",(()=>{}))},e.Renderer=class extends j{constructor(e){super(),z(this,S),z(this,m,void 0),z(this,p,new le),A(this,m,e),T(this,S,x).call(this)}updateOptions(e){A(this,m,e)}drawData(e,t){const n=I(this,p),{calculator:i}=I(this,m),o=I(this,m).viewContext;o.clearRect(0,0,o.canvas.width,o.canvas.height);!function(e,t,n){var i;const{elements:o=[]}=t;for(let t=0;t<o.length;t++){const l=o[t],a={...l,detail:{...ne,...null==l?void 0:l.detail}};if(!0===n.forceDrawAll||(null==(i=n.calculator)?void 0:i.isElementInView(a,n.viewScaleInfo,n.viewSizeInfo)))try{te(e,a,n)}catch(e){console.error(e)}}}(o,e,{loader:n,calculator:i,parentElementSize:{x:0,y:0,w:t.viewSizeInfo.width,h:t.viewSizeInfo.height},elementAssets:e.assets,...t})}scale(e){const{sharer:t}=I(this,m);if(!t)return;const{data:n,offsetTop:i,offsetBottom:o,offsetLeft:l,offsetRight:a,width:r,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}=t.getActiveStoreSnapshot();n&&this.drawData(n,{viewScaleInfo:{scale:e,offsetTop:i,offsetBottom:o,offsetLeft:l,offsetRight:a},viewSizeInfo:{width:r,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}})}setLoadItemMap(e){I(this,p).setLoadItemMap(e)}getLoadItemMap(){return I(this,p).getLoadItemMap()}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),e}({});
+var iDrawRenderer=function(e){"use strict";var t,n,i,o,a,r,l,s,c,d,h,f,u,g,w,v,y,p,m,x,S,b=(e,t,n)=>{if(!t.has(e))throw TypeError("Cannot "+n)},I=(e,t,n)=>(b(e,t,"read from private field"),n?n.call(e):t.get(e)),z=(e,t,n)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,n)},A=(e,t,n,i)=>(b(e,t,"write to private field"),i?i.call(e,n):t.set(e,n),n),T=(e,t,n)=>(b(e,t,"access private method"),n);function C(e){return"string"==typeof e&&(/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||/^[a-z]{1,}$/i.test(e))}function E(e,t){if(1===t)return e;let n=1;const i=/^\#[0-9a-f]{6,6}$/i;let o=e;if(i.test(e)?n=parseInt(e.substring(5,7).replace(/^\#/,"0x")):/^\#[0-9a-f]{8,8}$/i.test(e)&&(n=parseInt(e.substring(7,9).replace(/^\#/,"0x")),o=e.substring(0,7)),n*=t,i.test(o)&&n>0&&n<1){const e=Math.max(0,Math.min(255,Math.ceil(256*n)));o=`${o.toUpperCase()}${e.toString(16).toUpperCase()}`}return o}function k(){function e(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${e()}${e()}-${e()}-${e()}-${e()}-${e()}${e()}${e()}`}function O(e){let t=0;for(let n=0;n<e.length;n++)t+=e.charCodeAt(n)*e.charCodeAt(n)*n*n;return t.toString(16).substring(0,4)}function W(e){const t=e.length,n=Math.floor(t/2),i=e.substring(0,4).padEnd(4,"0"),o=e.substring(0,4).padEnd(4,"0");return`@assets/${O(t.toString(16).padEnd(4,i))}${O(e.substring(n-4,n).padEnd(4,i)).padEnd(4,"f")}-${O(e.substring(n-8,n-4).padEnd(4,i)).padEnd(4,"f")}-${O(e.substring(n-12,n-8).padEnd(4,i)).padEnd(4,"f")}-${O(e.substring(n-16,n-12).padEnd(4,o)).padEnd(4,"f")}-${O(e.substring(n,n+4).padEnd(4,o)).padEnd(4,"f")}${O(e.substring(n+4,n+8).padEnd(4,o)).padEnd(4,"f")}${O(o.padEnd(4,i).padEnd(4,o))}`}function $(e){return(Object.prototype.toString.call(e)||"").replace(/(\[object|\])/gi,"").trim()}const P={type(e,t){const n=$(e);return!0===t?n.toLocaleLowerCase():n},array:e=>"Array"===$(e),json:e=>"Object"===$(e),function:e=>"Function"===$(e),asyncFunction:e=>"AsyncFunction"===$(e),string:e=>"String"===$(e),number:e=>"Number"===$(e),undefined:e=>"Undefined"===$(e),null:e=>"Null"===$(e),promise:e=>"Promise"===$(e)};var M=function(e,t,n,i){return new(n||(n=Promise))((function(o,a){function r(e){try{s(i.next(e))}catch(e){a(e)}}function l(e){try{s(i.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(r,l)}s((i=i.apply(e,t||[])).next())}))};const{Image:R}=window;function L(e){return new Promise(((t,n)=>{const i=new R;i.crossOrigin="anonymous",i.onload=function(){t(i)},i.onabort=n,i.onerror=n,i.src=e}))}function D(e){return M(this,void 0,void 0,(function*(){const t=yield function(e){return new Promise(((t,n)=>{const i=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(i),o.onload=function(e){var n;const i=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(i)},o.onerror=function(e){n(e)}}))}(e);return yield L(t)}))}function B(e,t){return M(this,void 0,void 0,(function*(){e=e.replace(/\&/gi,"&amp;");const n=yield function(e,t){const{width:n,height:i}=t;return new Promise(((t,o)=>{const a=new Blob([`\n    <svg \n      xmlns="http://www.w3.org/2000/svg" \n      width="${n||""}" \n      height = "${i||""}">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ${e}\n        </div>\n      </foreignObject>\n    </svg>\n    `],{type:"image/svg+xml;charset=utf-8"}),r=new FileReader;r.readAsDataURL(a),r.onload=function(e){var n;const i=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(i)},r.onerror=function(e){o(e)}}))}(e,t);return yield L(n)}))}function F(e){return"number"==typeof e&&(e>0||e<=0)}function H(e){return"number"==typeof e&&e>=0}function X(e){return"string"==typeof e&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${e}`)}function Y(e){return"string"==typeof e&&/^(data:image\/)/.test(`${e}`)}const _={x:function(e){return F(e)},y:function(e){return F(e)},w:H,h:function(e){return"number"==typeof e&&e>=0},angle:function(e){return"number"==typeof e&&e>=-360&&e<=360},number:F,numberStr:function(e){return/^(-?\d+(?:\.\d+)?)$/.test(`${e}`)},borderWidth:function(e){return H(e)},borderRadius:function(e){return F(e)&&e>=0},color:function(e){return C(e)},imageSrc:function(e){return Y(e)||X(e)},imageURL:X,imageBase64:Y,svg:function(e){return"string"==typeof e&&/^(<svg[\s]{1,}|<svg>)/i.test(`${e}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${e}`.trim())},html:function(e){let t=!1;if("string"==typeof e){let n=document.createElement("div");n.innerHTML=e,n.children.length>0&&(t=!0),n=null}return t},text:function(e){return"string"==typeof e},fontSize:function(e){return F(e)&&e>0},lineHeight:function(e){return F(e)&&e>0},textAlign:function(e){return["center","left","right"].includes(e)},fontFamily:function(e){return"string"==typeof e&&e.length>0},fontWeight:function(e){return["bold"].includes(e)},strokeWidth:function(e){return F(e)&&e>0}};class j{constructor(){this._listeners=new Map}on(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e)||[];null==n||n.push(t),this._listeners.set(e,n)}else this._listeners.set(e,[t])}off(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e);if(Array.isArray(n))for(let e=0;e<(null==n?void 0:n.length);e++)if(n[e]===t){n.splice(e,1);break}this._listeners.set(e,n||[])}}trigger(e,t){const n=this._listeners.get(e);return!!Array.isArray(n)&&(n.forEach((e=>{e(t)})),!0)}has(e){if(this._listeners.has(e)){const t=this._listeners.get(e);if(Array.isArray(t)&&t.length>0)return!0}return!1}}function U(e,t,n,i){const o=function(e){return e/180*Math.PI}(t||0);n&&(o>0||o<0)&&(e.translate(n.x,n.y),e.rotate(o),e.translate(-n.x,-n.y)),i(e),n&&(o>0||o<0)&&(e.translate(n.x,n.y),e.rotate(-o),e.translate(-n.x,-n.y))}function q(e,t,n){const i={x:(o=t).x+o.w/2,y:o.y+o.h/2};var o;U(e,t.angle||0,i,(()=>{n(e)}))}function G(e){let t="";return e.forEach((e=>{t+=e.type+e.params.join(" ")})),t}const N={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};function V(e,t){const{viewScaleInfo:n}=t,{scale:i}=n;let{borderRadius:o}=e.detail;const{boxSizing:a=N.boxSizing,borderWidth:r}=e.detail;Array.isArray(r)&&(o=0);let{x:l,y:s,w:c,h:d}=e,h=[0,0,0,0];if("number"==typeof o){const e=o*i;h=[e,e,e,e]}else Array.isArray(o)&&4===(null==o?void 0:o.length)&&(h=[o[0]*i,o[1]*i,o[2]*i,o[3]*i]);let f=0;return"number"==typeof r&&(f=(r||0)*i),"border-box"===a?(l=e.x+f/2,s=e.y+f/2,c=e.w-f,d=e.h-f):"content-box"===a?(l=e.x-f/2,s=e.y-f/2,c=e.w+f,d=e.h+f):(l=e.x,s=e.y,c=e.w,d=e.h),c=Math.max(c,1),d=Math.max(d,1),h=h.map((e=>Math.min(e,c/2,d/2))),{x:l,y:s,w:c,h:d,radiusList:h}}function J(e,t,n){if("string"==typeof t)return t;const{viewElementSize:i,viewScaleInfo:o,opacity:a=1}=n,{x:r,y:l}=i,{scale:s}=o;if("linear-gradient"===(null==t?void 0:t.type)){const{start:n,end:i,stops:o}=t,c={x:r+n.x*s,y:l+n.y*s},d={x:r+i.x*s,y:l+i.y*s},h=e.createLinearGradient(c.x,c.y,d.x,d.y);return o.forEach((e=>{h.addColorStop(e.offset,E(e.color,a))})),h}if("radial-gradient"===(null==t?void 0:t.type)){const{inner:n,outer:i,stops:o}=t,c={x:r+n.x*s,y:l+n.y*s,radius:n.radius*s},d={x:r+i.x*s,y:l+i.y*s,radius:i.radius*s},h=e.createRadialGradient(c.x,c.y,c.radius,d.x,d.y,d.radius);return o.forEach((e=>{h.addColorStop(e.offset,E(e.color,a))})),h}return"#000000"}const K={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};function Q(e){var t,n,i,o;let a=1;return void 0!==(null==(t=null==e?void 0:e.detail)?void 0:t.opacity)&&(null==(n=null==e?void 0:e.detail)?void 0:n.opacity)>=0&&(null==(i=null==e?void 0:e.detail)?void 0:i.opacity)<=1&&(a=null==(o=null==e?void 0:e.detail)?void 0:o.opacity),a}function Z(e,t,n){const{pattern:i,renderContent:o,originElem:a,calcElemSize:r,viewScaleInfo:l,viewSizeInfo:s}=n||{},{parentOpacity:c}=n,d=Q(a)*c;!function(e,t,n){const{renderContent:i,originElem:o,calcElemSize:a,viewScaleInfo:r,viewSizeInfo:l}=n,s=r.scale*l.devicePixelRatio,{clipPath:c}=(null==o?void 0:o.detail)||{};if(c&&a&&c.commands){const{x:n,y:o,w:r,h:l}=a,{originW:d,originH:h,originX:f,originY:u}=c,g=r/d,w=l/h,v=n-f*g,y=o-u*w;e.save(),e.translate(v,y),e.scale(s*g,s*w);const p=G(c.commands||[]),m=new Path2D(p);e.clip(m),e.translate(0-v,0-y),e.setTransform(1,0,0,1,0,0),q(e,{...t},(()=>{null==i||i()})),e.restore()}else null==i||i()}(e,t,{originElem:a,calcElemSize:r,viewScaleInfo:l,viewSizeInfo:s,renderContent:()=>{e.globalAlpha=d,function(e,t,n){var i,o;const{pattern:a,viewScaleInfo:r,viewSizeInfo:l}=n,s=[];if(t.detail.background||a){const{x:n,y:c,w:d,h:h,radiusList:f}=V(t,{viewScaleInfo:r,viewSizeInfo:l});if(e.beginPath(),e.moveTo(n+f[0],c),e.arcTo(n+d,c,n+d,c+h,f[1]),e.arcTo(n+d,c+h,n,c+h,f[2]),e.arcTo(n,c+h,n,c,f[3]),e.arcTo(n,c,n+d,c,f[0]),e.closePath(),"string"==typeof a)e.fillStyle=a;else if(["CanvasPattern"].includes(P.type(a)))e.fillStyle=a;else if("string"==typeof t.detail.background)e.fillStyle=t.detail.background;else if("linear-gradient"===(null==(i=t.detail.background)?void 0:i.type)){const i=J(e,t.detail.background,{viewElementSize:{x:n,y:c,w:d,h:h},viewScaleInfo:r,opacity:e.globalAlpha});e.fillStyle=i}else if("radial-gradient"===(null==(o=t.detail.background)?void 0:o.type)){const i=J(e,t.detail.background,{viewElementSize:{x:n,y:c,w:d,h:h},viewScaleInfo:r,opacity:e.globalAlpha});if(e.fillStyle=i,s&&s.length>0)for(let t=0;t<(null==s?void 0:s.length);t++){const i=s[t];"translate"===i.method?e.translate(i.args[0]+n,i.args[1]+c):"rotate"===i.method?e.rotate(...i.args):"scale"===i.method&&e.scale(...i.args)}}e.fill(),s&&s.length>0&&e.setTransform(1,0,0,1,0,0)}}(e,t,{pattern:i,viewScaleInfo:l,viewSizeInfo:s}),null==o||o(),function(e,t,n){if(0===t.detail.borderWidth)return;if(!C(t.detail.borderColor))return;const{viewScaleInfo:i}=n,{scale:o}=i;let a=K.borderColor;!0===C(t.detail.borderColor)&&(a=t.detail.borderColor);const{borderWidth:r,borderRadius:l,borderDash:s,boxSizing:c=K.boxSizing}=t.detail;let d=0;"number"==typeof r&&(d=r||1);d*=o;let h=[0,0,0,0];if("number"==typeof l){const e=l*o;h=[e,e,e,e]}else Array.isArray(l)&&4===(null==l?void 0:l.length)&&(h=[l[0]*o,l[1]*o,l[2]*o,l[3]*o]);e.strokeStyle=a;let f=[];Array.isArray(s)&&s.length>0&&(f=s.map((e=>Math.ceil(e*o))));let u=0,g=0,w=0,v=0;Array.isArray(r)&&(u=(r[0]||0)*o,g=(r[1]||0)*o,w=(r[2]||0)*o,v=(r[3]||0)*o);if(v||g||u||w){e.lineCap="butt";let{x:n,y:i,w:o,h:a}=t;"border-box"===c?(n+=v/2,i+=u/2,o=o-v/2-g/2,a=a-u/2-w/2):"content-box"===c?(n-=v/2,i-=u/2,o=o+v/2+g/2,a=a+u/2+w/2):(n=t.x,i=t.y,o=t.w,a=t.h),u&&(e.beginPath(),e.lineWidth=u,e.moveTo(n-v/2,i),e.lineTo(n+o+g/2,i),e.closePath(),e.stroke()),g&&(e.beginPath(),e.lineWidth=g,e.moveTo(n+o,i-u/2),e.lineTo(n+o,i+a+w/2),e.closePath(),e.stroke()),w&&(e.beginPath(),e.lineWidth=w,e.moveTo(n-v/2,i+a),e.lineTo(n+o+g/2,i+a),e.closePath(),e.stroke()),v&&(e.beginPath(),e.lineWidth=v,e.moveTo(n,i-u/2),e.lineTo(n,i+a+w/2),e.closePath(),e.stroke())}else{let{x:n,y:i,w:o,h:a}=t;"border-box"===c?(n=t.x+d/2,i=t.y+d/2,o=t.w-d,a=t.h-d):"content-box"===c?(n=t.x-d/2,i=t.y-d/2,o=t.w+d,a=t.h+d):(n=t.x,i=t.y,o=t.w,a=t.h),f.length>0?e.lineCap="butt":e.lineCap="square",o=Math.max(o,1),a=Math.max(a,1),h=h.map((e=>Math.min(e,o/2,a/2))),e.setLineDash(f),e.lineWidth=d,e.beginPath(),e.moveTo(n+h[0],i),e.arcTo(n+o,i,n+o,i+a,h[1]),e.arcTo(n+o,i+a,n,i+a,h[2]),e.arcTo(n,i+a,n,i,h[3]),e.arcTo(n,i,n+o,i,h[0]),e.closePath(),e.stroke()}e.setLineDash([])}(e,t,{viewScaleInfo:l,viewSizeInfo:s}),e.globalAlpha=c}})}function ee(e,t,n){const{detail:i}=t,{viewScaleInfo:o,renderContent:a}=n,{shadowColor:r,shadowOffsetX:l,shadowOffsetY:s,shadowBlur:c}=i;_.number(c)?(e.save(),e.shadowColor=r||K.shadowColor,e.shadowOffsetX=(l||0)*o.scale,e.shadowOffsetY=(s||0)*o.scale,e.shadowBlur=(c||0)*o.scale,a(),e.restore()):a()}const te={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};function ne(e,t,n){var i;if(!0!==(null==(i=null==t?void 0:t.operations)?void 0:i.invisible))try{switch(t.type){case"rect":!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:a,parentOpacity:r}=n,{x:l,y:s,w:c,h:d,angle:h}=(null==i?void 0:i.elementSize(t,o,a))||t,f={...t,x:l,y:s,w:c,h:d,angle:h};q(e,{x:l,y:s,w:c,h:d,angle:h},(()=>{ee(e,f,{viewScaleInfo:o,viewSizeInfo:a,renderContent:()=>{Z(e,f,{originElem:t,calcElemSize:{x:l,y:s,w:c,h:d,angle:h},viewScaleInfo:o,viewSizeInfo:a,parentOpacity:r,renderContent:()=>{}})}})}))}(e,t,n);break;case"circle":!function(e,t,n){const{detail:i,angle:o}=t,{background:a="#000000",borderColor:r="#000000",boxSizing:l,borderWidth:s=0}=i;let c=0;"number"==typeof s&&s>0?c=s:Array.isArray(s)&&"number"==typeof s[0]&&s[0]>0&&(c=s[0]);const{calculator:d,viewScaleInfo:h,viewSizeInfo:f,parentOpacity:u}=n,{x:g,y:w,w:v,h:y}=(null==d?void 0:d.elementSize({x:t.x,y:t.y,w:t.w,h:t.h},h,f))||t,p={...t,x:g,y:w,w:v,h:y,angle:o};q(e,{x:g,y:w,w:v,h:y,angle:o},(()=>{ee(e,p,{viewScaleInfo:h,viewSizeInfo:f,renderContent:()=>{let t=v/2,n=y/2;const i=g+t,o=w+n;c>0&&("border-box"===l?(t-=c,n-=c):"center-line"===l?(t-=c/2,n-=c/2):(t-=c,n-=c));const d=Q(p)*u;if(e.globalAlpha=d,"number"==typeof s&&s>0){const a=s/2+t,l=s/2+n;e.beginPath(),e.strokeStyle=r,e.lineWidth=s,e.circle(i,o,a,l,0,0,2*Math.PI),e.closePath(),e.stroke()}e.beginPath();const f=J(e,a,{viewElementSize:{x:g,y:w,w:v,h:y},viewScaleInfo:h,opacity:e.globalAlpha});e.fillStyle=f,e.circle(i,o,t,n,0,0,2*Math.PI),e.closePath(),e.fill(),e.globalAlpha=u}})}))}(e,t,n);break;case"text":!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:a,parentOpacity:r}=n,{x:l,y:s,w:c,h:d,angle:h}=(null==i?void 0:i.elementSize(t,o,a))||t,f={...t,x:l,y:s,w:c,h:d,angle:h};q(e,{x:l,y:s,w:c,h:d,angle:h},(()=>{Z(e,f,{originElem:t,calcElemSize:{x:l,y:s,w:c,h:d,angle:h},viewScaleInfo:o,viewSizeInfo:a,parentOpacity:r,renderContent:()=>{const n={...te,...t.detail},i=(n.fontSize||te.fontSize)*o.scale,a=n.lineHeight?n.lineHeight*o.scale:i;e.fillStyle=t.detail.color||te.color,e.textBaseline="top",e.$setFont({fontWeight:n.fontWeight,fontSize:i,fontFamily:n.fontFamily});const r=n.text.replace(/\r\n/gi,"\n"),h=a,f=r.split("\n"),u=[];let g=0;f.forEach(((t,n)=>{let i="";if(t.length>0){for(let o=0;o<t.length&&(e.measureText(i+(t[o]||"")).width<e.$doPixelRatio(c)?i+=t[o]||"":(u.push({text:i,width:e.$undoPixelRatio(e.measureText(i).width)}),i=t[o]||"",g++),!((g+1)*h>d));o++)if(t.length-1===o&&(g+1)*h<d){u.push({text:i,width:e.$undoPixelRatio(e.measureText(i).width)}),n<f.length-1&&g++;break}}else u.push({text:"",width:0})}));let w=0;u.length*h<d&&("top"===t.detail.verticalAlign?w=0:"bottom"===t.detail.verticalAlign?w+=d-u.length*h:w+=(d-u.length*h)/2);{const t=s+w;void 0!==n.textShadowColor&&C(n.textShadowColor)&&(e.shadowColor=n.textShadowColor),void 0!==n.textShadowOffsetX&&_.number(n.textShadowOffsetX)&&(e.shadowOffsetX=n.textShadowOffsetX),void 0!==n.textShadowOffsetY&&_.number(n.textShadowOffsetY)&&(e.shadowOffsetY=n.textShadowOffsetY),void 0!==n.textShadowBlur&&_.number(n.textShadowBlur)&&(e.shadowBlur=n.textShadowBlur),u.forEach(((i,o)=>{let a=l;"center"===n.textAlign?a=l+(c-i.width)/2:"right"===n.textAlign&&(a=l+(c-i.width)),e.fillText(i.text,a,t+h*o)}))}}})}))}(e,t,n);break;case"image":!function(e,t,n){const i=n.loader.getContent(t),{calculator:o,viewScaleInfo:a,viewSizeInfo:r,parentOpacity:l}=n,{x:s,y:c,w:d,h:h,angle:f}=(null==o?void 0:o.elementSize(t,a,r))||t,u={...t,x:s,y:c,w:d,h:h,angle:f};q(e,{x:s,y:c,w:d,h:h,angle:f},(()=>{ee(e,u,{viewScaleInfo:a,viewSizeInfo:r,renderContent:()=>{Z(e,u,{originElem:t,calcElemSize:{x:s,y:c,w:d,h:h,angle:f},viewScaleInfo:a,viewSizeInfo:r,parentOpacity:l,renderContent:()=>{if(i||n.loader.load(t,n.elementAssets||{}),"image"===t.type&&i){e.globalAlpha=Q(t)*l;const{x:n,y:o,w:s,h:c,radiusList:d}=V(u,{viewScaleInfo:a,viewSizeInfo:r});e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(n+d[0],o),e.arcTo(n+s,o,n+s,o+c,d[1]),e.arcTo(n+s,o+c,n,o+c,d[2]),e.arcTo(n,o+c,n,o,d[3]),e.arcTo(n,o,n+s,o,d[0]),e.closePath(),e.fill(),e.clip(),e.drawImage(i,n,o,s,c),e.globalAlpha=l,e.restore()}}})}})}))}(e,t,n);break;case"svg":!function(e,t,n){const i=n.loader.getContent(t),{calculator:o,viewScaleInfo:a,viewSizeInfo:r,parentOpacity:l}=n,{x:s,y:c,w:d,h:h,angle:f}=(null==o?void 0:o.elementSize(t,a,r))||t;q(e,{x:s,y:c,w:d,h:h,angle:f},(()=>{i||n.loader.load(t,n.elementAssets||{}),"svg"===t.type&&i&&(e.globalAlpha=Q(t)*l,e.drawImage(i,s,c,d,h),e.globalAlpha=l)}))}(e,t,n);break;case"html":!function(e,t,n){const i=n.loader.getContent(t),{calculator:o,viewScaleInfo:a,viewSizeInfo:r,parentOpacity:l}=n,{x:s,y:c,w:d,h:h,angle:f}=(null==o?void 0:o.elementSize(t,a,r))||t;q(e,{x:s,y:c,w:d,h:h,angle:f},(()=>{i||n.loader.load(t,n.elementAssets||{}),"html"===t.type&&i&&(e.globalAlpha=Q(t)*l,e.drawImage(i,s,c,d,h),e.globalAlpha=l)}))}(e,t,n);break;case"path":!function(e,t,n){const{detail:i}=t,{originX:o,originY:a,originW:r,originH:l}=i,{calculator:s,viewScaleInfo:c,viewSizeInfo:d,parentOpacity:h}=n,{x:f,y:u,w:g,h:w,angle:v}=(null==s?void 0:s.elementSize(t,c,d))||t,y=g/r,p=w/l,m=f-o*y,x=u-a*p,S=c.scale*d.devicePixelRatio,b={...t,x:f,y:u,w:g,h:w,angle:v};q(e,{x:f,y:u,w:g,h:w,angle:v},(()=>{Z(e,b,{originElem:t,calcElemSize:{x:f,y:u,w:g,h:w,angle:v},viewScaleInfo:c,viewSizeInfo:d,parentOpacity:h,renderContent:()=>{ee(e,b,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{e.save(),e.translate(m,x),e.scale(S*y/c.scale,S*p/c.scale);const t=G(i.commands||[]),n=new Path2D(t);i.fill&&(e.fillStyle=i.fill,e.fill(n)),i.stroke&&0!==i.strokeWidth&&(e.strokeStyle=i.stroke,e.lineWidth=(i.strokeWidth||1)/d.devicePixelRatio,e.lineCap=i.strokeLineCap||"square",e.stroke(n)),e.translate(-m,-x),e.restore()}})}})}))}(e,t,n);break;case"group":{const i={...n.elementAssets||{},...t.detail.assets||{}};!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:a,parentOpacity:r}=n,{x:l,y:s,w:c,h:d,angle:h}=(null==i?void 0:i.elementSize({x:t.x,y:t.y,w:t.w,h:t.h,angle:t.angle},o,a))||t,f={...t,x:l,y:s,w:c,h:d,angle:h};q(e,{x:l,y:s,w:c,h:d,angle:h},(()=>{e.globalAlpha=Q(t)*r,ee(e,f,{viewScaleInfo:o,viewSizeInfo:a,renderContent:()=>{Z(e,f,{originElem:t,calcElemSize:{x:l,y:s,w:c,h:d,angle:h},viewScaleInfo:o,viewSizeInfo:a,parentOpacity:r,renderContent:()=>{const{x:i,y:l,w:s,h:c,radiusList:d}=V(f,{viewScaleInfo:o,viewSizeInfo:a});if("hidden"===t.detail.overflow&&(e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(i+d[0],l),e.arcTo(i+s,l,i+s,l+c,d[1]),e.arcTo(i+s,l+c,i,l+c,d[2]),e.arcTo(i,l+c,i,l,d[3]),e.arcTo(i,l,i+s,l,d[0]),e.closePath(),e.fill(),e.clip()),Array.isArray(t.detail.children)){const{parentElementSize:i}=n,o={x:i.x+t.x,y:i.y+t.y,w:t.w||i.w,h:t.h||i.h,angle:t.angle},{calculator:a}=n;for(let i=0;i<t.detail.children.length;i++){let l=t.detail.children[i];if(l={...l,x:o.x+l.x,y:o.y+l.y},!0===n.forceDrawAll||(null==a?void 0:a.isElementInView(l,n.viewScaleInfo,n.viewSizeInfo)))try{ne(e,l,{...n,parentOpacity:r*Q(t)})}catch(e){console.error(e)}}}"hidden"===t.detail.overflow&&e.restore()}})}}),e.globalAlpha=r}))}(e,t,{...n,elementAssets:i});break}}}catch(e){console.error(e)}}const ie={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400,overflow:"hidden"};const oe=["image","svg","html"],ae=e=>{var t,n,i;let o=null;return"image"===e.type?o=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?o=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(o=(null==(i=null==e?void 0:e.detail)?void 0:i.html)||null),"string"==typeof o&&o?/^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${o}`)?o:W(o):W(`${k()}-${e.uuid}-${k()}-${k()}`)};class re extends j{constructor(){super(),z(this,o),z(this,r),z(this,s),z(this,d),z(this,f),z(this,g),z(this,v),z(this,t,{}),z(this,n,{}),z(this,i,{}),T(this,o,a).call(this,"image",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.src])?void 0:n.value)||e.detail.src,o=await L(i);return{uuid:e.uuid,lastModified:Date.now(),content:o}})),T(this,o,a).call(this,"html",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.html])?void 0:n.value)||e.detail.html,o=await B(i,{width:e.detail.originW||e.w,height:e.detail.originH||e.h});return{uuid:e.uuid,lastModified:Date.now(),content:o}})),T(this,o,a).call(this,"svg",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.svg])?void 0:n.value)||e.detail.svg,o=await D(i);return{uuid:e.uuid,lastModified:Date.now(),content:o}}))}load(e,t){T(this,v,y).call(this,e)||oe.includes(e.type)&&T(this,g,w).call(this,e,t)}getContent(e){var t,n;const o=ae(e);return(null==(n=null==(t=I(this,i))?void 0:t[o])?void 0:n.content)||null}getLoadItemMap(){return I(this,i)}setLoadItemMap(e){A(this,i,e)}}t=new WeakMap,n=new WeakMap,i=new WeakMap,o=new WeakSet,a=function(e,n){I(this,t)[e]=n},r=new WeakSet,l=function(e){var t,n,i;let o=null;return"image"===e.type?o=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?o=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(o=(null==(i=null==e?void 0:e.detail)?void 0:i.html)||null),o},s=new WeakSet,c=function(e){return{element:e,status:"null",content:null,error:null,startTime:-1,endTime:-1,source:T(this,r,l).call(this,e)}},d=new WeakSet,h=function(e){const t=ae(e.element),n=I(this,i)[t];n?n.startTime<e.startTime&&(I(this,i)[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime})):(I(this,i)[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime}))},f=new WeakSet,u=function(e){const t=ae(e.element),n=I(this,i)[t];n?n.startTime<e.startTime&&(I(this,i)[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime})):(I(this,i)[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime}))},g=new WeakSet,w=function(e,i){const o=T(this,s,c).call(this,e),a=ae(e);I(this,n)[a]=o;const r=I(this,t)[e.type];"function"==typeof r&&(o.startTime=Date.now(),r(e,i).then((e=>{o.content=e.content,o.endTime=Date.now(),o.status="load",T(this,d,h).call(this,o)})).catch((t=>{console.warn(`Load element source "${o.source}" fail`,t,e),o.endTime=Date.now(),o.status="error",o.error=t,T(this,f,u).call(this,o)})))},v=new WeakSet,y=function(e){var t;const i=ae(e),o=null==(t=I(this,n))?void 0:t[i];return!(!o||"error"!==o.status||!o.source||o.source!==T(this,r,l).call(this,e))};return p=new WeakMap,m=new WeakMap,x=new WeakSet,S=function(){const e=I(this,m);e.on("load",(e=>{this.trigger("load",e)})),e.on("error",(()=>{}))},e.Renderer=class extends j{constructor(e){super(),z(this,x),z(this,p,void 0),z(this,m,new re),A(this,p,e),T(this,x,S).call(this)}updateOptions(e){A(this,p,e)}drawData(e,t){const n=I(this,m),{calculator:i}=I(this,p),o=I(this,p).viewContext;o.clearRect(0,0,o.canvas.width,o.canvas.height);!function(e,t,n){var i;const{elements:o=[]}=t,{parentOpacity:a}=n;for(let t=0;t<o.length;t++){const r=o[t],l={...r,detail:{...ie,...null==r?void 0:r.detail}};if(!0===n.forceDrawAll||(null==(i=n.calculator)?void 0:i.isElementInView(l,n.viewScaleInfo,n.viewSizeInfo)))try{ne(e,l,{...n,parentOpacity:a})}catch(e){console.error(e)}}}(o,e,{loader:n,calculator:i,parentElementSize:{x:0,y:0,w:t.viewSizeInfo.width,h:t.viewSizeInfo.height},elementAssets:e.assets,parentOpacity:1,...t})}scale(e){const{sharer:t}=I(this,p);if(!t)return;const{data:n,offsetTop:i,offsetBottom:o,offsetLeft:a,offsetRight:r,width:l,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}=t.getActiveStoreSnapshot();n&&this.drawData(n,{viewScaleInfo:{scale:e,offsetTop:i,offsetBottom:o,offsetLeft:a,offsetRight:r},viewSizeInfo:{width:l,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}})}setLoadItemMap(e){I(this,m).setLoadItemMap(e)}getLoadItemMap(){return I(this,m).getLoadItemMap()}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),e}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/renderer",
-  "version": "0.4.0-beta.4",
+  "version": "0.4.0-beta.5",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -21,11 +21,11 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "^0.4.0-beta.4"
+    "@idraw/types": "^0.4.0-beta.5"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/util": "^0.4.0-beta.4"
+    "@idraw/util": "^0.4.0-beta.5"
   },
   "publishConfig": {
     "access": "public",