@idraw/core 0.4.0-beta.40 → 0.4.0-beta.42

package/dist/index.global.js

@@ -8,7 +8,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
-  var _opts, _store, _hasDestroyed, _BoardWatcher_instances, init_fn, _onWheel, _onContextMenu, _onClick, _onPointLeave, _onPointEnd, _onPointMove, _onPointStart, _onHover, isInTarget_fn, getPoint_fn, isVaildPoint_fn, _activeStore, _sharedStore, _opts2, _drawFrameSnapshotQueue, _drawFrameStatus, _Viewer_instances, init_fn2, drawAnimationFrame_fn, _opts3, _middlewareMap, _middlewares, _activeMiddlewareObjs, _watcher, _renderer, _sharer, _viewer, _calculator, _eventHub, _hasDestroyed2, _Board_instances, init_fn3, handlePointStart_fn, handlePointEnd_fn, handlePointMove_fn, handlePointLeave_fn, handleHover_fn, handleDoubleClick_fn, handleContextMenu_fn, handleWheel_fn, handleWheelScale_fn, handleScrollX_fn, handleScrollY_fn, handleResize_fn, handleClear_fn, handleBeforeDrawFrame_fn, handleAfterDrawFrame_fn, resetActiveMiddlewareObjs_fn, _eventHub2, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _Cursor_instances, init_fn4, loadResizeCursorBaseImage_fn, resetCursor_fn, setCursorResize_fn, appendRotateResizeImage_fn, _board, _canvas, _container2, _Core_instances, initContainer_fn;
+  var _opts, _store, _hasDestroyed, _BoardWatcher_instances, init_fn, _onWheel, _onContextMenu, _onClick, _onPointLeave, _onPointEnd, _onPointMove, _onPointStart, _onHover, isInTarget_fn, getPoint_fn, isVaildPoint_fn, _activeStore, _sharedStore, _opts2, _drawFrameSnapshotQueue, _drawFrameStatus, _Viewer_instances, init_fn2, drawAnimationFrame_fn, _opts3, _middlewareMap, _activeMiddlewareObjs, _watcher, _renderer, _sharer, _viewer, _calculator, _eventHub, _hasDestroyed2, _Board_instances, init_fn3, handlePointStart_fn, handlePointEnd_fn, handlePointMove_fn, handlePointLeave_fn, handleHover_fn, handleDoubleClick_fn, handleContextMenu_fn, handleWheel_fn, handleWheelScale_fn, handleScrollX_fn, handleScrollY_fn, handleResize_fn, handleClear_fn, handleBeforeDrawFrame_fn, handleAfterDrawFrame_fn, resetActiveMiddlewareObjs_fn, _eventHub2, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _Cursor_instances, init_fn4, loadResizeCursorBaseImage_fn, resetCursor_fn, setCursorResize_fn, appendRotateResizeImage_fn, _board, _canvas, _container2, _Core_instances, initContainer_fn;
   function isColorStr(color2) {
     return typeof color2 === "string" && (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
@@ -39,30 +39,38 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
   }
-  function limitHexStr(str) {
+  function limitHexStr(str, seed) {
     let count = 0;
     for (let i = 0; i < str.length; i++) {
-      count += str.charCodeAt(i) * str.charCodeAt(i) * i * i;
+      count += str.charCodeAt(i);
     }
-    return count.toString(16).substring(0, 4);
+    return (count + seed).toString(16).substring(0, 4);
   }
-  function createAssetId(assetStr) {
+  function sumCharCodes(str) {
+    let sum = 0;
+    for (let i = 0; i < str.length; i++) {
+      sum += str.charCodeAt(i);
+    }
+    return sum;
+  }
+  function createAssetId(assetStr, elemUUID) {
     const len = assetStr.length;
+    const seed = sumCharCodes(elemUUID);
     const mid = Math.floor(len / 2);
-    const start4 = assetStr.substring(0, 4).padEnd(4, "0");
-    const end4 = assetStr.substring(0, 4).padEnd(4, "0");
-    const str1 = limitHexStr(len.toString(16).padEnd(4, start4));
-    const str2 = limitHexStr(assetStr.substring(mid - 4, mid).padEnd(4, start4)).padEnd(4, "f");
-    const str3 = limitHexStr(assetStr.substring(mid - 8, mid - 4).padEnd(4, start4)).padEnd(4, "f");
-    const str4 = limitHexStr(assetStr.substring(mid - 12, mid - 8).padEnd(4, start4)).padEnd(4, "f");
-    const str5 = limitHexStr(assetStr.substring(mid - 16, mid - 12).padEnd(4, end4)).padEnd(4, "f");
-    const str6 = limitHexStr(assetStr.substring(mid, mid + 4).padEnd(4, end4)).padEnd(4, "f");
-    const str7 = limitHexStr(assetStr.substring(mid + 4, mid + 8).padEnd(4, end4)).padEnd(4, "f");
-    const str8 = limitHexStr(end4.padEnd(4, start4).padEnd(4, end4));
+    const start4 = assetStr.substring(0, 4).padStart(4, "0");
+    const end4 = assetStr.substring(0, 4).padStart(4, "0");
+    const str1 = limitHexStr(len.toString(16).padStart(4, start4), seed).padStart(4, "0");
+    const str2 = limitHexStr(assetStr.substring(mid - 4, mid).padStart(4, start4), seed).padStart(4, "0");
+    const str3 = limitHexStr(assetStr.substring(mid - 8, mid - 4).padStart(4, start4), seed).padStart(4, "0");
+    const str4 = limitHexStr(assetStr.substring(mid - 12, mid - 8).padStart(4, start4), seed).padStart(4, "0");
+    const str5 = limitHexStr(assetStr.substring(mid - 16, mid - 12).padStart(4, end4), seed).padStart(4, "0");
+    const str6 = limitHexStr(assetStr.substring(mid, mid + 4).padStart(4, end4), seed).padStart(4, "0");
+    const str7 = limitHexStr(assetStr.substring(mid + 4, mid + 8).padStart(4, end4), seed).padStart(4, "0");
+    const str8 = limitHexStr(end4.padStart(4, start4).padStart(4, end4), seed);
     return `@assets/${str1}${str2}-${str3}-${str4}-${str5}-${str6}${str7}${str8}`;
   }
   function isAssetId(id) {
-    return /^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${id}`);
+    return /^@assets\/[0-9a-z-]{0,}$/.test(`${id}`);
   }
   (function(s, e) {
     var t = {};
@@ -1092,7 +1100,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return ctxSize;
   }
   function calcElementsViewInfo(elements, prevViewSize, options) {
-    const contextSize = calcElementsContextSize(elements, { viewWidth: prevViewSize.width, viewHeight: prevViewSize.height, extend: options === null || options === void 0 ? void 0 : options.extend });
+    const contextSize = calcElementsContextSize(elements, {
+      viewWidth: prevViewSize.width,
+      viewHeight: prevViewSize.height,
+      extend: options === null || options === void 0 ? void 0 : options.extend
+    });
     if ((options === null || options === void 0 ? void 0 : options.extend) === true) {
       contextSize.contextWidth = Math.max(contextSize.contextWidth, prevViewSize.contextWidth);
       contextSize.contextHeight = Math.max(contextSize.contextHeight, prevViewSize.contextHeight);
@@ -1181,7 +1193,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     for (let i = 0; i < position.length; i++) {
       const pos = position[i];
       const item = tempList[pos];
-      if (i < position.length - 1 && item.type === "group") {
+      if (i < position.length - 1 && (item === null || item === void 0 ? void 0 : item.type) === "group") {
         tempList = item.detail.children;
       } else if (i === position.length - 1) {
         result = item;
@@ -1624,15 +1636,38 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
-    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, {
+      size: ctrlSize,
+      angle: totalAngle
+    });
     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 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);
@@ -1754,10 +1789,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     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 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);
@@ -1852,6 +1907,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return parseFloat(num.toFixed(decimalPlaces));
   }
+  const defaultText = "Text Element";
   function getDefaultElementDetailConfig() {
     const config = {
       boxSizing: "border-box",
@@ -1876,6 +1932,53 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     };
     return config;
   }
+  function getDefaultElementRectDetail() {
+    const detail = {
+      background: "#D9D9D9"
+    };
+    return detail;
+  }
+  function getDefaultElementCircleDetail() {
+    const detail = {
+      background: "#D9D9D9",
+      radius: 0
+    };
+    return detail;
+  }
+  function getDefaultElementTextDetail(elementSize) {
+    const detailConfig2 = getDefaultElementDetailConfig();
+    const detail = {
+      text: defaultText,
+      color: detailConfig2.color,
+      fontFamily: detailConfig2.fontFamily,
+      fontWeight: detailConfig2.fontWeight,
+      lineHeight: elementSize.w / defaultText.length,
+      fontSize: elementSize.w / defaultText.length,
+      textAlign: "center",
+      verticalAlign: "middle"
+    };
+    return detail;
+  }
+  function getDefaultElementSVGDetail() {
+    const detail = {
+      svg: '<svg t="1701004189871" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"   width="200" height="200"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"   fill="#2c2c2c"></path></svg>'
+    };
+    return detail;
+  }
+  function getDefaultElementImageDetail() {
+    const detail = {
+      src: "data:image/svg+xml;base64,PHN2ZyAgIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik05MjggMTYwSDk2Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY2NDBjMCAxNy43IDE0LjMgMzIgMzIgMzJoODMyYzE3LjcgMCAzMi0xNC4zIDMyLTMyVjE5MmMwLTE3LjctMTQuMy0zMi0zMi0zMnogbS00MCA2MzJIMTM2di0zOS45bDEzOC41LTE2NC4zIDE1MC4xIDE3OEw2NTguMSA0ODkgODg4IDc2MS42Vjc5MnogbTAtMTI5LjhMNjY0LjIgMzk2LjhjLTMuMi0zLjgtOS0zLjgtMTIuMiAwTDQyNC42IDY2Ni40bC0xNDQtMTcwLjdjLTMuMi0zLjgtOS0zLjgtMTIuMiAwTDEzNiA2NTIuN1YyMzJoNzUydjQzMC4yeiIgIGZpbGw9IiM1MTUxNTEiPjwvcGF0aD48cGF0aCBkPSJNMzA0IDQ1NmM0OC42IDAgODgtMzkuNCA4OC04OHMtMzkuNC04OC04OC04OC04OCAzOS40LTg4IDg4IDM5LjQgODggODggODh6IG0wLTExNmMxNS41IDAgMjggMTIuNSAyOCAyOHMtMTIuNSAyOC0yOCAyOC0yOC0xMi41LTI4LTI4IDEyLjUtMjggMjgtMjh6IiAgZmlsbD0iIzUxNTE1MSI+PC9wYXRoPjwvc3ZnPg=="
+    };
+    return detail;
+  }
+  function getDefaultElementGroupDetail() {
+    const detail = {
+      children: [],
+      background: "#D9D9D9",
+      overflow: "hidden"
+    };
+    return detail;
+  }
   const defaultElemConfig$1 = getDefaultElementDetailConfig();
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
@@ -1928,6 +2031,107 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       radiusList
     };
   }
+  function flattenObject(obj, parentKey = "", result = {}, opts) {
+    Object.keys(obj).forEach((key2) => {
+      var _a;
+      const currentKey = parentKey ? `${parentKey}${isArrayIndex(key2) ? `[${key2}]` : `.${key2}`}` : key2;
+      if (!((_a = opts === null || opts === void 0 ? void 0 : opts.ignorePaths) === null || _a === void 0 ? void 0 : _a.includes(currentKey))) {
+        const value = obj[key2];
+        if (isFlattenable(value)) {
+          flattenObject(value, Array.isArray(value) ? currentKey : currentKey, result, opts);
+        } else {
+          result[currentKey] = value;
+        }
+      }
+    });
+    return result;
+  }
+  function isFlattenable(value) {
+    return typeof value === "object" && value !== null && !(value instanceof Date) || Array.isArray(value);
+  }
+  function isArrayIndex(key2) {
+    return /^\d+$/.test(key2) && !isNaN(Number(key2));
+  }
+  function flatObject(obj, opts) {
+    if (typeof obj !== "object" || obj === null) {
+      return { "": obj };
+    }
+    return flattenObject(obj, "", {}, opts);
+  }
+  function toFlattenElement(elem) {
+    return flatObject(elem, { ignorePaths: ["detail.children"] });
+  }
+  function toFlattenLayout(layout) {
+    return flatObject(layout);
+  }
+  function toFlattenGlobal(global) {
+    return flatObject(global);
+  }
+  function toPath(path) {
+    if (Array.isArray(path))
+      return [...path];
+    return path.split(/\.|\[|\]/).filter((key2) => key2 !== "");
+  }
+  function get(obj, path, defaultValue) {
+    if (!path) {
+      return void 0;
+    }
+    const pathArray = toPath(path);
+    let current = obj;
+    for (const key2 of pathArray) {
+      if (current === null || current === void 0) {
+        return defaultValue;
+      }
+      current = current[key2];
+    }
+    return current !== void 0 ? current : defaultValue;
+  }
+  function set(obj, path, value) {
+    const pathArray = toPath(path);
+    if (pathArray.length === 0) {
+      return obj;
+    }
+    let current = obj;
+    if (current) {
+      for (let i = 0; i < pathArray.length; i++) {
+        const key2 = pathArray[i];
+        if (i === pathArray.length - 1) {
+          current[key2] = value;
+          break;
+        }
+        if (current && ((current === null || current === void 0 ? void 0 : current[key2]) === void 0 || typeof (current === null || current === void 0 ? void 0 : current[key2]) !== "object" || (current === null || current === void 0 ? void 0 : current[key2]) === null)) {
+          const nextKey = pathArray[i + 1];
+          const isNextNumeric = /^\d+$/.test(nextKey);
+          current[key2] = isNextNumeric ? [] : {};
+        }
+        current = current === null || current === void 0 ? void 0 : current[key2];
+      }
+    }
+    return obj;
+  }
+  function del(obj, path) {
+    const pathArray = toPath(path);
+    if (pathArray.length === 0) {
+      return obj;
+    }
+    let current = obj;
+    if (current) {
+      for (let i = 0; i < pathArray.length; i++) {
+        const key2 = pathArray[i];
+        if (i === pathArray.length - 1) {
+          delete current[key2];
+          break;
+        }
+        if (current && ((current === null || current === void 0 ? void 0 : current[key2]) === void 0 || typeof (current === null || current === void 0 ? void 0 : current[key2]) !== "object" || (current === null || current === void 0 ? void 0 : current[key2]) === null)) {
+          const nextKey = pathArray[i + 1];
+          const isNextNumeric = /^\d+$/.test(nextKey);
+          current[key2] = isNextNumeric ? [] : {};
+        }
+        current = current === null || current === void 0 ? void 0 : current[key2];
+      }
+    }
+    return obj;
+  }
   const doNum = (n) => {
     return formatNumber(n, { decimalPlaces: 4 });
   };
@@ -2020,6 +2224,266 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     resizeElementBaseDetail(elem, opts);
     return elem;
   }
+  const defaultViewWidth = 200;
+  const defaultViewHeight = 200;
+  function createElementSize(type, opts) {
+    let x2 = 0;
+    let y2 = 0;
+    let w2 = defaultViewWidth;
+    let h2 = defaultViewHeight;
+    if (opts) {
+      const { viewScaleInfo, viewSizeInfo } = opts;
+      const { scale, offsetLeft, offsetTop } = viewScaleInfo;
+      const { width, height } = viewSizeInfo;
+      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);
+      } 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;
+    }
+    const elemSize = {
+      x: x2,
+      y: y2,
+      w: w2,
+      h: h2
+    };
+    return elemSize;
+  }
+  function createElement(type, baseElem, opts) {
+    const elementSize = createElementSize(type, opts);
+    let detail = {};
+    if (type === "rect") {
+      detail = getDefaultElementRectDetail();
+    } else if (type === "circle") {
+      detail = getDefaultElementCircleDetail();
+    } else if (type === "text") {
+      detail = getDefaultElementTextDetail(elementSize);
+    } else if (type === "svg") {
+      detail = getDefaultElementSVGDetail();
+    } else if (type === "image") {
+      detail = getDefaultElementImageDetail();
+    } else if (type === "group") {
+      detail = getDefaultElementGroupDetail();
+    }
+    const elem = Object.assign(Object.assign(Object.assign({ uuid: createUUID() }, elementSize), baseElem), { type, detail: Object.assign(Object.assign({}, detail), baseElem.detail || {}) });
+    return elem;
+  }
+  function insertElementToListByPosition(element, position, list) {
+    let result = false;
+    if (position.length === 1) {
+      const pos = position[0];
+      list.splice(pos, 0, element);
+      result = true;
+    } else if (position.length > 1) {
+      let tempList = list;
+      for (let i = 0; i < position.length; i++) {
+        const pos = position[i];
+        const item = tempList[pos];
+        if (i === position.length - 1) {
+          const pos2 = position[i];
+          tempList.splice(pos2, 0, element);
+          result = true;
+        } else if (i < position.length - 1 && item.type === "group") {
+          tempList = item.detail.children;
+        } else {
+          break;
+        }
+      }
+    }
+    return result;
+  }
+  function deleteElementInListByPosition(position, list) {
+    let result = false;
+    if (position.length === 1) {
+      const pos = position[0];
+      list.splice(pos, 1);
+      result = true;
+    } else if (position.length > 1) {
+      let tempList = list;
+      for (let i = 0; i < position.length; i++) {
+        const pos = position[i];
+        const item = tempList[pos];
+        if (i === position.length - 1) {
+          const pos2 = position[i];
+          tempList.splice(pos2, 1);
+          result = true;
+        } else if (i < position.length - 1 && item.type === "group") {
+          tempList = item.detail.children;
+        } else {
+          break;
+        }
+      }
+    }
+    return result;
+  }
+  function deleteElementInList(uuid, list) {
+    const position = getElementPositionFromList(uuid, list);
+    return deleteElementInListByPosition(position, list);
+  }
+  function moveElementPosition(elements, opts) {
+    const from = [...opts.from];
+    const to = [...opts.to];
+    if (from.length === 0 || to.length === 0) {
+      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, from, to };
+          }
+          continue;
+        }
+      }
+    }
+    const target = findElementFromListByPosition(from, elements);
+    if (target) {
+      const insterResult = insertElementToListByPosition(target, to, elements);
+      if (!insterResult) {
+        return { elements, from, to };
+      }
+      let trimDeletePosIndex = -1;
+      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 (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 (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) {
+        {
+          from[trimDeletePosIndex] = from[trimDeletePosIndex] + 1;
+        }
+      }
+      deleteElementInListByPosition(from, elements);
+    }
+    return { elements, from, to };
+  }
+  function mergeElement(originElem, updateContent, opts) {
+    const updatedFlatten = toFlattenElement(updateContent);
+    const ignoreKeys = ["uuid", "type"];
+    const updatedKeys = Object.keys(updatedFlatten);
+    updatedKeys.forEach((key2) => {
+      if (!ignoreKeys.includes(key2)) {
+        const value = updatedFlatten[key2];
+        del(originElem, key2);
+        if (value !== void 0) {
+          set(originElem, key2, value);
+        }
+      }
+    });
+    if ((opts === null || opts === void 0 ? void 0 : opts.strict) === true) {
+      const originFlatten = toFlattenElement(originElem);
+      const originKeys = Object.keys(originFlatten);
+      originKeys.forEach((key2) => {
+        if (!ignoreKeys.includes(key2)) {
+          if (!updatedKeys.includes(key2)) {
+            del(originElem, key2);
+          }
+        }
+      });
+    }
+    return originElem;
+  }
+  function updateElementInList(uuid, updateContent, elements) {
+    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 || _a === void 0 ? 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, ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.children) || []);
+      }
+    }
+    return targetElement;
+  }
+  function updateElementInListByPosition(position, updateContent, elements, opts) {
+    var _a;
+    const elem = findElementFromListByPosition(position, elements);
+    if (elem) {
+      if (elem.type === "group" && ((_a = elem.operations) === null || _a === void 0 ? 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, opts);
+    }
+    return elem;
+  }
   const baseFontFamilyList = ["-apple-system", '"system-ui"', ' "Segoe UI"', " Roboto", '"Helvetica Neue"', "Arial", '"Noto Sans"', " sans-serif"];
   function enhanceFontFamliy(fontFamily2) {
     return [fontFamily2, ...baseFontFamilyList].join(", ");
@@ -2060,6 +2524,36 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       moveY
     };
   }
+  function mergeLayout(originLayout, updateContent, opts) {
+    const updatedFlatten = toFlattenLayout(updateContent);
+    const ignoreKeys = [];
+    const updatedKeys = Object.keys(updatedFlatten);
+    updatedKeys.forEach((key2) => {
+      if (!ignoreKeys.includes(key2)) {
+        const value = updatedFlatten[key2];
+        del(originLayout, key2);
+        if (value !== void 0) {
+          set(originLayout, key2, value);
+        }
+      }
+    });
+    return originLayout;
+  }
+  function mergeGlobal(originGlobal, updateContent, opts) {
+    const updatedFlatten = toFlattenGlobal(updateContent);
+    const ignoreKeys = [];
+    const updatedKeys = Object.keys(updatedFlatten);
+    updatedKeys.forEach((key2) => {
+      if (!ignoreKeys.includes(key2)) {
+        const value = updatedFlatten[key2];
+        del(originGlobal, key2);
+        if (value !== void 0) {
+          set(originGlobal, key2, value);
+        }
+      }
+    });
+    return originGlobal;
+  }
   function createColorStyle(ctx, color2, opts) {
     if (typeof color2 === "string") {
       return color2;
@@ -2163,7 +2657,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.scale(totalScale * scaleW, totalScale * scaleH);
       const pathStr = generateSVGPath(clipPath.commands || []);
       const path2d = new Path2D(pathStr);
-      ctx.clip(path2d);
+      ctx.clip(path2d, "nonzero");
       ctx.translate(0 - internalX, 0 - internalY);
       ctx.setTransform(1, 0, 0, 1, 0, 0);
       rotateElement$1(ctx, Object.assign({}, viewElem), () => {
@@ -2254,7 +2748,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           }
         }
       }
-      ctx.fill();
+      ctx.fill("nonzero");
       if (transform && transform.length > 0) {
         ctx.setTransform(1, 0, 0, 1, 0, 0);
       }
@@ -2460,7 +2954,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             ctx.fillStyle = fillStyle;
             ctx.circle(centerX, centerY, radiusA, radiusB, 0, 0, 2 * Math.PI);
             ctx.closePath();
-            ctx.fill();
+            ctx.fill("nonzero");
             ctx.globalAlpha = parentOpacity;
             if (typeof bw === "number" && bw > 0) {
               const ba = bw / 2 + a;
@@ -2540,8 +3034,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 ctx.arcTo(x3, y3 + h3, x3, y3, radiusList[3]);
                 ctx.arcTo(x3, y3, x3 + w3, y3, radiusList[0]);
                 ctx.closePath();
-                ctx.fill();
-                ctx.clip();
+                ctx.fill("nonzero");
+                ctx.clip("nonzero");
                 if (scaleMode && originH && originW) {
                   let sx = 0;
                   let sy = 0;
@@ -2741,7 +3235,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 }
               }
               if (detail.fill) {
-                ctx.fill(path2d, fillRule);
+                ctx.fill(path2d, fillRule || "nonzero");
               }
               if (detail.stroke && detail.strokeWidth !== 0) {
                 ctx.strokeStyle = detail.stroke;
@@ -2844,8 +3338,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 ctx.arcTo(x3, y3 + h3, x3, y3, radiusList[3]);
                 ctx.arcTo(x3, y3, x3 + w3, y3, radiusList[0]);
                 ctx.closePath();
-                ctx.fill();
-                ctx.clip();
+                ctx.fill("nonzero");
+                ctx.clip("nonzero");
               }
               if (Array.isArray(elem.detail.children)) {
                 const { parentElementSize: parentSize } = opts;
@@ -2939,8 +3433,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.arcTo(x3, y3 + h3, x3, y3, radiusList[3]);
       ctx.arcTo(x3, y3, x3 + w3, y3, radiusList[0]);
       ctx.closePath();
-      ctx.fill();
-      ctx.clip();
+      ctx.fill("nonzero");
+      ctx.clip("nonzero");
     }
     renderContent(ctx);
     if (layout.detail.overflow === "hidden") {
@@ -3012,9 +3506,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       if (isAssetId(source)) {
         return source;
       }
-      return createAssetId(source);
+      return createAssetId(source, element.uuid);
     }
-    return createAssetId(`${createUUID()}-${element.uuid}-${createUUID()}-${createUUID()}`);
+    return createAssetId(`${createUUID()}-${element.uuid}-${createUUID()}-${createUUID()}`, element.uuid);
   };
   class Loader extends EventEmitter {
     constructor() {
@@ -3288,9 +3782,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       eachLineStartY = (fontHeight - fontSize2) / 2;
     }
     if (lines.length * fontHeight < h2) {
-      if (elem.detail.verticalAlign === "top") {
+      if (detail.verticalAlign === "top") {
         startY = 0;
-      } else if (elem.detail.verticalAlign === "bottom") {
+      } else if (detail.verticalAlign === "bottom") {
         startY += h2 - lines.length * fontHeight;
       } else {
         startY += (h2 - lines.length * fontHeight) / 2;
@@ -3525,9 +4019,20 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
       return viewRectInfo;
     }
+    modifyText(element) {
+      const virtualFlatItemMap = __classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap");
+      const flatItem = virtualFlatItemMap[element.uuid];
+      if (element && element.type === "text") {
+        const newVirtualFlatItem = Object.assign(Object.assign({}, flatItem), calcVirtualTextDetail(element, {
+          tempContext: __classPrivateFieldGet$1(this, _Calculator_opts, "f").tempContext
+        }));
+        virtualFlatItemMap[element.uuid] = newVirtualFlatItem;
+        __classPrivateFieldGet$1(this, _Calculator_store, "f").set("virtualFlatItemMap", virtualFlatItemMap);
+      }
+    }
     modifyVirtualFlatItemMap(data, opts) {
-      const { modifyOptions, viewScaleInfo, viewSizeInfo } = opts;
-      const { type, content } = modifyOptions;
+      const { modifyInfo, viewScaleInfo, viewSizeInfo } = opts;
+      const { type, content } = modifyInfo;
       const list = data.elements;
       const virtualFlatItemMap = __classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap");
       if (type === "deleteElement") {
@@ -3628,6 +4133,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         w: opts.viewSizeInfo.width,
         h: opts.viewSizeInfo.height
       };
+      if (opts.forceDrawAll === true) {
+        __classPrivateFieldGet(this, _Renderer_calculator, "f").resetVirtualFlatItemMap(data, {
+          viewScaleInfo: opts.viewScaleInfo,
+          viewSizeInfo: opts.viewSizeInfo
+        });
+      }
       const drawOpts = Object.assign({
         loader,
         calculator,
@@ -4153,8 +4664,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     constructor(opts) {
       __privateAdd(this, _Board_instances);
       __privateAdd(this, _opts3);
-      __privateAdd(this, _middlewareMap, /* @__PURE__ */ new WeakMap());
-      __privateAdd(this, _middlewares, []);
+      __privateAdd(this, _middlewareMap, /* @__PURE__ */ new Map());
+      // #middlewares: BoardMiddleware[] = [];
       __privateAdd(this, _activeMiddlewareObjs, []);
       __privateAdd(this, _watcher);
       __privateAdd(this, _renderer);
@@ -4214,8 +4725,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     getRenderer() {
       return __privateGet(this, _renderer);
     }
-    setData(data, opts) {
-      const { modifiedOptions } = opts || {};
+    setData(data) {
       const sharer = __privateGet(this, _sharer);
       __privateGet(this, _sharer).setActiveStorage("data", data);
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
@@ -4225,17 +4735,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         viewHeight: viewSizeInfo.height,
         extend: true
       });
-      if (modifiedOptions) {
-        __privateGet(this, _viewer).resetVirtualFlatItemMap(data, {
-          viewSizeInfo,
-          viewScaleInfo
-        });
-      } else {
-        __privateGet(this, _viewer).resetVirtualFlatItemMap(data, {
-          viewSizeInfo,
-          viewScaleInfo
-        });
-      }
+      __privateGet(this, _viewer).resetVirtualFlatItemMap(data, {
+        viewSizeInfo,
+        viewScaleInfo
+      });
       __privateGet(this, _viewer).drawFrame();
       const newViewSizeInfo = {
         ...viewSizeInfo,
@@ -4252,13 +4755,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       var _a, _b, _c;
       if (__privateGet(this, _middlewareMap).has(middleware)) {
         const item = __privateGet(this, _middlewareMap).get(middleware);
-        if (item) {
-          (_b = (_a = item.middlewareObject).use) == null ? void 0 : _b.call(_a);
+        if (item && item.status !== "enable") {
           item.status = "enable";
-          __privateGet(this, _middlewareMap).set(middleware, item);
+          (_b = (_a = item.middlewareObject).use) == null ? void 0 : _b.call(_a);
           __privateMethod(this, _Board_instances, resetActiveMiddlewareObjs_fn).call(this);
-          return;
         }
+        return;
       }
       const { boardContent, container } = __privateGet(this, _opts3);
       const sharer = __privateGet(this, _sharer);
@@ -4270,8 +4772,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         config
       );
       (_c = obj.use) == null ? void 0 : _c.call(obj);
-      __privateGet(this, _middlewares).push(middleware);
-      __privateGet(this, _activeMiddlewareObjs).push(obj);
       __privateGet(this, _middlewareMap).set(middleware, {
         status: "enable",
         middlewareObject: obj,
@@ -4281,11 +4781,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     disuse(middleware) {
       var _a, _b;
-      const item = __privateGet(this, _middlewareMap).get(middleware);
-      if (item) {
-        (_b = (_a = item.middlewareObject).disuse) == null ? void 0 : _b.call(_a);
-        item.status = "disable";
-        __privateGet(this, _middlewareMap).set(middleware, item);
+      if (__privateGet(this, _middlewareMap).has(middleware)) {
+        const item = __privateGet(this, _middlewareMap).get(middleware);
+        if (item) {
+          (_b = (_a = item.middlewareObject).disuse) == null ? void 0 : _b.call(_a);
+          item.status = "disable";
+        }
+        __privateGet(this, _middlewareMap).delete(middleware);
         __privateMethod(this, _Board_instances, resetActiveMiddlewareObjs_fn).call(this);
       }
     }
@@ -4350,7 +4852,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   }
   _opts3 = new WeakMap();
   _middlewareMap = new WeakMap();
-  _middlewares = new WeakMap();
   _activeMiddlewareObjs = new WeakMap();
   _watcher = new WeakMap();
   _renderer = new WeakMap();
@@ -4530,13 +5031,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   };
   resetActiveMiddlewareObjs_fn = function() {
     const activeMiddlewareObjs = [];
-    const middlewareMap = __privateGet(this, _middlewareMap);
-    __privateGet(this, _middlewares).forEach((middleware) => {
-      const item = middlewareMap.get(middleware);
+    for (const [_, item] of __privateGet(this, _middlewareMap)) {
       if ((item == null ? void 0 : item.status) === "enable" && (item == null ? void 0 : item.middlewareObject)) {
         activeMiddlewareObjs.push(item.middlewareObject);
       }
-    });
+    }
     __privateSet(this, _activeMiddlewareObjs, activeMiddlewareObjs);
   };
   const CURSOR = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuMTY0NzUzLCAyMDIxLzAyLzE1LTExOjUyOjEzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDktMTdUMTY6MDc6MjYrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA5LTE3VDE2OjEyOjUwKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA5LTE3VDE2OjEyOjUwKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjliMGM0MzI2LWU4ZTQtNDlkNy04MmUzLTgxODkwYTE2ZmU1YSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjMzOGFhZDBmLWZkZjMtODE0MS1iMTZmLWNiZWIzNTQyYTJhMCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjUwODAxNzc1LWZlNGEtNDQyMy05NDQ3LThkYWRhNzZhYTllOSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTA4MDE3NzUtZmU0YS00NDIzLTk0NDctOGRhZGE3NmFhOWU5IiBzdEV2dDp3aGVuPSIyMDIzLTA5LTE3VDE2OjA3OjI2KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OWIwYzQzMjYtZThlNC00OWQ3LTgyZTMtODE4OTBhMTZmZTVhIiBzdEV2dDp3aGVuPSIyMDIzLTA5LTE3VDE2OjEyOjUwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7W6XrzAAAGLklEQVRYhb2Xf2iUdRzHX/txtfXLplZ6Wblm6fzRmG6r7Uou1AxKRjQKYUqgaLBACFogppcK1h8aLRkMSYaJIA5hYMomZpskEfPOufCaDpZ6t7rbre263U3vzn3643meu+eu3XNzvz7w4bbdc/e89nl/Pu/v50HUCAQCx1tbW0uAx4CHgSwggxkKERkziUQif2mQ0WjU53a7vwSeBB4BTEDmTICmBBwYGDivVlDjlFAo9KvT6dwIPAHkANkq6MwDXr169bCISENDg9TX14s+BgcHf2hubi5mBmRPCXj06NFPREQ6OjoEkPLycrl06VIMMhKJeFwu1xdMs+wpAYuLi9eIiIyOjkpeXp4AAsj27dvF7/fHQIPB4C9dXV0fME2ypwQEXvX7/bdFRNauXRsDBMRkMsnhw4cTZB8YGGhsamp6hSmW3Qhw1Y0bN86LiNTW1iYAallWViZtbW162ftcLtdO/i/7tAAWtba2ficicvLkyTEBtdy6dasMDg7GQIeHh9s7OzvfBx5nkrIbAS7du3fvxyIiPT09hoBa1tXVJcv+fWNj4zLgUeAhJiC7EeDLwOsiMioisnDhwnFBrlixQi5evKiX/c6tW7c+R5E9lweU3QjwReDV/v7+bhGRqqqqcQFquWnTJvH5fHrZLzocjkoSZU9bTSPA54GV165daxYROXDgwAMBannw4MFk2RsaGhqWME7ZjQDNwIrTp09/JSLS0tIyIUBACgoK5MKFCzHIcDj85+3btz8FZpFGdiPAZ4DCmpqaTSIiPp9vwoBaVlVVidfr1ct+/sqVK+9iILsR4FzgJcASDoeHRUSKioomDQnI/v37E2T3+Xz1hw4dWjSW7EaAeUA+UNbX12cXEdmyZcuUAAJiNpvlzJkzetl73G53rVrN2EmUCjATuA9EgYjL5eoGKCkpGatNHijmz5/Pxo0b2blzJ2azOfZ3k8lUYDabv45Go/Y7d+6sIY0VZQOjGqDT6bxeWlrKqlWrJgRlsVhYv349FRUVWCwWcnJyEt4PBoOuoaEhu9frvdzR0fHTtm3buolvRpLqe3OBp4EllZWV74mIRKNRyc3NTSvf7Nmzpbq6Wk6cOCFut1uSY2RkJOB0Ou3Nzc3Ha2trPwPWAGXAEuBZFFPPAbKMevBhYA6wCKgIBoP9IiKrV682hLPZbP8DEpH7vb29N1paWn602WwHFyxYsAX4EKgE3gIsQBFQgOIeT6j3z0wFqEkc60OPx9Odn58/t6SkhPb29jFLbrVa2bNnDwBer7fv5s2bPQ6Ho7upqcnZ1tbmASJq3gPC6utdYESXYfWeo6mkBaUHRQ/odrv/yM/Pt5SWlqb8kAbncDh+W7lyZYN683u6DOvAwipsOOnniA4wZf9lqhdoVYzY7fbrQMpBsdlsWK1WRkZGAtXV1d8D/wA+wKNLr5o+YEC9ZggIAEHiFbyfDhCUCcoFngIWFxYWrtMaat68eQl9V15eHmu2+vr6OuAd4A2gGFgMLERp/mdQ+noWyuadi9Jr2aQ4k42GBPXDs1Ga97WhoaFbIiIbNmxIANTWq87Ozp9VuApgGfACihPkoRjwI+p3mlSgtA9ZRkYNYwwKJBr2rl27sFqthEKhwZqamqOAX5f/AsPE5btLvM/GJWO6yFb/82eBonPnztWJiJw9e1YAWb58eUzaI0eOfAO8CbwCPIfiZZN+eEoncSaKLPOApbt3794uIuL1ehOktdvtF4C3gRKURXcOSn9lTRRsvIAZKI4+l/gjQFREZMeOHSIiEggE+tetW/cRitkuRhmERxnnxjxZQFDWnzzURwCv1+vUHxHHjh37lri0C1Am9KGpgDMC1G8SQnxxCHs8Hqf2RldX10+bN28+i+JjwyT62KSaP13oAfWTHO7t7f0dIBQK/b1v375GlEnVjPYuyoQaHlNTDahVMALca29vdwBcvnz5+KlTp26OATft1UuODBS7yEOxj0K/329HOSWWopjxlE1tchhtM7FriPfgXSDDbrfXo0gbJr4QzIi0WiRPYBbKZJrUV23b0dYn7XSYcsBkS9EiO/k6lApq1cwiPjzaAM1Y9cYC1G6uAWrPCtrvMwoHqU02Q5caIEzj1KaS+D+vIjxtLug31gAAAABJRU5ErkJggg==";
@@ -4709,6 +5208,32 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return key2;
   };
+  function getModifyElementRecord(opts) {
+    const { modifiedElement, beforeElement } = opts;
+    const { uuid, ...restElement } = modifiedElement;
+    const after = toFlattenElement(restElement);
+    let before = {};
+    Object.keys(after).forEach((key2) => {
+      let val = get(beforeElement, key2);
+      if (val === void 0 && /(borderRadius|borderWidth)\[[0-9]{1,}\]$/.test(key2)) {
+        key2 = key2.replace(/\[[0-9]{1,}\]$/, "");
+        val = get(beforeElement, key2);
+      }
+      before[key2] = val;
+    });
+    before = toFlattenElement(before);
+    const record = {
+      type: "modifyElement",
+      time: Date.now(),
+      content: {
+        method: "modifyElement",
+        uuid,
+        before,
+        after
+      }
+    };
+    return record;
+  }
   const key$3 = "SELECT";
   const keyActionType = Symbol(`${key$3}_actionType`);
   const keyResizeType = Symbol(`${key$3}_resizeType`);
@@ -4756,7 +5281,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ctx.lineTo(vertexes[0].x, vertexes[0].y);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill("nonzero");
   }
   function drawLine(ctx, start, end, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, lineDash } = opts;
@@ -4781,7 +5306,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.fillStyle = background2;
       ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI);
       ctx.closePath();
-      ctx.fill();
+      ctx.fill("nonzero");
     }
   }
   function drawCrossVertexes(ctx, vertexes, opts) {
@@ -4878,7 +5403,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const { devicePixelRatio = 1 } = viewSizeInfo;
     const { activeColor: activeColor2 } = style;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
-    const wrapperOpts = { borderColor: activeColor2, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
+    const wrapperOpts = {
+      borderColor: activeColor2,
+      borderWidth: selectWrapperBorderWidth,
+      background: "transparent",
+      lineDash: []
+    };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     if (!hideControllers) {
@@ -4887,7 +5417,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
       drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
       if (((_a = element == null ? void 0 : element.operations) == null ? void 0 : _a.rotatable) !== false) {
-        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: rotate.size });
+        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), {
+          ...ctrlOpts,
+          size: rotate.size
+        });
         const rotateCenter = calcViewPointSize(rotate.center, opts);
         ctx.drawImage(
           rotateControllerPattern.canvas,
@@ -4917,7 +5450,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ctx.lineTo(start.x, end.y);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill("nonzero");
   }
   function drawListArea(ctx, opts) {
     const { areaSize, style } = opts;
@@ -4934,14 +5467,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ctx.lineTo(x2, y2 + h2);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill("nonzero");
   }
   function drawGroupQueueVertexesWrappers(ctx, vertexesList, opts) {
     const { style } = opts;
     const { activeColor: activeColor2 } = style;
     for (let i = 0; i < vertexesList.length; i++) {
       const vertexes = vertexesList[i];
-      const wrapperOpts = { borderColor: activeColor2, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [4, 4] };
+      const wrapperOpts = {
+        borderColor: activeColor2,
+        borderWidth: selectWrapperBorderWidth,
+        background: "transparent",
+        lineDash: [4, 4]
+      };
       drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
   }
@@ -6044,7 +6582,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
     ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
     ctx.closePath();
-    ctx.fill();
+    ctx.fill("nonzero");
     ctx.strokeStyle = activeColor2;
     ctx.lineWidth = 2;
     ctx.beginPath();
@@ -6073,9 +6611,24 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const { controller, style } = opts;
     const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
     drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, style });
-    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, style });
-    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, style });
-    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, style });
+    drawControllerLine(ctx, {
+      start: topRight.center,
+      end: bottomRight.center,
+      centerVertexes: rightMiddle.vertexes,
+      style
+    });
+    drawControllerLine(ctx, {
+      start: bottomRight.center,
+      end: bottomLeft.center,
+      centerVertexes: bottomMiddle.vertexes,
+      style
+    });
+    drawControllerLine(ctx, {
+      start: bottomLeft.center,
+      end: topLeft.center,
+      centerVertexes: leftMiddle.vertexes,
+      style
+    });
     drawControllerBox(ctx, topLeft.vertexes, style);
     drawControllerBox(ctx, topRight.vertexes, style);
     drawControllerBox(ctx, bottomRight.vertexes, style);
@@ -6107,6 +6660,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     let prevPoint = null;
     let prevIsHoverContent = null;
     let prevIsSelected = null;
+    let pointStartLayoutSize = null;
     const clear = () => {
       prevPoint = null;
       sharer.setSharedStorage(keyLayoutActionType, null);
@@ -6272,6 +6826,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           }
           sharer.setSharedStorage(keyLayoutIsSelected, false);
         }
+        const data = sharer.getActiveStorage("data");
+        if (data == null ? void 0 : data.layout) {
+          pointStartLayoutSize = getElementSize(data.layout);
+        } else {
+          pointStartLayoutSize = null;
+        }
         resetController();
         const layoutControlType = resetControlType(e);
         prevPoint = e.point;
@@ -6381,11 +6941,25 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
         const data = sharer.getActiveStorage("data");
         if (data && layoutActionType === "resize" && layoutControlType) {
+          let modifyRecord = void 0;
+          if (pointStartLayoutSize) {
+            modifyRecord = {
+              type: "modifyLayout",
+              time: Date.now(),
+              content: {
+                method: "modifyLayout",
+                before: toFlattenLayout(pointStartLayoutSize),
+                after: toFlattenLayout(getElementSize(data.layout))
+              }
+            };
+          }
           eventHub.trigger(coreEventKeys.CHANGE, {
             type: "dragLayout",
-            data
+            data,
+            modifyRecord
           });
         }
+        pointStartLayoutSize = null;
         sharer.setSharedStorage(keyLayoutActionType, null);
         sharer.setSharedStorage(keyLayoutControlType, null);
         if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
@@ -6655,7 +7229,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.lineTo(bgEnd.x, bgEnd.y);
       ctx.lineTo(bgStart.x, bgEnd.y);
       ctx.closePath();
-      ctx.fill();
+      ctx.fill("nonzero");
       ctx.fillStyle = textColor2;
       ctx.textBaseline = "top";
       ctx.fillText(text2, textStart.x, textStart.y + padding);
@@ -6692,7 +7266,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.lineTo(bgEnd.x, bgEnd.y);
       ctx.lineTo(bgStart.x, bgEnd.y);
       ctx.closePath();
-      ctx.fill();
+      ctx.fill("nonzero");
       ctx.fillStyle = textColor2;
       ctx.textBaseline = "top";
       ctx.fillText(text2, textStart.x, textStart.y + padding);
@@ -6729,7 +7303,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.lineTo(bgEnd.x, bgEnd.y);
       ctx.lineTo(bgStart.x, bgEnd.y);
       ctx.closePath();
-      ctx.fill();
+      ctx.fill("nonzero");
       ctx.fillStyle = textColor2;
       ctx.textBaseline = "top";
       ctx.fillText(text2, textStart.x, textStart.y + padding);
@@ -6879,6 +7453,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
+    let pointStartElementSizeList = [];
     let moveOriginalStartPoint = null;
     let moveOriginalStartElementSize = null;
     let inBusyMode = null;
@@ -7035,6 +7610,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         eventHub.off(coreEventKeys.CLEAR_SELECT, selectClearCallback);
         eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
         eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
+        clear();
+        innerConfig = null;
       },
       resetConfig(config2) {
         innerConfig = { ...innerConfig, ...config2 };
@@ -7156,6 +7733,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             } else if (target2.type === "over-element" && ((_e = target2 == null ? void 0 : target2.elements) == null ? void 0 : _e.length) === 1) {
               updateSelectedElementList([target2.elements[0]], { triggerEvent: true });
               sharer.setSharedStorage(keyActionType, "drag");
+              pointStartElementSizeList = [{ ...getElementSize(target2 == null ? void 0 : target2.elements[0]), uuid: target2 == null ? void 0 : target2.elements[0].uuid }];
             } else if ((_f = target2.type) == null ? void 0 : _f.startsWith("resize-")) {
               sharer.setSharedStorage(keyResizeType, target2.type);
               sharer.setSharedStorage(keyActionType, "resize");
@@ -7192,6 +7770,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         } else if (target.type === "over-element" && ((_k = target == null ? void 0 : target.elements) == null ? void 0 : _k.length) === 1) {
           updateSelectedElementList([target.elements[0]], { triggerEvent: true });
           sharer.setSharedStorage(keyActionType, "drag");
+          pointStartElementSizeList = [{ ...getElementSize(target == null ? void 0 : target.elements[0]), uuid: target == null ? void 0 : target.elements[0].uuid }];
         } else if ((_l = target.type) == null ? void 0 : _l.startsWith("resize-")) {
           sharer.setSharedStorage(keyResizeType, target.type);
           sharer.setSharedStorage(keyActionType, "resize");
@@ -7251,7 +7830,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             elems[0].y = calculator.toGridNum(moveOriginalStartElementSize.y + totalMoveY);
             updateSelectedElementList([elems[0]]);
             calculator.modifyVirtualFlatItemMap(data, {
-              modifyOptions: {
+              modifyInfo: {
                 type: "updateElement",
                 content: {
                   element: elems[0],
@@ -7275,7 +7854,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 elem.x = calculator.toGridNum(elem.x + moveX);
                 elem.y = calculator.toGridNum(elem.y + moveY);
                 calculator.modifyVirtualFlatItemMap(data, {
-                  modifyOptions: {
+                  modifyInfo: {
                     type: "updateElement",
                     content: {
                       element: elem,
@@ -7349,7 +7928,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             }
             updateSelectedElementList([elems[0]]);
             calculator.modifyVirtualFlatItemMap(data, {
-              modifyOptions: {
+              modifyInfo: {
                 type: "updateElement",
                 content: {
                   element: elems[0],
@@ -7438,7 +8017,37 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           if (data && ["drag", "drag-list", "drag-list-end", "resize"].includes(actionType)) {
             let type = "dragElement";
             if (hasChangedData) {
-              eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
+              const startSize = pointStartElementSizeList[0];
+              let modifyRecord = void 0;
+              if (selectedElements.length === 1) {
+                modifyRecord = {
+                  type: "dragElement",
+                  time: 0,
+                  content: {
+                    method: "modifyElement",
+                    uuid: startSize.uuid,
+                    before: toFlattenElement(startSize),
+                    after: toFlattenElement(getElementSize(selectedElements[0]))
+                  }
+                };
+              } else if (selectedElements.length > 1) {
+                modifyRecord = {
+                  type: "dragElements",
+                  time: 0,
+                  content: {
+                    method: "modifyElements",
+                    before: pointStartElementSizeList.map((item) => ({
+                      ...toFlattenElement(item),
+                      uuid: item.uuid
+                    })),
+                    after: selectedElements.map((item) => ({
+                      ...toFlattenElement(getElementSize(item)),
+                      uuid: item.uuid
+                    }))
+                  }
+                };
+              }
+              eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement, modifyRecord });
               hasChangedData = false;
             }
           }
@@ -7830,7 +8439,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.arcTo(x2, y2, x2 + w2, y2, r);
       ctx.closePath();
       ctx.fillStyle = background2;
-      ctx.fill();
+      ctx.fill("nonzero");
       ctx.beginPath();
       ctx.lineWidth = 1;
       ctx.strokeStyle = borderColor2;
@@ -8004,7 +8613,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
       },
       beforeDrawFrame({ snapshot }) {
-        const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
+        const {
+          thumbBackground,
+          thumbBorderColor,
+          hoverThumbBackground,
+          hoverThumbBorderColor,
+          activeThumbBackground,
+          activeThumbBorderColor
+        } = innerConfig;
         const style = {
           thumbBackground,
           thumbBorderColor,
@@ -8056,7 +8672,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const textColor = "#00000080";
   const gridColor = "#AAAAAA20";
   const gridPrimaryColor = "#AAAAAA40";
-  const selectedAreaColor = "#196097";
+  const selectedAreaColor = "#19609780";
   const defaultStyle = {
     background,
     borderColor,
@@ -8225,7 +8841,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ctx.lineTo(basePosition, basePosition);
     ctx.closePath();
     ctx.fillStyle = background2;
-    ctx.fill();
+    ctx.fill("nonzero");
     ctx.lineWidth = lineSize;
     ctx.setLineDash([]);
     ctx.strokeStyle = borderColor2;
@@ -8307,7 +8923,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.lineTo(xAreaStart, rulerSize);
       ctx.fillStyle = selectedAreaColor2;
       ctx.closePath();
-      ctx.fill();
+      ctx.fill("nonzero");
       ctx.beginPath();
       ctx.moveTo(0, yAreaStart);
       ctx.lineTo(rulerSize, yAreaStart);
@@ -8315,7 +8931,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.lineTo(0, yAreaEnd);
       ctx.fillStyle = selectedAreaColor2;
       ctx.closePath();
-      ctx.fill();
+      ctx.fill("nonzero");
     }
   }
   const MiddlewareRuler = (opts, config) => {
@@ -8363,8 +8979,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         if (show === true) {
           const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
           const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-          drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
           drawRulerBackground(overlayContext, { viewSizeInfo, style });
+          drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
           const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
           drawXRuler(overlayContext, { scaleList: xList, style });
           const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
@@ -8384,15 +9000,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   };
   const defaultElementDetail = getDefaultElementDetailConfig();
   const MiddlewareTextEditor = (opts) => {
-    const { eventHub, boardContent, viewer, sharer } = opts;
+    const { eventHub, boardContent, viewer, sharer, calculator } = opts;
     const canvas = boardContent.boardContext.canvas;
-    const textarea = document.createElement("div");
-    textarea.setAttribute("contenteditable", "true");
-    const canvasWrapper = document.createElement("div");
     const container = opts.container || document.body;
-    const mask = document.createElement("div");
+    let textarea = document.createElement("div");
+    textarea.setAttribute("contenteditable", "true");
+    let canvasWrapper = document.createElement("div");
+    let mask = document.createElement("div");
     let activeElem = null;
     let activePosition = [];
+    let originText = "";
     const id = `idraw-middleware-text-editor-${Math.random().toString(26).substring(2)}`;
     mask.setAttribute("id", id);
     canvasWrapper.appendChild(textarea);
@@ -8409,12 +9026,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       resetCanvasWrapper();
       resetTextArea(e);
       mask.style.display = "block";
+      originText = "";
       if (activeElem == null ? void 0 : activeElem.uuid) {
         sharer.setActiveOverrideElemenentMap({
           [activeElem.uuid]: {
             operations: { invisible: true }
           }
         });
+        originText = activeElem.detail.text || "";
         viewer.drawFrame();
       }
     };
@@ -8538,13 +9157,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       canvasWrapper.style.width = `${width}px`;
       canvasWrapper.style.height = `${height}px`;
     };
-    mask.addEventListener("click", () => {
+    const maskClickEvent = () => {
       hideTextArea();
-    });
-    textarea.addEventListener("click", (e) => {
+    };
+    const textareaClickEvent = (e) => {
       e.stopPropagation();
-    });
-    textarea.addEventListener("input", () => {
+    };
+    const textareaInputEvent = () => {
       if (activeElem && activePosition) {
         activeElem.detail.text = textarea.innerText || "";
         eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
@@ -8556,11 +9175,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           },
           position: [...activePosition || []]
         });
+        calculator.modifyText(activeElem);
         viewer.drawFrame();
       }
-    });
-    textarea.addEventListener("blur", () => {
+    };
+    const textareaBlurEvent = () => {
       if (activeElem && activePosition) {
+        activeElem.detail.text = textarea.innerText || "";
         eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
           element: {
             uuid: activeElem.uuid,
@@ -8570,22 +9191,66 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           },
           position: [...activePosition]
         });
+        const data = sharer.getActiveStorage("data") || { elements: [] };
+        const updateContent = {
+          detail: {
+            text: activeElem.detail.text
+          }
+        };
+        updateElementInList(activeElem.uuid, updateContent, data.elements);
+        eventHub.trigger(coreEventKeys.CHANGE, {
+          selectedElements: [
+            {
+              ...activeElem,
+              detail: {
+                ...activeElem.detail,
+                ...updateContent.detail
+              }
+            }
+          ],
+          data,
+          type: "modifyElement",
+          modifyRecord: {
+            type: "modifyElement",
+            time: Date.now(),
+            content: {
+              method: "modifyElement",
+              uuid: activeElem.uuid,
+              before: {
+                "detail.text": originText
+              },
+              after: {
+                "detail.text": activeElem.detail.text
+              }
+            }
+          }
+        });
+        calculator.modifyText(activeElem);
+        viewer.drawFrame();
       }
       hideTextArea();
-    });
-    textarea.addEventListener("keydown", (e) => {
+    };
+    const textareaKeyDownEvent = (e) => {
       e.stopPropagation();
-    });
-    textarea.addEventListener("keypress", (e) => {
+    };
+    const textareaKeyPressEvent = (e) => {
       e.stopPropagation();
-    });
-    textarea.addEventListener("keyup", (e) => {
+    };
+    const textareaKeyUpEvent = (e) => {
       e.stopPropagation();
-    });
-    textarea.addEventListener("wheel", (e) => {
+    };
+    const textareaWheelEvent = (e) => {
       e.stopPropagation();
       e.preventDefault();
-    });
+    };
+    mask.addEventListener("click", maskClickEvent);
+    textarea.addEventListener("click", textareaClickEvent);
+    textarea.addEventListener("input", textareaInputEvent);
+    textarea.addEventListener("blur", textareaBlurEvent);
+    textarea.addEventListener("keydown", textareaKeyDownEvent);
+    textarea.addEventListener("keypress", textareaKeyPressEvent);
+    textarea.addEventListener("keyup", textareaKeyUpEvent);
+    textarea.addEventListener("wheel", textareaWheelEvent);
     const textEditCallback = (e) => {
       var _a;
       if ((e == null ? void 0 : e.position) && (e == null ? void 0 : e.element) && ((_a = e == null ? void 0 : e.element) == null ? void 0 : _a.type) === "text") {
@@ -8601,6 +9266,26 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       },
       disuse() {
         eventHub.off(coreEventKeys.TEXT_EDIT, textEditCallback);
+        mask.removeEventListener("click", maskClickEvent);
+        textarea.removeEventListener("click", textareaClickEvent);
+        textarea.removeEventListener("input", textareaInputEvent);
+        textarea.removeEventListener("blur", textareaBlurEvent);
+        textarea.removeEventListener("keydown", textareaKeyDownEvent);
+        textarea.removeEventListener("keypress", textareaKeyPressEvent);
+        textarea.removeEventListener("keyup", textareaKeyUpEvent);
+        textarea.removeEventListener("wheel", textareaWheelEvent);
+        canvasWrapper.removeChild(textarea);
+        mask.removeChild(canvasWrapper);
+        container.removeChild(mask);
+        textarea.remove();
+        canvasWrapper.remove();
+        mask = null;
+        textarea = null;
+        canvasWrapper = null;
+        mask = null;
+        activeElem = null;
+        activePosition = null;
+        originText = null;
       }
     };
   };
@@ -8657,23 +9342,22 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const { left, top, width, height } = clientRect;
       return { left, top, width, height };
     };
-    const contextMenuPointer = document.createElement("div");
-    contextMenuPointer.setAttribute("id", id);
-    contextMenuPointer.style.position = "fixed";
-    contextMenuPointer.style.top = "0";
-    contextMenuPointer.style.bottom = "unset";
-    contextMenuPointer.style.left = "0";
-    contextMenuPointer.style.right = "unset";
-    container.appendChild(contextMenuPointer);
+    let contextMenuPointer = document.createElement("div");
     return {
       name: "@middleware/pointer",
       use() {
+        contextMenuPointer.setAttribute("id", id);
+        contextMenuPointer.style.position = "fixed";
+        contextMenuPointer.style.top = "0";
+        contextMenuPointer.style.bottom = "unset";
+        contextMenuPointer.style.left = "0";
+        contextMenuPointer.style.right = "unset";
+        container.appendChild(contextMenuPointer);
       },
       disuse() {
-      },
-      pointStart(e) {
-      },
-      pointEnd() {
+        container.removeChild(contextMenuPointer);
+        contextMenuPointer.remove();
+        contextMenuPointer = null;
       },
       contextMenu(e) {
         const { point } = e;
@@ -8735,9 +9419,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     resetMiddlewareConfig(middleware, config) {
       __privateGet(this, _board).resetMiddlewareConfig(middleware, config);
     }
-    setData(data, opts) {
+    setData(data) {
       validateElements((data == null ? void 0 : data.elements) || []);
-      __privateGet(this, _board).setData(data, opts);
+      __privateGet(this, _board).setData(data);
     }
     getData() {
       return __privateGet(this, _board).getData();
@@ -8796,6 +9480,227 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     offBoardWatcherEvents() {
       __privateGet(this, _board).offWatcherEvents();
     }
+    createElement(type, element, opts) {
+      const { viewScaleInfo, viewSizeInfo } = this.getViewInfo();
+      return createElement(
+        type,
+        element || {},
+        (opts == null ? void 0 : opts.viewCenter) === true ? {
+          viewScaleInfo,
+          viewSizeInfo
+        } : void 0
+      );
+    }
+    updateElement(element) {
+      const data = this.getData() || { elements: [] };
+      const uuid = element.uuid;
+      const position = getElementPositionFromList(uuid, data.elements);
+      const beforeElem = findElementFromListByPosition(position, data.elements);
+      if (!beforeElem) {
+        return null;
+      }
+      const before = toFlattenElement(beforeElem);
+      const updatedElement = updateElementInListByPosition(position, element, data.elements, { strict: true });
+      const after = toFlattenElement(updatedElement);
+      this.setData(data);
+      this.refresh();
+      const modifyRecord = {
+        type: "updateElement",
+        time: Date.now(),
+        content: { method: "updateElement", uuid, before, after }
+      };
+      return modifyRecord;
+    }
+    modifyElement(element) {
+      const { uuid, ...restElement } = element;
+      const data = this.getData() || { elements: [] };
+      const position = getElementPositionFromList(uuid, data.elements);
+      const beforeElem = findElementFromListByPosition(position, data.elements);
+      if (!beforeElem) {
+        return null;
+      }
+      const modifyRecord = getModifyElementRecord({
+        modifiedElement: element,
+        beforeElement: beforeElem
+      });
+      updateElementInListByPosition(position, restElement, data.elements);
+      this.setData(data);
+      this.refresh();
+      return modifyRecord;
+    }
+    modifyElements(elements) {
+      const data = this.getData() || { elements: [] };
+      let modifyRecord = null;
+      const before = [];
+      const after = [];
+      elements.forEach((element) => {
+        const { uuid, ...restElement } = element;
+        const position = getElementPositionFromList(uuid, data.elements);
+        const beforeElem = findElementFromListByPosition(position, data.elements);
+        if (!beforeElem) {
+          return null;
+        }
+        const tempRecord = getModifyElementRecord({
+          modifiedElement: element,
+          beforeElement: beforeElem
+        });
+        if (tempRecord.content) {
+          before.push({
+            ...tempRecord.content.before,
+            uuid
+          });
+          after.push({
+            ...tempRecord.content.after,
+            uuid
+          });
+        }
+        updateElementInListByPosition(position, restElement, data.elements);
+      });
+      modifyRecord = {
+        type: "modifyElements",
+        time: Date.now(),
+        content: {
+          method: "modifyElements",
+          before,
+          after
+        }
+      };
+      this.setData(data);
+      this.refresh();
+      return modifyRecord;
+    }
+    addElement(element, opts) {
+      var _a;
+      const data = this.getData() || { elements: [] };
+      if (!opts || !((_a = opts == null ? void 0 : opts.position) == null ? void 0 : _a.length)) {
+        data.elements.push(element);
+      } else if (opts == null ? void 0 : opts.position) {
+        const position2 = [...(opts == null ? void 0 : opts.position) || []];
+        insertElementToListByPosition(element, position2, data.elements);
+      }
+      const position = getElementPositionFromList(element.uuid, data.elements);
+      const modifyRecord = {
+        type: "addElement",
+        time: Date.now(),
+        content: { method: "addElement", uuid: element.uuid, position, element: deepClone(element) }
+      };
+      this.setData(data);
+      this.refresh();
+      return modifyRecord;
+    }
+    deleteElement(uuid) {
+      const data = this.getData() || { elements: [] };
+      const position = getElementPositionFromList(uuid, data.elements);
+      const element = findElementFromListByPosition(position, data.elements);
+      const modifyRecord = {
+        type: "deleteElement",
+        time: Date.now(),
+        content: { method: "deleteElement", uuid, position, element: element ? deepClone(element) : null }
+      };
+      deleteElementInList(uuid, data.elements);
+      this.setData(data);
+      this.refresh();
+      return modifyRecord;
+    }
+    moveElement(uuid, to) {
+      const data = this.getData() || { elements: [] };
+      const from = getElementPositionFromList(uuid, data.elements);
+      const modifyRecord = {
+        type: "moveElement",
+        time: Date.now(),
+        content: { method: "moveElement", uuid, from: [...from], to: [...to] }
+      };
+      const { elements: list } = moveElementPosition(data.elements, { from, to });
+      data.elements = list;
+      this.setData(data);
+      this.refresh();
+      return modifyRecord;
+    }
+    modifyLayout(layout) {
+      const data = this.getData() || { elements: [] };
+      const modifyRecord = {
+        type: "modifyLayout",
+        time: Date.now(),
+        content: {
+          method: "modifyLayout",
+          before: null,
+          after: null
+        }
+      };
+      if (layout === null) {
+        if (data.layout) {
+          modifyRecord.content.before = toFlattenLayout(data.layout);
+          delete data["layout"];
+          this.setData(data);
+          this.refresh();
+          return modifyRecord;
+        } else {
+          return modifyRecord;
+        }
+      }
+      const beforeLayout = data.layout;
+      let before = {};
+      const after = toFlattenLayout(layout);
+      if (data.layout) {
+        Object.keys(after).forEach((key2) => {
+          let val = get(beforeLayout, key2);
+          if (val === void 0 && /(borderRadius|borderWidth)\[[0-9]{1,}\]$/.test(key2)) {
+            key2 = key2.replace(/\[[0-9]{1,}\]$/, "");
+            val = get(beforeLayout, key2);
+          }
+          before[key2] = val;
+        });
+        before = toFlattenLayout(before);
+        modifyRecord.content.before = before;
+      } else {
+        data.layout = {};
+      }
+      modifyRecord.content.after = after;
+      mergeLayout(data.layout, layout);
+      this.setData(data);
+      this.refresh();
+      return modifyRecord;
+    }
+    modifyGlobal(global) {
+      const data = this.getData() || { elements: [] };
+      const modifyRecord = {
+        type: "modifyGlobal",
+        time: Date.now(),
+        content: {
+          method: "modifyGlobal",
+          before: null,
+          after: null
+        }
+      };
+      if (global === null) {
+        if (data.global) {
+          modifyRecord.content.before = toFlattenGlobal(data.global);
+          delete data["global"];
+          this.setData(data);
+          this.refresh();
+          return modifyRecord;
+        } else {
+          return modifyRecord;
+        }
+      }
+      const beforeGlobal = data.global;
+      let before = {};
+      const after = toFlattenGlobal(global);
+      if (data.global) {
+        Object.keys(after).forEach((key2) => {
+          before[key2] = get(beforeGlobal, key2);
+        });
+        before = toFlattenGlobal(before);
+        modifyRecord.content.before = before;
+      } else {
+        data.global = {};
+      }
+      modifyRecord.content.after = after;
+      mergeGlobal(data.global, global);
+      this.setData(data);
+      this.refresh();
+      return modifyRecord;
+    }
   }
   _board = new WeakMap();
   _canvas = new WeakMap();