@idraw/core 0.4.0-beta.29 → 0.4.0-beta.30

package/dist/index.global.js

@@ -1435,6 +1435,10 @@ var __privateMethod = (obj, member, method) => {
     }
     return false;
   }
+  function isViewPointInElementSize(p, elemSize, opts) {
+    const vertexes = calcElementVertexes(elemSize);
+    return isViewPointInVertexes(p, vertexes);
+  }
   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];
@@ -2681,140 +2685,146 @@ var __privateMethod = (obj, member, method) => {
     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, {
-        originElem: elem,
-        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+      drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
-        parentOpacity,
         renderContent: () => {
-          const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
-          const originFontSize = detail.fontSize || detailConfig.fontSize;
-          const fontSize2 = originFontSize * viewScaleInfo.scale;
-          if (fontSize2 < 2) {
-            return;
-          }
-          const originLineHeight = detail.lineHeight || originFontSize;
-          const lineHeight2 = originLineHeight * viewScaleInfo.scale;
-          ctx.fillStyle = elem.detail.color || detailConfig.color;
-          ctx.textBaseline = "top";
-          ctx.$setFont({
-            fontWeight: detail.fontWeight,
-            fontSize: fontSize2,
-            fontFamily: enhanceFontFamliy(detail.fontFamily)
+          drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+            viewScaleInfo,
+            viewSizeInfo,
+            parentOpacity
           });
-          let detailText = detail.text.replace(/\r\n/gi, "\n");
-          if (detail.textTransform === "lowercase") {
-            detailText = detailText.toLowerCase();
-          } else if (detail.textTransform === "uppercase") {
-            detailText = detailText.toUpperCase();
-          }
-          const fontHeight = lineHeight2;
-          const detailTextList = detailText.split("\n");
-          const lines = [];
-          let lineNum = 0;
-          detailTextList.forEach((itemText, idx) => {
-            if (detail.minInlineSize === "maxContent") {
+        }
+      });
+      {
+        const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
+        const originFontSize = detail.fontSize || detailConfig.fontSize;
+        const fontSize2 = originFontSize * viewScaleInfo.scale;
+        if (fontSize2 < 2) {
+          return;
+        }
+        const originLineHeight = detail.lineHeight || originFontSize;
+        const lineHeight2 = originLineHeight * viewScaleInfo.scale;
+        ctx.fillStyle = elem.detail.color || detailConfig.color;
+        ctx.textBaseline = "top";
+        ctx.$setFont({
+          fontWeight: detail.fontWeight,
+          fontSize: fontSize2,
+          fontFamily: enhanceFontFamliy(detail.fontFamily)
+        });
+        let detailText = detail.text.replace(/\r\n/gi, "\n");
+        if (detail.textTransform === "lowercase") {
+          detailText = detailText.toLowerCase();
+        } else if (detail.textTransform === "uppercase") {
+          detailText = detailText.toUpperCase();
+        }
+        const fontHeight = lineHeight2;
+        const detailTextList = detailText.split("\n");
+        const lines = [];
+        let lineNum = 0;
+        detailTextList.forEach((itemText, idx) => {
+          if (detail.minInlineSize === "maxContent") {
+            lines.push({
+              text: itemText,
+              width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
+            });
+          } else {
+            let lineText = "";
+            let splitStr = "";
+            let tempStrList = itemText.split(splitStr);
+            if (detail.wordBreak === "normal") {
+              const splitStr2 = " ";
+              const wordList = itemText.split(splitStr2);
+              tempStrList = [];
+              wordList.forEach((word, idx2) => {
+                tempStrList.push(word);
+                if (idx2 < wordList.length - 1) {
+                  tempStrList.push(splitStr2);
+                }
+              });
+            }
+            if (tempStrList.length === 1 && detail.overflow === "visible") {
               lines.push({
-                text: itemText,
-                width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
+                text: tempStrList[0],
+                width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
               });
-            } else {
-              let lineText = "";
-              let splitStr = "";
-              let tempStrList = itemText.split(splitStr);
-              if (detail.wordBreak === "normal") {
-                const splitStr2 = " ";
-                const wordList = itemText.split(splitStr2);
-                tempStrList = [];
-                wordList.forEach((word, idx2) => {
-                  tempStrList.push(word);
-                  if (idx2 < wordList.length - 1) {
-                    tempStrList.push(splitStr2);
-                  }
-                });
-              }
-              if (tempStrList.length === 1 && detail.overflow === "visible") {
-                lines.push({
-                  text: tempStrList[0],
-                  width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
-                });
-              } else if (tempStrList.length > 0) {
-                for (let i = 0; i < tempStrList.length; i++) {
-                  if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) {
-                    lineText += tempStrList[i] || "";
-                  } else {
+            } else if (tempStrList.length > 0) {
+              for (let i = 0; i < tempStrList.length; i++) {
+                if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) {
+                  lineText += tempStrList[i] || "";
+                } else {
+                  lines.push({
+                    text: lineText,
+                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                  });
+                  lineText = tempStrList[i] || "";
+                  lineNum++;
+                }
+                if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
+                  break;
+                }
+                if (tempStrList.length - 1 === i) {
+                  if ((lineNum + 1) * fontHeight <= h2) {
                     lines.push({
                       text: lineText,
                       width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
                     });
-                    lineText = tempStrList[i] || "";
-                    lineNum++;
-                  }
-                  if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
-                    break;
-                  }
-                  if (tempStrList.length - 1 === i) {
-                    if ((lineNum + 1) * fontHeight <= h2) {
-                      lines.push({
-                        text: lineText,
-                        width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                      });
-                      if (idx < detailTextList.length - 1) {
-                        lineNum++;
-                      }
-                      break;
+                    if (idx < detailTextList.length - 1) {
+                      lineNum++;
                     }
+                    break;
                   }
                 }
-              } else {
-                lines.push({
-                  text: "",
-                  width: 0
-                });
               }
-            }
-          });
-          let startY = 0;
-          let eachLineStartY = 0;
-          if (fontHeight > fontSize2) {
-            eachLineStartY = (fontHeight - fontSize2) / 2;
-          }
-          if (lines.length * fontHeight < h2) {
-            if (elem.detail.verticalAlign === "top") {
-              startY = 0;
-            } else if (elem.detail.verticalAlign === "bottom") {
-              startY += h2 - lines.length * fontHeight;
             } else {
-              startY += (h2 - lines.length * fontHeight) / 2;
+              lines.push({
+                text: "",
+                width: 0
+              });
             }
           }
-          {
-            const _y = y2 + startY;
-            if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
-              ctx.shadowColor = detail.textShadowColor;
-            }
-            if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
-              ctx.shadowOffsetX = detail.textShadowOffsetX;
-            }
-            if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
-              ctx.shadowOffsetY = detail.textShadowOffsetY;
-            }
-            if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
-              ctx.shadowBlur = detail.textShadowBlur;
-            }
-            lines.forEach((line, i) => {
-              let _x = x2;
-              if (detail.textAlign === "center") {
-                _x = x2 + (w2 - line.width) / 2;
-              } else if (detail.textAlign === "right") {
-                _x = x2 + (w2 - line.width);
-              }
-              ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY);
-            });
+        });
+        let startY = 0;
+        let eachLineStartY = 0;
+        if (fontHeight > fontSize2) {
+          eachLineStartY = (fontHeight - fontSize2) / 2;
+        }
+        if (lines.length * fontHeight < h2) {
+          if (elem.detail.verticalAlign === "top") {
+            startY = 0;
+          } else if (elem.detail.verticalAlign === "bottom") {
+            startY += h2 - lines.length * fontHeight;
+          } else {
+            startY += (h2 - lines.length * fontHeight) / 2;
           }
         }
-      });
+        {
+          const _y = y2 + startY;
+          if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
+            ctx.shadowColor = detail.textShadowColor;
+          }
+          if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
+            ctx.shadowOffsetX = detail.textShadowOffsetX;
+          }
+          if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
+            ctx.shadowOffsetY = detail.textShadowOffsetY;
+          }
+          if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
+            ctx.shadowBlur = detail.textShadowBlur;
+          }
+          lines.forEach((line, i) => {
+            let _x = x2;
+            if (detail.textAlign === "center") {
+              _x = x2 + (w2 - line.width) / 2;
+            } else if (detail.textAlign === "right") {
+              _x = x2 + (w2 - line.width);
+            }
+            ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY);
+          });
+        }
+      }
     });
   }
   var __rest = function(s, e) {
@@ -4589,7 +4599,7 @@ var __privateMethod = (obj, member, method) => {
   const areaBorderWidth = 1;
   const wrapperColor = "#1973ba";
   const lockColor = "#5b5959b5";
-  const controllerSize = 10;
+  const controllerSize$1 = 10;
   const referenceColor = "#f7276e";
   const middlewareEventSelect = "@middleware/select";
   const middlewareEventSelectClear = "@middleware/select-clear";
@@ -4740,7 +4750,7 @@ var __privateMethod = (obj, member, method) => {
       drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
       drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
       drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
-      drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: controllerSize, borderWidth: 2 });
+      drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: controllerSize$1, borderWidth: 2 });
     }
   }
   function drawArea(ctx, opts) {
@@ -5972,7 +5982,8 @@ var __privateMethod = (obj, member, method) => {
       textarea.style.resize = "none";
       textarea.style.overflow = "hidden";
       textarea.style.wordBreak = "break-all";
-      textarea.style.background = "transparent";
+      textarea.style.borderRadius = `${(typeof detail.borderRadius === "number" ? detail.borderRadius : 0) * scale}px`;
+      textarea.style.background = `${detail.background || "transparent"}`;
       textarea.style.color = `${detail.color || "#333333"}`;
       textarea.style.fontSize = `${detail.fontSize * scale}px`;
       textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
@@ -6059,71 +6070,495 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const MiddlewareSelector = (opts) => {
-    const { viewer, sharer, boardContent, calculator, eventHub } = opts;
+  const key$2 = "LAYOUT_SELECT";
+  const keyLayoutActionType = Symbol(`${key$2}_layoutActionType`);
+  const keyLayoutControlType = Symbol(`${key$2}_layoutControlType`);
+  const keyLayoutController = Symbol(`${key$2}_layoutController`);
+  const keyLayoutIsHover = Symbol(`${key$2}_layoutIsHover`);
+  const keyLayoutIsSelected = Symbol(`${key$2}_layoutIsSelected`);
+  const selectColor = "#b331c9";
+  const disableColor = "#5b5959b5";
+  const controllerSize = 10;
+  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.disabledTop) });
+    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledRight) });
+    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledBottom) });
+    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledLeft) });
+    const disabledOpts = {
+      lineWidth: 1,
+      strokeStyle: disableColor
+    };
+    if ((operations == null ? void 0 : operations.disabledTopLeft) === true) {
+      drawControllerCross(ctx, { vertexes: topLeft.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, topLeft.vertexes);
+    }
+    if ((operations == null ? void 0 : operations.disabledTopRight) === true) {
+      drawControllerCross(ctx, { vertexes: topRight.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, topRight.vertexes);
+    }
+    if ((operations == null ? void 0 : operations.disabledBottomRight) === true) {
+      drawControllerCross(ctx, { vertexes: bottomRight.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, bottomRight.vertexes);
+    }
+    if ((operations == null ? void 0 : operations.disabledBottomLeft) === true) {
+      drawControllerCross(ctx, { vertexes: bottomLeft.vertexes, ...disabledOpts });
+    } else {
+      drawControllerBox(ctx, bottomLeft.vertexes);
+    }
+  }
+  function drawLayoutHover(ctx, opts) {
+    const { layoutSize } = opts;
+    const { x: x2, y: y2, w: w2, h: h2 } = layoutSize;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = selectColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 + w2, y2);
+    ctx.lineTo(x2 + w2, y2 + h2);
+    ctx.lineTo(x2, y2 + h2);
+    ctx.lineTo(x2, y2);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  const MiddlewareLayoutSelector = (opts) => {
+    const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
-    let inBusyMode = null;
-    sharer.setSharedStorage(keyActionType, null);
-    sharer.setSharedStorage(keyEnableSnapToGrid, true);
-    const getActiveElements = () => {
-      return sharer.getSharedStorage(keySelectedElementList);
+    let prevIsHover = null;
+    let prevIsSelected = null;
+    let isBusy = null;
+    const clear = () => {
+      prevPoint = null;
+      sharer.setSharedStorage(keyLayoutActionType, null);
+      sharer.setSharedStorage(keyLayoutControlType, null);
+      sharer.setSharedStorage(keyLayoutController, null);
+      sharer.setSharedStorage(keyLayoutIsHover, null);
+      sharer.setSharedStorage(keyLayoutIsSelected, null);
+      prevIsHover = null;
+      prevIsSelected = null;
+      isBusy = null;
     };
-    const pushGroupQueue = (elem) => {
-      let groupQueue = sharer.getSharedStorage(keyGroupQueue);
-      if (!Array.isArray(groupQueue)) {
-        groupQueue = [];
+    const isInElementHover = () => {
+      const hoverElement = sharer.getSharedStorage(keyHoverElement);
+      if (hoverElement) {
+        clear();
+        return true;
       }
-      if (groupQueue.length > 0) {
-        if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) {
-          groupQueue.push(elem);
-        } else {
-          groupQueue = [];
-        }
-      } else if (groupQueue.length === 0) {
-        groupQueue.push(elem);
+      return false;
+    };
+    const isInElementAction = () => {
+      const elementActionType = sharer.getSharedStorage(keyActionType);
+      if (elementActionType && elementActionType !== "area") {
+        clear();
+        return true;
       }
-      const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue);
-      sharer.setSharedStorage(keyGroupQueue, groupQueue);
-      sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList);
-      return groupQueue.length > 0;
+      return false;
     };
-    const updateHoverElement = (elem) => {
-      sharer.setSharedStorage(keyHoverElement, elem);
-      let vertexes = null;
-      if (elem) {
-        vertexes = calcElementVertexesInGroup(elem, {
-          groupQueue: sharer.getSharedStorage(keyGroupQueue)
-        });
+    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 };
       }
-      sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
+      return null;
     };
-    const updateSelectedElementList = (list, opts2) => {
-      var _a;
-      sharer.setSharedStorage(keySelectedElementList, list);
-      if (list.length === 1) {
-        const controller = calcElementSizeController(list[0], {
-          groupQueue: sharer.getSharedStorage(keyGroupQueue),
-          controllerSize,
-          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, []);
+    const isInLayout = (p) => {
+      const size = getLayoutSize();
+      if (size) {
+        const { x: x2, y: y2, w: w2, h: h2 } = size;
+        const viewScaleInfo = sharer.getActiveViewScaleInfo();
+        const viewSize = calcViewElementSize(
+          {
+            x: x2 - controllerSize / 2,
+            y: y2 - controllerSize / 2,
+            w: w2 + controllerSize,
+            h: h2 + controllerSize
+          },
+          { viewScaleInfo }
+        );
+        return isViewPointInElementSize(p, viewSize);
       }
-      if ((opts2 == null ? void 0 : opts2.triggerEvent) === true) {
-        eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
+      return false;
+    };
+    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 pointTargetBaseOptions = () => {
-      return {
-        ctx: overlayContext,
-        calculator,
-        data: sharer.getActiveStorage("data"),
-        selectedElements: getActiveElements(),
-        viewScaleInfo: sharer.getActiveViewScaleInfo(),
+    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;
+    };
+    const updateCursor = (controlType) => {
+      if (isBusy === true) {
+        return;
+      }
+      eventHub.trigger("cursor", {
+        type: controlType ? `resize-${controlType}` : controlType,
+        groupQueue: [],
+        element: getLayoutSize()
+      });
+    };
+    return {
+      name: "@middleware/layout-selector",
+      use: () => {
+        clear();
+        resetController();
+      },
+      hover: (e) => {
+        if (isBusy === true) {
+          return;
+        }
+        if (isInElementAction()) {
+          return;
+        }
+        if (isInElementHover()) {
+          return;
+        }
+        if (isInLayout(e.point)) {
+          sharer.setSharedStorage(keyLayoutIsHover, true);
+        } else {
+          sharer.setSharedStorage(keyLayoutIsHover, false);
+          if (prevIsHover === true) {
+            viewer.drawFrame();
+            prevIsHover = false;
+          }
+        }
+        if (sharer.getSharedStorage(keyLayoutIsSelected) === true) {
+          const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+          const data = sharer.getActiveStorage("data");
+          if (data == null ? void 0 : data.layout) {
+            if (prevLayoutActionType !== "resize") {
+              resetController();
+              const layoutControlType = resetControlType(e);
+              if (layoutControlType) {
+                updateCursor(layoutControlType);
+              } else {
+                updateCursor();
+                sharer.setSharedStorage(keyLayoutActionType, null);
+              }
+            } else {
+              const layoutControlType = resetControlType(e);
+              updateCursor(layoutControlType);
+            }
+          }
+          return;
+        }
+        if (sharer.getSharedStorage(keyLayoutIsHover) && !prevIsHover) {
+          viewer.drawFrame();
+        }
+        prevIsHover = sharer.getSharedStorage(keyLayoutIsHover);
+      },
+      pointStart: (e) => {
+        if (isInElementAction()) {
+          return;
+        }
+        if (isInLayout(e.point)) {
+          sharer.setSharedStorage(keyLayoutIsSelected, true);
+        } else {
+          if (prevIsSelected === true) {
+            clear();
+            viewer.drawFrame();
+          }
+          sharer.setSharedStorage(keyLayoutIsSelected, false);
+        }
+        resetController();
+        const layoutControlType = resetControlType(e);
+        prevPoint = e.point;
+        if (layoutControlType) {
+          sharer.setSharedStorage(keyLayoutActionType, "resize");
+        }
+        if (sharer.getSharedStorage(keyLayoutIsSelected) === true && !prevIsSelected) {
+          viewer.drawFrame();
+        }
+        prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
+      },
+      pointMove: (e) => {
+        if (!sharer.getSharedStorage(keyLayoutIsSelected)) {
+          if (isInElementAction()) {
+            return;
+          }
+        }
+        const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+        const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+        const data = sharer.getActiveStorage("data");
+        if (layoutActionType === "resize" && layoutControlType && (data == null ? void 0 : data.layout)) {
+          if (prevPoint) {
+            isBusy = true;
+            const scale = sharer.getActiveStorage("scale");
+            const viewMoveX = e.point.x - prevPoint.x;
+            const viewMoveY = e.point.y - prevPoint.y;
+            const moveX = viewMoveX / scale;
+            const moveY = viewMoveY / scale;
+            const { x: x2, y: y2, w: w2, h: h2, operations = {} } = data.layout;
+            const { position = "absolute" } = operations;
+            if (layoutControlType === "top") {
+              if (position === "relative") {
+                data.layout.h = calculator.toGridNum(h2 - moveY);
+                viewer.scroll({ moveY: viewMoveY });
+              } else {
+                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") {
+              if (position === "relative") {
+                data.layout.w = calculator.toGridNum(w2 - moveX);
+                viewer.scroll({ moveX: viewMoveX });
+              } else {
+                data.layout.x = calculator.toGridNum(x2 + moveX);
+                data.layout.w = calculator.toGridNum(w2 - moveX);
+              }
+            } else if (layoutControlType === "top-left") {
+              if (position === "relative") {
+                data.layout.w = calculator.toGridNum(w2 - moveX);
+                data.layout.h = calculator.toGridNum(h2 - moveY);
+                viewer.scroll({ moveX: viewMoveX, moveY: viewMoveY });
+              } else {
+                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") {
+              if (position === "relative") {
+                viewer.scroll({
+                  moveY: viewMoveY
+                });
+                data.layout.w = calculator.toGridNum(w2 + moveX);
+                data.layout.h = calculator.toGridNum(h2 - moveY);
+              } else {
+                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") {
+              if (position === "relative") {
+                viewer.scroll({
+                  moveX: viewMoveX
+                });
+                data.layout.w = calculator.toGridNum(w2 - moveX);
+                data.layout.h = calculator.toGridNum(h2 + moveY);
+              } else {
+                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 (["resize"].includes(layoutActionType)) {
+          return false;
+        }
+      },
+      pointEnd: () => {
+        isBusy = false;
+        const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+        const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+        const data = sharer.getActiveStorage("data");
+        if (data && layoutActionType === "resize" && layoutControlType) {
+          eventHub.trigger(eventChange, {
+            type: "changeLayout",
+            data
+          });
+        }
+      },
+      beforeDrawFrame: ({ snapshot }) => {
+        var _a;
+        if (isInElementAction()) {
+          return;
+        }
+        const { sharedStore, activeStore } = snapshot;
+        const layoutActionType = sharedStore[keyLayoutActionType];
+        const layoutIsHover = sharedStore[keyLayoutIsHover];
+        const layoutIsSelected = sharedStore[keyLayoutIsSelected];
+        if ((_a = activeStore.data) == null ? void 0 : _a.layout) {
+          const { x: x2, y: y2, w: w2, h: h2 } = activeStore.data.layout;
+          const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+          const size = { x: x2, y: y2, w: w2, h: h2 };
+          const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize });
+          if (layoutIsHover === true) {
+            const viewSize = calcViewElementSize(size, { viewScaleInfo });
+            drawLayoutHover(overlayContext, { layoutSize: viewSize });
+          }
+          if (layoutActionType && ["resize"].includes(layoutActionType) || layoutIsSelected === true) {
+            drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
+          }
+        }
+      },
+      scrollX: () => {
+        clear();
+      },
+      scrollY: () => {
+        clear();
+      },
+      wheelScale: () => {
+        clear();
+      }
+    };
+  };
+  const MiddlewareSelector = (opts) => {
+    const { viewer, sharer, boardContent, calculator, eventHub } = opts;
+    const { overlayContext } = boardContent;
+    let prevPoint = null;
+    let inBusyMode = null;
+    sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyEnableSnapToGrid, true);
+    const getActiveElements = () => {
+      return sharer.getSharedStorage(keySelectedElementList);
+    };
+    const pushGroupQueue = (elem) => {
+      let groupQueue = sharer.getSharedStorage(keyGroupQueue);
+      if (!Array.isArray(groupQueue)) {
+        groupQueue = [];
+      }
+      if (groupQueue.length > 0) {
+        if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) {
+          groupQueue.push(elem);
+        } else {
+          groupQueue = [];
+        }
+      } else if (groupQueue.length === 0) {
+        groupQueue.push(elem);
+      }
+      const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue);
+      sharer.setSharedStorage(keyGroupQueue, groupQueue);
+      sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList);
+      return groupQueue.length > 0;
+    };
+    const updateHoverElement = (elem) => {
+      sharer.setSharedStorage(keyHoverElement, elem);
+      let vertexes = null;
+      if (elem) {
+        vertexes = calcElementVertexesInGroup(elem, {
+          groupQueue: sharer.getSharedStorage(keyGroupQueue)
+        });
+      }
+      sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
+    };
+    const updateSelectedElementList = (list, opts2) => {
+      var _a;
+      sharer.setSharedStorage(keySelectedElementList, list);
+      if (list.length === 1) {
+        const controller = calcElementSizeController(list[0], {
+          groupQueue: sharer.getSharedStorage(keyGroupQueue),
+          controllerSize: controllerSize$1,
+          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) });
+      }
+    };
+    const pointTargetBaseOptions = () => {
+      return {
+        ctx: overlayContext,
+        calculator,
+        data: sharer.getActiveStorage("data"),
+        selectedElements: getActiveElements(),
+        viewScaleInfo: sharer.getActiveViewScaleInfo(),
         viewSizeInfo: sharer.getActiveViewSizeInfo(),
         groupQueue: sharer.getSharedStorage(keyGroupQueue),
         areaSize: null,
@@ -6198,10 +6633,14 @@ var __privateMethod = (obj, member, method) => {
       },
       hover: (e) => {
         var _a, _b, _c, _d, _e;
+        const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
         const resizeType = sharer.getSharedStorage(keyResizeType);
         const actionType = sharer.getSharedStorage(keyActionType);
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
         const triggerCursor = (target2) => {
+          if (layoutIsSelected === true) {
+            return;
+          }
           const cursor = target2.type;
           if (inBusyMode === null) {
             eventHub.trigger("cursor", {
@@ -6736,18 +7175,21 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  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 key$1 = "SCROLL";
+  const keyXThumbRect = Symbol(`${key$1}_xThumbRect`);
+  const keyYThumbRect = Symbol(`${key$1}_yThumbRect`);
+  const keyHoverXThumbRect = Symbol(`${key$1}_hoverXThumbRect`);
+  const keyHoverYThumbRect = Symbol(`${key$1}_hoverYThumbRect`);
+  const keyPrevPoint$1 = Symbol(`${key$1}_prevPoint`);
+  const keyActivePoint = Symbol(`${key$1}_activePoint`);
+  const keyActiveThumbType = Symbol(`${key$1}_activeThumbType`);
   const minScrollerWidth = 12;
   const scrollerLineWidth = 16;
   const scrollerThumbAlpha = 0.3;
   const scrollConfig = {
     width: minScrollerWidth,
-    thumbColor: "#000000AA",
+    thumbColor: "#0000008A",
+    thumbHoverColor: "#000000EE",
     scrollBarColor: "#FFFFFF60",
     showScrollBar: false
   };
@@ -6779,11 +7221,14 @@ var __privateMethod = (obj, member, method) => {
       prevPoint: sharedStore[keyPrevPoint$1] || null,
       activeThumbType: sharedStore[keyActiveThumbType] || null,
       xThumbRect: sharedStore[keyXThumbRect] || null,
-      yThumbRect: sharedStore[keyYThumbRect] || null
+      yThumbRect: sharedStore[keyYThumbRect] || null,
+      hoverXThumb: sharedStore[keyHoverXThumbRect],
+      hoverYThumb: sharedStore[keyHoverYThumbRect]
     };
     return info;
   }
-  function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
+  function calcScrollerInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
     const sliderMinSize = scrollerLineWidth * 2.5;
@@ -6838,7 +7283,8 @@ var __privateMethod = (obj, member, method) => {
       ySize,
       translateY,
       translateX,
-      thumbColor: scrollConfig.thumbColor,
+      xThumbColor: hoverXThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
+      yThumbColor: hoverYThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
       scrollBarColor: scrollConfig.scrollBarColor,
       xThumbRect,
       yThumbRect
@@ -6894,8 +7340,8 @@ var __privateMethod = (obj, member, method) => {
   function drawScrollerInfo(overlayContext, opts) {
     const ctx = overlayContext;
     const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
-    const { activeThumbType, prevPoint, activePoint } = scrollInfo;
-    const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
+    const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb });
     let xThumbRect = { ...wrapper.xThumbRect };
     let yThumbRect = { ...wrapper.yThumbRect };
     if (activeThumbType && prevPoint && activePoint) {
@@ -6911,13 +7357,13 @@ var __privateMethod = (obj, member, method) => {
       axis: "X",
       ...xThumbRect,
       r: wrapper.lineSize / 2,
-      color: wrapper.thumbColor
+      color: wrapper.xThumbColor
     });
     drawScrollerThumb(ctx, {
       axis: "Y",
       ...yThumbRect,
       r: wrapper.lineSize / 2,
-      color: wrapper.thumbColor
+      color: wrapper.yThumbColor
     });
     ctx.globalAlpha = 1;
     return {
@@ -6934,14 +7380,18 @@ var __privateMethod = (obj, member, method) => {
     return { xThumbRect, yThumbRect };
   }
   const MiddlewareScroller = (opts) => {
-    const { viewer, boardContent, sharer } = opts;
+    const { viewer, boardContent, sharer, eventHub } = opts;
     const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
+    let isBusy = false;
     const clear = () => {
       sharer.setSharedStorage(keyPrevPoint$1, null);
       sharer.setSharedStorage(keyActivePoint, null);
       sharer.setSharedStorage(keyActiveThumbType, null);
+      sharer.setSharedStorage(keyHoverXThumbRect, null);
+      sharer.setSharedStorage(keyHoverYThumbRect, null);
+      isBusy = false;
     };
     clear();
     const scrollX = (p) => {
@@ -6983,10 +7433,31 @@ var __privateMethod = (obj, member, method) => {
         });
         viewer.drawFrame();
       },
+      hover: (e) => {
+        if (isBusy === true) {
+          return false;
+        }
+        const { point } = e;
+        const thumbType = getThumbType(point);
+        if (thumbType === "X" || thumbType === "Y") {
+          if (thumbType === "X") {
+            sharer.setSharedStorage(keyHoverXThumbRect, true);
+            sharer.setSharedStorage(keyHoverYThumbRect, false);
+          } else {
+            sharer.setSharedStorage(keyHoverXThumbRect, false);
+            sharer.setSharedStorage(keyHoverYThumbRect, true);
+          }
+          eventHub.trigger("cursor", { type: "default" });
+          return false;
+        }
+        sharer.setSharedStorage(keyHoverXThumbRect, false);
+        sharer.setSharedStorage(keyHoverYThumbRect, false);
+      },
       pointStart: (e) => {
         const { point } = e;
         const thumbType = getThumbType(point);
         if (thumbType === "X" || thumbType === "Y") {
+          isBusy = true;
           sharer.setSharedStorage(keyActiveThumbType, thumbType);
           sharer.setSharedStorage(keyPrevPoint$1, point);
           return false;
@@ -7007,6 +7478,7 @@ var __privateMethod = (obj, member, method) => {
         }
       },
       pointEnd: () => {
+        isBusy = false;
         const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
         clear();
         if (activeThumbType === "X" || activeThumbType === "Y") {
@@ -7357,8 +7829,8 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const key$1 = "DRAG";
-  const keyPrevPoint = Symbol(`${key$1}_prevPoint`);
+  const key = "DRAG";
+  const keyPrevPoint = Symbol(`${key}_prevPoint`);
   const MiddlewareDragger = (opts) => {
     const { eventHub, sharer, viewer } = opts;
     let isDragging = false;
@@ -7616,337 +8088,6 @@ 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.disabledTop) });
-    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledRight) });
-    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledBottom) });
-    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledLeft) });
-    const disabledOpts = {
-      lineWidth: 1,
-      strokeStyle: disableColor
-    };
-    if ((operations == null ? void 0 : operations.disabledTopLeft) === true) {
-      drawControllerCross(ctx, { vertexes: topLeft.vertexes, ...disabledOpts });
-    } else {
-      drawControllerBox(ctx, topLeft.vertexes);
-    }
-    if ((operations == null ? void 0 : operations.disabledTopRight) === true) {
-      drawControllerCross(ctx, { vertexes: topRight.vertexes, ...disabledOpts });
-    } else {
-      drawControllerBox(ctx, topRight.vertexes);
-    }
-    if ((operations == null ? void 0 : operations.disabledBottomRight) === true) {
-      drawControllerCross(ctx, { vertexes: bottomRight.vertexes, ...disabledOpts });
-    } else {
-      drawControllerBox(ctx, bottomRight.vertexes);
-    }
-    if ((operations == null ? void 0 : operations.disabledBottomLeft) === true) {
-      drawControllerCross(ctx, { vertexes: bottomLeft.vertexes, ...disabledOpts });
-    } else {
-      drawControllerBox(ctx, bottomLeft.vertexes);
-    }
-  }
-  const MiddlewareLayoutSelector = (opts) => {
-    const { sharer, boardContent, calculator, viewer, eventHub } = opts;
-    const { overlayContext } = 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.disabledLeft === true) {
-          return true;
-        }
-        if (controlType === "top" && operations.disabledTop === true) {
-          return true;
-        }
-        if (controlType === "right" && operations.disabledRight === true) {
-          return true;
-        }
-        if (controlType === "bottom" && operations.disabledBottom === true) {
-          return true;
-        }
-        if (controlType === "top-left" && operations.disabledTopLeft === true) {
-          return true;
-        }
-        if (controlType === "top-right" && operations.disabledTopRight === true) {
-          return true;
-        }
-        if (controlType === "bottom-left" && operations.disabledBottomLeft === true) {
-          return true;
-        }
-        if (controlType === "bottom-right" && operations.disabledBottomRight === 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(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
-          }
-        }
-      },
-      scrollX: () => {
-        clear();
-      },
-      scrollY: () => {
-        clear();
-      },
-      wheelScale: () => {
-        clear();
-      }
-    };
-  };
   class Core {
     constructor(container, opts) {
       __privateAdd(this, _initContainer);