feat: setting "snap to objects"

packages/core/src/setting.ts

@@ -111,6 +111,8 @@ export class Setting {
     gridSnapX: 1,
     gridSnapY: 1,
 
+    snapToObjects: true,
+
     dragBlockStep: 4, // drag handler will not happen if move distance less this value
 
     offsetX: 0, // mouse offset

packages/core/src/tools/tool_draw_graphics.ts

@@ -45,6 +45,7 @@ export abstract class DrawGraphicsTool implements ITool {
   private unbindEvent: () => void = noop;
 
   constructor(protected editor: SuikaEditor) {}
+
   onActive() {
     const editor = this.editor;
     const hotkeysManager = editor.hostEventManager;
@@ -59,7 +60,7 @@ export abstract class DrawGraphicsTool implements ITool {
       if (editor.hostEventManager.isDraggingCanvasBySpace) {
         return;
       }
-      if (this.isDragging) {
+      if (this.isDragging && this.editor.setting.get('snapToObjects')) {
         this.editor.refLine.cacheGraphicsRefLines({
           excludeItems: this.editor.selectedElements.getItems(),
         });
@@ -142,7 +143,7 @@ export abstract class DrawGraphicsTool implements ITool {
       this.editor.setting,
     );
 
-    if (!this.isDragging) {
+    if (!this.isDragging && this.editor.setting.get('snapToObjects')) {
       this.editor.refLine.cacheGraphicsRefLines();
     }
     const offset = this.editor.refLine.getGraphicsSnapOffset([

packages/core/src/tools/tool_select/tool_select_move.ts

@@ -86,9 +86,11 @@ export class SelectMoveTool implements IBaseTool {
       this.prevBBoxPos = { x: boundingRect.x, y: boundingRect.y };
     }
 
-    this.editor.refLine.cacheGraphicsRefLines({
-      excludeItems: this.selectedItems,
-    });
+    if (this.editor.setting.get('snapToObjects')) {
+      this.editor.refLine.cacheGraphicsRefLines({
+        excludeItems: this.selectedItems,
+      });
+    }
   }
   onDrag(e: PointerEvent) {
     this.dragPoint = this.editor.getCursorXY(e);

packages/core/src/tools/tool_select/tool_select_resize.ts

@@ -106,7 +106,7 @@ export class SelectResizeTool implements IBaseTool {
       (this.editor.selectedElements.size() > 1 ||
         this.editor.selectedElements.getItems()[0].getRotate() % HALF_PI === 0);
 
-    if (!this.lastDragPoint) {
+    if (!this.lastDragPoint && this.editor.setting.get('snapToObjects')) {
       this.editor.refLine.cacheGraphicsRefLines({
         excludeItems: this.editor.selectedElements.getItems(),
       });

packages/suika/src/components/Editor.tsx

@@ -24,6 +24,7 @@ const storeKeys: Partial<keyof SettingValue>[] = [
   'invertZoomDirection',
   'highlightLayersOnHover',
   'flipObjectsWhileResizing',
+  'snapToObjects',
 ];
 
 const Editor: FC = () => {

packages/suika/src/components/Header/components/Toolbar/menu/Menu.tsx

@@ -47,6 +47,11 @@ export const Menu: FC = () => {
       key: 'preference',
       label: t({ id: 'preference' }),
       children: [
+        {
+          key: 'snapToObjects',
+          check: editorSetting.snapToObjects,
+          label: t({ id: 'snapToObjects' }),
+        },
         {
           key: 'keepToolSelectedAfterUse',
           check: editorSetting.keepToolSelectedAfterUse,
@@ -87,6 +92,7 @@ export const Menu: FC = () => {
       case 'invertZoomDirection':
       case 'highlightLayersOnHover':
       case 'flipObjectsWhileResizing':
+      case 'snapToObjects':
         editor.setting.toggle(key);
         preventClose = true;
         break;

packages/suika/src/locale/en.json

@@ -62,6 +62,7 @@
   "invertZoomDirection": "Invert zoom direction",
   "highlightLayersOnHover": "Highlight layers on hover",
   "flipObjectsWhileResizing": "Flip objects while resizing",
+  "snapToObjects": "Snap to objects",
 
   "done": "Done",
 

packages/suika/src/locale/zh.json

@@ -61,6 +61,7 @@
   "invertZoomDirection": "反转缩放方向",
   "highlightLayersOnHover": "鼠标悬停时高亮图层",
   "flipObjectsWhileResizing": "缩放时对图形进行翻转",
+  "snapToObjects": "吸附到对象",
 
   "done": "完成",