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

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
   };
@@ -1261,17 +1261,6 @@ var __privateMethod = (obj, member, method) => {
     _loop(elements);
     return result;
   }
-  function checkRectIntersect(rect1, rect2) {
-    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 [
@@ -1429,9 +1418,9 @@ var __privateMethod = (obj, member, method) => {
     ];
   }
   function isViewPointInElement(p, opts) {
-    const { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo } = opts;
+    const { context2d: ctx, element: elem, viewScaleInfo } = opts;
     const { angle: angle2 = 0 } = elem;
-    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo });
     const vertexes = rotateElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     if (vertexes.length >= 2) {
       ctx.beginPath();
@@ -1446,6 +1435,21 @@ var __privateMethod = (obj, member, method) => {
     }
     return false;
   }
+  function isViewPointInVertexes(p, vertexes, opts) {
+    const xList = [vertexes[0].x, vertexes[1].x, vertexes[2].x, vertexes[3].x];
+    const yList = [vertexes[0].y, vertexes[1].y, vertexes[2].y, vertexes[3].y];
+    const mixX = Math.min(...xList);
+    const maxX = Math.max(...xList);
+    const mixY = Math.min(...yList);
+    const maxY = Math.max(...yList);
+    if (p.x > mixX && p.x < maxX && p.y > mixY && p.y < maxY) {
+      return true;
+    }
+    if ((opts === null || opts === void 0 ? void 0 : opts.includeBorder) === true && (p.x === mixX || p.x === maxX || p.y === mixY || p.y === maxY)) {
+      return true;
+    }
+    return false;
+  }
   function getViewPointAtElement(p, opts) {
     var _a, _b, _c;
     const { context2d: ctx, data, viewScaleInfo, viewSizeInfo, groupQueue } = opts;
@@ -1512,20 +1516,6 @@ var __privateMethod = (obj, member, method) => {
     }
     return result;
   }
-  function isElementInView(elem, opts) {
-    const { viewSizeInfo, viewScaleInfo } = opts;
-    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);
-  }
   function calcElementOriginRectInfo(elemSize, opts) {
     const { groupQueue } = opts;
     const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
@@ -1816,6 +1806,103 @@ var __privateMethod = (obj, member, method) => {
     };
     return sizeController;
   }
+  function calcLayoutSizeController(layoutSize, opts) {
+    const { controllerSize: controllerSize2, viewScaleInfo } = opts;
+    const ctrlSize = controllerSize2 && controllerSize2 > 0 ? controllerSize2 : 8;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(layoutSize, { viewScaleInfo });
+    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
+    const topCenter = { x: center.x, y: y2 };
+    const rightCenter = { x: x2 + w2, y: center.y };
+    const bottomCenter = { x: center.x, y: y2 + h2 };
+    const leftCenter = { x: x2, y: center.y };
+    const topLeftCenter = { x: x2, y: y2 };
+    const topRightCenter = { x: x2 + w2, y: y2 };
+    const bottomRightCenter = { x: x2 + w2, y: y2 + h2 };
+    const bottomLeftCenter = { x: x2, y: y2 + h2 };
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: 0 });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: 0 });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: 0 });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: 0 });
+    const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: 0 });
+    const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: 0 });
+    const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: 0 });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: 0 });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [topLeftVertexes[1], topRightVertexes[0], topRightVertexes[3], topLeftVertexes[2]];
+    const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
+    const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
+    const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
+    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
+    const sizeController = {
+      left: {
+        type: "left",
+        vertexes: leftVertexes,
+        center: leftCenter
+      },
+      right: {
+        type: "right",
+        vertexes: rightVertexes,
+        center: rightCenter
+      },
+      top: {
+        type: "top",
+        vertexes: topVertexes,
+        center: topCenter
+      },
+      bottom: {
+        type: "bottom",
+        vertexes: bottomVertexes,
+        center: bottomCenter
+      },
+      topLeft: {
+        type: "top-left",
+        vertexes: topLeftVertexes,
+        center: topLeftCenter
+      },
+      topRight: {
+        type: "top-right",
+        vertexes: topRightVertexes,
+        center: topRightCenter
+      },
+      bottomLeft: {
+        type: "bottom-left",
+        vertexes: bottomLeftVertexes,
+        center: bottomLeftCenter
+      },
+      bottomRight: {
+        type: "bottom-right",
+        vertexes: bottomRightVertexes,
+        center: bottomRightCenter
+      },
+      leftMiddle: {
+        type: "left-middle",
+        vertexes: leftMiddleVertexes,
+        center: leftCenter
+      },
+      rightMiddle: {
+        type: "right-middle",
+        vertexes: rightMiddleVertexes,
+        center: rightCenter
+      },
+      topMiddle: {
+        type: "top-middle",
+        vertexes: topMiddleVertexes,
+        center: topCenter
+      },
+      bottomMiddle: {
+        type: "bottom-middle",
+        vertexes: bottomMiddleVertexes,
+        center: bottomCenter
+      }
+    };
+    return sizeController;
+  }
   function generateSVGPath(commands) {
     let path = "";
     commands.forEach((item) => {
@@ -1846,7 +1933,6 @@ var __privateMethod = (obj, member, method) => {
       textAlign: "left",
       verticalAlign: "top",
       fontSize: 16,
-      lineHeight: 20,
       fontFamily: "sans-serif",
       fontWeight: 400,
       overflow: "hidden"
@@ -2474,7 +2560,7 @@ var __privateMethod = (obj, member, method) => {
   const detailConfig = getDefaultElementDetailConfig();
   function drawText(ctx, elem, opts) {
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || 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, {
@@ -2485,8 +2571,10 @@ var __privateMethod = (obj, member, method) => {
         parentOpacity,
         renderContent: () => {
           const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
-          const fontSize2 = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
-          const lineHeight2 = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize2;
+          const originFontSize = detail.fontSize || detailConfig.fontSize;
+          const fontSize2 = originFontSize * viewScaleInfo.scale;
+          const originLineHeight = detail.lineHeight || originFontSize;
+          const lineHeight2 = originLineHeight * viewScaleInfo.scale;
           ctx.fillStyle = elem.detail.color || detailConfig.color;
           ctx.textBaseline = "top";
           ctx.$setFont({
@@ -2503,7 +2591,7 @@ var __privateMethod = (obj, member, method) => {
             let lineText = "";
             if (tempText.length > 0) {
               for (let i = 0; i < tempText.length; i++) {
-                if (ctx.measureText(lineText + (tempText[i] || "")).width < ctx.$doPixelRatio(w2)) {
+                if (ctx.measureText(lineText + (tempText[i] || "")).width <= ctx.$doPixelRatio(w2)) {
                   lineText += tempText[i] || "";
                 } else {
                   lines.push({
@@ -2517,7 +2605,7 @@ var __privateMethod = (obj, member, method) => {
                   break;
                 }
                 if (tempText.length - 1 === i) {
-                  if ((lineNum + 1) * fontHeight < h2) {
+                  if ((lineNum + 1) * fontHeight <= h2) {
                     lines.push({
                       text: lineText,
                       width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
@@ -2726,7 +2814,7 @@ var __privateMethod = (obj, member, method) => {
                     y: newParentSize.y + child.y
                   });
                   if (opts.forceDrawAll !== true) {
-                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.needRender(child))) {
                       continue;
                     }
                   }
@@ -2758,7 +2846,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;
         }
       }
@@ -2771,27 +2859,47 @@ var __privateMethod = (obj, member, method) => {
       }
     }
   }
-  function drawUnderlay(ctx, underlay, opts) {
+  function drawLayout(ctx, layout, opts, renderContent) {
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const elem = Object.assign({ uuid: "underlay" }, underlay);
+    const elem = Object.assign({ uuid: "layout", type: "group" }, 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" }, 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) {
@@ -3068,21 +3176,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");
@@ -3158,14 +3265,22 @@ var __privateMethod = (obj, member, method) => {
         }
       }), "f");
     }
-    toGridNum(num) {
+    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");
     }
-    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;
@@ -4218,22 +4333,23 @@ var __privateMethod = (obj, member, method) => {
     }
     return key2;
   };
-  const key$2 = "SELECT";
-  const keyActionType = Symbol(`${key$2}_actionType`);
-  const keyResizeType = Symbol(`${key$2}_resizeType`);
-  const keyAreaStart = Symbol(`${key$2}_areaStart`);
-  const keyAreaEnd = Symbol(`${key$2}_areaEnd`);
-  const keyHoverElement = Symbol(`${key$2}_hoverElement`);
-  const keyHoverElementVertexes = Symbol(`${key$2}_hoverElementVertexes`);
-  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`);
+  const eventChange = "change";
+  const key$3 = "SELECT";
+  const keyActionType = Symbol(`${key$3}_actionType`);
+  const keyResizeType = Symbol(`${key$3}_resizeType`);
+  const keyAreaStart = Symbol(`${key$3}_areaStart`);
+  const keyAreaEnd = Symbol(`${key$3}_areaEnd`);
+  const keyHoverElement = Symbol(`${key$3}_hoverElement`);
+  const keyHoverElementVertexes = Symbol(`${key$3}_hoverElementVertexes`);
+  const keySelectedElementList = Symbol(`${key$3}_selectedElementList`);
+  const keySelectedElementListVertexes = Symbol(`${key$3}_selectedElementListVertexes`);
+  const keySelectedElementController = Symbol(`${key$3}_selectedElementController`);
+  const keySelectedElementPosition = Symbol(`${key$3}_selectedElementPosition`);
+  const keySelectedReferenceXLines = Symbol(`${key$3}_selectedReferenceXLines`);
+  const keySelectedReferenceYLines = Symbol(`${key$3}_selectedReferenceYLines`);
+  const keyGroupQueue = Symbol(`${key$3}_groupQueue`);
+  const keyGroupQueueVertexesList = Symbol(`${key$3}_groupQueueVertexesList`);
+  const keyIsMoving = Symbol(`${key$3}_isMoving`);
   const selectWrapperBorderWidth = 2;
   const resizeControllerBorderWidth = 4;
   const areaBorderWidth = 1;
@@ -5880,6 +5996,11 @@ var __privateMethod = (obj, member, method) => {
         });
         triggerCursor(target);
         if (target.type === null) {
+          if (sharer.getSharedStorage(keyHoverElement) || sharer.getSharedStorage(keyHoverElementVertexes)) {
+            sharer.setSharedStorage(keyHoverElement, null);
+            sharer.setSharedStorage(keyHoverElementVertexes, null);
+            viewer.drawFrame();
+          }
           return;
         }
         if (target.type === "over-element" && sharer.getSharedStorage(keyActionType) === "select" && target.elements.length === 1 && target.elements[0].uuid === ((_c = (_b = getActiveElements()) == null ? void 0 : _b[0]) == null ? void 0 : _c.uuid)) {
@@ -6035,7 +6156,7 @@ var __privateMethod = (obj, member, method) => {
                     type: "updateElement",
                     content: {
                       element: elem,
-                      position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                      position: getElementPositionFromList(elem.uuid, data.elements) || []
                     }
                   },
                   viewSizeInfo,
@@ -6084,19 +6205,20 @@ 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 = calculator.toGridNum(resizedElemSize.x);
-              elems[0].y = calculator.toGridNum(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: calculator.toGridNum(resizedElemSize.w),
-                  h: calculator.toGridNum(resizedElemSize.h)
+                  w: calculator.toGridNum(resizedElemSize.w, calcOpts),
+                  h: calculator.toGridNum(resizedElemSize.h, calcOpts)
                 });
               } else {
-                elems[0].w = calculator.toGridNum(resizedElemSize.w);
-                elems[0].h = calculator.toGridNum(resizedElemSize.h);
+                elems[0].w = calculator.toGridNum(resizedElemSize.w, calcOpts);
+                elems[0].h = calculator.toGridNum(resizedElemSize.h, calcOpts);
               }
             }
             updateSelectedElementList([elems[0]]);
@@ -6185,7 +6307,7 @@ var __privateMethod = (obj, member, method) => {
           }
           if (data && ["drag", "drag-list", "drag-list-end", "resize"].includes(actionType)) {
             let type = "dragElement";
-            eventHub.trigger("change", { data, type });
+            eventHub.trigger(eventChange, { data, type });
           }
           viewer.drawFrame();
         };
@@ -6323,15 +6445,15 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const key$1 = "SCROLL";
-  const keyXThumbRect = Symbol(`${key$1}_xThumbRect`);
-  const keyYThumbRect = Symbol(`${key$1}_yThumbRect`);
-  const keyPrevPoint$1 = Symbol(`${key$1}_prevPoint`);
-  const keyActivePoint = Symbol(`${key$1}_activePoint`);
-  const keyActiveThumbType = Symbol(`${key$1}_activeThumbType`);
+  const key$2 = "SCROLL";
+  const keyXThumbRect = Symbol(`${key$2}_xThumbRect`);
+  const keyYThumbRect = Symbol(`${key$2}_yThumbRect`);
+  const keyPrevPoint$1 = Symbol(`${key$2}_prevPoint`);
+  const keyActivePoint = Symbol(`${key$2}_activePoint`);
+  const keyActiveThumbType = Symbol(`${key$2}_activeThumbType`);
   const minScrollerWidth = 12;
   const scrollerLineWidth = 16;
-  const scrollerThumbAlpha = 0.36;
+  const scrollerThumbAlpha = 0.3;
   const scrollConfig = {
     width: minScrollerWidth,
     thumbColor: "#000000AA",
@@ -6641,12 +6763,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 = [];
@@ -6725,7 +6848,7 @@ var __privateMethod = (obj, member, method) => {
         ctx.$setFont({
           fontWeight,
           fontSize,
-          fontFamily
+          fontFamily: fontFamily$1
         });
         ctx.fillText(`${item.num}`, item.position + fontStart, fontStart);
       }
@@ -6761,7 +6884,7 @@ var __privateMethod = (obj, member, method) => {
           ctx.$setFont({
             fontWeight,
             fontSize,
-            fontFamily
+            fontFamily: fontFamily$1
           });
           ctx.fillText(numText, fontStart + fontSize, item.position + fontStart);
         });
@@ -6820,9 +6943,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;
@@ -6849,6 +7024,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 });
@@ -6866,8 +7042,8 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const key = "DRAG";
-  const keyPrevPoint = Symbol(`${key}_prevPoint`);
+  const key$1 = "DRAG";
+  const keyPrevPoint = Symbol(`${key$1}_prevPoint`);
   const MiddlewareDragger = (opts) => {
     const { eventHub, sharer, viewer } = opts;
     let isDragging = false;
@@ -6909,6 +7085,553 @@ 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
+              });
+            }
+          }
+        }
+      }
+    };
+  };
+  const key = "LAYOUT_SELECT";
+  const keyLayoutActionType = Symbol(`${key}_layoutActionType`);
+  const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
+  const keyLayoutController = Symbol(`${key}_layoutController`);
+  const selectColor = "#1973ba";
+  const disableColor = "#5b5959b5";
+  function drawControllerBox(ctx, boxVertexes) {
+    ctx.setLineDash([]);
+    ctx.fillStyle = "#FFFFFF";
+    ctx.beginPath();
+    ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
+    ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y);
+    ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
+    ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
+    ctx.closePath();
+    ctx.fill();
+    ctx.strokeStyle = selectColor;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
+    ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y);
+    ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
+    ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  function drawControllerCross(ctx, opts) {
+    const { vertexes, strokeStyle, lineWidth } = opts;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  function drawControllerLine(ctx, opts) {
+    const { start, end, centerVertexes, disabled } = opts;
+    const lineWidth = disabled === true ? 1 : 2;
+    const strokeStyle = disabled === true ? disableColor : selectColor;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.closePath();
+    ctx.stroke();
+    if (disabled === true) {
+      drawControllerCross(ctx, {
+        vertexes: centerVertexes,
+        lineWidth,
+        strokeStyle
+      });
+    }
+  }
+  function drawLayoutController(ctx, opts) {
+    const { controller, operations } = opts;
+    const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
+    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disableTop) });
+    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disableRight) });
+    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disableBottom) });
+    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disableLeft) });
+    const disabledOpts = {
+      lineWidth: 1,
+      strokeStyle: disableColor
+    };
+    if ((operations == null ? void 0 : operations.disableTopLeft) === true) {
+      drawControllerCross(ctx, { vertexes: topLeft.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, topLeft.vertexes);
+    }
+    if ((operations == null ? void 0 : operations.disableTopRight) === true) {
+      drawControllerCross(ctx, { vertexes: topRight.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, topRight.vertexes);
+    }
+    if ((operations == null ? void 0 : operations.disableBottomRight) === true) {
+      drawControllerCross(ctx, { vertexes: bottomRight.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, bottomRight.vertexes);
+    }
+    if ((operations == null ? void 0 : operations.disableBottomLeft) === true) {
+      drawControllerCross(ctx, { vertexes: bottomLeft.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, bottomLeft.vertexes);
+    }
+  }
+  const MiddlewareLayoutSelector = (opts) => {
+    const { sharer, boardContent, calculator, viewer, eventHub } = opts;
+    const { helperContext } = boardContent;
+    let prevPoint = null;
+    const clear = () => {
+      prevPoint = null;
+      sharer.setSharedStorage(keyLayoutActionType, null);
+      sharer.setSharedStorage(keyLayoutControlType, null);
+      sharer.setSharedStorage(keyLayoutController, null);
+    };
+    const isInElementAction = () => {
+      const elementType = sharer.getSharedStorage(keyActionType);
+      if (elementType) {
+        return true;
+      }
+      return false;
+    };
+    const isDisbaledControl = (controlType) => {
+      var _a;
+      const data = sharer.getActiveStorage("data");
+      if ((_a = data == null ? void 0 : data.layout) == null ? void 0 : _a.operations) {
+        const operations = data.layout.operations;
+        if (controlType === "left" && operations.disableLeft === true) {
+          return true;
+        }
+        if (controlType === "top" && operations.disableTop === true) {
+          return true;
+        }
+        if (controlType === "right" && operations.disableRight === true) {
+          return true;
+        }
+        if (controlType === "bottom" && operations.disableBottom === true) {
+          return true;
+        }
+        if (controlType === "top-left" && operations.disableTopLeft === true) {
+          return true;
+        }
+        if (controlType === "top-right" && operations.disableTopRight === true) {
+          return true;
+        }
+        if (controlType === "bottom-left" && operations.disableBottomLeft === true) {
+          return true;
+        }
+        if (controlType === "bottom-right" && operations.disableBottomRight === true) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const getLayoutSize = () => {
+      const data = sharer.getActiveStorage("data");
+      if (data == null ? void 0 : data.layout) {
+        const { x: x2, y: y2, w: w2, h: h2 } = data.layout;
+        return { x: x2, y: y2, w: w2, h: h2 };
+      }
+      return null;
+    };
+    const resetController = () => {
+      const viewScaleInfo = sharer.getActiveViewScaleInfo();
+      const size = getLayoutSize();
+      if (size) {
+        const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
+        sharer.setSharedStorage(keyLayoutController, controller);
+      } else {
+        sharer.setSharedStorage(keyLayoutController, null);
+      }
+    };
+    const resetControlType = (e) => {
+      const data = sharer.getActiveStorage("data");
+      const controller = sharer.getSharedStorage(keyLayoutController);
+      if (controller && (data == null ? void 0 : data.layout) && (e == null ? void 0 : e.point)) {
+        let layoutControlType = null;
+        if (controller) {
+          const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = controller;
+          const list = [topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left];
+          for (let i = 0; i < list.length; i++) {
+            const item = list[i];
+            if (isViewPointInVertexes(e.point, item.vertexes)) {
+              layoutControlType = `${item.type}`;
+              break;
+            }
+          }
+          if (layoutControlType) {
+            sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
+            eventHub.trigger(middlewareEventSelectClear, {});
+            return layoutControlType;
+          }
+        }
+      }
+      return null;
+    };
+    return {
+      name: "@middleware/layout-selector",
+      use: () => {
+        clear();
+        resetController();
+      },
+      hover: (e) => {
+        if (isInElementAction()) {
+          return;
+        }
+        const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+        const data = sharer.getActiveStorage("data");
+        if ((data == null ? void 0 : data.layout) && prevLayoutActionType !== "resize") {
+          resetController();
+          const layoutControlType = resetControlType(e);
+          if (layoutControlType) {
+            sharer.setSharedStorage(keyLayoutActionType, "hover");
+            if (!isDisbaledControl(layoutControlType)) {
+              eventHub.trigger("cursor", {
+                type: `resize-${layoutControlType}`,
+                groupQueue: [],
+                element: getLayoutSize()
+              });
+            }
+            viewer.drawFrame();
+          } else {
+            sharer.setSharedStorage(keyLayoutActionType, null);
+          }
+        }
+        if (["hover", "resize"].includes(sharer.getSharedStorage(keyLayoutActionType))) {
+          return false;
+        }
+        if (prevLayoutActionType === "hover" && !sharer.getSharedStorage(keyLayoutActionType)) {
+          viewer.drawFrame();
+        }
+      },
+      pointStart: (e) => {
+        if (isInElementAction()) {
+          return;
+        }
+        resetController();
+        const layoutControlType = resetControlType(e);
+        prevPoint = e.point;
+        if (layoutControlType) {
+          if (isDisbaledControl(layoutControlType)) {
+            return;
+          }
+          sharer.setSharedStorage(keyLayoutActionType, "resize");
+          return false;
+        }
+        const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+        if (["hover", "resize"].includes(layoutActionType)) {
+          return false;
+        }
+      },
+      pointMove: (e) => {
+        if (isInElementAction()) {
+          return;
+        }
+        const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+        const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+        const data = sharer.getActiveStorage("data");
+        if (layoutControlType && isDisbaledControl(layoutControlType)) {
+          return;
+        }
+        if (layoutActionType === "resize" && layoutControlType && (data == null ? void 0 : data.layout)) {
+          if (prevPoint) {
+            const scale = sharer.getActiveStorage("scale");
+            const moveX = (e.point.x - prevPoint.x) / scale;
+            const moveY = (e.point.y - prevPoint.y) / scale;
+            const { x: x2, y: y2, w: w2, h: h2 } = data.layout;
+            if (layoutControlType === "top") {
+              data.layout.y = calculator.toGridNum(y2 + moveY);
+              data.layout.h = calculator.toGridNum(h2 - moveY);
+            } else if (layoutControlType === "right") {
+              data.layout.w = calculator.toGridNum(w2 + moveX);
+            } else if (layoutControlType === "bottom") {
+              data.layout.h = calculator.toGridNum(h2 + moveY);
+            } else if (layoutControlType === "left") {
+              data.layout.x = calculator.toGridNum(x2 + moveX);
+              data.layout.w = calculator.toGridNum(w2 - moveX);
+            } else if (layoutControlType === "top-left") {
+              data.layout.x = calculator.toGridNum(x2 + moveX);
+              data.layout.y = calculator.toGridNum(y2 + moveY);
+              data.layout.w = calculator.toGridNum(w2 - moveX);
+              data.layout.h = calculator.toGridNum(h2 - moveY);
+            } else if (layoutControlType === "top-right") {
+              data.layout.y = calculator.toGridNum(y2 + moveY);
+              data.layout.w = calculator.toGridNum(w2 + moveX);
+              data.layout.h = calculator.toGridNum(h2 - moveY);
+            } else if (layoutControlType === "bottom-right") {
+              data.layout.w = calculator.toGridNum(w2 + moveX);
+              data.layout.h = calculator.toGridNum(h2 + moveY);
+            } else if (layoutControlType === "bottom-left") {
+              data.layout.x = calculator.toGridNum(x2 + moveX);
+              data.layout.w = calculator.toGridNum(w2 - moveX);
+              data.layout.h = calculator.toGridNum(h2 + moveY);
+            }
+          }
+          prevPoint = e.point;
+          resetController();
+          viewer.drawFrame();
+          return false;
+        }
+        if (["hover", "resize"].includes(layoutActionType)) {
+          return false;
+        }
+      },
+      pointEnd: () => {
+        const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+        const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+        const data = sharer.getActiveStorage("data");
+        if (data && layoutActionType === "resize" && layoutControlType && !isDisbaledControl(layoutControlType)) {
+          eventHub.trigger(eventChange, {
+            type: "changeLayout",
+            data
+          });
+        }
+        clear();
+      },
+      beforeDrawFrame: ({ snapshot }) => {
+        var _a;
+        const { sharedStore, activeStore } = snapshot;
+        const layoutActionType = sharedStore[keyLayoutActionType];
+        const layoutControlType = sharedStore[keyLayoutControlType];
+        if (((_a = activeStore.data) == null ? void 0 : _a.layout) && layoutActionType && layoutControlType) {
+          if (["hover", "resize"].includes(layoutActionType)) {
+            const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+            const { x: x2, y: y2, w: w2, h: h2 } = activeStore.data.layout;
+            const size = { x: x2, y: y2, w: w2, h: h2 };
+            const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
+            drawLayoutController(helperContext, { controller, operations: activeStore.data.layout.operations || {} });
+          }
+        }
+      },
+      scrollX: () => {
+        clear();
+      },
+      scrollY: () => {
+        clear();
+      },
+      wheelScale: () => {
+        clear();
+      }
+    };
+  };
   class Core {
     constructor(container, opts) {
       __privateAdd(this, _initContainer);
@@ -7024,11 +7747,14 @@ var __privateMethod = (obj, member, method) => {
   };
   exports.Core = Core;
   exports.MiddlewareDragger = MiddlewareDragger;
+  exports.MiddlewareInfo = MiddlewareInfo;
+  exports.MiddlewareLayoutSelector = MiddlewareLayoutSelector;
   exports.MiddlewareRuler = MiddlewareRuler;
   exports.MiddlewareScaler = MiddlewareScaler;
   exports.MiddlewareScroller = MiddlewareScroller;
   exports.MiddlewareSelector = MiddlewareSelector;
   exports.MiddlewareTextEditor = MiddlewareTextEditor;
+  exports.eventChange = eventChange;
   exports.middlewareEventRuler = middlewareEventRuler;
   exports.middlewareEventScale = middlewareEventScale;
   exports.middlewareEventSelect = middlewareEventSelect;