@idraw/core 0.4.0-beta.31 → 0.4.0-beta.33

package/dist/index.global.js

@@ -1209,6 +1209,11 @@ var __privateMethod = (obj, member, method) => {
     }
     return groupQueue;
   }
+  function getElementSize(elem) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = elem;
+    const size = { x: x2, y: y2, w: w2, h: h2, angle: angle2 };
+    return size;
+  }
   function findElementsFromListByPositions(positions, list) {
     const elements = [];
     positions.forEach((pos) => {
@@ -4603,7 +4608,7 @@ var __privateMethod = (obj, member, method) => {
   const activeAreaColor = "#1976d21c";
   const lockedColor = "#5b5959b5";
   const referenceColor = "#f7276e";
-  const defaultStyle$2 = {
+  const defaultStyle$3 = {
     activeColor,
     activeAreaColor,
     lockedColor,
@@ -4722,7 +4727,7 @@ var __privateMethod = (obj, member, method) => {
     const wrapperOpts = { borderColor: activeColor2, borderWidth: 1, background: "transparent", lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
   }
-  function drawLockVertexesWrapper(ctx, vertexes, opts) {
+  function drawLockedVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
       return;
     }
@@ -5502,10 +5507,10 @@ var __privateMethod = (obj, member, method) => {
     const endY = Math.max(start.y, end.y);
     for (let idx = 0; idx < data.elements.length; idx++) {
       const elem = data.elements[idx];
-      if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.lock) === true) {
+      if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.locked) === true) {
         continue;
       }
-      const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+      const elemSize = calcViewElementSize(elem, { viewScaleInfo });
       const center = calcElementCenter(elemSize);
       if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
         indexes.push(idx);
@@ -5532,14 +5537,14 @@ var __privateMethod = (obj, member, method) => {
       return null;
     }
     const area = { x: 0, y: 0, w: 0, h: 0 };
-    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { viewScaleInfo } = opts;
     let prevElemSize = null;
     for (let i = 0; i < elements.length; i++) {
       const elem = elements[i];
       if ((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.invisible) {
         continue;
       }
-      const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+      const elemSize = calcViewElementSize(elem, { viewScaleInfo });
       if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
         const ves = rotateElementVertexes(elemSize);
         if (ves.length === 4) {
@@ -6095,10 +6100,12 @@ var __privateMethod = (obj, member, method) => {
   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) {
+  const defaultStyle$2 = {
+    activeColor: "#b331c9"
+  };
+  function drawControllerBox(ctx, boxVertexes, style) {
+    const { activeColor: activeColor2 } = style;
     ctx.setLineDash([]);
     ctx.fillStyle = "#FFFFFF";
     ctx.beginPath();
@@ -6108,7 +6115,7 @@ var __privateMethod = (obj, member, method) => {
     ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
     ctx.closePath();
     ctx.fill();
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor2;
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
@@ -6118,26 +6125,11 @@ var __privateMethod = (obj, member, method) => {
     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;
+    const { start, end, style } = opts;
+    const { activeColor: activeColor2 } = style;
+    const lineWidth = 2;
+    const strokeStyle = activeColor2;
     ctx.setLineDash([]);
     ctx.strokeStyle = strokeStyle;
     ctx.lineWidth = lineWidth;
@@ -6146,51 +6138,25 @@ var __privateMethod = (obj, member, method) => {
     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 { controller, style } = 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);
-    }
+    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, style });
+    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, style });
+    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, style });
+    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, style });
+    drawControllerBox(ctx, topLeft.vertexes, style);
+    drawControllerBox(ctx, topRight.vertexes, style);
+    drawControllerBox(ctx, bottomRight.vertexes, style);
+    drawControllerBox(ctx, bottomLeft.vertexes, style);
   }
   function drawLayoutHover(ctx, opts) {
-    const { layoutSize } = opts;
+    const { layoutSize, style } = opts;
+    const { activeColor: activeColor2 } = style;
     const { x: x2, y: y2, w: w2, h: h2 } = layoutSize;
     ctx.setLineDash([]);
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor2;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(x2, y2);
@@ -6201,9 +6167,15 @@ var __privateMethod = (obj, member, method) => {
     ctx.closePath();
     ctx.stroke();
   }
-  const MiddlewareLayoutSelector = (opts) => {
+  const MiddlewareLayoutSelector = (opts, config) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
+    const innerConfig = {
+      ...defaultStyle$2,
+      ...config
+    };
+    const { activeColor: activeColor2 } = innerConfig;
+    const style = { activeColor: activeColor2 };
     let prevPoint = null;
     let prevIsHover = null;
     let prevIsSelected = null;
@@ -6495,10 +6467,10 @@ var __privateMethod = (obj, member, method) => {
           const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize });
           if (layoutIsHover === true) {
             const viewSize = calcViewElementSize(size, { viewScaleInfo });
-            drawLayoutHover(overlayContext, { layoutSize: viewSize });
+            drawLayoutHover(overlayContext, { layoutSize: viewSize, style });
           }
           if (layoutActionType && ["resize"].includes(layoutActionType) || layoutIsSelected === true) {
-            drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
+            drawLayoutController(overlayContext, { controller, style });
           }
         }
       },
@@ -6515,7 +6487,7 @@ var __privateMethod = (obj, member, method) => {
   };
   const MiddlewareSelector = (opts, config) => {
     const innerConfig = {
-      ...defaultStyle$2,
+      ...defaultStyle$3,
       ...config
     };
     const { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 } = innerConfig;
@@ -6523,6 +6495,8 @@ var __privateMethod = (obj, member, method) => {
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
+    let moveOriginalStartPoint = null;
+    let moveOriginalStartElementSize = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
     sharer.setSharedStorage(keyEnableSnapToGrid, true);
@@ -6605,7 +6579,6 @@ var __privateMethod = (obj, member, method) => {
       sharer.setSharedStorage(keySelectedElementController, null);
       sharer.setSharedStorage(keySelectedElementPosition, []);
       sharer.setSharedStorage(keyIsMoving, null);
-      sharer.setSharedStorage(keyEnableSelectInGroup, null);
     };
     clear();
     const selectCallback = ({ uuids, positions }) => {
@@ -6749,8 +6722,9 @@ var __privateMethod = (obj, member, method) => {
         }
       },
       pointStart: (e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
         prevPoint = e.point;
+        moveOriginalStartPoint = e.point;
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           if (isPointInViewActiveGroup(e.point, {
@@ -6760,15 +6734,18 @@ var __privateMethod = (obj, member, method) => {
             groupQueue
           })) {
             const target2 = getPointTarget(e.point, pointTargetBaseOptions());
-            if (((_a = target2 == null ? void 0 : target2.elements) == null ? void 0 : _a.length) === 1 && ((_c = (_b = target2.elements[0]) == null ? void 0 : _b.operations) == null ? void 0 : _c.lock) === true) {
+            if (((_a = target2 == null ? void 0 : target2.elements) == null ? void 0 : _a.length) === 1 && ((_c = (_b = target2.elements[0]) == null ? void 0 : _b.operations) == null ? void 0 : _c.locked) === true) {
               return;
             } else {
               updateHoverElement(null);
             }
-            if (target2.type === "over-element" && ((_d = target2 == null ? void 0 : target2.elements) == null ? void 0 : _d.length) === 1) {
+            if (((_d = target2 == null ? void 0 : target2.elements) == null ? void 0 : _d.length) === 1) {
+              moveOriginalStartElementSize = getElementSize(target2 == null ? void 0 : target2.elements[0]);
+            }
+            if (target2.type === "over-element" && ((_e = target2 == null ? void 0 : target2.elements) == null ? void 0 : _e.length) === 1) {
               updateSelectedElementList([target2.elements[0]], { triggerEvent: true });
               sharer.setSharedStorage(keyActionType, "drag");
-            } else if ((_e = target2.type) == null ? void 0 : _e.startsWith("resize-")) {
+            } else if ((_f = target2.type) == null ? void 0 : _f.startsWith("resize-")) {
               sharer.setSharedStorage(keyResizeType, target2.type);
               sharer.setSharedStorage(keyActionType, "resize");
             } else {
@@ -6790,19 +6767,28 @@ var __privateMethod = (obj, member, method) => {
           areaSize: listAreaSize,
           groupQueue: []
         });
-        if (((_f = target == null ? void 0 : target.elements) == null ? void 0 : _f.length) === 1 && ((_h = (_g = target.elements[0]) == null ? void 0 : _g.operations) == null ? void 0 : _h.lock) === true) {
-          return;
-        } else {
+        const isLockedElement = ((_g = target == null ? void 0 : target.elements) == null ? void 0 : _g.length) === 1 && ((_i = (_h = target.elements[0]) == null ? void 0 : _h.operations) == null ? void 0 : _i.locked) === true;
+        if (!isLockedElement) {
           updateHoverElement(null);
         }
-        if (target.type === "list-area") {
-          sharer.setSharedStorage(keyActionType, "drag-list");
-        } else if (target.type === "over-element" && ((_i = target == null ? void 0 : target.elements) == null ? void 0 : _i.length) === 1) {
-          updateSelectedElementList([target.elements[0]], { triggerEvent: true });
-          sharer.setSharedStorage(keyActionType, "drag");
-        } else if ((_j = target.type) == null ? void 0 : _j.startsWith("resize-")) {
-          sharer.setSharedStorage(keyResizeType, target.type);
-          sharer.setSharedStorage(keyActionType, "resize");
+        if (((_j = target == null ? void 0 : target.elements) == null ? void 0 : _j.length) === 1) {
+          moveOriginalStartElementSize = getElementSize(target == null ? void 0 : target.elements[0]);
+        }
+        if (!isLockedElement) {
+          if (target.type === "list-area") {
+            sharer.setSharedStorage(keyActionType, "drag-list");
+          } else if (target.type === "over-element" && ((_k = target == null ? void 0 : target.elements) == null ? void 0 : _k.length) === 1) {
+            updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+            sharer.setSharedStorage(keyActionType, "drag");
+          } else if ((_l = target.type) == null ? void 0 : _l.startsWith("resize-")) {
+            sharer.setSharedStorage(keyResizeType, target.type);
+            sharer.setSharedStorage(keyActionType, "resize");
+          } else {
+            clear();
+            sharer.setSharedStorage(keyActionType, "area");
+            sharer.setSharedStorage(keyAreaStart, e.point);
+            updateSelectedElementList([], { triggerEvent: true });
+          }
         } else {
           clear();
           sharer.setSharedStorage(keyActionType, "area");
@@ -6820,6 +6806,7 @@ var __privateMethod = (obj, member, method) => {
         const viewScaleInfo = sharer.getActiveViewScaleInfo();
         const viewSizeInfo = sharer.getActiveViewSizeInfo();
         const start = prevPoint;
+        const originalStart = moveOriginalStartPoint;
         const end = e.point;
         const resizeType = sharer.getSharedStorage(keyResizeType);
         const actionType = sharer.getSharedStorage(keyActionType);
@@ -6827,8 +6814,8 @@ var __privateMethod = (obj, member, method) => {
         const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
         if (actionType === "drag") {
           inBusyMode = "drag";
-          if (data && (elems == null ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.lock) !== true) {
-            const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
+          if (data && (elems == null ? void 0 : elems.length) === 1 && moveOriginalStartElementSize && originalStart && end && ((_b = (_a = elems[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.locked) !== true) {
+            const { moveX, moveY } = calcMoveInGroup(originalStart, end, groupQueue);
             let totalMoveX = calculator.toGridNum(moveX / scale);
             let totalMoveY = calculator.toGridNum(moveY / scale);
             if (enableSnapToGrid === true) {
@@ -6852,8 +6839,8 @@ var __privateMethod = (obj, member, method) => {
                 console.error(err);
               }
             }
-            elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
-            elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
+            elems[0].x = calculator.toGridNum(moveOriginalStartElementSize.x + totalMoveX);
+            elems[0].y = calculator.toGridNum(moveOriginalStartElementSize.y + totalMoveY);
             updateSelectedElementList([elems[0]]);
             calculator.modifyViewVisibleInfoMap(data, {
               modifyOptions: {
@@ -6870,12 +6857,12 @@ var __privateMethod = (obj, member, method) => {
           viewer.drawFrame();
         } else if (actionType === "drag-list") {
           inBusyMode = "drag-list";
-          if (data && start && end && (elems == null ? void 0 : elems.length) > 1) {
+          if (data && originalStart && start && end && (elems == null ? void 0 : elems.length) > 1) {
             const moveX = (end.x - start.x) / scale;
             const moveY = (end.y - start.y) / scale;
             elems.forEach((elem) => {
               var _a2;
-              if (elem && ((_a2 = elem == null ? void 0 : elem.operations) == null ? void 0 : _a2.lock) !== true) {
+              if (elem && ((_a2 = elem == null ? void 0 : elem.operations) == null ? void 0 : _a2.locked) !== true) {
                 elem.x = calculator.toGridNum(elem.x + moveX);
                 elem.y = calculator.toGridNum(elem.y + moveY);
                 calculator.modifyViewVisibleInfoMap(data, {
@@ -6895,7 +6882,7 @@ var __privateMethod = (obj, member, method) => {
           }
           viewer.drawFrame();
         } else if (actionType === "resize") {
-          if (data && (elems == null ? void 0 : elems.length) === 1 && start && (resizeType == null ? void 0 : resizeType.startsWith("resize-"))) {
+          if (data && (elems == null ? void 0 : elems.length) === 1 && originalStart && moveOriginalStartElementSize && (resizeType == null ? void 0 : resizeType.startsWith("resize-"))) {
             inBusyMode = "resize";
             const pointGroupQueue = [];
             groupQueue.forEach((group) => {
@@ -6908,10 +6895,10 @@ var __privateMethod = (obj, member, method) => {
                 angle: 0 - angle2
               });
             });
-            let resizeStart = start;
+            let resizeStart = originalStart;
             let resizeEnd = end;
             if (groupQueue.length > 0) {
-              resizeStart = rotatePointInGroup(start, pointGroupQueue);
+              resizeStart = rotatePointInGroup(originalStart, pointGroupQueue);
               resizeEnd = rotatePointInGroup(end, pointGroupQueue);
             }
             if (resizeType === "resize-rotate") {
@@ -6923,19 +6910,19 @@ var __privateMethod = (obj, member, method) => {
                 controller.bottomRight.center
               ];
               const viewCenter = calcElementCenterFromVertexes(viewVertexes);
-              const resizedElemSize = rotateElement(elems[0], {
+              const resizedElemSize = rotateElement(moveOriginalStartElementSize, {
                 center: viewCenter,
                 viewScaleInfo,
                 viewSizeInfo,
-                start,
+                start: originalStart,
                 end,
                 resizeType,
                 sharer
               });
               elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
             } else {
-              const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-              const calcOpts = { ignore: !!elems[0].angle };
+              const resizedElemSize = resizeElement(moveOriginalStartElementSize, { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
+              const calcOpts = { ignore: !!moveOriginalStartElementSize.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) {
@@ -6980,6 +6967,8 @@ var __privateMethod = (obj, member, method) => {
         const viewSizeInfo = sharer.getActiveViewSizeInfo();
         let needDrawFrame = false;
         prevPoint = null;
+        moveOriginalStartPoint = null;
+        moveOriginalStartElementSize = null;
         if (actionType === "resize" && resizeType) {
           sharer.setSharedStorage(keyResizeType, null);
           needDrawFrame = true;
@@ -7042,6 +7031,8 @@ var __privateMethod = (obj, member, method) => {
       },
       pointLeave() {
         prevPoint = null;
+        moveOriginalStartPoint = null;
+        moveOriginalStartElementSize = null;
         clear();
         viewer.drawFrame();
       },
@@ -7053,7 +7044,7 @@ var __privateMethod = (obj, member, method) => {
         const target = getPointTarget(e.point, pointTargetBaseOptions());
         sharer.setSharedStorage(keySelectedElementController, null);
         sharer.setSharedStorage(keySelectedElementList, []);
-        if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.lock) === true) {
+        if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.locked) === true) {
           return;
         }
         if (target.elements.length === 1 && ((_c = target.elements[0]) == null ? void 0 : _c.type) === "group") {
@@ -7097,12 +7088,12 @@ var __privateMethod = (obj, member, method) => {
           controllerSize: 10,
           viewScaleInfo
         }) : null;
-        const isLock = !!((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.lock);
+        const isLocked = !!((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.locked);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
           if (hoverElement && actionType !== "drag") {
-            if (isLock) {
-              drawLockVertexesWrapper(overlayContext, hoverElementVertexes, {
+            if (isLocked) {
+              drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
                 controller: calcElementSizeController(hoverElement, {
                   groupQueue,
@@ -7115,7 +7106,7 @@ var __privateMethod = (obj, member, method) => {
               drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
             }
           }
-          if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
+          if (!isLocked && elem && ["select", "drag", "resize"].includes(actionType)) {
             drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
@@ -7147,8 +7138,8 @@ var __privateMethod = (obj, member, method) => {
           }
         } else {
           if (hoverElement && actionType !== "drag") {
-            if (isLock) {
-              drawLockVertexesWrapper(overlayContext, hoverElementVertexes, {
+            if (isLocked) {
+              drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
                 controller: calcElementSizeController(hoverElement, {
                   groupQueue,
@@ -7161,7 +7152,7 @@ var __privateMethod = (obj, member, method) => {
               drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
             }
           }
-          if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
+          if (!isLocked && elem && ["select", "drag", "resize"].includes(actionType)) {
             drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
@@ -8083,11 +8074,13 @@ var __privateMethod = (obj, member, method) => {
     return {
       name: "@middleware/info",
       beforeDrawFrame({ snapshot }) {
+        var _a;
         const { sharedStore } = snapshot;
         const selectedElementList = sharedStore[keySelectedElementList];
+        const hoverElement = sharedStore[keyHoverElement];
         const actionType = sharedStore[keyActionType];
         const groupQueue = sharedStore[keyGroupQueue] || [];
-        if (selectedElementList.length === 1) {
+        if (selectedElementList.length === 1 && !((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.locked)) {
           const elem = selectedElementList[0];
           if (elem && ["select", "drag", "resize"].includes(actionType)) {
             const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);