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

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