@idraw/util 0.4.0-beta.4 → 0.4.0-beta.40

package/dist/index.global.js

@@ -1,24 +1,14 @@
 var iDrawUtil = function(exports) {
-  "use strict";var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
+  "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 _ctx, _opts;
+  var _ctx, _opts, _listeners, _temp, _backUpDefaultStorage, _static, _Store_instances, createTempStorage_fn;
   function compose(middleware) {
     return function(context, next) {
       return dispatch(0);
@@ -27,8 +17,7 @@ var __privateSet = (obj, member, value, setter) => {
         if (i === middleware.length && next) {
           fn = next;
         }
-        if (!fn)
-          return Promise.resolve();
+        if (!fn) return Promise.resolve();
         try {
           return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
         } catch (err) {
@@ -47,7 +36,7 @@ var __privateSet = (obj, member, value, setter) => {
   function throttle(fn, timeout) {
     let timer = -1;
     return function(...args) {
-      if (timer > 0) {
+      if (timer >= 0) {
         return;
       }
       timer = setTimeout(() => {
@@ -56,6 +45,18 @@ var __privateSet = (obj, member, value, setter) => {
       }, timeout);
     };
   }
+  function debounce(fn, timeout) {
+    let timer = -1;
+    return function(...args) {
+      if (timer >= 0) {
+        window.clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        fn(...args);
+        timer = -1;
+      }, timeout);
+    };
+  }
   function downloadImageFromCanvas(canvas, opts) {
     const { fileName, type = "image/jpeg" } = opts;
     const stream = canvas.toDataURL(type);
@@ -66,9 +67,12 @@ var __privateSet = (obj, member, value, setter) => {
     downloadLink = null;
   }
   function pickFile(opts) {
-    const { success, error } = opts;
+    const { accept, success, error } = opts;
     let input = document.createElement("input");
     input.type = "file";
+    if (accept) {
+      input.accept = accept;
+    }
     input.addEventListener("change", function() {
       var _a;
       const file = (_a = input.files) == null ? void 0 : _a[0];
@@ -139,13 +143,13 @@ var __privateSet = (obj, member, value, setter) => {
     downloadLink = null;
   }
   function toColorHexNum(color2) {
-    return parseInt(color2.replace(/^\#/, "0x"));
+    return parseInt(color2.replace(/^#/, "0x"));
   }
   function toColorHexStr(color2) {
     return "#" + color2.toString(16);
   }
   function isColorStr(color2) {
-    return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
+    return typeof color2 === "string" && (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
   const colorNameMap = {
     aliceblue: "#f0f8ff",
@@ -302,6 +306,8 @@ var __privateSet = (obj, member, value, setter) => {
     let css = "transparent";
     if (typeof color2 === "string") {
       css = color2;
+    } else if ((color2 == null ? void 0 : color2.stops.length) === 1) {
+      css = color2.stops[0].color;
     } else if ((color2 == null ? void 0 : color2.type) === "linear-gradient") {
       const items = [];
       if (typeof color2.angle === "number") {
@@ -349,13 +355,13 @@ var __privateSet = (obj, member, value, setter) => {
       return hex;
     }
     let hexAlpha = 1;
-    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
-    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    const regHex1 = /^#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^#[0-9a-f]{8,8}$/i;
     let result = hex;
     if (regHex1.test(hex)) {
-      hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(5, 7).replace(/^#/, "0x"));
     } else if (regHex2.test(hex)) {
-      hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(7, 9).replace(/^#/, "0x"));
       result = hex.substring(0, 7);
     }
     hexAlpha = hexAlpha * alpha;
@@ -422,6 +428,28 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return _clone(target);
   }
+  function deepCloneElement(element) {
+    const elem = deepClone(element);
+    const _resetUUID = (e) => {
+      e.uuid = createUUID();
+      if (e.type === "group" && e.detail.children) {
+        e.detail.children.forEach((child) => {
+          _resetUUID(child);
+        });
+      }
+    };
+    _resetUUID(elem);
+    return elem;
+  }
+  function deepCloneData(data) {
+    const { elements, ...restData } = data;
+    return {
+      ...deepClone(restData),
+      ...{
+        elements: elements.map((elem) => deepCloneElement(elem))
+      }
+    };
+  }
   function is$1(target) {
     return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
   }
@@ -458,7 +486,7 @@ var __privateSet = (obj, member, value, setter) => {
           const assetUUID = createAssetId(html2);
           if (!assets[assetUUID]) {
             assets[assetUUID] = {
-              type: "svg",
+              type: "html",
               value: html2
             };
           }
@@ -479,6 +507,80 @@ var __privateSet = (obj, member, value, setter) => {
     sortedData.assets = assets;
     return sortedData;
   }
+  function filterCompactData(data, opts) {
+    const assets = data.assets || {};
+    const sortedData = deepClone(data);
+    const loadItemMap = (opts == null ? void 0 : opts.loadItemMap) || {};
+    const _scanElements = (elems) => {
+      elems.forEach((elem) => {
+        var _a, _b, _c;
+        if (elem.type === "image" && elem.detail.src) {
+          const src = elem.detail.src;
+          if (isAssetId(src) && !assets[src] && loadItemMap[src] && typeof ((_a = loadItemMap[src]) == null ? void 0 : _a.source) === "string") {
+            assets[src] = {
+              type: "image",
+              value: loadItemMap[src].source
+            };
+          } else if (!assets[src]) {
+            const assetUUID = createAssetId(src);
+            if (!assets[assetUUID]) {
+              assets[assetUUID] = {
+                type: "image",
+                value: src
+              };
+            }
+            elem.detail.src = assetUUID;
+          }
+        } else if (elem.type === "svg") {
+          const svg2 = elem.detail.svg;
+          if (isAssetId(svg2) && !assets[svg2] && loadItemMap[svg2] && typeof ((_b = loadItemMap[svg2]) == null ? void 0 : _b.source) === "string") {
+            assets[svg2] = {
+              type: "svg",
+              value: loadItemMap[svg2].source
+            };
+          } else if (!assets[svg2]) {
+            const assetUUID = createAssetId(svg2);
+            if (!assets[assetUUID]) {
+              assets[assetUUID] = {
+                type: "svg",
+                value: svg2
+              };
+            }
+            elem.detail.svg = assetUUID;
+          }
+        } else if (elem.type === "html") {
+          const html2 = elem.detail.html;
+          if (isAssetId(html2) && !assets[html2] && loadItemMap[html2] && typeof ((_c = loadItemMap[html2]) == null ? void 0 : _c.source) === "string") {
+            assets[html2] = {
+              type: "html",
+              value: loadItemMap[html2].source
+            };
+          } else if (!assets[html2]) {
+            const assetUUID = createAssetId(html2);
+            if (!assets[assetUUID]) {
+              assets[assetUUID] = {
+                type: "html",
+                value: html2
+              };
+            }
+            elem.detail.html = assetUUID;
+          }
+        } else if (elem.type === "group" && Array.isArray(elem.detail.children)) {
+          const groupAssets = elem.detail.assets || {};
+          Object.keys(groupAssets).forEach((assetId) => {
+            if (!assets[assetId]) {
+              assets[assetId] = groupAssets[assetId];
+            }
+          });
+          delete elem.detail.assets;
+          _scanElements(elem.detail.children);
+        }
+      });
+    };
+    _scanElements(sortedData.elements);
+    sortedData.assets = assets;
+    return sortedData;
+  }
   function parsePrototype(data) {
     const typeStr = Object.prototype.toString.call(data) || "";
     const result = typeStr.replace(/(\[object|\])/gi, "").trim();
@@ -501,6 +603,9 @@ var __privateSet = (obj, member, value, setter) => {
     asyncFunction(data) {
       return parsePrototype(data) === "AsyncFunction";
     },
+    boolean(data) {
+      return parsePrototype(data) === "Boolean";
+    },
     string(data) {
       return parsePrototype(data) === "String";
     },
@@ -594,6 +699,9 @@ var __privateSet = (obj, member, value, setter) => {
     const image = await loadImage(dataURL);
     return image;
   }
+  function positiveNum(value) {
+    return typeof value === "number" && value >= 0;
+  }
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -604,19 +712,19 @@ var __privateSet = (obj, member, value, setter) => {
     return number(value);
   }
   function w(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function h(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function angle(value) {
     return typeof value === "number" && value >= -360 && value <= 360;
   }
   function borderWidth(value) {
-    return w(value);
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function borderRadius(value) {
-    return number(value) && value >= 0;
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function color(value) {
     return isColorStr(value);
@@ -670,6 +778,7 @@ var __privateSet = (obj, member, value, setter) => {
     return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
   }
   const is = {
+    positiveNum,
     x,
     y,
     w,
@@ -806,14 +915,18 @@ var __privateSet = (obj, member, value, setter) => {
     svgDesc,
     htmlDesc
   };
+  const defaultFontSize = 12;
+  const defaultFontWeight = "400";
+  const defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`;
   class Context2D {
     // private _width: number = 0;
     // private _height: number = 0;
     constructor(ctx, opts) {
-      __privateAdd(this, _ctx, void 0);
-      __privateAdd(this, _opts, void 0);
+      __privateAdd(this, _ctx);
+      __privateAdd(this, _opts);
       __privateSet(this, _ctx, ctx);
       __privateSet(this, _opts, { ...{ devicePixelRatio: 1, offscreenCanvas: null }, ...opts });
+      this.$resetFont();
     }
     $undoPixelRatio(num) {
       return num / __privateGet(this, _opts).devicePixelRatio;
@@ -824,6 +937,9 @@ var __privateSet = (obj, member, value, setter) => {
     $getContext() {
       return __privateGet(this, _ctx);
     }
+    $setContext(ctx) {
+      __privateSet(this, _ctx, ctx);
+    }
     $setFont(opts) {
       const strList = [];
       if (opts.fontWeight) {
@@ -833,6 +949,13 @@ var __privateSet = (obj, member, value, setter) => {
       strList.push(`${opts.fontFamily || "sans-serif"}`);
       __privateGet(this, _ctx).font = `${strList.join(" ")}`;
     }
+    $resetFont() {
+      this.$setFont({
+        fontSize: defaultFontSize,
+        fontFamily: defaultFontFamily,
+        fontWeight: defaultFontWeight
+      });
+    }
     $getOffscreenCanvas() {
       return __privateGet(this, _opts).offscreenCanvas;
     }
@@ -940,16 +1063,33 @@ var __privateSet = (obj, member, value, setter) => {
       return __privateGet(this, _ctx).fill(...args);
     }
     arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return __privateGet(this, _ctx).arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+      return __privateGet(this, _ctx).arc(
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(radius),
+        startAngle,
+        endAngle,
+        anticlockwise
+      );
     }
     rect(x2, y2, w2, h2) {
       return __privateGet(this, _ctx).rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     fillRect(x2, y2, w2, h2) {
-      return __privateGet(this, _ctx).fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __privateGet(this, _ctx).fillRect(
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(w2),
+        this.$doPixelRatio(h2)
+      );
     }
     clearRect(x2, y2, w2, h2) {
-      return __privateGet(this, _ctx).clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __privateGet(this, _ctx).clearRect(
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(w2),
+        this.$doPixelRatio(h2)
+      );
     }
     beginPath() {
       return __privateGet(this, _ctx).beginPath();
@@ -964,7 +1104,31 @@ var __privateSet = (obj, member, value, setter) => {
       return __privateGet(this, _ctx).moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     arcTo(x1, y1, x2, y2, radius) {
-      return __privateGet(this, _ctx).arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+      return __privateGet(this, _ctx).arcTo(
+        this.$doPixelRatio(x1),
+        this.$doPixelRatio(y1),
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(radius)
+      );
+    }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
+      return __privateGet(this, _ctx).bezierCurveTo(
+        this.$doPixelRatio(cp1x),
+        this.$doPixelRatio(cp1y),
+        this.$doPixelRatio(cp2x),
+        this.$doPixelRatio(cp2y),
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2)
+      );
+    }
+    quadraticCurveTo(cpx, cpy, x2, y2) {
+      return __privateGet(this, _ctx).quadraticCurveTo(
+        this.$doPixelRatio(cpx),
+        this.$doPixelRatio(cpy),
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2)
+      );
     }
     getLineDash() {
       return __privateGet(this, _ctx).getLineDash();
@@ -1005,7 +1169,13 @@ var __privateSet = (obj, member, value, setter) => {
           this.$doPixelRatio(dh)
         );
       } else {
-        return __privateGet(this, _ctx).drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __privateGet(this, _ctx).drawImage(
+          image,
+          this.$doPixelRatio(dx),
+          this.$doPixelRatio(dy),
+          this.$doPixelRatio(dw),
+          this.$doPixelRatio(dh)
+        );
       }
     }
     createPattern(image, repetition) {
@@ -1065,7 +1235,12 @@ var __privateSet = (obj, member, value, setter) => {
       return __privateGet(this, _ctx).getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-      return __privateGet(this, _ctx).createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+      return __privateGet(this, _ctx).createLinearGradient(
+        this.$doPixelRatio(x0),
+        this.$doPixelRatio(y0),
+        this.$doPixelRatio(x1),
+        this.$doPixelRatio(y1)
+      );
     }
     createRadialGradient(x0, y0, r0, x1, y1, r1) {
       return __privateGet(this, _ctx).createRadialGradient(
@@ -1107,77 +1282,55 @@ var __privateSet = (obj, member, value, setter) => {
     return context2d;
   }
   function createBoardContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen } = opts;
+    const { width, height, devicePixelRatio } = opts;
     const ctxOpts = {
       width,
       height,
       devicePixelRatio
     };
-    if (offscreen === true) {
-      const ctx = canvas.getContext("2d");
-      const viewContext = createOffscreenContext2D(ctxOpts);
-      const helperContext = createOffscreenContext2D(ctxOpts);
-      const underContext = createOffscreenContext2D(ctxOpts);
-      const boardContext = createContext2D({ ctx, ...ctxOpts });
-      const drawView = () => {
-        const { width: w2, height: h2 } = viewContext.$getSize();
-        boardContext.clearRect(0, 0, w2, h2);
-        boardContext.drawImage(underContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(helperContext.canvas, 0, 0, w2, h2);
-        underContext.clearRect(0, 0, w2, h2);
-        viewContext.clearRect(0, 0, w2, h2);
-        helperContext.clearRect(0, 0, w2, h2);
-      };
-      const content = {
-        underContext,
-        viewContext,
-        helperContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    } else {
-      const ctx = canvas.getContext("2d");
-      const viewContext = createContext2D(ctxOpts);
-      const helperContext = createContext2D(ctxOpts);
-      const underContext = createContext2D(ctxOpts);
-      const boardContext = createContext2D({ ctx, ...ctxOpts });
-      const drawView = () => {
-        boardContext.clearRect(0, 0, width, height);
-        boardContext.drawImage(underContext.canvas, 0, 0, width, height);
-        boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
-        boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
-        underContext.clearRect(0, 0, width, height);
-        viewContext.clearRect(0, 0, width, height);
-        helperContext.clearRect(0, 0, width, height);
-      };
-      const content = {
-        underContext,
-        viewContext,
-        helperContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    }
+    const ctx = canvas.getContext("2d");
+    const viewContext = createOffscreenContext2D(ctxOpts);
+    const overlayContext = createOffscreenContext2D(ctxOpts);
+    const underlayContext = createOffscreenContext2D(ctxOpts);
+    const boardContext = createContext2D({ ctx, ...ctxOpts });
+    const tempContext = createOffscreenContext2D(ctxOpts);
+    const drawView = () => {
+      const { width: w2, height: h2 } = viewContext.$getSize();
+      boardContext.clearRect(0, 0, w2, h2);
+      boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
+      boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
+      boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
+      underlayContext.clearRect(0, 0, w2, h2);
+      viewContext.clearRect(0, 0, w2, h2);
+      overlayContext.clearRect(0, 0, w2, h2);
+    };
+    const content = {
+      underlayContext,
+      viewContext,
+      overlayContext,
+      boardContext,
+      tempContext,
+      drawView
+    };
+    return content;
   }
   class EventEmitter {
     constructor() {
-      this._listeners = /* @__PURE__ */ new Map();
+      __privateAdd(this, _listeners);
+      __privateSet(this, _listeners, /* @__PURE__ */ new Map());
     }
     on(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey) || [];
+      if (__privateGet(this, _listeners).has(eventKey)) {
+        const callbacks = __privateGet(this, _listeners).get(eventKey) || [];
         callbacks == null ? void 0 : callbacks.push(callback);
-        this._listeners.set(eventKey, callbacks);
+        __privateGet(this, _listeners).set(eventKey, callbacks);
       } else {
-        this._listeners.set(eventKey, [callback]);
+        __privateGet(this, _listeners).set(eventKey, [callback]);
       }
     }
     off(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+      if (__privateGet(this, _listeners).has(eventKey)) {
+        const callbacks = __privateGet(this, _listeners).get(eventKey);
         if (Array.isArray(callbacks)) {
           for (let i = 0; i < (callbacks == null ? void 0 : callbacks.length); i++) {
             if (callbacks[i] === callback) {
@@ -1186,11 +1339,11 @@ var __privateSet = (obj, member, value, setter) => {
             }
           }
         }
-        this._listeners.set(eventKey, callbacks || []);
+        __privateGet(this, _listeners).set(eventKey, callbacks || []);
       }
     }
     trigger(eventKey, e) {
-      const callbacks = this._listeners.get(eventKey);
+      const callbacks = __privateGet(this, _listeners).get(eventKey);
       if (Array.isArray(callbacks)) {
         callbacks.forEach((cb) => {
           cb(e);
@@ -1201,15 +1354,22 @@ var __privateSet = (obj, member, value, setter) => {
       }
     }
     has(name) {
-      if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
+      if (__privateGet(this, _listeners).has(name)) {
+        const list = __privateGet(this, _listeners).get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
       }
       return false;
     }
+    destroy() {
+      this.clear();
+    }
+    clear() {
+      __privateGet(this, _listeners).clear();
+    }
   }
+  _listeners = 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);
@@ -1242,25 +1402,47 @@ var __privateSet = (obj, member, value, setter) => {
   }
   class Store {
     constructor(opts) {
-      this._backUpDefaultStorage = deepClone(opts.defaultStorage);
-      this._temp = this._createTempStorage();
+      __privateAdd(this, _Store_instances);
+      __privateAdd(this, _temp);
+      __privateAdd(this, _backUpDefaultStorage);
+      __privateAdd(this, _static);
+      __privateSet(this, _backUpDefaultStorage, deepClone(opts.defaultStorage));
+      __privateSet(this, _temp, __privateMethod(this, _Store_instances, createTempStorage_fn).call(this));
+      __privateSet(this, _static, opts.defaultStatic || {});
     }
     set(name, value) {
-      this._temp[name] = value;
+      __privateGet(this, _temp)[name] = value;
     }
     get(name) {
-      return this._temp[name];
+      return __privateGet(this, _temp)[name];
     }
-    getSnapshot() {
-      return deepClone(this._temp);
+    setStatic(name, value) {
+      __privateGet(this, _static)[name] = value;
+    }
+    getStatic(name) {
+      return __privateGet(this, _static)[name];
+    }
+    getSnapshot(opts) {
+      if ((opts == null ? void 0 : opts.deepClone) === true) {
+        return deepClone(__privateGet(this, _temp));
+      }
+      return { ...__privateGet(this, _temp) };
     }
     clear() {
-      this._temp = this._createTempStorage();
+      __privateSet(this, _temp, __privateMethod(this, _Store_instances, createTempStorage_fn).call(this));
     }
-    _createTempStorage() {
-      return deepClone(this._backUpDefaultStorage);
+    destroy() {
+      __privateSet(this, _temp, null);
+      __privateSet(this, _static, null);
     }
   }
+  _temp = new WeakMap();
+  _backUpDefaultStorage = new WeakMap();
+  _static = new WeakMap();
+  _Store_instances = new WeakSet();
+  createTempStorage_fn = function() {
+    return deepClone(__privateGet(this, _backUpDefaultStorage));
+  };
   function getViewScaleInfoFromSnapshot(snapshot) {
     const { activeStore } = snapshot;
     const sacelInfo = {
@@ -1329,6 +1511,15 @@ var __privateSet = (obj, member, value, setter) => {
     };
     return calcElementCenter(elemSize);
   }
+  function calcRadian(center, start, end) {
+    const startRadian = calcLineRadian(center, start);
+    const endRadian = calcLineRadian(center, end);
+    if (endRadian !== null && startRadian !== null) {
+      return endRadian - startRadian;
+    } else {
+      return 0;
+    }
+  }
   function calcLineRadian(center, p) {
     const x2 = p.x - center.x;
     const y2 = p.y - center.y;
@@ -1409,7 +1600,7 @@ var __privateSet = (obj, member, value, setter) => {
       let resultY = point.y;
       groupQueue.forEach((group) => {
         const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = group;
-        const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
         const temp = rotatePoint(center, { x: resultX, y: resultY }, parseAngleToRadian(angle2));
         resultX = temp.x;
         resultY = temp.y;
@@ -1450,12 +1641,14 @@ var __privateSet = (obj, member, value, setter) => {
     ];
   }
   function limitAngle(angle2) {
-    if (!(angle2 > 0 || angle2 < 0) || angle2 === 0) {
+    if (!(angle2 > 0 || angle2 < 0) || angle2 === 0 || angle2 === 360) {
       return 0;
     }
     let num = angle2 % 360;
     if (num < 0) {
       num += 360;
+    } else if (angle2 === 360) {
+      num = 0;
     }
     return num;
   }
@@ -1708,6 +1901,24 @@ var __privateSet = (obj, member, value, setter) => {
     _scan(uuid, elements);
     return groupQueue;
   }
+  function getGroupQueueByElementPosition(elements, position) {
+    var _a;
+    const groupQueue = [];
+    let currentElements = elements;
+    if (position.length > 1) {
+      for (let i = 0; i < position.length - 1; i++) {
+        const index = position[i];
+        const group = currentElements[index];
+        if ((group == null ? void 0 : group.type) === "group" && Array.isArray((_a = group == null ? void 0 : group.detail) == null ? void 0 : _a.children)) {
+          groupQueue.push(group);
+          currentElements = group.detail.children;
+        } else {
+          return null;
+        }
+      }
+    }
+    return groupQueue;
+  }
   function getElementSize(elem) {
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = elem;
     const size = { x: x2, y: y2, w: w2, h: h2, angle: angle2 };
@@ -1843,16 +2054,120 @@ var __privateSet = (obj, member, value, setter) => {
     _loop(elements);
     return result;
   }
+  function getElementPositionMapFromList(uuids, elements) {
+    const currentPosition = [];
+    const positionMap = {};
+    let over = false;
+    const _loop = (list) => {
+      var _a;
+      for (let i = 0; i < list.length; i++) {
+        if (over === true) {
+          break;
+        }
+        currentPosition.push(i);
+        const elem = list[i];
+        if (uuids.includes(elem.uuid)) {
+          positionMap[elem.uuid] = [...currentPosition];
+          if (Object.keys(positionMap).length === uuids.length) {
+            over = true;
+            break;
+          }
+        } else if (elem.type === "group") {
+          _loop(((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+        }
+        if (over) {
+          break;
+        }
+        currentPosition.pop();
+      }
+    };
+    _loop(elements);
+    return positionMap;
+  }
+  function isSameElementSize(elem1, elem2) {
+    return elem1.x === elem2.x && elem1.y === elem2.y && elem1.h === elem2.h && elem1.w === elem2.w && limitAngle(elem1.angle || 0) === limitAngle(elem2.angle || 0);
+  }
   function checkRectIntersect(rect1, rect2) {
-    const react1MinX = rect1.x;
-    const react1MinY = rect1.y;
-    const react1MaxX = rect1.x + rect1.w;
-    const react1MaxY = rect1.y + rect1.h;
-    const react2MinX = rect2.x;
-    const react2MinY = rect2.y;
-    const react2MaxX = rect2.x + rect2.w;
-    const react2MaxY = rect2.y + rect2.h;
-    return react1MinX <= react2MaxX && react1MaxX >= react2MinX && react1MinY <= react2MaxY && react1MaxY >= react2MinY;
+    const rect1MinX = rect1.x;
+    const rect1MinY = rect1.y;
+    const rect1MaxX = rect1.x + rect1.w;
+    const rect1MaxY = rect1.y + rect1.h;
+    const rect2MinX = rect2.x;
+    const rect2MinY = rect2.y;
+    const rect2MaxX = rect2.x + rect2.w;
+    const rect2MaxY = rect2.y + rect2.h;
+    return rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY;
+  }
+  function getElementVertexes(elemSize) {
+    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
+    return [
+      { x: x2, y: y2 },
+      { x: x2 + w2, y: y2 },
+      { x: x2 + w2, y: y2 + h2 },
+      { x: x2, y: y2 + h2 }
+    ];
+  }
+  function calcElementVertexes(elemSize) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    if (angle2 === 0) {
+      return getElementVertexes(elemSize);
+    }
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2 }), angle2);
+  }
+  function calcElementQueueVertexesQueueInGroup(groupQueue) {
+    const vesList = [];
+    let totalX = 0;
+    let totalY = 0;
+    const rotateActionList = [];
+    const elemQueue = [...groupQueue];
+    for (let i = 0; i < elemQueue.length; i++) {
+      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
+      totalX += x2;
+      totalY += y2;
+      let ves;
+      if (i === 0) {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
+        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        rotateActionList.push({
+          center: calcElementCenter(elemSize),
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      } else {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
+        ves = getElementVertexes(elemSize);
+        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
+          const { center, radian } = rotateActionList[aIdx];
+          ves = rotateVertexes(center, ves, radian);
+        }
+        const vesCenter = calcElementCenterFromVertexes(ves);
+        if (angle2 > 0 || angle2 < 0) {
+          const radian = parseAngleToRadian(angle2);
+          ves = rotateVertexes(vesCenter, ves, radian);
+        }
+        rotateActionList.push({
+          center: vesCenter,
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      }
+      vesList.push(ves);
+    }
+    return vesList;
+  }
+  function calcElementVertexesQueueInGroup(targetElem, opts) {
+    const { groupQueue } = opts;
+    if (!(groupQueue.length > 0)) {
+      return [calcElementVertexes(targetElem)];
+    }
+    const elemQueue = [...groupQueue, ...[targetElem]];
+    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    return vesList;
+  }
+  function calcElementVertexesInGroup(targetElem, opts) {
+    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+    const ves = vesList.pop();
+    return ves || null;
   }
   function calcViewScaleInfo(info, opts) {
     const { scale, offsetX, offsetY } = info;
@@ -1940,9 +2255,9 @@ var __privateSet = (obj, member, value, setter) => {
     ];
   }
   function isViewPointInElement(p, opts) {
-    const { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo } = 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, viewSizeInfo });
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo });
     const vertexes = rotateElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     if (vertexes.length >= 2) {
       ctx.beginPath();
@@ -1957,6 +2272,25 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return false;
   }
+  function isViewPointInElementSize(p, elemSize, opts) {
+    const vertexes = calcElementVertexes(elemSize);
+    return isViewPointInVertexes(p, vertexes, opts);
+  }
+  function isViewPointInVertexes(p, vertexes, opts) {
+    const xList = [vertexes[0].x, vertexes[1].x, vertexes[2].x, vertexes[3].x];
+    const yList = [vertexes[0].y, vertexes[1].y, vertexes[2].y, vertexes[3].y];
+    const mixX = Math.min(...xList);
+    const maxX = Math.max(...xList);
+    const mixY = Math.min(...yList);
+    const maxY = Math.max(...yList);
+    if (p.x > mixX && p.x < maxX && p.y > mixY && p.y < maxY) {
+      return true;
+    }
+    if ((opts == null ? void 0 : opts.includeBorder) === true && (p.x === mixX || p.x === maxX || p.y === mixY || p.y === maxY)) {
+      return true;
+    }
+    return false;
+  }
   function getViewPointAtElement(p, opts) {
     var _a, _b, _c;
     const { context2d: ctx, data, viewScaleInfo, viewSizeInfo, groupQueue } = opts;
@@ -1990,7 +2324,7 @@ var __privateSet = (obj, member, value, setter) => {
                 h: child.h,
                 angle: totalAngle + (child.angle || 0)
               };
-              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo, viewSizeInfo })) {
+              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo })) {
                 result.element = child;
                 if (gIdx < groupQueue.length - 1 || child.type !== "group") {
                   result.groupQueueIndex = gIdx;
@@ -2015,7 +2349,7 @@ var __privateSet = (obj, member, value, setter) => {
       if (((_c = elem == null ? void 0 : elem.operations) == null ? void 0 : _c.invisible) === true) {
         continue;
       }
-      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo })) {
+      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo })) {
         result.index = i;
         result.element = elem;
         break;
@@ -2027,7 +2361,7 @@ var __privateSet = (obj, member, value, setter) => {
     const { viewSizeInfo, viewScaleInfo } = opts;
     const { width, height } = viewSizeInfo;
     const { angle: angle2 } = elem;
-    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo });
     const ves = rotateElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     const viewSize = { x: 0, y: 0, w: width, h: height };
     const elemStartX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
@@ -2037,76 +2371,148 @@ var __privateSet = (obj, member, value, setter) => {
     const elemSize = { x: elemStartX, y: elemStartY, w: elemEndX - elemStartX, h: elemEndY - elemStartY };
     return checkRectIntersect(viewSize, elemSize);
   }
-  function getElementVertexes(elemSize) {
-    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
-    return [
-      { x: x2, y: y2 },
-      { x: x2 + w2, y: y2 },
-      { x: x2 + w2, y: y2 + h2 },
-      { x: x2, y: y2 + h2 }
-    ];
-  }
-  function calcElementVertexes(elemSize) {
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
-    if (angle2 === 0) {
-      return getElementVertexes(elemSize);
+  function calcElementOriginRectInfo(elemSize, opts) {
+    const { groupQueue } = opts;
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const top = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
+    const right = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
+    const bottom = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
+    const left = getCenterFromTwoPoints(vertexes[3], vertexes[0]);
+    const topLeft = vertexes[0];
+    const topRight = vertexes[1];
+    const bottomRight = vertexes[2];
+    const bottomLeft = vertexes[3];
+    const maxX = Math.max(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const maxY = Math.max(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const minX = Math.min(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const minY = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const center = {
+      x: (maxX + minX) / 2,
+      y: (maxY + minY) / 2
+    };
+    const rectInfo = {
+      center,
+      topLeft,
+      topRight,
+      bottomLeft,
+      bottomRight,
+      top,
+      right,
+      left,
+      bottom
+    };
+    return rectInfo;
+  }
+  function originRectInfoToRangeRectInfo(originRectInfo) {
+    const rangeMaxX = Math.max(
+      originRectInfo.topLeft.x,
+      originRectInfo.topRight.x,
+      originRectInfo.bottomRight.x,
+      originRectInfo.bottomLeft.x
+    );
+    const rangeMaxY = Math.max(
+      originRectInfo.topLeft.y,
+      originRectInfo.topRight.y,
+      originRectInfo.bottomRight.y,
+      originRectInfo.bottomLeft.y
+    );
+    const rangeMinX = Math.min(
+      originRectInfo.topLeft.x,
+      originRectInfo.topRight.x,
+      originRectInfo.bottomRight.x,
+      originRectInfo.bottomLeft.x
+    );
+    const rangeMinY = Math.min(
+      originRectInfo.topLeft.y,
+      originRectInfo.topRight.y,
+      originRectInfo.bottomRight.y,
+      originRectInfo.bottomLeft.y
+    );
+    const rangeCenter = { x: originRectInfo.center.x, y: originRectInfo.center.y };
+    const rangeTopLeft = { x: rangeMinX, y: rangeMinY };
+    const rangeTopRight = { x: rangeMaxX, y: rangeMinY };
+    const rangeBottomRight = { x: rangeMaxX, y: rangeMaxY };
+    const rangeBottomLeft = { x: rangeMinX, y: rangeMaxY };
+    const rangeTop = getCenterFromTwoPoints(rangeTopLeft, rangeTopRight);
+    const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
+    const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
+    const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
+    const rangeRectInfo = {
+      center: rangeCenter,
+      topLeft: rangeTopLeft,
+      topRight: rangeTopRight,
+      bottomLeft: rangeBottomLeft,
+      bottomRight: rangeBottomRight,
+      top: rangeTop,
+      right: rangeRight,
+      left: rangeLeft,
+      bottom: rangeBottom
+    };
+    return rangeRectInfo;
+  }
+  function calcElementViewRectInfo(elemSize, opts) {
+    const { groupQueue, viewScaleInfo, range } = opts;
+    const originRectInfo = calcElementOriginRectInfo(elemSize, { groupQueue });
+    const { center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = originRectInfo;
+    const viewRectInfo = {
+      center: calcViewPointSize(center, { viewScaleInfo }),
+      topLeft: calcViewPointSize(topLeft, { viewScaleInfo }),
+      topRight: calcViewPointSize(topRight, { viewScaleInfo }),
+      bottomLeft: calcViewPointSize(bottomLeft, { viewScaleInfo }),
+      bottomRight: calcViewPointSize(bottomRight, { viewScaleInfo }),
+      top: calcViewPointSize(top, { viewScaleInfo }),
+      right: calcViewPointSize(right, { viewScaleInfo }),
+      left: calcViewPointSize(left, { viewScaleInfo }),
+      bottom: calcViewPointSize(bottom, { viewScaleInfo })
+    };
+    if (range === true) {
+      const viewMaxX = Math.max(
+        viewRectInfo.topLeft.x,
+        viewRectInfo.topRight.x,
+        viewRectInfo.bottomRight.x,
+        viewRectInfo.bottomLeft.x
+      );
+      const viewMaxY = Math.max(
+        viewRectInfo.topLeft.y,
+        viewRectInfo.topRight.y,
+        viewRectInfo.bottomRight.y,
+        viewRectInfo.bottomLeft.y
+      );
+      const viewMinX = Math.min(
+        viewRectInfo.topLeft.x,
+        viewRectInfo.topRight.x,
+        viewRectInfo.bottomRight.x,
+        viewRectInfo.bottomLeft.x
+      );
+      const viewMinY = Math.min(
+        viewRectInfo.topLeft.y,
+        viewRectInfo.topRight.y,
+        viewRectInfo.bottomRight.y,
+        viewRectInfo.bottomLeft.y
+      );
+      const rangeCenter = { x: viewRectInfo.center.x, y: viewRectInfo.center.y };
+      const rangeTopLeft = { x: viewMinX, y: viewMinY };
+      const rangeTopRight = { x: viewMaxX, y: viewMinY };
+      const rangeBottomRight = { x: viewMaxX, y: viewMaxY };
+      const rangeBottomLeft = { x: viewMinX, y: viewMaxY };
+      const rangeTop = getCenterFromTwoPoints(rangeTopLeft, rangeTopRight);
+      const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
+      const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
+      const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
+      const rangeRectInfo = {
+        center: rangeCenter,
+        topLeft: rangeTopLeft,
+        topRight: rangeTopRight,
+        bottomLeft: rangeBottomLeft,
+        bottomRight: rangeBottomRight,
+        top: rangeTop,
+        right: rangeRight,
+        left: rangeLeft,
+        bottom: rangeBottom
+      };
+      return rangeRectInfo;
     }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
-  }
-  function calcElementQueueVertexesQueueInGroup(groupQueue) {
-    const vesList = [];
-    let totalX = 0;
-    let totalY = 0;
-    const rotateActionList = [];
-    const elemQueue = [...groupQueue];
-    for (let i = 0; i < elemQueue.length; i++) {
-      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
-      totalX += x2;
-      totalY += y2;
-      let ves;
-      if (i === 0) {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
-        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
-        rotateActionList.push({
-          center: calcElementCenter(elemSize),
-          angle: angle2,
-          radian: parseAngleToRadian(angle2)
-        });
-      } else {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
-        ves = getElementVertexes(elemSize);
-        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
-          const { center, radian } = rotateActionList[aIdx];
-          ves = rotateVertexes(center, ves, radian);
-        }
-        const vesCenter = calcElementCenterFromVertexes(ves);
-        if (angle2 > 0 || angle2 < 0) {
-          const radian = parseAngleToRadian(angle2);
-          ves = rotateVertexes(vesCenter, ves, radian);
-        }
-        rotateActionList.push({
-          center: vesCenter,
-          angle: angle2,
-          radian: parseAngleToRadian(angle2)
-        });
-      }
-      vesList.push(ves);
-    }
-    return vesList;
-  }
-  function calcElementVertexesQueueInGroup(targetElem, opts) {
-    const { groupQueue } = opts;
-    if (!(groupQueue.length > 0)) {
-      return [calcElementVertexes(targetElem)];
-    }
-    const elemQueue = [...groupQueue, ...[targetElem]];
-    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
-    return vesList;
-  }
-  function calcElementVertexesInGroup(targetElem, opts) {
-    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
-    const ves = vesList.pop();
-    return ves || null;
+    return viewRectInfo;
   }
   function createControllerElementSizeFromCenter(center, opts) {
     const { x: x2, y: y2 } = center;
@@ -2120,9 +2526,11 @@ var __privateSet = (obj, member, value, setter) => {
     };
   }
   function calcElementSizeController(elemSize, opts) {
-    const { groupQueue, controllerSize, viewScaleInfo } = opts;
+    const { groupQueue, controllerSize, viewScaleInfo, rotateControllerSize, rotateControllerPosition } = opts;
     const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    const rotateCtrlSize = rotateControllerSize;
+    const rotateCtrlPos = rotateControllerPosition;
     const ctrlGroupQueue = [
       ...[
         {
@@ -2143,6 +2551,16 @@ var __privateSet = (obj, member, value, setter) => {
       totalAngle += angle22;
     });
     const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const rotateElemVertexes = calcElementVertexesInGroup(
+      {
+        x: x2,
+        y: y2 - (rotateCtrlPos + rotateCtrlSize / 2) / viewScaleInfo.scale,
+        h: h2 + (rotateCtrlPos * 2 + rotateCtrlSize) / viewScaleInfo.scale,
+        w: w2,
+        angle: angle2
+      },
+      { groupQueue: [...groupQueue] }
+    );
     const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
     const rightCenter = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
     const bottomCenter = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
@@ -2151,6 +2569,10 @@ var __privateSet = (obj, member, value, setter) => {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
@@ -2163,47 +2585,207 @@ var __privateSet = (obj, member, value, setter) => {
     const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
     const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
     const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
+    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
+    const rotateCenter = getCenterFromTwoPoints(rotateElemVertexes[0], rotateElemVertexes[1]);
+    const tempRotateSizeRepairRatio = 1.1;
+    const rotateSize = createControllerElementSizeFromCenter(rotateCenter, {
+      size: rotateControllerSize * tempRotateSizeRepairRatio / viewScaleInfo.scale,
+      angle: totalAngle
+    });
+    const rotateVertexes2 = calcElementVertexes(rotateSize);
     const sizeController = {
+      originalElementCenter: calcElementCenter(elemSize),
+      originalElementSize: { ...elemSize },
       elementWrapper: vertexes,
       left: {
         type: "left",
         vertexes: leftVertexes,
-        center: leftCenter
+        center: leftCenter,
+        size: ctrlSize
+      },
+      right: {
+        type: "right",
+        vertexes: rightVertexes,
+        center: rightCenter,
+        size: ctrlSize
+      },
+      top: {
+        type: "top",
+        vertexes: topVertexes,
+        center: topCenter,
+        size: ctrlSize
+      },
+      bottom: {
+        type: "bottom",
+        vertexes: bottomVertexes,
+        center: bottomCenter,
+        size: ctrlSize
+      },
+      topLeft: {
+        type: "top-left",
+        vertexes: topLeftVertexes,
+        center: topLeftCenter,
+        size: ctrlSize
+      },
+      topRight: {
+        type: "top-right",
+        vertexes: topRightVertexes,
+        center: topRightCenter,
+        size: ctrlSize
+      },
+      bottomLeft: {
+        type: "bottom-left",
+        vertexes: bottomLeftVertexes,
+        center: bottomLeftCenter,
+        size: ctrlSize
+      },
+      bottomRight: {
+        type: "bottom-right",
+        vertexes: bottomRightVertexes,
+        center: bottomRightCenter,
+        size: ctrlSize
+      },
+      leftMiddle: {
+        type: "left-middle",
+        vertexes: leftMiddleVertexes,
+        center: leftCenter,
+        size: ctrlSize
+      },
+      rightMiddle: {
+        type: "right-middle",
+        vertexes: rightMiddleVertexes,
+        center: rightCenter,
+        size: ctrlSize
+      },
+      topMiddle: {
+        type: "top-middle",
+        vertexes: topMiddleVertexes,
+        center: topCenter,
+        size: ctrlSize
+      },
+      bottomMiddle: {
+        type: "bottom-middle",
+        vertexes: bottomMiddleVertexes,
+        center: bottomCenter,
+        size: ctrlSize
+      },
+      rotate: {
+        type: "rotate",
+        vertexes: rotateVertexes2,
+        center: rotateCenter,
+        size: rotateControllerSize
+      }
+    };
+    return sizeController;
+  }
+  function calcLayoutSizeController(layoutSize, opts) {
+    const { controllerSize, viewScaleInfo } = opts;
+    const ctrlSize = controllerSize && controllerSize > 0 ? controllerSize : 8;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(layoutSize, { viewScaleInfo });
+    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
+    const topCenter = { x: center.x, y: y2 };
+    const rightCenter = { x: x2 + w2, y: center.y };
+    const bottomCenter = { x: center.x, y: y2 + h2 };
+    const leftCenter = { x: x2, y: center.y };
+    const topLeftCenter = { x: x2, y: y2 };
+    const topRightCenter = { x: x2 + w2, y: y2 };
+    const bottomRightCenter = { x: x2 + w2, y: y2 + h2 };
+    const bottomLeftCenter = { x: x2, y: y2 + h2 };
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: 0 });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: 0 });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: 0 });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: 0 });
+    const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: 0 });
+    const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: 0 });
+    const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: 0 });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: 0 });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [topLeftVertexes[1], topRightVertexes[0], topRightVertexes[3], topLeftVertexes[2]];
+    const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
+    const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
+    const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
+    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
+    const sizeController = {
+      left: {
+        type: "left",
+        vertexes: leftVertexes,
+        center: leftCenter,
+        size: ctrlSize
       },
       right: {
         type: "right",
         vertexes: rightVertexes,
-        center: rightCenter
+        center: rightCenter,
+        size: ctrlSize
       },
       top: {
         type: "top",
         vertexes: topVertexes,
-        center: topCenter
+        center: topCenter,
+        size: ctrlSize
       },
       bottom: {
         type: "bottom",
         vertexes: bottomVertexes,
-        center: bottomCenter
+        center: bottomCenter,
+        size: ctrlSize
       },
       topLeft: {
         type: "top-left",
         vertexes: topLeftVertexes,
-        center: topLeftCenter
+        center: topLeftCenter,
+        size: ctrlSize
       },
       topRight: {
         type: "top-right",
         vertexes: topRightVertexes,
-        center: topRightCenter
+        center: topRightCenter,
+        size: ctrlSize
       },
       bottomLeft: {
         type: "bottom-left",
         vertexes: bottomLeftVertexes,
-        center: bottomLeftCenter
+        center: bottomLeftCenter,
+        size: ctrlSize
       },
       bottomRight: {
         type: "bottom-right",
         vertexes: bottomRightVertexes,
-        center: bottomRightCenter
+        center: bottomRightCenter,
+        size: ctrlSize
+      },
+      leftMiddle: {
+        type: "left-middle",
+        vertexes: leftMiddleVertexes,
+        center: leftCenter,
+        size: ctrlSize
+      },
+      rightMiddle: {
+        type: "right-middle",
+        vertexes: rightMiddleVertexes,
+        center: rightCenter,
+        size: ctrlSize
+      },
+      topMiddle: {
+        type: "top-middle",
+        vertexes: topMiddleVertexes,
+        center: topCenter,
+        size: ctrlSize
+      },
+      bottomMiddle: {
+        type: "bottom-middle",
+        vertexes: bottomMiddleVertexes,
+        center: bottomCenter,
+        size: ctrlSize
       }
     };
     return sizeController;
@@ -2290,7 +2872,6 @@ var __privateSet = (obj, member, value, setter) => {
     const arr = [];
     let current;
     let level = -1;
-    let inComponent = false;
     html2.replace(elemRegExp, (element, index) => {
       const isOpen = element.charAt(1) !== "/";
       const isComment = element.startsWith("<!--");
@@ -2310,7 +2891,7 @@ var __privateSet = (obj, member, value, setter) => {
       if (isOpen) {
         level++;
         current = parseElement(element);
-        if (!current.isVoid && !inComponent && nextChar && nextChar !== "<") {
+        if (!current.isVoid && true && nextChar && nextChar !== "<") {
           const content = html2.slice(start, html2.indexOf("<", start));
           if (content.trim()) {
             current.children.push({
@@ -2441,6 +3022,7 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return radian;
   }
+  const defaultText = "Text Element";
   function getDefaultElementDetailConfig() {
     const config = {
       boxSizing: "border-box",
@@ -2457,9 +3039,11 @@ var __privateSet = (obj, member, value, setter) => {
       textAlign: "left",
       verticalAlign: "top",
       fontSize: 16,
-      lineHeight: 20,
+      // lineHeight: 20,
       fontFamily: "sans-serif",
       fontWeight: 400,
+      minInlineSize: "auto",
+      wordBreak: "break-all",
       overflow: "hidden"
     };
     return config;
@@ -2470,24 +3054,22 @@ var __privateSet = (obj, member, value, setter) => {
     };
     return detail;
   }
-  function getDefaultElementCircleDetail(opts) {
+  function getDefaultElementCircleDetail() {
     const detail = {
       background: "#D9D9D9",
       radius: 0
     };
     return detail;
   }
-  function getDefaultElementTextDetail(opts) {
-    var _a;
+  function getDefaultElementTextDetail(elementSize) {
     const detailConfig = getDefaultElementDetailConfig();
-    const scale = ((_a = opts == null ? void 0 : opts.viewScaleInfo) == null ? void 0 : _a.scale) || 1;
     const detail = {
-      text: "Text Element",
+      text: defaultText,
       color: detailConfig.color,
       fontFamily: detailConfig.fontFamily,
       fontWeight: detailConfig.fontWeight,
-      lineHeight: detailConfig.fontSize * scale,
-      fontSize: detailConfig.fontSize * scale,
+      lineHeight: elementSize.w / defaultText.length,
+      fontSize: elementSize.w / defaultText.length,
       textAlign: "center",
       verticalAlign: "middle"
     };
@@ -2505,7 +3087,7 @@ var __privateSet = (obj, member, value, setter) => {
     };
     return detail;
   }
-  function getDefaultElementGroupDetail(opts) {
+  function getDefaultElementGroupDetail() {
     const detail = {
       children: [],
       background: "#D9D9D9",
@@ -2518,8 +3100,10 @@ var __privateSet = (obj, member, value, setter) => {
     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.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
-    if (typeof borderWidth2 !== "number") {
+    if (Array.isArray(borderWidth2)) {
       borderRadius2 = 0;
     }
     let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
@@ -2534,7 +3118,7 @@ var __privateSet = (obj, member, value, setter) => {
     if (typeof borderWidth2 === "number") {
       bw = (borderWidth2 || 0) * scale;
     }
-    if (boxSizing === "border-box") {
+    if (boxSizing === "border-box" && !hasBorderDash) {
       x2 = viewElem.x + bw / 2;
       y2 = viewElem.y + bw / 2;
       w2 = viewElem.w - bw;
@@ -2563,9 +3147,100 @@ var __privateSet = (obj, member, value, setter) => {
       radiusList
     };
   }
+  const doNum = (n) => {
+    return formatNumber(n, { decimalPlaces: 4 });
+  };
+  function resizeElementBaseDetail(elem, opts) {
+    const { detail } = elem;
+    const { xRatio, yRatio, maxRatio } = opts;
+    const middleRatio = (xRatio + yRatio) / 2;
+    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
+    if (typeof borderWidth2 === "number") {
+      detail.borderWidth = doNum(borderWidth2 * middleRatio);
+    } else if (Array.isArray(detail.borderWidth)) {
+      const bw = borderWidth2;
+      detail.borderWidth = [doNum(bw[0] * yRatio), doNum(bw[1] * xRatio), doNum(bw[2] * yRatio), doNum(bw[3] * xRatio)];
+    }
+    if (typeof borderRadius2 === "number") {
+      detail.borderRadius = doNum(borderRadius2 * middleRatio);
+    } else if (Array.isArray(detail.borderRadius)) {
+      const br = borderRadius2;
+      detail.borderRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+    }
+    if (Array.isArray(borderDash)) {
+      borderDash.forEach((dash, i) => {
+        detail.borderDash[i] = doNum(dash * maxRatio);
+      });
+    }
+    if (typeof shadowOffsetX === "number") {
+      detail.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+    }
+    if (typeof shadowOffsetY === "number") {
+      detail.shadowOffsetX = doNum(shadowOffsetY * maxRatio);
+    }
+    if (typeof shadowBlur === "number") {
+      detail.shadowOffsetX = doNum(shadowBlur * maxRatio);
+    }
+  }
+  function resizeElementBase(elem, opts) {
+    const { xRatio, yRatio } = opts;
+    const { x: x2, y: y2, w: w2, h: h2 } = elem;
+    elem.x = doNum(x2 * xRatio);
+    elem.y = doNum(y2 * yRatio);
+    elem.w = doNum(w2 * xRatio);
+    elem.h = doNum(h2 * yRatio);
+    resizeElementBaseDetail(elem, opts);
+  }
+  function resizeTextElementDetail(elem, opts) {
+    const { minRatio, maxRatio } = opts;
+    const { fontSize: fontSize2, lineHeight: lineHeight2 } = elem.detail;
+    const ratio = (minRatio + maxRatio) / 2;
+    if (fontSize2 && fontSize2 > 0) {
+      elem.detail.fontSize = doNum(fontSize2 * ratio);
+    }
+    if (lineHeight2 && lineHeight2 > 0) {
+      elem.detail.lineHeight = doNum(lineHeight2 * ratio);
+    }
+  }
+  function resizeElement(elem, opts) {
+    const { type } = elem;
+    resizeElementBase(elem, opts);
+    if (type === "circle") ;
+    else if (type === "text") {
+      resizeTextElementDetail(elem, opts);
+    } else if (type === "image") ;
+    else if (type === "svg") ;
+    else if (type === "html") ;
+    else if (type === "path") ;
+    else if (type === "group" && Array.isArray(elem.detail.children)) {
+      elem.detail.children.forEach((child) => {
+        resizeElement(child, opts);
+      });
+    }
+  }
+  function deepResizeGroupElement(elem, size) {
+    const resizeW = size.w && size.w > 0 ? size.w : elem.w;
+    const resizeH = size.h && size.h > 0 ? size.h : elem.h;
+    const xRatio = resizeW / elem.w;
+    const yRatio = resizeH / elem.h;
+    if (xRatio === yRatio && xRatio === 1) {
+      return elem;
+    }
+    const minRatio = Math.min(xRatio, yRatio);
+    const maxRatio = Math.max(xRatio, yRatio);
+    elem.w = resizeW;
+    elem.h = resizeH;
+    const opts = { xRatio, yRatio, minRatio, maxRatio };
+    if (elem.type === "group" && Array.isArray(elem.detail.children)) {
+      elem.detail.children.forEach((child) => {
+        resizeElement(child, opts);
+      });
+    }
+    resizeElementBaseDetail(elem, opts);
+    return elem;
+  }
   const defaultViewWidth = 200;
   const defaultViewHeight = 200;
-  const defaultDetail = getDefaultElementDetailConfig();
   function createElementSize(type, opts) {
     let x2 = 0;
     let y2 = 0;
@@ -2575,26 +3250,23 @@ var __privateSet = (obj, member, value, setter) => {
       const { viewScaleInfo, viewSizeInfo } = opts;
       const { scale, offsetLeft, offsetTop } = viewScaleInfo;
       const { width, height } = viewSizeInfo;
-      if (type === "text") {
-        const textDetail = getDefaultElementTextDetail();
-        w2 = defaultDetail.fontSize * scale * textDetail.text.length;
-        h2 = defaultDetail.fontSize * scale * 2;
+      const limitViewWidth = width / 4;
+      const limitViewHeight = height / 4;
+      if (defaultViewWidth >= limitViewWidth) {
+        w2 = limitViewWidth / scale;
       } else {
-        const limitViewWidth = width / 4;
-        const limitViewHeight = height / 4;
-        if (defaultViewWidth >= limitViewWidth) {
-          w2 = limitViewWidth / scale;
-        } else {
-          w2 = defaultViewWidth / scale;
-        }
-        if (defaultViewHeight >= limitViewHeight) {
-          h2 = limitViewHeight / scale;
-        } else {
-          h2 = defaultViewHeight / scale;
-        }
-        if (["circle", "svg", "image"].includes(type)) {
-          w2 = h2 = Math.max(w2, h2);
-        }
+        w2 = defaultViewWidth / scale;
+      }
+      if (defaultViewHeight >= limitViewHeight) {
+        h2 = limitViewHeight / scale;
+      } else {
+        h2 = defaultViewHeight / scale;
+      }
+      if (["circle", "svg", "image"].includes(type)) {
+        w2 = h2 = Math.max(w2, h2);
+      } else if (type === "text") {
+        const fontSize2 = w2 / defaultText.length;
+        h2 = fontSize2 * 2;
       }
       x2 = (0 - offsetLeft + width / 2 - w2 * scale / 2) / scale;
       y2 = (0 - offsetTop + height / 2 - h2 * scale / 2) / scale;
@@ -2608,16 +3280,14 @@ var __privateSet = (obj, member, value, setter) => {
     return elemSize;
   }
   function createElement(type, baseElem, opts) {
-    const elemSize = createElementSize(type, opts);
+    const elementSize = createElementSize(type, opts);
     let detail = {};
     if (type === "rect") {
       detail = getDefaultElementRectDetail();
     } else if (type === "circle") {
-      detail = getDefaultElementCircleDetail({
-        radius: elemSize.w
-      });
+      detail = getDefaultElementCircleDetail();
     } else if (type === "text") {
-      detail = getDefaultElementTextDetail(opts);
+      detail = getDefaultElementTextDetail(elementSize);
     } else if (type === "svg") {
       detail = getDefaultElementSVGDetail();
     } else if (type === "image") {
@@ -2626,7 +3296,7 @@ var __privateSet = (obj, member, value, setter) => {
       detail = getDefaultElementGroupDetail();
     }
     const elem = {
-      ...elemSize,
+      ...elementSize,
       ...baseElem,
       uuid: createUUID(),
       type,
@@ -2690,15 +3360,16 @@ var __privateSet = (obj, member, value, setter) => {
     return deleteElementInListByPosition(position, list);
   }
   function moveElementPosition(elements, opts) {
-    const { from, to } = opts;
+    const from = [...opts.from];
+    const to = [...opts.to];
     if (from.length === 0 || to.length === 0) {
-      return elements;
+      return { elements, from, to };
     }
     if (from.length <= to.length) {
       for (let i = 0; i < from.length; i++) {
         if (to[i] === from[i]) {
           if (i === from.length - 1) {
-            return elements;
+            return { elements, from, to };
           }
           continue;
         }
@@ -2708,18 +3379,59 @@ var __privateSet = (obj, member, value, setter) => {
     if (target) {
       const insterResult = insertElementToListByPosition(target, to, elements);
       if (!insterResult) {
-        return elements;
+        return { elements, from, to };
       }
       let trimDeletePosIndex = -1;
-      for (let i = 0; i < from.length; i++) {
-        if (!(to[i] >= 0)) {
-          break;
+      let isEffectToIndex = false;
+      if (from.length >= 1 && to.length >= 1) {
+        if (from.length <= to.length) {
+          if (from.length === 1) {
+            if (from[0] < to[0]) {
+              isEffectToIndex = true;
+            }
+          } else {
+            for (let i = 0; i < from.length; i++) {
+              if (from[i] === to[i]) {
+                if (from.length === from.length - 1) {
+                  isEffectToIndex = true;
+                  break;
+                }
+              } else {
+                break;
+              }
+            }
+          }
         }
-        if (to[i] === from[i]) {
-          continue;
+        if (from.length >= to.length) {
+          if (to.length === 1) {
+            if (to[0] < from[0]) {
+              isEffectToIndex = true;
+            }
+          } else {
+            for (let i = 0; i < to.length; i++) {
+              if (i === to.length - 1 && to[i] < from[i]) {
+                isEffectToIndex = true;
+              }
+              if (from[i] === to[i]) {
+                continue;
+              } else {
+                break;
+              }
+            }
+          }
         }
-        if (to[i] < from[i] && i == to.length - 1) {
-          trimDeletePosIndex = i;
+      }
+      if (isEffectToIndex === true) {
+        for (let i = 0; i < from.length; i++) {
+          if (!(to[i] >= 0)) {
+            break;
+          }
+          if (to[i] === from[i]) {
+            continue;
+          }
+          if (to[i] < from[i] && i == to.length - 1) {
+            trimDeletePosIndex = i;
+          }
         }
       }
       if (trimDeletePosIndex >= 0) {
@@ -2729,7 +3441,7 @@ var __privateSet = (obj, member, value, setter) => {
       }
       deleteElementInListByPosition(from, elements);
     }
-    return elements;
+    return { elements, from, to };
   }
   function mergeElement(originElem, updateContent) {
     var _a;
@@ -2762,20 +3474,637 @@ var __privateSet = (obj, member, value, setter) => {
     return originElem;
   }
   function updateElementInList(uuid, updateContent, elements) {
-    var _a;
+    var _a, _b;
     let targetElement = null;
     for (let i = 0; i < elements.length; i++) {
       const elem = elements[i];
       if (elem.uuid === uuid) {
+        if (elem.type === "group" && ((_a = elem.operations) == null ? void 0 : _a.deepResize) === true) {
+          if (updateContent.w && updateContent.w > 0 || updateContent.h && updateContent.h > 0) {
+            deepResizeGroupElement(elem, {
+              w: updateContent.w,
+              h: updateContent.h
+            });
+          }
+        }
         mergeElement(elem, updateContent);
         targetElement = elem;
         break;
       } else if (elem.type === "group") {
-        targetElement = updateElementInList(uuid, updateContent, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+        targetElement = updateElementInList(uuid, updateContent, ((_b = elem == null ? void 0 : elem.detail) == null ? void 0 : _b.children) || []);
       }
     }
     return targetElement;
   }
+  function updateElementInListByPosition(position, updateContent, elements) {
+    var _a;
+    const elem = findElementFromListByPosition(position, elements);
+    if (elem) {
+      if (elem.type === "group" && ((_a = elem.operations) == null ? void 0 : _a.deepResize) === true) {
+        if (updateContent.w && updateContent.w > 0 || updateContent.h && updateContent.h > 0) {
+          deepResizeGroupElement(elem, {
+            w: updateContent.w,
+            h: updateContent.h
+          });
+        }
+      }
+      mergeElement(elem, updateContent);
+    }
+    return elem;
+  }
+  function calcViewCenterContent(data, opts) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    let offsetX = 0;
+    let offsetY = 0;
+    let scale = 1;
+    let contentX = ((_b = (_a = data == null ? void 0 : data.elements) == null ? void 0 : _a[0]) == null ? void 0 : _b.x) || 0;
+    let contentY = ((_d = (_c = data == null ? void 0 : data.elements) == null ? void 0 : _c[0]) == null ? void 0 : _d.y) || 0;
+    let contentW = ((_f = (_e = data == null ? void 0 : data.elements) == null ? void 0 : _e[0]) == null ? void 0 : _f.w) || 0;
+    let contentH = ((_h = (_g = data == null ? void 0 : data.elements) == null ? void 0 : _g[0]) == null ? void 0 : _h.h) || 0;
+    const { width, height } = opts.viewSizeInfo;
+    if (data.layout && ((_j = (_i = data.layout) == null ? void 0 : _i.detail) == null ? void 0 : _j.overflow) === "hidden") {
+      contentX = 0;
+      contentY = 0;
+      contentW = data.layout.w || 0;
+      contentH = data.layout.h || 0;
+    } else {
+      data.elements.forEach((elem) => {
+        const elemSize = {
+          x: elem.x,
+          y: elem.y,
+          w: elem.w,
+          h: elem.h,
+          angle: elem.angle
+        };
+        if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
+          const ves = rotateElementVertexes(elemSize);
+          if (ves.length === 4) {
+            const xList = [ves[0].x, ves[1].x, ves[2].x, ves[3].x];
+            const yList = [ves[0].y, ves[1].y, ves[2].y, ves[3].y];
+            elemSize.x = Math.min(...xList);
+            elemSize.y = Math.min(...yList);
+            elemSize.w = Math.abs(Math.max(...xList) - Math.min(...xList));
+            elemSize.h = Math.abs(Math.max(...yList) - Math.min(...yList));
+          }
+        }
+        const areaStartX = Math.min(elemSize.x, contentX);
+        const areaStartY = Math.min(elemSize.y, contentY);
+        const areaEndX = Math.max(elemSize.x + elemSize.w, contentX + contentW);
+        const areaEndY = Math.max(elemSize.y + elemSize.h, contentY + contentH);
+        contentX = areaStartX;
+        contentY = areaStartY;
+        contentW = Math.abs(areaEndX - areaStartX);
+        contentH = Math.abs(areaEndY - areaStartY);
+      });
+    }
+    if (data.layout) {
+      const { x: x2, y: y2, w: w2, h: h2 } = data.layout;
+      if (is.x(x2) && is.y(y2) && is.w(w2) && is.h(h2)) {
+        contentX = Math.min(contentX, x2);
+        contentY = Math.min(contentY, y2);
+        contentW = Math.max(contentW, w2);
+        contentH = Math.max(contentH, h2);
+      }
+    }
+    if (contentW > 0 && contentH > 0) {
+      const scaleW = formatNumber(width / contentW, { decimalPlaces: 4 });
+      const scaleH = formatNumber(height / contentH, { decimalPlaces: 4 });
+      scale = Math.min(scaleW, scaleH, 1);
+      offsetX = (contentW * scale - width) / 2 / scale + contentX;
+      offsetY = (contentH * scale - height) / 2 / scale + contentY;
+    }
+    const result = {
+      offsetX: formatNumber(offsetX, { decimalPlaces: 0 }),
+      offsetY: formatNumber(offsetY, { decimalPlaces: 0 }),
+      scale
+    };
+    return result;
+  }
+  function calcViewCenter(opts) {
+    let x2 = 0;
+    let y2 = 0;
+    if (opts) {
+      const { viewScaleInfo, viewSizeInfo } = opts;
+      const { offsetLeft, offsetTop, scale } = viewScaleInfo;
+      const { width, height } = viewSizeInfo;
+      x2 = 0 - offsetLeft + width / scale / 2;
+      y2 = 0 - offsetTop + height / scale / 2;
+    }
+    const p = {
+      x: x2,
+      y: y2
+    };
+    return p;
+  }
+  function modifyElement(data, options) {
+    const { type } = options;
+    const content = { ...options.content };
+    if (type === "addElement") {
+      const opts = options;
+      const { element, position } = opts.content;
+      if ((position == null ? void 0 : position.length) > 0) {
+        insertElementToListByPosition(element, [...position], data.elements);
+      } else {
+        data.elements.push(element);
+      }
+    } else if (type === "deleteElement") {
+      const opts = options;
+      const { position } = opts.content;
+      deleteElementInListByPosition(position, data.elements);
+    } else if (type === "moveElement") {
+      const opts = options;
+      const { from, to } = opts.content;
+      const movedResult = moveElementPosition(data.elements, { from, to });
+      content.from = movedResult.from;
+      content.to = movedResult.to;
+      data.elements = movedResult.elements;
+    } else if (type === "updateElement") {
+      const opts = options;
+      const { position, afterModifiedElement } = opts.content;
+      updateElementInListByPosition(position, afterModifiedElement, data.elements);
+    }
+    return { data, content };
+  }
+  function _get(source, path, defaultValue = void 0) {
+    const keyList = path.split(".");
+    const result = keyList.reduce((obj, key) => {
+      return Object(obj)[key];
+    }, source);
+    return result === void 0 ? defaultValue : result;
+  }
+  function _set(obj, path, value) {
+    const keys = path.split(".");
+    if (typeof obj !== "object") return obj;
+    keys.reduce((o, k, i, _) => {
+      if (i === _.length - 1) {
+        o[k] = value;
+        return null;
+      } else if (k in o) {
+        return o[k];
+      } else {
+        o[k] = /^[0-9]{1,}$/.test(_[i + 1]) ? [] : {};
+        return o[k];
+      }
+    }, obj);
+    return obj;
+  }
+  function getModifiedElement(target, originElement) {
+    const modifiedElement = {};
+    const pathList = [];
+    const _walk = (t) => {
+      if (istype.json(t)) {
+        const keys = Object.keys(t);
+        keys.forEach((key) => {
+          pathList.push(key);
+          if (istype.json(t[key]) || istype.array(t[key])) {
+            _walk(t[key]);
+          } else {
+            const pathStr = pathList.join(".");
+            if (pathStr !== "uuid") {
+              const value = _get(originElement, pathStr);
+              _set(modifiedElement, pathList.join("."), value);
+            }
+          }
+          pathList.pop();
+        });
+      } else if (istype.array(t)) {
+        t.forEach((index) => {
+          pathList.push(index);
+          if (istype.json(t[index]) || istype.array(t[index])) {
+            _walk(t[index]);
+          } else {
+            const value = _get(originElement, pathList.join("."));
+            _set(modifiedElement, pathList.join("."), value);
+          }
+          pathList.pop();
+        });
+      }
+    };
+    _walk(target);
+    return modifiedElement;
+  }
+  const baseFontFamilyList = ["-apple-system", '"system-ui"', ' "Segoe UI"', " Roboto", '"Helvetica Neue"', "Arial", '"Noto Sans"', " sans-serif"];
+  function enhanceFontFamliy(fontFamily2) {
+    return [fontFamily2, ...baseFontFamilyList].join(", ");
+  }
+  function flatElementSize(elemSize, opts) {
+    const { groupQueue } = opts;
+    let { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    let totalAngle = 0;
+    groupQueue.forEach((group) => {
+      x2 += group.x;
+      y2 += group.y;
+      totalAngle += group.angle || 0;
+    });
+    totalAngle = limitAngle(totalAngle);
+    if (totalAngle === 0) {
+      return {
+        x: x2,
+        y: y2,
+        w: w2,
+        h: h2,
+        angle: angle2
+      };
+    }
+    totalAngle += elemSize.angle || 0;
+    totalAngle = limitAngle(totalAngle);
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const center = calcElementCenterFromVertexes(vertexes);
+    const start = rotatePoint(center, vertexes[0], parseAngleToRadian(0 - totalAngle));
+    x2 = start.x;
+    y2 = start.y;
+    return {
+      x: x2,
+      y: y2,
+      w: w2,
+      h: h2,
+      angle: totalAngle
+    };
+  }
+  function isValidElement(elem) {
+    var _a;
+    if (["rect", "circle"].includes(elem.type)) {
+      const detail = elem.detail;
+      if (!detail.background && !detail.borderWidth) {
+        return false;
+      }
+      if (detail.background === "transparent" && !detail.borderWidth) {
+        return false;
+      }
+    }
+    if (["group"].includes(elem.type)) {
+      const detail = elem.detail || {};
+      const { children } = detail;
+      if (!(children.length > 0) && !detail.background && !detail.borderWidth) {
+        return false;
+      }
+      if (!(children.length > 0) && detail.background === "transparent" && !detail.borderWidth) {
+        return false;
+      }
+    }
+    if (elem.type === "text") {
+      if (!elem.detail.text) {
+        return false;
+      }
+    }
+    if (elem.type === "image") {
+      if (!elem.detail.src) {
+        return false;
+      }
+    }
+    if (elem.type === "html") {
+      if (!elem.detail.html) {
+        return false;
+      }
+    }
+    if (elem.type === "svg") {
+      if (!elem.detail.svg) {
+        return false;
+      }
+    }
+    if (elem.type === "path") {
+      const detail = elem.detail;
+      if (!(((_a = detail == null ? void 0 : detail.commands) == null ? void 0 : _a.length) > 0)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function flatElementList(list) {
+    const elemeList = [];
+    const currentGroupQueue = [];
+    const _resetElemSize = (elem) => {
+      if (!isValidElement(elem)) {
+        return;
+      }
+      const newSize = flatElementSize(elem, { groupQueue: currentGroupQueue });
+      const resizeElem = {
+        ...elem,
+        ...newSize
+      };
+      elemeList.push(resizeElem);
+    };
+    const _walk = (elem) => {
+      var _a;
+      if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.invisible) === true) {
+        return;
+      }
+      if (elem.type === "group") {
+        const { detail } = elem;
+        const { children, ...restDetail } = detail;
+        _resetElemSize({ ...elem, ...{ detail: { ...restDetail, children: [] } } });
+        currentGroupQueue.push(elem);
+        children.forEach((child) => {
+          _walk(child);
+        });
+        currentGroupQueue.pop();
+      } else {
+        _resetElemSize(elem);
+      }
+    };
+    for (let i = 0; i < list.length; i++) {
+      const elem = list[i];
+      _walk(elem);
+    }
+    return elemeList;
+  }
+  function groupElementsByPosition(list, positions) {
+    if (positions.length > 1) {
+      let isValidPositions = true;
+      let lastIndexs = [];
+      for (let i = 1; i < positions.length; i++) {
+        const prevPosition = positions[i - 1];
+        const position = positions[i];
+        if (!(prevPosition.length > 0 && position.length > 0)) {
+          isValidPositions = false;
+          break;
+        }
+        if (prevPosition.length !== position.length) {
+          isValidPositions = false;
+          break;
+        }
+        const temp1 = [...prevPosition];
+        const temp2 = [...position];
+        const lastIndex1 = temp1.pop();
+        const lastIndex2 = temp2.pop();
+        if (i === 1 && typeof lastIndex1 === "number" && lastIndex1 >= 0) {
+          lastIndexs.push(lastIndex1);
+        }
+        if (typeof lastIndex2 === "number" && lastIndex2 >= 0) {
+          lastIndexs.push(lastIndex2);
+        }
+      }
+      if (isValidPositions !== true) {
+        console.error("[idraw]: The grouped elements are not siblings!");
+        return list;
+      }
+      lastIndexs.sort((a, b) => a - b);
+      const groupParentPosition = [...positions[0]].splice(0, positions[0].length - 1);
+      const groupChildren = [];
+      const groupPosition = [...groupParentPosition, lastIndexs[0]];
+      for (let i = 0; i < lastIndexs.length; i++) {
+        const position = [...groupParentPosition, lastIndexs[i]];
+        const elem = findElementFromListByPosition(position, list);
+        if (elem) {
+          groupChildren.push(elem);
+        }
+      }
+      const groupSize = calcElementListSize(groupChildren);
+      for (let i = 0; i < groupChildren.length; i++) {
+        const elem = groupChildren[i];
+        if (elem) {
+          elem.x -= groupSize.x;
+          elem.y -= groupSize.y;
+        }
+      }
+      for (let i = lastIndexs.length - 1; i >= 0; i--) {
+        const position = [...groupParentPosition, lastIndexs[i]];
+        deleteElementInListByPosition(position, list);
+      }
+      const group = {
+        name: "Group",
+        uuid: createUUID(),
+        type: "group",
+        ...groupSize,
+        detail: {
+          children: groupChildren
+        }
+      };
+      insertElementToListByPosition(group, groupPosition, list);
+    }
+    return list;
+  }
+  function ungroupElementsByPosition(list, position) {
+    var _a;
+    const elem = findElementFromListByPosition(position, list);
+    if (!(elem && (elem == null ? void 0 : elem.type) === "group" && Array.isArray((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children))) {
+      console.error("[idraw]: The ungrouped element is not a group element!");
+    }
+    const groupParentPosition = [...position].splice(0, position.length - 1);
+    const groupLastIndex = position[position.length - 1];
+    const { x: x2, y: y2 } = elem;
+    deleteElementInListByPosition(position, list);
+    elem.detail.children.forEach((child, i) => {
+      child.x += x2;
+      child.y += y2;
+      const elemPosition = [...groupParentPosition, groupLastIndex + i];
+      insertElementToListByPosition(child, elemPosition, list);
+    });
+    return list;
+  }
+  function calcPointMoveElementInGroup(start, end, groupQueue) {
+    let moveX = end.x - start.x;
+    let moveY = end.y - start.y;
+    const pointGroupQueue = [];
+    groupQueue.forEach((group) => {
+      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = group;
+      pointGroupQueue.push({
+        x: x2,
+        y: y2,
+        w: w2,
+        h: h2,
+        angle: 0 - angle2
+      });
+    });
+    if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
+      const startInGroup = rotatePointInGroup(start, pointGroupQueue);
+      const endInGroup = rotatePointInGroup(end, pointGroupQueue);
+      moveX = endInGroup.x - startInGroup.x;
+      moveY = endInGroup.y - startInGroup.y;
+    }
+    return {
+      moveX,
+      moveY
+    };
+  }
+  function merge(target, source) {
+    const result = target;
+    for (const key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        if (typeof source[key] === "object" && source[key] !== null && typeof result[key] === "object" && result[key] !== null) {
+          result[key] = merge(result[key], source[key]);
+        } else {
+          result[key] = source[key];
+        }
+      }
+    }
+    return target;
+  }
+  function omit(obj, keys) {
+    const result = { ...obj };
+    for (const key of keys) {
+      delete result[key];
+    }
+    return result;
+  }
+  function elementToBoxInfo(elem) {
+    const { x: x2, y: y2, w: w2, h: h2, detail } = elem;
+    const { borderWidth: borderWidth2, borderRadius: borderRadius2, boxSizing } = detail;
+    let btw = 0;
+    let brw = 0;
+    let bbw = 0;
+    let blw = 0;
+    let btlr = 0;
+    let btrr = 0;
+    let bblr = 0;
+    let bbrr = 0;
+    if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+      btw = borderWidth2;
+      brw = borderWidth2;
+      bbw = borderWidth2;
+      blw = borderWidth2;
+    } else if (Array.isArray(borderWidth2)) {
+      btw = is.positiveNum(borderWidth2[0]) ? borderWidth2[0] : 0;
+      brw = is.positiveNum(borderWidth2[1]) ? borderWidth2[0] : 0;
+      bbw = is.positiveNum(borderWidth2[2]) ? borderWidth2[0] : 0;
+      blw = is.positiveNum(borderWidth2[3]) ? borderWidth2[0] : 0;
+    }
+    if (typeof borderRadius2 === "number" && borderRadius2 > 0) {
+      btlr = borderRadius2;
+      btrr = borderRadius2;
+      bblr = borderRadius2;
+      bbrr = borderRadius2;
+    } else if (Array.isArray(borderRadius2)) {
+      btlr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+      btrr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+      bblr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+      bbrr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+    }
+    const p0 = { x: x2, y: y2 };
+    const p1 = { x: x2 + w2, y: y2 };
+    const p2 = { x: x2 + w2, y: y2 + h2 };
+    const p3 = { x: x2, y: y2 + h2 };
+    const p0s = { x: x2, y: y2 + btlr };
+    const p0e = { x: x2 + btlr, y: y2 };
+    const p1s = { x: x2 + w2 - btrr, y: y2 };
+    const p1e = { x: x2 + w2, y: y2 + btrr };
+    const p2s = { x: x2 + w2, y: y2 + h2 - bbrr };
+    const p2e = { x: x2 + w2 - bbrr, y: y2 + h2 };
+    const p3s = { x: x2 + bblr, y: y2 + h2 };
+    const p3e = { x: x2, y: y2 + h2 - bblr };
+    let op0 = { ...p0 };
+    let op1 = { ...p1 };
+    let op2 = { ...p2 };
+    let op3 = { ...p3 };
+    let op0s = { ...p0s };
+    let op0e = { ...p0e };
+    let op1s = { ...p1s };
+    let op1e = { ...p1e };
+    let op2s = { ...p2s };
+    let op2e = { ...p2e };
+    let op3s = { ...p3s };
+    let op3e = { ...p3e };
+    let ip0 = { ...p0 };
+    let ip1 = { ...p1 };
+    let ip2 = { ...p2 };
+    let ip3 = { ...p3 };
+    let ip0s = { ...p0s };
+    let ip0e = { ...p0e };
+    let ip1s = { ...p1s };
+    let ip1e = { ...p1e };
+    let ip2s = { ...p2s };
+    let ip2e = { ...p2e };
+    let ip3s = { ...p3s };
+    let ip3e = { ...p3e };
+    if (boxSizing === "border-box") {
+      ip0 = { x: ip0.x + blw, y: ip0.y + btw };
+      ip1 = { x: ip1.x - brw, y: ip1.y + btw };
+      ip2 = { x: ip2.x - brw, y: ip2.y - bbw };
+      ip3 = { x: ip3.x + blw, y: ip3.y - bbw };
+      ip0s = { x: ip0s.x + blw, y: ip0s.y + btw };
+      ip0e = { x: ip0e.x + blw, y: ip0e.y + btw };
+      ip1s = { x: ip1s.x - brw, y: ip1s.y + btw };
+      ip1e = { x: ip1e.x - brw, y: ip1e.y + btw };
+      ip2s = { x: ip2s.x - brw, y: ip2s.y - bbw };
+      ip2e = { x: ip2e.x - brw, y: ip2e.y - bbw };
+      ip3s = { x: ip3s.x + blw, y: ip3s.y - bbw };
+      ip3e = { x: ip3e.x + blw, y: ip3e.y - bbw };
+    } else if (boxSizing === "content-box") {
+      op0 = { x: op0.x - blw, y: op0.y - btw };
+      op1 = { x: op1.x + brw, y: op1.y - btw };
+      op2 = { x: op2.x + brw, y: op2.y + bbw };
+      op3 = { x: op3.x - blw, y: op3.y + bbw };
+      op0s = { x: op0s.x - blw, y: op0s.y - btw };
+      op0e = { x: op0e.x - blw, y: op0e.y - btw };
+      op1s = { x: op1s.x + brw, y: op1s.y - btw };
+      op1e = { x: op1e.x + brw, y: op1e.y - btw };
+      op2s = { x: op2s.x + brw, y: op2s.y + bbw };
+      op2e = { x: op2e.x + brw, y: op2e.y + bbw };
+      op3s = { x: op3s.x - blw, y: op3s.y + bbw };
+      op3e = { x: op3e.x - blw, y: op3e.y + bbw };
+    } else {
+      ip0 = { x: ip0.x + blw / 2, y: ip0.y + btw / 2 };
+      ip1 = { x: ip1.x - brw / 2, y: ip1.y + btw / 2 };
+      ip2 = { x: ip2.x - brw / 2, y: ip2.y - bbw / 2 };
+      ip3 = { x: ip3.x + blw / 2, y: ip3.y - bbw / 2 };
+      ip0s = { x: ip0s.x + blw / 2, y: ip0s.y + btw / 2 };
+      ip0e = { x: ip0e.x + blw / 2, y: ip0e.y + btw / 2 };
+      ip1s = { x: ip1s.x - brw / 2, y: ip1s.y + btw / 2 };
+      ip1e = { x: ip1e.x - brw / 2, y: ip1e.y + btw / 2 };
+      ip2s = { x: ip2s.x - brw / 2, y: ip2s.y - bbw / 2 };
+      ip2e = { x: ip2e.x - brw / 2, y: ip2e.y - bbw / 2 };
+      ip3s = { x: ip3s.x + blw / 2, y: ip3s.y - bbw / 2 };
+      ip3e = { x: ip3e.x + blw / 2, y: ip3e.y - bbw / 2 };
+      op0 = { x: op0.x - blw / 2, y: op0.y - btw / 2 };
+      op1 = { x: op1.x + brw / 2, y: op1.y - btw / 2 };
+      op2 = { x: op2.x + brw / 2, y: op2.y + bbw / 2 };
+      op3 = { x: op3.x - blw / 2, y: op3.y + bbw / 2 };
+      op0s = { x: op0s.x - blw / 2, y: op0s.y - btw / 2 };
+      op0e = { x: op0e.x - blw / 2, y: op0e.y - btw / 2 };
+      op1s = { x: op1s.x + brw / 2, y: op1s.y - btw / 2 };
+      op1e = { x: op1e.x + brw / 2, y: op1e.y - btw / 2 };
+      op2s = { x: op2s.x + brw / 2, y: op2s.y + bbw / 2 };
+      op2e = { x: op2e.x + brw / 2, y: op2e.y + bbw / 2 };
+      op3s = { x: op3s.x - blw / 2, y: op3s.y + bbw / 2 };
+      op3e = { x: op3e.x - blw / 2, y: op3e.y + bbw / 2 };
+    }
+    return {
+      btw,
+      brw,
+      bbw,
+      blw,
+      btlr,
+      btrr,
+      bblr,
+      bbrr,
+      p0,
+      p1,
+      p2,
+      p3,
+      p0s,
+      p0e,
+      p1s,
+      p1e,
+      p2s,
+      p2e,
+      p3s,
+      p3e,
+      op0,
+      op1,
+      op2,
+      op3,
+      op0s,
+      op0e,
+      op1s,
+      op1e,
+      op2s,
+      op2e,
+      op3s,
+      op3e,
+      ip0,
+      ip1,
+      ip2,
+      ip3,
+      ip0s,
+      ip0e,
+      ip1s,
+      ip1e,
+      ip2s,
+      ip2e,
+      ip3s,
+      ip3e
+    };
+  }
   exports.Context2D = Context2D;
   exports.EventEmitter = EventEmitter;
   exports.Store = Store;
@@ -2783,14 +4112,21 @@ var __privateSet = (obj, member, value, setter) => {
   exports.calcElementCenter = calcElementCenter;
   exports.calcElementCenterFromVertexes = calcElementCenterFromVertexes;
   exports.calcElementListSize = calcElementListSize;
+  exports.calcElementOriginRectInfo = calcElementOriginRectInfo;
   exports.calcElementQueueVertexesQueueInGroup = calcElementQueueVertexesQueueInGroup;
   exports.calcElementSizeController = calcElementSizeController;
   exports.calcElementVertexesInGroup = calcElementVertexesInGroup;
   exports.calcElementVertexesQueueInGroup = calcElementVertexesQueueInGroup;
+  exports.calcElementViewRectInfo = calcElementViewRectInfo;
   exports.calcElementsContextSize = calcElementsContextSize;
   exports.calcElementsViewInfo = calcElementsViewInfo;
+  exports.calcLayoutSizeController = calcLayoutSizeController;
+  exports.calcPointMoveElementInGroup = calcPointMoveElementInGroup;
+  exports.calcRadian = calcRadian;
   exports.calcSpeed = calcSpeed;
   exports.calcViewBoxSize = calcViewBoxSize;
+  exports.calcViewCenter = calcViewCenter;
+  exports.calcViewCenterContent = calcViewCenterContent;
   exports.calcViewElementSize = calcViewElementSize;
   exports.calcViewPointSize = calcViewPointSize;
   exports.calcViewScaleInfo = calcViewScaleInfo;
@@ -2808,20 +4144,28 @@ var __privateSet = (obj, member, value, setter) => {
   exports.createElement = createElement;
   exports.createOffscreenContext2D = createOffscreenContext2D;
   exports.createUUID = createUUID;
+  exports.debounce = debounce;
   exports.deepClone = deepClone;
+  exports.deepCloneData = deepCloneData;
+  exports.deepCloneElement = deepCloneElement;
+  exports.deepResizeGroupElement = deepResizeGroupElement;
   exports.delay = delay;
   exports.deleteElementInList = deleteElementInList;
   exports.deleteElementInListByPosition = deleteElementInListByPosition;
   exports.downloadFileFromText = downloadFileFromText;
   exports.downloadImageFromCanvas = downloadImageFromCanvas;
+  exports.elementToBoxInfo = elementToBoxInfo;
+  exports.enhanceFontFamliy = enhanceFontFamliy;
   exports.equalPoint = equalPoint;
   exports.equalTouchPoint = equalTouchPoint;
+  exports.filterCompactData = filterCompactData;
   exports.filterElementAsset = filterElementAsset;
   exports.findElementFromList = findElementFromList;
   exports.findElementFromListByPosition = findElementFromListByPosition;
   exports.findElementQueueFromListByPosition = findElementQueueFromListByPosition;
   exports.findElementsFromList = findElementsFromList;
   exports.findElementsFromListByPositions = findElementsFromListByPositions;
+  exports.flatElementList = flatElementList;
   exports.formatNumber = formatNumber;
   exports.generateHTML = generateHTML;
   exports.generateSVGPath = generateSVGPath;
@@ -2830,21 +4174,28 @@ var __privateSet = (obj, member, value, setter) => {
   exports.getDefaultElementRectDetail = getDefaultElementRectDetail;
   exports.getElemenetsAssetIds = getElemenetsAssetIds;
   exports.getElementPositionFromList = getElementPositionFromList;
+  exports.getElementPositionMapFromList = getElementPositionMapFromList;
   exports.getElementRotateVertexes = getElementRotateVertexes;
   exports.getElementSize = getElementSize;
   exports.getElementVertexes = getElementVertexes;
+  exports.getGroupQueueByElementPosition = getGroupQueueByElementPosition;
   exports.getGroupQueueFromList = getGroupQueueFromList;
+  exports.getModifiedElement = getModifiedElement;
   exports.getSelectedElementUUIDs = getSelectedElementUUIDs;
   exports.getViewPointAtElement = getViewPointAtElement;
   exports.getViewScaleInfoFromSnapshot = getViewScaleInfoFromSnapshot;
   exports.getViewSizeInfoFromSnapshot = getViewSizeInfoFromSnapshot;
+  exports.groupElementsByPosition = groupElementsByPosition;
   exports.insertElementToListByPosition = insertElementToListByPosition;
   exports.is = is;
   exports.isAssetId = isAssetId;
   exports.isColorStr = isColorStr;
   exports.isElementInView = isElementInView;
   exports.isResourceElement = isResourceElement;
+  exports.isSameElementSize = isSameElementSize;
   exports.isViewPointInElement = isViewPointInElement;
+  exports.isViewPointInElementSize = isViewPointInElementSize;
+  exports.isViewPointInVertexes = isViewPointInVertexes;
   exports.istype = istype;
   exports.limitAngle = limitAngle;
   exports.loadHTML = loadHTML;
@@ -2852,9 +4203,13 @@ var __privateSet = (obj, member, value, setter) => {
   exports.loadSVG = loadSVG;
   exports.matrixToAngle = matrixToAngle;
   exports.matrixToRadian = matrixToRadian;
+  exports.merge = merge;
   exports.mergeElementAsset = mergeElementAsset;
   exports.mergeHexColorAlpha = mergeHexColorAlpha;
+  exports.modifyElement = modifyElement;
   exports.moveElementPosition = moveElementPosition;
+  exports.omit = omit;
+  exports.originRectInfoToRangeRectInfo = originRectInfoToRangeRectInfo;
   exports.parseAngleToRadian = parseAngleToRadian;
   exports.parseFileToBase64 = parseFileToBase64;
   exports.parseFileToText = parseFileToText;
@@ -2872,7 +4227,9 @@ var __privateSet = (obj, member, value, setter) => {
   exports.throttle = throttle;
   exports.toColorHexNum = toColorHexNum;
   exports.toColorHexStr = toColorHexStr;
+  exports.ungroupElementsByPosition = ungroupElementsByPosition;
   exports.updateElementInList = updateElementInList;
+  exports.updateElementInListByPosition = updateElementInListByPosition;
   exports.vaildPoint = vaildPoint;
   exports.vaildTouchPoint = vaildTouchPoint;
   exports.validateElements = validateElements;