@idraw/renderer 0.4.2 → 1.0.0-alpha.1

package/dist/index.global.js

@@ -1,14 +1,5 @@
-var iDrawRenderer = function(exports) {
-  "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, _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;
+var iDrawRenderer = (function(exports) {
+  "use strict";
   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));
   }
@@ -33,11 +24,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return result;
   }
+  function createStr(num) {
+    return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  }
   function createUUID() {
-    function _createStr() {
-      return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
-    }
-    return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
+    return `${createStr()}${createStr()}-${createStr()}-${createStr()}-${createStr()}-${createStr()}${createStr()}${createStr()}`;
   }
   function limitHexStr(str, seed) {
     let count = 0;
@@ -53,9 +44,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return sum;
   }
-  function createAssetId(assetStr, elemUUID) {
+  function createAssetId(assetStr, mtrlUUID) {
     const len = assetStr.length;
-    const seed = sumCharCodes(elemUUID);
+    const seed = sumCharCodes(mtrlUUID);
     const mid = Math.floor(len / 2);
     const start4 = assetStr.substring(0, 4).padStart(4, "0");
     const end4 = assetStr.substring(0, 4).padStart(4, "0");
@@ -69,20 +60,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const str8 = limitHexStr(end4.padStart(4, start4).padStart(4, end4), seed);
     return `@assets/${str1}${str2}-${str3}-${str4}-${str5}-${str6}${str7}${str8}`;
   }
-  function isAssetId(id) {
-    return /^@assets\/[0-9a-z-]{0,}$/.test(`${id}`);
+  function isAssetId(id2) {
+    return /^@assets\/[0-9a-z-]{0,}$/.test(`${id2}`);
   }
-  (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 type2 = is$1(t);
@@ -112,58 +92,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function is$1(target) {
     return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
   }
-  function parsePrototype(data2) {
-    const typeStr = Object.prototype.toString.call(data2) || "";
-    const result = typeStr.replace(/(\[object|\])/gi, "").trim();
-    return result;
-  }
-  const istype = {
-    type(data2, lowerCase) {
-      const result = parsePrototype(data2);
-      return lowerCase === true ? result.toLocaleLowerCase() : result;
-    },
-    array(data2) {
-      return parsePrototype(data2) === "Array";
-    },
-    json(data2) {
-      return parsePrototype(data2) === "Object";
-    },
-    function(data2) {
-      return parsePrototype(data2) === "Function";
-    },
-    asyncFunction(data2) {
-      return parsePrototype(data2) === "AsyncFunction";
-    },
-    boolean(data2) {
-      return parsePrototype(data2) === "Boolean";
-    },
-    string(data2) {
-      return parsePrototype(data2) === "String";
-    },
-    number(data2) {
-      return parsePrototype(data2) === "Number";
-    },
-    undefined(data2) {
-      return parsePrototype(data2) === "Undefined";
-    },
-    null(data2) {
-      return parsePrototype(data2) === "Null";
-    },
-    promise(data2) {
-      return parsePrototype(data2) === "Promise";
-    }
-  };
-  function parseHTMLToDataURL(html2, opts) {
-    const { width, height } = opts;
+  function parseXMLToDataURL(xml, opts) {
+    const { width: width2, height: height2 } = opts;
     return new Promise((resolve, reject) => {
       const _svg = `
     <svg 
       xmlns="http://www.w3.org/2000/svg" 
-      width="${width || ""}" 
-      height = "${height || ""}">
+      width="${width2 || ""}" 
+      height = "${height2 || ""}">
       <foreignObject width="100%" height="100%">
         <div xmlns = "http://www.w3.org/1999/xhtml">
-          ${html2}
+          ${xml}
         </div>
       </foreignObject>
     </svg>
@@ -172,8 +111,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = function(event) {
-        var _a;
-        const base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
+        const base64 = event?.target?.result;
         resolve(base64);
       };
       reader.onerror = function(err) {
@@ -181,15 +119,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
     });
   }
-  function parseSVGToDataURL(svg2) {
+  function parseSVGCodeToDataURL(svg2) {
     return new Promise((resolve, reject) => {
       const _svg = svg2;
       const blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
       const reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = function(event) {
-        var _a;
-        const base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
+        const base64 = event?.target?.result;
         resolve(base64);
       };
       reader.onerror = function(err) {
@@ -197,33 +134,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
     });
   }
-  var __awaiter = function(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-      return value instanceof P ? value : new P(function(resolve) {
-        resolve(value);
-      });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-      function fulfilled(value) {
-        try {
-          step(generator.next(value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function rejected(value) {
-        try {
-          step(generator["throw"](value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function step(result) {
-        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
   const { Image } = window;
   function loadImage(src) {
     return new Promise((resolve, reject) => {
@@ -237,23 +147,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       img.src = src;
     });
   }
-  function loadSVG(svg2) {
-    return __awaiter(this, void 0, void 0, function* () {
-      const dataURL = yield parseSVGToDataURL(svg2);
-      const image = yield loadImage(dataURL);
-      return image;
-    });
+  async function loadSVGCode(code) {
+    const dataURL = await parseSVGCodeToDataURL(code);
+    const image = await loadImage(dataURL);
+    return image;
   }
   function filterAmpersand(str) {
-    return str.replace(/\&/gi, "&amp;");
-  }
-  function loadHTML(html2, opts) {
-    return __awaiter(this, void 0, void 0, function* () {
-      html2 = filterAmpersand(html2);
-      const dataURL = yield parseHTMLToDataURL(html2, opts);
-      const image = yield loadImage(dataURL);
-      return image;
-    });
+    return str.replace(/&/gi, "&amp;");
+  }
+  async function loadForeignObject(content, opts) {
+    content = filterAmpersand(content);
+    const dataURL = await parseXMLToDataURL(content, opts);
+    const image = await loadImage(dataURL);
+    return image;
   }
   function positiveNum(value) {
     return typeof value === "number" && value >= 0;
@@ -267,19 +173,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function y(value) {
     return number(value);
   }
-  function w(value) {
+  function width(value) {
     return positiveNum(value);
   }
-  function h(value) {
+  function height(value) {
     return positiveNum(value);
   }
   function angle(value) {
     return typeof value === "number" && value >= -360 && value <= 360;
   }
-  function borderWidth(value) {
+  function strokeWidth(value) {
     return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
-  function borderRadius(value) {
+  function cornerRadius(value) {
     return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function color(value) {
@@ -318,9 +224,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function lineHeight(value) {
     return number(value) && value > 0;
   }
-  function strokeWidth(value) {
-    return number(value) && value > 0;
-  }
   function textAlign(value) {
     return ["center", "left", "right"].includes(value);
   }
@@ -334,22 +237,22 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
   }
   function type(value) {
-    return ["rect", "circle", "text", "image", "svg", "html", "group"].includes(value);
+    return ["rect", "circle", "text", "image", "svgCode", "foreignObject", "group"].includes(value);
   }
-  function element(elem) {
-    if (!elem) {
+  function material(mtrl) {
+    if (!mtrl) {
       return false;
     }
-    return type(elem === null || elem === void 0 ? void 0 : elem.type) && x(elem === null || elem === void 0 ? void 0 : elem.x) && y(elem === null || elem === void 0 ? void 0 : elem.y) && w(elem === null || elem === void 0 ? void 0 : elem.w) && h(elem === null || elem === void 0 ? void 0 : elem.h);
+    return type(mtrl?.type) && x(mtrl?.x) && y(mtrl?.y) && width(mtrl?.w) && height(mtrl?.h);
   }
   function layout(value) {
     if (!value) {
       return false;
     }
-    return x(value === null || value === void 0 ? void 0 : value.x) && y(value === null || value === void 0 ? void 0 : value.y) && w(value === null || value === void 0 ? void 0 : value.w) && h(value === null || value === void 0 ? void 0 : value.h);
+    return x(value?.x) && y(value?.y) && width(value?.w) && height(value?.h);
   }
   function data(d) {
-    if (Array(d === null || d === void 0 ? void 0 : d.elements) && (d === null || d === void 0 ? void 0 : d.elements.length) >= 0) {
+    if (Array(d?.materials) && d?.materials.length >= 0) {
       return true;
     }
     return false;
@@ -357,18 +260,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const is = {
     positiveNum,
     data,
-    element,
+    material,
     layout,
     type,
     x,
     y,
-    w,
-    h,
+    width,
+    height,
     angle,
     number,
     numberStr,
-    borderWidth,
-    borderRadius,
+    strokeWidth,
+    cornerRadius,
     color,
     imageSrc,
     imageURL,
@@ -380,62 +283,38 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     lineHeight,
     textAlign,
     fontFamily,
-    fontWeight,
-    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");
-    return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
-  });
-  (function(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-  });
-  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);
+    fontWeight
   };
-  var _EventEmitter_listeners;
   class EventEmitter {
+    #listeners;
     constructor() {
-      _EventEmitter_listeners.set(this, void 0);
-      __classPrivateFieldSet$1(this, _EventEmitter_listeners, /* @__PURE__ */ new Map(), "f");
+      this.#listeners = /* @__PURE__ */ new Map();
     }
     on(eventKey, callback) {
-      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);
-        __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").set(eventKey, callbacks);
+      if (this.#listeners.has(eventKey)) {
+        const callbacks = this.#listeners.get(eventKey) || [];
+        callbacks?.push(callback);
+        this.#listeners.set(eventKey, callbacks);
       } else {
-        __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").set(eventKey, [callback]);
+        this.#listeners.set(eventKey, [callback]);
       }
     }
     off(eventKey, callback) {
-      if (__classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").has(eventKey)) {
-        const callbacks = __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").get(eventKey);
+      if (this.#listeners.has(eventKey)) {
+        const callbacks = this.#listeners.get(eventKey);
         if (Array.isArray(callbacks)) {
-          for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+          for (let i = 0; i < callbacks?.length; i++) {
             if (callbacks[i] === callback) {
               callbacks.splice(i, 1);
               break;
             }
           }
         }
-        __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").set(eventKey, callbacks || []);
+        this.#listeners.set(eventKey, callbacks || []);
       }
     }
     trigger(eventKey, e) {
-      const callbacks = __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").get(eventKey);
+      const callbacks = this.#listeners.get(eventKey);
       if (Array.isArray(callbacks)) {
         callbacks.forEach((cb) => {
           cb(e);
@@ -446,8 +325,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     }
     has(name) {
-      if (__classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").has(name)) {
-        const list = __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").get(name);
+      if (this.#listeners.has(name)) {
+        const list = this.#listeners.get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
@@ -458,10 +337,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.clear();
     }
     clear() {
-      __classPrivateFieldGet$1(this, _EventEmitter_listeners, "f").clear();
+      this.#listeners.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);
@@ -472,57 +350,44 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       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 {
+    #temp;
+    #backUpDefaultStorage;
+    #static;
     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");
+      this.#backUpDefaultStorage = deepClone(opts.defaultStorage);
+      this.#temp = this.#createTempStorage();
+      this.#static = opts.defaultStatic || {};
     }
     set(name, value) {
-      __classPrivateFieldGet(this, _Store_temp, "f")[name] = value;
+      this.#temp[name] = value;
     }
     get(name) {
-      return __classPrivateFieldGet(this, _Store_temp, "f")[name];
+      return this.#temp[name];
     }
     setStatic(name, value) {
-      __classPrivateFieldGet(this, _Store_static, "f")[name] = value;
+      this.#static[name] = value;
     }
     getStatic(name) {
-      return __classPrivateFieldGet(this, _Store_static, "f")[name];
+      return this.#static[name];
     }
     getSnapshot(opts) {
-      if ((opts === null || opts === void 0 ? void 0 : opts.deepClone) === true) {
-        return deepClone(__classPrivateFieldGet(this, _Store_temp, "f"));
+      if (opts?.deepClone === true) {
+        return deepClone(this.#temp);
       }
-      return Object.assign({}, __classPrivateFieldGet(this, _Store_temp, "f"));
+      return { ...this.#temp };
     }
     clear() {
-      __classPrivateFieldSet(this, _Store_temp, __classPrivateFieldGet(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
+      this.#temp = this.#createTempStorage();
     }
     destroy() {
-      __classPrivateFieldSet(this, _Store_temp, null, "f");
-      __classPrivateFieldSet(this, _Store_static, null, "f");
+      this.#temp = null;
+      this.#static = null;
+    }
+    #createTempStorage() {
+      return deepClone(this.#backUpDefaultStorage);
     }
   }
-  _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;
   }
@@ -540,31 +405,25 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.translate(-center.x, -center.y);
     }
   }
-  function rotateElement(ctx, elemSize, callback) {
-    const center = calcElementCenter(elemSize);
-    rotateByCenter(ctx, elemSize.angle || 0, center, () => {
-      callback(ctx);
-    });
-  }
-  function calcElementCenter(elem) {
+  function calcMaterialCenter(mtrl) {
     const p = {
-      x: elem.x + elem.w / 2,
-      y: elem.y + elem.h / 2
+      x: mtrl.x + mtrl.width / 2,
+      y: mtrl.y + mtrl.height / 2
     };
     return p;
   }
-  function calcElementCenterFromVertexes(ves) {
+  function calcMaterialCenterFromVertexes(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 = {
+    const mtrlSize = {
       x: startX,
       y: startY,
-      w: endX - startX,
-      h: endY - startY
+      width: endX - startX,
+      height: endY - startY
     };
-    return calcElementCenter(elemSize);
+    return calcMaterialCenter(mtrlSize);
   }
   function calcLineRadian(center, p) {
     const x2 = p.x - center.x;
@@ -640,12 +499,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     y2 += center.y;
     return { x: x2, y: y2 };
   }
-  function getElementRotateVertexes(elemSize, center, angle2) {
-    const { x: x2, y: y2, w: w2, h: h2 } = elemSize;
+  function getMaterialRotateVertexes(mtrlSize, center, angle2) {
+    const { x: x2, y: y2, width: width2, height: height2 } = mtrlSize;
     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 };
+    let p2 = { x: x2 + width2, y: y2 };
+    let p3 = { x: x2 + width2, y: y2 + height2 };
+    let p4 = { x: x2, y: y2 + height2 };
     if (angle2 && (angle2 > 0 || angle2 < 0)) {
       const radian = parseAngleToRadian(limitAngle(angle2));
       p1 = rotatePoint(center, p1, radian);
@@ -655,10 +514,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return [p1, p2, p3, p4];
   }
-  function rotateElementVertexes(elemSize) {
-    const { angle: angle2 = 0 } = elemSize;
-    const center = calcElementCenter(elemSize);
-    return getElementRotateVertexes(elemSize, center, angle2);
+  function rotateMaterialVertexes(mtrlSize) {
+    const { angle: angle2 = 0 } = mtrlSize;
+    const center = calcMaterialCenter(mtrlSize);
+    return getMaterialRotateVertexes(mtrlSize, center, angle2);
   }
   function rotateVertexes(center, ves, radian) {
     return [
@@ -680,17 +539,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return num;
   }
-  function getGroupQueueByElementPosition(elements, position) {
-    var _a;
+  function getGroupQueueByMaterialPosition(materials, position) {
     const groupQueue = [];
-    let currentElements = elements;
+    let currentMaterials = materials;
     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)) {
+        const group = currentMaterials[index];
+        if (group?.type === "group" && Array.isArray(group?.children)) {
           groupQueue.push(group);
-          currentElements = group.detail.children;
+          currentMaterials = group.children;
         } else {
           return null;
         }
@@ -698,14 +556,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return groupQueue;
   }
-  function findElementFromListByPosition(position, list) {
+  function findMaterialFromListByPosition(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;
+      if (i < position.length - 1 && item?.type === "group") {
+        tempList = item.children;
       } else if (i === position.length - 1) {
         result = item;
       } else {
@@ -714,49 +572,49 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return result;
   }
-  function getElementVertexes(elemSize) {
-    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
+  function getMaterialVertexes(mtrlSize) {
+    const { x: x2, y: y2, height: height2, width: width2 } = mtrlSize;
     return [
       { x: x2, y: y2 },
-      { x: x2 + w2, y: y2 },
-      { x: x2 + w2, y: y2 + h2 },
-      { x: x2, y: y2 + h2 }
+      { x: x2 + width2, y: y2 },
+      { x: x2 + width2, y: y2 + height2 },
+      { x: x2, y: y2 + height2 }
     ];
   }
-  function calcElementVertexes(elemSize) {
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+  function calcMaterialVertexes(mtrlSize) {
+    const { x: x2, y: y2, width: width2, height: height2, angle: angle2 = 0 } = mtrlSize;
     if (angle2 === 0) {
-      return getElementVertexes(elemSize);
+      return getMaterialVertexes(mtrlSize);
     }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2 }), angle2);
+    return getMaterialRotateVertexes(mtrlSize, calcMaterialCenter({ x: x2, y: y2, width: width2, height: height2 }), angle2);
   }
-  function calcElementQueueVertexesQueueInGroup(groupQueue) {
+  function calcMaterialQueueVertexesQueueInGroup(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];
+    const mtrlQueue = [...groupQueue];
+    for (let i = 0; i < mtrlQueue.length; i++) {
+      const { x: x2, y: y2, width: width2, height: height2, angle: angle2 = 0 } = mtrlQueue[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 });
+        const mtrlSize = { x: totalX, y: totalY, width: width2, height: height2 };
+        ves = calcMaterialVertexes({ x: x2, y: y2, width: width2, height: height2, angle: angle2 });
         rotateActionList.push({
-          center: calcElementCenter(elemSize),
+          center: calcMaterialCenter(mtrlSize),
           angle: angle2,
           radian: parseAngleToRadian(angle2)
         });
       } else {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
-        ves = getElementVertexes(elemSize);
+        const mtrlSize = { x: totalX, y: totalY, width: width2, height: height2 };
+        ves = getMaterialVertexes(mtrlSize);
         for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
           const { center, radian } = rotateActionList[aIdx];
           ves = rotateVertexes(center, ves, radian);
         }
-        const vesCenter = calcElementCenterFromVertexes(ves);
+        const vesCenter = calcMaterialCenterFromVertexes(ves);
         if (angle2 > 0 || angle2 < 0) {
           const radian = parseAngleToRadian(angle2);
           ves = rotateVertexes(vesCenter, ves, radian);
@@ -771,34 +629,35 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return vesList;
   }
-  function calcElementVertexesQueueInGroup(targetElem, opts) {
+  function calcMaterialVertexesQueueInGroup(targetMtrl, opts) {
     const { groupQueue } = opts;
     if (!(groupQueue.length > 0)) {
-      return [calcElementVertexes(targetElem)];
+      return [calcMaterialVertexes(targetMtrl)];
     }
-    const elemQueue = [...groupQueue, ...[targetElem]];
-    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    const mtrlQueue = [...groupQueue, ...[targetMtrl]];
+    const vesList = calcMaterialQueueVertexesQueueInGroup(mtrlQueue);
     return vesList;
   }
-  function calcElementVertexesInGroup(targetElem, opts) {
-    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+  function calcMaterialVertexesInGroup(targetMtrl, opts) {
+    const vesList = calcMaterialVertexesQueueInGroup(targetMtrl, opts);
     const ves = vesList.pop();
     return ves || null;
   }
-  function calcViewElementSize(size, opts) {
+  function calcViewMaterialSize(size, opts) {
     const { viewScaleInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = size;
-    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { id: id2, x: x2, y: y2, width: width2, height: height2, angle: angle2 } = size;
+    const { scale = 1, offsetTop = 0, offsetLeft = 0 } = viewScaleInfo;
     const newSize = {
+      id: id2,
       x: x2 * scale + offsetLeft,
       y: y2 * scale + offsetTop,
-      w: w2 * scale,
-      h: h2 * scale,
+      width: width2 * scale,
+      height: height2 * scale,
       angle: angle2
     };
     return newSize;
   }
-  function calcViewPointSize(size, opts) {
+  function calcViewPoint(size, opts) {
     const { viewScaleInfo } = opts;
     const { x: x2, y: y2 } = size;
     const { scale, offsetTop, offsetLeft } = viewScaleInfo;
@@ -808,11 +667,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     };
     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 });
+  function isViewPointInMaterial(p, opts) {
+    const { context2d: ctx, material: mtrl, viewScaleInfo } = opts;
+    const { angle: angle2 = 0 } = mtrl;
+    const { x: x2, y: y2, width: width2, height: height2 } = calcViewMaterialSize(mtrl, { viewScaleInfo });
+    const vertexes = rotateMaterialVertexes({ x: x2, y: y2, width: width2, height: height2, angle: angle2 });
     if (vertexes.length >= 2) {
       ctx.beginPath();
       ctx.moveTo(vertexes[0].x, vertexes[0].y);
@@ -826,15 +685,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return false;
   }
-  function getViewPointAtElement(p, opts) {
-    var _a, _b, _c;
+  function getViewPointAtMaterial(p, opts) {
     const { context2d: ctx, data: data2, viewScaleInfo, groupQueue } = opts;
     const result = {
       index: -1,
-      element: null,
+      material: null,
       groupQueueIndex: -1
     };
-    if (groupQueue && Array.isArray(groupQueue) && (groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+    if (groupQueue && Array.isArray(groupQueue) && groupQueue?.length > 0) {
       for (let gIdx = groupQueue.length - 1; gIdx >= 0; gIdx--) {
         let totalX = 0;
         let totalY = 0;
@@ -845,22 +703,22 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           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) {
+        if (lastGroup && lastGroup.type === "group" && Array.isArray(lastGroup?.children)) {
+          for (let i = 0; i < lastGroup.children.length; i++) {
+            const child = lastGroup.children[i];
+            if (child?.operations?.invisible === true) {
               continue;
             }
             if (child) {
-              const elemSize = {
+              const mtrlSize = {
                 x: totalX + child.x,
                 y: totalY + child.y,
-                w: child.w,
-                h: child.h,
+                width: child.width,
+                height: child.height,
                 angle: totalAngle + (child.angle || 0)
               };
-              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo })) {
-                result.element = child;
+              if (isViewPointInMaterial(p, { context2d: ctx, material: mtrlSize, viewScaleInfo })) {
+                result.material = child;
                 if (gIdx < groupQueue.length - 1 || child.type !== "group") {
                   result.groupQueueIndex = gIdx;
                 }
@@ -871,30 +729,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             }
           }
         }
-        if (result.element) {
+        if (result.material) {
           break;
         }
       }
     }
-    if (result.element) {
+    if (result.material) {
       return result;
     }
-    for (let i = data2.elements.length - 1; i >= 0; i--) {
-      const elem = data2.elements[i];
-      if (((_c = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _c === void 0 ? void 0 : _c.invisible) === true) {
+    for (let i = data2.materials.length - 1; i >= 0; i--) {
+      const mtrl = data2.materials[i];
+      if (mtrl?.operations?.invisible === true) {
         continue;
       }
-      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo })) {
+      if (isViewPointInMaterial(p, { context2d: ctx, material: mtrl, viewScaleInfo })) {
         result.index = i;
-        result.element = elem;
+        result.material = mtrl;
         break;
       }
     }
     return result;
   }
-  function calcElementOriginRectInfo(elemSize, opts) {
+  function calcMaterialBoundingInfo(mtrlSize, opts) {
     const { groupQueue } = opts;
-    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const vertexes = calcMaterialVertexesInGroup(mtrlSize, { groupQueue });
     const top = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
     const right = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
     const bottom = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
@@ -911,7 +769,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       x: (maxX + minX) / 2,
       y: (maxY + minY) / 2
     };
-    const rectInfo = {
+    const boundingBox = {
       center,
       topLeft,
       topRight,
@@ -922,14 +780,34 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       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 };
+    return boundingBox;
+  }
+  function boundingInfoToRangeBoundingInfo(boundingInfo) {
+    const rangeMaxX = Math.max(
+      boundingInfo.topLeft.x,
+      boundingInfo.topRight.x,
+      boundingInfo.bottomRight.x,
+      boundingInfo.bottomLeft.x
+    );
+    const rangeMaxY = Math.max(
+      boundingInfo.topLeft.y,
+      boundingInfo.topRight.y,
+      boundingInfo.bottomRight.y,
+      boundingInfo.bottomLeft.y
+    );
+    const rangeMinX = Math.min(
+      boundingInfo.topLeft.x,
+      boundingInfo.topRight.x,
+      boundingInfo.bottomRight.x,
+      boundingInfo.bottomLeft.x
+    );
+    const rangeMinY = Math.min(
+      boundingInfo.topLeft.y,
+      boundingInfo.topRight.y,
+      boundingInfo.bottomRight.y,
+      boundingInfo.bottomLeft.y
+    );
+    const rangeCenter = { x: boundingInfo.center.x, y: boundingInfo.center.y };
     const rangeTopLeft = { x: rangeMinX, y: rangeMinY };
     const rangeTopRight = { x: rangeMaxX, y: rangeMinY };
     const rangeBottomRight = { x: rangeMaxX, y: rangeMaxY };
@@ -938,7 +816,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
     const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
     const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
-    const rangeRectInfo = {
+    const rangeBoundingInfo = {
       center: rangeCenter,
       topLeft: rangeTopLeft,
       topRight: rangeTopRight,
@@ -949,114 +827,445 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       left: rangeLeft,
       bottom: rangeBottom
     };
-    return rangeRectInfo;
+    return rangeBoundingInfo;
   }
-  function generateSVGPath(commands) {
+  function convertPathCommandsToStr(commands) {
     let path = "";
     commands.forEach((item) => {
-      path += item.type + item.params.join(" ");
+      path += item.type + item.params?.join?.(" ");
     });
     return path;
   }
-  function getDefaultElementDetailConfig() {
+  const defaultText = "Text";
+  const defaultFill = "#787878";
+  const defaultStroke = "#525252";
+  const defaultImageSlotSVG = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="${defaultFill}"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64z m513.9 437.1c-1.4 1.2-3.3 1.9-5.2 1.9H177.2c-4.4 0-8-3.6-8-8 0-1.9 0.7-3.7 1.9-5.2l170.3-202c2.8-3.4 7.9-3.8 11.3-1 0.3 0.3 0.7 0.6 1 1l99.4 118 158.1-187.5c2.8-3.4 7.9-3.8 11.3-1 0.3 0.3 0.7 0.6 1 1l229.6 271.6c2.6 3.3 2.2 8.4-1.2 11.2z" ></path></svg>`;
+  const defaultImageHref = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(defaultImageSlotSVG)}`;
+  function getDefaultMaterialAttributes() {
     const config = {
-      boxSizing: "border-box",
-      borderWidth: 0,
-      borderColor: "#000000",
-      shadowColor: "#000000",
-      borderRadius: 0,
-      borderDash: [],
-      shadowOffsetX: 0,
-      shadowOffsetY: 0,
-      shadowBlur: 0,
+      // Transform and display attributes
       opacity: 1,
-      color: "#000000",
+      display: "inline",
+      visibility: "visible",
+      overflow: "visible",
+      // Fill attributes
+      fill: defaultFill,
+      fillOpacity: 1,
+      fillRule: "nonzero",
+      // Stroke attributes
+      stroke: defaultStroke,
+      strokeWidth: 0,
+      strokeOpacity: 1,
+      strokeLinecap: "butt",
+      strokeLinejoin: "miter",
+      strokeDasharray: [],
+      strokeDashoffset: 0,
+      strokeMiterlimit: 0,
+      // Text attributes
+      text: defaultText,
+      fontSize: 12,
+      // TODO
+      fontFamily: "system-ui",
+      fontWeight: "normal",
+      fontStyle: "normal",
+      textAnchor: "start",
+      textDecoration: "none",
+      letterSpacing: "normal",
+      wordSpacing: "normal",
+      writingMode: "horizontal-tb",
       textAlign: "left",
       verticalAlign: "top",
-      fontSize: 16,
-      fontFamily: "sans-serif",
-      fontWeight: 400,
-      minInlineSize: "auto",
-      wordBreak: "break-all",
-      overflow: "hidden"
+      // Image attributes
+      href: defaultImageHref
     };
     return config;
   }
-  const defaultElemConfig$1 = getDefaultElementDetailConfig();
-  function calcViewBoxSize(viewElem, opts) {
-    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 (Array.isArray(borderWidth2)) {
-      borderRadius2 = 0;
-    }
-    let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
-    let radiusList = [0, 0, 0, 0];
-    if (typeof borderRadius2 === "number") {
-      const br = borderRadius2 * scale;
-      radiusList = [br, br, br, br];
-    } else if (Array.isArray(borderRadius2) && (borderRadius2 === null || borderRadius2 === void 0 ? void 0 : borderRadius2.length) === 4) {
-      radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
-    }
-    let bw = 0;
-    if (typeof borderWidth2 === "number") {
-      bw = (borderWidth2 || 0) * scale;
-    }
-    if (boxSizing === "border-box" && !hasBorderDash) {
-      x2 = viewElem.x + bw / 2;
-      y2 = viewElem.y + bw / 2;
-      w2 = viewElem.w - bw;
-      h2 = viewElem.h - bw;
-    } else if (boxSizing === "content-box") {
-      x2 = viewElem.x - bw / 2;
-      y2 = viewElem.y - bw / 2;
-      w2 = viewElem.w + bw;
-      h2 = viewElem.h + bw;
-    } else {
-      x2 = viewElem.x;
-      y2 = viewElem.y;
-      w2 = viewElem.w;
-      h2 = viewElem.h;
-    }
-    w2 = Math.max(w2, 1);
-    h2 = Math.max(h2, 1);
-    radiusList = radiusList.map((r) => {
-      return Math.min(r, w2 / 2, h2 / 2);
-    });
-    return {
-      x: x2,
-      y: y2,
-      w: w2,
-      h: h2,
-      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) {
+  const id = () => Math.random().toString(36).substring(2);
+  function createId() {
+    return `${id()}${id()}`.substring(0, 16);
+  }
+  function shiftPathCommand(command, x2, y2) {
+    const { type: type2 } = command;
+    const params = [...command.params];
+    const id2 = command.id;
+    let anchorInfo = { id: id2 };
+    if (command.start && command.end) {
+      const start = { ...command.start };
+      const end = { ...command.end };
+      start.x += x2;
+      start.y += y2;
+      end.x += x2;
+      end.y += y2;
+      anchorInfo = { id: id2, start, end };
+    }
+    switch (type2) {
+      // MoveTo: Apply offset to both coordinates
+      case "M": {
+        params[0] += x2;
+        params[1] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      // LineTo: Apply offset to both coordinates
+      case "L": {
+        params[0] += x2;
+        params[1] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      // Horizontal Line: Only apply x offset
+      case "H": {
+        params[0] += x2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      // Vertical Line: Only apply y offset
+      case "V": {
+        params[0] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      // Cubic Bezier: Offset all control points and endpoint
+      case "C": {
+        params[0] += x2;
+        params[1] += y2;
+        params[2] += x2;
+        params[3] += y2;
+        params[4] += x2;
+        params[5] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      case "S": {
+        params[0] += x2;
+        params[1] += y2;
+        params[2] += x2;
+        params[3] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      // Quadratic Bezier: Offset both control point and endpoint
+      case "Q": {
+        params[0] += x2;
+        params[1] += y2;
+        params[2] += x2;
+        params[3] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      case "T": {
+        params[0] += x2;
+        params[1] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      // Arc: Only offset endpoint (radius/rotation remain unchanged)
+      case "A": {
+        params[5] += x2;
+        params[6] += y2;
+        return { type: type2, params, ...anchorInfo };
+      }
+      // ClosePath: No coordinates to modify
+      case "Z": {
+        return { type: type2, params, ...anchorInfo };
+      }
+      // Default: Return original command if unsupported
+      default: {
+        return { type: type2, params, ...anchorInfo };
+      }
+    }
+  }
+  function shiftPathCommands(commands, x2, y2) {
+    const cmds = [];
+    commands.forEach((command) => {
+      const cmd = shiftPathCommand(command, x2, y2);
+      cmds.push(cmd);
+    });
+    return cmds;
+  }
+  function scalePathCommands(path, scaleX, scaleY) {
+    return path.map((cmd) => {
+      const { id: id2, type: type2, params } = cmd;
+      const newParams = [];
+      let anchorInfo = { id: id2 };
+      if (cmd.start && cmd.end) {
+        const start = { ...cmd.start };
+        const end = { ...cmd.end };
+        start.x *= scaleX;
+        start.y *= scaleY;
+        end.x *= scaleX;
+        end.y *= scaleY;
+        anchorInfo = { id: id2, start, end };
+      }
+      switch (type2.toUpperCase()) {
+        // MoveTo, LineTo, and Smooth Quadratic Bezier Curve
+        case "M":
+        case "L":
+        case "T":
+          for (let i = 0; i < params.length; i += 2) {
+            newParams.push(params[i] * scaleX, params[i + 1] * scaleY);
+          }
+          break;
+        // Cubic Bezier Curve
+        case "C":
+          for (let i = 0; i < params.length; i += 6) {
+            newParams.push(
+              params[i] * scaleX,
+              params[i + 1] * scaleY,
+              params[i + 2] * scaleX,
+              params[i + 3] * scaleY,
+              params[i + 4] * scaleX,
+              params[i + 5] * scaleY
+            );
+          }
+          break;
+        // Smooth Cubic Bezier Curve
+        case "S":
+          for (let i = 0; i < params.length; i += 4) {
+            newParams.push(params[i] * scaleX, params[i + 1] * scaleY, params[i + 2] * scaleX, params[i + 3] * scaleY);
+          }
+          break;
+        // Quadratic Bezier Curve
+        case "Q":
+          for (let i = 0; i < params.length; i += 4) {
+            newParams.push(params[i] * scaleX, params[i + 1] * scaleY, params[i + 2] * scaleX, params[i + 3] * scaleY);
+          }
+          break;
+        // Horizontal Line
+        case "H":
+          params.forEach((val) => newParams.push(val * scaleX));
+          break;
+        // Vertical Line
+        case "V":
+          params.forEach((val) => newParams.push(val * scaleY));
+          break;
+        // Elliptical Arc
+        case "A":
+          for (let i = 0; i < params.length; i += 7) {
+            newParams.push(
+              params[i] * scaleX,
+              // rx
+              params[i + 1] * scaleY,
+              // ry
+              params[i + 2],
+              // x-axis-rotation
+              params[i + 3],
+              // large-arc-flag
+              params[i + 4],
+              // sweep-flag
+              params[i + 5] * scaleX,
+              // x
+              params[i + 6] * scaleY
+              // y
+            );
+          }
+          break;
+        // Relative coordinate commands
+        case "M":
+        case "L":
+        case "C":
+        case "S":
+        case "Q":
+        case "T":
+        case "A":
+        case "H":
+        case "V":
+          for (let i = 0; i < params.length; i++) {
+            const isXParam = type2 === "a" && (i % 7 === 0 || i % 7 === 5) || // rx and x in arcs
+            type2 === "h" || // horizontal moves
+            type2 !== "v" && i % 2 === 0;
+            newParams.push(params[i] * (isXParam ? scaleX : scaleY));
+          }
+          break;
+        // ClosePath command and unknown commands
+        default:
+          return { type: type2, params: [...params], ...anchorInfo };
+      }
+      return { type: type2, params: newParams, ...anchorInfo };
+    });
+  }
+  function convertPathCommandsToACLMZ(commands) {
+    const output = [];
+    let currentPoint = { x: 0, y: 0 };
+    let startPoint = { x: 0, y: 0 };
+    let prevControlPoint = null;
+    for (const command of commands) {
+      const type2 = command.type;
+      const params = command.params;
+      const isRelative = type2 === type2.toLowerCase();
+      const absCommand = type2.toUpperCase();
+      const id2 = command.id;
+      switch (absCommand) {
+        case "M": {
+          const [x2, y2] = params;
+          const point = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y + y2 } : { x: x2, y: y2 };
+          output.push({ id: id2, type: "M", params: [point.x, point.y], start: { x: x2, y: y2 }, end: { x: x2, y: y2 } });
+          currentPoint = point;
+          startPoint = point;
+          prevControlPoint = null;
+          break;
+        }
+        case "L": {
+          const [x2, y2] = params;
+          const point = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y + y2 } : { x: x2, y: y2 };
+          output.push({
+            id: id2,
+            type: "L",
+            params: [point.x, point.y],
+            start: { ...currentPoint },
+            end: { ...point }
+          });
+          currentPoint = point;
+          prevControlPoint = null;
+          break;
+        }
+        case "H": {
+          const [x2] = params;
+          const point = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y } : { x: x2, y: currentPoint.y };
+          output.push({
+            id: id2,
+            type: "L",
+            params: [point.x, point.y],
+            start: { ...currentPoint },
+            end: { ...point }
+          });
+          currentPoint = point;
+          prevControlPoint = null;
+          break;
+        }
+        case "V": {
+          const [y2] = params;
+          const point = isRelative ? { x: currentPoint.x, y: currentPoint.y + y2 } : { x: currentPoint.x, y: y2 };
+          output.push({
+            id: id2,
+            type: "L",
+            params: [point.x, point.y],
+            start: { ...currentPoint },
+            end: { ...point }
+          });
+          currentPoint = point;
+          prevControlPoint = null;
+          break;
+        }
+        case "C": {
+          const [x1, y1, x2, y2, x3, y3] = params;
+          const c1 = isRelative ? { x: currentPoint.x + x1, y: currentPoint.y + y1 } : { x: x1, y: y1 };
+          const c2 = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y + y2 } : { x: x2, y: y2 };
+          const point = isRelative ? { x: currentPoint.x + x3, y: currentPoint.y + y3 } : { x: x3, y: y3 };
+          output.push({
+            id: id2,
+            type: "C",
+            params: [c1.x, c1.y, c2.x, c2.y, point.x, point.y],
+            start: { ...currentPoint },
+            end: { ...point }
+          });
+          currentPoint = point;
+          prevControlPoint = c2;
+          break;
+        }
+        case "S": {
+          const [x2, y2, x3, y3] = params;
+          const c1 = prevControlPoint ? {
+            x: 2 * currentPoint.x - prevControlPoint.x,
+            y: 2 * currentPoint.y - prevControlPoint.y
+          } : currentPoint;
+          const c2 = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y + y2 } : { x: x2, y: y2 };
+          const point = isRelative ? { x: currentPoint.x + x3, y: currentPoint.y + y3 } : { x: x3, y: y3 };
+          output.push({
+            id: id2,
+            type: "C",
+            params: [c1.x, c1.y, c2.x, c2.y, point.x, point.y],
+            start: { ...currentPoint },
+            end: { ...point }
+          });
+          currentPoint = point;
+          prevControlPoint = c2;
+          break;
+        }
+        case "Q": {
+          const [x1, y1, x2, y2] = params;
+          const cp1 = isRelative ? { x: currentPoint.x + x1, y: currentPoint.y + y1 } : { x: x1, y: y1 };
+          const endPoint = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y + y2 } : { x: x2, y: y2 };
+          output.push({
+            id: id2,
+            type: "C",
+            params: [
+              currentPoint.x + 2 / 3 * (cp1.x - currentPoint.x),
+              currentPoint.y + 2 / 3 * (cp1.y - currentPoint.y),
+              endPoint.x + 2 / 3 * (cp1.x - endPoint.x),
+              endPoint.y + 2 / 3 * (cp1.y - endPoint.y),
+              endPoint.x,
+              endPoint.y
+            ],
+            start: { ...currentPoint },
+            end: { ...endPoint }
+          });
+          currentPoint = endPoint;
+          prevControlPoint = cp1;
+          break;
+        }
+        case "T": {
+          const [x2, y2] = params;
+          const endPoint = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y + y2 } : { x: x2, y: y2 };
+          const cp1 = prevControlPoint ? {
+            x: 2 * currentPoint.x - prevControlPoint.x,
+            y: 2 * currentPoint.y - prevControlPoint.y
+          } : currentPoint;
+          output.push({
+            id: id2,
+            type: "C",
+            params: [
+              currentPoint.x + 2 / 3 * (cp1.x - currentPoint.x),
+              currentPoint.y + 2 / 3 * (cp1.y - currentPoint.y),
+              endPoint.x + 2 / 3 * (cp1.x - endPoint.x),
+              endPoint.y + 2 / 3 * (cp1.y - endPoint.y),
+              endPoint.x,
+              endPoint.y
+            ],
+            start: { ...currentPoint },
+            end: { ...endPoint }
+          });
+          currentPoint = endPoint;
+          prevControlPoint = cp1;
+          break;
+        }
+        case "A": {
+          const [rx, ry, rotation, largeArc, sweep, x2, y2] = params;
+          const point = isRelative ? { x: currentPoint.x + x2, y: currentPoint.y + y2 } : { x: x2, y: y2 };
+          output.push({
+            id: id2,
+            type: "A",
+            params: [rx, ry, rotation, largeArc, sweep, point.x, point.y],
+            start: { ...currentPoint },
+            end: { ...point }
+          });
+          currentPoint = point;
+          prevControlPoint = null;
+          break;
+        }
+        case "Z": {
+          output.push({ id: id2, type: "Z", params: [], start: { ...currentPoint }, end: { ...startPoint } });
+          currentPoint = startPoint;
+          prevControlPoint = null;
+          break;
+        }
+        default:
+          throw new Error(`Unsupported command: ${type2}`);
+      }
+    }
+    return output;
+  }
+  function omit(obj, keys) {
+    const result = { ...obj };
+    for (const key of keys) {
+      delete result[key];
+    }
+    return result;
+  }
+  function createColor(ctx, color2, opts) {
     if (typeof color2 === "string") {
       return color2;
     }
-    const { viewElementSize, viewScaleInfo, opacity = 1 } = opts;
-    const { x: x2, y: y2 } = viewElementSize;
+    const { viewMaterialSize, viewScaleInfo, opacity = 1 } = opts;
+    const { x: x2, y: y2 } = viewMaterialSize;
     const { scale } = viewScaleInfo;
-    if ((color2 == null ? void 0 : color2.type) === "linear-gradient") {
+    if (color2?.type === "linear-gradient") {
       const { start, end, stops } = color2;
       const viewStart = {
         x: x2 + start.x * scale,
@@ -1068,11 +1277,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
       const linearGradient = ctx.createLinearGradient(viewStart.x, viewStart.y, viewEnd.x, viewEnd.y);
       stops.forEach((stop) => {
-        linearGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
+        if (stop.offset >= 0 && stop.color) {
+          linearGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
+        }
       });
       return linearGradient;
     }
-    if ((color2 == null ? void 0 : color2.type) === "radial-gradient") {
+    if (color2?.type === "radial-gradient") {
       const { inner, outer, stops } = color2;
       const viewInner = {
         x: x2 + inner.x * scale,
@@ -1084,7 +1295,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         y: y2 + outer.y * scale,
         radius: outer.radius * scale
       };
-      const radialGradient = ctx.createRadialGradient(viewInner.x, viewInner.y, viewInner.radius, viewOuter.x, viewOuter.y, viewOuter.radius);
+      const radialGradient = ctx.createRadialGradient(
+        viewInner.x,
+        viewInner.y,
+        viewInner.radius,
+        viewOuter.x,
+        viewOuter.y,
+        viewOuter.radius
+      );
       stops.forEach((stop) => {
         radialGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
       });
@@ -1092,715 +1310,413 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return "#000000";
   }
-  const defaultElemConfig = getDefaultElementDetailConfig();
-  function getOpacity(elem) {
-    var _a, _b, _c, _d;
-    let opacity = 1;
-    if (((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = elem == null ? void 0 : elem.detail) == null ? void 0 : _b.opacity) >= 0 && ((_c = elem == null ? void 0 : elem.detail) == null ? void 0 : _c.opacity) <= 1) {
-      opacity = (_d = elem == null ? void 0 : elem.detail) == null ? void 0 : _d.opacity;
-    }
-    return opacity;
-  }
-  function drawBox(ctx, viewElem, opts) {
-    const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
-    const { parentOpacity } = opts;
-    const opacity = getOpacity(originElem) * parentOpacity;
-    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();
+  let defaultAttrs$1 = getDefaultMaterialAttributes();
+  defaultAttrs$1 = omit(defaultAttrs$1, ["fill"]);
+  function drawBase(ctx, mtrl, opts) {
+    const { viewScaleInfo, viewSizeInfo, calculator } = opts;
+    const {
+      opacity,
+      fill,
+      fillOpacity,
+      fillRule,
+      stroke,
+      strokeWidth: strokeWidth2,
+      strokeOpacity,
+      strokeLinecap,
+      strokeLinejoin,
+      strokeDasharray,
+      strokeDashoffset,
+      strokeMiterlimit
+    } = { ...defaultAttrs$1, ...mtrl };
+    const { scale, offsetLeft, offsetTop } = viewScaleInfo;
+    const { devicePixelRatio } = viewSizeInfo;
+    const virtualAttributes = calculator.getVirtualItem(mtrl.id);
+    const { commands, worldCenter } = virtualAttributes;
+    const { width: width2, height: height2 } = mtrl;
+    let cmds = commands;
+    cmds = scalePathCommands(cmds, scale, scale);
+    cmds = shiftPathCommands(
+      cmds,
+      (offsetLeft + (worldCenter.x - width2 / 2) * scale) * devicePixelRatio,
+      (offsetTop + (worldCenter.y - height2 / 2) * scale) * devicePixelRatio
+    );
+    const originGlobalAlpha = ctx.globalAlpha;
+    const pathStr = convertPathCommandsToStr(cmds);
+    const path2d = new Path2D(pathStr);
+    drawShadow(ctx, mtrl, { ...opts, path2d });
+    drawClipPath(ctx, mtrl, {
+      path2d,
+      viewScaleInfo,
+      viewSizeInfo,
+      calculator,
+      renderContent: () => {
+        if (fill) {
+          const viewMaterialSize = calcViewMaterialSize(mtrl, { viewScaleInfo });
+          if (typeof fillOpacity === "number" && fillOpacity > 0) {
+            ctx.globalAlpha = originGlobalAlpha * fillOpacity * opacity;
+          }
+          ctx.fillStyle = createColor(ctx, fill, { viewMaterialSize, viewScaleInfo, opacity: mtrl.opacity || 1 });
+          ctx.fill(path2d, fillRule);
+          ctx.globalAlpha = originGlobalAlpha;
         }
-      });
-      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, 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;
-      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.translate(internalX, internalY);
-      ctx.scale(totalScale * scaleW, totalScale * scaleH);
-      const pathStr = generateSVGPath(clipPath.commands || []);
-      const path2d = new Path2D(pathStr);
-      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 }, () => {
-        renderContent == null ? void 0 : renderContent();
-      });
-      ctx.restore();
-    } else {
-      renderContent == null ? void 0 : renderContent();
-    }
-  }
-  function drawBoxBackground(ctx, viewElem, opts) {
-    var _a, _b;
-    const { pattern, viewScaleInfo, viewSizeInfo } = opts;
-    const transform = [];
-    if (viewElem.detail.background || pattern) {
-      const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
-        viewScaleInfo
-      });
-      ctx.beginPath();
-      ctx.moveTo(x2 + radiusList[0], y2);
-      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, radiusList[1]);
-      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, radiusList[2]);
-      ctx.arcTo(x2, y2 + h2, x2, y2, radiusList[3]);
-      ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
-      ctx.closePath();
-      if (typeof pattern === "string") {
-        ctx.fillStyle = pattern;
-      } else if (["CanvasPattern"].includes(istype.type(pattern))) {
-        ctx.fillStyle = pattern;
-      } else if (typeof viewElem.detail.background === "string") {
-        ctx.fillStyle = viewElem.detail.background;
-      } else if (((_a = viewElem.detail.background) == null ? void 0 : _a.type) === "linear-gradient") {
-        const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
-          viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
-          viewScaleInfo,
-          opacity: ctx.globalAlpha
-        });
-        ctx.fillStyle = colorStyle;
-      } else if (((_b = viewElem.detail.background) == null ? void 0 : _b.type) === "radial-gradient") {
-        const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
-          viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
-          viewScaleInfo,
-          opacity: ctx.globalAlpha
-        });
-        ctx.fillStyle = colorStyle;
-        if (transform && transform.length > 0) {
-          for (let i = 0; i < (transform == null ? void 0 : transform.length); i++) {
-            const action = transform[i];
-            if (action.method === "translate") {
-              ctx.translate(action.args[0] + x2, action.args[1] + y2);
-            } else if (action.method === "rotate") {
-              ctx.rotate(...action.args);
-            } else if (action.method === "scale") {
-              ctx.scale(...action.args);
-            }
+        if (typeof strokeWidth2 === "number" && strokeWidth2 > 0) {
+          if (typeof strokeOpacity === "number" && strokeOpacity > 0) {
+            ctx.globalAlpha = originGlobalAlpha * strokeOpacity * opacity;
+          }
+          ctx.lineCap = strokeLinecap;
+          ctx.lineJoin = strokeLinejoin;
+          ctx.lineDashOffset = strokeDashoffset;
+          ctx.miterLimit = strokeMiterlimit;
+          if (Array.isArray(strokeDasharray)) {
+            const lineDash = strokeDasharray.map((dash) => scale * dash);
+            ctx.setLineDash(lineDash);
           }
+          ctx.lineWidth = strokeWidth2 * scale;
+          ctx.strokeStyle = stroke;
+          ctx.stroke(path2d);
+          ctx.setLineDash([]);
+          ctx.lineCap = defaultAttrs$1.strokeLinecap;
+          ctx.lineJoin = defaultAttrs$1.strokeLinejoin;
+          ctx.lineDashOffset = defaultAttrs$1.strokeDashoffset;
+          ctx.miterLimit = defaultAttrs$1.strokeMiterlimit;
+          ctx.globalAlpha = originGlobalAlpha;
         }
       }
-      ctx.fill("nonzero");
-      if (transform && transform.length > 0) {
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
-      }
-    }
-  }
-  function drawBoxBorder(ctx, viewElem, opts) {
-    if (viewElem.detail.borderWidth === 0) {
-      return;
-    }
-    if (!isColorStr(viewElem.detail.borderColor)) {
-      return;
-    }
-    const { viewScaleInfo } = opts;
-    const { scale } = viewScaleInfo;
-    let borderColor = defaultElemConfig.borderColor;
-    if (isColorStr(viewElem.detail.borderColor) === true) {
-      borderColor = viewElem.detail.borderColor;
-    }
-    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";
-    }
-    let radiusList = [0, 0, 0, 0];
-    if (typeof borderRadius2 === "number") {
-      const br = borderRadius2 * scale;
-      radiusList = [br, br, br, br];
-    } 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];
-    }
-    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;
-    let borderLeft = 0;
-    if (Array.isArray(borderWidth2)) {
-      borderTop = (borderWidth2[0] || 0) * scale;
-      borderRight = (borderWidth2[1] || 0) * scale;
-      borderBottom = (borderWidth2[2] || 0) * scale;
-      borderLeft = (borderWidth2[3] || 0) * scale;
-    }
-    if (borderLeft || borderRight || borderTop || borderBottom) {
-      ctx.lineCap = "butt";
-      let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
-      if (boxSizing === "border-box") {
-        x2 = x2 + borderLeft / 2;
-        y2 = y2 + borderTop / 2;
-        w2 = w2 - borderLeft / 2 - borderRight / 2;
-        h2 = h2 - borderTop / 2 - borderBottom / 2;
-      } else if (boxSizing === "content-box") {
-        x2 = x2 - borderLeft / 2;
-        y2 = y2 - borderTop / 2;
-        w2 = w2 + borderLeft / 2 + borderRight / 2;
-        h2 = h2 + borderTop / 2 + borderBottom / 2;
-      } else {
-        x2 = viewElem.x;
-        y2 = viewElem.y;
-        w2 = viewElem.w;
-        h2 = viewElem.h;
-      }
-      if (borderTop) {
-        ctx.beginPath();
-        ctx.lineWidth = borderTop;
-        ctx.moveTo(x2 - borderLeft / 2, y2);
-        ctx.lineTo(x2 + w2 + borderRight / 2, y2);
-        ctx.closePath();
-        ctx.stroke();
-      }
-      if (borderRight) {
-        ctx.beginPath();
-        ctx.lineWidth = borderRight;
-        ctx.moveTo(x2 + w2, y2 - borderTop / 2);
-        ctx.lineTo(x2 + w2, y2 + h2 + borderBottom / 2);
-        ctx.closePath();
-        ctx.stroke();
-      }
-      if (borderBottom) {
-        ctx.beginPath();
-        ctx.lineWidth = borderBottom;
-        ctx.moveTo(x2 - borderLeft / 2, y2 + h2);
-        ctx.lineTo(x2 + w2 + borderRight / 2, y2 + h2);
-        ctx.closePath();
-        ctx.stroke();
-      }
-      if (borderLeft) {
-        ctx.beginPath();
-        ctx.lineWidth = borderLeft;
-        ctx.moveTo(x2, y2 - borderTop / 2);
-        ctx.lineTo(x2, y2 + h2 + borderBottom / 2);
-        ctx.closePath();
-        ctx.stroke();
-      }
-    } else {
-      let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
-      if (boxSizing === "border-box") {
-        x2 = viewElem.x + bw / 2;
-        y2 = viewElem.y + bw / 2;
-        w2 = viewElem.w - bw;
-        h2 = viewElem.h - bw;
-      } else if (boxSizing === "content-box") {
-        x2 = viewElem.x - bw / 2;
-        y2 = viewElem.y - bw / 2;
-        w2 = viewElem.w + bw;
-        h2 = viewElem.h + bw;
-      } else {
-        x2 = viewElem.x;
-        y2 = viewElem.y;
-        w2 = viewElem.w;
-        h2 = viewElem.h;
-      }
-      w2 = Math.max(w2, 1);
-      h2 = Math.max(h2, 1);
-      radiusList = radiusList.map((r) => {
-        return Math.min(r, w2 / 2, h2 / 2);
-      });
-      ctx.setLineDash(viewBorderDash);
-      ctx.lineWidth = bw;
-      ctx.beginPath();
-      ctx.moveTo(x2 + radiusList[0], y2);
-      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, radiusList[1]);
-      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, radiusList[2]);
-      ctx.arcTo(x2, y2 + h2, x2, y2, radiusList[3]);
-      ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
-      ctx.closePath();
-      ctx.stroke();
-    }
-    ctx.setLineDash([]);
+    });
   }
-  function drawBoxShadow(ctx, viewElem, opts) {
-    const { detail } = viewElem;
-    const { viewScaleInfo, renderContent } = opts;
+  function drawShadow(ctx, viewMtrl, opts) {
+    const { ...detail } = viewMtrl;
+    const { viewScaleInfo, viewSizeInfo, tempContext, path2d } = opts;
+    const { width: width2, height: height2 } = viewSizeInfo;
     const { shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
-    if (is.number(shadowBlur)) {
+    if (is.number(shadowBlur) && shadowColor) {
+      tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
+      tempContext.save();
+      tempContext.shadowColor = shadowColor;
+      tempContext.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
+      tempContext.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
+      tempContext.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;
+      tempContext.fillStyle = "#ffffff";
+      tempContext.fill(path2d);
+      tempContext.restore();
+      tempContext.save();
+      tempContext.globalCompositeOperation = "destination-out";
+      tempContext.fillStyle = "#ffffff";
+      tempContext.fill(path2d);
+      tempContext.restore();
+      ctx.drawImage(tempContext.canvas, 0, 0, width2, height2);
+      tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
+    }
+  }
+  function drawClipPath(ctx, mtrl, opts) {
+    const { renderContent, calculator, viewScaleInfo, viewSizeInfo } = opts;
+    if (mtrl.overflow === "hidden") {
+      let path2d = opts.path2d;
+      if (!path2d) {
+        const { scale, offsetLeft, offsetTop } = viewScaleInfo;
+        const { devicePixelRatio } = viewSizeInfo;
+        const virtualAttributes = calculator.getVirtualItem(mtrl.id);
+        const { commands, worldCenter } = virtualAttributes;
+        const { width: width2, height: height2 } = mtrl;
+        let cmds = commands;
+        cmds = scalePathCommands(cmds, scale, scale);
+        cmds = shiftPathCommands(
+          cmds,
+          (offsetLeft + (worldCenter.x - width2 / 2) * scale) * devicePixelRatio,
+          (offsetTop + (worldCenter.y - height2 / 2) * scale) * devicePixelRatio
+        );
+        const pathStr = convertPathCommandsToStr(cmds);
+        path2d = new Path2D(pathStr);
+      }
       ctx.save();
-      ctx.shadowColor = shadowColor || defaultElemConfig.shadowColor;
-      ctx.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
-      ctx.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
-      ctx.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;
-      renderContent();
+      ctx.clip(path2d, "nonzero");
+      renderContent?.();
       ctx.restore();
     } else {
-      ctx.save();
-      ctx.shadowColor = "transparent";
-      ctx.shadowOffsetX = 0;
-      ctx.shadowOffsetY = 0;
-      ctx.shadowBlur = 0;
-      renderContent();
-      ctx.restore();
+      renderContent?.();
+    }
+  }
+  function rotateViewMaterial(ctx, mtrl, opts, callback) {
+    const { viewScaleInfo, calculator } = opts;
+    const virtualAttributes = calculator?.getVirtualItem(mtrl.id);
+    if (virtualAttributes) {
+      const { worldAngle, worldCenter } = virtualAttributes;
+      const viewWorldCenter = calcViewPoint(worldCenter, { viewScaleInfo });
+      const { scale } = viewScaleInfo;
+      rotateByCenter(ctx, worldAngle, viewWorldCenter, () => {
+        const width2 = mtrl.width * scale;
+        const height2 = mtrl.height * scale;
+        const viewWorldSize = {
+          x: viewWorldCenter.x - width2 / 2,
+          y: viewWorldCenter.y - height2 / 2,
+          width: width2,
+          height: height2
+        };
+        callback({ viewWorldCenter, viewWorldSize });
+      });
     }
   }
-  function drawCircle(ctx, elem, opts) {
-    const { detail, angle: angle2 } = 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,
-        renderContent: () => {
-          let a = w2 / 2;
-          let b = h2 / 2;
-          const centerX = x2 + a;
-          const centerY = y2 + b;
-          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 (a >= 0 && b >= 0) {
-            const opacity = getOpacity(viewElem) * parentOpacity;
-            ctx.globalAlpha = opacity;
-            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, radiusA, radiusB, 0, 0, 2 * Math.PI);
-            ctx.closePath();
-            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([]);
-            }
-          }
-        }
-      });
+  function drawRect(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+      drawBase(ctx, mtrl, opts);
     });
   }
-  function drawRect(ctx, elem, opts) {
-    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,
-        renderContent: () => {
-          drawBox(ctx, viewElem, {
-            originElem: elem,
-            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
-            viewScaleInfo,
-            viewSizeInfo,
-            parentOpacity,
-            renderContent: () => {
-            }
-          });
-        }
-      });
+  function drawCircle(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+      drawBase(ctx, mtrl, opts);
     });
   }
-  function drawImage(ctx, elem, opts) {
-    const content = opts.loader.getContent(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,
-        renderContent: () => {
-          drawBox(ctx, viewElem, {
-            originElem: elem,
-            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
-            viewScaleInfo,
-            viewSizeInfo,
-            parentOpacity,
-            renderContent: () => {
-              if (!content && !opts.loader.isDestroyed()) {
-                opts.loader.load(elem, opts.elementAssets || {});
-              }
-              if (elem.type === "image" && content) {
-                ctx.globalAlpha = getOpacity(elem) * parentOpacity;
-                const { x: x22, y: y22, w: w22, h: h22, radiusList } = calcViewBoxSize(viewElem, {
-                  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();
-                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");
-                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();
-              }
-            }
-          });
-        }
-      });
+  function drawEllipse(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+      drawBase(ctx, mtrl, opts);
     });
   }
-  function drawSVG(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem);
+  function getOpacity(mtrl) {
+    let opacity = 1;
+    if (mtrl?.opacity !== void 0 && mtrl?.opacity >= 0 && mtrl?.opacity <= 1) {
+      opacity = mtrl?.opacity;
+    }
+    return opacity;
+  }
+  function drawImage(ctx, mtrl, opts) {
+    const content = opts.loader.getContent(mtrl);
     const { viewScaleInfo, 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 }, () => {
+    const { x: x2, y: y2, width: width2, height: height2, angle: angle2 } = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    const viewMtrl = { ...mtrl, ...{ x: x2, y: y2, width: width2, height: height2, angle: angle2 } };
+    rotateViewMaterial(ctx, mtrl, opts, () => {
       if (!content && !opts.loader.isDestroyed()) {
-        opts.loader.load(elem, opts.elementAssets || {});
+        opts.loader.load(mtrl, opts.materialAssets || {});
       }
-      if (elem.type === "svg" && content) {
-        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
-        ctx.drawImage(content, x2, y2, w2, h2);
+      if (mtrl.type === "image" && content) {
+        ctx.globalAlpha = getOpacity(mtrl) * parentOpacity;
+        const { x: x22, y: y22, width: width22, height: height22 } = viewMtrl;
+        const radiusList = [0, 0, 0, 0];
+        const attributes = mtrl;
+        const { scaleMode, originW = 0, originH = 0 } = attributes;
+        const imageW = ctx.$undoPixelRatio(originW);
+        const imageH = ctx.$undoPixelRatio(originH);
+        ctx.save();
+        ctx.fillStyle = "transparent";
+        ctx.beginPath();
+        ctx.moveTo(x22 + radiusList[0], y22);
+        ctx.arcTo(x22 + width22, y22, x22 + width22, y22 + height22, radiusList[1]);
+        ctx.arcTo(x22 + width22, y22 + height22, x22, y22 + height22, radiusList[2]);
+        ctx.arcTo(x22, y22 + height22, x22, y22, radiusList[3]);
+        ctx.arcTo(x22, y22, x22 + width22, y22, radiusList[0]);
+        ctx.closePath();
+        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 = width22;
+          const dHeight = height22;
+          if (imageW > mtrl.width || imageH > mtrl.height) {
+            if (scaleMode === "fill") {
+              const sourceScale = Math.max(mtrl.width / imageW, mtrl.height / imageH);
+              const newImageWidth = imageW * sourceScale;
+              const newImageHeight = imageH * sourceScale;
+              sx = (newImageWidth - mtrl.width) / 2 / sourceScale;
+              sy = (newImageHeight - mtrl.height) / 2 / sourceScale;
+              sWidth = mtrl.width / sourceScale;
+              sHeight = mtrl.height / sourceScale;
+            } else if (scaleMode === "tile") {
+              sx = 0;
+              sy = 0;
+              sWidth = mtrl.width;
+              sHeight = mtrl.height;
+            } else if (scaleMode === "fit") {
+              const sourceScale = Math.min(mtrl.width / imageW, mtrl.height / imageH);
+              sx = (imageW - mtrl.width / sourceScale) / 2;
+              sy = (imageH - mtrl.height / sourceScale) / 2;
+              sWidth = mtrl.width / sourceScale;
+              sHeight = mtrl.height / sourceScale;
+            }
+          }
+          ctx.drawImage(content, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+        } else {
+          ctx.drawImage(content, x22, y22, width22, height22);
+        }
         ctx.globalAlpha = parentOpacity;
+        ctx.restore();
       }
     });
   }
-  function drawHTML(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem);
-    const { viewScaleInfo, 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 }, () => {
+  function drawSVGCode(ctx, mtrl, opts) {
+    const content = opts.loader.getContent(mtrl);
+    const { viewScaleInfo } = opts;
+    const { x: x2, y: y2, width: width2, height: height2 } = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    rotateViewMaterial(ctx, mtrl, opts, () => {
       if (!content && !opts.loader.isDestroyed()) {
-        opts.loader.load(elem, opts.elementAssets || {});
+        opts.loader.load(mtrl, opts.materialAssets || {});
       }
-      if (elem.type === "html" && content) {
-        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
-        ctx.drawImage(content, x2, y2, w2, h2);
-        ctx.globalAlpha = parentOpacity;
+      if (mtrl.type === "svgCode" && content) {
+        ctx.drawImage(content, x2, y2, width2, height2);
       }
     });
   }
-  const detailConfig$1 = getDefaultElementDetailConfig();
-  function drawText(ctx, elem, opts) {
-    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 }, () => {
-      var _a, _b;
-      drawBoxShadow(ctx, viewElem, {
-        viewScaleInfo,
-        renderContent: () => {
-          drawBox(ctx, viewElem, {
-            originElem: elem,
-            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
-            viewScaleInfo,
-            viewSizeInfo,
-            parentOpacity
-          });
-        }
-      });
+  function drawForeignObject(ctx, mtrl, opts) {
+    const content = opts.loader.getContent(mtrl);
+    const { viewScaleInfo } = opts;
+    const { x: x2, y: y2, width: width2, height: height2 } = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+      if (!content && !opts.loader.isDestroyed()) {
+        opts.loader.load(mtrl, opts.materialAssets || {});
+      }
+      if (mtrl.type === "foreignObject" && content) {
+        ctx.drawImage(content, x2, y2, width2, height2);
+      }
+    });
+  }
+  const defaultAttrs = getDefaultMaterialAttributes();
+  function drawText(ctx, mtrl, opts) {
+    const { viewScaleInfo, viewSizeInfo, calculator } = opts;
+    const viewMaterialSize = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    const { scale } = viewScaleInfo;
+    rotateViewMaterial(ctx, mtrl, opts, ({ viewWorldSize }) => {
       {
-        const detail = {
-          ...detailConfig$1,
-          ...elem.detail
+        const attributes = {
+          ...defaultAttrs,
+          ...mtrl
         };
-        const originFontSize = detail.fontSize || detailConfig$1.fontSize;
+        const { x: x2, y: y2 } = viewWorldSize;
+        const originFontSize = attributes.fontSize || defaultAttrs.fontSize;
         const fontSize2 = originFontSize * viewScaleInfo.scale;
+        const {
+          opacity,
+          fill,
+          fillOpacity,
+          stroke,
+          strokeWidth: strokeWidth2,
+          strokeOpacity,
+          strokeLinecap,
+          strokeLinejoin,
+          strokeDasharray,
+          strokeDashoffset,
+          strokeMiterlimit
+        } = attributes;
         if (fontSize2 < 2) {
           return;
         }
-        const { parentOpacity: parentOpacity2 } = opts;
-        const opacity = getOpacity(elem) * parentOpacity2;
-        ctx.globalAlpha = opacity;
-        ctx.fillStyle = elem.detail.color || detailConfig$1.color;
+        const originGlobalAlpha = ctx.globalAlpha;
+        const virtualTextAttributes = calculator.getVirtualItem(mtrl.id);
         ctx.textBaseline = "top";
         ctx.$setFont({
-          fontWeight: detail.fontWeight,
+          fontWeight: attributes.fontWeight,
           fontSize: fontSize2,
-          fontFamily: enhanceFontFamliy(detail.fontFamily)
+          fontFamily: enhanceFontFamliy(attributes.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;
-            }
-            if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
-              ctx.shadowOffsetX = detail.textShadowOffsetX;
-            }
-            if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
-              ctx.shadowOffsetY = detail.textShadowOffsetY;
+        drawClipPath(ctx, mtrl, {
+          viewScaleInfo,
+          viewSizeInfo,
+          calculator,
+          renderContent: () => {
+            if (fill) {
+              if (typeof fillOpacity === "number" && fillOpacity > 0) {
+                ctx.globalAlpha = originGlobalAlpha * fillOpacity * opacity;
+              }
+              ctx.fillStyle = createColor(ctx, fill, { viewMaterialSize, viewScaleInfo, opacity: mtrl.opacity || 1 });
+              if (Array.isArray(virtualTextAttributes?.textLines) && virtualTextAttributes?.textLines?.length > 0) {
+                virtualTextAttributes?.textLines?.forEach((line) => {
+                  ctx.fillText(line.text, x2 + line.x * viewScaleInfo.scale, y2 + line.y * viewScaleInfo.scale);
+                });
+              }
+              ctx.globalAlpha = originGlobalAlpha;
             }
-            if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
-              ctx.shadowBlur = detail.textShadowBlur;
+            if (typeof strokeWidth2 === "number" && strokeWidth2 > 0) {
+              if (typeof strokeOpacity === "number" && strokeOpacity > 0) {
+                ctx.globalAlpha = originGlobalAlpha * strokeOpacity * opacity;
+              }
+              ctx.lineCap = strokeLinecap;
+              ctx.lineJoin = strokeLinejoin;
+              ctx.lineDashOffset = strokeDashoffset;
+              ctx.miterLimit = strokeMiterlimit;
+              if (Array.isArray(strokeDasharray)) {
+                const lineDash = strokeDasharray.map((dash) => scale * dash);
+                ctx.setLineDash(lineDash);
+              }
+              ctx.lineWidth = strokeWidth2 * scale;
+              ctx.strokeStyle = stroke;
+              virtualTextAttributes?.textLines?.forEach((line) => {
+                ctx.strokeText(line.text, x2 + line.x * viewScaleInfo.scale, y2 + line.y * viewScaleInfo.scale);
+              });
+              ctx.setLineDash([]);
+              ctx.lineCap = defaultAttrs.strokeLinecap;
+              ctx.lineJoin = defaultAttrs.strokeLinejoin;
+              ctx.lineDashOffset = defaultAttrs.strokeDashoffset;
+              ctx.miterLimit = defaultAttrs.strokeMiterlimit;
+              ctx.globalAlpha = originGlobalAlpha;
             }
-            (_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);
-            });
           }
-        }
-        ctx.globalAlpha = parentOpacity2;
+        });
       }
     });
   }
-  function drawPath(ctx, elem, opts) {
-    var _a, _b;
-    const { detail } = 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, boxViewElem, {
-        originElem: boxOriginElem,
-        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
-        viewScaleInfo,
-        viewSizeInfo,
-        parentOpacity,
-        renderContent: () => {
-          drawBoxShadow(ctx, viewElem, {
-            viewScaleInfo,
-            renderContent: () => {
-              ctx.save();
-              ctx.translate(internalX, internalY);
-              ctx.scale(scaleNum * scaleW / viewScaleInfo.scale, scaleNum * scaleH / viewScaleInfo.scale);
-              const pathStr = generateSVGPath(detail.commands || []);
-              const path2d = new Path2D(pathStr);
-              if (detail.fill) {
-                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;
-                ctx.lineWidth = (detail.strokeWidth || 1) / viewSizeInfo.devicePixelRatio;
-                ctx.lineCap = detail.strokeLineCap || "square";
-                ctx.stroke(path2d);
-              }
-              ctx.translate(-internalX, -internalY);
-              ctx.restore();
-            }
-          });
-        }
-      });
+  function drawPath(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+      drawBase(ctx, mtrl, opts);
     });
   }
   const visiableMinSize = 0.4;
-  function drawElement(ctx, elem, opts) {
-    var _a, _b, _c;
-    if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.invisible) === true) {
+  function drawMaterial(ctx, mtrl, opts) {
+    if (mtrl?.operations?.invisible === true) {
       return;
     }
-    const { w: w2, h: h2 } = elem;
+    const { width: width2, height: height2 } = mtrl;
     const { scale } = opts.viewScaleInfo;
-    if (scale < 1 && (w2 * scale < visiableMinSize || h2 * scale < visiableMinSize) || opts.parentOpacity === 0) {
+    if (scale < 1 && (width2 * scale < visiableMinSize || height2 * 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) {
+    const { overrideMaterialMap } = opts;
+    if (overrideMaterialMap?.[mtrl.id]?.operations?.invisible) {
       return;
     }
     try {
-      switch (elem.type) {
+      switch (mtrl.type) {
         case "rect": {
-          drawRect(ctx, elem, opts);
+          drawRect(ctx, mtrl, opts);
           break;
         }
         case "circle": {
-          drawCircle(ctx, elem, opts);
+          drawCircle(ctx, mtrl, opts);
+          break;
+        }
+        case "ellipse": {
+          drawEllipse(ctx, mtrl, opts);
           break;
         }
         case "text": {
-          drawText(ctx, elem, opts);
+          drawText(ctx, mtrl, opts);
           break;
         }
         case "image": {
-          drawImage(ctx, elem, opts);
+          drawImage(ctx, mtrl, opts);
           break;
         }
-        case "svg": {
-          drawSVG(ctx, elem, opts);
+        case "svgCode": {
+          drawSVGCode(ctx, mtrl, opts);
           break;
         }
-        case "html": {
-          drawHTML(ctx, elem, opts);
+        case "foreignObject": {
+          drawForeignObject(ctx, mtrl, opts);
           break;
         }
         case "path": {
-          drawPath(ctx, elem, opts);
+          drawPath(ctx, mtrl, opts);
           break;
         }
         case "group": {
           const assets = {
-            ...opts.elementAssets || {},
-            ...elem.detail.assets || {}
+            ...opts.materialAssets || {},
+            ...mtrl.assets || {}
           };
-          drawGroup(ctx, elem, {
+          drawGroup(ctx, mtrl, {
             ...opts,
-            elementAssets: assets
+            materialAssets: assets
           });
           break;
         }
@@ -1812,102 +1728,64 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       console.error(err);
     }
   }
-  function drawGroup(ctx, elem, opts) {
-    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,
-        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
-              });
-              if (elem.detail.overflow === "hidden") {
-                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");
-              }
-              if (Array.isArray(elem.detail.children)) {
-                const { parentElementSize: parentSize } = opts;
-                const newParentSize = {
-                  x: parentSize.x + elem.x,
-                  y: parentSize.y + elem.y,
-                  w: elem.w || parentSize.w,
-                  h: elem.h || parentSize.h,
-                  angle: elem.angle
-                };
-                const { calculator } = opts;
-                for (let i = 0; i < elem.detail.children.length; i++) {
-                  let child = elem.detail.children[i];
-                  child = {
-                    ...child,
-                    ...{
-                      x: newParentSize.x + child.x,
-                      y: newParentSize.y + child.y
-                    }
-                  };
-                  if (opts.forceDrawAll !== true) {
-                    if (!(calculator == null ? void 0 : calculator.needRender(child))) {
-                      continue;
-                    }
-                  }
-                  try {
-                    drawElement(ctx, child, { ...opts, ...{ parentOpacity: parentOpacity * getOpacity(elem) } });
-                  } catch (err) {
-                    console.error(err);
-                  }
-                }
-              }
-              if (elem.detail.overflow === "hidden") {
-                ctx.restore();
-              }
-            }
-          });
-        }
-      });
-      ctx.globalAlpha = parentOpacity;
+  function drawGroup(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+      drawBase(ctx, mtrl, opts);
     });
+    if (Array.isArray(mtrl.children)) {
+      const { parentMaterialSize: parentSize } = opts;
+      const newParentSize = {
+        x: parentSize.x + mtrl.x,
+        y: parentSize.y + mtrl.y,
+        width: mtrl.width || parentSize.width,
+        height: mtrl.height || parentSize.height,
+        angle: mtrl.angle
+      };
+      const { calculator } = opts;
+      for (let i = 0; i < mtrl.children.length; i++) {
+        let child = mtrl.children[i];
+        child = {
+          ...child,
+          ...{
+            x: newParentSize.x + child.x,
+            y: newParentSize.y + child.y
+          }
+        };
+        if (opts.forceDrawAll !== true) {
+          if (!calculator?.needRender(child)) {
+            continue;
+          }
+        }
+        try {
+          drawMaterial(ctx, child, opts);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    }
   }
-  const defaultDetail = getDefaultElementDetailConfig();
-  function drawElementList(ctx, data2, opts) {
-    var _a;
-    const { elements = [] } = data2;
+  const defaultAttributes = getDefaultMaterialAttributes();
+  function drawMaterialList(ctx, data2, opts) {
+    const { materials = [] } = data2;
     const { parentOpacity } = opts;
-    for (let i = 0; i < elements.length; i++) {
-      const element2 = elements[i];
-      const elem = {
-        ...element2,
+    for (let i = 0; i < materials.length; i++) {
+      const material2 = materials[i];
+      const mtrl = {
+        ...material2,
         ...{
-          detail: {
-            ...defaultDetail,
-            ...element2 == null ? void 0 : element2.detail
+          attributes: {
+            ...defaultAttributes,
+            ...material2
           }
         }
       };
       if (opts.forceDrawAll !== true) {
-        if (!((_a = opts.calculator) == null ? void 0 : _a.needRender(elem))) {
+        if (!opts.calculator?.needRender(mtrl)) {
           continue;
         }
       }
       try {
-        drawElement(ctx, elem, {
+        drawMaterial(ctx, mtrl, {
           ...opts,
           ...{
             parentOpacity
@@ -1919,385 +1797,666 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
   }
   function drawLayout(ctx, layout2, opts, renderContent) {
-    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const elem = { uuid: "layout", type: "group", ...layout2 };
-    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 } };
+    const { parentOpacity } = opts;
     ctx.globalAlpha = 1;
-    drawBoxShadow(ctx, viewElem, {
-      viewScaleInfo,
-      renderContent: () => {
-        drawBoxBackground(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-      }
-    });
-    if (layout2.detail.overflow === "hidden") {
-      const { viewScaleInfo: viewScaleInfo2, viewSizeInfo: viewSizeInfo2 } = opts;
-      const elem2 = { uuid: "layout", type: "group", ...layout2 };
-      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");
+    const { viewScaleInfo } = opts;
+    const mtrl = {
+      id: "layout",
+      type: "group",
+      ...layout2
+    };
+    const viewMtrlSize = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    const viewMtrl = { ...mtrl, ...viewMtrlSize };
+    const { x: x2, y: y2, width: width2, height: height2, fill } = viewMtrl;
+    const radiusList = [0, 0, 0, 0];
+    ctx.save();
+    ctx.fillStyle = createColor(ctx, fill, { viewMaterialSize: viewMtrlSize, viewScaleInfo, opacity: mtrl.opacity || 1 });
+    ctx.beginPath();
+    ctx.moveTo(x2 + radiusList[0], y2);
+    ctx.arcTo(x2 + width2, y2, x2 + width2, y2 + height2, radiusList[1]);
+    ctx.arcTo(x2 + width2, y2 + height2, x2, y2 + height2, radiusList[2]);
+    ctx.arcTo(x2, y2 + height2, x2, y2, radiusList[3]);
+    ctx.arcTo(x2, y2, x2 + width2, y2, radiusList[0]);
+    ctx.closePath();
+    ctx.fill("nonzero");
+    if (layout2.overflow === "hidden") {
       ctx.clip("nonzero");
     }
     renderContent(ctx);
-    if (layout2.detail.overflow === "hidden") {
+    if (layout2.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") {
+    if (typeof global?.fill === "string") {
       const { viewSizeInfo } = opts;
-      const { width, height } = viewSizeInfo;
+      const { width: width2, height: height2 } = viewSizeInfo;
       ctx.globalAlpha = 1;
-      ctx.fillStyle = global.background;
-      ctx.fillRect(0, 0, width, height);
+      ctx.fillStyle = global.fill;
+      ctx.fillRect(0, 0, width2, height2);
     }
   }
-  const supportElementTypes = ["image", "svg", "html"];
-  const getAssetIdFromElement = (element2) => {
-    var _a, _b, _c;
+  const supportMaterialTypes = ["image", "svgCode", "foreignObject"];
+  const getAssetIdFromMaterial = (material2) => {
     let source = null;
-    if (element2.type === "image") {
-      source = ((_a = element2 == null ? void 0 : element2.detail) == null ? void 0 : _a.src) || null;
-    } else if (element2.type === "svg") {
-      source = ((_b = element2 == null ? void 0 : element2.detail) == null ? void 0 : _b.svg) || null;
-    } else if (element2.type === "html") {
-      source = ((_c = element2 == null ? void 0 : element2.detail) == null ? void 0 : _c.html) || null;
+    if (material2.type === "image") {
+      source = material2?.href || null;
+    } else if (material2.type === "svgCode") {
+      source = material2?.code || null;
+    } else if (material2.type === "foreignObject") {
+      source = material2?.content || null;
     }
     if (typeof source === "string" && source) {
       if (isAssetId(source)) {
         return source;
       }
-      return createAssetId(source, element2.uuid);
+      return createAssetId(source, material2.id);
     }
-    return createAssetId(`${createUUID()}-${element2.uuid}-${createUUID()}-${createUUID()}`, element2.uuid);
+    return createAssetId(`${createUUID()}-${material2.id}-${createUUID()}-${createUUID()}`, material2.id);
   };
   class Loader extends EventEmitter {
+    #loadFuncMap = {};
+    #currentLoadItemMap = {};
+    #storageLoadItemMap = {};
+    #hasDestroyed = false;
     constructor() {
       super();
-      __privateAdd(this, _Loader_instances);
-      __privateAdd(this, _loadFuncMap, {});
-      __privateAdd(this, _currentLoadItemMap, {});
-      __privateAdd(this, _storageLoadItemMap, {});
-      __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);
+      this.#registerLoadFunc("image", async (mtrl, assets) => {
+        const href = assets[mtrl.href]?.value || mtrl.href;
+        const content = await loadImage(href);
         return {
-          uuid: elem.uuid,
+          id: mtrl.id,
           lastModified: Date.now(),
           content
         };
       });
-      __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.originW || elem.w,
-          height: elem.detail.originH || elem.h
-        });
-        return {
-          uuid: elem.uuid,
-          lastModified: Date.now(),
-          content
-        };
-      });
-      __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);
+      this.#registerLoadFunc(
+        "foreignObject",
+        async (mtrl, assets) => {
+          const html2 = assets[mtrl.content]?.value || mtrl.content;
+          const content = await loadForeignObject(html2, {
+            width: mtrl.originW || mtrl.width,
+            height: mtrl.originH || mtrl.height
+          });
+          return {
+            id: mtrl.id,
+            lastModified: Date.now(),
+            content
+          };
+        }
+      );
+      this.#registerLoadFunc("svgCode", async (mtrl, assets) => {
+        const svg2 = assets[mtrl.code]?.value || mtrl.code;
+        const content = await loadSVGCode(svg2);
         return {
-          uuid: elem.uuid,
+          id: mtrl.id,
           lastModified: Date.now(),
           content
         };
       });
     }
     isDestroyed() {
-      return __privateGet(this, _hasDestroyed);
+      return this.#hasDestroyed;
     }
     reset() {
-      if (__privateGet(this, _hasDestroyed) === true) {
+      if (this.#hasDestroyed === true) {
         return;
       }
-      __privateSet(this, _currentLoadItemMap, {});
-      __privateSet(this, _storageLoadItemMap, {});
+      this.#currentLoadItemMap = {};
+      this.#storageLoadItemMap = {};
     }
-    resetElementAsset(element2) {
-      var _a, _b, _c;
-      if (supportElementTypes.includes(element2.type)) {
+    resetMaterialAsset(material2) {
+      if (supportMaterialTypes.includes(material2.type)) {
         let assetId = null;
         let resource = null;
-        if (element2.type === "image" && typeof ((_a = element2 == null ? void 0 : element2.detail) == null ? void 0 : _a.src) === "string") {
-          resource = element2.detail.src;
-        } else if (element2.type === "svg" && typeof ((_b = element2 == null ? void 0 : element2.detail) == null ? void 0 : _b.svg) === "string") {
-          resource = element2.detail.svg;
-        } else if (element2.type === "html" && typeof ((_c = element2 == null ? void 0 : element2.detail) == null ? void 0 : _c.html) === "string") {
-          resource = element2.detail.html;
+        if (material2.type === "image" && typeof material2?.href === "string") {
+          resource = material2.href;
+        } else if (material2.type === "svgCode" && typeof material2?.code === "string") {
+          resource = material2.code;
+        } else if (material2.type === "foreignObject" && typeof material2?.content === "string") {
+          resource = material2.content;
         }
         if (typeof resource === "string") {
-          this.load(element2, {});
+          this.load(material2, {});
           if (isAssetId(resource)) {
             assetId = resource;
-          } else if (element2.uuid) {
-            assetId = createAssetId(resource, element2.uuid);
+          } else if (material2.id) {
+            assetId = createAssetId(resource, material2.id);
           }
         }
         if (assetId && isAssetId(assetId)) {
-          delete __privateGet(this, _storageLoadItemMap)[assetId];
-          delete __privateGet(this, _currentLoadItemMap)[assetId];
+          delete this.#storageLoadItemMap[assetId];
+          delete this.#currentLoadItemMap[assetId];
         }
       }
     }
     destroy() {
-      __privateSet(this, _hasDestroyed, true);
+      this.#hasDestroyed = true;
       this.clear();
-      __privateSet(this, _loadFuncMap, null);
-      __privateSet(this, _currentLoadItemMap, null);
-      __privateSet(this, _storageLoadItemMap, null);
+      this.#loadFuncMap = null;
+      this.#currentLoadItemMap = null;
+      this.#storageLoadItemMap = null;
+    }
+    #registerLoadFunc(type2, func) {
+      this.#loadFuncMap[type2] = func;
+    }
+    #getLoadMaterialSource(material2) {
+      let source = null;
+      if (material2.type === "image") {
+        source = material2?.href || null;
+      } else if (material2.type === "svgCode") {
+        source = material2?.code || null;
+      } else if (material2.type === "foreignObject") {
+        source = material2?.content || null;
+      }
+      return source;
+    }
+    #createLoadItem(material2) {
+      return {
+        material: material2,
+        status: "null",
+        content: null,
+        error: null,
+        startTime: -1,
+        endTime: -1,
+        source: this.#getLoadMaterialSource(material2)
+      };
+    }
+    #emitLoad(item) {
+      const assetId = getAssetIdFromMaterial(item.material);
+      const storageItem = this.#storageLoadItemMap[assetId];
+      if (!this.#hasDestroyed) {
+        if (storageItem) {
+          if (storageItem.startTime < item.startTime) {
+            this.#storageLoadItemMap[assetId] = item;
+            this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
+          }
+        } else {
+          this.#storageLoadItemMap[assetId] = item;
+          this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
+        }
+      }
+    }
+    #emitError(item) {
+      const assetId = getAssetIdFromMaterial(item.material);
+      const storageItem = this.#storageLoadItemMap?.[assetId];
+      if (!this.#hasDestroyed) {
+        if (storageItem) {
+          if (storageItem.startTime < item.startTime) {
+            this.#storageLoadItemMap[assetId] = item;
+            this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
+          }
+        } else {
+          this.#storageLoadItemMap[assetId] = item;
+          this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
+        }
+      }
+    }
+    #loadResource(material2, assets) {
+      const item = this.#createLoadItem(material2);
+      const assetId = getAssetIdFromMaterial(material2);
+      if (this.#currentLoadItemMap[assetId]) {
+        return;
+      }
+      this.#currentLoadItemMap[assetId] = item;
+      const loadFunc = this.#loadFuncMap[material2.type];
+      if (typeof loadFunc === "function" && !this.#hasDestroyed) {
+        item.startTime = Date.now();
+        loadFunc(material2, assets).then((result) => {
+          if (!this.#hasDestroyed) {
+            item.content = result.content;
+            item.endTime = Date.now();
+            item.status = "load";
+            this.#emitLoad(item);
+          }
+        }).catch((err) => {
+          console.warn(`Load material source "${item.source}" fail`, err, material2);
+          item.endTime = Date.now();
+          item.status = "error";
+          item.error = err;
+          this.#emitError(item);
+        });
+      }
     }
-    load(element2, assets) {
-      if (__privateGet(this, _hasDestroyed) === true) {
+    #isExistingErrorStorage(material2) {
+      const assetId = getAssetIdFromMaterial(material2);
+      const existItem = this.#currentLoadItemMap?.[assetId];
+      if (existItem && existItem.status === "error" && existItem.source && existItem.source === this.#getLoadMaterialSource(material2)) {
+        return true;
+      }
+      return false;
+    }
+    load(material2, assets) {
+      if (this.#hasDestroyed === true) {
         return;
       }
-      if (__privateMethod(this, _Loader_instances, isExistingErrorStorage_fn).call(this, element2)) {
+      if (this.#isExistingErrorStorage(material2)) {
         return;
       }
-      if (supportElementTypes.includes(element2.type)) {
-        __privateMethod(this, _Loader_instances, loadResource_fn).call(this, element2, assets);
+      if (supportMaterialTypes.includes(material2.type)) {
+        this.#loadResource(material2, assets);
       }
     }
-    getContent(element2) {
-      var _a, _b;
-      const assetId = getAssetIdFromElement(element2);
-      return ((_b = (_a = __privateGet(this, _storageLoadItemMap)) == null ? void 0 : _a[assetId]) == null ? void 0 : _b.content) || null;
+    getContent(material2) {
+      const assetId = getAssetIdFromMaterial(material2);
+      return this.#storageLoadItemMap?.[assetId]?.content || null;
     }
     getLoadItemMap() {
-      return __privateGet(this, _storageLoadItemMap);
+      return this.#storageLoadItemMap;
     }
     setLoadItemMap(itemMap) {
-      __privateSet(this, _storageLoadItemMap, itemMap);
+      this.#storageLoadItemMap = itemMap;
     }
   }
-  _loadFuncMap = new WeakMap();
-  _currentLoadItemMap = new WeakMap();
-  _storageLoadItemMap = new WeakMap();
-  _hasDestroyed = new WeakMap();
-  _Loader_instances = new WeakSet();
-  registerLoadFunc_fn = function(type2, func) {
-    __privateGet(this, _loadFuncMap)[type2] = func;
-  };
-  getLoadElementSource_fn = function(element2) {
-    var _a, _b, _c;
-    let source = null;
-    if (element2.type === "image") {
-      source = ((_a = element2 == null ? void 0 : element2.detail) == null ? void 0 : _a.src) || null;
-    } else if (element2.type === "svg") {
-      source = ((_b = element2 == null ? void 0 : element2.detail) == null ? void 0 : _b.svg) || null;
-    } else if (element2.type === "html") {
-      source = ((_c = element2 == null ? void 0 : element2.detail) == null ? void 0 : _c.html) || null;
-    }
-    return source;
-  };
-  createLoadItem_fn = function(element2) {
-    return {
-      element: element2,
-      status: "null",
-      content: null,
-      error: null,
-      startTime: -1,
-      endTime: -1,
-      source: __privateMethod(this, _Loader_instances, getLoadElementSource_fn).call(this, element2)
-    };
-  };
-  emitLoad_fn = function(item) {
-    const assetId = getAssetIdFromElement(item.element);
-    const storageItem = __privateGet(this, _storageLoadItemMap)[assetId];
-    if (!__privateGet(this, _hasDestroyed)) {
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          __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 });
-      }
+  function calculateWorldPosition(targetRect, parents) {
+    parents = [...parents].reverse();
+    if (!parents || parents.length === 0) {
+      return {
+        x: targetRect.x + targetRect.width / 2,
+        y: targetRect.y + targetRect.height / 2
+      };
     }
-  };
-  emitError_fn = function(item) {
-    var _a;
-    const assetId = getAssetIdFromElement(item.element);
-    const storageItem = (_a = __privateGet(this, _storageLoadItemMap)) == null ? void 0 : _a[assetId];
-    if (!__privateGet(this, _hasDestroyed)) {
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          __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 });
-      }
+    let centerX = targetRect.x + targetRect.width / 2;
+    let centerY = targetRect.y + targetRect.height / 2;
+    for (let i = 0; i < parents.length; i++) {
+      const parent = parents[i];
+      const transformed = applyRectTransformation({ x: centerX, y: centerY }, parent);
+      centerX = transformed.x;
+      centerY = transformed.y;
+    }
+    return { x: centerX, y: centerY };
+  }
+  function applyRectTransformation(point, rect) {
+    const rectCenterX = rect.width / 2;
+    const rectCenterY = rect.height / 2;
+    const centeredX = point.x - rectCenterX;
+    const centeredY = point.y - rectCenterY;
+    let rotatedX = centeredX;
+    let rotatedY = centeredY;
+    if (typeof rect.angle === "number" && rect.angle !== 0) {
+      const angleRad = rect.angle * Math.PI / 180;
+      const cos = Math.cos(angleRad);
+      const sin = Math.sin(angleRad);
+      rotatedX = centeredX * cos - centeredY * sin;
+      rotatedY = centeredX * sin + centeredY * cos;
+    }
+    const localX = rotatedX + rectCenterX;
+    const localY = rotatedY + rectCenterY;
+    const worldX = localX + rect.x;
+    const worldY = localY + rect.y;
+    return { x: worldX, y: worldY };
+  }
+  function calcVirtualBaseAttributes(mtrl, opts) {
+    const { groupQueue = [] } = opts;
+    let worldAngle = mtrl.angle || 0;
+    groupQueue.forEach((group) => {
+      worldAngle += group.angle || 0;
+    });
+    const worldCenter = calculateWorldPosition(mtrl, groupQueue);
+    const attributes = {
+      worldCenter,
+      worldAngle: limitAngle(worldAngle)
+    };
+    return attributes;
+  }
+  function calcVirtualRectAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    let {
+      // x,
+      // y,
+      width: width2,
+      height: height2,
+      rx = 0,
+      ry = 0
+    } = mtrl;
+    const { cornerRadius: cornerRadius2 } = mtrl;
+    const x2 = 0;
+    const y2 = 0;
+    height2 = height2 * dpr;
+    width2 = width2 * dpr;
+    const commands = [];
+    let tlRX = 0;
+    let trRX = 0;
+    let brRX = 0;
+    let blRX = 0;
+    let tlRY = 0;
+    let trRY = 0;
+    let brRY = 0;
+    let blRY = 0;
+    if (typeof rx === "number" && typeof ry === "number") {
+      rx = rx * dpr;
+      ry = ry * dpr;
+      tlRX = rx;
+      trRX = rx;
+      brRX = rx;
+      blRX = rx;
+      tlRY = ry;
+      trRY = ry;
+      brRY = ry;
+      blRY = ry;
+    } else if (Array.isArray(cornerRadius2) && cornerRadius2.length === 4) {
+      const crs = cornerRadius2.map((r) => r * dpr);
+      tlRX = crs[0] || 0;
+      trRX = crs[1] || 0;
+      brRX = crs[2] || 0;
+      blRX = crs[3] || 0;
+      tlRY = crs[0] || 0;
+      trRY = crs[1] || 0;
+      brRY = crs[2] || 0;
+      blRY = crs[3] || 0;
+    } else if (typeof cornerRadius2 === "number") {
+      const cr = cornerRadius2 * dpr;
+      tlRX = cr;
+      trRX = cr;
+      brRX = cr;
+      blRX = cr;
+      tlRY = cr;
+      trRY = cr;
+      brRY = cr;
+      blRY = cr;
+    }
+    const x0 = x2;
+    const y0 = y2;
+    const x1 = x2 + width2;
+    const y1 = y2 + height2;
+    commands.push({
+      id: createId(),
+      type: "M",
+      params: [x2 + tlRX, y2]
+    });
+    if (trRX > 0 || trRY > 0) {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x1 - trRX, y0]
+      });
+      commands.push({
+        id: createId(),
+        type: "A",
+        params: [trRX, trRY, 0, 0, 1, x1, y0 + trRY]
+      });
+    } else {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x1, y0]
+      });
     }
-  };
-  loadResource_fn = function(element2, assets) {
-    const item = __privateMethod(this, _Loader_instances, createLoadItem_fn).call(this, element2);
-    const assetId = getAssetIdFromElement(element2);
-    if (__privateGet(this, _currentLoadItemMap)[assetId]) {
-      return;
+    if (brRX > 0 || brRY > 0) {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x1, y1 - brRY]
+      });
+      commands.push({
+        id: createId(),
+        type: "A",
+        params: [brRX, brRY, 0, 0, 1, x1 - brRX, y1]
+      });
+    } else {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x1, y1]
+      });
     }
-    __privateGet(this, _currentLoadItemMap)[assetId] = item;
-    const loadFunc = __privateGet(this, _loadFuncMap)[element2.type];
-    if (typeof loadFunc === "function" && !__privateGet(this, _hasDestroyed)) {
-      item.startTime = Date.now();
-      loadFunc(element2, assets).then((result) => {
-        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, element2);
-        item.endTime = Date.now();
-        item.status = "error";
-        item.error = err;
-        __privateMethod(this, _Loader_instances, emitError_fn).call(this, item);
+    if (blRX > 0 || blRY > 0) {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x0 + blRX, y1]
+      });
+      commands.push({
+        id: createId(),
+        type: "A",
+        params: [blRX, blRY, 0, 0, 1, x0, y1 - blRY]
+      });
+    } else {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x0, y1]
       });
     }
-  };
-  isExistingErrorStorage_fn = function(element2) {
-    var _a;
-    const assetId = getAssetIdFromElement(element2);
-    const existItem = (_a = __privateGet(this, _currentLoadItemMap)) == null ? void 0 : _a[assetId];
-    if (existItem && existItem.status === "error" && existItem.source && existItem.source === __privateMethod(this, _Loader_instances, getLoadElementSource_fn).call(this, element2)) {
-      return true;
+    if (tlRX > 0 || tlRY > 0) {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x0, y0 + tlRY]
+      });
+      commands.push({
+        id: createId(),
+        type: "A",
+        params: [tlRX, tlRY, 0, 0, 1, x0 + tlRX, y0]
+      });
+    } else {
+      commands.push({
+        id: createId(),
+        type: "L",
+        params: [x0, y0]
+      });
     }
-    return false;
-  };
-  const detailConfig = getDefaultElementDetailConfig();
+    commands.push({
+      id: createId(),
+      type: "Z",
+      params: []
+    });
+    const attributes = {
+      ...calcVirtualBaseAttributes(mtrl, opts),
+      commands
+    };
+    return attributes;
+  }
+  function calcVirtualCircleAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    const { width: width2, height: height2 } = mtrl;
+    let { r } = mtrl;
+    const cx = width2 / 2 * dpr;
+    const cy = height2 / 2 * dpr;
+    r = r * dpr;
+    const c = r * 0.55228475;
+    const commands = [
+      // M - Move to starting point (right side of circle)
+      {
+        type: "M",
+        params: [cx + r, cy]
+      },
+      // C - Cubic Bezier curve to top point
+      {
+        type: "C",
+        params: [cx + r, cy - c, cx + c, cy - r, cx, cy - r]
+      },
+      // C - Cubic Bezier curve to left point
+      {
+        type: "C",
+        params: [cx - c, cy - r, cx - r, cy - c, cx - r, cy]
+      },
+      // C - Cubic Bezier curve to bottom point
+      {
+        type: "C",
+        params: [cx - r, cy + c, cx - c, cy + r, cx, cy + r]
+      },
+      // C - Cubic Bezier curve back to starting point
+      {
+        type: "C",
+        params: [cx + c, cy + r, cx + r, cy + c, cx + r, cy]
+      },
+      {
+        type: "Z",
+        params: []
+      }
+    ];
+    const attributes = {
+      ...calcVirtualBaseAttributes(mtrl, opts),
+      commands
+    };
+    return attributes;
+  }
+  function calcVirtualEllipseAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    const { width: width2, height: height2 } = mtrl;
+    let { rx, ry } = mtrl;
+    const cx = width2 / 2 * dpr;
+    const cy = height2 / 2 * dpr;
+    rx = rx * dpr;
+    ry = ry * dpr;
+    const kx = 0.55228475 * rx;
+    const ky = 0.55228475 * ry;
+    const commands = [
+      // M - Move to right point
+      {
+        type: "M",
+        params: [cx + rx, cy]
+      },
+      // C - Cubic Bezier curve to top point
+      {
+        type: "C",
+        params: [cx + rx, cy - ky, cx + kx, cy - ry, cx, cy - ry]
+      },
+      // C - Cubic Bezier curve to left point
+      {
+        type: "C",
+        params: [cx - kx, cy - ry, cx - rx, cy - ky, cx - rx, cy]
+      },
+      // C - Cubic Bezier curve to bottom point
+      {
+        type: "C",
+        params: [cx - rx, cy + ky, cx - kx, cy + ry, cx, cy + ry]
+      },
+      // C - Cubic Bezier curve back to starting point
+      {
+        type: "C",
+        params: [cx + kx, cy + ry, cx + rx, cy + ky, cx + rx, cy]
+      },
+      {
+        type: "Z",
+        params: []
+      }
+    ];
+    const attributes = {
+      ...calcVirtualBaseAttributes(mtrl, opts),
+      commands
+    };
+    return attributes;
+  }
+  const attributesConfig = getDefaultMaterialAttributes();
   function isTextWidthWithinErrorRange(w0, w1, scale) {
     return w0 >= w1;
   }
-  function calcVirtualTextDetail(elem, opts) {
-    const { w: w2, h: h2 } = elem;
+  function calcVirtualTextAttributes(mtrl, opts) {
+    const { width: width2, height: height2 } = mtrl;
     const x2 = 0;
     const y2 = 0;
     const ctx = opts.tempContext;
     const lines = [];
-    const detail = {
-      ...detailConfig,
-      ...elem.detail
+    const attributes = {
+      ...attributesConfig,
+      ...mtrl
     };
-    const originFontSize = detail.fontSize || detailConfig.fontSize;
+    const originFontSize = attributes.fontSize || attributesConfig.fontSize;
     const fontSize2 = originFontSize;
+    const baseAttrs = calcVirtualRectAttributes(mtrl, opts);
     if (fontSize2 < 2) {
-      return {};
+      return { ...baseAttrs, textLines: [] };
     }
-    const originLineHeight = detail.lineHeight || originFontSize;
+    const originLineHeight = attributes.lineHeight || originFontSize;
     const lineHeight2 = originLineHeight;
     ctx.textBaseline = "top";
     ctx.$setFont({
-      fontWeight: detail.fontWeight,
+      fontWeight: attributes.fontWeight,
       fontSize: fontSize2,
-      fontFamily: enhanceFontFamliy(detail.fontFamily)
+      fontFamily: enhanceFontFamliy(attributes.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();
+    let attributesText = attributes.text.replace(/\r\n/gi, "\n");
+    if (attributes.textTransform === "lowercase") {
+      attributesText = attributesText.toLowerCase();
+    } else if (attributes.textTransform === "uppercase") {
+      attributesText = attributesText.toUpperCase();
     }
     const fontHeight = lineHeight2;
-    const detailTextList = detailText.split("\n");
+    const attributesTextList = attributesText.split("\n");
     let lineNum = 0;
-    detailTextList.forEach((itemText, idx) => {
-      if (detail.minInlineSize === "maxContent") {
+    attributesTextList.forEach((itemText, idx) => {
+      if (attributes.minInlineSize === "maxContent") {
+        const measureResult = ctx.measureText(itemText);
         lines.push({
           x: x2,
           y: 0,
-          // TODO
           text: itemText,
-          width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
+          width: ctx.$undoPixelRatio(measureResult.width)
         });
       } else {
         let lineText = "";
         let splitStr = "";
-        let tempStrList = itemText.split(splitStr);
-        if (detail.wordBreak === "normal") {
+        let tempCharList = itemText.split(splitStr);
+        if (attributes.wordBreak === "normal") {
           splitStr = " ";
           const wordList = itemText.split(splitStr);
-          tempStrList = [];
+          tempCharList = [];
           wordList.forEach((word, idx2) => {
-            tempStrList.push(word);
+            tempCharList.push(word);
             if (idx2 < wordList.length - 1) {
-              tempStrList.push(splitStr);
+              tempCharList.push(splitStr);
             }
           });
         }
-        if (tempStrList.length === 1 && detail.overflow === "visible") {
+        if (tempCharList.length === 1 && attributes.overflow !== "hidden") {
           lines.push({
             x: x2,
             y: 0,
-            // TODO
-            text: tempStrList[0],
-            width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
+            text: tempCharList[0],
+            width: ctx.$undoPixelRatio(ctx.measureText(tempCharList[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 if (tempCharList.length > 0) {
+          for (let i = 0; i < tempCharList.length; i++) {
+            if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(width2), ctx.measureText(lineText + tempCharList[i]).width)) {
+              lineText += tempCharList[i] || "";
             } else {
               lines.push({
                 x: x2,
                 y: 0,
-                // TODO
                 text: lineText,
                 width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
               });
-              lineText = tempStrList[i] || "";
+              lineText = tempCharList[i] || "";
               lineNum++;
             }
-            if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
-              break;
+            if (lineNum * fontHeight >= height2) {
+              if (attributes.overflow === "hidden") {
+                lineText = "";
+                break;
+              }
             }
-            if (tempStrList.length - 1 === i) {
-              if ((lineNum + 1) * fontHeight <= h2) {
+            if (tempCharList.length - 1 === i) {
+              if ((lineNum + 1) * fontHeight <= height2) {
                 lines.push({
                   x: x2,
                   y: 0,
-                  // TODO
                   text: lineText,
                   width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
                 });
-                if (idx < detailTextList.length - 1) {
+                lineText = "";
+                if (idx < attributesTextList.length - 1) {
                   lineNum++;
                 }
                 break;
               }
             }
           }
+          if (lineText) {
+            lines.push({
+              x: x2,
+              y: 0,
+              text: lineText,
+              width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+            });
+            lineText = "";
+          }
         } else {
           lines.push({
             x: x2,
             y: 0,
-            // TODO
             text: "",
             width: 0
           });
@@ -2309,126 +2468,172 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     if (fontHeight > fontSize2) {
       eachLineStartY = (fontHeight - fontSize2) / 2;
     }
-    if (lines.length * fontHeight < h2) {
-      if (detail.verticalAlign === "top") {
+    if (lines.length * fontHeight < height2) {
+      if (attributes.verticalAlign === "top") {
         startY = 0;
-      } else if (detail.verticalAlign === "bottom") {
-        startY += h2 - lines.length * fontHeight;
+      } else if (attributes.verticalAlign === "bottom") {
+        startY += height2 - lines.length * fontHeight;
       } else {
-        startY += (h2 - lines.length * fontHeight) / 2;
+        startY += (height2 - 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);
+        if (attributes.textAlign === "center") {
+          _x = x2 + (width2 - line.width) / 2;
+        } else if (attributes.textAlign === "right") {
+          _x = x2 + (width2 - line.width);
         }
         lines[i].x = _x;
         lines[i].y = _y + fontHeight * i + eachLineStartY;
       });
     }
-    const virtualTextDetail = {
+    const virtualTextAttributes = {
+      ...baseAttrs,
       textLines: lines
     };
-    return virtualTextDetail;
-  }
-  function calcVirtualFlatDetail(elem, opts) {
-    let virtualDetail = {};
-    if (elem.type === "text") {
-      virtualDetail = calcVirtualTextDetail(elem, opts);
+    return virtualTextAttributes;
+  }
+  function calcVirtualPathAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    const attributes = { ...calcVirtualBaseAttributes(mtrl, opts), anchorCommands: [] };
+    const anchorCommands = convertPathCommandsToACLMZ(mtrl.commands || []);
+    attributes.anchorCommands = anchorCommands;
+    attributes.commands = scalePathCommands(mtrl.commands, dpr, dpr);
+    return attributes;
+  }
+  function calcVirtualAttributes(mtrl, opts) {
+    let attributes = null;
+    switch (mtrl.type) {
+      case "rect": {
+        attributes = calcVirtualRectAttributes(mtrl, opts);
+        break;
+      }
+      case "circle": {
+        attributes = calcVirtualCircleAttributes(mtrl, opts);
+        break;
+      }
+      case "ellipse": {
+        attributes = calcVirtualEllipseAttributes(mtrl, opts);
+        break;
+      }
+      case "text": {
+        attributes = calcVirtualTextAttributes(mtrl, opts);
+        break;
+      }
+      case "group": {
+        attributes = calcVirtualRectAttributes(mtrl, opts);
+        break;
+      }
+      case "path": {
+        attributes = calcVirtualPathAttributes(mtrl, opts);
+        break;
+      }
+      default: {
+        attributes = calcVirtualBaseAttributes(mtrl, opts);
+        break;
+      }
     }
-    return virtualDetail;
+    return attributes;
   }
-  function elementsToVirtualFlatMap(elements, opts) {
+  function materialsToVirtualFlatMap(materials, opts) {
     const virtualFlatMap = {};
     const currentPosition = [];
-    const _walk = (elem) => {
+    const _walk = (mtrl) => {
       const baseInfo = {
-        type: elem.type,
+        type: mtrl.type,
         isVisibleInView: true,
         position: [...currentPosition]
       };
-      let originRectInfo = null;
-      const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
-      originRectInfo = calcElementOriginRectInfo(elem, {
+      let boundingInfo = null;
+      const groupQueue = getGroupQueueByMaterialPosition(materials, currentPosition);
+      boundingInfo = calcMaterialBoundingInfo(mtrl, {
         groupQueue: groupQueue || []
       });
       const virtualItem = {
         ...baseInfo,
         ...{
-          originRectInfo,
-          rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
+          boundingInfo,
+          rangeBoundingInfo: is.angle(mtrl.angle) ? boundingInfoToRangeBoundingInfo(boundingInfo) : boundingInfo
         },
-        ...calcVirtualFlatDetail(elem, opts)
+        ...calcVirtualAttributes(mtrl, {
+          ...opts,
+          groupQueue: groupQueue || []
+        })
       };
-      virtualFlatMap[elem.uuid] = virtualItem;
-      if (elem.type === "group") {
-        elem.detail.children.forEach((ele, i) => {
+      virtualFlatMap[mtrl.id] = virtualItem;
+      if (mtrl.type === "group") {
+        mtrl.children.forEach((ele, i) => {
           currentPosition.push(i);
           _walk(ele);
           currentPosition.pop();
         });
       }
     };
-    elements.forEach((elem, index) => {
+    materials.forEach((mtrl, index) => {
       currentPosition.push(index);
-      _walk(elem);
+      _walk(mtrl);
       currentPosition.pop();
     });
     return virtualFlatMap;
   }
-  function sortElementsViewVisiableInfoMap(elements, opts) {
+  function sortMaterialsViewVisiableInfoMap(materials, opts) {
     const { viewScaleInfo, viewSizeInfo, tempContext } = opts;
-    const visibleInfoMap = elementsToVirtualFlatMap(elements, { tempContext });
-    return updateVirtualFlatItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
+    const visibleInfoMap = materialsToVirtualFlatMap(materials, {
+      tempContext,
+      dpr: viewSizeInfo.devicePixelRatio
+    });
+    return updateVirtualItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
   }
-  function isRangeRectInfoCollide(info1, info2) {
+  function isRangeBoundingBoxCollide(info1, info2) {
+    const centerX = info1.center.x;
+    const centerY = info1.center.y;
     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) {
+    const w = Math.abs(rect1MaxX - rect1MinX);
+    const h = Math.abs(rect1MaxY - rect1MinY);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x) - w;
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x) + w;
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y) - h;
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y) + h;
+    if (centerX >= rect2MinX && centerX <= rect2MaxX && centerY >= rect2MinY && centerY <= rect2MaxY) {
       return true;
     }
     return false;
   }
-  function updateVirtualFlatItemMapStatus(virtualFlatItemMap, opts) {
-    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+  function updateVirtualItemMapStatus(virtualItemMap, opts) {
+    const canvasBoundingBox = calcVisibleOriginCanvasBoundingBox(opts);
     let visibleCount = 0;
     let invisibleCount = 0;
-    Object.keys(virtualFlatItemMap).forEach((uuid) => {
-      const info = virtualFlatItemMap[uuid];
-      info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+    Object.keys(virtualItemMap).forEach((id2) => {
+      const info = virtualItemMap[id2];
+      info.isVisibleInView = isRangeBoundingBoxCollide(info.rangeBoundingInfo, canvasBoundingBox);
       info.isVisibleInView ? visibleCount++ : invisibleCount++;
     });
-    return { virtualFlatItemMap, visibleCount, invisibleCount };
+    return { virtualItemMap, visibleCount, invisibleCount };
   }
-  function calcVisibleOriginCanvasRectInfo(opts) {
+  function calcVisibleOriginCanvasBoundingBox(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
     const { scale, offsetTop, offsetLeft } = viewScaleInfo;
-    const { width, height } = viewSizeInfo;
+    const { width: width2, height: height2 } = 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 w = width2 / scale;
+    const h = height2 / scale;
+    const center = calcMaterialCenter({ x: x2, y: y2, width: width2, height: height2 });
     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 topRight = { x: x2 + w, y: y2 };
+    const bottomLeft = { x: x2, y: y2 + h };
+    const bottomRight = { x: x2 + w, y: y2 + h };
     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 = {
+    const right = { x: x2 + w, y: center.y };
+    const bottom = { x: center.x, y: y2 + h };
+    const boundingBox = {
       center,
       topLeft,
       topRight,
@@ -2439,227 +2644,251 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       right,
       bottom
     };
-    return rectInfo;
+    return boundingBox;
   }
   class Calculator {
+    #opts;
+    #store;
     constructor(opts) {
-      __privateAdd(this, _opts);
-      __privateAdd(this, _store);
-      __privateSet(this, _opts, opts);
-      __privateSet(this, _store, new Store({
+      this.#opts = opts;
+      this.#store = new Store({
         defaultStorage: {
-          virtualFlatItemMap: {},
+          virtualItemMap: {},
           visibleCount: 0,
           invisibleCount: 0
         }
-      }));
+      });
     }
     toGridNum(num, opts) {
-      if ((opts == null ? void 0 : opts.ignore) === true) {
+      if (opts?.ignore === true) {
         return num;
       }
       return Math.round(num);
     }
     destroy() {
-      __privateSet(this, _opts, null);
+      this.#opts = null;
     }
-    needRender(elem) {
-      const virtualFlatItemMap = __privateGet(this, _store).get("virtualFlatItemMap");
-      const info = virtualFlatItemMap[elem.uuid];
+    needRender(mtrl) {
+      const virtualItemMap = this.#store.get("virtualItemMap");
+      const info = virtualItemMap[mtrl.id];
       if (!info) {
         return true;
       }
       return info.isVisibleInView;
     }
-    getPointElement(p, opts) {
-      const context2d = __privateGet(this, _opts).tempContext;
-      return getViewPointAtElement(p, { ...opts, ...{ context2d } });
+    forceVisiable(id2) {
+      const virtualItemMap = this.#store.get("virtualItemMap");
+      const info = virtualItemMap[id2];
+      if (info) {
+        info.isVisibleInView = true;
+      }
+    }
+    getPointMaterial(p, opts) {
+      const context2d = this.#opts.tempContext;
+      return getViewPointAtMaterial(p, { ...opts, ...{ context2d } });
     }
-    resetVirtualFlatItemMap(data2, opts) {
+    resetVirtualItemMap(data2, opts) {
       if (data2) {
-        const { virtualFlatItemMap, invisibleCount, visibleCount } = sortElementsViewVisiableInfoMap(data2.elements, {
+        const { virtualItemMap, invisibleCount, visibleCount } = sortMaterialsViewVisiableInfoMap(data2.materials, {
           ...opts,
           ...{
-            tempContext: __privateGet(this, _opts).tempContext
+            tempContext: this.#opts.tempContext
           }
         });
-        __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
-        __privateGet(this, _store).set("invisibleCount", invisibleCount);
-        __privateGet(this, _store).set("visibleCount", visibleCount);
+        this.#store.set("virtualItemMap", virtualItemMap);
+        this.#store.set("invisibleCount", invisibleCount);
+        this.#store.set("visibleCount", visibleCount);
       }
     }
     updateVisiableStatus(opts) {
-      const { virtualFlatItemMap, invisibleCount, visibleCount } = updateVirtualFlatItemMapStatus(
-        __privateGet(this, _store).get("virtualFlatItemMap"),
+      const { virtualItemMap, invisibleCount, visibleCount } = updateVirtualItemMapStatus(
+        this.#store.get("virtualItemMap"),
         opts
       );
-      __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
-      __privateGet(this, _store).set("invisibleCount", invisibleCount);
-      __privateGet(this, _store).set("visibleCount", visibleCount);
+      this.#store.set("virtualItemMap", virtualItemMap);
+      this.#store.set("invisibleCount", invisibleCount);
+      this.#store.set("visibleCount", visibleCount);
     }
-    calcViewRectInfoFromOrigin(uuid, opts) {
-      const infoData = __privateGet(this, _store).get("virtualFlatItemMap")[uuid];
-      if (!(infoData == null ? void 0 : infoData.originRectInfo)) {
+    calcViewBoundingInfoFromOrigin(id2, opts) {
+      const infoData = this.#store.get("virtualItemMap")[id2];
+      if (!infoData?.boundingInfo) {
         return null;
       }
       const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
-      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.originRectInfo;
+      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.boundingInfo;
       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)
+      const viewBoundingBox = {
+        center: calcViewPoint(center, calcOpts),
+        left: calcViewPoint(left, calcOpts),
+        right: calcViewPoint(right, calcOpts),
+        bottom: calcViewPoint(bottom, calcOpts),
+        top: calcViewPoint(top, calcOpts),
+        topLeft: calcViewPoint(topLeft, calcOpts),
+        topRight: calcViewPoint(topRight, calcOpts),
+        bottomLeft: calcViewPoint(bottomLeft, calcOpts),
+        bottomRight: calcViewPoint(bottomRight, calcOpts)
       };
-      return viewRectInfo;
+      return viewBoundingBox;
     }
-    calcViewRectInfoFromRange(uuid, opts) {
-      const infoData = __privateGet(this, _store).get("virtualFlatItemMap")[uuid];
-      if (!(infoData == null ? void 0 : infoData.originRectInfo)) {
+    calcViewBoundingInfoFromRange(id2, opts) {
+      const infoData = this.#store.get("virtualItemMap")[id2];
+      if (!infoData?.boundingInfo) {
         return null;
       }
       const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
-      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.rangeRectInfo;
+      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.rangeBoundingInfo;
       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)
+      const info = {
+        center: calcViewPoint(center, calcOpts),
+        left: calcViewPoint(left, calcOpts),
+        right: calcViewPoint(right, calcOpts),
+        bottom: calcViewPoint(bottom, calcOpts),
+        top: calcViewPoint(top, calcOpts),
+        topLeft: calcViewPoint(topLeft, calcOpts),
+        topRight: calcViewPoint(topRight, calcOpts),
+        bottomLeft: calcViewPoint(bottomLeft, calcOpts),
+        bottomRight: calcViewPoint(bottomRight, calcOpts)
       };
-      return viewRectInfo;
-    }
-    modifyText(element2) {
-      const virtualFlatItemMap = __privateGet(this, _store).get("virtualFlatItemMap");
-      const flatItem = virtualFlatItemMap[element2.uuid];
-      if (element2 && element2.type === "text") {
-        const newVirtualFlatItem = {
-          ...flatItem,
-          ...calcVirtualTextDetail(element2, {
-            tempContext: __privateGet(this, _opts).tempContext
-          })
+      return info;
+    }
+    modifyVirtualAttributes(material2, opts) {
+      const { viewSizeInfo, groupQueue } = opts;
+      const virtualItemMap = this.#store.get("virtualItemMap");
+      const vItem = virtualItemMap[material2.id];
+      const vAttributes = calcVirtualAttributes(material2, {
+        tempContext: this.#opts.tempContext,
+        dpr: viewSizeInfo.devicePixelRatio,
+        groupQueue
+      });
+      if (vAttributes) {
+        const boundingInfo = calcMaterialBoundingInfo(material2, {
+          groupQueue
+        });
+        const newVirtualItem = {
+          ...vItem,
+          ...vAttributes,
+          boundingInfo,
+          rangeBoundingInfo: is.angle(material2.angle) ? boundingInfoToRangeBoundingInfo(boundingInfo) : boundingInfo
         };
-        virtualFlatItemMap[element2.uuid] = newVirtualFlatItem;
-        __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
+        virtualItemMap[material2.id] = newVirtualItem;
+        this.#store.set("virtualItemMap", virtualItemMap);
       }
     }
-    modifyVirtualFlatItemMap(data2, opts) {
+    modifyVirtualItemMap(data2, opts) {
       const { modifyInfo, viewScaleInfo, viewSizeInfo } = opts;
       const { type: type2, content } = modifyInfo;
-      const list = data2.elements;
-      const virtualFlatItemMap = __privateGet(this, _store).get("virtualFlatItemMap");
-      if (type2 === "deleteElement") {
-        const { element: element2 } = content;
-        const uuids = [];
+      const list = data2.materials;
+      const virtualItemMap = this.#store.get("virtualItemMap");
+      if (type2 === "deleteMaterial") {
+        const { material: material2 } = content;
+        const ids = [];
         const _walk = (e) => {
-          uuids.push(e.uuid);
-          if (e.type === "group" && Array.isArray(e.detail.children)) {
-            e.detail.children.forEach((child) => {
+          ids.push(e.id);
+          if (e.type === "group" && Array.isArray(e.children)) {
+            e.children.forEach((child) => {
               _walk(child);
             });
           }
         };
-        _walk(element2);
-        uuids.forEach((uuid) => {
-          delete virtualFlatItemMap[uuid];
+        _walk(material2);
+        ids.forEach((id2) => {
+          delete virtualItemMap[id2];
         });
-        __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
-      } else if (type2 === "addElement" || type2 === "updateElement") {
+        this.#store.set("virtualItemMap", virtualItemMap);
+      } else if (type2 === "addMaterial" || type2 === "updateMaterial") {
         const { position } = content;
-        const element2 = findElementFromListByPosition(position, data2.elements);
-        const groupQueue = getGroupQueueByElementPosition(list, position);
-        if (element2) {
-          if (type2 === "updateElement" && element2.type === "group") {
-            this.resetVirtualFlatItemMap(data2, { viewScaleInfo, viewSizeInfo });
+        const material2 = findMaterialFromListByPosition(position, data2.materials);
+        const groupQueue = getGroupQueueByMaterialPosition(list, position);
+        if (material2) {
+          if (type2 === "updateMaterial" && material2.type === "group") {
+            this.resetVirtualItemMap(data2, { viewScaleInfo, viewSizeInfo });
           } else {
-            const originRectInfo = calcElementOriginRectInfo(element2, {
+            const boundingInfo = calcMaterialBoundingInfo(material2, {
               groupQueue: groupQueue || []
             });
-            const newVirtualFlatItem = {
-              type: element2.type,
-              originRectInfo,
-              rangeRectInfo: is.angle(element2.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo,
+            const newVirtualItem = {
+              type: material2.type,
+              boundingInfo,
+              rangeBoundingInfo: is.angle(material2.angle) ? boundingInfoToRangeBoundingInfo(boundingInfo) : boundingInfo,
               isVisibleInView: true,
               position: [...position],
-              ...calcVirtualFlatDetail(element2, {
-                tempContext: __privateGet(this, _opts).tempContext
+              ...calcVirtualAttributes(material2, {
+                tempContext: this.#opts.tempContext,
+                dpr: viewSizeInfo.devicePixelRatio,
+                groupQueue: groupQueue || []
               })
             };
-            virtualFlatItemMap[element2.uuid] = newVirtualFlatItem;
-            __privateGet(this, _store).set("virtualFlatItemMap", virtualFlatItemMap);
-            if (type2 === "updateElement") {
+            virtualItemMap[material2.id] = newVirtualItem;
+            this.#store.set("virtualItemMap", virtualItemMap);
+            if (type2 === "updateMaterial") {
               this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
             }
           }
         }
-      } else if (type2 === "moveElement") {
-        this.resetVirtualFlatItemMap(data2, { viewScaleInfo, viewSizeInfo });
+      } else if (type2 === "moveMaterial") {
+        this.resetVirtualItemMap(data2, { viewScaleInfo, viewSizeInfo });
       }
     }
-    getVirtualFlatItem(uuid) {
-      const itemMap = __privateGet(this, _store).get("virtualFlatItemMap");
-      return itemMap[uuid] || null;
+    getVirtualItem(id2) {
+      const itemMap = this.#store.get("virtualItemMap");
+      return itemMap[id2] || null;
     }
   }
-  _opts = new WeakMap();
-  _store = new WeakMap();
   class Renderer extends EventEmitter {
+    #opts;
+    #loader = new Loader();
+    #calculator;
+    #hasDestroyed = false;
     constructor(opts) {
       super();
-      __privateAdd(this, _Renderer_instances);
-      __privateAdd(this, _opts2);
-      __privateAdd(this, _loader, new Loader());
-      __privateAdd(this, _calculator);
-      __privateAdd(this, _hasDestroyed2, false);
-      __privateSet(this, _opts2, opts);
-      __privateSet(this, _calculator, new Calculator({
+      this.#opts = opts;
+      this.#calculator = new Calculator({
         tempContext: opts.tempContext
-      }));
-      __privateMethod(this, _Renderer_instances, init_fn).call(this);
+      });
+      this.#init();
     }
     isDestroyed() {
-      return __privateGet(this, _hasDestroyed2);
+      return this.#hasDestroyed;
     }
     destroy() {
       this.clear();
-      __privateSet(this, _opts2, null);
-      __privateGet(this, _loader).destroy();
-      __privateSet(this, _loader, null);
-      __privateSet(this, _hasDestroyed2, true);
+      this.#opts = null;
+      this.#loader.destroy();
+      this.#loader = null;
+      this.#hasDestroyed = true;
+    }
+    #init() {
+      const loader = this.#loader;
+      loader.on("load", (e) => {
+        this.trigger("load", e);
+      });
+      loader.on("error", (e) => {
+        console.error(e);
+      });
     }
     updateOptions(opts) {
-      __privateSet(this, _opts2, opts);
+      this.#opts = opts;
     }
     drawData(data2, opts) {
-      const loader = __privateGet(this, _loader);
-      const calculator = __privateGet(this, _calculator);
-      const { sharer } = __privateGet(this, _opts2);
-      const viewContext = __privateGet(this, _opts2).viewContext;
+      const loader = this.#loader;
+      const calculator = this.#calculator;
+      const { sharer } = this.#opts;
+      const viewContext = this.#opts.viewContext;
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
-      const parentElementSize = {
+      const parentMaterialSize = {
         x: 0,
         y: 0,
-        w: opts.viewSizeInfo.width,
-        h: opts.viewSizeInfo.height
+        width: opts.viewSizeInfo.width,
+        height: opts.viewSizeInfo.height
       };
       if (opts.forceDrawAll === true) {
-        __privateGet(this, _calculator).resetVirtualFlatItemMap(data2, {
+        this.#calculator.resetVirtualItemMap(data2, {
           viewScaleInfo: opts.viewScaleInfo,
           viewSizeInfo: opts.viewSizeInfo
         });
@@ -2667,23 +2896,24 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const drawOpts = {
         loader,
         calculator,
-        parentElementSize,
-        elementAssets: data2.assets,
+        parentMaterialSize,
+        materialAssets: data2.assets,
         parentOpacity: 1,
-        overrideElementMap: sharer == null ? void 0 : sharer.getActiveOverrideElemenentMap(),
+        overrideMaterialMap: sharer?.getActiveOverrideMaterialMap(),
+        tempContext: this.#opts.tempContext,
         ...opts
       };
       drawGlobalBackground(viewContext, data2.global, drawOpts);
       if (data2.layout) {
         drawLayout(viewContext, data2.layout, drawOpts, () => {
-          drawElementList(viewContext, data2, drawOpts);
+          drawMaterialList(viewContext, data2, drawOpts);
         });
       } else {
-        drawElementList(viewContext, data2, drawOpts);
+        drawMaterialList(viewContext, data2, drawOpts);
       }
     }
     scale(num) {
-      const { sharer } = __privateGet(this, _opts2);
+      const { sharer } = this.#opts;
       if (!sharer) {
         return;
       }
@@ -2693,8 +2923,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         offsetBottom,
         offsetLeft,
         offsetRight,
-        width,
-        height,
+        width: width2,
+        height: height2,
         contextHeight,
         contextWidth,
         devicePixelRatio
@@ -2709,8 +2939,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             offsetRight
           },
           viewSizeInfo: {
-            width,
-            height,
+            width: width2,
+            height: height2,
             contextHeight,
             contextWidth,
             devicePixelRatio
@@ -2719,45 +2949,31 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     }
     setLoadItemMap(itemMap) {
-      __privateGet(this, _loader).setLoadItemMap(itemMap);
+      this.#loader.setLoadItemMap(itemMap);
     }
     getLoadItemMap() {
-      return __privateGet(this, _loader).getLoadItemMap();
+      return this.#loader.getLoadItemMap();
     }
     getLoader() {
-      return __privateGet(this, _loader);
+      return this.#loader;
     }
     getCalculator() {
-      return __privateGet(this, _calculator);
-    }
-  }
-  _opts2 = new WeakMap();
-  _loader = new WeakMap();
-  _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", (e) => {
-      console.error(e);
-    });
-  };
+      return this.#calculator;
+    }
+  }
   exports.Calculator = Calculator;
   exports.Renderer = Renderer;
   exports.drawCircle = drawCircle;
-  exports.drawElement = drawElement;
-  exports.drawElementList = drawElementList;
+  exports.drawForeignObject = drawForeignObject;
   exports.drawGlobalBackground = drawGlobalBackground;
   exports.drawGroup = drawGroup;
-  exports.drawHTML = drawHTML;
   exports.drawImage = drawImage;
   exports.drawLayout = drawLayout;
+  exports.drawMaterial = drawMaterial;
+  exports.drawMaterialList = drawMaterialList;
   exports.drawRect = drawRect;
-  exports.drawSVG = drawSVG;
+  exports.drawSVGCode = drawSVGCode;
   exports.drawText = drawText;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
-}({});
+})({});