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

package/dist/index.global.js

@@ -1,5 +1,28 @@
 var iDrawRenderer = function(exports) {
-  "use strict";
+  "use strict";var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+
+  var _loadFuncMap, _currentLoadItemMap, _storageLoadItemMap, _registerLoadFunc, registerLoadFunc_fn, _getLoadElementSource, getLoadElementSource_fn, _createLoadItem, createLoadItem_fn, _emitLoad, emitLoad_fn, _emitError, emitError_fn, _loadResource, loadResource_fn, _isExistingErrorStorage, isExistingErrorStorage_fn, _opts, _loader, _init, init_fn;
   function isColorStr(color2) {
     return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
@@ -310,22 +333,40 @@ var iDrawRenderer = function(exports) {
       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 __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 = 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 _EventEmitter_listeners;
   class EventEmitter {
     constructor() {
-      this._listeners = /* @__PURE__ */ new Map();
+      _EventEmitter_listeners.set(this, void 0);
+      __classPrivateFieldSet(this, _EventEmitter_listeners, /* @__PURE__ */ new Map(), "f");
     }
     on(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey) || [];
+      if (__classPrivateFieldGet(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(eventKey) || [];
         callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
-        this._listeners.set(eventKey, callbacks);
+        __classPrivateFieldGet(this, _EventEmitter_listeners, "f").set(eventKey, callbacks);
       } else {
-        this._listeners.set(eventKey, [callback]);
+        __classPrivateFieldGet(this, _EventEmitter_listeners, "f").set(eventKey, [callback]);
       }
     }
     off(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+      if (__classPrivateFieldGet(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(eventKey);
         if (Array.isArray(callbacks)) {
           for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
             if (callbacks[i] === callback) {
@@ -334,11 +375,11 @@ var iDrawRenderer = function(exports) {
             }
           }
         }
-        this._listeners.set(eventKey, callbacks || []);
+        __classPrivateFieldGet(this, _EventEmitter_listeners, "f").set(eventKey, callbacks || []);
       }
     }
     trigger(eventKey, e) {
-      const callbacks = this._listeners.get(eventKey);
+      const callbacks = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(eventKey);
       if (Array.isArray(callbacks)) {
         callbacks.forEach((cb) => {
           cb(e);
@@ -349,15 +390,35 @@ var iDrawRenderer = function(exports) {
       }
     }
     has(name) {
-      if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
+      if (__classPrivateFieldGet(this, _EventEmitter_listeners, "f").has(name)) {
+        const list = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
       }
       return false;
     }
+    destroy() {
+      __classPrivateFieldGet(this, _EventEmitter_listeners, "f").clear();
+    }
   }
+  _EventEmitter_listeners = /* @__PURE__ */ new WeakMap();
+  (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;
+  });
+  (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);
+  });
   function parseAngleToRadian(angle2) {
     return angle2 / 180 * Math.PI;
   }
@@ -422,8 +483,9 @@ var iDrawRenderer = function(exports) {
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2, boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
-    if (typeof borderWidth2 !== "number") {
+    let { borderRadius: borderRadius2 } = viewElem.detail;
+    const { boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
+    if (Array.isArray(borderWidth2)) {
       borderRadius2 = 0;
     }
     let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
@@ -511,30 +573,35 @@ var iDrawRenderer = function(exports) {
     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;
       }
     });
   }
   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 ? void 0 : originElem.detail) || {};
     if (clipPath && calcElemSize && clipPath.commands) {
       const { x: x2, y: y2, w: w2, h: h2 } = calcElemSize;
@@ -543,8 +610,8 @@ var iDrawRenderer = function(exports) {
       const scaleH = h2 / originH;
       const viewOriginX = originX * scaleW;
       const viewOriginY = originY * scaleH;
-      let internalX = x2 - viewOriginX;
-      let internalY = y2 - viewOriginY;
+      const internalX = x2 - viewOriginX;
+      const internalY = y2 - viewOriginY;
       ctx.save();
       ctx.translate(internalX, internalY);
       ctx.scale(totalScale * scaleW, totalScale * scaleH);
@@ -564,8 +631,7 @@ var iDrawRenderer = function(exports) {
   function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
-    let transform = [];
-    viewElem.detail;
+    const transform = [];
     if (viewElem.detail.background || pattern) {
       const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
         viewScaleInfo,
@@ -618,18 +684,12 @@ var iDrawRenderer = function(exports) {
     }
   }
   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;
@@ -753,7 +813,6 @@ var iDrawRenderer = function(exports) {
       ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
       ctx.closePath();
       ctx.stroke();
-      ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
   }
@@ -775,53 +834,69 @@ var iDrawRenderer = function(exports) {
   }
   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 { x: x2, y: y2, w: w2, h: h2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
+    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 }, () => {
       drawBoxShadow(ctx, viewElem, {
         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;
+            }
           }
-          if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
-            const ba = borderWidth2 / 2 + a;
-            const bb = borderWidth2 / 2 + b;
+          if (a >= 0 && b >= 0) {
+            const opacity = getOpacity(viewElem) * parentOpacity;
+            ctx.globalAlpha = opacity;
+            if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+              const ba = borderWidth2 / 2 + a;
+              const bb = borderWidth2 / 2 + b;
+              ctx.beginPath();
+              ctx.strokeStyle = borderColor;
+              ctx.lineWidth = borderWidth2;
+              ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+              ctx.closePath();
+              ctx.stroke();
+            }
             ctx.beginPath();
-            ctx.strokeStyle = borderColor;
-            ctx.lineWidth = borderWidth2;
-            ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+            const fillStyle = createColorStyle(ctx, background, {
+              viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
+              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: x2, y: y2, w: w2, h: h2 },
-            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;
         }
       });
     });
   }
   function drawRect(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    let { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -833,6 +908,7 @@ var iDrawRenderer = function(exports) {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
             }
           });
@@ -842,8 +918,8 @@ var iDrawRenderer = function(exports) {
   }
   function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -855,13 +931,13 @@ var iDrawRenderer = function(exports) {
             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
@@ -878,7 +954,7 @@ var iDrawRenderer = function(exports) {
                 ctx.fill();
                 ctx.clip();
                 ctx.drawImage(content, x22, y22, w22, h22);
-                ctx.globalAlpha = 1;
+                ctx.globalAlpha = parentOpacity;
                 ctx.restore();
               }
             }
@@ -889,40 +965,38 @@ var iDrawRenderer = function(exports) {
   }
   function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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 }, () => {
       drawBox(ctx, viewElem, {
@@ -930,6 +1004,7 @@ var iDrawRenderer = function(exports) {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           const detail = {
             ...detailConfig,
@@ -1027,8 +1102,8 @@ var iDrawRenderer = function(exports) {
   function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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;
     const viewOriginX = originX * scaleW;
@@ -1043,6 +1118,7 @@ var iDrawRenderer = function(exports) {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
@@ -1076,6 +1152,11 @@ var iDrawRenderer = function(exports) {
     if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.invisible) === true) {
       return;
     }
+    const { w: w2, h: h2 } = elem;
+    const { scale } = opts.viewScaleInfo;
+    if (scale < 1 && (w2 * scale < 1 || h2 * scale < 1) || opts.parentOpacity === 0) {
+      return;
+    }
     try {
       switch (elem.type) {
         case "rect": {
@@ -1126,10 +1207,11 @@ var iDrawRenderer = function(exports) {
     }
   }
   function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = 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: 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,
@@ -1139,6 +1221,7 @@ var iDrawRenderer = function(exports) {
             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,
@@ -1176,29 +1259,33 @@ var iDrawRenderer = function(exports) {
                       y: newParentSize.y + child.y
                     }
                   };
-                  if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
-                    continue;
+                  if (opts.forceDrawAll !== true) {
+                    if (!(calculator2 == null ? void 0 : calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                      continue;
+                    }
                   }
                   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 = {
@@ -1210,16 +1297,45 @@ var iDrawRenderer = function(exports) {
           }
         }
       };
-      if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
-        continue;
+      if (opts.forceDrawAll !== true) {
+        if (!((_a = opts.calculator) == null ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+          continue;
+        }
       }
       try {
-        drawElement(ctx, elem, opts);
+        drawElement(ctx, elem, {
+          ...opts,
+          ...{
+            parentOpacity
+          }
+        });
       } catch (err) {
         console.error(err);
       }
     }
   }
+  function drawUnderlay(ctx, underlay, opts) {
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const elem = { uuid: "underlay", ...underlay };
+    const { x: x2, y: y2, w: w2, h: h2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const angle2 = 0;
+    const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
+    drawBoxShadow(ctx, viewElem, {
+      viewScaleInfo,
+      viewSizeInfo,
+      renderContent: () => {
+        drawBox(ctx, viewElem, {
+          originElem: elem,
+          calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+          viewScaleInfo,
+          viewSizeInfo,
+          parentOpacity,
+          renderContent: () => {
+          }
+        });
+      }
+    });
+  }
   const supportElementTypes = ["image", "svg", "html"];
   const getAssetIdFromElement = (element) => {
     var _a, _b, _c;
@@ -1242,10 +1358,17 @@ var iDrawRenderer = function(exports) {
   class Loader extends EventEmitter {
     constructor() {
       super();
-      this._loadFuncMap = {};
-      this._currentLoadItemMap = {};
-      this._storageLoadItemMap = {};
-      this._registerLoadFunc("image", async (elem, assets) => {
+      __privateAdd(this, _registerLoadFunc);
+      __privateAdd(this, _getLoadElementSource);
+      __privateAdd(this, _createLoadItem);
+      __privateAdd(this, _emitLoad);
+      __privateAdd(this, _emitError);
+      __privateAdd(this, _loadResource);
+      __privateAdd(this, _isExistingErrorStorage);
+      __privateAdd(this, _loadFuncMap, {});
+      __privateAdd(this, _currentLoadItemMap, {});
+      __privateAdd(this, _storageLoadItemMap, {});
+      __privateMethod(this, _registerLoadFunc, registerLoadFunc_fn).call(this, "image", async (elem, assets) => {
         var _a;
         const src = ((_a = assets[elem.detail.src]) == null ? void 0 : _a.value) || elem.detail.src;
         const content = await loadImage(src);
@@ -1255,12 +1378,12 @@ var iDrawRenderer = function(exports) {
           content
         };
       });
-      this._registerLoadFunc("html", async (elem, assets) => {
+      __privateMethod(this, _registerLoadFunc, registerLoadFunc_fn).call(this, "html", async (elem, assets) => {
         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,
@@ -1268,7 +1391,7 @@ var iDrawRenderer = function(exports) {
           content
         };
       });
-      this._registerLoadFunc("svg", async (elem, assets) => {
+      __privateMethod(this, _registerLoadFunc, registerLoadFunc_fn).call(this, "svg", async (elem, assets) => {
         var _a;
         const svg2 = ((_a = assets[elem.detail.svg]) == null ? void 0 : _a.value) || elem.detail.svg;
         const content = await loadSVG(svg2);
@@ -1279,127 +1402,145 @@ var iDrawRenderer = function(exports) {
         };
       });
     }
-    _registerLoadFunc(type, func) {
-      this._loadFuncMap[type] = func;
-    }
-    _getLoadElementSource(element) {
-      var _a, _b, _c;
-      let source = null;
-      if (element.type === "image") {
-        source = ((_a = element == null ? void 0 : element.detail) == null ? void 0 : _a.src) || null;
-      } else if (element.type === "svg") {
-        source = ((_b = element == null ? void 0 : element.detail) == null ? void 0 : _b.svg) || null;
-      } else if (element.type === "html") {
-        source = ((_c = element == null ? void 0 : element.detail) == null ? void 0 : _c.html) || null;
-      }
-      return source;
-    }
-    _createLoadItem(element) {
-      return {
-        element,
-        status: "null",
-        content: null,
-        error: null,
-        startTime: -1,
-        endTime: -1,
-        source: this._getLoadElementSource(element)
-      };
-    }
-    _emitLoad(item) {
-      const assetId = getAssetIdFromElement(item.element);
-      const storageItem = this._storageLoadItemMap[assetId];
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
-          this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
-        }
-      } else {
-        this._storageLoadItemMap[assetId] = item;
-        this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
-      }
-    }
-    _emitError(item) {
-      const assetId = getAssetIdFromElement(item.element);
-      const storageItem = this._storageLoadItemMap[assetId];
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
-          this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
-        }
-      } else {
-        this._storageLoadItemMap[assetId] = item;
-        this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
-      }
-    }
-    _loadResource(element, assets) {
-      const item = this._createLoadItem(element);
-      const assetId = getAssetIdFromElement(element);
-      this._currentLoadItemMap[assetId] = item;
-      const loadFunc = this._loadFuncMap[element.type];
-      if (typeof loadFunc === "function") {
-        item.startTime = Date.now();
-        loadFunc(element, assets).then((result) => {
-          item.content = result.content;
-          item.endTime = Date.now();
-          item.status = "load";
-          this._emitLoad(item);
-        }).catch((err) => {
-          console.warn(`Load element source "${item.source}" fail`, err, element);
-          item.endTime = Date.now();
-          item.status = "error";
-          item.error = err;
-          this._emitError(item);
-        });
-      }
-    }
-    _isExistingErrorStorage(element) {
-      var _a;
-      const assetId = getAssetIdFromElement(element);
-      const existItem = (_a = this._currentLoadItemMap) == null ? void 0 : _a[assetId];
-      if (existItem && existItem.status === "error" && existItem.source && existItem.source === this._getLoadElementSource(element)) {
-        return true;
-      }
-      return false;
+    destroy() {
+      __privateSet(this, _loadFuncMap, null);
+      __privateSet(this, _currentLoadItemMap, null);
+      __privateSet(this, _storageLoadItemMap, null);
     }
     load(element, assets) {
-      if (this._isExistingErrorStorage(element)) {
+      if (__privateMethod(this, _isExistingErrorStorage, isExistingErrorStorage_fn).call(this, element)) {
         return;
       }
       if (supportElementTypes.includes(element.type)) {
-        this._loadResource(element, assets);
+        __privateMethod(this, _loadResource, loadResource_fn).call(this, element, assets);
       }
     }
     getContent(element) {
       var _a, _b;
       const assetId = getAssetIdFromElement(element);
-      return ((_b = (_a = this._storageLoadItemMap) == null ? void 0 : _a[assetId]) == null ? void 0 : _b.content) || null;
+      return ((_b = (_a = __privateGet(this, _storageLoadItemMap)) == null ? void 0 : _a[assetId]) == null ? void 0 : _b.content) || null;
+    }
+    getLoadItemMap() {
+      return __privateGet(this, _storageLoadItemMap);
+    }
+    setLoadItemMap(itemMap) {
+      __privateSet(this, _storageLoadItemMap, itemMap);
     }
   }
+  _loadFuncMap = new WeakMap();
+  _currentLoadItemMap = new WeakMap();
+  _storageLoadItemMap = new WeakMap();
+  _registerLoadFunc = new WeakSet();
+  registerLoadFunc_fn = function(type, func) {
+    __privateGet(this, _loadFuncMap)[type] = func;
+  };
+  _getLoadElementSource = new WeakSet();
+  getLoadElementSource_fn = function(element) {
+    var _a, _b, _c;
+    let source = null;
+    if (element.type === "image") {
+      source = ((_a = element == null ? void 0 : element.detail) == null ? void 0 : _a.src) || null;
+    } else if (element.type === "svg") {
+      source = ((_b = element == null ? void 0 : element.detail) == null ? void 0 : _b.svg) || null;
+    } else if (element.type === "html") {
+      source = ((_c = element == null ? void 0 : element.detail) == null ? void 0 : _c.html) || null;
+    }
+    return source;
+  };
+  _createLoadItem = new WeakSet();
+  createLoadItem_fn = function(element) {
+    return {
+      element,
+      status: "null",
+      content: null,
+      error: null,
+      startTime: -1,
+      endTime: -1,
+      source: __privateMethod(this, _getLoadElementSource, getLoadElementSource_fn).call(this, element)
+    };
+  };
+  _emitLoad = new WeakSet();
+  emitLoad_fn = function(item) {
+    const assetId = getAssetIdFromElement(item.element);
+    const storageItem = __privateGet(this, _storageLoadItemMap)[assetId];
+    if (storageItem) {
+      if (storageItem.startTime < item.startTime) {
+        __privateGet(this, _storageLoadItemMap)[assetId] = item;
+        this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
+      }
+    } else {
+      __privateGet(this, _storageLoadItemMap)[assetId] = item;
+      this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
+    }
+  };
+  _emitError = new WeakSet();
+  emitError_fn = function(item) {
+    var _a;
+    const assetId = getAssetIdFromElement(item.element);
+    const storageItem = (_a = __privateGet(this, _storageLoadItemMap)) == null ? void 0 : _a[assetId];
+    if (storageItem) {
+      if (storageItem.startTime < item.startTime) {
+        __privateGet(this, _storageLoadItemMap)[assetId] = item;
+        this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
+      }
+    } else {
+      __privateGet(this, _storageLoadItemMap)[assetId] = item;
+      this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
+    }
+  };
+  _loadResource = new WeakSet();
+  loadResource_fn = function(element, assets) {
+    const item = __privateMethod(this, _createLoadItem, createLoadItem_fn).call(this, element);
+    const assetId = getAssetIdFromElement(element);
+    __privateGet(this, _currentLoadItemMap)[assetId] = item;
+    const loadFunc = __privateGet(this, _loadFuncMap)[element.type];
+    if (typeof loadFunc === "function") {
+      item.startTime = Date.now();
+      loadFunc(element, assets).then((result) => {
+        item.content = result.content;
+        item.endTime = Date.now();
+        item.status = "load";
+        __privateMethod(this, _emitLoad, emitLoad_fn).call(this, item);
+      }).catch((err) => {
+        console.warn(`Load element source "${item.source}" fail`, err, element);
+        item.endTime = Date.now();
+        item.status = "error";
+        item.error = err;
+        __privateMethod(this, _emitError, emitError_fn).call(this, item);
+      });
+    }
+  };
+  _isExistingErrorStorage = new WeakSet();
+  isExistingErrorStorage_fn = function(element) {
+    var _a;
+    const assetId = getAssetIdFromElement(element);
+    const existItem = (_a = __privateGet(this, _currentLoadItemMap)) == null ? void 0 : _a[assetId];
+    if (existItem && existItem.status === "error" && existItem.source && existItem.source === __privateMethod(this, _getLoadElementSource, getLoadElementSource_fn).call(this, element)) {
+      return true;
+    }
+    return false;
+  };
   class Renderer extends EventEmitter {
-    // private _draftContextTop: CanvasRenderingContext2D;
-    // private _draftContextMiddle: CanvasRenderingContext2D;
-    // private _draftContextBottom: CanvasRenderingContext2D;
     constructor(opts) {
       super();
-      this._loader = new Loader();
-      this._opts = opts;
-      this._init();
+      __privateAdd(this, _init);
+      __privateAdd(this, _opts, void 0);
+      __privateAdd(this, _loader, new Loader());
+      __privateSet(this, _opts, opts);
+      __privateMethod(this, _init, init_fn).call(this);
     }
-    _init() {
-      const { _loader: loader } = this;
-      loader.on("load", (e) => {
-        this.trigger("load", e);
-      });
-      loader.on("error", () => {
-      });
+    destroy() {
+      __privateSet(this, _opts, null);
+      __privateGet(this, _loader).destroy();
+      __privateSet(this, _loader, null);
     }
     updateOptions(opts) {
-      this._opts = opts;
+      __privateSet(this, _opts, opts);
     }
     drawData(data, opts) {
-      const { _loader: loader } = this;
-      const { calculator } = this._opts;
-      const { viewContext } = this._opts.viewContent;
+      const loader = __privateGet(this, _loader);
+      const { calculator } = __privateGet(this, _opts);
+      const viewContext = __privateGet(this, _opts).viewContext;
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       const parentElementSize = {
         x: 0,
@@ -1407,16 +1548,29 @@ var iDrawRenderer = function(exports) {
         w: opts.viewSizeInfo.width,
         h: opts.viewSizeInfo.height
       };
+      if (data.underlay) {
+        drawUnderlay(viewContext, data.underlay, {
+          loader,
+          calculator,
+          parentElementSize,
+          parentOpacity: 1,
+          ...opts
+        });
+      }
       drawElementList(viewContext, data, {
         loader,
         calculator,
         parentElementSize,
         elementAssets: data.assets,
+        parentOpacity: 1,
         ...opts
       });
     }
     scale(num) {
-      const { sharer } = this._opts;
+      const { sharer } = __privateGet(this, _opts);
+      if (!sharer) {
+        return;
+      }
       const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
       if (data) {
         this.drawData(data, {
@@ -1437,8 +1591,29 @@ var iDrawRenderer = function(exports) {
         });
       }
     }
+    setLoadItemMap(itemMap) {
+      __privateGet(this, _loader).setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+      return __privateGet(this, _loader).getLoadItemMap();
+    }
+    getLoader() {
+      return __privateGet(this, _loader);
+    }
   }
+  _opts = new WeakMap();
+  _loader = new WeakMap();
+  _init = new WeakSet();
+  init_fn = function() {
+    const loader = __privateGet(this, _loader);
+    loader.on("load", (e) => {
+      this.trigger("load", e);
+    });
+    loader.on("error", () => {
+    });
+  };
   exports.Renderer = Renderer;
+  exports.drawRect = drawRect;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});