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

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

@@ -1,15 +1,24 @@
-import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions } from '@idraw/util';
-import { drawHoverVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
-import { getPointTarget, resizeElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController } from './config';
+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 { 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 { calcReferenceInfo } from './reference';
 import { middlewareEventTextEdit } from '../text-editor';
-export const middlewareEventSelect = '@middleware/select';
-export const MiddlewareSelector = (opts) => {
+import { eventChange } 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;
+    const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     let prevPoint = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyEnableSnapToGrid, true);
     const getActiveElements = () => {
         return sharer.getSharedStorage(keySelectedElementList);
     };
@@ -45,17 +54,20 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
     };
     const updateSelectedElementList = (list, opts) => {
+        var _a;
         sharer.setSharedStorage(keySelectedElementList, list);
         if (list.length === 1) {
             const controller = calcElementSizeController(list[0], {
                 groupQueue: sharer.getSharedStorage(keyGroupQueue),
-                controllerSize: 10,
+                controllerSize,
                 viewScaleInfo: sharer.getActiveViewScaleInfo()
             });
             sharer.setSharedStorage(keySelectedElementController, controller);
+            sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage('data')) === null || _a === void 0 ? void 0 : _a.elements) || []));
         }
         else {
             sharer.setSharedStorage(keySelectedElementController, null);
+            sharer.setSharedStorage(keySelectedElementPosition, []);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
             eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
@@ -63,7 +75,7 @@ export const MiddlewareSelector = (opts) => {
     };
     const pointTargetBaseOptions = () => {
         return {
-            ctx: helperContext,
+            ctx: overlayContext,
             calculator,
             data: sharer.getActiveStorage('data'),
             selectedElements: getActiveElements(),
@@ -71,7 +83,8 @@ export const MiddlewareSelector = (opts) => {
             viewSizeInfo: sharer.getActiveViewSizeInfo(),
             groupQueue: sharer.getSharedStorage(keyGroupQueue),
             areaSize: null,
-            selectedElementController: sharer.getSharedStorage(keySelectedElementController)
+            selectedElementController: sharer.getSharedStorage(keySelectedElementController),
+            selectedElementPosition: sharer.getSharedStorage(keySelectedElementPosition)
         };
     };
     const clear = () => {
@@ -86,6 +99,9 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keySelectedElementList, []);
         sharer.setSharedStorage(keySelectedElementListVertexes, null);
         sharer.setSharedStorage(keySelectedElementController, null);
+        sharer.setSharedStorage(keySelectedElementPosition, []);
+        sharer.setSharedStorage(keyIsMoving, null);
+        sharer.setSharedStorage(keyEnableSelectInGroup, null);
     };
     clear();
     const selectCallback = ({ uuids, positions }) => {
@@ -114,19 +130,40 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         }
     };
+    const selectClearCallback = () => {
+        clear();
+        viewer.drawFrame();
+    };
+    const setSnapToSnapCallback = (e) => {
+        sharer.setSharedStorage(keyEnableSnapToGrid, !!e.enable);
+    };
+    const selectInGroupCallback = (e) => {
+        sharer.setSharedStorage(keyEnableSelectInGroup, !!e.enable);
+    };
     return {
+        name: '@middleware/selector',
         use() {
             eventHub.on(middlewareEventSelect, selectCallback);
+            eventHub.on(middlewareEventSelectClear, selectClearCallback);
+            eventHub.on(middlewareEventSelectInGroup, selectInGroupCallback);
+            eventHub.on(middlewareEventSnapToGrid, setSnapToSnapCallback);
         },
         disuse() {
             eventHub.off(middlewareEventSelect, selectCallback);
+            eventHub.off(middlewareEventSelectClear, selectClearCallback);
+            eventHub.off(middlewareEventSelectInGroup, selectInGroupCallback);
+            eventHub.off(middlewareEventSnapToGrid, setSnapToSnapCallback);
         },
         hover: (e) => {
-            var _a, _b;
+            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 = (target) => {
+                if (layoutIsSelected === true) {
+                    return;
+                }
                 const cursor = target.type;
                 if (inBusyMode === null) {
                     eventHub.trigger('cursor', {
@@ -138,7 +175,7 @@ export const MiddlewareSelector = (opts) => {
             };
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 const isInActiveGroup = isPointInViewActiveGroup(e.point, {
-                    ctx: helperContext,
+                    ctx: overlayContext,
                     viewScaleInfo: sharer.getActiveViewScaleInfo(),
                     viewSizeInfo: sharer.getActiveViewSizeInfo(),
                     groupQueue: sharer.getSharedStorage(keyGroupQueue)
@@ -181,8 +218,27 @@ export const MiddlewareSelector = (opts) => {
                     calculator
                 }) }));
             triggerCursor(target);
-            if (target.type === 'over-element' && ((_b = target === null || target === void 0 ? void 0 : target.elements) === null || _b === void 0 ? void 0 : _b.length) === 1) {
-                sharer.setSharedStorage(keyHoverElement, target.elements[0]);
+            if (target.type === null) {
+                if (sharer.getSharedStorage(keyHoverElement) || sharer.getSharedStorage(keyHoverElementVertexes)) {
+                    sharer.setSharedStorage(keyHoverElement, null);
+                    sharer.setSharedStorage(keyHoverElementVertexes, null);
+                    viewer.drawFrame();
+                }
+                return;
+            }
+            if (target.type === 'over-element' &&
+                sharer.getSharedStorage(keyActionType) === 'select' &&
+                target.elements.length === 1 &&
+                target.elements[0].uuid === ((_c = (_b = getActiveElements()) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.uuid)) {
+                return;
+            }
+            if (target.type === 'over-element' &&
+                sharer.getSharedStorage(keyActionType) === null &&
+                target.elements.length === 1 &&
+                target.elements[0].uuid === ((_d = sharer.getSharedStorage(keyHoverElement)) === null || _d === void 0 ? void 0 : _d.uuid)) {
+                return;
+            }
+            if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
                 updateHoverElement(target.elements[0]);
                 viewer.drawFrame();
                 return;
@@ -194,24 +250,28 @@ export const MiddlewareSelector = (opts) => {
             }
         },
         pointStart: (e) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             prevPoint = e.point;
-            updateHoverElement(null);
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 if (isPointInViewActiveGroup(e.point, {
-                    ctx: helperContext,
+                    ctx: overlayContext,
                     viewScaleInfo: sharer.getActiveViewScaleInfo(),
                     viewSizeInfo: sharer.getActiveViewSizeInfo(),
                     groupQueue
                 })) {
                     const target = getPointTarget(e.point, pointTargetBaseOptions());
-                    updateHoverElement(null);
-                    if (target.type === 'over-element' && ((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                    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;
+                    }
+                    else {
+                        updateHoverElement(null);
+                    }
+                    if (target.type === 'over-element' && ((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
                         updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                         sharer.setSharedStorage(keyActionType, 'drag');
                     }
-                    else if ((_b = target.type) === null || _b === void 0 ? void 0 : _b.startsWith('resize-')) {
+                    else if ((_e = target.type) === null || _e === void 0 ? void 0 : _e.startsWith('resize-')) {
                         sharer.setSharedStorage(keyResizeType, target.type);
                         sharer.setSharedStorage(keyActionType, 'resize');
                     }
@@ -231,14 +291,20 @@ export const MiddlewareSelector = (opts) => {
                 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;
+            }
+            else {
+                updateHoverElement(null);
+            }
             if (target.type === 'list-area') {
                 sharer.setSharedStorage(keyActionType, 'drag-list');
             }
-            else if (target.type === 'over-element' && ((_c = target === null || target === void 0 ? void 0 : target.elements) === null || _c === void 0 ? void 0 : _c.length) === 1) {
+            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) {
                 updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                 sharer.setSharedStorage(keyActionType, 'drag');
             }
-            else if ((_d = target.type) === null || _d === void 0 ? void 0 : _d.startsWith('resize-')) {
+            else if ((_k = target.type) === null || _k === void 0 ? void 0 : _k.startsWith('resize-')) {
                 sharer.setSharedStorage(keyResizeType, target.type);
                 sharer.setSharedStorage(keyActionType, 'resize');
             }
@@ -251,21 +317,61 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         pointMove: (e) => {
+            var _a, _b, _c;
+            sharer.setSharedStorage(keyIsMoving, true);
             const data = sharer.getActiveStorage('data');
             const elems = getActiveElements();
             const scale = sharer.getActiveStorage('scale') || 1;
+            const viewScaleInfo = sharer.getActiveViewScaleInfo();
+            const viewSizeInfo = sharer.getActiveViewSizeInfo();
             const start = prevPoint;
             const end = e.point;
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+            const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
             if (actionType === 'drag') {
                 inBusyMode = 'drag';
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end) {
+                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);
-                    elems[0].x += moveX / scale;
-                    elems[0].y += moveY / scale;
+                    let totalMoveX = calculator.toGridNum(moveX / scale);
+                    let totalMoveY = calculator.toGridNum(moveY / scale);
+                    if (enableSnapToGrid === true) {
+                        const referenceInfo = calcReferenceInfo(elems[0].uuid, {
+                            calculator,
+                            data,
+                            groupQueue,
+                            viewScaleInfo,
+                            viewSizeInfo
+                        });
+                        try {
+                            if (referenceInfo) {
+                                if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
+                                    totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
+                                }
+                                if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
+                                    totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
+                                }
+                            }
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    }
+                    elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
+                    elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
                     updateSelectedElementList([elems[0]]);
+                    calculator.modifyViewVisibleInfoMap(data, {
+                        modifyOptions: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
                 }
                 viewer.drawFrame();
             }
@@ -275,9 +381,21 @@ export const MiddlewareSelector = (opts) => {
                     const moveX = (end.x - start.x) / scale;
                     const moveY = (end.y - start.y) / scale;
                     elems.forEach((elem) => {
-                        if (elem) {
-                            elem.x += moveX;
-                            elem.y += moveY;
+                        var _a;
+                        if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) !== true) {
+                            elem.x = calculator.toGridNum(elem.x + moveX);
+                            elem.y = calculator.toGridNum(elem.y + moveY);
+                            calculator.modifyViewVisibleInfoMap(data, {
+                                modifyOptions: {
+                                    type: 'updateElement',
+                                    content: {
+                                        element: elem,
+                                        position: getElementPositionFromList(elem.uuid, data.elements) || []
+                                    }
+                                },
+                                viewSizeInfo,
+                                viewScaleInfo
+                            });
                         }
                     });
                     sharer.setActiveStorage('data', data);
@@ -304,12 +422,54 @@ export const MiddlewareSelector = (opts) => {
                         resizeStart = rotatePointInGroup(start, pointGroupQueue);
                         resizeEnd = rotatePointInGroup(end, pointGroupQueue);
                     }
-                    const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-                    elems[0].x = resizedElemSize.x;
-                    elems[0].y = resizedElemSize.y;
-                    elems[0].w = resizedElemSize.w;
-                    elems[0].h = resizedElemSize.h;
+                    if (resizeType === 'resize-rotate') {
+                        const controller = sharer.getSharedStorage(keySelectedElementController);
+                        const viewVertexes = [
+                            controller.topLeft.center,
+                            controller.topRight.center,
+                            controller.bottomLeft.center,
+                            controller.bottomRight.center
+                        ];
+                        const viewCenter = calcElementCenterFromVertexes(viewVertexes);
+                        const resizedElemSize = rotateElement(elems[0], {
+                            center: viewCenter,
+                            viewScaleInfo,
+                            viewSizeInfo,
+                            start,
+                            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 };
+                        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) {
+                            deepResizeGroupElement(elems[0], {
+                                w: calculator.toGridNum(resizedElemSize.w, calcOpts),
+                                h: calculator.toGridNum(resizedElemSize.h, calcOpts)
+                            });
+                        }
+                        else {
+                            elems[0].w = calculator.toGridNum(resizedElemSize.w, calcOpts);
+                            elems[0].h = calculator.toGridNum(resizedElemSize.h, calcOpts);
+                        }
+                    }
                     updateSelectedElementList([elems[0]]);
+                    calculator.modifyViewVisibleInfoMap(data, {
+                        modifyOptions: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
                     viewer.drawFrame();
                 }
             }
@@ -322,7 +482,10 @@ export const MiddlewareSelector = (opts) => {
         },
         pointEnd(e) {
             inBusyMode = null;
+            sharer.setSharedStorage(keyIsMoving, false);
             const data = sharer.getActiveStorage('data');
+            const selectedElements = sharer.getSharedStorage(keySelectedElementList);
+            const hoverElement = sharer.getSharedStorage(keyHoverElement);
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
             const viewSizeInfo = sharer.getActiveViewSizeInfo();
@@ -385,7 +548,11 @@ export const MiddlewareSelector = (opts) => {
                     sharer.setActiveStorage('contextWidth', viewInfo.contextSize.contextWidth);
                 }
                 if (data && ['drag', 'drag-list', 'drag-list-end', 'resize'].includes(actionType)) {
-                    eventHub.trigger('change', { data });
+                    let type = 'dragElement';
+                    if (type === 'resize') {
+                        type = 'resizeElement';
+                    }
+                    eventHub.trigger(eventChange, { data, type, selectedElements, hoverElement });
                 }
                 viewer.drawFrame();
             };
@@ -397,9 +564,17 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         doubleClick(e) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (sharer.getSharedStorage(keyEnableSelectInGroup) === false) {
+                return;
+            }
             const target = getPointTarget(e.point, pointTargetBaseOptions());
-            if (target.elements.length === 1 && ((_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.type) === 'group') {
+            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) {
+                return;
+            }
+            if (target.elements.length === 1 && ((_c = target.elements[0]) === null || _c === void 0 ? void 0 : _c.type) === 'group') {
                 const pushResult = pushGroupQueue(target.elements[0]);
                 if (pushResult === true) {
                     sharer.setSharedStorage(keyActionType, null);
@@ -407,16 +582,18 @@ export const MiddlewareSelector = (opts) => {
                     return;
                 }
             }
-            else if (target.elements.length === 1 && ((_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.type) === 'text') {
+            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, {
                     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) || []),
                     viewScaleInfo: sharer.getActiveViewScaleInfo()
                 });
             }
             sharer.setSharedStorage(keyActionType, null);
         },
         beforeDrawFrame({ snapshot }) {
+            var _a;
             const { activeStore, sharedStore } = snapshot;
             const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
             const sharer = opts.sharer;
@@ -431,7 +608,9 @@ export const MiddlewareSelector = (opts) => {
             const areaEnd = sharedStore[keyAreaEnd];
             const groupQueue = sharedStore[keyGroupQueue];
             const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
-            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
+            const isMoving = sharedStore[keyIsMoving];
+            const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
+            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
             const selectedElementController = elem
                 ? calcElementSizeController(elem, {
                     groupQueue,
@@ -439,24 +618,85 @@ export const MiddlewareSelector = (opts) => {
                     viewScaleInfo
                 })
                 : null;
+            const isLock = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.lock);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
-                drawGroupQueueVertexesWrappers(helperContext, groupQueueVertexesList, drawBaseOpts);
+                drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
                 if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    if (isLock) {
+                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                                groupQueue,
+                                controllerSize: 10,
+                                viewScaleInfo
+                            }), style }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
+                    }
                 }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
+                if (!isLock && 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) {
+                            const referenceInfo = calcReferenceInfo(elem.uuid, {
+                                calculator,
+                                data: activeStore.data,
+                                groupQueue,
+                                viewScaleInfo,
+                                viewSizeInfo
+                            });
+                            if (referenceInfo) {
+                                const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+                                if (offsetX === 0 || offsetY === 0) {
+                                    drawReferenceLines(overlayContext, {
+                                        xLines,
+                                        yLines,
+                                        style
+                                    });
+                                }
+                            }
+                        }
+                    }
                 }
             }
             else {
                 if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    if (isLock) {
+                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                                groupQueue,
+                                controllerSize: 10,
+                                viewScaleInfo
+                            }), style }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
+                    }
                 }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
+                if (!isLock && 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) {
+                            const referenceInfo = calcReferenceInfo(elem.uuid, {
+                                calculator,
+                                data: activeStore.data,
+                                groupQueue,
+                                viewScaleInfo,
+                                viewSizeInfo
+                            });
+                            if (referenceInfo) {
+                                const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+                                if (offsetX === 0 || offsetY === 0) {
+                                    drawReferenceLines(overlayContext, {
+                                        xLines,
+                                        yLines,
+                                        style
+                                    });
+                                }
+                            }
+                        }
+                    }
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {
-                    drawArea(helperContext, { start: areaStart, end: areaEnd });
+                    drawArea(overlayContext, { start: areaStart, end: areaEnd, style });
                 }
                 else if (['drag-list', 'drag-list-end'].includes(actionType)) {
                     const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
@@ -465,7 +705,7 @@ export const MiddlewareSelector = (opts) => {
                         calculator
                     });
                     if (listAreaSize) {
-                        drawListArea(helperContext, { areaSize: listAreaSize });
+                        drawListArea(overlayContext, { areaSize: listAreaSize, style });
                     }
                 }
             }

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

@@ -0,0 +1,13 @@
+import type { Data, Element, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function calcReferenceInfo(uuid: string, opts: {
+    data: Data;
+    groupQueue: Element<'group'>[];
+    calculator: ViewCalculator;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    offsetX: number | null;
+    offsetY: number | null;
+    yLines: PointSize[][];
+    xLines: PointSize[][];
+} | null;