@idraw/util 0.4.0-beta.3 → 0.4.0-beta.31

package/dist/index.global.js

@@ -17,8 +17,12 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
 
-  var _ctx, _opts;
+  var _ctx, _opts, _listeners, _temp, _backUpDefaultStorage, _createTempStorage, createTempStorage_fn;
   function compose(middleware) {
     return function(context, next) {
       return dispatch(0);
@@ -47,7 +51,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,20 +60,34 @@ 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 { fileName, type = "image/jpeg" } = opts;
     const stream = canvas.toDataURL(type);
-    const downloadLink = document.createElement("a");
+    let downloadLink = document.createElement("a");
     downloadLink.href = stream;
-    downloadLink.download = filename;
-    const downloadClickEvent = document.createEvent("MouseEvents");
-    downloadClickEvent.initEvent("click", true, false);
-    downloadLink.dispatchEvent(downloadClickEvent);
+    downloadLink.download = fileName;
+    downloadLink.click();
+    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];
@@ -122,6 +140,23 @@ var __privateSet = (obj, member, value, setter) => {
       reader.readAsText(file);
     });
   }
+  function parseTextToBlobURL(text2) {
+    const bytes = new TextEncoder().encode(text2);
+    const blob = new Blob([bytes], {
+      type: "text/plain;charset=utf-8"
+    });
+    const blobURL = window.URL.createObjectURL(blob);
+    return blobURL;
+  }
+  function downloadFileFromText(text2, opts) {
+    const { fileName } = opts;
+    const blobURL = parseTextToBlobURL(text2);
+    let downloadLink = document.createElement("a");
+    downloadLink.href = blobURL;
+    downloadLink.download = fileName;
+    downloadLink.click();
+    downloadLink = null;
+  }
   function toColorHexNum(color2) {
     return parseInt(color2.replace(/^\#/, "0x"));
   }
@@ -406,6 +441,19 @@ 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 is$1(target) {
     return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
   }
@@ -442,7 +490,7 @@ var __privateSet = (obj, member, value, setter) => {
           const assetUUID = createAssetId(html2);
           if (!assets[assetUUID]) {
             assets[assetUUID] = {
-              type: "svg",
+              type: "html",
               value: html2
             };
           }
@@ -463,6 +511,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();
@@ -485,6 +607,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";
     },
@@ -790,6 +915,9 @@ 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;
@@ -798,6 +926,7 @@ var __privateSet = (obj, member, value, setter) => {
       __privateAdd(this, _opts, void 0);
       __privateSet(this, _ctx, ctx);
       __privateSet(this, _opts, { ...{ devicePixelRatio: 1, offscreenCanvas: null }, ...opts });
+      this.$resetFont();
     }
     $undoPixelRatio(num) {
       return num / __privateGet(this, _opts).devicePixelRatio;
@@ -808,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) {
@@ -817,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;
     }
@@ -1091,55 +1230,78 @@ var __privateSet = (obj, member, value, setter) => {
     return context2d;
   }
   function createBoardContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen } = opts;
+    const { width, height, devicePixelRatio, offscreen, createCustomContext2D } = opts;
     const ctxOpts = {
       width,
       height,
       devicePixelRatio
     };
+    const ctx = canvas.getContext("2d");
+    if (createCustomContext2D) {
+      const viewContext = createCustomContext2D(ctxOpts);
+      const overlayContext = createCustomContext2D(ctxOpts);
+      const underlayContext = createCustomContext2D(ctxOpts);
+      const boardContext = createContext2D({ ctx, ...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,
+        drawView
+      };
+      return content;
+    }
     if (offscreen === true) {
-      const ctx = canvas.getContext("2d");
       const viewContext = createOffscreenContext2D(ctxOpts);
-      const helperContext = createOffscreenContext2D(ctxOpts);
-      const underContext = createOffscreenContext2D(ctxOpts);
+      const overlayContext = createOffscreenContext2D(ctxOpts);
+      const underlayContext = 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(underlayContext.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);
+        boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
+        underlayContext.clearRect(0, 0, w2, h2);
         viewContext.clearRect(0, 0, w2, h2);
-        helperContext.clearRect(0, 0, w2, h2);
+        overlayContext.clearRect(0, 0, w2, h2);
       };
       const content = {
-        underContext,
+        underlayContext,
         viewContext,
-        helperContext,
+        overlayContext,
         boardContext,
         drawView
       };
       return content;
     } else {
-      const ctx = canvas.getContext("2d");
       const viewContext = createContext2D(ctxOpts);
-      const helperContext = createContext2D(ctxOpts);
-      const underContext = createContext2D(ctxOpts);
+      const overlayContext = createContext2D(ctxOpts);
+      const underlayContext = 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(underlayContext.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);
+        boardContext.drawImage(overlayContext.canvas, 0, 0, width, height);
+        underlayContext.clearRect(0, 0, width, height);
         viewContext.clearRect(0, 0, width, height);
-        helperContext.clearRect(0, 0, width, height);
+        overlayContext.clearRect(0, 0, width, height);
       };
       const content = {
-        underContext,
+        underlayContext,
         viewContext,
-        helperContext,
+        overlayContext,
         boardContext,
         drawView
       };
@@ -1148,20 +1310,21 @@ var __privateSet = (obj, member, value, setter) => {
   }
   class EventEmitter {
     constructor() {
-      this._listeners = /* @__PURE__ */ new Map();
+      __privateAdd(this, _listeners, void 0);
+      __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) {
@@ -1170,11 +1333,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);
@@ -1185,15 +1348,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);
@@ -1226,25 +1396,37 @@ var __privateSet = (obj, member, value, setter) => {
   }
   class Store {
     constructor(opts) {
-      this._backUpDefaultStorage = deepClone(opts.defaultStorage);
-      this._temp = this._createTempStorage();
+      __privateAdd(this, _createTempStorage);
+      __privateAdd(this, _temp, void 0);
+      __privateAdd(this, _backUpDefaultStorage, void 0);
+      __privateSet(this, _backUpDefaultStorage, deepClone(opts.defaultStorage));
+      __privateSet(this, _temp, __privateMethod(this, _createTempStorage, createTempStorage_fn).call(this));
     }
     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);
+    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, _createTempStorage, createTempStorage_fn).call(this));
     }
-    _createTempStorage() {
-      return deepClone(this._backUpDefaultStorage);
+    destroy() {
+      __privateSet(this, _temp, null);
     }
   }
+  _temp = new WeakMap();
+  _backUpDefaultStorage = new WeakMap();
+  _createTempStorage = new WeakSet();
+  createTempStorage_fn = function() {
+    return deepClone(__privateGet(this, _backUpDefaultStorage));
+  };
   function getViewScaleInfoFromSnapshot(snapshot) {
     const { activeStore } = snapshot;
     const sacelInfo = {
@@ -1313,6 +1495,21 @@ var __privateSet = (obj, member, value, setter) => {
     };
     return calcElementCenter(elemSize);
   }
+  function calcRadian(center, start, end) {
+    const startAngle = calcLineRadian(center, start);
+    const endAngle = calcLineRadian(center, end);
+    if (endAngle !== null && startAngle !== null) {
+      if (startAngle > Math.PI * 3 / 2 && endAngle < Math.PI / 2) {
+        return endAngle + (Math.PI * 2 - startAngle);
+      } else if (endAngle > Math.PI * 3 / 2 && startAngle < Math.PI / 2) {
+        return startAngle + (Math.PI * 2 - endAngle);
+      } else {
+        return endAngle - startAngle;
+      }
+    } else {
+      return 0;
+    }
+  }
   function calcLineRadian(center, p) {
     const x2 = p.x - center.x;
     const y2 = p.y - center.y;
@@ -1692,6 +1889,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 };
@@ -1828,15 +2043,86 @@ var __privateSet = (obj, member, value, setter) => {
     return result;
   }
   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, 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;
   }
   function calcViewScaleInfo(info, opts) {
     const { scale, offsetX, offsetY } = info;
@@ -1924,9 +2210,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();
@@ -1941,6 +2227,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;
@@ -2011,7 +2316,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);
@@ -2021,76 +2326,244 @@ 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);
-    }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
+  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 viewRectInfo;
+  }
+  function calcElementViewRectInfoMap(elemSize, opts) {
+    const { groupQueue, viewScaleInfo } = 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 })
+    };
+    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 {
+      originRectInfo,
+      // viewRectInfo,
+      rangeRectInfo
+    };
   }
-  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);
+  function sortElementsViewVisiableInfoMap(elements, opts) {
+    const visibleInfoMap = {};
+    const currentPosition = [];
+    const _walk = (elem) => {
+      const baseInfo = {
+        isVisibleInView: true,
+        isGroup: elem.type === "group",
+        position: [...currentPosition]
+      };
+      let originRectInfo = null;
+      const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
+      originRectInfo = calcElementOriginRectInfo(elem, {
+        groupQueue: groupQueue || []
+      });
+      visibleInfoMap[elem.uuid] = {
+        ...baseInfo,
+        ...{
+          originRectInfo,
+          rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
         }
-        rotateActionList.push({
-          center: vesCenter,
-          angle: angle2,
-          radian: parseAngleToRadian(angle2)
+      };
+      if (elem.type === "group") {
+        elem.detail.children.forEach((ele, i) => {
+          currentPosition.push(i);
+          _walk(ele);
+          currentPosition.pop();
         });
       }
-      vesList.push(ves);
+    };
+    elements.forEach((elem, index) => {
+      currentPosition.push(index);
+      _walk(elem);
+      currentPosition.pop();
+    });
+    return updateViewVisibleInfoMapStatus(visibleInfoMap, opts);
+  }
+  function isRangeRectInfoCollide(info1, info2) {
+    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    if (rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY || rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY) {
+      return true;
     }
-    return vesList;
+    return false;
   }
-  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 updateViewVisibleInfoMapStatus(viewVisibleInfoMap, opts) {
+    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+    let visibleCount = 0;
+    let invisibleCount = 0;
+    Object.keys(viewVisibleInfoMap).forEach((uuid) => {
+      const info = viewVisibleInfoMap[uuid];
+      info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+      info.isVisibleInView ? visibleCount++ : invisibleCount++;
+    });
+    return { viewVisibleInfoMap, visibleCount, invisibleCount };
   }
-  function calcElementVertexesInGroup(targetElem, opts) {
-    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
-    const ves = vesList.pop();
-    return ves || null;
+  function calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { width, height } = viewSizeInfo;
+    const x2 = 0 - offsetLeft / scale;
+    const y2 = 0 - offsetTop / scale;
+    const w2 = width / scale;
+    const h2 = height / scale;
+    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
+    const topLeft = { x: x2, y: y2 };
+    const topRight = { x: x2 + w2, y: y2 };
+    const bottomLeft = { x: x2, y: y2 + h2 };
+    const bottomRight = { x: x2 + w2, y: y2 + h2 };
+    const left = { x: x2, y: center.y };
+    const top = { x: center.x, y: y2 };
+    const right = { x: x2 + w2, y: center.y };
+    const bottom = { x: center.x, y: y2 + h2 };
+    const rectInfo = {
+      center,
+      topLeft,
+      topRight,
+      bottomLeft,
+      bottomRight,
+      left,
+      top,
+      right,
+      bottom
+    };
+    return rectInfo;
   }
   function createControllerElementSizeFromCenter(center, opts) {
     const { x: x2, y: y2 } = center;
@@ -2127,6 +2600,16 @@ var __privateSet = (obj, member, value, setter) => {
       totalAngle += angle22;
     });
     const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const rotateElemVertexes = calcElementVertexesInGroup(
+      {
+        x: x2 - ctrlSize * 2,
+        y: y2 - ctrlSize * 2,
+        h: h2 + ctrlSize * 4,
+        w: w2 + ctrlSize * 4,
+        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]);
@@ -2135,6 +2618,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 });
@@ -2147,6 +2634,13 @@ 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 rotateSize = createControllerElementSizeFromCenter(rotateCenter, { size: ctrlSize, angle: totalAngle });
+    const rotateVertexes2 = calcElementVertexes(rotateSize);
     const sizeController = {
       elementWrapper: vertexes,
       left: {
@@ -2188,6 +2682,128 @@ var __privateSet = (obj, member, value, setter) => {
         type: "bottom-right",
         vertexes: bottomRightVertexes,
         center: bottomRightCenter
+      },
+      leftMiddle: {
+        type: "left-middle",
+        vertexes: leftMiddleVertexes,
+        center: leftCenter
+      },
+      rightMiddle: {
+        type: "right-middle",
+        vertexes: rightMiddleVertexes,
+        center: rightCenter
+      },
+      topMiddle: {
+        type: "top-middle",
+        vertexes: topMiddleVertexes,
+        center: topCenter
+      },
+      bottomMiddle: {
+        type: "bottom-middle",
+        vertexes: bottomMiddleVertexes,
+        center: bottomCenter
+      },
+      rotate: {
+        type: "rotate",
+        vertexes: rotateVertexes2,
+        center: rotateCenter
+      }
+    };
+    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
+      },
+      right: {
+        type: "right",
+        vertexes: rightVertexes,
+        center: rightCenter
+      },
+      top: {
+        type: "top",
+        vertexes: topVertexes,
+        center: topCenter
+      },
+      bottom: {
+        type: "bottom",
+        vertexes: bottomVertexes,
+        center: bottomCenter
+      },
+      topLeft: {
+        type: "top-left",
+        vertexes: topLeftVertexes,
+        center: topLeftCenter
+      },
+      topRight: {
+        type: "top-right",
+        vertexes: topRightVertexes,
+        center: topRightCenter
+      },
+      bottomLeft: {
+        type: "bottom-left",
+        vertexes: bottomLeftVertexes,
+        center: bottomLeftCenter
+      },
+      bottomRight: {
+        type: "bottom-right",
+        vertexes: bottomRightVertexes,
+        center: bottomRightCenter
+      },
+      leftMiddle: {
+        type: "left-middle",
+        vertexes: leftMiddleVertexes,
+        center: leftCenter
+      },
+      rightMiddle: {
+        type: "right-middle",
+        vertexes: rightMiddleVertexes,
+        center: rightCenter
+      },
+      topMiddle: {
+        type: "top-middle",
+        vertexes: topMiddleVertexes,
+        center: topCenter
+      },
+      bottomMiddle: {
+        type: "bottom-middle",
+        vertexes: bottomMiddleVertexes,
+        center: bottomCenter
       }
     };
     return sizeController;
@@ -2425,6 +3041,7 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return radian;
   }
+  const defaultText = "Text Element";
   function getDefaultElementDetailConfig() {
     const config = {
       boxSizing: "border-box",
@@ -2441,9 +3058,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;
@@ -2454,24 +3073,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"
     };
@@ -2489,7 +3106,7 @@ var __privateSet = (obj, member, value, setter) => {
     };
     return detail;
   }
-  function getDefaultElementGroupDetail(opts) {
+  function getDefaultElementGroupDetail() {
     const detail = {
       children: [],
       background: "#D9D9D9",
@@ -2501,9 +3118,10 @@ var __privateSet = (obj, member, value, setter) => {
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2 } = viewElem.detail;
+    let { borderRadius: borderRadius2, borderDash } = viewElem.detail;
+    const hasBorderDash = Array.isArray(borderDash) && borderDash.length > 0;
     const { boxSizing = defaultElemConfig.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;
@@ -2518,7 +3136,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;
@@ -2547,9 +3165,105 @@ 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;
@@ -2559,26 +3273,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;
@@ -2592,16 +3303,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") {
@@ -2610,7 +3319,7 @@ var __privateSet = (obj, member, value, setter) => {
       detail = getDefaultElementGroupDetail();
     }
     const elem = {
-      ...elemSize,
+      ...elementSize,
       ...baseElem,
       uuid: createUUID(),
       type,
@@ -2674,15 +3383,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;
         }
@@ -2692,18 +3402,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) {
@@ -2713,7 +3464,7 @@ var __privateSet = (obj, member, value, setter) => {
       }
       deleteElementInListByPosition(from, elements);
     }
-    return elements;
+    return { elements, from, to };
   }
   function mergeElement(originElem, updateContent) {
     var _a;
@@ -2746,20 +3497,341 @@ 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;
+  }
   exports.Context2D = Context2D;
   exports.EventEmitter = EventEmitter;
   exports.Store = Store;
@@ -2767,18 +3839,26 @@ 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.calcElementViewRectInfoMap = calcElementViewRectInfoMap;
   exports.calcElementsContextSize = calcElementsContextSize;
   exports.calcElementsViewInfo = calcElementsViewInfo;
+  exports.calcLayoutSizeController = calcLayoutSizeController;
+  exports.calcRadian = calcRadian;
   exports.calcSpeed = calcSpeed;
   exports.calcViewBoxSize = calcViewBoxSize;
+  exports.calcViewCenter = calcViewCenter;
+  exports.calcViewCenterContent = calcViewCenterContent;
   exports.calcViewElementSize = calcViewElementSize;
   exports.calcViewPointSize = calcViewPointSize;
   exports.calcViewScaleInfo = calcViewScaleInfo;
   exports.calcViewVertexes = calcViewVertexes;
+  exports.calcVisibleOriginCanvasRectInfo = calcVisibleOriginCanvasRectInfo;
   exports.check = check;
   exports.checkRectIntersect = checkRectIntersect;
   exports.colorNameToHex = colorNameToHex;
@@ -2792,19 +3872,26 @@ var __privateSet = (obj, member, value, setter) => {
   exports.createElement = createElement;
   exports.createOffscreenContext2D = createOffscreenContext2D;
   exports.createUUID = createUUID;
+  exports.debounce = debounce;
   exports.deepClone = deepClone;
+  exports.deepCloneElement = deepCloneElement;
+  exports.deepResizeGroupElement = deepResizeGroupElement;
   exports.delay = delay;
   exports.deleteElementInList = deleteElementInList;
   exports.deleteElementInListByPosition = deleteElementInListByPosition;
+  exports.downloadFileFromText = downloadFileFromText;
   exports.downloadImageFromCanvas = downloadImageFromCanvas;
+  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;
@@ -2816,7 +3903,9 @@ var __privateSet = (obj, member, value, setter) => {
   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;
@@ -2828,6 +3917,8 @@ var __privateSet = (obj, member, value, setter) => {
   exports.isElementInView = isElementInView;
   exports.isResourceElement = isResourceElement;
   exports.isViewPointInElement = isViewPointInElement;
+  exports.isViewPointInElementSize = isViewPointInElementSize;
+  exports.isViewPointInVertexes = isViewPointInVertexes;
   exports.istype = istype;
   exports.limitAngle = limitAngle;
   exports.loadHTML = loadHTML;
@@ -2837,7 +3928,9 @@ var __privateSet = (obj, member, value, setter) => {
   exports.matrixToRadian = matrixToRadian;
   exports.mergeElementAsset = mergeElementAsset;
   exports.mergeHexColorAlpha = mergeHexColorAlpha;
+  exports.modifyElement = modifyElement;
   exports.moveElementPosition = moveElementPosition;
+  exports.originRectInfoToRangeRectInfo = originRectInfoToRangeRectInfo;
   exports.parseAngleToRadian = parseAngleToRadian;
   exports.parseFileToBase64 = parseFileToBase64;
   exports.parseFileToText = parseFileToText;
@@ -2852,10 +3945,13 @@ var __privateSet = (obj, member, value, setter) => {
   exports.rotatePointInGroup = rotatePointInGroup;
   exports.rotateVertexes = rotateVertexes;
   exports.sortDataAsserts = sortDataAsserts;
+  exports.sortElementsViewVisiableInfoMap = sortElementsViewVisiableInfoMap;
   exports.throttle = throttle;
   exports.toColorHexNum = toColorHexNum;
   exports.toColorHexStr = toColorHexStr;
   exports.updateElementInList = updateElementInList;
+  exports.updateElementInListByPosition = updateElementInListByPosition;
+  exports.updateViewVisibleInfoMapStatus = updateViewVisibleInfoMapStatus;
   exports.vaildPoint = vaildPoint;
   exports.vaildTouchPoint = vaildTouchPoint;
   exports.validateElements = validateElements;