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

package/dist/index.global.js

@@ -1,43 +1,29 @@
 var iDrawRenderer = function(exports) {
-  "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;
+  "use strict";var __typeError = (msg) => {
+  throw TypeError(msg);
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __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), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), 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;
+  var _loadFuncMap, _currentLoadItemMap, _storageLoadItemMap, _hasDestroyed, _Loader_instances, registerLoadFunc_fn, getLoadElementSource_fn, createLoadItem_fn, emitLoad_fn, emitError_fn, loadResource_fn, isExistingErrorStorage_fn, _opts, _store, _opts2, _loader, _calculator, _hasDestroyed2, _Renderer_instances, 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));
+    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));
   }
   function mergeHexColorAlpha(hex, alpha) {
     if (alpha === 1) {
       return hex;
     }
     let hexAlpha = 1;
-    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
-    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    const regHex1 = /^#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^#[0-9a-f]{8,8}$/i;
     let result = hex;
     if (regHex1.test(hex)) {
-      hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(5, 7).replace(/^#/, "0x"));
     } else if (regHex2.test(hex)) {
-      hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(7, 9).replace(/^#/, "0x"));
       result = hex.substring(0, 7);
     }
     hexAlpha = hexAlpha * alpha;
@@ -47,36 +33,90 @@ var __privateMethod = (obj, member, method) => {
     }
     return result;
   }
+  function generate32Base36Hash(str) {
+    const hash256 = generate256BitHash(str);
+    return bigIntToBase36(hash256).padStart(32, "0").slice(0, 32);
+  }
+  function generate256BitHash(str) {
+    let h1 = 0xcbf29ce484222325n, h2 = 0x84222325cbf29ce4n;
+    let h3 = 0x1b3n * h1, h4 = 0x1000000n * h2;
+    const prime = 0x100000001b3n;
+    const chunkSize = 4096;
+    for (let i = 0; i < str.length; i += chunkSize) {
+      const chunk = str.slice(i, i + chunkSize);
+      for (let j = 0; j < chunk.length; j++) {
+        const code = BigInt(chunk.charCodeAt(j) + i + j);
+        h1 = (h1 ^ code) * prime;
+        h2 = (h2 ^ h1) * prime ^ h3;
+        h3 = (h3 ^ h2) * prime + h4;
+        h4 = (h4 ^ h3) * prime | 0x1234567890abcdefn;
+      }
+    }
+    return h1 << 192n | h2 << 128n | h3 << 64n | h4;
+  }
+  function bigIntToBase36(num) {
+    const chars = "0123456789abcdefghijklmnopqrstuvwxyz";
+    if (num === 0n)
+      return "0";
+    let result = "";
+    while (num > 0n) {
+      const rem = num % 36n;
+      result = chars[Number(rem)] + result;
+      num = num / 36n;
+    }
+    return result;
+  }
   function createUUID() {
     function _createStr() {
       return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
     }
     return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
   }
-  function limitHexStr(str) {
-    let count = 0;
-    for (let i = 0; i < str.length; i++) {
-      count += str.charCodeAt(i) * str.charCodeAt(i) * i * i;
-    }
-    return count.toString(16).substring(0, 4);
-  }
   function createAssetId(assetStr) {
-    const len = assetStr.length;
-    const mid = Math.floor(len / 2);
-    const start4 = assetStr.substring(0, 4).padEnd(4, "0");
-    const end4 = assetStr.substring(0, 4).padEnd(4, "0");
-    const str1 = limitHexStr(len.toString(16).padEnd(4, start4));
-    const str2 = limitHexStr(assetStr.substring(mid - 4, mid).padEnd(4, start4)).padEnd(4, "f");
-    const str3 = limitHexStr(assetStr.substring(mid - 8, mid - 4).padEnd(4, start4)).padEnd(4, "f");
-    const str4 = limitHexStr(assetStr.substring(mid - 12, mid - 8).padEnd(4, start4)).padEnd(4, "f");
-    const str5 = limitHexStr(assetStr.substring(mid - 16, mid - 12).padEnd(4, end4)).padEnd(4, "f");
-    const str6 = limitHexStr(assetStr.substring(mid, mid + 4).padEnd(4, end4)).padEnd(4, "f");
-    const str7 = limitHexStr(assetStr.substring(mid + 4, mid + 8).padEnd(4, end4)).padEnd(4, "f");
-    const str8 = limitHexStr(end4.padEnd(4, start4).padEnd(4, end4));
-    return `@assets/${str1}${str2}-${str3}-${str4}-${str5}-${str6}${str7}${str8}`;
+    return `@assets/${generate32Base36Hash(assetStr)}`;
   }
   function isAssetId(id) {
-    return /^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${id}`);
+    return /^@assets\/[0-9a-z-]{0,}$/.test(`${id}`);
+  }
+  (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 deepClone(target) {
+    function _clone(t) {
+      const type = is$1(t);
+      if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
+        return t;
+      } else if (type === "Array") {
+        const arr = [];
+        t.forEach((item) => {
+          arr.push(_clone(item));
+        });
+        return arr;
+      } else if (type === "Object") {
+        const obj = {};
+        const keys = Object.keys(t);
+        keys.forEach((key) => {
+          obj[key] = _clone(t[key]);
+        });
+        const symbolKeys = Object.getOwnPropertySymbols(t);
+        symbolKeys.forEach((key) => {
+          obj[key] = _clone(t[key]);
+        });
+        return obj;
+      }
+    }
+    return _clone(target);
+  }
+  function is$1(target) {
+    return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
   }
   function parsePrototype(data) {
     const typeStr = Object.prototype.toString.call(data) || "";
@@ -100,6 +140,9 @@ var __privateMethod = (obj, member, method) => {
     asyncFunction(data) {
       return parsePrototype(data) === "AsyncFunction";
     },
+    boolean(data) {
+      return parsePrototype(data) === "Boolean";
+    },
     string(data) {
       return parsePrototype(data) === "String";
     },
@@ -218,6 +261,9 @@ var __privateMethod = (obj, member, method) => {
       return image;
     });
   }
+  function positiveNum(value) {
+    return typeof value === "number" && value >= 0;
+  }
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -228,19 +274,19 @@ var __privateMethod = (obj, member, method) => {
     return number(value);
   }
   function w(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function h(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function angle(value) {
     return typeof value === "number" && value >= -360 && value <= 360;
   }
   function borderWidth(value) {
-    return w(value);
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function borderRadius(value) {
-    return number(value) && value >= 0;
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function color(value) {
     return isColorStr(value);
@@ -294,6 +340,7 @@ var __privateMethod = (obj, member, method) => {
     return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
   }
   const is = {
+    positiveNum,
     x,
     y,
     w,
@@ -318,37 +365,45 @@ var __privateMethod = (obj, member, method) => {
     strokeWidth
   };
   (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");
+    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");
+    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 __classPrivateFieldSet$1 = 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$1 = 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$1(this, _EventEmitter_listeners, /* @__PURE__ */ new Map(), "f");
     }
     on(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey) || [];
+      if (__classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").get(eventKey) || [];
         callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
-        this._listeners.set(eventKey, callbacks);
+        __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").set(eventKey, callbacks);
       } else {
-        this._listeners.set(eventKey, [callback]);
+        __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").set(eventKey, [callback]);
       }
     }
     off(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+      if (__classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet$1(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 +412,11 @@ var __privateMethod = (obj, member, method) => {
             }
           }
         }
-        this._listeners.set(eventKey, callbacks || []);
+        __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").set(eventKey, callbacks || []);
       }
     }
     trigger(eventKey, e) {
-      const callbacks = this._listeners.get(eventKey);
+      const callbacks = __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").get(eventKey);
       if (Array.isArray(callbacks)) {
         callbacks.forEach((cb) => {
           cb(e);
@@ -372,15 +427,83 @@ var __privateMethod = (obj, member, method) => {
       }
     }
     has(name) {
-      if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
+      if (__classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").has(name)) {
+        const list = __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
       }
       return false;
     }
+    destroy() {
+      this.clear();
+    }
+    clear() {
+      __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").clear();
+    }
+  }
+  _EventEmitter_listeners = /* @__PURE__ */ new WeakMap();
+  function calcDistance(start, end) {
+    const distance = (start.x - end.x) * (start.x - end.x) + (start.y - end.y) * (start.y - end.y);
+    return distance === 0 ? distance : Math.sqrt(distance);
   }
+  function getCenterFromTwoPoints(p1, p2) {
+    return {
+      x: p1.x + (p2.x - p1.x) / 2,
+      y: p1.y + (p2.y - p1.y) / 2
+    };
+  }
+  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 _Store_instances, _Store_temp, _Store_backUpDefaultStorage, _Store_static, _Store_createTempStorage;
+  class Store {
+    constructor(opts) {
+      _Store_instances.add(this);
+      _Store_temp.set(this, void 0);
+      _Store_backUpDefaultStorage.set(this, void 0);
+      _Store_static.set(this, void 0);
+      __classPrivateFieldSet(this, _Store_backUpDefaultStorage, deepClone(opts.defaultStorage), "f");
+      __classPrivateFieldSet(this, _Store_temp, __classPrivateFieldGet(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
+      __classPrivateFieldSet(this, _Store_static, opts.defaultStatic || {}, "f");
+    }
+    set(name, value) {
+      __classPrivateFieldGet(this, _Store_temp, "f")[name] = value;
+    }
+    get(name) {
+      return __classPrivateFieldGet(this, _Store_temp, "f")[name];
+    }
+    setStatic(name, value) {
+      __classPrivateFieldGet(this, _Store_static, "f")[name] = value;
+    }
+    getStatic(name) {
+      return __classPrivateFieldGet(this, _Store_static, "f")[name];
+    }
+    getSnapshot(opts) {
+      if ((opts === null || opts === void 0 ? void 0 : opts.deepClone) === true) {
+        return deepClone(__classPrivateFieldGet(this, _Store_temp, "f"));
+      }
+      return Object.assign({}, __classPrivateFieldGet(this, _Store_temp, "f"));
+    }
+    clear() {
+      __classPrivateFieldSet(this, _Store_temp, __classPrivateFieldGet(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
+    }
+    destroy() {
+      __classPrivateFieldSet(this, _Store_temp, null, "f");
+      __classPrivateFieldSet(this, _Store_static, null, "f");
+    }
+  }
+  _Store_temp = /* @__PURE__ */ new WeakMap(), _Store_backUpDefaultStorage = /* @__PURE__ */ new WeakMap(), _Store_static = /* @__PURE__ */ new WeakMap(), _Store_instances = /* @__PURE__ */ new WeakSet(), _Store_createTempStorage = function _Store_createTempStorage2() {
+    return deepClone(__classPrivateFieldGet(this, _Store_backUpDefaultStorage, "f"));
+  };
   function parseAngleToRadian(angle2) {
     return angle2 / 180 * Math.PI;
   }
@@ -411,6 +534,404 @@ var __privateMethod = (obj, member, method) => {
     };
     return p;
   }
+  function calcElementCenterFromVertexes(ves) {
+    const startX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const startY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const endX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const endY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const elemSize = {
+      x: startX,
+      y: startY,
+      w: endX - startX,
+      h: endY - startY
+    };
+    return calcElementCenter(elemSize);
+  }
+  function calcLineRadian(center, p) {
+    const x2 = p.x - center.x;
+    const y2 = p.y - center.y;
+    if (x2 === 0) {
+      if (y2 < 0) {
+        return 0;
+      } else if (y2 > 0) {
+        return Math.PI;
+      }
+    } else if (y2 === 0) {
+      if (x2 < 0) {
+        return Math.PI * 3 / 2;
+      } else if (x2 > 0) {
+        return Math.PI / 2;
+      }
+    }
+    if (x2 > 0 && y2 < 0) {
+      return Math.atan(Math.abs(x2) / Math.abs(y2));
+    } else if (x2 > 0 && y2 > 0) {
+      return Math.PI - Math.atan(Math.abs(x2) / Math.abs(y2));
+    } else if (x2 < 0 && y2 > 0) {
+      return Math.PI + Math.atan(Math.abs(x2) / Math.abs(y2));
+    } else if (x2 < 0 && y2 < 0) {
+      return 2 * Math.PI - Math.atan(Math.abs(x2) / Math.abs(y2));
+    }
+    return 0;
+  }
+  function rotatePoint(center, start, radian) {
+    const startRadian = calcLineRadian(center, start);
+    const rotateRadian = radian;
+    let endRadian = startRadian + rotateRadian;
+    if (endRadian > Math.PI * 2) {
+      endRadian = endRadian - Math.PI * 2;
+    } else if (endRadian < 0 - Math.PI * 2) {
+      endRadian = endRadian + Math.PI * 2;
+    }
+    if (endRadian < 0) {
+      endRadian = endRadian + Math.PI * 2;
+    }
+    const length = calcDistance(center, start);
+    let x2 = 0;
+    let y2 = 0;
+    if (endRadian === 0) {
+      x2 = 0;
+      y2 = 0 - length;
+    } else if (endRadian > 0 && endRadian < Math.PI / 2) {
+      x2 = Math.sin(endRadian) * length;
+      y2 = 0 - Math.cos(endRadian) * length;
+    } else if (endRadian === Math.PI / 2) {
+      x2 = length;
+      y2 = 0;
+    } else if (endRadian > Math.PI / 2 && endRadian < Math.PI) {
+      x2 = Math.sin(Math.PI - endRadian) * length;
+      y2 = Math.cos(Math.PI - endRadian) * length;
+    } else if (endRadian === Math.PI) {
+      x2 = 0;
+      y2 = length;
+    } else if (endRadian > Math.PI && endRadian < 3 / 2 * Math.PI) {
+      x2 = 0 - Math.sin(endRadian - Math.PI) * length;
+      y2 = Math.cos(endRadian - Math.PI) * length;
+    } else if (endRadian === 3 / 2 * Math.PI) {
+      x2 = 0 - length;
+      y2 = 0;
+    } else if (endRadian > 3 / 2 * Math.PI && endRadian < 2 * Math.PI) {
+      x2 = 0 - Math.sin(2 * Math.PI - endRadian) * length;
+      y2 = 0 - Math.cos(2 * Math.PI - endRadian) * length;
+    } else if (endRadian === 2 * Math.PI) {
+      x2 = 0;
+      y2 = 0 - length;
+    }
+    x2 += center.x;
+    y2 += center.y;
+    return { x: x2, y: y2 };
+  }
+  function getElementRotateVertexes(elemSize, center, angle2) {
+    const { x: x2, y: y2, w: w2, h: h2 } = elemSize;
+    let p1 = { x: x2, y: y2 };
+    let p2 = { x: x2 + w2, y: y2 };
+    let p3 = { x: x2 + w2, y: y2 + h2 };
+    let p4 = { x: x2, y: y2 + h2 };
+    if (angle2 && (angle2 > 0 || angle2 < 0)) {
+      const radian = parseAngleToRadian(limitAngle(angle2));
+      p1 = rotatePoint(center, p1, radian);
+      p2 = rotatePoint(center, p2, radian);
+      p3 = rotatePoint(center, p3, radian);
+      p4 = rotatePoint(center, p4, radian);
+    }
+    return [p1, p2, p3, p4];
+  }
+  function rotateElementVertexes(elemSize) {
+    const { angle: angle2 = 0 } = elemSize;
+    const center = calcElementCenter(elemSize);
+    return getElementRotateVertexes(elemSize, center, angle2);
+  }
+  function rotateVertexes(center, ves, radian) {
+    return [
+      rotatePoint(center, { x: ves[0].x, y: ves[0].y }, radian),
+      rotatePoint(center, { x: ves[1].x, y: ves[1].y }, radian),
+      rotatePoint(center, { x: ves[2].x, y: ves[2].y }, radian),
+      rotatePoint(center, { x: ves[3].x, y: ves[3].y }, radian)
+    ];
+  }
+  function limitAngle(angle2) {
+    if (!(angle2 > 0 || angle2 < 0) || angle2 === 0 || angle2 === 360) {
+      return 0;
+    }
+    let num = angle2 % 360;
+    if (num < 0) {
+      num += 360;
+    } else if (angle2 === 360) {
+      num = 0;
+    }
+    return num;
+  }
+  function getGroupQueueByElementPosition(elements, position) {
+    var _a;
+    const groupQueue = [];
+    let currentElements = elements;
+    if (position.length > 1) {
+      for (let i = 0; i < position.length - 1; i++) {
+        const index = position[i];
+        const group = currentElements[index];
+        if ((group === null || group === void 0 ? void 0 : group.type) === "group" && Array.isArray((_a = group === null || group === void 0 ? void 0 : group.detail) === null || _a === void 0 ? void 0 : _a.children)) {
+          groupQueue.push(group);
+          currentElements = group.detail.children;
+        } else {
+          return null;
+        }
+      }
+    }
+    return groupQueue;
+  }
+  function findElementFromListByPosition(position, list) {
+    let result = null;
+    let tempList = list;
+    for (let i = 0; i < position.length; i++) {
+      const pos = position[i];
+      const item = tempList[pos];
+      if (i < position.length - 1 && (item === null || item === void 0 ? void 0 : item.type) === "group") {
+        tempList = item.detail.children;
+      } else if (i === position.length - 1) {
+        result = item;
+      } else {
+        break;
+      }
+    }
+    return result;
+  }
+  function getElementVertexes(elemSize) {
+    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
+    return [
+      { x: x2, y: y2 },
+      { x: x2 + w2, y: y2 },
+      { x: x2 + w2, y: y2 + h2 },
+      { x: x2, y: y2 + h2 }
+    ];
+  }
+  function calcElementVertexes(elemSize) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    if (angle2 === 0) {
+      return getElementVertexes(elemSize);
+    }
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2 }), angle2);
+  }
+  function calcElementQueueVertexesQueueInGroup(groupQueue) {
+    const vesList = [];
+    let totalX = 0;
+    let totalY = 0;
+    const rotateActionList = [];
+    const elemQueue = [...groupQueue];
+    for (let i = 0; i < elemQueue.length; i++) {
+      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
+      totalX += x2;
+      totalY += y2;
+      let ves;
+      if (i === 0) {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
+        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        rotateActionList.push({
+          center: calcElementCenter(elemSize),
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      } else {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
+        ves = getElementVertexes(elemSize);
+        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
+          const { center, radian } = rotateActionList[aIdx];
+          ves = rotateVertexes(center, ves, radian);
+        }
+        const vesCenter = calcElementCenterFromVertexes(ves);
+        if (angle2 > 0 || angle2 < 0) {
+          const radian = parseAngleToRadian(angle2);
+          ves = rotateVertexes(vesCenter, ves, radian);
+        }
+        rotateActionList.push({
+          center: vesCenter,
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      }
+      vesList.push(ves);
+    }
+    return vesList;
+  }
+  function calcElementVertexesQueueInGroup(targetElem, opts) {
+    const { groupQueue } = opts;
+    if (!(groupQueue.length > 0)) {
+      return [calcElementVertexes(targetElem)];
+    }
+    const elemQueue = [...groupQueue, ...[targetElem]];
+    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    return vesList;
+  }
+  function calcElementVertexesInGroup(targetElem, opts) {
+    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+    const ves = vesList.pop();
+    return ves || null;
+  }
+  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 calcViewPointSize(size, opts) {
+    const { viewScaleInfo } = opts;
+    const { x: x2, y: y2 } = size;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const newSize = {
+      x: x2 * scale + offsetLeft,
+      y: y2 * scale + offsetTop
+    };
+    return newSize;
+  }
+  function isViewPointInElement(p, opts) {
+    const { context2d: ctx, element: elem, viewScaleInfo } = opts;
+    const { angle: angle2 = 0 } = elem;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo });
+    const vertexes = rotateElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    if (vertexes.length >= 2) {
+      ctx.beginPath();
+      ctx.moveTo(vertexes[0].x, vertexes[0].y);
+      for (let i = 1; i < vertexes.length; i++) {
+        ctx.lineTo(vertexes[i].x, vertexes[i].y);
+      }
+      ctx.closePath();
+    }
+    if (ctx.isPointInPath(p.x, p.y)) {
+      return true;
+    }
+    return false;
+  }
+  function getViewPointAtElement(p, opts) {
+    var _a, _b, _c;
+    const { context2d: ctx, data, viewScaleInfo, groupQueue } = opts;
+    const result = {
+      index: -1,
+      element: null,
+      groupQueueIndex: -1
+    };
+    if (groupQueue && Array.isArray(groupQueue) && (groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+      for (let gIdx = groupQueue.length - 1; gIdx >= 0; gIdx--) {
+        let totalX = 0;
+        let totalY = 0;
+        let totalAngle = 0;
+        for (let i = 0; i <= gIdx; i++) {
+          totalX += groupQueue[i].x;
+          totalY += groupQueue[i].y;
+          totalAngle += groupQueue[i].angle || 0;
+        }
+        const lastGroup = groupQueue[gIdx];
+        if (lastGroup && lastGroup.type === "group" && Array.isArray((_a = lastGroup.detail) === null || _a === void 0 ? void 0 : _a.children)) {
+          for (let i = 0; i < lastGroup.detail.children.length; i++) {
+            const child = lastGroup.detail.children[i];
+            if (((_b = child === null || child === void 0 ? void 0 : child.operations) === null || _b === void 0 ? void 0 : _b.invisible) === true) {
+              continue;
+            }
+            if (child) {
+              const elemSize = {
+                x: totalX + child.x,
+                y: totalY + child.y,
+                w: child.w,
+                h: child.h,
+                angle: totalAngle + (child.angle || 0)
+              };
+              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo })) {
+                result.element = child;
+                if (gIdx < groupQueue.length - 1 || child.type !== "group") {
+                  result.groupQueueIndex = gIdx;
+                }
+                break;
+              }
+            } else {
+              break;
+            }
+          }
+        }
+        if (result.element) {
+          break;
+        }
+      }
+    }
+    if (result.element) {
+      return result;
+    }
+    for (let i = data.elements.length - 1; i >= 0; i--) {
+      const elem = data.elements[i];
+      if (((_c = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _c === void 0 ? void 0 : _c.invisible) === true) {
+        continue;
+      }
+      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo })) {
+        result.index = i;
+        result.element = elem;
+        break;
+      }
+    }
+    return result;
+  }
+  function calcElementOriginRectInfo(elemSize, opts) {
+    const { groupQueue } = opts;
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const top = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
+    const right = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
+    const bottom = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
+    const left = getCenterFromTwoPoints(vertexes[3], vertexes[0]);
+    const topLeft = vertexes[0];
+    const topRight = vertexes[1];
+    const bottomRight = vertexes[2];
+    const bottomLeft = vertexes[3];
+    const maxX = Math.max(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const maxY = Math.max(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const minX = Math.min(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const minY = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const center = {
+      x: (maxX + minX) / 2,
+      y: (maxY + minY) / 2
+    };
+    const rectInfo = {
+      center,
+      topLeft,
+      topRight,
+      bottomLeft,
+      bottomRight,
+      top,
+      right,
+      left,
+      bottom
+    };
+    return rectInfo;
+  }
+  function originRectInfoToRangeRectInfo(originRectInfo) {
+    const rangeMaxX = Math.max(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
+    const rangeMaxY = Math.max(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
+    const rangeMinX = Math.min(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
+    const rangeMinY = Math.min(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
+    const rangeCenter = { x: originRectInfo.center.x, y: originRectInfo.center.y };
+    const rangeTopLeft = { x: rangeMinX, y: rangeMinY };
+    const rangeTopRight = { x: rangeMaxX, y: rangeMinY };
+    const rangeBottomRight = { x: rangeMaxX, y: rangeMaxY };
+    const rangeBottomLeft = { x: rangeMinX, y: rangeMaxY };
+    const rangeTop = getCenterFromTwoPoints(rangeTopLeft, rangeTopRight);
+    const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
+    const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
+    const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
+    const rangeRectInfo = {
+      center: rangeCenter,
+      topLeft: rangeTopLeft,
+      topRight: rangeTopRight,
+      bottomLeft: rangeBottomLeft,
+      bottomRight: rangeBottomRight,
+      top: rangeTop,
+      right: rangeRight,
+      left: rangeLeft,
+      bottom: rangeBottom
+    };
+    return rangeRectInfo;
+  }
   function generateSVGPath(commands) {
     let path = "";
     commands.forEach((item) => {
@@ -434,9 +955,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;
@@ -446,8 +968,10 @@ var __privateMethod = (obj, member, method) => {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
     let { borderRadius: borderRadius2 } = viewElem.detail;
+    const { 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 +986,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 +1015,21 @@ 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 +1074,50 @@ 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 });
+      ctx.globalAlpha = parentOpacity;
+    };
+    if (clipPath) {
+      drawClipPath(ctx, viewElem, {
+        originElem,
+        calcElemSize,
+        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,
+          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;
@@ -574,7 +1133,39 @@ var __privateMethod = (obj, member, method) => {
       ctx.scale(totalScale * scaleW, totalScale * scaleH);
       const pathStr = generateSVGPath(clipPath.commands || []);
       const path2d = new Path2D(pathStr);
-      ctx.clip(path2d);
+      ctx.clip(path2d, "nonzero");
+      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 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 }, () => {
@@ -589,12 +1180,9 @@ 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,
-        viewSizeInfo
+        viewScaleInfo
       });
       ctx.beginPath();
       ctx.moveTo(x2 + radiusList[0], y2);
@@ -636,37 +1224,35 @@ var __privateMethod = (obj, member, method) => {
           }
         }
       }
-      ctx.fill();
+      ctx.fill("nonzero");
       if (transform && transform.length > 0) {
         ctx.setTransform(1, 0, 0, 1, 0, 0);
       }
     }
   }
   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;
     if (isColorStr(viewElem.detail.borderColor) === true) {
       borderColor = viewElem.detail.borderColor;
     }
-    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
-    let bw = 0;
-    if (typeof borderWidth2 === "number") {
-      bw = borderWidth2 || 1;
+    const { borderDash, borderWidth: borderWidth2, borderRadius: borderRadius2, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
+    let viewBorderDash = [];
+    if (Array.isArray(borderDash) && borderDash.length > 0) {
+      viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    }
+    if (viewBorderDash.length > 0) {
+      ctx.lineCap = "butt";
+    } else {
+      ctx.lineCap = "square";
     }
-    bw = bw * scale;
     let radiusList = [0, 0, 0, 0];
     if (typeof borderRadius2 === "number") {
       const br = borderRadius2 * scale;
@@ -674,11 +1260,12 @@ var __privateMethod = (obj, member, method) => {
     } else if (Array.isArray(borderRadius2) && (borderRadius2 == null ? void 0 : borderRadius2.length) === 4) {
       radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
     }
-    ctx.strokeStyle = borderColor;
-    let viewBorderDash = [];
-    if (Array.isArray(borderDash) && borderDash.length > 0) {
-      viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    let bw = 0;
+    if (typeof borderWidth2 === "number") {
+      bw = borderWidth2 || 1;
     }
+    bw = bw * scale;
+    ctx.strokeStyle = borderColor;
     let borderTop = 0;
     let borderRight = 0;
     let borderBottom = 0;
@@ -758,11 +1345,6 @@ var __privateMethod = (obj, member, method) => {
         w2 = viewElem.w;
         h2 = viewElem.h;
       }
-      if (viewBorderDash.length > 0) {
-        ctx.lineCap = "butt";
-      } else {
-        ctx.lineCap = "square";
-      }
       w2 = Math.max(w2, 1);
       h2 = Math.max(h2, 1);
       radiusList = radiusList.map((r) => {
@@ -778,7 +1360,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,69 +1376,96 @@ 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") ;
+            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("nonzero");
+            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, {
         viewScaleInfo,
-        viewSizeInfo,
         renderContent: () => {
           drawBox(ctx, viewElem, {
             originElem: elem,
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
             }
           });
@@ -867,30 +1475,32 @@ 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, {
         viewScaleInfo,
-        viewSizeInfo,
         renderContent: () => {
           drawBox(ctx, viewElem, {
             originElem: elem,
             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
+                  viewScaleInfo
                 });
+                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();
@@ -900,10 +1510,44 @@ var __privateMethod = (obj, member, method) => {
                 ctx.arcTo(x22, y22 + h22, x22, y22, radiusList[3]);
                 ctx.arcTo(x22, y22, x22 + w22, y22, radiusList[0]);
                 ctx.closePath();
-                ctx.fill();
-                ctx.clip();
-                ctx.drawImage(content, x22, y22, w22, h22);
-                ctx.globalAlpha = 1;
+                ctx.fill("nonzero");
+                ctx.clip("nonzero");
+                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,115 +1558,73 @@ 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 }) || 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 }) || 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();
+  const detailConfig$1 = getDefaultElementDetailConfig();
   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, calculator } = 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 },
+      var _a, _b;
+      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
-          });
-          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) => {
-            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] || "";
-                } else {
-                  lines.push({
-                    text: lineText,
-                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                  });
-                  lineText = tempText[i] || "";
-                  lineNum++;
-                }
-                if ((lineNum + 1) * fontHeight > h2) {
-                  break;
-                }
-                if (tempText.length - 1 === i) {
-                  if ((lineNum + 1) * fontHeight < h2) {
-                    lines.push({
-                      text: lineText,
-                      width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                    });
-                    if (idx < detailTextList.length - 1) {
-                      lineNum++;
-                    }
-                    break;
-                  }
-                }
-              }
-            } else {
-              lines.push({
-                text: "",
-                width: 0
-              });
-            }
+          drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+            viewScaleInfo,
+            viewSizeInfo,
+            parentOpacity
           });
-          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;
+        }
+      });
+      {
+        const detail = {
+          ...detailConfig$1,
+          ...elem.detail
+        };
+        const originFontSize = detail.fontSize || detailConfig$1.fontSize;
+        const fontSize2 = originFontSize * viewScaleInfo.scale;
+        if (fontSize2 < 2) {
+          return;
+        }
+        ctx.fillStyle = elem.detail.color || detailConfig$1.color;
+        ctx.textBaseline = "top";
+        ctx.$setFont({
+          fontWeight: detail.fontWeight,
+          fontSize: fontSize2,
+          fontFamily: enhanceFontFamliy(detail.fontFamily)
+        });
+        {
+          const virtualTextDetail = calculator.getVirtualFlatItem(elem.uuid);
+          if (Array.isArray(virtualTextDetail == null ? void 0 : virtualTextDetail.textLines) && ((_a = virtualTextDetail == null ? void 0 : virtualTextDetail.textLines) == null ? void 0 : _a.length) > 0) {
             if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
               ctx.shadowColor = detail.textShadowColor;
             }
@@ -1035,43 +1637,64 @@ var __privateMethod = (obj, member, method) => {
             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);
+            (_b = virtualTextDetail == null ? void 0 : virtualTextDetail.textLines) == null ? void 0 : _b.forEach((line) => {
+              ctx.fillText(line.text, x2 + line.x * viewScaleInfo.scale, y2 + line.y * viewScaleInfo.scale);
             });
           }
         }
-      });
+      }
     });
   }
   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,
-            viewSizeInfo,
             renderContent: () => {
               ctx.save();
               ctx.translate(internalX, internalY);
@@ -1079,8 +1702,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 || "nonzero");
               }
               if (detail.stroke && detail.strokeWidth !== 0) {
                 ctx.strokeStyle = detail.stroke;
@@ -1096,11 +1725,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,23 +1790,23 @@ 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,
         renderContent: () => {
           drawBox(ctx, viewElem, {
             originElem: elem,
             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,
-                viewSizeInfo
+                viewScaleInfo
               });
               if (elem.detail.overflow === "hidden") {
                 ctx.save();
@@ -1179,8 +1818,8 @@ var __privateMethod = (obj, member, method) => {
                 ctx.arcTo(x22, y22 + h22, x22, y22, radiusList[3]);
                 ctx.arcTo(x22, y22, x22 + w22, y22, radiusList[0]);
                 ctx.closePath();
-                ctx.fill();
-                ctx.clip();
+                ctx.fill("nonzero");
+                ctx.clip("nonzero");
               }
               if (Array.isArray(elem.detail.children)) {
                 const { parentElementSize: parentSize } = opts;
@@ -1191,7 +1830,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 +1841,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 +1879,71 @@ 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,
+      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
+      });
+      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("nonzero");
+      ctx.clip("nonzero");
+    }
+    renderContent(ctx);
+    if (layout.detail.overflow === "hidden") {
+      ctx.restore();
+    }
+    drawBoxBorder(ctx, viewElem, { viewScaleInfo });
+    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,17 +1966,12 @@ var __privateMethod = (obj, member, method) => {
   class Loader extends EventEmitter {
     constructor() {
       super();
-      __privateAdd(this, _registerLoadFunc);
-      __privateAdd(this, _getLoadElementSource);
-      __privateAdd(this, _createLoadItem);
-      __privateAdd(this, _emitLoad);
-      __privateAdd(this, _emitError);
-      __privateAdd(this, _loadResource);
-      __privateAdd(this, _isExistingErrorStorage);
+      __privateAdd(this, _Loader_instances);
       __privateAdd(this, _loadFuncMap, {});
       __privateAdd(this, _currentLoadItemMap, {});
       __privateAdd(this, _storageLoadItemMap, {});
-      __privateMethod(this, _registerLoadFunc, registerLoadFunc_fn).call(this, "image", async (elem, assets) => {
+      __privateAdd(this, _hasDestroyed, false);
+      __privateMethod(this, _Loader_instances, 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);
@@ -1292,12 +1981,12 @@ var __privateMethod = (obj, member, method) => {
           content
         };
       });
-      __privateMethod(this, _registerLoadFunc, registerLoadFunc_fn).call(this, "html", async (elem, assets) => {
+      __privateMethod(this, _Loader_instances, 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,
@@ -1305,7 +1994,7 @@ var __privateMethod = (obj, member, method) => {
           content
         };
       });
-      __privateMethod(this, _registerLoadFunc, registerLoadFunc_fn).call(this, "svg", async (elem, assets) => {
+      __privateMethod(this, _Loader_instances, 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);
@@ -1316,12 +2005,25 @@ var __privateMethod = (obj, member, method) => {
         };
       });
     }
+    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 (__privateMethod(this, _isExistingErrorStorage, isExistingErrorStorage_fn).call(this, element)) {
+      if (__privateGet(this, _hasDestroyed) === true) {
+        return;
+      }
+      if (__privateMethod(this, _Loader_instances, isExistingErrorStorage_fn).call(this, element)) {
         return;
       }
       if (supportElementTypes.includes(element.type)) {
-        __privateMethod(this, _loadResource, loadResource_fn).call(this, element, assets);
+        __privateMethod(this, _Loader_instances, loadResource_fn).call(this, element, assets);
       }
     }
     getContent(element) {
@@ -1339,11 +2041,11 @@ var __privateMethod = (obj, member, method) => {
   _loadFuncMap = new WeakMap();
   _currentLoadItemMap = new WeakMap();
   _storageLoadItemMap = new WeakMap();
-  _registerLoadFunc = new WeakSet();
+  _hasDestroyed = new WeakMap();
+  _Loader_instances = 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;
@@ -1356,7 +2058,6 @@ var __privateMethod = (obj, member, method) => {
     }
     return source;
   };
-  _createLoadItem = new WeakSet();
   createLoadItem_fn = function(element) {
     return {
       element,
@@ -1365,88 +2066,535 @@ var __privateMethod = (obj, member, method) => {
       error: null,
       startTime: -1,
       endTime: -1,
-      source: __privateMethod(this, _getLoadElementSource, getLoadElementSource_fn).call(this, element)
+      source: __privateMethod(this, _Loader_instances, 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) {
+    if (!__privateGet(this, _hasDestroyed)) {
+      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 });
       }
-    } 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 = __privateGet(this, _storageLoadItemMap)[assetId];
-    if (storageItem) {
-      if (storageItem.startTime < item.startTime) {
+    const storageItem = (_a = __privateGet(this, _storageLoadItemMap)) == null ? void 0 : _a[assetId];
+    if (!__privateGet(this, _hasDestroyed)) {
+      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 });
       }
-    } 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 item = __privateMethod(this, _Loader_instances, 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") {
+    if (typeof loadFunc === "function" && !__privateGet(this, _hasDestroyed)) {
       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);
+        if (!__privateGet(this, _hasDestroyed)) {
+          item.content = result.content;
+          item.endTime = Date.now();
+          item.status = "load";
+          __privateMethod(this, _Loader_instances, 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);
+        __privateMethod(this, _Loader_instances, 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)) {
+    if (existItem && existItem.status === "error" && existItem.source && existItem.source === __privateMethod(this, _Loader_instances, getLoadElementSource_fn).call(this, element)) {
       return true;
     }
     return false;
   };
+  const detailConfig = getDefaultElementDetailConfig();
+  function isTextWidthWithinErrorRange(w0, w1, scale) {
+    return w0 >= w1;
+  }
+  function calcVirtualTextDetail(elem, opts) {
+    const { w: w2, h: h2 } = elem;
+    const x2 = 0;
+    const y2 = 0;
+    const ctx = opts.tempContext;
+    const lines = [];
+    const detail = {
+      ...detailConfig,
+      ...elem.detail
+    };
+    const originFontSize = detail.fontSize || detailConfig.fontSize;
+    const fontSize2 = originFontSize;
+    if (fontSize2 < 2) {
+      return {};
+    }
+    const originLineHeight = detail.lineHeight || originFontSize;
+    const lineHeight2 = originLineHeight;
+    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");
+    let lineNum = 0;
+    detailTextList.forEach((itemText, idx) => {
+      if (detail.minInlineSize === "maxContent") {
+        lines.push({
+          x: x2,
+          y: 0,
+          // TODO
+          text: itemText,
+          width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
+        });
+      } else {
+        let lineText = "";
+        let splitStr = "";
+        let tempStrList = itemText.split(splitStr);
+        if (detail.wordBreak === "normal") {
+          splitStr = " ";
+          const wordList = itemText.split(splitStr);
+          tempStrList = [];
+          wordList.forEach((word, idx2) => {
+            tempStrList.push(word);
+            if (idx2 < wordList.length - 1) {
+              tempStrList.push(splitStr);
+            }
+          });
+        }
+        if (tempStrList.length === 1 && detail.overflow === "visible") {
+          lines.push({
+            x: x2,
+            y: 0,
+            // TODO
+            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)) {
+              lineText += tempStrList[i] || "";
+            } else {
+              lines.push({
+                x: x2,
+                y: 0,
+                // TODO
+                text: lineText,
+                width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+              });
+              lineText = tempStrList[i] || "";
+              lineNum++;
+            }
+            if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
+              break;
+            }
+            if (tempStrList.length - 1 === i) {
+              if ((lineNum + 1) * fontHeight <= h2) {
+                lines.push({
+                  x: x2,
+                  y: 0,
+                  // TODO
+                  text: lineText,
+                  width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                });
+                if (idx < detailTextList.length - 1) {
+                  lineNum++;
+                }
+                break;
+              }
+            }
+          }
+        } else {
+          lines.push({
+            x: x2,
+            y: 0,
+            // TODO
+            text: "",
+            width: 0
+          });
+        }
+      }
+    });
+    let startY = 0;
+    let eachLineStartY = 0;
+    if (fontHeight > fontSize2) {
+      eachLineStartY = (fontHeight - fontSize2) / 2;
+    }
+    if (lines.length * fontHeight < h2) {
+      if (detail.verticalAlign === "top") {
+        startY = 0;
+      } else if (detail.verticalAlign === "bottom") {
+        startY += h2 - lines.length * fontHeight;
+      } else {
+        startY += (h2 - lines.length * fontHeight) / 2;
+      }
+    }
+    {
+      const _y = y2 + startY;
+      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);
+        }
+        lines[i].x = _x;
+        lines[i].y = _y + fontHeight * i + eachLineStartY;
+      });
+    }
+    const virtualTextDetail = {
+      textLines: lines
+    };
+    return virtualTextDetail;
+  }
+  function calcVirtualFlatDetail(elem, opts) {
+    let virtualDetail = {};
+    if (elem.type === "text") {
+      virtualDetail = calcVirtualTextDetail(elem, opts);
+    }
+    return virtualDetail;
+  }
+  function elementsToVirtualFlatMap(elements, opts) {
+    const virtualFlatMap = {};
+    const currentPosition = [];
+    const _walk = (elem) => {
+      const baseInfo = {
+        type: elem.type,
+        isVisibleInView: true,
+        position: [...currentPosition]
+      };
+      let originRectInfo = null;
+      const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
+      originRectInfo = calcElementOriginRectInfo(elem, {
+        groupQueue: groupQueue || []
+      });
+      const virtualItem = {
+        ...baseInfo,
+        ...{
+          originRectInfo,
+          rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
+        },
+        ...calcVirtualFlatDetail(elem, opts)
+      };
+      virtualFlatMap[elem.uuid] = virtualItem;
+      if (elem.type === "group") {
+        elem.detail.children.forEach((ele, i) => {
+          currentPosition.push(i);
+          _walk(ele);
+          currentPosition.pop();
+        });
+      }
+    };
+    elements.forEach((elem, index) => {
+      currentPosition.push(index);
+      _walk(elem);
+      currentPosition.pop();
+    });
+    return virtualFlatMap;
+  }
+  function sortElementsViewVisiableInfoMap(elements, opts) {
+    const { viewScaleInfo, viewSizeInfo, tempContext } = opts;
+    const visibleInfoMap = elementsToVirtualFlatMap(elements, { tempContext });
+    return updateVirtualFlatItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
+  }
+  function isRangeRectInfoCollide(info1, info2) {
+    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    if (rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY || rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY) {
+      return true;
+    }
+    return false;
+  }
+  function updateVirtualFlatItemMapStatus(virtualFlatItemMap, opts) {
+    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+    let visibleCount = 0;
+    let invisibleCount = 0;
+    Object.keys(virtualFlatItemMap).forEach((uuid) => {
+      const info = virtualFlatItemMap[uuid];
+      info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+      info.isVisibleInView ? visibleCount++ : invisibleCount++;
+    });
+    return { virtualFlatItemMap, visibleCount, invisibleCount };
+  }
+  function calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { width, height } = viewSizeInfo;
+    const x2 = 0 - offsetLeft / scale;
+    const y2 = 0 - offsetTop / scale;
+    const w2 = width / scale;
+    const h2 = height / scale;
+    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
+    const topLeft = { x: x2, y: y2 };
+    const topRight = { x: x2 + w2, y: y2 };
+    const bottomLeft = { x: x2, y: y2 + h2 };
+    const bottomRight = { x: x2 + w2, y: y2 + h2 };
+    const left = { x: x2, y: center.y };
+    const top = { x: center.x, y: y2 };
+    const right = { x: x2 + w2, y: center.y };
+    const bottom = { x: center.x, y: y2 + h2 };
+    const rectInfo = {
+      center,
+      topLeft,
+      topRight,
+      bottomLeft,
+      bottomRight,
+      left,
+      top,
+      right,
+      bottom
+    };
+    return rectInfo;
+  }
+  class Calculator {
+    constructor(opts) {
+      __privateAdd(this, _opts);
+      __privateAdd(this, _store);
+      __privateSet(this, _opts, opts);
+      __privateSet(this, _store, new Store({
+        defaultStorage: {
+          virtualFlatItemMap: {},
+          visibleCount: 0,
+          invisibleCount: 0
+        }
+      }));
+    }
+    toGridNum(num, opts) {
+      if ((opts == null ? void 0 : opts.ignore) === true) {
+        return num;
+      }
+      return Math.round(num);
+    }
+    destroy() {
+      __privateSet(this, _opts, null);
+    }
+    needRender(elem) {
+      const virtualFlatItemMap = __privateGet(this, _store).get("virtualFlatItemMap");
+      const info = virtualFlatItemMap[elem.uuid];
+      if (!info) {
+        return true;
+      }
+      return info.isVisibleInView;
+    }
+    getPointElement(p, opts) {
+      const context2d = __privateGet(this, _opts).tempContext;
+      return getViewPointAtElement(p, { ...opts, ...{ context2d } });
+    }
+    resetVirtualFlatItemMap(data, opts) {
+      if (data) {
+        const { virtualFlatItemMap, invisibleCount, visibleCount } = sortElementsViewVisiableInfoMap(data.elements, {
+          ...opts,
+          ...{
+            tempContext: __privateGet(this, _opts).tempContext
+          }
+        });
+        __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
+        __privateGet(this, _store).set("invisibleCount", invisibleCount);
+        __privateGet(this, _store).set("visibleCount", visibleCount);
+      }
+    }
+    updateVisiableStatus(opts) {
+      const { virtualFlatItemMap, invisibleCount, visibleCount } = updateVirtualFlatItemMapStatus(
+        __privateGet(this, _store).get("virtualFlatItemMap"),
+        opts
+      );
+      __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
+      __privateGet(this, _store).set("invisibleCount", invisibleCount);
+      __privateGet(this, _store).set("visibleCount", visibleCount);
+    }
+    calcViewRectInfoFromOrigin(uuid, opts) {
+      const infoData = __privateGet(this, _store).get("virtualFlatItemMap")[uuid];
+      if (!(infoData == null ? void 0 : infoData.originRectInfo)) {
+        return null;
+      }
+      const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
+      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.originRectInfo;
+      if (checkVisible === true && infoData.isVisibleInView === false) {
+        return null;
+      }
+      const calcOpts = { viewScaleInfo };
+      const viewRectInfo = {
+        center: calcViewPointSize(center, calcOpts),
+        left: calcViewPointSize(left, calcOpts),
+        right: calcViewPointSize(right, calcOpts),
+        bottom: calcViewPointSize(bottom, calcOpts),
+        top: calcViewPointSize(top, calcOpts),
+        topLeft: calcViewPointSize(topLeft, calcOpts),
+        topRight: calcViewPointSize(topRight, calcOpts),
+        bottomLeft: calcViewPointSize(bottomLeft, calcOpts),
+        bottomRight: calcViewPointSize(bottomRight, calcOpts)
+      };
+      return viewRectInfo;
+    }
+    calcViewRectInfoFromRange(uuid, opts) {
+      const infoData = __privateGet(this, _store).get("virtualFlatItemMap")[uuid];
+      if (!(infoData == null ? void 0 : infoData.originRectInfo)) {
+        return null;
+      }
+      const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
+      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.rangeRectInfo;
+      if (checkVisible === true && infoData.isVisibleInView === false) {
+        return null;
+      }
+      const calcOpts = { viewScaleInfo };
+      const viewRectInfo = {
+        center: calcViewPointSize(center, calcOpts),
+        left: calcViewPointSize(left, calcOpts),
+        right: calcViewPointSize(right, calcOpts),
+        bottom: calcViewPointSize(bottom, calcOpts),
+        top: calcViewPointSize(top, calcOpts),
+        topLeft: calcViewPointSize(topLeft, calcOpts),
+        topRight: calcViewPointSize(topRight, calcOpts),
+        bottomLeft: calcViewPointSize(bottomLeft, calcOpts),
+        bottomRight: calcViewPointSize(bottomRight, calcOpts)
+      };
+      return viewRectInfo;
+    }
+    modifyText(element) {
+      const virtualFlatItemMap = __privateGet(this, _store).get("virtualFlatItemMap");
+      const flatItem = virtualFlatItemMap[element.uuid];
+      if (element && element.type === "text") {
+        const newVirtualFlatItem = {
+          ...flatItem,
+          ...calcVirtualTextDetail(element, {
+            tempContext: __privateGet(this, _opts).tempContext
+          })
+        };
+        virtualFlatItemMap[element.uuid] = newVirtualFlatItem;
+        __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
+      }
+    }
+    modifyVirtualFlatItemMap(data, opts) {
+      const { modifyInfo, viewScaleInfo, viewSizeInfo } = opts;
+      const { type, content } = modifyInfo;
+      const list = data.elements;
+      const virtualFlatItemMap = __privateGet(this, _store).get("virtualFlatItemMap");
+      if (type === "deleteElement") {
+        const { element } = content;
+        const uuids = [];
+        const _walk = (e) => {
+          uuids.push(e.uuid);
+          if (e.type === "group" && Array.isArray(e.detail.children)) {
+            e.detail.children.forEach((child) => {
+              _walk(child);
+            });
+          }
+        };
+        _walk(element);
+        uuids.forEach((uuid) => {
+          delete virtualFlatItemMap[uuid];
+        });
+        __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
+      } else if (type === "addElement" || type === "updateElement") {
+        const { position } = content;
+        const element = findElementFromListByPosition(position, data.elements);
+        const groupQueue = getGroupQueueByElementPosition(list, position);
+        if (element) {
+          if (type === "updateElement" && element.type === "group") {
+            this.resetVirtualFlatItemMap(data, { viewScaleInfo, viewSizeInfo });
+          } else {
+            const originRectInfo = calcElementOriginRectInfo(element, {
+              groupQueue: groupQueue || []
+            });
+            const newVirtualFlatItem = {
+              type: element.type,
+              originRectInfo,
+              rangeRectInfo: is.angle(element.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo,
+              isVisibleInView: true,
+              position: [...position],
+              ...calcVirtualFlatDetail(element, {
+                tempContext: __privateGet(this, _opts).tempContext
+              })
+            };
+            virtualFlatItemMap[element.uuid] = newVirtualFlatItem;
+            __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
+            if (type === "updateElement") {
+              this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
+            }
+          }
+        }
+      } else if (type === "moveElement") {
+        this.resetVirtualFlatItemMap(data, { viewScaleInfo, viewSizeInfo });
+      }
+    }
+    getVirtualFlatItem(uuid) {
+      const itemMap = __privateGet(this, _store).get("virtualFlatItemMap");
+      return itemMap[uuid] || null;
+    }
+  }
+  _opts = new WeakMap();
+  _store = new WeakMap();
   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, _Renderer_instances);
+      __privateAdd(this, _opts2);
       __privateAdd(this, _loader, new Loader());
-      __privateSet(this, _opts, opts);
-      __privateMethod(this, _init, init_fn).call(this);
+      __privateAdd(this, _calculator);
+      __privateAdd(this, _hasDestroyed2, false);
+      __privateSet(this, _opts2, opts);
+      __privateSet(this, _calculator, new Calculator({
+        tempContext: opts.tempContext
+      }));
+      __privateMethod(this, _Renderer_instances, init_fn).call(this);
+    }
+    isDestroyed() {
+      return __privateGet(this, _hasDestroyed2);
+    }
+    destroy() {
+      this.clear();
+      __privateSet(this, _opts2, null);
+      __privateGet(this, _loader).destroy();
+      __privateSet(this, _loader, null);
+      __privateSet(this, _hasDestroyed2, true);
     }
     updateOptions(opts) {
-      __privateSet(this, _opts, opts);
+      __privateSet(this, _opts2, opts);
     }
     drawData(data, opts) {
       const loader = __privateGet(this, _loader);
-      const { calculator } = __privateGet(this, _opts);
-      const viewContext = __privateGet(this, _opts).viewContext;
+      const calculator = __privateGet(this, _calculator);
+      const { sharer } = __privateGet(this, _opts2);
+      const viewContext = __privateGet(this, _opts2).viewContext;
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       const parentElementSize = {
         x: 0,
@@ -1454,20 +2602,47 @@ var __privateMethod = (obj, member, method) => {
         w: opts.viewSizeInfo.width,
         h: opts.viewSizeInfo.height
       };
-      drawElementList(viewContext, data, {
+      if (opts.forceDrawAll === true) {
+        __privateGet(this, _calculator).resetVirtualFlatItemMap(data, {
+          viewScaleInfo: opts.viewScaleInfo,
+          viewSizeInfo: opts.viewSizeInfo
+        });
+      }
+      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);
+      const { sharer } = __privateGet(this, _opts2);
       if (!sharer) {
         return;
       }
-      const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
+      const {
+        data,
+        offsetTop,
+        offsetBottom,
+        offsetLeft,
+        offsetRight,
+        width,
+        height,
+        contextHeight,
+        contextWidth,
+        devicePixelRatio
+      } = sharer.getActiveStoreSnapshot();
       if (data) {
         this.drawData(data, {
           viewScaleInfo: {
@@ -1493,19 +2668,40 @@ var __privateMethod = (obj, member, method) => {
     getLoadItemMap() {
       return __privateGet(this, _loader).getLoadItemMap();
     }
+    getLoader() {
+      return __privateGet(this, _loader);
+    }
+    getCalculator() {
+      return __privateGet(this, _calculator);
+    }
   }
-  _opts = new WeakMap();
+  _opts2 = new WeakMap();
   _loader = new WeakMap();
-  _init = new WeakSet();
+  _calculator = new WeakMap();
+  _hasDestroyed2 = new WeakMap();
+  _Renderer_instances = 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.Calculator = Calculator;
   exports.Renderer = Renderer;
+  exports.drawCircle = drawCircle;
+  exports.drawElement = drawElement;
+  exports.drawElementList = drawElementList;
+  exports.drawGlobalBackground = drawGlobalBackground;
+  exports.drawGroup = drawGroup;
+  exports.drawHTML = drawHTML;
+  exports.drawImage = drawImage;
+  exports.drawLayout = drawLayout;
+  exports.drawRect = drawRect;
+  exports.drawSVG = drawSVG;
+  exports.drawText = drawText;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});