@idraw/core 0.4.0-beta.16 → 0.4.0-beta.18

package/dist/index.global.js

@@ -316,7 +316,7 @@ var __privateMethod = (obj, member, method) => {
   function textAlign(value) {
     return ["center", "left", "right"].includes(value);
   }
-  function fontFamily$1(value) {
+  function fontFamily$2(value) {
     return typeof value === "string" && value.length > 0;
   }
   function fontWeight$1(value) {
@@ -345,7 +345,7 @@ var __privateMethod = (obj, member, method) => {
     fontSize: fontSize$1,
     lineHeight,
     textAlign,
-    fontFamily: fontFamily$1,
+    fontFamily: fontFamily$2,
     fontWeight: fontWeight$1,
     strokeWidth
   };
@@ -839,8 +839,11 @@ var __privateMethod = (obj, member, method) => {
     get(name) {
       return __classPrivateFieldGet$7(this, _Store_temp, "f")[name];
     }
-    getSnapshot() {
-      return __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");
@@ -1188,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) => {
@@ -1240,17 +1261,6 @@ var __privateMethod = (obj, member, method) => {
     _loop(elements);
     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;
-  }
   function getElementVertexes(elemSize) {
     const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
     return [
@@ -1491,19 +1501,152 @@ var __privateMethod = (obj, member, method) => {
     }
     return result;
   }
-  function isElementInView(elem, opts) {
-    const { viewSizeInfo, viewScaleInfo } = opts;
+  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();
+        });
+      }
+    };
+    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 false;
+  }
+  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 calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
     const { width, height } = viewSizeInfo;
-    const { angle: angle2 } = elem;
-    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
-    const ves = rotateElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
-    const viewSize = { x: 0, y: 0, w: width, h: height };
-    const elemStartX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
-    const elemStartY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
-    const elemEndX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
-    const elemEndY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
-    const elemSize = { x: elemStartX, y: elemStartY, w: elemEndX - elemStartX, h: elemEndY - elemStartY };
-    return checkRectIntersect(viewSize, elemSize);
+    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;
@@ -2143,7 +2286,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) {
@@ -2152,7 +2295,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, {
@@ -2205,8 +2348,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, {
@@ -2228,8 +2371,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, {
@@ -2275,8 +2418,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 || {});
@@ -2290,8 +2433,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 || {});
@@ -2305,8 +2448,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, {
@@ -2409,8 +2552,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;
@@ -2508,8 +2651,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;
@@ -2550,7 +2693,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), {
@@ -2558,7 +2701,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.needRender(child))) {
                       continue;
                     }
                   }
@@ -2590,7 +2733,7 @@ var __privateMethod = (obj, member, method) => {
         detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
       });
       if (opts.forceDrawAll !== true) {
-        if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+        if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.needRender(elem))) {
           continue;
         }
       }
@@ -2603,27 +2746,47 @@ var __privateMethod = (obj, member, method) => {
       }
     }
   }
-  function drawUnderlay(ctx, underlay, opts) {
-    const { calculator, 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;
+  function drawLayout(ctx, layout, opts, renderContent) {
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const elem = Object.assign({ uuid: "layout", type: "group", x: 0, y: 0 }, layout);
+    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 });
+    ctx.globalAlpha = 1;
     drawBoxShadow(ctx, viewElem, {
       viewScaleInfo,
       viewSizeInfo,
       renderContent: () => {
-        drawBox(ctx, viewElem, {
-          originElem: elem,
-          calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
-          viewScaleInfo,
-          viewSizeInfo,
-          parentOpacity,
-          renderContent: () => {
-          }
-        });
+        drawBoxBackground(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
       }
     });
+    if (layout.detail.overflow === "hidden") {
+      const { viewScaleInfo: viewScaleInfo2, viewSizeInfo: viewSizeInfo2 } = opts;
+      const elem2 = Object.assign({ uuid: "layout", type: "group", x: 0, y: 0 }, layout);
+      const viewElemSize = calcViewElementSize(elem2, { viewScaleInfo: viewScaleInfo2, viewSizeInfo: viewSizeInfo2 }) || elem2;
+      const viewElem2 = Object.assign(Object.assign({}, elem2), viewElemSize);
+      const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem2, {
+        viewScaleInfo: viewScaleInfo2,
+        viewSizeInfo: viewSizeInfo2
+      });
+      ctx.save();
+      ctx.fillStyle = "transparent";
+      ctx.beginPath();
+      ctx.moveTo(x3 + radiusList[0], y3);
+      ctx.arcTo(x3 + w3, y3, x3 + w3, y3 + h3, radiusList[1]);
+      ctx.arcTo(x3 + w3, y3 + h3, x3, y3 + h3, radiusList[2]);
+      ctx.arcTo(x3, y3 + h3, x3, y3, radiusList[3]);
+      ctx.arcTo(x3, y3, x3 + w3, y3, radiusList[0]);
+      ctx.closePath();
+      ctx.fill();
+      ctx.clip();
+    }
+    renderContent(ctx);
+    if (layout.detail.overflow === "hidden") {
+      ctx.restore();
+    }
+    drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+    ctx.globalAlpha = parentOpacity;
   }
   var __awaiter = function(thisArg, _arguments, P, generator) {
     function adopt(value) {
@@ -2900,21 +3063,20 @@ var __privateMethod = (obj, member, method) => {
         w: opts.viewSizeInfo.width,
         h: opts.viewSizeInfo.height
       };
-      if (data.underlay) {
-        drawUnderlay(viewContext, data.underlay, Object.assign({
-          loader,
-          calculator,
-          parentElementSize,
-          parentOpacity: 1
-        }, opts));
-      }
-      drawElementList(viewContext, data, Object.assign({
+      const drawOpts = Object.assign({
         loader,
         calculator,
         parentElementSize,
         elementAssets: data.assets,
         parentOpacity: 1
-      }, opts));
+      }, opts);
+      if (data.layout) {
+        drawLayout(viewContext, data.layout, drawOpts, () => {
+          drawElementList(viewContext, data, drawOpts);
+        });
+      } else {
+        drawElementList(viewContext, data, drawOpts);
+      }
     }
     scale(num) {
       const { sharer } = __classPrivateFieldGet$5(this, _Renderer_opts, "f");
@@ -2976,20 +3138,36 @@ 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, opts) {
+      if ((opts === null || opts === void 0 ? void 0 : opts.ignore) === true) {
+        return 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 });
+    needRender(elem) {
+      const viewVisibleInfoMap = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap");
+      const info = viewVisibleInfoMap[elem.uuid];
+      if (!info) {
+        return true;
+      }
+      return info.isVisibleInView;
     }
     isPointInElement(p, elem, viewScaleInfo, viewSizeInfo) {
       const context2d = __classPrivateFieldGet$4(this, _Calculator_opts, "f").viewContext;
@@ -3004,8 +3182,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");
@@ -3245,8 +3518,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);
@@ -3254,8 +3527,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 = {
@@ -3322,6 +3595,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();
@@ -3333,7 +3611,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,
@@ -3342,12 +3620,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,
@@ -3356,6 +3640,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) {
@@ -3364,9 +3654,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);
@@ -3383,6 +3677,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;
     }
   }
@@ -3517,15 +3817,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);
@@ -3574,17 +3887,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 });
@@ -3912,6 +4230,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`);
@@ -3921,6 +4242,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([]);
@@ -3991,6 +4313,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;
@@ -4022,7 +4374,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" };
@@ -4074,6 +4429,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;
   }
@@ -4084,11 +4468,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);
@@ -4707,10 +5091,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);
@@ -4728,7 +5111,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 };
     }
@@ -4741,7 +5124,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);
@@ -4768,14 +5151,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) {
@@ -4843,6 +5226,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();
@@ -5089,6 +5730,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], {
@@ -5097,8 +5739,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) });
@@ -5114,7 +5758,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 = () => {
@@ -5129,6 +5774,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();
@@ -5318,6 +5966,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();
@@ -5333,9 +5983,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") {
@@ -5346,8 +6030,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: getElementPositionFromList(elem.uuid, data.elements) || []
+                    }
+                  },
+                  viewSizeInfo,
+                  viewScaleInfo
+                });
               }
             });
             sharer.setActiveStorage("data", data);
@@ -5391,22 +6086,34 @@ var __privateMethod = (obj, member, method) => {
                 resizeType,
                 sharer
               });
-              elems[0].angle = resizedElemSize.angle;
+              elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
             } else {
               const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-              elems[0].x = resizedElemSize.x;
-              elems[0].y = resizedElemSize.y;
+              const calcOpts = { ignore: !!elems[0].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: resizedElemSize.w,
-                  h: resizedElemSize.h
+                  w: calculator.toGridNum(resizedElemSize.w, calcOpts),
+                  h: calculator.toGridNum(resizedElemSize.h, calcOpts)
                 });
               } else {
-                elems[0].w = resizedElemSize.w;
-                elems[0].h = resizedElemSize.h;
+                elems[0].w = calculator.toGridNum(resizedElemSize.w, calcOpts);
+                elems[0].h = calculator.toGridNum(resizedElemSize.h, calcOpts);
               }
             }
             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") {
@@ -5418,6 +6125,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);
@@ -5559,9 +6268,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") {
@@ -5582,9 +6299,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)) {
@@ -5609,7 +6334,7 @@ var __privateMethod = (obj, member, method) => {
   const keyActiveThumbType = Symbol(`${key$1}_activeThumbType`);
   const minScrollerWidth = 12;
   const scrollerLineWidth = 16;
-  const scrollerThumbAlpha = 0.36;
+  const scrollerThumbAlpha = 0.3;
   const scrollConfig = {
     width: minScrollerWidth,
     thumbColor: "#000000AA",
@@ -5919,12 +6644,13 @@ var __privateMethod = (obj, member, method) => {
   const borderColor = "#00000080";
   const scaleColor = "#000000";
   const textColor = "#00000080";
-  const fontFamily = "monospace";
+  const fontFamily$1 = "monospace";
   const fontSize = 10;
   const fontWeight = 100;
   const gridColor = "#AAAAAA20";
   const gridKeyColor = "#AAAAAA40";
   const lineSize = 1;
+  const selectedAreaColor = "#196097";
   function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
@@ -6003,7 +6729,7 @@ var __privateMethod = (obj, member, method) => {
         ctx.$setFont({
           fontWeight,
           fontSize,
-          fontFamily
+          fontFamily: fontFamily$1
         });
         ctx.fillText(`${item.num}`, item.position + fontStart, fontStart);
       }
@@ -6039,7 +6765,7 @@ var __privateMethod = (obj, member, method) => {
           ctx.$setFont({
             fontWeight,
             fontSize,
-            fontFamily
+            fontFamily: fontFamily$1
           });
           ctx.fillText(numText, fontStart + fontSize, item.position + fontStart);
         });
@@ -6098,9 +6824,61 @@ var __privateMethod = (obj, member, method) => {
       ctx.stroke();
     }
   }
+  function drawScrollerSelectedArea(ctx, opts) {
+    const { snapshot, calculator } = opts;
+    const { sharedStore } = snapshot;
+    const selectedElementList = sharedStore[keySelectedElementList];
+    const actionType = sharedStore[keyActionType];
+    if (["select", "drag", "drag-list", "drag-list-end"].includes(actionType) && selectedElementList.length > 0) {
+      const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+      const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+      const rangeRectInfoList = [];
+      const xAreaStartList = [];
+      const xAreaEndList = [];
+      const yAreaStartList = [];
+      const yAreaEndList = [];
+      selectedElementList.forEach((elem) => {
+        const rectInfo = calculator.calcViewRectInfoFromRange(elem.uuid, {
+          viewScaleInfo,
+          viewSizeInfo
+        });
+        if (rectInfo) {
+          rangeRectInfoList.push(rectInfo);
+          xAreaStartList.push(rectInfo.left.x);
+          xAreaEndList.push(rectInfo.right.x);
+          yAreaStartList.push(rectInfo.top.y);
+          yAreaEndList.push(rectInfo.bottom.y);
+        }
+      });
+      if (!(rangeRectInfoList.length > 0)) {
+        return;
+      }
+      const xAreaStart = Math.min(...xAreaStartList);
+      const xAreaEnd = Math.max(...xAreaEndList);
+      const yAreaStart = Math.min(...yAreaStartList);
+      const yAreaEnd = Math.max(...yAreaEndList);
+      ctx.globalAlpha = 1;
+      ctx.beginPath();
+      ctx.moveTo(xAreaStart, 0);
+      ctx.lineTo(xAreaEnd, 0);
+      ctx.lineTo(xAreaEnd, rulerSize);
+      ctx.lineTo(xAreaStart, rulerSize);
+      ctx.fillStyle = selectedAreaColor;
+      ctx.closePath();
+      ctx.fill();
+      ctx.beginPath();
+      ctx.moveTo(0, yAreaStart);
+      ctx.lineTo(rulerSize, yAreaStart);
+      ctx.lineTo(rulerSize, yAreaEnd);
+      ctx.lineTo(0, yAreaEnd);
+      ctx.fillStyle = selectedAreaColor;
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
   const middlewareEventRuler = "@middleware/show-ruler";
   const MiddlewareRuler = (opts) => {
-    const { boardContent, viewer, eventHub } = opts;
+    const { boardContent, viewer, eventHub, calculator } = opts;
     const { helperContext, underContext } = boardContent;
     let show = true;
     let showGrid = true;
@@ -6127,6 +6905,7 @@ var __privateMethod = (obj, member, method) => {
         if (show === true) {
           const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
           const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+          drawScrollerSelectedArea(helperContext, { snapshot, calculator });
           drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
           const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
           drawXRuler(helperContext, { scaleList: xList });
@@ -6187,6 +6966,222 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
+  const fontFamily = "monospace";
+  function drawSizeInfoText(ctx, opts) {
+    const { point, rotateCenter, angle: angle2, text: text2, color: color2, background: background2, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    rotateByCenter(ctx, angle2, rotateCenter, () => {
+      ctx.$setFont({
+        fontWeight: "300",
+        fontSize: fontSize2,
+        fontFamily
+      });
+      const padding = (lineHeight2 - fontSize2) / 2;
+      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
+      const bgStart = {
+        x: point.x - textWidth / 2 - padding,
+        y: point.y
+      };
+      const bgEnd = {
+        x: bgStart.x + textWidth + padding * 2,
+        y: bgStart.y + fontSize2 + padding
+      };
+      const textStart = {
+        x: point.x - textWidth / 2,
+        y: point.y
+      };
+      ctx.setLineDash([]);
+      ctx.fillStyle = background2;
+      ctx.beginPath();
+      ctx.moveTo(bgStart.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgEnd.y);
+      ctx.lineTo(bgStart.x, bgEnd.y);
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = color2;
+      ctx.textBaseline = "top";
+      ctx.fillText(text2, textStart.x, textStart.y + padding);
+    });
+  }
+  function drawPositionInfoText(ctx, opts) {
+    const { point, rotateCenter, angle: angle2, text: text2, color: color2, background: background2, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    rotateByCenter(ctx, angle2, rotateCenter, () => {
+      ctx.$setFont({
+        fontWeight: "300",
+        fontSize: fontSize2,
+        fontFamily
+      });
+      const padding = (lineHeight2 - fontSize2) / 2;
+      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
+      const bgStart = {
+        x: point.x,
+        y: point.y
+      };
+      const bgEnd = {
+        x: bgStart.x + textWidth + padding * 2,
+        y: bgStart.y + fontSize2 + padding
+      };
+      const textStart = {
+        x: point.x + padding,
+        y: point.y
+      };
+      ctx.setLineDash([]);
+      ctx.fillStyle = background2;
+      ctx.beginPath();
+      ctx.moveTo(bgStart.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgEnd.y);
+      ctx.lineTo(bgStart.x, bgEnd.y);
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = color2;
+      ctx.textBaseline = "top";
+      ctx.fillText(text2, textStart.x, textStart.y + padding);
+    });
+  }
+  function drawAngleInfoText(ctx, opts) {
+    const { point, rotateCenter, angle: angle2, text: text2, color: color2, background: background2, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    rotateByCenter(ctx, angle2, rotateCenter, () => {
+      ctx.$setFont({
+        fontWeight: "300",
+        fontSize: fontSize2,
+        fontFamily
+      });
+      const padding = (lineHeight2 - fontSize2) / 2;
+      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
+      const bgStart = {
+        x: point.x,
+        y: point.y
+      };
+      const bgEnd = {
+        x: bgStart.x + textWidth + padding * 2,
+        y: bgStart.y + fontSize2 + padding
+      };
+      const textStart = {
+        x: point.x + padding,
+        y: point.y
+      };
+      ctx.setLineDash([]);
+      ctx.fillStyle = background2;
+      ctx.beginPath();
+      ctx.moveTo(bgStart.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgEnd.y);
+      ctx.lineTo(bgStart.x, bgEnd.y);
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = color2;
+      ctx.textBaseline = "top";
+      ctx.fillText(text2, textStart.x, textStart.y + padding);
+    });
+  }
+  const infoBackground = "#1973bac6";
+  const infoTextColor = "#ffffff";
+  const infoFontSize = 10;
+  const infoLineHeight = 16;
+  const MiddlewareInfo = (opts) => {
+    const { boardContent, calculator } = opts;
+    const { helperContext } = boardContent;
+    return {
+      name: "@middleware/info",
+      beforeDrawFrame({ snapshot }) {
+        const { sharedStore } = snapshot;
+        const selectedElementList = sharedStore[keySelectedElementList];
+        const actionType = sharedStore[keyActionType];
+        const groupQueue = sharedStore[keyGroupQueue] || [];
+        if (selectedElementList.length === 1) {
+          const elem = selectedElementList[0];
+          if (elem && ["select", "drag", "resize"].includes(actionType)) {
+            const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+            const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+            const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = elem;
+            const totalGroupQueue = [
+              ...groupQueue,
+              ...[
+                {
+                  uuid: createUUID(),
+                  x: x2,
+                  y: y2,
+                  w: w2,
+                  h: h2,
+                  angle: angle2,
+                  type: "group",
+                  detail: { children: [] }
+                }
+              ]
+            ];
+            const calcOpts = { viewScaleInfo, viewSizeInfo };
+            const rangeRectInfo = calculator.calcViewRectInfoFromOrigin(elem.uuid, calcOpts);
+            let totalAngle = 0;
+            totalGroupQueue.forEach((group) => {
+              totalAngle += group.angle || 0;
+            });
+            const totalRadian = parseAngleToRadian(limitAngle(0 - totalAngle));
+            if (rangeRectInfo) {
+              const elemCenter = rangeRectInfo == null ? void 0 : rangeRectInfo.center;
+              const rectInfo = {
+                topLeft: rotatePoint(elemCenter, rangeRectInfo.topLeft, totalRadian),
+                topRight: rotatePoint(elemCenter, rangeRectInfo.topRight, totalRadian),
+                bottomRight: rotatePoint(elemCenter, rangeRectInfo.bottomRight, totalRadian),
+                bottomLeft: rotatePoint(elemCenter, rangeRectInfo.bottomLeft, totalRadian),
+                center: rotatePoint(elemCenter, rangeRectInfo.center, totalRadian),
+                top: rotatePoint(elemCenter, rangeRectInfo.top, totalRadian),
+                right: rotatePoint(elemCenter, rangeRectInfo.right, totalRadian),
+                bottom: rotatePoint(elemCenter, rangeRectInfo.bottom, totalRadian),
+                left: rotatePoint(elemCenter, rangeRectInfo.left, totalRadian)
+              };
+              const x22 = formatNumber(elem.x, { decimalPlaces: 2 });
+              const y22 = formatNumber(elem.y, { decimalPlaces: 2 });
+              const w22 = formatNumber(elem.w, { decimalPlaces: 2 });
+              const h22 = formatNumber(elem.h, { decimalPlaces: 2 });
+              const xyText = `${formatNumber(x22, { decimalPlaces: 0 })},${formatNumber(y22, { decimalPlaces: 0 })}`;
+              const whText = `${formatNumber(w22, { decimalPlaces: 0 })}x${formatNumber(h22, { decimalPlaces: 0 })}`;
+              const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
+              drawSizeInfoText(helperContext, {
+                point: {
+                  x: rectInfo.bottom.x,
+                  y: rectInfo.bottom.y + infoFontSize
+                },
+                rotateCenter: rectInfo.center,
+                angle: totalAngle,
+                text: whText,
+                fontSize: infoFontSize,
+                lineHeight: infoLineHeight,
+                color: infoTextColor,
+                background: infoBackground
+              });
+              drawPositionInfoText(helperContext, {
+                point: {
+                  x: rectInfo.topLeft.x,
+                  y: rectInfo.topLeft.y - infoFontSize * 2
+                },
+                rotateCenter: rectInfo.center,
+                angle: totalAngle,
+                text: xyText,
+                fontSize: infoFontSize,
+                lineHeight: infoLineHeight,
+                color: infoTextColor,
+                background: infoBackground
+              });
+              drawAngleInfoText(helperContext, {
+                point: {
+                  x: rectInfo.top.x + infoFontSize,
+                  y: rectInfo.top.y - infoFontSize * 2
+                },
+                rotateCenter: rectInfo.center,
+                angle: totalAngle,
+                text: angleText,
+                fontSize: infoFontSize,
+                lineHeight: infoLineHeight,
+                color: infoTextColor,
+                background: infoBackground
+              });
+            }
+          }
+        }
+      }
+    };
+  };
   class Core {
     constructor(container, opts) {
       __privateAdd(this, _initContainer);
@@ -6230,9 +7225,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();
@@ -6302,6 +7297,7 @@ var __privateMethod = (obj, member, method) => {
   };
   exports.Core = Core;
   exports.MiddlewareDragger = MiddlewareDragger;
+  exports.MiddlewareInfo = MiddlewareInfo;
   exports.MiddlewareRuler = MiddlewareRuler;
   exports.MiddlewareScaler = MiddlewareScaler;
   exports.MiddlewareScroller = MiddlewareScroller;