@idraw/core 0.4.0-beta.25 → 0.4.0-beta.26

package/dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
 export { eventChange } from './config';
-export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup } from './middleware/selector';
+export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';

package/dist/esm/index.js

@@ -14,7 +14,7 @@ import { Board } from '@idraw/board';
 import { createBoardContent, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
 export { eventChange } from './config';
-export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup } from './middleware/selector';
+export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';

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

@@ -15,6 +15,7 @@ export declare const keyGroupQueue: unique symbol;
 export declare const keyGroupQueueVertexesList: unique symbol;
 export declare const keyIsMoving: unique symbol;
 export declare const keyEnableSelectInGroup: unique symbol;
+export declare const keyEnableSnapToGrid: unique symbol;
 export declare const keyDebugElemCenter: unique symbol;
 export declare const keyDebugStartVertical: unique symbol;
 export declare const keyDebugEndVertical: unique symbol;
@@ -32,3 +33,4 @@ export declare const referenceColor = "#f7276e";
 export declare const middlewareEventSelect: string;
 export declare const middlewareEventSelectClear: string;
 export declare const middlewareEventSelectInGroup: string;
+export declare const middlewareEventSnapToGrid: string;

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

@@ -14,7 +14,8 @@ export const keySelectedReferenceYLines = Symbol(`${key}_selectedReferenceYLines
 export const keyGroupQueue = Symbol(`${key}_groupQueue`);
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
 export const keyIsMoving = Symbol(`${key}_isMoving`);
-export const keyEnableSelectInGroup = Symbol(`${key}_canSelectInGroup`);
+export const keyEnableSelectInGroup = Symbol(`${key}_enableSelectInGroup`);
+export const keyEnableSnapToGrid = Symbol(`${key}_enableSnapToGrid`);
 export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
 export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
 export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
@@ -32,3 +33,4 @@ export const referenceColor = '#f7276e';
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
 export const middlewareEventSelectInGroup = '@middleware/select-in-group';
+export const middlewareEventSnapToGrid = '@middleware/snap-to-grid';

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

@@ -1,7 +1,7 @@
 import type { CoreEventMap } from '@idraw/types';
 import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
-import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
+import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
 export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
-export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup };
+export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
 export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap>;

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

@@ -2,18 +2,19 @@ import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueV
 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, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, controllerSize } from './config';
+import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize } from './config';
 import { calcReferenceInfo } from './reference';
 import { middlewareEventTextEdit } from '../text-editor';
 import { eventChange } from '../../config';
 export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
-export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup };
+export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
 export const MiddlewareSelector = (opts) => {
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyEnableSnapToGrid, true);
     const getActiveElements = () => {
         return sharer.getSharedStorage(keySelectedElementList);
     };
@@ -131,6 +132,9 @@ export const MiddlewareSelector = (opts) => {
         clear();
         viewer.drawFrame();
     };
+    const setSnapToSnapCallback = (e) => {
+        sharer.setSharedStorage(keyEnableSnapToGrid, !!e.enable);
+    };
     const selectInGroupCallback = (e) => {
         sharer.setSharedStorage(keyEnableSelectInGroup, !!e.enable);
     };
@@ -140,11 +144,13 @@ export const MiddlewareSelector = (opts) => {
             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, _c, _d, _e;
@@ -319,33 +325,36 @@ export const MiddlewareSelector = (opts) => {
             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 && ((_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);
                     let totalMoveX = calculator.toGridNum(moveX / scale);
                     let totalMoveY = calculator.toGridNum(moveY / scale);
-                    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);
+                    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);
+                                }
+                                sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
+                                sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
                             }
-                            sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
-                            sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
                         }
-                    }
-                    catch (err) {
-                        console.error(err);
+                        catch (err) {
+                            console.error(err);
+                        }
                     }
                     elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
                     elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
@@ -598,6 +607,7 @@ export const MiddlewareSelector = (opts) => {
             const groupQueue = sharedStore[keyGroupQueue];
             const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
             const isMoving = sharedStore[keyIsMoving];
+            const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
             const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
             const selectedElementController = elem
                 ? calcElementSizeController(elem, {
@@ -626,10 +636,12 @@ export const MiddlewareSelector = (opts) => {
                     if (actionType === 'drag') {
                         const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
                         const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
-                        drawReferenceLines(overlayContext, {
-                            xLines,
-                            yLines
-                        });
+                        if (enableSnapToGrid === true) {
+                            drawReferenceLines(overlayContext, {
+                                xLines,
+                                yLines
+                            });
+                        }
                     }
                 }
             }
@@ -651,10 +663,12 @@ export const MiddlewareSelector = (opts) => {
                     if (actionType === 'drag') {
                         const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
                         const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
-                        drawReferenceLines(overlayContext, {
-                            xLines,
-                            yLines
-                        });
+                        if (enableSnapToGrid === true) {
+                            drawReferenceLines(overlayContext, {
+                                xLines,
+                                yLines
+                            });
+                        }
                     }
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {

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

@@ -1,5 +1,5 @@
 import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware, ViewRectVertexes, ElementSizeController, ElementPosition } from '@idraw/types';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
 export { Data, ElementType, Element, ElementSize, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware };
 export type ControllerStyle = ElementSize & {
     borderWidth: number;
@@ -35,6 +35,7 @@ export type DeepSelectorSharedStorage = {
     [keySelectedReferenceYLines]: Array<PointSize[]>;
     [keyIsMoving]: boolean | null;
     [keyEnableSelectInGroup]: boolean | null;
+    [keyEnableSnapToGrid]: boolean | null;
     [keyDebugElemCenter]: PointSize | null;
     [keyDebugEnd0]: PointSize | null;
     [keyDebugEndHorizontal]: PointSize | null;

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

@@ -1 +1 @@
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';

package/dist/index.global.js

@@ -2520,7 +2520,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawRect(ctx, elem, opts) {
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -2805,7 +2805,20 @@ var __privateMethod = (obj, member, method) => {
       });
     });
   }
+  var __rest = function(s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
   function drawPath(ctx, elem, opts) {
+    var _a, _b;
     const { detail } = elem;
     const { originX, originY, originW, originH, fillRule } = detail;
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
@@ -2816,11 +2829,31 @@ var __privateMethod = (obj, member, method) => {
     const viewOriginY = originY * scaleH;
     const internalX = x2 - viewOriginX;
     const internalY = y2 - viewOriginY;
+    const _c = elem.detail, restDetail = __rest(_c, ["clipPath", "clipPathStrokeColor", "clipPathStrokeWidth"]);
     const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    let boxViewElem = Object.assign({}, viewElem);
+    boxViewElem.detail = restDetail;
+    let boxOriginElem = Object.assign({}, elem);
+    boxOriginElem.detail = restDetail;
+    if (detail.fill && detail.fill !== "string" && ((_b = (_a = detail.fill) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.includes("gradient"))) {
+      boxViewElem = Object.assign(Object.assign({}, viewElem), {
+        detail: Object.assign(Object.assign({}, viewElem.detail), {
+          background: detail.fill,
+          clipPath: {
+            commands: detail.commands,
+            originX,
+            originY,
+            originW,
+            originH
+          }
+        })
+      });
+      boxOriginElem.detail = Object.assign({}, boxViewElem.detail);
+    }
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      drawBox(ctx, viewElem, {
-        originElem: elem,
+      drawBox(ctx, boxViewElem, {
+        originElem: boxOriginElem,
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
@@ -2836,7 +2869,13 @@ var __privateMethod = (obj, member, method) => {
               const pathStr = generateSVGPath(detail.commands || []);
               const path2d = new Path2D(pathStr);
               if (detail.fill) {
-                ctx.fillStyle = detail.fill;
+                if (typeof detail.fill === "string") {
+                  ctx.fillStyle = detail.fill;
+                } else {
+                  ctx.fillStyle = "transparent";
+                }
+              }
+              if (detail.fill) {
                 ctx.fill(path2d, fillRule);
               }
               if (detail.stroke && detail.strokeWidth !== 0) {
@@ -2853,6 +2892,7 @@ var __privateMethod = (obj, member, method) => {
       });
     });
   }
+  const visiableMinSize = 0.4;
   function drawElement(ctx, elem, opts) {
     var _a, _b, _c;
     if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
@@ -2860,7 +2900,7 @@ var __privateMethod = (obj, member, method) => {
     }
     const { w: w2, h: h2 } = elem;
     const { scale } = opts.viewScaleInfo;
-    if (scale < 1 && (w2 * scale < 1 || h2 * scale < 1) || opts.parentOpacity === 0) {
+    if (scale < 1 && (w2 * scale < visiableMinSize || h2 * scale < visiableMinSize) || opts.parentOpacity === 0) {
       return;
     }
     const { overrideElementMap } = opts;
@@ -4515,7 +4555,8 @@ var __privateMethod = (obj, member, method) => {
   const keyGroupQueue = Symbol(`${key$3}_groupQueue`);
   const keyGroupQueueVertexesList = Symbol(`${key$3}_groupQueueVertexesList`);
   const keyIsMoving = Symbol(`${key$3}_isMoving`);
-  const keyEnableSelectInGroup = Symbol(`${key$3}_canSelectInGroup`);
+  const keyEnableSelectInGroup = Symbol(`${key$3}_enableSelectInGroup`);
+  const keyEnableSnapToGrid = Symbol(`${key$3}_enableSnapToGrid`);
   const selectWrapperBorderWidth = 2;
   const resizeControllerBorderWidth = 4;
   const areaBorderWidth = 1;
@@ -4526,6 +4567,7 @@ var __privateMethod = (obj, member, method) => {
   const middlewareEventSelect = "@middleware/select";
   const middlewareEventSelectClear = "@middleware/select-clear";
   const middlewareEventSelectInGroup = "@middleware/select-in-group";
+  const middlewareEventSnapToGrid = "@middleware/snap-to-grid";
   function drawVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
@@ -6002,6 +6044,7 @@ var __privateMethod = (obj, member, method) => {
     let prevPoint = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyEnableSnapToGrid, true);
     const getActiveElements = () => {
       return sharer.getSharedStorage(keySelectedElementList);
     };
@@ -6114,6 +6157,9 @@ var __privateMethod = (obj, member, method) => {
       clear();
       viewer.drawFrame();
     };
+    const setSnapToSnapCallback = (e) => {
+      sharer.setSharedStorage(keyEnableSnapToGrid, !!e.enable);
+    };
     const selectInGroupCallback = (e) => {
       sharer.setSharedStorage(keyEnableSelectInGroup, !!e.enable);
     };
@@ -6123,11 +6169,13 @@ var __privateMethod = (obj, member, method) => {
         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, _c, _d, _e;
@@ -6295,32 +6343,35 @@ var __privateMethod = (obj, member, method) => {
         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 ? 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);
             let totalMoveX = calculator.toGridNum(moveX / scale);
             let totalMoveY = calculator.toGridNum(moveY / scale);
-            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);
+            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);
+                  }
+                  sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
+                  sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
                 }
-                sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
-                sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
+              } catch (err) {
+                console.error(err);
               }
-            } catch (err) {
-              console.error(err);
             }
             elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
             elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
@@ -6560,6 +6611,7 @@ var __privateMethod = (obj, member, method) => {
         const groupQueue = sharedStore[keyGroupQueue];
         const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
         const isMoving = sharedStore[keyIsMoving];
+        const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
         const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
         const selectedElementController = elem ? calcElementSizeController(elem, {
           groupQueue,
@@ -6593,10 +6645,12 @@ var __privateMethod = (obj, member, method) => {
             if (actionType === "drag") {
               const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
               const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
-              drawReferenceLines(overlayContext, {
-                xLines,
-                yLines
-              });
+              if (enableSnapToGrid === true) {
+                drawReferenceLines(overlayContext, {
+                  xLines,
+                  yLines
+                });
+              }
             }
           }
         } else {
@@ -6624,10 +6678,12 @@ var __privateMethod = (obj, member, method) => {
             if (actionType === "drag") {
               const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
               const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
-              drawReferenceLines(overlayContext, {
-                xLines,
-                yLines
-              });
+              if (enableSnapToGrid === true) {
+                drawReferenceLines(overlayContext, {
+                  xLines,
+                  yLines
+                });
+              }
             }
           } else if (actionType === "area" && areaStart && areaEnd) {
             drawArea(overlayContext, { start: areaStart, end: areaEnd });
@@ -7984,6 +8040,7 @@ var __privateMethod = (obj, member, method) => {
   exports.middlewareEventSelect = middlewareEventSelect;
   exports.middlewareEventSelectClear = middlewareEventSelectClear;
   exports.middlewareEventSelectInGroup = middlewareEventSelectInGroup;
+  exports.middlewareEventSnapToGrid = middlewareEventSnapToGrid;
   exports.middlewareEventTextChange = middlewareEventTextChange;
   exports.middlewareEventTextEdit = middlewareEventTextEdit;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });