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

package/dist/index.global.js

@@ -1418,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();
@@ -1435,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;
@@ -1791,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) => {
@@ -1821,7 +1933,6 @@ var __privateMethod = (obj, member, method) => {
       textAlign: "left",
       verticalAlign: "top",
       fontSize: 16,
-      lineHeight: 20,
       fontFamily: "sans-serif",
       fontWeight: 400,
       overflow: "hidden"
@@ -2449,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, {
@@ -2460,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({
@@ -2478,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({
@@ -2492,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)
@@ -2748,7 +2861,7 @@ var __privateMethod = (obj, member, method) => {
   }
   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 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 });
@@ -2762,7 +2875,7 @@ var __privateMethod = (obj, member, method) => {
     });
     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 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, {
@@ -4220,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;
@@ -5882,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)) {
@@ -6188,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();
         };
@@ -6326,12 +6445,12 @@ 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.3;
@@ -6923,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;
@@ -7182,6 +7301,337 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
+  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);
@@ -7298,11 +7748,13 @@ 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;