@idraw/core 0.4.0-beta.44 → 0.4.0-beta.45

package/dist/esm/board/index.js

@@ -189,25 +189,33 @@ export class Board {
         return __classPrivateFieldGet(this, _Board_eventHub, "f");
     }
     onWatcherEvents() {
+        if (__classPrivateFieldGet(this, _Board_opts, "f").disableWatcher === true) {
+            return;
+        }
         __classPrivateFieldGet(this, _Board_watcher, "f").onEvents();
     }
     offWatcherEvents() {
+        if (__classPrivateFieldGet(this, _Board_opts, "f").disableWatcher === true) {
+            return;
+        }
         __classPrivateFieldGet(this, _Board_watcher, "f").offEvents();
     }
 }
 _Board_opts = new WeakMap(), _Board_middlewareMap = new WeakMap(), _Board_activeMiddlewareObjs = new WeakMap(), _Board_watcher = new WeakMap(), _Board_renderer = new WeakMap(), _Board_sharer = new WeakMap(), _Board_viewer = new WeakMap(), _Board_calculator = new WeakMap(), _Board_eventHub = new WeakMap(), _Board_hasDestroyed = new WeakMap(), _Board_instances = new WeakSet(), _Board_init = function _Board_init() {
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('pointStart', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('pointEnd', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('pointMove', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('pointLeave', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointLeave).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('hover', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('wheel', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('wheelScale', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('scrollX', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollX).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('scrollY', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollY).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('resize', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleResize).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('doubleClick', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleDoubleClick).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on('contextMenu', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleContextMenu).bind(this));
+    if (__classPrivateFieldGet(this, _Board_opts, "f").disableWatcher !== true) {
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('pointStart', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('pointEnd', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('pointMove', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('pointLeave', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointLeave).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('hover', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('wheel', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('wheelScale', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('scrollX', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollX).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('scrollY', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollY).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('resize', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleResize).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('doubleClick', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleDoubleClick).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('contextMenu', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleContextMenu).bind(this));
+    }
     __classPrivateFieldGet(this, _Board_renderer, "f").on('load', () => {
         __classPrivateFieldGet(this, _Board_eventHub, "f").trigger('loadResource');
     });

package/dist/esm/index.js

@@ -43,7 +43,7 @@ export class Core {
         _Core_board.set(this, void 0);
         _Core_canvas.set(this, void 0);
         _Core_container.set(this, void 0);
-        const { devicePixelRatio = 1, width, height } = opts;
+        const { devicePixelRatio = 1, width, height, disableWatcher = false } = opts;
         __classPrivateFieldSet(this, _Core_container, container, "f");
         const canvas = document.createElement('canvas');
         canvas.setAttribute('tabindex', '0');
@@ -51,7 +51,7 @@ export class Core {
         __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
         const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio });
-        const board = new Board({ boardContent, container });
+        const board = new Board({ boardContent, container, disableWatcher });
         const sharer = board.getSharer();
         sharer.setActiveViewSizeInfo({
             width,

package/dist/esm/middleware/selector/index.js

@@ -1,4 +1,4 @@
-import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, deepResizeGroupElement, getElementSize, calcPointMoveElementInGroup, isSameElementSize, toFlattenElement } from '@idraw/util';
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, resizeEffectGroupElement, getElementSize, calcPointMoveElementInGroup, isSameElementSize, toFlattenElement } from '@idraw/util';
 import { drawHoverVertexesWrapper, drawLockedVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup } from './util';
@@ -503,17 +503,25 @@ export const MiddlewareSelector = (opts, config) => {
                     else {
                         const resizedElemSize = resizeElement(Object.assign(Object.assign({}, moveOriginalStartElementSize), { operations: elems[0].operations }), { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
                         const calcOpts = { ignore: !!moveOriginalStartElementSize.angle };
-                        elems[0].x = calculator.toGridNum(resizedElemSize.x, calcOpts);
-                        elems[0].y = calculator.toGridNum(resizedElemSize.y, calcOpts);
-                        if (elems[0].type === 'group' && ((_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.deepResize) === true) {
-                            deepResizeGroupElement(elems[0], {
-                                w: calculator.toGridNum(resizedElemSize.w, calcOpts),
-                                h: calculator.toGridNum(resizedElemSize.h, calcOpts)
-                            });
+                        const gridX = calculator.toGridNum(resizedElemSize.x, calcOpts);
+                        const gridY = calculator.toGridNum(resizedElemSize.y, calcOpts);
+                        const gridW = calculator.toGridNum(resizedElemSize.w, calcOpts);
+                        const gridH = calculator.toGridNum(resizedElemSize.h, calcOpts);
+                        if (elems[0].type === 'group') {
+                            resizeEffectGroupElement(elems[0], {
+                                x: gridX,
+                                y: gridY,
+                                w: gridW,
+                                h: gridH
+                            }, { resizeEffect: (_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.resizeEffect });
+                            elems[0].x = gridX;
+                            elems[0].y = gridY;
                         }
                         else {
-                            elems[0].w = calculator.toGridNum(resizedElemSize.w, calcOpts);
-                            elems[0].h = calculator.toGridNum(resizedElemSize.h, calcOpts);
+                            elems[0].x = gridX;
+                            elems[0].y = gridY;
+                            elems[0].w = gridW;
+                            elems[0].h = gridH;
                         }
                     }
                     updateSelectedElementList([elems[0]]);

package/dist/esm/middleware/selector/util.js

@@ -61,6 +61,7 @@ export function getPointTarget(p, opts) {
                 if (selectedElements && (selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.length) > 0) {
                     target.groupQueue = groupQueue || [];
                     target.elements = [selectedElements[0]];
+                    return target;
                 }
                 break;
             }

package/dist/index.global.js

@@ -2135,94 +2135,247 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const doNum = (n) => {
     return formatNumber(n, { decimalPlaces: 4 });
   };
-  function resizeElementBaseDetail(elem, opts) {
+  function resizeElementBaseDetailByRatio(elem, opts) {
+    const beforeElem = { detail: {} };
+    const afterElem = { detail: {} };
+    const record = {
+      type: "modifyElement",
+      time: Date.now(),
+      content: {
+        method: "modifyElement",
+        uuid: elem.uuid,
+        before: null,
+        after: null
+      }
+    };
     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);
+      beforeElem.detail.borderWidth = borderWidth2;
+      afterElem.detail.borderWidth = detail.borderWidth;
     } 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)];
+      beforeElem.detail.borderWidth = [...bw];
+      afterElem.detail.borderWidth = [...detail.borderWidth];
     }
     if (typeof borderRadius2 === "number") {
       detail.borderRadius = doNum(borderRadius2 * middleRatio);
+      beforeElem.detail.borderRadius = borderRadius2;
+      afterElem.detail.borderRadius = detail.borderRadius;
     } else if (Array.isArray(detail.borderRadius)) {
       const br = borderRadius2;
       detail.borderRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+      beforeElem.detail.borderRadius = [...br];
+      afterElem.detail.borderRadius = [...detail.borderRadius];
     }
     if (Array.isArray(borderDash)) {
       borderDash.forEach((dash, i) => {
         detail.borderDash[i] = doNum(dash * maxRatio);
       });
+      beforeElem.detail.borderDash = [...borderDash];
+      afterElem.detail.borderDash = [...detail.borderDash];
     }
     if (typeof shadowOffsetX === "number") {
       detail.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+      beforeElem.detail.shadowOffsetX = shadowOffsetX;
+      afterElem.detail.shadowOffsetX = detail.shadowOffsetX;
     }
     if (typeof shadowOffsetY === "number") {
-      detail.shadowOffsetX = doNum(shadowOffsetY * maxRatio);
+      detail.shadowOffsetY = doNum(shadowOffsetY * maxRatio);
+      beforeElem.detail.shadowOffsetY = shadowOffsetY;
+      afterElem.detail.shadowOffsetY = detail.shadowOffsetY;
     }
     if (typeof shadowBlur === "number") {
-      detail.shadowOffsetX = doNum(shadowBlur * maxRatio);
+      detail.shadowBlur = doNum(shadowBlur * maxRatio);
+      beforeElem.detail.shadowBlur = shadowBlur;
+      afterElem.detail.shadowBlur = detail.shadowBlur;
     }
+    record.content.before = toFlattenElement(beforeElem);
+    record.content.after = toFlattenElement(afterElem);
+    return record;
   }
-  function resizeElementBase(elem, opts) {
+  function resizeElementBaseByRatio(elem, opts) {
     const { xRatio, yRatio } = opts;
-    const { x: x2, y: y2, w: w2, h: h2 } = elem;
+    const { uuid, x: x2, y: y2, w: w2, h: h2 } = elem;
+    const record = {
+      type: "modifyElement",
+      time: Date.now(),
+      content: {
+        method: "modifyElement",
+        uuid,
+        before: { x: x2, y: y2, w: w2, h: h2 },
+        after: { x: x2, y: y2, w: w2, h: h2 }
+      }
+    };
     elem.x = doNum(x2 * xRatio);
     elem.y = doNum(y2 * yRatio);
     elem.w = doNum(w2 * xRatio);
     elem.h = doNum(h2 * yRatio);
-    resizeElementBaseDetail(elem, opts);
+    const detailRecord = resizeElementBaseDetailByRatio(elem, opts);
+    record.content.before = Object.assign(Object.assign({}, record.content.before), detailRecord.content.before);
+    record.content.after = Object.assign(Object.assign({}, record.content.after), detailRecord.content.after);
+    return record;
   }
-  function resizeTextElementDetail(elem, opts) {
+  function resizeTextElementDetailByRatio(elem, opts) {
     const { minRatio, maxRatio } = opts;
     const { fontSize: fontSize2, lineHeight: lineHeight2 } = elem.detail;
     const ratio = (minRatio + maxRatio) / 2;
+    const beforeFlattenElem = {};
+    const afterFlattenElem = {};
     if (fontSize2 && fontSize2 > 0) {
       elem.detail.fontSize = doNum(fontSize2 * ratio);
+      beforeFlattenElem["detail.fontSize"] = fontSize2;
+      afterFlattenElem["detail.fontSize"] = elem.detail.fontSize;
     }
     if (lineHeight2 && lineHeight2 > 0) {
       elem.detail.lineHeight = doNum(lineHeight2 * ratio);
+      beforeFlattenElem["detail.lineHeight"] = lineHeight2;
+      afterFlattenElem["detail.lineHeight"] = elem.detail.lineHeight;
     }
+    const record = {
+      type: "modifyElement",
+      time: Date.now(),
+      content: {
+        method: "modifyElement",
+        uuid: elem.uuid,
+        before: beforeFlattenElem,
+        after: afterFlattenElem
+      }
+    };
+    return record;
   }
-  function resizeElement$1(elem, opts) {
-    const { type } = elem;
-    resizeElementBase(elem, opts);
+  function deepResizeElementByRatio(elem, opts, record) {
+    const { type, uuid } = elem;
+    const rootRecord = resizeElementBaseByRatio(elem, opts);
+    const rootRecordBefore = Object.assign(Object.assign({}, rootRecord.content.before), { uuid });
+    const rootRecordAfter = Object.assign(Object.assign({}, rootRecord.content.after), { uuid });
+    record === null || record === void 0 ? void 0 : record.content.before.push(rootRecordBefore);
+    record === null || record === void 0 ? void 0 : record.content.after.push(rootRecordAfter);
     if (type === "circle") ;
     else if (type === "text") {
-      resizeTextElementDetail(elem, opts);
+      const textRecord = resizeTextElementDetailByRatio(elem, opts);
+      Object.keys(textRecord.content.before || {}).forEach((key2) => {
+        var _a;
+        rootRecordBefore[key2] = (_a = textRecord.content.before) === null || _a === void 0 ? void 0 : _a[key2];
+      });
+      Object.keys(textRecord.content.after || {}).forEach((key2) => {
+        var _a;
+        rootRecordAfter[key2] = (_a = textRecord.content.after) === null || _a === void 0 ? void 0 : _a[key2];
+      });
     } 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$1(child, opts);
+        deepResizeElementByRatio(child, opts, record);
       });
     }
   }
-  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;
+  function fixedResizeGroupElementChildren(elem, opts, record) {
+    if (!(elem.type === "group" && Array.isArray(elem.detail.children))) {
+      return;
     }
-    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$1(child, opts);
+    const { moveX, moveY, moveH, moveW } = opts;
+    let childChangedX = 0;
+    let childChangedY = 0;
+    let needReszieChildren = false;
+    if ((moveX !== 0 || moveY !== 0) && (moveH !== 0 || moveW !== 0)) {
+      needReszieChildren = true;
+      childChangedX = -moveX;
+      childChangedY = -moveY;
+    }
+    if (needReszieChildren !== true) {
+      return;
+    }
+    elem.detail.children.forEach((child) => {
+      const { uuid, x: x2, y: y2 } = child;
+      const afterX = x2 + childChangedX;
+      const afterY = y2 + childChangedY;
+      const before = { uuid, x: x2, y: y2 };
+      const after = { uuid, x: afterX, y: afterY };
+      child.x = afterX;
+      child.y = afterY;
+      record === null || record === void 0 ? void 0 : record.content.before.push(before);
+      record === null || record === void 0 ? void 0 : record.content.after.push(after);
+    });
+  }
+  function resizeEffectGroupElement(elem, size, opts) {
+    if (!istype.number(size.x) && !istype.number(size.y)) {
+      return null;
+    }
+    const record = {
+      type: "modifyElements",
+      time: Date.now(),
+      content: {
+        method: "modifyElements",
+        before: [],
+        after: []
+      }
+    };
+    const uuid = elem.uuid;
+    const originX = elem.x;
+    const originY = elem.y;
+    const originW = elem.w;
+    const originH = elem.h;
+    const resizeX = istype.number(size.x) ? size.x : elem.x;
+    const resizeY = istype.number(size.y) ? size.y : elem.y;
+    const resizeW = (size.w && size.w > 0 ? size.w : elem.w) || 0;
+    const resizeH = (size.h && size.h > 0 ? size.h : elem.h) || 0;
+    const beforeGroupElem = { uuid, x: originX, y: originY, w: originW, h: originH };
+    const afterGroupElem = { uuid, x: resizeX, y: resizeY, w: resizeW, h: resizeH };
+    if ((opts === null || opts === void 0 ? void 0 : opts.resizeEffect) === "deepResize") {
+      const xRatio = resizeW / elem.w;
+      const yRatio = resizeH / elem.h;
+      if (xRatio === yRatio && xRatio === 1) {
+        return record;
+      }
+      const minRatio = Math.min(xRatio, yRatio);
+      const maxRatio = Math.max(xRatio, yRatio);
+      elem.w = resizeW;
+      elem.h = resizeH;
+      const resizeRadioOpts = { xRatio, yRatio, minRatio, maxRatio };
+      if (elem.type === "group" && Array.isArray(elem.detail.children)) {
+        elem.detail.children.forEach((child) => {
+          deepResizeElementByRatio(child, resizeRadioOpts, record);
+        });
+      }
+      const groupDetailRecord = resizeElementBaseDetailByRatio(elem, resizeRadioOpts);
+      Object.keys(groupDetailRecord.content.before || {}).forEach((key2) => {
+        var _a;
+        beforeGroupElem[key2] = (_a = groupDetailRecord.content.before) === null || _a === void 0 ? void 0 : _a[key2];
       });
+      Object.keys(groupDetailRecord.content.after || {}).forEach((key2) => {
+        var _a;
+        afterGroupElem[key2] = (_a = groupDetailRecord.content.after) === null || _a === void 0 ? void 0 : _a[key2];
+      });
+      return record;
+    }
+    if ((opts === null || opts === void 0 ? void 0 : opts.resizeEffect) === "fixed") {
+      record.content.before.push(beforeGroupElem);
+      record.content.after.push(afterGroupElem);
+      const moveX = resizeX - elem.x;
+      const moveY = resizeY - elem.y;
+      const moveW = resizeW - elem.w;
+      const moveH = resizeH - elem.h;
+      fixedResizeGroupElementChildren(elem, { moveX, moveY, moveH, moveW }, record);
+      elem.w = resizeW;
+      elem.h = resizeH;
+      elem.x = resizeX;
+      elem.y = resizeY;
+      return record;
     }
-    resizeElementBaseDetail(elem, opts);
-    return elem;
+    elem.w = resizeW;
+    elem.h = resizeH;
+    elem.x = resizeX;
+    elem.y = resizeY;
+    record.content.before.push(beforeGroupElem);
+    record.content.after.push(afterGroupElem);
+    return record;
   }
   const defaultViewWidth = 200;
   const defaultViewHeight = 200;
@@ -2446,39 +2599,33 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return originElem;
   }
   function updateElementInList(uuid, updateContent, elements) {
-    var _a, _b;
+    var _a, _b, _c;
     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
-            });
-          }
+        if (elem.type === "group" && ((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.resizeEffect)) {
+          resizeEffectGroupElement(elem, Object.assign({}, updateContent), {
+            resizeEffect: (_b = elem.operations) === null || _b === void 0 ? void 0 : _b.resizeEffect
+          });
         }
         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) || []);
+        targetElement = updateElementInList(uuid, updateContent, ((_c = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _c === void 0 ? void 0 : _c.children) || []);
       }
     }
     return targetElement;
   }
   function updateElementInListByPosition(position, updateContent, elements, opts) {
-    var _a;
+    var _a, _b;
     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
-          });
-        }
+      if (elem.type === "group" && ((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.resizeEffect)) {
+        resizeEffectGroupElement(elem, Object.assign({}, updateContent), {
+          resizeEffect: (_b = elem.operations) === null || _b === void 0 ? void 0 : _b.resizeEffect
+        });
       }
       mergeElement(elem, updateContent, opts);
     }
@@ -3563,14 +3710,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __classPrivateFieldSet$2(this, _Loader_storageLoadItemMap, {}, "f");
     }
     resetElementAsset(element) {
+      var _a, _b, _c;
       if (supportElementTypes.includes(element.type)) {
         let assetId = null;
         let resource = null;
-        if (element.type === "image" && typeof element.detail.src === "string") {
+        if (element.type === "image" && typeof ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) === "string") {
           resource = element.detail.src;
-        } else if (element.type === "svg" && typeof element.detail.svg === "string") {
+        } else if (element.type === "svg" && typeof ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) === "string") {
           resource = element.detail.svg;
-        } else if (element.type === "html" && typeof element.detail.html === "string") {
+        } else if (element.type === "html" && typeof ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) === "string") {
           resource = element.detail.html;
         }
         if (typeof resource === "string") {
@@ -4876,9 +5024,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return __privateGet(this, _eventHub);
     }
     onWatcherEvents() {
+      if (__privateGet(this, _opts3).disableWatcher === true) {
+        return;
+      }
       __privateGet(this, _watcher).onEvents();
     }
     offWatcherEvents() {
+      if (__privateGet(this, _opts3).disableWatcher === true) {
+        return;
+      }
       __privateGet(this, _watcher).offEvents();
     }
   }
@@ -4894,18 +5048,20 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _hasDestroyed2 = new WeakMap();
   _Board_instances = new WeakSet();
   init_fn3 = function() {
-    __privateGet(this, _watcher).on("pointStart", __privateMethod(this, _Board_instances, handlePointStart_fn).bind(this));
-    __privateGet(this, _watcher).on("pointEnd", __privateMethod(this, _Board_instances, handlePointEnd_fn).bind(this));
-    __privateGet(this, _watcher).on("pointMove", __privateMethod(this, _Board_instances, handlePointMove_fn).bind(this));
-    __privateGet(this, _watcher).on("pointLeave", __privateMethod(this, _Board_instances, handlePointLeave_fn).bind(this));
-    __privateGet(this, _watcher).on("hover", __privateMethod(this, _Board_instances, handleHover_fn).bind(this));
-    __privateGet(this, _watcher).on("wheel", __privateMethod(this, _Board_instances, handleWheel_fn).bind(this));
-    __privateGet(this, _watcher).on("wheelScale", __privateMethod(this, _Board_instances, handleWheelScale_fn).bind(this));
-    __privateGet(this, _watcher).on("scrollX", __privateMethod(this, _Board_instances, handleScrollX_fn).bind(this));
-    __privateGet(this, _watcher).on("scrollY", __privateMethod(this, _Board_instances, handleScrollY_fn).bind(this));
-    __privateGet(this, _watcher).on("resize", __privateMethod(this, _Board_instances, handleResize_fn).bind(this));
-    __privateGet(this, _watcher).on("doubleClick", __privateMethod(this, _Board_instances, handleDoubleClick_fn).bind(this));
-    __privateGet(this, _watcher).on("contextMenu", __privateMethod(this, _Board_instances, handleContextMenu_fn).bind(this));
+    if (__privateGet(this, _opts3).disableWatcher !== true) {
+      __privateGet(this, _watcher).on("pointStart", __privateMethod(this, _Board_instances, handlePointStart_fn).bind(this));
+      __privateGet(this, _watcher).on("pointEnd", __privateMethod(this, _Board_instances, handlePointEnd_fn).bind(this));
+      __privateGet(this, _watcher).on("pointMove", __privateMethod(this, _Board_instances, handlePointMove_fn).bind(this));
+      __privateGet(this, _watcher).on("pointLeave", __privateMethod(this, _Board_instances, handlePointLeave_fn).bind(this));
+      __privateGet(this, _watcher).on("hover", __privateMethod(this, _Board_instances, handleHover_fn).bind(this));
+      __privateGet(this, _watcher).on("wheel", __privateMethod(this, _Board_instances, handleWheel_fn).bind(this));
+      __privateGet(this, _watcher).on("wheelScale", __privateMethod(this, _Board_instances, handleWheelScale_fn).bind(this));
+      __privateGet(this, _watcher).on("scrollX", __privateMethod(this, _Board_instances, handleScrollX_fn).bind(this));
+      __privateGet(this, _watcher).on("scrollY", __privateMethod(this, _Board_instances, handleScrollY_fn).bind(this));
+      __privateGet(this, _watcher).on("resize", __privateMethod(this, _Board_instances, handleResize_fn).bind(this));
+      __privateGet(this, _watcher).on("doubleClick", __privateMethod(this, _Board_instances, handleDoubleClick_fn).bind(this));
+      __privateGet(this, _watcher).on("contextMenu", __privateMethod(this, _Board_instances, handleContextMenu_fn).bind(this));
+    }
     __privateGet(this, _renderer).on("load", () => {
       __privateGet(this, _eventHub).trigger("loadResource");
     });
@@ -5617,6 +5773,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           if (selectedElements && (selectedElements == null ? void 0 : selectedElements.length) > 0) {
             target.groupQueue = groupQueue || [];
             target.elements = [selectedElements[0]];
+            return target;
           }
           break;
         }
@@ -7951,16 +8108,28 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 { scale, start: resizeStart, end: resizeEnd, resizeType }
               );
               const calcOpts = { ignore: !!moveOriginalStartElementSize.angle };
-              elems[0].x = calculator.toGridNum(resizedElemSize.x, calcOpts);
-              elems[0].y = calculator.toGridNum(resizedElemSize.y, calcOpts);
-              if (elems[0].type === "group" && ((_c = elems[0].operations) == null ? void 0 : _c.deepResize) === true) {
-                deepResizeGroupElement(elems[0], {
-                  w: calculator.toGridNum(resizedElemSize.w, calcOpts),
-                  h: calculator.toGridNum(resizedElemSize.h, calcOpts)
-                });
+              const gridX = calculator.toGridNum(resizedElemSize.x, calcOpts);
+              const gridY = calculator.toGridNum(resizedElemSize.y, calcOpts);
+              const gridW = calculator.toGridNum(resizedElemSize.w, calcOpts);
+              const gridH = calculator.toGridNum(resizedElemSize.h, calcOpts);
+              if (elems[0].type === "group") {
+                resizeEffectGroupElement(
+                  elems[0],
+                  {
+                    x: gridX,
+                    y: gridY,
+                    w: gridW,
+                    h: gridH
+                  },
+                  { resizeEffect: (_c = elems[0].operations) == null ? void 0 : _c.resizeEffect }
+                );
+                elems[0].x = gridX;
+                elems[0].y = gridY;
               } else {
-                elems[0].w = calculator.toGridNum(resizedElemSize.w, calcOpts);
-                elems[0].h = calculator.toGridNum(resizedElemSize.h, calcOpts);
+                elems[0].x = gridX;
+                elems[0].y = gridY;
+                elems[0].w = gridW;
+                elems[0].h = gridH;
               }
             }
             updateSelectedElementList([elems[0]]);
@@ -9416,7 +9585,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       // #opts: CoreOptions;
       __privateAdd(this, _canvas);
       __privateAdd(this, _container2);
-      const { devicePixelRatio = 1, width, height } = opts;
+      const { devicePixelRatio = 1, width, height, disableWatcher = false } = opts;
       __privateSet(this, _container2, container);
       const canvas = document.createElement("canvas");
       canvas.setAttribute("tabindex", "0");
@@ -9424,7 +9593,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateMethod(this, _Core_instances, initContainer_fn).call(this);
       container.appendChild(canvas);
       const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio });
-      const board = new Board({ boardContent, container });
+      const board = new Board({ boardContent, container, disableWatcher });
       const sharer = board.getSharer();
       sharer.setActiveViewSizeInfo({
         width,