@idraw/renderer 0.4.0-beta.3 → 0.4.0-beta.30

package/dist/index.global.js

@@ -22,7 +22,7 @@ var __privateMethod = (obj, member, method) => {
   return method;
 };
 
-  var _opts, _loader, _init, init_fn;
+  var _loadFuncMap, _currentLoadItemMap, _storageLoadItemMap, _hasDestroyed, _registerLoadFunc, registerLoadFunc_fn, _getLoadElementSource, getLoadElementSource_fn, _createLoadItem, createLoadItem_fn, _emitLoad, emitLoad_fn, _emitError, emitError_fn, _loadResource, loadResource_fn, _isExistingErrorStorage, isExistingErrorStorage_fn, _opts, _loader, _hasDestroyed2, _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));
   }
@@ -100,6 +100,9 @@ var __privateMethod = (obj, member, method) => {
     asyncFunction(data) {
       return parsePrototype(data) === "AsyncFunction";
     },
+    boolean(data) {
+      return parsePrototype(data) === "Boolean";
+    },
     string(data) {
       return parsePrototype(data) === "String";
     },
@@ -333,22 +336,40 @@ var __privateMethod = (obj, member, method) => {
       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) {
@@ -357,11 +378,11 @@ var __privateMethod = (obj, member, method) => {
             }
           }
         }
-        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);
@@ -372,15 +393,38 @@ var __privateMethod = (obj, member, method) => {
       }
     }
     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() {
+      this.clear();
+    }
+    clear() {
+      __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;
   }
@@ -411,6 +455,19 @@ var __privateMethod = (obj, member, method) => {
     };
     return p;
   }
+  function calcViewElementSize(size, opts) {
+    const { viewScaleInfo } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = size;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const newSize = {
+      x: x2 * scale + offsetLeft,
+      y: y2 * scale + offsetTop,
+      w: w2 * scale,
+      h: h2 * scale,
+      angle: angle2
+    };
+    return newSize;
+  }
   function generateSVGPath(commands) {
     let path = "";
     commands.forEach((item) => {
@@ -434,9 +491,10 @@ var __privateMethod = (obj, member, method) => {
       textAlign: "left",
       verticalAlign: "top",
       fontSize: 16,
-      lineHeight: 20,
       fontFamily: "sans-serif",
       fontWeight: 400,
+      minInlineSize: "auto",
+      wordBreak: "break-all",
       overflow: "hidden"
     };
     return config;
@@ -445,9 +503,10 @@ var __privateMethod = (obj, member, method) => {
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2 } = viewElem.detail;
+    let { borderRadius: borderRadius2, borderDash } = viewElem.detail;
+    const hasBorderDash = Array.isArray(borderDash) && borderDash.length > 0;
     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;
@@ -462,7 +521,7 @@ var __privateMethod = (obj, member, method) => {
     if (typeof borderWidth2 === "number") {
       bw = (borderWidth2 || 0) * scale;
     }
-    if (boxSizing === "border-box") {
+    if (boxSizing === "border-box" && !hasBorderDash) {
       x2 = viewElem.x + bw / 2;
       y2 = viewElem.y + bw / 2;
       w2 = viewElem.w - bw;
@@ -491,6 +550,22 @@ var __privateMethod = (obj, member, method) => {
       radiusList
     };
   }
+  const baseFontFamilyList = ["-apple-system", '"system-ui"', ' "Segoe UI"', " Roboto", '"Helvetica Neue"', "Arial", '"Noto Sans"', " sans-serif"];
+  function enhanceFontFamliy(fontFamily2) {
+    return [fontFamily2, ...baseFontFamilyList].join(", ");
+  }
+  (function(s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  });
   function createColorStyle(ctx, color2, opts) {
     if (typeof color2 === "string") {
       return color2;
@@ -535,30 +610,52 @@ 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 || {};
-    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;
+    const { parentOpacity } = opts;
+    const opacity = getOpacity(originElem) * parentOpacity;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = originElem.detail;
+    const mainRender = () => {
+      ctx.globalAlpha = opacity;
+      drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
+      renderContent == null ? void 0 : renderContent();
+      drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+      ctx.globalAlpha = parentOpacity;
+    };
+    if (clipPath) {
+      drawClipPath(ctx, viewElem, {
+        originElem,
+        calcElemSize,
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+          mainRender();
         }
-        drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
-        renderContent == null ? void 0 : renderContent();
-        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-        ctx.globalAlpha = 1;
+      });
+      if (typeof clipPathStrokeWidth === "number" && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+        drawClipPathStroke(ctx, viewElem, {
+          originElem,
+          calcElemSize,
+          viewScaleInfo,
+          viewSizeInfo,
+          parentOpacity
+        });
       }
-    });
+    } else {
+      mainRender();
+    }
   }
   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;
@@ -585,12 +682,42 @@ var __privateMethod = (obj, member, method) => {
       renderContent == null ? void 0 : renderContent();
     }
   }
+  function drawClipPathStroke(ctx, viewElem, opts) {
+    const { renderContent, originElem, calcElemSize, viewSizeInfo, parentOpacity } = opts;
+    const totalScale = viewSizeInfo.devicePixelRatio;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = (originElem == null ? void 0 : originElem.detail) || {};
+    if (clipPath && calcElemSize && clipPath.commands && typeof clipPathStrokeWidth === "number" && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+      const { x: x2, y: y2, w: w2, h: h2 } = calcElemSize;
+      const { originW, originH, originX, originY } = clipPath;
+      const scaleW = w2 / originW;
+      const scaleH = h2 / originH;
+      const viewOriginX = originX * scaleW;
+      const viewOriginY = originY * scaleH;
+      const internalX = x2 - viewOriginX;
+      const internalY = y2 - viewOriginY;
+      ctx.save();
+      ctx.globalAlpha = parentOpacity;
+      ctx.translate(internalX, internalY);
+      ctx.scale(totalScale * scaleW, totalScale * scaleH);
+      const pathStr = generateSVGPath(clipPath.commands || []);
+      const path2d = new Path2D(pathStr);
+      ctx.strokeStyle = clipPathStrokeColor;
+      ctx.lineWidth = clipPathStrokeWidth;
+      ctx.stroke(path2d);
+      ctx.translate(0 - internalX, 0 - internalY);
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      rotateElement(ctx, { ...viewElem }, () => {
+        renderContent == null ? void 0 : renderContent();
+      });
+      ctx.restore();
+    } else {
+      renderContent == null ? void 0 : renderContent();
+    }
+  }
   function drawBoxBackground(ctx, viewElem, opts) {
     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 +770,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 +899,6 @@ var __privateMethod = (obj, member, method) => {
       ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
       ctx.closePath();
       ctx.stroke();
-      ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
   }
@@ -795,58 +915,88 @@ var __privateMethod = (obj, member, method) => {
       renderContent();
       ctx.restore();
     } else {
+      ctx.save();
+      ctx.shadowColor = "transparent";
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+      ctx.shadowBlur = 0;
       renderContent();
+      ctx.restore();
     }
   }
   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 == null ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { background = "#000000", borderColor = "#000000", boxSizing, borderWidth: borderWidth2 = 0, borderDash } = 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];
+    }
+    bw = bw * viewScaleInfo.scale;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, { viewScaleInfo }) || 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;
+          const radiusA = a;
+          const radiusB = b;
+          if (bw > 0) {
+            if (boxSizing === "content-box") {
+              a = a;
+              b = b;
+            } 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;
             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, radiusA, radiusB, 0, 0, 2 * Math.PI);
             ctx.closePath();
-            ctx.stroke();
+            ctx.fill();
+            ctx.globalAlpha = parentOpacity;
+            if (typeof bw === "number" && bw > 0) {
+              const ba = bw / 2 + a;
+              const bb = bw / 2 + b;
+              ctx.beginPath();
+              if (borderDash) {
+                const lineDash = borderDash.map((n) => n * viewScaleInfo.scale);
+                ctx.setLineDash(lineDash);
+              }
+              ctx.strokeStyle = borderColor;
+              ctx.lineWidth = bw;
+              ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+              ctx.closePath();
+              ctx.stroke();
+              ctx.setLineDash([]);
+            }
           }
-          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;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || 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, {
@@ -858,6 +1008,7 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
             }
           });
@@ -867,8 +1018,8 @@ var __privateMethod = (obj, member, method) => {
   }
   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 == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || 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, {
@@ -880,17 +1031,21 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
-              if (!content) {
+              if (!content && !opts.loader.isDestroyed()) {
                 opts.loader.load(elem, opts.elementAssets || {});
               }
               if (elem.type === "image" && content) {
-                const { opacity } = elem.detail;
-                ctx.globalAlpha = opacity ? opacity : 1;
+                ctx.globalAlpha = getOpacity(elem) * parentOpacity;
                 const { x: x22, y: y22, w: w22, h: h22, radiusList } = calcViewBoxSize(viewElem, {
                   viewScaleInfo,
                   viewSizeInfo
                 });
+                const { detail } = elem;
+                const { scaleMode, originW = 0, originH = 0 } = detail;
+                const imageW = ctx.$undoPixelRatio(originW);
+                const imageH = ctx.$undoPixelRatio(originH);
                 ctx.save();
                 ctx.fillStyle = "transparent";
                 ctx.beginPath();
@@ -902,8 +1057,42 @@ var __privateMethod = (obj, member, method) => {
                 ctx.closePath();
                 ctx.fill();
                 ctx.clip();
-                ctx.drawImage(content, x22, y22, w22, h22);
-                ctx.globalAlpha = 1;
+                if (scaleMode && originH && originW) {
+                  let sx = 0;
+                  let sy = 0;
+                  let sWidth = imageW;
+                  let sHeight = imageH;
+                  const dx = x22;
+                  const dy = y22;
+                  const dWidth = w22;
+                  const dHeight = h22;
+                  if (imageW > elem.w || imageH > elem.h) {
+                    if (scaleMode === "fill") {
+                      const sourceScale = Math.max(elem.w / imageW, elem.h / imageH);
+                      const newImageWidth = imageW * sourceScale;
+                      const newImageHeight = imageH * sourceScale;
+                      sx = (newImageWidth - elem.w) / 2 / sourceScale;
+                      sy = (newImageHeight - elem.h) / 2 / sourceScale;
+                      sWidth = elem.w / sourceScale;
+                      sHeight = elem.h / sourceScale;
+                    } else if (scaleMode === "tile") {
+                      sx = 0;
+                      sy = 0;
+                      sWidth = elem.w;
+                      sHeight = elem.h;
+                    } else if (scaleMode === "fit") {
+                      const sourceScale = Math.min(elem.w / imageW, elem.h / imageH);
+                      sx = (imageW - elem.w / sourceScale) / 2;
+                      sy = (imageH - elem.h / sourceScale) / 2;
+                      sWidth = elem.w / sourceScale;
+                      sHeight = elem.h / sourceScale;
+                    }
+                  }
+                  ctx.drawImage(content, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+                } else {
+                  ctx.drawImage(content, x22, y22, w22, h22);
+                }
+                ctx.globalAlpha = parentOpacity;
                 ctx.restore();
               }
             }
@@ -914,85 +1103,133 @@ var __privateMethod = (obj, member, method) => {
   }
   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 == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      if (!content) {
+      if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "svg" && content) {
-        const { opacity } = elem.detail;
-        ctx.globalAlpha = opacity ? opacity : 1;
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         ctx.drawImage(content, 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 == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      if (!content) {
+      if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "html" && content) {
-        const { opacity } = elem.detail;
-        ctx.globalAlpha = opacity ? opacity : 1;
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         ctx.drawImage(content, x2, y2, w2, h2);
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   const detailConfig = getDefaultElementDetailConfig();
+  function isTextWidthWithinErrorRange(w0, w1, scale) {
+    if (scale < 0.5) {
+      if (w0 < w1 && (w0 - w1) / w0 > -0.15) {
+        return true;
+      }
+    }
+    return w0 >= w1;
+  }
   function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || 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, {
-        originElem: elem,
-        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+      drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-          const detail = {
-            ...detailConfig,
-            ...elem.detail
-          };
-          const fontSize2 = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
-          const lineHeight2 = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize2;
-          ctx.fillStyle = elem.detail.color || detailConfig.color;
-          ctx.textBaseline = "top";
-          ctx.$setFont({
-            fontWeight: detail.fontWeight,
-            fontSize: fontSize2,
-            fontFamily: detail.fontFamily
+          drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+            viewScaleInfo,
+            viewSizeInfo,
+            parentOpacity
           });
-          const detailText = detail.text.replace(/\r\n/gi, "\n");
-          const fontHeight = lineHeight2;
-          const detailTextList = detailText.split("\n");
-          const lines = [];
-          let lineNum = 0;
-          detailTextList.forEach((tempText, idx) => {
+        }
+      });
+      {
+        const detail = {
+          ...detailConfig,
+          ...elem.detail
+        };
+        const originFontSize = detail.fontSize || detailConfig.fontSize;
+        const fontSize2 = originFontSize * viewScaleInfo.scale;
+        if (fontSize2 < 2) {
+          return;
+        }
+        const originLineHeight = detail.lineHeight || originFontSize;
+        const lineHeight2 = originLineHeight * viewScaleInfo.scale;
+        ctx.fillStyle = elem.detail.color || detailConfig.color;
+        ctx.textBaseline = "top";
+        ctx.$setFont({
+          fontWeight: detail.fontWeight,
+          fontSize: fontSize2,
+          fontFamily: enhanceFontFamliy(detail.fontFamily)
+        });
+        let detailText = detail.text.replace(/\r\n/gi, "\n");
+        if (detail.textTransform === "lowercase") {
+          detailText = detailText.toLowerCase();
+        } else if (detail.textTransform === "uppercase") {
+          detailText = detailText.toUpperCase();
+        }
+        const fontHeight = lineHeight2;
+        const detailTextList = detailText.split("\n");
+        const lines = [];
+        let lineNum = 0;
+        detailTextList.forEach((itemText, idx) => {
+          if (detail.minInlineSize === "maxContent") {
+            lines.push({
+              text: itemText,
+              width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
+            });
+          } else {
             let lineText = "";
-            if (tempText.length > 0) {
-              for (let i = 0; i < tempText.length; i++) {
-                if (ctx.measureText(lineText + (tempText[i] || "")).width < ctx.$doPixelRatio(w2)) {
-                  lineText += tempText[i] || "";
+            let splitStr = "";
+            let tempStrList = itemText.split(splitStr);
+            if (detail.wordBreak === "normal") {
+              const splitStr2 = " ";
+              const wordList = itemText.split(splitStr2);
+              tempStrList = [];
+              wordList.forEach((word, idx2) => {
+                tempStrList.push(word);
+                if (idx2 < wordList.length - 1) {
+                  tempStrList.push(splitStr2);
+                }
+              });
+            }
+            if (tempStrList.length === 1 && detail.overflow === "visible") {
+              lines.push({
+                text: tempStrList[0],
+                width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
+              });
+            } else if (tempStrList.length > 0) {
+              for (let i = 0; i < tempStrList.length; i++) {
+                if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) {
+                  lineText += tempStrList[i] || "";
                 } else {
                   lines.push({
                     text: lineText,
                     width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
                   });
-                  lineText = tempText[i] || "";
+                  lineText = tempStrList[i] || "";
                   lineNum++;
                 }
-                if ((lineNum + 1) * fontHeight > h2) {
+                if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
                   break;
                 }
-                if (tempText.length - 1 === i) {
-                  if ((lineNum + 1) * fontHeight < h2) {
+                if (tempStrList.length - 1 === i) {
+                  if ((lineNum + 1) * fontHeight <= h2) {
                     lines.push({
                       text: lineText,
                       width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
@@ -1010,64 +1247,96 @@ var __privateMethod = (obj, member, method) => {
                 width: 0
               });
             }
-          });
-          let startY = 0;
-          if (lines.length * fontHeight < h2) {
-            if (elem.detail.verticalAlign === "top") {
-              startY = 0;
-            } else if (elem.detail.verticalAlign === "bottom") {
-              startY += h2 - lines.length * fontHeight;
-            } else {
-              startY += (h2 - lines.length * fontHeight) / 2;
-            }
           }
-          {
-            const _y = y2 + startY;
-            if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
-              ctx.shadowColor = detail.textShadowColor;
-            }
-            if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
-              ctx.shadowOffsetX = detail.textShadowOffsetX;
-            }
-            if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
-              ctx.shadowOffsetY = detail.textShadowOffsetY;
-            }
-            if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
-              ctx.shadowBlur = detail.textShadowBlur;
-            }
-            lines.forEach((line, i) => {
-              let _x = x2;
-              if (detail.textAlign === "center") {
-                _x = x2 + (w2 - line.width) / 2;
-              } else if (detail.textAlign === "right") {
-                _x = x2 + (w2 - line.width);
-              }
-              ctx.fillText(line.text, _x, _y + fontHeight * i);
-            });
+        });
+        let startY = 0;
+        let eachLineStartY = 0;
+        if (fontHeight > fontSize2) {
+          eachLineStartY = (fontHeight - fontSize2) / 2;
+        }
+        if (lines.length * fontHeight < h2) {
+          if (elem.detail.verticalAlign === "top") {
+            startY = 0;
+          } else if (elem.detail.verticalAlign === "bottom") {
+            startY += h2 - lines.length * fontHeight;
+          } else {
+            startY += (h2 - lines.length * fontHeight) / 2;
           }
         }
-      });
+        {
+          const _y = y2 + startY;
+          if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
+            ctx.shadowColor = detail.textShadowColor;
+          }
+          if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
+            ctx.shadowOffsetX = detail.textShadowOffsetX;
+          }
+          if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
+            ctx.shadowOffsetY = detail.textShadowOffsetY;
+          }
+          if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
+            ctx.shadowBlur = detail.textShadowBlur;
+          }
+          lines.forEach((line, i) => {
+            let _x = x2;
+            if (detail.textAlign === "center") {
+              _x = x2 + (w2 - line.width) / 2;
+            } else if (detail.textAlign === "right") {
+              _x = x2 + (w2 - line.width);
+            }
+            ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY);
+          });
+        }
+      }
     });
   }
   function drawPath(ctx, elem, opts) {
+    var _a, _b;
     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 == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { originX, originY, originW, originH, fillRule } = detail;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const scaleW = w2 / originW;
     const scaleH = h2 / originH;
     const viewOriginX = originX * scaleW;
     const viewOriginY = originY * scaleH;
     const internalX = x2 - viewOriginX;
     const internalY = y2 - viewOriginY;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth, ...restDetail } = elem.detail;
     const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
     const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
+    let boxViewElem = { ...viewElem };
+    boxViewElem.detail = restDetail;
+    let boxOriginElem = { ...elem };
+    boxOriginElem.detail = restDetail;
+    if (detail.fill && detail.fill !== "string" && ((_b = (_a = detail.fill) == null ? void 0 : _a.type) == null ? void 0 : _b.includes("gradient"))) {
+      boxViewElem = {
+        ...viewElem,
+        ...{
+          detail: {
+            ...viewElem.detail,
+            ...{
+              background: detail.fill,
+              clipPath: {
+                commands: detail.commands,
+                originX,
+                originY,
+                originW,
+                originH
+              }
+            }
+          }
+        }
+      };
+      boxOriginElem.detail = { ...boxViewElem.detail };
+    }
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      drawBox(ctx, viewElem, {
-        originElem: elem,
+      drawBox(ctx, boxViewElem, {
+        originElem: boxOriginElem,
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
@@ -1079,8 +1348,14 @@ var __privateMethod = (obj, member, method) => {
               const pathStr = generateSVGPath(detail.commands || []);
               const path2d = new Path2D(pathStr);
               if (detail.fill) {
-                ctx.fillStyle = detail.fill;
-                ctx.fill(path2d);
+                if (typeof detail.fill === "string") {
+                  ctx.fillStyle = detail.fill;
+                } else {
+                  ctx.fillStyle = "transparent";
+                }
+              }
+              if (detail.fill) {
+                ctx.fill(path2d, fillRule);
               }
               if (detail.stroke && detail.strokeWidth !== 0) {
                 ctx.strokeStyle = detail.stroke;
@@ -1096,11 +1371,21 @@ var __privateMethod = (obj, member, method) => {
       });
     });
   }
+  const visiableMinSize = 0.4;
   function drawElement(ctx, elem, opts) {
-    var _a;
+    var _a, _b, _c;
     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 < visiableMinSize || h2 * scale < visiableMinSize) || opts.parentOpacity === 0) {
+      return;
+    }
+    const { overrideElementMap } = opts;
+    if ((_c = (_b = overrideElementMap == null ? void 0 : overrideElementMap[elem.uuid]) == null ? void 0 : _b.operations) == null ? void 0 : _c.invisible) {
+      return;
+    }
     try {
       switch (elem.type) {
         case "rect": {
@@ -1151,10 +1436,11 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = 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 { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, { viewScaleInfo }) || 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 +1450,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,
@@ -1191,7 +1478,7 @@ var __privateMethod = (obj, member, method) => {
                   h: elem.h || parentSize.h,
                   angle: elem.angle
                 };
-                const { calculator: calculator2 } = opts;
+                const { calculator } = opts;
                 for (let i = 0; i < elem.detail.children.length; i++) {
                   let child = elem.detail.children[i];
                   child = {
@@ -1202,31 +1489,32 @@ var __privateMethod = (obj, member, method) => {
                     }
                   };
                   if (opts.forceDrawAll !== true) {
-                    if (!(calculator2 == null ? void 0 : calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                    if (!(calculator == null ? void 0 : calculator.needRender(child))) {
                       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 = {
@@ -1239,17 +1527,73 @@ var __privateMethod = (obj, member, method) => {
         }
       };
       if (opts.forceDrawAll !== true) {
-        if (!((_a = opts.calculator) == null ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+        if (!((_a = opts.calculator) == null ? void 0 : _a.needRender(elem))) {
           continue;
         }
       }
       try {
-        drawElement(ctx, elem, opts);
+        drawElement(ctx, elem, {
+          ...opts,
+          ...{
+            parentOpacity
+          }
+        });
       } catch (err) {
         console.error(err);
       }
     }
   }
+  function drawLayout(ctx, layout, opts, renderContent) {
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const elem = { uuid: "layout", type: "group", ...layout };
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
+    const angle2 = 0;
+    const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
+    ctx.globalAlpha = 1;
+    drawBoxShadow(ctx, viewElem, {
+      viewScaleInfo,
+      viewSizeInfo,
+      renderContent: () => {
+        drawBoxBackground(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+      }
+    });
+    if (layout.detail.overflow === "hidden") {
+      const { viewScaleInfo: viewScaleInfo2, viewSizeInfo: viewSizeInfo2 } = opts;
+      const elem2 = { uuid: "layout", type: "group", ...layout };
+      const viewElemSize = calcViewElementSize(elem2, { viewScaleInfo: viewScaleInfo2 }) || elem2;
+      const viewElem2 = { ...elem2, ...viewElemSize };
+      const { x: x22, y: y22, w: w22, h: h22, radiusList } = calcViewBoxSize(viewElem2, {
+        viewScaleInfo: viewScaleInfo2,
+        viewSizeInfo: viewSizeInfo2
+      });
+      ctx.save();
+      ctx.fillStyle = "transparent";
+      ctx.beginPath();
+      ctx.moveTo(x22 + radiusList[0], y22);
+      ctx.arcTo(x22 + w22, y22, x22 + w22, y22 + h22, radiusList[1]);
+      ctx.arcTo(x22 + w22, y22 + h22, x22, y22 + h22, radiusList[2]);
+      ctx.arcTo(x22, y22 + h22, x22, y22, radiusList[3]);
+      ctx.arcTo(x22, y22, x22 + w22, y22, radiusList[0]);
+      ctx.closePath();
+      ctx.fill();
+      ctx.clip();
+    }
+    renderContent(ctx);
+    if (layout.detail.overflow === "hidden") {
+      ctx.restore();
+    }
+    drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+    ctx.globalAlpha = parentOpacity;
+  }
+  function drawGlobalBackground(ctx, global, opts) {
+    if (typeof (global == null ? void 0 : global.background) === "string") {
+      const { viewSizeInfo } = opts;
+      const { width, height } = viewSizeInfo;
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = global.background;
+      ctx.fillRect(0, 0, width, height);
+    }
+  }
   const supportElementTypes = ["image", "svg", "html"];
   const getAssetIdFromElement = (element) => {
     var _a, _b, _c;
@@ -1272,10 +1616,18 @@ var __privateMethod = (obj, member, method) => {
   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, {});
+      __privateAdd(this, _hasDestroyed, false);
+      __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);
@@ -1285,12 +1637,12 @@ var __privateMethod = (obj, member, method) => {
           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,
@@ -1298,7 +1650,7 @@ var __privateMethod = (obj, member, method) => {
           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);
@@ -1309,120 +1661,168 @@ var __privateMethod = (obj, member, method) => {
         };
       });
     }
-    _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;
+    isDestroyed() {
+      return __privateGet(this, _hasDestroyed);
+    }
+    destroy() {
+      __privateSet(this, _hasDestroyed, true);
+      this.clear();
+      __privateSet(this, _loadFuncMap, null);
+      __privateSet(this, _currentLoadItemMap, null);
+      __privateSet(this, _storageLoadItemMap, null);
+    }
+    load(element, assets) {
+      if (__privateGet(this, _hasDestroyed) === true) {
+        return;
       }
-      return source;
-    }
-    _createLoadItem(element) {
-      return {
-        element,
-        status: "null",
-        content: null,
-        error: null,
-        startTime: -1,
-        endTime: -1,
-        source: this._getLoadElementSource(element)
-      };
+      if (__privateMethod(this, _isExistingErrorStorage, isExistingErrorStorage_fn).call(this, element)) {
+        return;
+      }
+      if (supportElementTypes.includes(element.type)) {
+        __privateMethod(this, _loadResource, loadResource_fn).call(this, element, assets);
+      }
+    }
+    getContent(element) {
+      var _a, _b;
+      const assetId = getAssetIdFromElement(element);
+      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();
+  _hasDestroyed = 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;
     }
-    _emitLoad(item) {
-      const assetId = getAssetIdFromElement(item.element);
-      const storageItem = this._storageLoadItemMap[assetId];
+    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 (!__privateGet(this, _hasDestroyed)) {
       if (storageItem) {
         if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
+          __privateGet(this, _storageLoadItemMap)[assetId] = item;
           this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
         }
       } else {
-        this._storageLoadItemMap[assetId] = item;
+        __privateGet(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];
+  };
+  _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 (!__privateGet(this, _hasDestroyed)) {
       if (storageItem) {
         if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
+          __privateGet(this, _storageLoadItemMap)[assetId] = item;
           this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
         }
       } else {
-        this._storageLoadItemMap[assetId] = item;
+        __privateGet(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) => {
+  };
+  _loadResource = new WeakSet();
+  loadResource_fn = function(element, assets) {
+    const item = __privateMethod(this, _createLoadItem, createLoadItem_fn).call(this, element);
+    const assetId = getAssetIdFromElement(element);
+    if (__privateGet(this, _currentLoadItemMap)[assetId]) {
+      return;
+    }
+    __privateGet(this, _currentLoadItemMap)[assetId] = item;
+    const loadFunc = __privateGet(this, _loadFuncMap)[element.type];
+    if (typeof loadFunc === "function" && !__privateGet(this, _hasDestroyed)) {
+      item.startTime = Date.now();
+      loadFunc(element, assets).then((result) => {
+        if (!__privateGet(this, _hasDestroyed)) {
           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;
-    }
-    load(element, assets) {
-      if (this._isExistingErrorStorage(element)) {
-        return;
-      }
-      if (supportElementTypes.includes(element.type)) {
-        this._loadResource(element, assets);
-      }
+          __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);
+      });
     }
-    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;
+  };
+  _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();
       __privateAdd(this, _init);
       __privateAdd(this, _opts, void 0);
       __privateAdd(this, _loader, new Loader());
+      __privateAdd(this, _hasDestroyed2, false);
       __privateSet(this, _opts, opts);
       __privateMethod(this, _init, init_fn).call(this);
     }
+    isDestroyed() {
+      return __privateGet(this, _hasDestroyed2);
+    }
+    destroy() {
+      this.clear();
+      __privateSet(this, _opts, null);
+      __privateGet(this, _loader).destroy();
+      __privateSet(this, _loader, null);
+      __privateSet(this, _hasDestroyed2, true);
+    }
     updateOptions(opts) {
       __privateSet(this, _opts, opts);
     }
     drawData(data, opts) {
       const loader = __privateGet(this, _loader);
-      const { calculator } = __privateGet(this, _opts);
+      const { calculator, sharer } = __privateGet(this, _opts);
       const viewContext = __privateGet(this, _opts).viewContext;
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       const parentElementSize = {
@@ -1431,13 +1831,23 @@ var __privateMethod = (obj, member, method) => {
         w: opts.viewSizeInfo.width,
         h: opts.viewSizeInfo.height
       };
-      drawElementList(viewContext, data, {
+      const drawOpts = {
         loader,
         calculator,
         parentElementSize,
         elementAssets: data.assets,
+        parentOpacity: 1,
+        overrideElementMap: sharer == null ? void 0 : sharer.getActiveOverrideElemenentMap(),
         ...opts
-      });
+      };
+      drawGlobalBackground(viewContext, data.global, drawOpts);
+      if (data.layout) {
+        drawLayout(viewContext, data.layout, drawOpts, () => {
+          drawElementList(viewContext, data, drawOpts);
+        });
+      } else {
+        drawElementList(viewContext, data, drawOpts);
+      }
     }
     scale(num) {
       const { sharer } = __privateGet(this, _opts);
@@ -1464,19 +1874,31 @@ var __privateMethod = (obj, member, method) => {
         });
       }
     }
+    setLoadItemMap(itemMap) {
+      __privateGet(this, _loader).setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+      return __privateGet(this, _loader).getLoadItemMap();
+    }
+    getLoader() {
+      return __privateGet(this, _loader);
+    }
   }
   _opts = new WeakMap();
   _loader = new WeakMap();
+  _hasDestroyed2 = new WeakMap();
   _init = new WeakSet();
   init_fn = function() {
     const loader = __privateGet(this, _loader);
     loader.on("load", (e) => {
       this.trigger("load", e);
     });
-    loader.on("error", () => {
+    loader.on("error", (e) => {
+      console.error(e);
     });
   };
   exports.Renderer = Renderer;
+  exports.drawRect = drawRect;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});