@idraw/core 0.4.0-beta.15 → 0.4.0-beta.17

package/dist/index.global.js

@@ -23,18 +23,6 @@ var __privateMethod = (obj, member, method) => {
 };
 
   var _eventHub, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _init, init_fn, _loadResizeCursorBaseImage, loadResizeCursorBaseImage_fn, _resetCursor, resetCursor_fn, _setCursorResize, setCursorResize_fn, _appendRotateResizeImage, appendRotateResizeImage_fn, _board, _canvas, _container2, _initContainer, initContainer_fn;
-  function throttle(fn, timeout) {
-    let timer = -1;
-    return function(...args) {
-      if (timer >= 0) {
-        return;
-      }
-      timer = setTimeout(() => {
-        fn(...args);
-        timer = -1;
-      }, timeout);
-    };
-  }
   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));
   }
@@ -851,8 +839,11 @@ var __privateMethod = (obj, member, method) => {
     get(name) {
       return __classPrivateFieldGet$7(this, _Store_temp, "f")[name];
     }
-    getSnapshot() {
-      return deepClone(__classPrivateFieldGet$7(this, _Store_temp, "f"));
+    getSnapshot(opts) {
+      if ((opts === null || opts === void 0 ? void 0 : opts.deepClone) === true) {
+        return deepClone(__classPrivateFieldGet$7(this, _Store_temp, "f"));
+      }
+      return Object.assign({}, __classPrivateFieldGet$7(this, _Store_temp, "f"));
     }
     clear() {
       __classPrivateFieldSet$7(this, _Store_temp, __classPrivateFieldGet$7(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
@@ -1200,6 +1191,24 @@ var __privateMethod = (obj, member, method) => {
     _scan(uuid, elements);
     return groupQueue;
   }
+  function getGroupQueueByElementPosition(elements, position) {
+    var _a;
+    const groupQueue = [];
+    let currentElements = elements;
+    if (position.length > 1) {
+      for (let i = 0; i < position.length - 1; i++) {
+        const index = position[i];
+        const group = currentElements[index];
+        if ((group === null || group === void 0 ? void 0 : group.type) === "group" && Array.isArray((_a = group === null || group === void 0 ? void 0 : group.detail) === null || _a === void 0 ? void 0 : _a.children)) {
+          groupQueue.push(group);
+          currentElements = group.detail.children;
+        } else {
+          return null;
+        }
+      }
+    }
+    return groupQueue;
+  }
   function findElementsFromListByPositions(positions, list) {
     const elements = [];
     positions.forEach((pos) => {
@@ -1253,15 +1262,86 @@ var __privateMethod = (obj, member, method) => {
     return result;
   }
   function checkRectIntersect(rect1, rect2) {
-    const react1MinX = rect1.x;
-    const react1MinY = rect1.y;
-    const react1MaxX = rect1.x + rect1.w;
-    const react1MaxY = rect1.y + rect1.h;
-    const react2MinX = rect2.x;
-    const react2MinY = rect2.y;
-    const react2MaxX = rect2.x + rect2.w;
-    const react2MaxY = rect2.y + rect2.h;
-    return react1MinX <= react2MaxX && react1MaxX >= react2MinX && react1MinY <= react2MaxY && react1MaxY >= react2MinY;
+    const rect1MinX = rect1.x;
+    const rect1MinY = rect1.y;
+    const rect1MaxX = rect1.x + rect1.w;
+    const rect1MaxY = rect1.y + rect1.h;
+    const rect2MinX = rect2.x;
+    const rect2MinY = rect2.y;
+    const rect2MaxX = rect2.x + rect2.w;
+    const rect2MaxY = rect2.y + rect2.h;
+    return rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY;
+  }
+  function getElementVertexes(elemSize) {
+    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
+    return [
+      { x: x2, y: y2 },
+      { x: x2 + w2, y: y2 },
+      { x: x2 + w2, y: y2 + h2 },
+      { x: x2, y: y2 + h2 }
+    ];
+  }
+  function calcElementVertexes(elemSize) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    if (angle2 === 0) {
+      return getElementVertexes(elemSize);
+    }
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
+  }
+  function calcElementQueueVertexesQueueInGroup(groupQueue) {
+    const vesList = [];
+    let totalX = 0;
+    let totalY = 0;
+    const rotateActionList = [];
+    const elemQueue = [...groupQueue];
+    for (let i = 0; i < elemQueue.length; i++) {
+      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
+      totalX += x2;
+      totalY += y2;
+      let ves;
+      if (i === 0) {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        rotateActionList.push({
+          center: calcElementCenter(elemSize),
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      } else {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        ves = getElementVertexes(elemSize);
+        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
+          const { center, radian } = rotateActionList[aIdx];
+          ves = rotateVertexes(center, ves, radian);
+        }
+        const vesCenter = calcElementCenterFromVertexes(ves);
+        if (angle2 > 0 || angle2 < 0) {
+          const radian = parseAngleToRadian(angle2);
+          ves = rotateVertexes(vesCenter, ves, radian);
+        }
+        rotateActionList.push({
+          center: vesCenter,
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      }
+      vesList.push(ves);
+    }
+    return vesList;
+  }
+  function calcElementVertexesQueueInGroup(targetElem, opts) {
+    const { groupQueue } = opts;
+    if (!(groupQueue.length > 0)) {
+      return [calcElementVertexes(targetElem)];
+    }
+    const elemQueue = [...groupQueue, ...[targetElem]];
+    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    return vesList;
+  }
+  function calcElementVertexesInGroup(targetElem, opts) {
+    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+    const ves = vesList.pop();
+    return ves || null;
   }
   function calcViewScaleInfo(info, opts) {
     const { scale, offsetX, offsetY } = info;
@@ -1446,76 +1526,152 @@ var __privateMethod = (obj, member, method) => {
     const elemSize = { x: elemStartX, y: elemStartY, w: elemEndX - elemStartX, h: elemEndY - elemStartY };
     return checkRectIntersect(viewSize, elemSize);
   }
-  function getElementVertexes(elemSize) {
-    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
-    return [
-      { x: x2, y: y2 },
-      { x: x2 + w2, y: y2 },
-      { x: x2 + w2, y: y2 + h2 },
-      { x: x2, y: y2 + h2 }
-    ];
-  }
-  function calcElementVertexes(elemSize) {
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
-    if (angle2 === 0) {
-      return getElementVertexes(elemSize);
-    }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
-  }
-  function calcElementQueueVertexesQueueInGroup(groupQueue) {
-    const vesList = [];
-    let totalX = 0;
-    let totalY = 0;
-    const rotateActionList = [];
-    const elemQueue = [...groupQueue];
-    for (let i = 0; i < elemQueue.length; i++) {
-      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
-      totalX += x2;
-      totalY += y2;
-      let ves;
-      if (i === 0) {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
-        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
-        rotateActionList.push({
-          center: calcElementCenter(elemSize),
-          angle: angle2,
-          radian: parseAngleToRadian(angle2)
-        });
-      } else {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
-        ves = getElementVertexes(elemSize);
-        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
-          const { center, radian } = rotateActionList[aIdx];
-          ves = rotateVertexes(center, ves, radian);
-        }
-        const vesCenter = calcElementCenterFromVertexes(ves);
-        if (angle2 > 0 || angle2 < 0) {
-          const radian = parseAngleToRadian(angle2);
-          ves = rotateVertexes(vesCenter, ves, radian);
-        }
-        rotateActionList.push({
-          center: vesCenter,
-          angle: angle2,
-          radian: parseAngleToRadian(angle2)
+  function calcElementOriginRectInfo(elemSize, opts) {
+    const { groupQueue } = opts;
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const top = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
+    const right = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
+    const bottom = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
+    const left = getCenterFromTwoPoints(vertexes[3], vertexes[0]);
+    const topLeft = vertexes[0];
+    const topRight = vertexes[1];
+    const bottomRight = vertexes[2];
+    const bottomLeft = vertexes[3];
+    const maxX = Math.max(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const maxY = Math.max(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const minX = Math.min(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const minY = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const center = {
+      x: (maxX + minX) / 2,
+      y: (maxY + minY) / 2
+    };
+    const rectInfo = {
+      center,
+      topLeft,
+      topRight,
+      bottomLeft,
+      bottomRight,
+      top,
+      right,
+      left,
+      bottom
+    };
+    return rectInfo;
+  }
+  function originRectInfoToRangeRectInfo(originRectInfo) {
+    const rangeMaxX = Math.max(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
+    const rangeMaxY = Math.max(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
+    const rangeMinX = Math.min(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
+    const rangeMinY = Math.min(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
+    const rangeCenter = { x: originRectInfo.center.x, y: originRectInfo.center.y };
+    const rangeTopLeft = { x: rangeMinX, y: rangeMinY };
+    const rangeTopRight = { x: rangeMaxX, y: rangeMinY };
+    const rangeBottomRight = { x: rangeMaxX, y: rangeMaxY };
+    const rangeBottomLeft = { x: rangeMinX, y: rangeMaxY };
+    const rangeTop = getCenterFromTwoPoints(rangeTopLeft, rangeTopRight);
+    const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
+    const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
+    const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
+    const rangeRectInfo = {
+      center: rangeCenter,
+      topLeft: rangeTopLeft,
+      topRight: rangeTopRight,
+      bottomLeft: rangeBottomLeft,
+      bottomRight: rangeBottomRight,
+      top: rangeTop,
+      right: rangeRight,
+      left: rangeLeft,
+      bottom: rangeBottom
+    };
+    return rangeRectInfo;
+  }
+  function sortElementsViewVisiableInfoMap(elements, opts) {
+    const visibleInfoMap = {};
+    const currentPosition = [];
+    const _walk = (elem) => {
+      const baseInfo = {
+        isVisibleInView: true,
+        isGroup: elem.type === "group",
+        position: [...currentPosition]
+      };
+      let originRectInfo = null;
+      const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
+      originRectInfo = calcElementOriginRectInfo(elem, {
+        groupQueue: groupQueue || []
+      });
+      visibleInfoMap[elem.uuid] = Object.assign(Object.assign({}, baseInfo), {
+        originRectInfo,
+        rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
+      });
+      if (elem.type === "group") {
+        elem.detail.children.forEach((ele, i) => {
+          currentPosition.push(i);
+          _walk(ele);
+          currentPosition.pop();
         });
       }
-      vesList.push(ves);
+    };
+    elements.forEach((elem, index) => {
+      currentPosition.push(index);
+      _walk(elem);
+      currentPosition.pop();
+    });
+    return updateViewVisibleInfoMapStatus(visibleInfoMap, opts);
+  }
+  function isRangeRectInfoCollide(info1, info2) {
+    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    if (rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY || rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY) {
+      return true;
     }
-    return vesList;
+    return false;
   }
-  function calcElementVertexesQueueInGroup(targetElem, opts) {
-    const { groupQueue } = opts;
-    if (!(groupQueue.length > 0)) {
-      return [calcElementVertexes(targetElem)];
-    }
-    const elemQueue = [...groupQueue, ...[targetElem]];
-    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
-    return vesList;
+  function updateViewVisibleInfoMapStatus(viewVisibleInfoMap, opts) {
+    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+    let visibleCount = 0;
+    let invisibleCount = 0;
+    Object.keys(viewVisibleInfoMap).forEach((uuid) => {
+      const info = viewVisibleInfoMap[uuid];
+      info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+      info.isVisibleInView ? visibleCount++ : invisibleCount++;
+    });
+    return { viewVisibleInfoMap, visibleCount, invisibleCount };
   }
-  function calcElementVertexesInGroup(targetElem, opts) {
-    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
-    const ves = vesList.pop();
-    return ves || null;
+  function calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { width, height } = viewSizeInfo;
+    const x2 = 0 - offsetLeft / scale;
+    const y2 = 0 - offsetTop / scale;
+    const w2 = width / scale;
+    const h2 = height / scale;
+    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
+    const topLeft = { x: x2, y: y2 };
+    const topRight = { x: x2 + w2, y: y2 };
+    const bottomLeft = { x: x2, y: y2 + h2 };
+    const bottomRight = { x: x2 + w2, y: y2 + h2 };
+    const left = { x: x2, y: center.y };
+    const top = { x: center.x, y: y2 };
+    const right = { x: x2 + w2, y: center.y };
+    const bottom = { x: center.x, y: y2 + h2 };
+    const rectInfo = {
+      center,
+      topLeft,
+      topRight,
+      bottomLeft,
+      bottomRight,
+      left,
+      top,
+      right,
+      bottom
+    };
+    return rectInfo;
   }
   function createControllerElementSizeFromCenter(center, opts) {
     const { x: x2, y: y2 } = center;
@@ -2155,7 +2311,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawCircle(ctx, elem, opts) {
     const { detail, angle: angle2 } = elem;
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { background: background2 = "#000000", borderColor: borderColor2 = "#000000", boxSizing, borderWidth: borderWidth2 = 0 } = detail;
     let bw = 0;
     if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
@@ -2164,7 +2320,7 @@ var __privateMethod = (obj, member, method) => {
       bw = borderWidth2[0];
     }
     bw = bw * viewScaleInfo.scale;
-    const { x: x2, y: y2, w: w2, h: h2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, { viewScaleInfo, viewSizeInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -2217,8 +2373,8 @@ var __privateMethod = (obj, member, method) => {
     });
   }
   function drawRect(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -2240,8 +2396,8 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -2287,8 +2443,8 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
@@ -2302,8 +2458,8 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
@@ -2317,8 +2473,8 @@ var __privateMethod = (obj, member, method) => {
   }
   const detailConfig = getDefaultElementDetailConfig();
   function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBox(ctx, viewElem, {
@@ -2421,8 +2577,8 @@ var __privateMethod = (obj, member, method) => {
   function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     const scaleW = w2 / originW;
     const scaleH = h2 / originH;
     const viewOriginX = originX * scaleW;
@@ -2520,8 +2676,8 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, { viewScaleInfo, viewSizeInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       ctx.globalAlpha = getOpacity(elem) * parentOpacity;
@@ -2562,7 +2718,7 @@ var __privateMethod = (obj, member, method) => {
                   h: elem.h || parentSize.h,
                   angle: elem.angle
                 };
-                const { calculator: calculator2 } = opts;
+                const { calculator } = opts;
                 for (let i = 0; i < elem.detail.children.length; i++) {
                   let child = elem.detail.children[i];
                   child = Object.assign(Object.assign({}, child), {
@@ -2570,7 +2726,7 @@ var __privateMethod = (obj, member, method) => {
                     y: newParentSize.y + child.y
                   });
                   if (opts.forceDrawAll !== true) {
-                    if (!(calculator2 === null || calculator2 === void 0 ? void 0 : calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
                       continue;
                     }
                   }
@@ -2616,9 +2772,9 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawUnderlay(ctx, underlay, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const elem = Object.assign({ uuid: "underlay" }, underlay);
-    const { x: x2, y: y2, w: w2, h: h2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
     const angle2 = 0;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     drawBoxShadow(ctx, viewElem, {
@@ -2988,18 +3144,26 @@ var __privateMethod = (obj, member, method) => {
       throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
-  var _Calculator_opts;
+  var _Calculator_opts, _Calculator_store;
   class Calculator {
     constructor(opts) {
       _Calculator_opts.set(this, void 0);
+      _Calculator_store.set(this, void 0);
       __classPrivateFieldSet$4(this, _Calculator_opts, opts, "f");
+      __classPrivateFieldSet$4(this, _Calculator_store, new Store({
+        defaultStorage: {
+          viewVisibleInfoMap: {},
+          visibleCount: 0,
+          invisibleCount: 0
+        }
+      }), "f");
+    }
+    toGridNum(num) {
+      return Math.round(num);
     }
     destroy() {
       __classPrivateFieldSet$4(this, _Calculator_opts, null, "f");
     }
-    elementSize(size, viewScaleInfo, viewSizeInfo) {
-      return calcViewElementSize(size, { viewScaleInfo, viewSizeInfo });
-    }
     isElementInView(elem, viewScaleInfo, viewSizeInfo) {
       return isElementInView(elem, { viewScaleInfo, viewSizeInfo });
     }
@@ -3016,8 +3180,103 @@ var __privateMethod = (obj, member, method) => {
       const context2d = __classPrivateFieldGet$4(this, _Calculator_opts, "f").viewContext;
       return getViewPointAtElement(p, Object.assign(Object.assign({}, opts), { context2d }));
     }
+    resetViewVisibleInfoMap(data, opts) {
+      if (data) {
+        const { viewVisibleInfoMap, invisibleCount, visibleCount } = sortElementsViewVisiableInfoMap(data.elements, opts);
+        __classPrivateFieldGet$4(this, _Calculator_store, "f").set("viewVisibleInfoMap", viewVisibleInfoMap);
+        __classPrivateFieldGet$4(this, _Calculator_store, "f").set("invisibleCount", invisibleCount);
+        __classPrivateFieldGet$4(this, _Calculator_store, "f").set("visibleCount", visibleCount);
+      }
+    }
+    updateVisiableStatus(opts) {
+      const { viewVisibleInfoMap, invisibleCount, visibleCount } = updateViewVisibleInfoMapStatus(__classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap"), opts);
+      __classPrivateFieldGet$4(this, _Calculator_store, "f").set("viewVisibleInfoMap", viewVisibleInfoMap);
+      __classPrivateFieldGet$4(this, _Calculator_store, "f").set("invisibleCount", invisibleCount);
+      __classPrivateFieldGet$4(this, _Calculator_store, "f").set("visibleCount", visibleCount);
+    }
+    calcViewRectInfoFromOrigin(uuid, opts) {
+      const infoData = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap")[uuid];
+      if (!(infoData === null || infoData === void 0 ? void 0 : infoData.originRectInfo)) {
+        return null;
+      }
+      const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
+      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.originRectInfo;
+      if (checkVisible === true && infoData.isVisibleInView === false) {
+        return null;
+      }
+      const calcOpts = { viewScaleInfo, viewSizeInfo };
+      const viewRectInfo = {
+        center: calcViewPointSize(center, calcOpts),
+        left: calcViewPointSize(left, calcOpts),
+        right: calcViewPointSize(right, calcOpts),
+        bottom: calcViewPointSize(bottom, calcOpts),
+        top: calcViewPointSize(top, calcOpts),
+        topLeft: calcViewPointSize(topLeft, calcOpts),
+        topRight: calcViewPointSize(topRight, calcOpts),
+        bottomLeft: calcViewPointSize(bottomLeft, calcOpts),
+        bottomRight: calcViewPointSize(bottomRight, calcOpts)
+      };
+      return viewRectInfo;
+    }
+    calcViewRectInfoFromRange(uuid, opts) {
+      const infoData = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap")[uuid];
+      if (!(infoData === null || infoData === void 0 ? void 0 : infoData.originRectInfo)) {
+        return null;
+      }
+      const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
+      const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.rangeRectInfo;
+      if (checkVisible === true && infoData.isVisibleInView === false) {
+        return null;
+      }
+      const calcOpts = { viewScaleInfo, viewSizeInfo };
+      const viewRectInfo = {
+        center: calcViewPointSize(center, calcOpts),
+        left: calcViewPointSize(left, calcOpts),
+        right: calcViewPointSize(right, calcOpts),
+        bottom: calcViewPointSize(bottom, calcOpts),
+        top: calcViewPointSize(top, calcOpts),
+        topLeft: calcViewPointSize(topLeft, calcOpts),
+        topRight: calcViewPointSize(topRight, calcOpts),
+        bottomLeft: calcViewPointSize(bottomLeft, calcOpts),
+        bottomRight: calcViewPointSize(bottomRight, calcOpts)
+      };
+      return viewRectInfo;
+    }
+    modifyViewVisibleInfoMap(data, opts) {
+      const { modifyOptions, viewScaleInfo, viewSizeInfo } = opts;
+      const { type, content } = modifyOptions;
+      const list = data.elements;
+      const viewVisibleInfoMap = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap");
+      if (type === "deleteElement") {
+        const { element } = content;
+        delete viewVisibleInfoMap[element.uuid];
+      } else if (type === "addElement" || type === "updateElement") {
+        const { position } = content;
+        const element = findElementFromListByPosition(position, data.elements);
+        const groupQueue = getGroupQueueByElementPosition(list, position);
+        if (element) {
+          const originRectInfo = calcElementOriginRectInfo(element, {
+            groupQueue: groupQueue || []
+          });
+          const newViewVisibleInfo = {
+            originRectInfo,
+            rangeRectInfo: is.angle(element.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo,
+            isVisibleInView: true,
+            isGroup: (element === null || element === void 0 ? void 0 : element.type) === "group",
+            position: [...position]
+          };
+          viewVisibleInfoMap[element.uuid] = newViewVisibleInfo;
+          if (type === "updateElement") {
+            this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
+          }
+        }
+      } else if (type === "moveElement") {
+        this.resetViewVisibleInfoMap(data, { viewScaleInfo, viewSizeInfo });
+      }
+      __classPrivateFieldGet$4(this, _Calculator_store, "f").set("viewVisibleInfoMap", viewVisibleInfoMap);
+    }
   }
-  _Calculator_opts = /* @__PURE__ */ new WeakMap();
+  _Calculator_opts = /* @__PURE__ */ new WeakMap(), _Calculator_store = /* @__PURE__ */ new WeakMap();
   var __classPrivateFieldSet$3 = function(receiver, state, value, kind, f) {
     if (kind === "m")
       throw new TypeError("Private method is not writable");
@@ -3257,8 +3516,8 @@ var __privateMethod = (obj, member, method) => {
     setActiveStorage(key2, storage) {
       return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set(key2, storage);
     }
-    getActiveStoreSnapshot() {
-      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").getSnapshot();
+    getActiveStoreSnapshot(opts) {
+      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").getSnapshot(opts);
     }
     getSharedStorage(key2) {
       return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").get(key2);
@@ -3266,8 +3525,8 @@ var __privateMethod = (obj, member, method) => {
     setSharedStorage(key2, storage) {
       return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").set(key2, storage);
     }
-    getSharedStoreSnapshot() {
-      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").getSnapshot();
+    getSharedStoreSnapshot(opts) {
+      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").getSnapshot(opts);
     }
     getActiveViewScaleInfo() {
       const viewScaleInfo = {
@@ -3334,6 +3593,11 @@ var __privateMethod = (obj, member, method) => {
       __classPrivateFieldSet$1(this, _Viewer_opts, opts, "f");
       __classPrivateFieldGet$1(this, _Viewer_instances, "m", _Viewer_init).call(this);
     }
+    resetViewVisibleInfoMap(data, opts) {
+      if (data) {
+        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.resetViewVisibleInfoMap(data, opts);
+      }
+    }
     drawFrame() {
       const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const activeStore = sharer.getActiveStoreSnapshot();
@@ -3345,7 +3609,7 @@ var __privateMethod = (obj, member, method) => {
       __classPrivateFieldGet$1(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame).call(this);
     }
     scale(opts) {
-      const { scale, point } = opts;
+      const { scale, point, ignoreUpdateVisibleStatus } = opts;
       const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const { moveX, moveY } = viewScale({
         scale,
@@ -3354,12 +3618,18 @@ var __privateMethod = (obj, member, method) => {
         viewSizeInfo: sharer.getActiveViewSizeInfo()
       });
       sharer.setActiveStorage("scale", scale);
+      if (!ignoreUpdateVisibleStatus) {
+        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+          viewScaleInfo: sharer.getActiveViewScaleInfo(),
+          viewSizeInfo: sharer.getActiveViewSizeInfo()
+        });
+      }
       return { moveX, moveY };
     }
     scroll(opts) {
       const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const prevViewScaleInfo = sharer.getActiveViewScaleInfo();
-      const { moveX, moveY } = opts;
+      const { moveX, moveY, ignoreUpdateVisibleStatus } = opts;
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
       const viewScaleInfo = viewScroll({
         moveX,
@@ -3368,6 +3638,12 @@ var __privateMethod = (obj, member, method) => {
         viewSizeInfo
       });
       sharer.setActiveViewScaleInfo(viewScaleInfo);
+      if (!ignoreUpdateVisibleStatus) {
+        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+          viewScaleInfo: sharer.getActiveViewScaleInfo(),
+          viewSizeInfo: sharer.getActiveViewSizeInfo()
+        });
+      }
       return viewScaleInfo;
     }
     updateViewScaleInfo(opts) {
@@ -3376,9 +3652,13 @@ var __privateMethod = (obj, member, method) => {
         viewSizeInfo: sharer.getActiveViewSizeInfo()
       });
       sharer.setActiveViewScaleInfo(viewScaleInfo);
+      __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+        viewScaleInfo: sharer.getActiveViewScaleInfo(),
+        viewSizeInfo: sharer.getActiveViewSizeInfo()
+      });
       return viewScaleInfo;
     }
-    resize(viewSize = {}) {
+    resize(viewSize = {}, opts) {
       const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const originViewSize = sharer.getActiveViewSizeInfo();
       const newViewSize = Object.assign(Object.assign({}, originViewSize), viewSize);
@@ -3395,6 +3675,12 @@ var __privateMethod = (obj, member, method) => {
       viewContext.canvas.width = width * devicePixelRatio;
       viewContext.canvas.height = height * devicePixelRatio;
       sharer.setActiveViewSizeInfo(newViewSize);
+      if (!(opts === null || opts === void 0 ? void 0 : opts.ignoreUpdateVisibleStatus)) {
+        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+          viewScaleInfo: sharer.getActiveViewScaleInfo(),
+          viewSizeInfo: sharer.getActiveViewSizeInfo()
+        });
+      }
       return newViewSize;
     }
   }
@@ -3464,7 +3750,6 @@ var __privateMethod = (obj, member, method) => {
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
   var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handleHover, _Board_handleDoubleClick, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
-  const throttleTime = 10;
   class Board {
     constructor(opts) {
       _Board_instances.add(this);
@@ -3530,15 +3815,28 @@ var __privateMethod = (obj, member, method) => {
     getRenderer() {
       return __classPrivateFieldGet(this, _Board_renderer, "f");
     }
-    setData(data) {
+    setData(data, opts) {
+      const { modifiedOptions } = opts || {};
       const sharer = __classPrivateFieldGet(this, _Board_sharer, "f");
       __classPrivateFieldGet(this, _Board_sharer, "f").setActiveStorage("data", data);
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
+      const viewScaleInfo = sharer.getActiveViewScaleInfo();
       const newViewContextSize = calcElementsContextSize(data.elements, {
         viewWidth: viewSizeInfo.width,
         viewHeight: viewSizeInfo.height,
         extend: true
       });
+      if (modifiedOptions) {
+        __classPrivateFieldGet(this, _Board_viewer, "f").resetViewVisibleInfoMap(data, {
+          viewSizeInfo,
+          viewScaleInfo
+        });
+      } else {
+        __classPrivateFieldGet(this, _Board_viewer, "f").resetViewVisibleInfoMap(data, {
+          viewSizeInfo,
+          viewScaleInfo
+        });
+      }
       __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
       const newViewSizeInfo = Object.assign(Object.assign({}, viewSizeInfo), newViewContextSize);
       __classPrivateFieldGet(this, _Board_sharer, "f").setActiveViewSizeInfo(newViewSizeInfo);
@@ -3587,17 +3885,22 @@ var __privateMethod = (obj, member, method) => {
     }
     scale(opts) {
       const viewer = __classPrivateFieldGet(this, _Board_viewer, "f");
-      const { moveX, moveY } = viewer.scale(opts);
-      viewer.scroll({ moveX, moveY });
+      const { ignoreUpdateVisibleStatus } = opts;
+      const { moveX, moveY } = viewer.scale(Object.assign(Object.assign({}, opts), {
+        ignoreUpdateVisibleStatus: true
+      }));
+      viewer.scroll({ moveX, moveY, ignoreUpdateVisibleStatus });
     }
     scroll(opts) {
-      return __classPrivateFieldGet(this, _Board_viewer, "f").scroll(opts);
+      const result = __classPrivateFieldGet(this, _Board_viewer, "f").scroll(opts);
+      return result;
     }
     updateViewScaleInfo(opts) {
-      return __classPrivateFieldGet(this, _Board_viewer, "f").updateViewScaleInfo(opts);
+      const result = __classPrivateFieldGet(this, _Board_viewer, "f").updateViewScaleInfo(opts);
+      return result;
     }
-    resize(newViewSize) {
-      const viewSize = __classPrivateFieldGet(this, _Board_viewer, "f").resize(newViewSize);
+    resize(newViewSize, opts) {
+      const viewSize = __classPrivateFieldGet(this, _Board_viewer, "f").resize(newViewSize, opts);
       const { width, height, devicePixelRatio } = newViewSize;
       const { boardContent } = __classPrivateFieldGet(this, _Board_opts, "f");
       boardContent.viewContext.$resize({ width, height, devicePixelRatio });
@@ -3630,18 +3933,10 @@ var __privateMethod = (obj, member, method) => {
   _Board_opts = /* @__PURE__ */ new WeakMap(), _Board_middlewareMap = /* @__PURE__ */ new WeakMap(), _Board_middlewares = /* @__PURE__ */ new WeakMap(), _Board_activeMiddlewareObjs = /* @__PURE__ */ new WeakMap(), _Board_watcher = /* @__PURE__ */ new WeakMap(), _Board_renderer = /* @__PURE__ */ new WeakMap(), _Board_sharer = /* @__PURE__ */ new WeakMap(), _Board_viewer = /* @__PURE__ */ new WeakMap(), _Board_calculator = /* @__PURE__ */ new WeakMap(), _Board_eventHub = /* @__PURE__ */ new WeakMap(), _Board_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Board_instances = /* @__PURE__ */ new WeakSet(), _Board_init = function _Board_init2() {
     __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", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).call(this, e);
-    }, throttleTime));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("hover", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).call(this, e);
-    }, throttleTime));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheel", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).call(this, e);
-    }, throttleTime));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheelScale", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).call(this, e);
-    }, throttleTime));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointMove", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).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));
@@ -3933,6 +4228,9 @@ var __privateMethod = (obj, member, method) => {
   const keySelectedElementList = Symbol(`${key$2}_selectedElementList`);
   const keySelectedElementListVertexes = Symbol(`${key$2}_selectedElementListVertexes`);
   const keySelectedElementController = Symbol(`${key$2}_selectedElementController`);
+  const keySelectedElementPosition = Symbol(`${key$2}_selectedElementPosition`);
+  const keySelectedReferenceXLines = Symbol(`${key$2}_selectedReferenceXLines`);
+  const keySelectedReferenceYLines = Symbol(`${key$2}_selectedReferenceYLines`);
   const keyGroupQueue = Symbol(`${key$2}_groupQueue`);
   const keyGroupQueueVertexesList = Symbol(`${key$2}_groupQueueVertexesList`);
   const keyIsMoving = Symbol(`${key$2}_isMoving`);
@@ -3942,6 +4240,7 @@ var __privateMethod = (obj, member, method) => {
   const wrapperColor = "#1973ba";
   const lockColor = "#5b5959b5";
   const controllerSize = 10;
+  const referenceColor = "#f7276e";
   function drawVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
@@ -3996,11 +4295,10 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawCrossVertexes(ctx, vertexes, opts) {
-    const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
+    const { borderColor: borderColor2, borderWidth: borderWidth2, lineDash } = opts;
     ctx.setLineDash([]);
     ctx.lineWidth = borderWidth2;
     ctx.strokeStyle = borderColor2;
-    ctx.fillStyle = background2;
     ctx.setLineDash(lineDash);
     ctx.beginPath();
     ctx.moveTo(vertexes[0].x, vertexes[0].y);
@@ -4013,6 +4311,36 @@ var __privateMethod = (obj, member, method) => {
     ctx.closePath();
     ctx.stroke();
   }
+  function drawCrossByCenter(ctx, center, opts) {
+    const { size, borderColor: borderColor2, borderWidth: borderWidth2, lineDash } = opts;
+    const minX = center.x - size / 2;
+    const maxX = center.x + size / 2;
+    const minY = center.y - size / 2;
+    const maxY = center.y + size / 2;
+    const vertexes = [
+      {
+        x: minX,
+        y: minY
+      },
+      {
+        x: maxX,
+        y: minY
+      },
+      {
+        x: maxX,
+        y: maxY
+      },
+      {
+        x: minX,
+        y: maxY
+      }
+    ];
+    drawCrossVertexes(ctx, vertexes, {
+      borderColor: borderColor2,
+      borderWidth: borderWidth2,
+      lineDash
+    });
+  }
   function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
       return;
@@ -4044,7 +4372,10 @@ var __privateMethod = (obj, member, method) => {
     if (!controller) {
       return;
     }
-    const { hideControllers } = opts;
+    const {
+      hideControllers
+      // calculator, element, viewScaleInfo, viewSizeInfo
+    } = opts;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
@@ -4096,6 +4427,35 @@ var __privateMethod = (obj, member, method) => {
       drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
   }
+  function drawReferenceLines(ctx, opts) {
+    const { xLines, yLines } = opts;
+    const lineOpts = {
+      borderColor: referenceColor,
+      borderWidth: 1,
+      lineDash: []
+    };
+    const crossOpts = { ...lineOpts, size: 6 };
+    if (xLines) {
+      xLines.forEach((line) => {
+        line.forEach((p, pIdx) => {
+          drawCrossByCenter(ctx, p, crossOpts);
+          if (line[pIdx + 1]) {
+            drawLine(ctx, line[pIdx], line[pIdx + 1], lineOpts);
+          }
+        });
+      });
+    }
+    if (yLines) {
+      yLines.forEach((line) => {
+        line.forEach((p, pIdx) => {
+          drawCrossByCenter(ctx, p, crossOpts);
+          if (line[pIdx + 1]) {
+            drawLine(ctx, line[pIdx], line[pIdx + 1], lineOpts);
+          }
+        });
+      });
+    }
+  }
   function parseRadian(angle2) {
     return angle2 * Math.PI / 180;
   }
@@ -4106,11 +4466,11 @@ var __privateMethod = (obj, member, method) => {
     return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
   }
   function isPointInViewActiveVertexes(p, opts) {
-    const { ctx, viewScaleInfo, viewSizeInfo, vertexes } = opts;
-    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo, viewSizeInfo });
-    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo, viewSizeInfo });
-    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo, viewSizeInfo });
-    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo, viewSizeInfo });
+    const { ctx, viewScaleInfo, vertexes } = opts;
+    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo });
+    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo });
+    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo });
+    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo });
     ctx.beginPath();
     ctx.moveTo(v0.x, v0.y);
     ctx.lineTo(v1.x, v1.y);
@@ -4729,10 +5089,9 @@ var __privateMethod = (obj, member, method) => {
   }
   function rotateElement(elem, opts) {
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elem;
-    const { center, start, end, viewScaleInfo, viewSizeInfo } = opts;
+    const { center, start, end, viewScaleInfo } = opts;
     const elemCenter = calcViewPointSize(center, {
-      viewScaleInfo,
-      viewSizeInfo
+      viewScaleInfo
     });
     const startAngle = limitAngle(angle2);
     const changedRadian = calcRadian(elemCenter, start, end);
@@ -4750,7 +5109,7 @@ var __privateMethod = (obj, member, method) => {
     const indexes = [];
     const uuids = [];
     const elements = [];
-    const { calculator, viewScaleInfo, viewSizeInfo, start, end } = opts;
+    const { viewScaleInfo, viewSizeInfo, start, end } = opts;
     if (!(Array.isArray(data.elements) && start && end)) {
       return { indexes, uuids, elements };
     }
@@ -4763,7 +5122,7 @@ var __privateMethod = (obj, member, method) => {
       if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.lock) === true) {
         continue;
       }
-      const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+      const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
       const center = calcElementCenter(elemSize);
       if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
         indexes.push(idx);
@@ -4790,14 +5149,14 @@ var __privateMethod = (obj, member, method) => {
       return null;
     }
     const area = { x: 0, y: 0, w: 0, h: 0 };
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { viewScaleInfo, viewSizeInfo } = opts;
     let prevElemSize = null;
     for (let i = 0; i < elements.length; i++) {
       const elem = elements[i];
       if ((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.invisible) {
         continue;
       }
-      const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+      const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
       if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
         const ves = rotateElementVertexes(elemSize);
         if (ves.length === 4) {
@@ -4865,6 +5224,264 @@ var __privateMethod = (obj, member, method) => {
       moveY
     };
   }
+  const unitSize = 2;
+  function getViewBoxInfo(rectInfo) {
+    const boxInfo = {
+      minX: rectInfo.topLeft.x,
+      minY: rectInfo.topLeft.y,
+      maxX: rectInfo.bottomRight.x,
+      maxY: rectInfo.bottomRight.y,
+      midX: rectInfo.center.x,
+      midY: rectInfo.center.y
+    };
+    return boxInfo;
+  }
+  const getClosestNumInSortedKeys = (sortedKeys, target) => {
+    if (sortedKeys.length === 0) {
+      throw null;
+    }
+    if (sortedKeys.length === 1) {
+      return sortedKeys[0];
+    }
+    let left = 0;
+    let right = sortedKeys.length - 1;
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2);
+      if (sortedKeys[mid] === target) {
+        return sortedKeys[mid];
+      } else if (sortedKeys[mid] < target) {
+        left = mid + 1;
+      } else {
+        right = mid - 1;
+      }
+    }
+    if (left >= sortedKeys.length) {
+      return sortedKeys[right];
+    }
+    if (right < 0) {
+      return sortedKeys[left];
+    }
+    return Math.abs(sortedKeys[right] - target) <= Math.abs(sortedKeys[left] - target) ? sortedKeys[right] : sortedKeys[left];
+  };
+  const isEqualNum = (a, b) => Math.abs(a - b) < 1e-5;
+  function calcReferenceInfo(uuid, opts) {
+    var _a, _b;
+    const { data, groupQueue, calculator, viewScaleInfo, viewSizeInfo } = opts;
+    let targetElements = data.elements || [];
+    if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
+      targetElements = ((_b = (_a = groupQueue[groupQueue.length - 1]) == null ? void 0 : _a.detail) == null ? void 0 : _b.children) || [];
+    }
+    const siblingViewRectInfoList = [];
+    targetElements.forEach((elem) => {
+      if (elem.uuid !== uuid) {
+        const info = calculator.calcViewRectInfoFromRange(elem.uuid, { checkVisible: true, viewScaleInfo, viewSizeInfo });
+        if (info) {
+          siblingViewRectInfoList.push(info);
+        }
+      }
+    });
+    const targetRectInfo = calculator.calcViewRectInfoFromRange(uuid, { viewScaleInfo, viewSizeInfo });
+    if (!targetRectInfo) {
+      return null;
+    }
+    const vRefLineDotMap = {};
+    const hRefLineDotMap = {};
+    const vHelperLineDotMapList = [];
+    const hHelperLineDotMapList = [];
+    let sortedRefXKeys = [];
+    let sortedRefYKeys = [];
+    const targetBox = getViewBoxInfo(targetRectInfo);
+    siblingViewRectInfoList.forEach((info) => {
+      const box = getViewBoxInfo(info);
+      if (!vRefLineDotMap[box.minX]) {
+        vRefLineDotMap[box.minX] = [];
+      }
+      if (!vRefLineDotMap[box.midX]) {
+        vRefLineDotMap[box.midX] = [];
+      }
+      if (!vRefLineDotMap[box.maxX]) {
+        vRefLineDotMap[box.maxX] = [];
+      }
+      if (!hRefLineDotMap[box.minY]) {
+        hRefLineDotMap[box.minY] = [];
+      }
+      if (!hRefLineDotMap[box.midY]) {
+        hRefLineDotMap[box.midY] = [];
+      }
+      if (!hRefLineDotMap[box.maxY]) {
+        hRefLineDotMap[box.maxY] = [];
+      }
+      vRefLineDotMap[box.minX] = [box.minY, box.midY, box.maxY];
+      vRefLineDotMap[box.midX] = [box.minY, box.midY, box.maxY];
+      vRefLineDotMap[box.maxX] = [box.minY, box.midY, box.maxY];
+      sortedRefXKeys.push(box.minX);
+      sortedRefXKeys.push(box.midX);
+      sortedRefXKeys.push(box.maxX);
+      hRefLineDotMap[box.minY] = [box.minX, box.midX, box.maxX];
+      hRefLineDotMap[box.midY] = [box.minX, box.midX, box.maxX];
+      hRefLineDotMap[box.maxY] = [box.minX, box.midX, box.maxX];
+      sortedRefYKeys.push(box.minY);
+      sortedRefYKeys.push(box.midY);
+      sortedRefYKeys.push(box.maxY);
+    });
+    sortedRefXKeys = sortedRefXKeys.sort((a, b) => a - b);
+    sortedRefYKeys = sortedRefYKeys.sort((a, b) => a - b);
+    let offsetX = null;
+    let offsetY = null;
+    let closestMinX = null;
+    let closestMidX = null;
+    let closestMaxX = null;
+    let closestMinY = null;
+    let closestMidY = null;
+    let closestMaxY = null;
+    if (sortedRefXKeys.length > 0) {
+      closestMinX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.minX);
+      closestMidX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.midX);
+      closestMaxX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.maxX);
+      const distMinX = Math.abs(closestMinX - targetBox.minX);
+      const distMidX = Math.abs(closestMidX - targetBox.midX);
+      const distMaxX = Math.abs(closestMaxX - targetBox.maxX);
+      const closestXDist = Math.min(distMinX, distMidX, distMaxX);
+      if (closestXDist <= unitSize / viewScaleInfo.scale) {
+        if (isEqualNum(closestXDist, distMinX)) {
+          offsetX = closestMinX - targetBox.minX;
+        } else if (isEqualNum(closestXDist, distMidX)) {
+          offsetX = closestMidX - targetBox.midX;
+        } else if (isEqualNum(closestXDist, distMaxX)) {
+          offsetX = closestMaxX - targetBox.maxX;
+        }
+      }
+    }
+    if (sortedRefYKeys.length > 0) {
+      closestMinY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.minY);
+      closestMidY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.midY);
+      closestMaxY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.maxY);
+      const distMinY = Math.abs(closestMinY - targetBox.minY);
+      const distMidY = Math.abs(closestMidY - targetBox.midY);
+      const distMaxY = Math.abs(closestMaxY - targetBox.maxY);
+      const closestYDist = Math.min(distMinY, distMidY, distMaxY);
+      if (closestYDist <= unitSize / viewScaleInfo.scale) {
+        if (isEqualNum(closestYDist, distMinY)) {
+          offsetY = closestMinY - targetBox.minY;
+        } else if (isEqualNum(closestYDist, distMidY)) {
+          offsetY = closestMidY - targetBox.midY;
+        } else if (isEqualNum(closestYDist, distMaxY)) {
+          offsetY = closestMaxY - targetBox.maxY;
+        }
+      }
+    }
+    const newTargetBox = { ...targetBox };
+    if (offsetX !== null) {
+      newTargetBox.minX += offsetX;
+      newTargetBox.midX += offsetX;
+      newTargetBox.maxX += offsetX;
+    }
+    if (offsetY !== null) {
+      newTargetBox.minY += offsetY;
+      newTargetBox.midY += offsetY;
+      newTargetBox.maxY += offsetY;
+    }
+    if (is.x(offsetX) && offsetX !== null && closestMinX !== null && closestMidX !== null && closestMaxX !== null) {
+      if (isEqualNum(offsetX, closestMinX - targetBox.minX)) {
+        const vLine = {
+          x: closestMinX,
+          yList: []
+        };
+        vLine.yList.push(newTargetBox.minY);
+        vLine.yList.push(newTargetBox.midY);
+        vLine.yList.push(newTargetBox.maxY);
+        vLine.yList.push(...(hRefLineDotMap == null ? void 0 : hRefLineDotMap[closestMinX]) || []);
+        vHelperLineDotMapList.push(vLine);
+      }
+      if (isEqualNum(offsetX, closestMidX - targetBox.minX)) {
+        const vLine = {
+          x: closestMidX,
+          yList: []
+        };
+        vLine.yList.push(newTargetBox.minY);
+        vLine.yList.push(newTargetBox.midY);
+        vLine.yList.push(newTargetBox.maxY);
+        vLine.yList.push(...(hRefLineDotMap == null ? void 0 : hRefLineDotMap[closestMidX]) || []);
+        vHelperLineDotMapList.push(vLine);
+      }
+      if (isEqualNum(offsetX, closestMaxX - targetBox.minX)) {
+        const vLine = {
+          x: closestMaxX,
+          yList: []
+        };
+        vLine.yList.push(newTargetBox.minY);
+        vLine.yList.push(newTargetBox.midY);
+        vLine.yList.push(newTargetBox.maxY);
+        vLine.yList.push(...(hRefLineDotMap == null ? void 0 : hRefLineDotMap[closestMaxX]) || []);
+        vHelperLineDotMapList.push(vLine);
+      }
+    }
+    if (is.y(offsetY) && offsetY !== null && closestMinY !== null && closestMidY !== null && closestMaxY !== null) {
+      if (isEqualNum(offsetY, closestMinY - targetBox.minY)) {
+        const hLine = {
+          y: closestMinY,
+          xList: []
+        };
+        hLine.xList.push(newTargetBox.minX);
+        hLine.xList.push(newTargetBox.midX);
+        hLine.xList.push(newTargetBox.maxX);
+        hLine.xList.push(...(vRefLineDotMap == null ? void 0 : vRefLineDotMap[closestMinY]) || []);
+        hHelperLineDotMapList.push(hLine);
+      }
+      if (isEqualNum(offsetY, closestMidY - targetBox.midY)) {
+        const hLine = {
+          y: closestMidY,
+          xList: []
+        };
+        hLine.xList.push(newTargetBox.minX);
+        hLine.xList.push(newTargetBox.midX);
+        hLine.xList.push(newTargetBox.maxX);
+        hLine.xList.push(...(vRefLineDotMap == null ? void 0 : vRefLineDotMap[closestMinY]) || []);
+        hHelperLineDotMapList.push(hLine);
+      }
+      if (isEqualNum(offsetY, closestMaxY - targetBox.maxY)) {
+        const hLine = {
+          y: closestMaxY,
+          xList: []
+        };
+        hLine.xList.push(newTargetBox.minX);
+        hLine.xList.push(newTargetBox.midX);
+        hLine.xList.push(newTargetBox.maxX);
+        hLine.xList.push(...(vRefLineDotMap == null ? void 0 : vRefLineDotMap[closestMaxY]) || []);
+        hHelperLineDotMapList.push(hLine);
+      }
+    }
+    const yLines = [];
+    if ((vHelperLineDotMapList == null ? void 0 : vHelperLineDotMapList.length) > 0) {
+      vHelperLineDotMapList.forEach((item, i) => {
+        yLines.push([]);
+        item.yList.forEach((y2) => {
+          yLines[i].push({
+            x: item.x,
+            y: y2
+          });
+        });
+      });
+    }
+    const xLines = [];
+    if ((hHelperLineDotMapList == null ? void 0 : hHelperLineDotMapList.length) > 0) {
+      hHelperLineDotMapList.forEach((item, i) => {
+        xLines.push([]);
+        item.xList.forEach((x2) => {
+          xLines[i].push({
+            x: x2,
+            y: item.y
+          });
+        });
+      });
+    }
+    return {
+      offsetX,
+      offsetY,
+      yLines,
+      xLines
+    };
+  }
   const middlewareEventTextEdit = "@middleware/text-edit";
   const middlewareEventTextChange = "@middleware/text-change";
   const defaultElementDetail = getDefaultElementDetailConfig();
@@ -5039,6 +5656,19 @@ var __privateMethod = (obj, member, method) => {
       }
       hideTextArea();
     });
+    textarea.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+    });
+    textarea.addEventListener("keypress", (e) => {
+      e.stopPropagation();
+    });
+    textarea.addEventListener("keyup", (e) => {
+      e.stopPropagation();
+    });
+    textarea.addEventListener("wheel", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
     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") {
@@ -5098,6 +5728,7 @@ var __privateMethod = (obj, member, method) => {
       sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
     };
     const updateSelectedElementList = (list, opts2) => {
+      var _a;
       sharer.setSharedStorage(keySelectedElementList, list);
       if (list.length === 1) {
         const controller = calcElementSizeController(list[0], {
@@ -5106,8 +5737,10 @@ var __privateMethod = (obj, member, method) => {
           viewScaleInfo: sharer.getActiveViewScaleInfo()
         });
         sharer.setSharedStorage(keySelectedElementController, controller);
+        sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage("data")) == null ? void 0 : _a.elements) || []));
       } else {
         sharer.setSharedStorage(keySelectedElementController, null);
+        sharer.setSharedStorage(keySelectedElementPosition, []);
       }
       if ((opts2 == null ? void 0 : opts2.triggerEvent) === true) {
         eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
@@ -5123,7 +5756,8 @@ var __privateMethod = (obj, member, method) => {
         viewSizeInfo: sharer.getActiveViewSizeInfo(),
         groupQueue: sharer.getSharedStorage(keyGroupQueue),
         areaSize: null,
-        selectedElementController: sharer.getSharedStorage(keySelectedElementController)
+        selectedElementController: sharer.getSharedStorage(keySelectedElementController),
+        selectedElementPosition: sharer.getSharedStorage(keySelectedElementPosition)
       };
     };
     const clear = () => {
@@ -5138,6 +5772,9 @@ var __privateMethod = (obj, member, method) => {
       sharer.setSharedStorage(keySelectedElementList, []);
       sharer.setSharedStorage(keySelectedElementListVertexes, null);
       sharer.setSharedStorage(keySelectedElementController, null);
+      sharer.setSharedStorage(keySelectedElementPosition, []);
+      sharer.setSharedStorage(keySelectedReferenceXLines, []);
+      sharer.setSharedStorage(keySelectedReferenceYLines, []);
       sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
@@ -5327,6 +5964,8 @@ var __privateMethod = (obj, member, method) => {
       },
       pointMove: (e) => {
         var _a, _b, _c;
+        sharer.setSharedStorage(keySelectedReferenceXLines, []);
+        sharer.setSharedStorage(keySelectedReferenceYLines, []);
         sharer.setSharedStorage(keyIsMoving, true);
         const data = sharer.getActiveStorage("data");
         const elems = getActiveElements();
@@ -5342,9 +5981,43 @@ var __privateMethod = (obj, member, method) => {
           inBusyMode = "drag";
           if (data && (elems == null ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.lock) !== true) {
             const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
-            elems[0].x += moveX / scale;
-            elems[0].y += moveY / scale;
+            let totalMoveX = calculator.toGridNum(moveX / scale);
+            let totalMoveY = calculator.toGridNum(moveY / scale);
+            const referenceInfo = calcReferenceInfo(elems[0].uuid, {
+              calculator,
+              data,
+              groupQueue,
+              viewScaleInfo,
+              viewSizeInfo
+            });
+            try {
+              if (referenceInfo) {
+                if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
+                  totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
+                }
+                if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
+                  totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
+                }
+                sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
+                sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
+              }
+            } catch (err) {
+              console.error(err);
+            }
+            elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
+            elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
             updateSelectedElementList([elems[0]]);
+            calculator.modifyViewVisibleInfoMap(data, {
+              modifyOptions: {
+                type: "updateElement",
+                content: {
+                  element: elems[0],
+                  position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                }
+              },
+              viewSizeInfo,
+              viewScaleInfo
+            });
           }
           viewer.drawFrame();
         } else if (actionType === "drag-list") {
@@ -5355,8 +6028,19 @@ var __privateMethod = (obj, member, method) => {
             elems.forEach((elem) => {
               var _a2;
               if (elem && ((_a2 = elem == null ? void 0 : elem.operations) == null ? void 0 : _a2.lock) !== true) {
-                elem.x += moveX;
-                elem.y += moveY;
+                elem.x = calculator.toGridNum(elem.x + moveX);
+                elem.y = calculator.toGridNum(elem.y + moveY);
+                calculator.modifyViewVisibleInfoMap(data, {
+                  modifyOptions: {
+                    type: "updateElement",
+                    content: {
+                      element: elem,
+                      position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                    }
+                  },
+                  viewSizeInfo,
+                  viewScaleInfo
+                });
               }
             });
             sharer.setActiveStorage("data", data);
@@ -5403,19 +6087,30 @@ var __privateMethod = (obj, member, method) => {
               elems[0].angle = resizedElemSize.angle;
             } else {
               const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-              elems[0].x = resizedElemSize.x;
-              elems[0].y = resizedElemSize.y;
+              elems[0].x = calculator.toGridNum(resizedElemSize.x);
+              elems[0].y = calculator.toGridNum(resizedElemSize.y);
               if (elems[0].type === "group" && ((_c = elems[0].operations) == null ? void 0 : _c.deepResize) === true) {
                 deepResizeGroupElement(elems[0], {
-                  w: resizedElemSize.w,
-                  h: resizedElemSize.h
+                  w: calculator.toGridNum(resizedElemSize.w),
+                  h: calculator.toGridNum(resizedElemSize.h)
                 });
               } else {
-                elems[0].w = resizedElemSize.w;
-                elems[0].h = resizedElemSize.h;
+                elems[0].w = calculator.toGridNum(resizedElemSize.w);
+                elems[0].h = calculator.toGridNum(resizedElemSize.h);
               }
             }
             updateSelectedElementList([elems[0]]);
+            calculator.modifyViewVisibleInfoMap(data, {
+              modifyOptions: {
+                type: "updateElement",
+                content: {
+                  element: elems[0],
+                  position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                }
+              },
+              viewSizeInfo,
+              viewScaleInfo
+            });
             viewer.drawFrame();
           }
         } else if (actionType === "area") {
@@ -5427,6 +6122,8 @@ var __privateMethod = (obj, member, method) => {
       },
       pointEnd(e) {
         inBusyMode = null;
+        sharer.setSharedStorage(keySelectedReferenceXLines, []);
+        sharer.setSharedStorage(keySelectedReferenceYLines, []);
         sharer.setSharedStorage(keyIsMoving, false);
         const data = sharer.getActiveStorage("data");
         const resizeType = sharer.getSharedStorage(keyResizeType);
@@ -5568,9 +6265,17 @@ var __privateMethod = (obj, member, method) => {
             drawSelectedElementControllersVertexes(helperContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
-              groupQueue,
+              calculator,
               hideControllers: !!isMoving && actionType === "drag"
             });
+            if (actionType === "drag") {
+              const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
+              const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
+              drawReferenceLines(helperContext, {
+                xLines,
+                yLines
+              });
+            }
           }
         } else {
           if (hoverElement && actionType !== "drag") {
@@ -5591,9 +6296,17 @@ var __privateMethod = (obj, member, method) => {
             drawSelectedElementControllersVertexes(helperContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
-              groupQueue,
+              calculator,
               hideControllers: !!isMoving && actionType === "drag"
             });
+            if (actionType === "drag") {
+              const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
+              const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
+              drawReferenceLines(helperContext, {
+                xLines,
+                yLines
+              });
+            }
           } else if (actionType === "area" && areaStart && areaEnd) {
             drawArea(helperContext, { start: areaStart, end: areaEnd });
           } else if (["drag-list", "drag-list-end"].includes(actionType)) {
@@ -6239,9 +6952,9 @@ var __privateMethod = (obj, member, method) => {
     disuse(middleware) {
       __privateGet(this, _board).disuse(middleware);
     }
-    setData(data) {
+    setData(data, opts) {
       validateElements((data == null ? void 0 : data.elements) || []);
-      __privateGet(this, _board).setData(data);
+      __privateGet(this, _board).setData(data, opts);
     }
     getData() {
       return __privateGet(this, _board).getData();