@idraw/util 0.4.0-beta.1 → 0.4.0-beta.11

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();
@@ -808,6 +930,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) {
@@ -1090,15 +1215,39 @@ var __privateSet = (obj, member, value, setter) => {
     });
     return context2d;
   }
-  function createViewContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen } = opts;
+  function createBoardContent(canvas, 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 helperContext = createCustomContext2D(ctxOpts);
+      const underContext = createCustomContext2D(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;
+    }
     if (offscreen === true) {
-      const ctx = canvas.getContext("2d");
       const viewContext = createOffscreenContext2D(ctxOpts);
       const helperContext = createOffscreenContext2D(ctxOpts);
       const underContext = createOffscreenContext2D(ctxOpts);
@@ -1122,7 +1271,6 @@ var __privateSet = (obj, member, value, setter) => {
       };
       return content;
     } else {
-      const ctx = canvas.getContext("2d");
       const viewContext = createContext2D(ctxOpts);
       const helperContext = createContext2D(ctxOpts);
       const underContext = createContext2D(ctxOpts);
@@ -1148,20 +1296,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 +1319,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 +1334,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 +1382,34 @@ 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);
+      return deepClone(__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 = {
@@ -1505,6 +1670,58 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return isValid;
   }
+  function calcElementListSize(list) {
+    var _a;
+    const area = { x: 0, y: 0, w: 0, h: 0 };
+    let prevElemSize = null;
+    for (let i = 0; i < list.length; i++) {
+      const elem = list[i];
+      if ((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.invisible) {
+        continue;
+      }
+      const elemSize = {
+        x: elem.x,
+        y: elem.y,
+        w: elem.w,
+        h: elem.h,
+        angle: elem.angle || 0
+      };
+      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));
+        }
+      }
+      if (prevElemSize) {
+        const areaStartX = Math.min(elemSize.x, area.x);
+        const areaStartY = Math.min(elemSize.y, area.y);
+        const areaEndX = Math.max(elemSize.x + elemSize.w, area.x + area.w);
+        const areaEndY = Math.max(elemSize.y + elemSize.h, area.y + area.h);
+        area.x = areaStartX;
+        area.y = areaStartY;
+        area.w = Math.abs(areaEndX - areaStartX);
+        area.h = Math.abs(areaEndY - areaStartY);
+      } else {
+        area.x = elemSize.x;
+        area.y = elemSize.y;
+        area.w = elemSize.w;
+        area.h = elemSize.h;
+      }
+      prevElemSize = elemSize;
+    }
+    const listSize = {
+      x: Math.floor(area.x),
+      y: Math.floor(area.y),
+      w: Math.ceil(area.w),
+      h: Math.ceil(area.h)
+    };
+    return listSize;
+  }
   function calcElementsContextSize(elements, opts) {
     const area = { x: 0, y: 0, w: 0, h: 0 };
     elements.forEach((elem) => {
@@ -1730,8 +1947,27 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return result;
   }
+  function findElementQueueFromListByPosition(position, list) {
+    const result = [];
+    let tempList = list;
+    for (let i = 0; i < position.length; i++) {
+      const pos = position[i];
+      const item = tempList[pos];
+      if (item) {
+        result.push(item);
+      } else {
+        break;
+      }
+      if (i < position.length - 1 && item.type === "group") {
+        tempList = item.detail.children;
+      } else {
+        break;
+      }
+    }
+    return result;
+  }
   function getElementPositionFromList(uuid, elements) {
-    let result = [];
+    const result = [];
     let over = false;
     const _loop = (list) => {
       var _a;
@@ -2064,6 +2300,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 });
@@ -2076,6 +2316,10 @@ 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 sizeController = {
       elementWrapper: vertexes,
       left: {
@@ -2117,6 +2361,26 @@ 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
       }
     };
     return sizeController;
@@ -2354,6 +2618,7 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return radian;
   }
+  const defaultText = "Text Element";
   function getDefaultElementDetailConfig() {
     const config = {
       boxSizing: "border-box",
@@ -2383,24 +2648,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"
     };
@@ -2418,7 +2681,7 @@ var __privateSet = (obj, member, value, setter) => {
     };
     return detail;
   }
-  function getDefaultElementGroupDetail(opts) {
+  function getDefaultElementGroupDetail() {
     const detail = {
       children: [],
       background: "#D9D9D9",
@@ -2430,8 +2693,9 @@ var __privateSet = (obj, member, value, setter) => {
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2, boxSizing = defaultElemConfig.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
-    if (typeof borderWidth2 !== "number") {
+    let { borderRadius: borderRadius2 } = viewElem.detail;
+    const { boxSizing = defaultElemConfig.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
+    if (Array.isArray(borderWidth2)) {
       borderRadius2 = 0;
     }
     let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
@@ -2475,9 +2739,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;
@@ -2487,26 +2847,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;
@@ -2520,16 +2877,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") {
@@ -2538,7 +2893,7 @@ var __privateSet = (obj, member, value, setter) => {
       detail = getDefaultElementGroupDetail();
     }
     const elem = {
-      ...elemSize,
+      ...elementSize,
       ...baseElem,
       uuid: createUUID(),
       type,
@@ -2674,26 +3029,103 @@ 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 calcViewCenterContent(data, opts) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    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;
+    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 (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;
+  }
   exports.Context2D = Context2D;
   exports.EventEmitter = EventEmitter;
   exports.Store = Store;
   exports.calcDistance = calcDistance;
   exports.calcElementCenter = calcElementCenter;
   exports.calcElementCenterFromVertexes = calcElementCenterFromVertexes;
+  exports.calcElementListSize = calcElementListSize;
   exports.calcElementQueueVertexesQueueInGroup = calcElementQueueVertexesQueueInGroup;
   exports.calcElementSizeController = calcElementSizeController;
   exports.calcElementVertexesInGroup = calcElementVertexesInGroup;
@@ -2702,6 +3134,8 @@ var __privateSet = (obj, member, value, setter) => {
   exports.calcElementsViewInfo = calcElementsViewInfo;
   exports.calcSpeed = calcSpeed;
   exports.calcViewBoxSize = calcViewBoxSize;
+  exports.calcViewCenter = calcViewCenter;
+  exports.calcViewCenterContent = calcViewCenterContent;
   exports.calcViewElementSize = calcViewElementSize;
   exports.calcViewPointSize = calcViewPointSize;
   exports.calcViewScaleInfo = calcViewScaleInfo;
@@ -2714,21 +3148,27 @@ var __privateSet = (obj, member, value, setter) => {
   exports.compose = compose;
   exports.compressImage = compressImage;
   exports.createAssetId = createAssetId;
+  exports.createBoardContent = createBoardContent;
   exports.createContext2D = createContext2D;
   exports.createElement = createElement;
   exports.createOffscreenContext2D = createOffscreenContext2D;
   exports.createUUID = createUUID;
-  exports.createViewContent = createViewContent;
+  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.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.formatNumber = formatNumber;