@idraw/core 0.4.0-beta.32 → 0.4.0-beta.34

package/dist/esm/middleware/selector/index.js

@@ -1,14 +1,12 @@
-import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement } from '@idraw/util';
-import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement, getElementSize } from '@idraw/util';
+import { drawHoverVertexesWrapper, drawLockedVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
 import { calcReferenceInfo } from './reference';
-import { middlewareEventTextEdit } from '../text-editor';
-import { eventChange } from '../../config';
+import { coreEventKeys } from '../../config';
 import { keyLayoutIsSelected } from '../layout-selector';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
-export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
 export const MiddlewareSelector = (opts, config) => {
     const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
@@ -16,6 +14,8 @@ export const MiddlewareSelector = (opts, config) => {
     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);
@@ -70,7 +70,7 @@ export const MiddlewareSelector = (opts, config) => {
             sharer.setSharedStorage(keySelectedElementPosition, []);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
-            eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
+            eventHub.trigger(coreEventKeys.SELECT, { uuids: list.map((elem) => elem.uuid), positions: [] });
         }
     };
     const pointTargetBaseOptions = () => {
@@ -103,7 +103,7 @@ export const MiddlewareSelector = (opts, config) => {
         sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
-    const selectCallback = ({ uuids, positions }) => {
+    const selectCallback = ({ uuids = [], positions }) => {
         let elements = [];
         const actionType = sharer.getSharedStorage(keyActionType);
         const data = sharer.getActiveStorage('data');
@@ -142,16 +142,16 @@ export const MiddlewareSelector = (opts, config) => {
     return {
         name: '@middleware/selector',
         use() {
-            eventHub.on(middlewareEventSelect, selectCallback);
-            eventHub.on(middlewareEventSelectClear, selectClearCallback);
-            eventHub.on(middlewareEventSelectInGroup, selectInGroupCallback);
-            eventHub.on(middlewareEventSnapToGrid, setSnapToSnapCallback);
+            eventHub.on(coreEventKeys.SELECT, selectCallback);
+            eventHub.on(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+            eventHub.on(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+            eventHub.on(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
         },
         disuse() {
-            eventHub.off(middlewareEventSelect, selectCallback);
-            eventHub.off(middlewareEventSelectClear, selectClearCallback);
-            eventHub.off(middlewareEventSelectInGroup, selectInGroupCallback);
-            eventHub.off(middlewareEventSnapToGrid, setSnapToSnapCallback);
+            eventHub.off(coreEventKeys.SELECT, selectCallback);
+            eventHub.off(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+            eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+            eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
         },
         hover: (e) => {
             var _a, _b, _c, _d, _e;
@@ -165,7 +165,7 @@ export const MiddlewareSelector = (opts, config) => {
                 }
                 const cursor = target.type;
                 if (inBusyMode === null) {
-                    eventHub.trigger('cursor', {
+                    eventHub.trigger(coreEventKeys.CURSOR, {
                         type: cursor,
                         groupQueue: target.groupQueue,
                         element: target.elements[0]
@@ -249,8 +249,9 @@ export const MiddlewareSelector = (opts, config) => {
             }
         },
         pointStart: (e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             prevPoint = e.point;
+            moveOriginalStartPoint = e.point;
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 if (isPointInViewActiveGroup(e.point, {
@@ -260,17 +261,19 @@ export const MiddlewareSelector = (opts, config) => {
                     groupQueue
                 })) {
                     const target = getPointTarget(e.point, pointTargetBaseOptions());
-                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.lock) === true) {
-                        return;
+                    const isLockedElement = ((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) === true;
+                    updateHoverElement(null);
+                    if (((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
+                        moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
                     }
-                    else {
-                        updateHoverElement(null);
+                    if (isLockedElement === true) {
+                        clear();
                     }
-                    if (target.type === 'over-element' && ((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
+                    else if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
                         updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                         sharer.setSharedStorage(keyActionType, 'drag');
                     }
-                    else if ((_e = target.type) === null || _e === void 0 ? void 0 : _e.startsWith('resize-')) {
+                    else if ((_f = target.type) === null || _f === void 0 ? void 0 : _f.startsWith('resize-')) {
                         sharer.setSharedStorage(keyResizeType, target.type);
                         sharer.setSharedStorage(keyActionType, 'resize');
                     }
@@ -290,20 +293,25 @@ export const MiddlewareSelector = (opts, config) => {
                 calculator
             });
             const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
-            if (((_f = target === null || target === void 0 ? void 0 : target.elements) === null || _f === void 0 ? void 0 : _f.length) === 1 && ((_h = (_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.lock) === true) {
-                return;
+            const isLockedElement = ((_g = target === null || target === void 0 ? void 0 : target.elements) === null || _g === void 0 ? void 0 : _g.length) === 1 && ((_j = (_h = target.elements[0]) === null || _h === void 0 ? void 0 : _h.operations) === null || _j === void 0 ? void 0 : _j.locked) === true;
+            updateHoverElement(null);
+            if (((_k = target === null || target === void 0 ? void 0 : target.elements) === null || _k === void 0 ? void 0 : _k.length) === 1) {
+                moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
             }
-            else {
-                updateHoverElement(null);
+            if (isLockedElement === true) {
+                clear();
+                sharer.setSharedStorage(keyActionType, 'area');
+                sharer.setSharedStorage(keyAreaStart, e.point);
+                updateSelectedElementList([], { triggerEvent: true });
             }
-            if (target.type === 'list-area') {
+            else if (target.type === 'list-area') {
                 sharer.setSharedStorage(keyActionType, 'drag-list');
             }
-            else if (target.type === 'over-element' && ((_j = target === null || target === void 0 ? void 0 : target.elements) === null || _j === void 0 ? void 0 : _j.length) === 1) {
+            else if (target.type === 'over-element' && ((_l = target === null || target === void 0 ? void 0 : target.elements) === null || _l === void 0 ? void 0 : _l.length) === 1) {
                 updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                 sharer.setSharedStorage(keyActionType, 'drag');
             }
-            else if ((_k = target.type) === null || _k === void 0 ? void 0 : _k.startsWith('resize-')) {
+            else if ((_m = target.type) === null || _m === void 0 ? void 0 : _m.startsWith('resize-')) {
                 sharer.setSharedStorage(keyResizeType, target.type);
                 sharer.setSharedStorage(keyActionType, 'resize');
             }
@@ -324,6 +332,7 @@ export const MiddlewareSelector = (opts, config) => {
             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);
@@ -331,8 +340,8 @@ export const MiddlewareSelector = (opts, config) => {
             const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
             if (actionType === 'drag') {
                 inBusyMode = 'drag';
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) !== true) {
-                    const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
+                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && moveOriginalStartElementSize && originalStart && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? 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) {
@@ -357,8 +366,8 @@ export const MiddlewareSelector = (opts, config) => {
                             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: {
@@ -376,12 +385,12 @@ export const MiddlewareSelector = (opts, config) => {
             }
             else if (actionType === 'drag-list') {
                 inBusyMode = 'drag-list';
-                if (data && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
+                if (data && originalStart && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
                     const moveX = (end.x - start.x) / scale;
                     const moveY = (end.y - start.y) / scale;
                     elems.forEach((elem) => {
                         var _a;
-                        if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) !== true) {
+                        if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.locked) !== true) {
                             elem.x = calculator.toGridNum(elem.x + moveX);
                             elem.y = calculator.toGridNum(elem.y + moveY);
                             calculator.modifyViewVisibleInfoMap(data, {
@@ -402,7 +411,7 @@ export const MiddlewareSelector = (opts, config) => {
                 viewer.drawFrame();
             }
             else if (actionType === 'resize') {
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
+                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && originalStart && moveOriginalStartElementSize && (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
                     inBusyMode = 'resize';
                     const pointGroupQueue = [];
                     groupQueue.forEach((group) => {
@@ -415,10 +424,10 @@ export const MiddlewareSelector = (opts, config) => {
                             angle: 0 - angle
                         });
                     });
-                    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') {
@@ -430,11 +439,11 @@ export const MiddlewareSelector = (opts, config) => {
                             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
@@ -442,8 +451,8 @@ export const MiddlewareSelector = (opts, config) => {
                         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 || _c === void 0 ? void 0 : _c.deepResize) === true) {
@@ -490,6 +499,8 @@ export const MiddlewareSelector = (opts, config) => {
             const viewSizeInfo = sharer.getActiveViewSizeInfo();
             let needDrawFrame = false;
             prevPoint = null;
+            moveOriginalStartPoint = null;
+            moveOriginalStartElementSize = null;
             if (actionType === 'resize' && resizeType) {
                 sharer.setSharedStorage(keyResizeType, null);
                 needDrawFrame = true;
@@ -551,7 +562,7 @@ export const MiddlewareSelector = (opts, config) => {
                     if (type === 'resize') {
                         type = 'resizeElement';
                     }
-                    eventHub.trigger(eventChange, { data, type, selectedElements, hoverElement });
+                    eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
                 }
                 viewer.drawFrame();
             };
@@ -559,6 +570,8 @@ export const MiddlewareSelector = (opts, config) => {
         },
         pointLeave() {
             prevPoint = null;
+            moveOriginalStartPoint = null;
+            moveOriginalStartElementSize = null;
             clear();
             viewer.drawFrame();
         },
@@ -570,7 +583,7 @@ export const MiddlewareSelector = (opts, config) => {
             const target = getPointTarget(e.point, pointTargetBaseOptions());
             sharer.setSharedStorage(keySelectedElementController, null);
             sharer.setSharedStorage(keySelectedElementList, []);
-            if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) === true) {
+            if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) === true) {
                 return;
             }
             if (target.elements.length === 1 && ((_c = target.elements[0]) === null || _c === void 0 ? void 0 : _c.type) === 'group') {
@@ -582,7 +595,7 @@ export const MiddlewareSelector = (opts, config) => {
                 }
             }
             else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text' && !((_f = (_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.operations) === null || _f === void 0 ? void 0 : _f.invisible)) {
-                eventHub.trigger(middlewareEventTextEdit, {
+                eventHub.trigger(coreEventKeys.TEXT_EDIT, {
                     element: target.elements[0],
                     groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
                     position: getElementPositionFromList((_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage('data')) === null || _h === void 0 ? void 0 : _h.elements) || []),
@@ -591,6 +604,44 @@ export const MiddlewareSelector = (opts, config) => {
             }
             sharer.setSharedStorage(keyActionType, null);
         },
+        contextMenu: (e) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+                if (isPointInViewActiveGroup(e.point, {
+                    ctx: overlayContext,
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                    groupQueue
+                })) {
+                    const target = getPointTarget(e.point, pointTargetBaseOptions());
+                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) !== true) {
+                        clear();
+                        updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                        viewer.drawFrame();
+                    }
+                    else if (!((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length)) {
+                        clear();
+                    }
+                }
+                return;
+            }
+            const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                calculator
+            });
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
+            if (((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_g = (_f = target.elements[0]) === null || _f === void 0 ? void 0 : _f.operations) === null || _g === void 0 ? void 0 : _g.locked) !== true) {
+                clear();
+                updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                viewer.drawFrame();
+                return;
+            }
+            else if (!((_h = target === null || target === void 0 ? void 0 : target.elements) === null || _h === void 0 ? void 0 : _h.length)) {
+                clear();
+            }
+        },
         beforeDrawFrame({ snapshot }) {
             var _a;
             const { activeStore, sharedStore } = snapshot;
@@ -617,12 +668,12 @@ export const MiddlewareSelector = (opts, config) => {
                     viewScaleInfo
                 })
                 : null;
-            const isLock = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.lock);
+            const isHoverLocked = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.locked);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
                 if (hoverElement && actionType !== 'drag') {
-                    if (isLock) {
-                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                    if (isHoverLocked) {
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
@@ -632,7 +683,7 @@ export const MiddlewareSelector = (opts, config) => {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
-                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
@@ -659,8 +710,8 @@ export const MiddlewareSelector = (opts, config) => {
             }
             else {
                 if (hoverElement && actionType !== 'drag') {
-                    if (isLock) {
-                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                    if (isHoverLocked) {
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
@@ -670,7 +721,7 @@ export const MiddlewareSelector = (opts, config) => {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
-                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {

package/dist/esm/middleware/selector/util.d.ts

@@ -23,14 +23,14 @@ export declare function getPointTarget(p: PointSize, opts: {
     groupQueue: Element<'group'>[] | null;
     selectedElementController: ElementSizeController | null;
 }): PointTarget;
-export declare function resizeElement(elem: Element<ElementType>, opts: {
+export declare function resizeElement(elem: ElementSize, opts: {
     start: PointSize;
     end: PointSize;
     resizeType: ResizeType;
     scale: number;
     sharer: StoreSharer;
 }): ElementSize;
-export declare function rotateElement(elem: Element<ElementType>, opts: {
+export declare function rotateElement(elem: ElementSize, opts: {
     center: PointSize;
     start: PointSize;
     end: PointSize;

package/dist/esm/middleware/selector/util.js

@@ -703,10 +703,10 @@ export function getSelectedListArea(data, opts) {
     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 || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) === true) {
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? 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);
@@ -733,14 +733,14 @@ export function calcSelectedElementsArea(elements, opts) {
         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 || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? 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) {

package/dist/esm/middleware/text-editor/index.d.ts

@@ -1,6 +1,5 @@
 import type { BoardMiddleware, CoreEventMap, Element, ViewScaleInfo, ElementPosition } from '@idraw/types';
-export declare const middlewareEventTextEdit = "@middleware/text-edit";
-export declare const middlewareEventTextChange = "@middleware/text-change";
+import { coreEventKeys } from '../../config';
 type TextEditEvent = {
     element: Element<'text'>;
     position: ElementPosition;
@@ -16,6 +15,6 @@ type TextChangeEvent = {
     };
     position: ElementPosition;
 };
-type ExtendEventMap = Record<typeof middlewareEventTextEdit, TextEditEvent> & Record<typeof middlewareEventTextChange, TextChangeEvent>;
+type ExtendEventMap = Record<typeof coreEventKeys.TEXT_EDIT, TextEditEvent> & Record<typeof coreEventKeys.TEXT_CHANGE, TextChangeEvent>;
 export declare const MiddlewareTextEditor: BoardMiddleware<ExtendEventMap, CoreEventMap & ExtendEventMap>;
 export {};

package/dist/esm/middleware/text-editor/index.js

@@ -1,6 +1,5 @@
 import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy } from '@idraw/util';
-export const middlewareEventTextEdit = '@middleware/text-edit';
-export const middlewareEventTextChange = '@middleware/text-change';
+import { coreEventKeys } from '../../config';
 const defaultElementDetail = getDefaultElementDetailConfig();
 export const MiddlewareTextEditor = (opts) => {
     const { eventHub, boardContent, viewer, sharer } = opts;
@@ -12,6 +11,8 @@ export const MiddlewareTextEditor = (opts) => {
     const mask = document.createElement('div');
     let activeElem = null;
     let activePosition = [];
+    const id = `idraw-middleware-text-editor-${Math.random().toString(26).substring(2)}`;
+    mask.setAttribute('id', id);
     canvasWrapper.appendChild(textarea);
     canvasWrapper.style.position = 'absolute';
     mask.appendChild(canvasWrapper);
@@ -163,7 +164,7 @@ export const MiddlewareTextEditor = (opts) => {
     textarea.addEventListener('input', () => {
         if (activeElem && activePosition) {
             activeElem.detail.text = textarea.innerText || '';
-            eventHub.trigger(middlewareEventTextChange, {
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
                 element: {
                     uuid: activeElem.uuid,
                     detail: {
@@ -177,7 +178,7 @@ export const MiddlewareTextEditor = (opts) => {
     });
     textarea.addEventListener('blur', () => {
         if (activeElem && activePosition) {
-            eventHub.trigger(middlewareEventTextChange, {
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
                 element: {
                     uuid: activeElem.uuid,
                     detail: {
@@ -213,10 +214,10 @@ export const MiddlewareTextEditor = (opts) => {
     return {
         name: '@middleware/text-editor',
         use() {
-            eventHub.on(middlewareEventTextEdit, textEditCallback);
+            eventHub.on(coreEventKeys.TEXT_EDIT, textEditCallback);
         },
         disuse() {
-            eventHub.off(middlewareEventTextEdit, textEditCallback);
+            eventHub.off(coreEventKeys.TEXT_EDIT, textEditCallback);
         }
     };
 };