From 333269d4ad1946d3cdf068e156e2f1103db1a0ce Mon Sep 17 00:00:00 2001 From: xigua Date: Fri, 17 Jan 2025 00:27:10 +0800 Subject: [PATCH] feat: setting "snap to objects" --- packages/core/src/setting.ts | 2 ++ packages/core/src/tools/tool_draw_graphics.ts | 5 +++-- packages/core/src/tools/tool_select/tool_select_move.ts | 8 +++++--- packages/core/src/tools/tool_select/tool_select_resize.ts | 2 +- packages/suika/src/components/Editor.tsx | 1 + .../components/Header/components/Toolbar/menu/Menu.tsx | 6 ++++++ packages/suika/src/locale/en.json | 1 + packages/suika/src/locale/zh.json | 1 + 8 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/core/src/setting.ts b/packages/core/src/setting.ts index ee41f0df..8e261e61 100644 --- a/packages/core/src/setting.ts +++ b/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 diff --git a/packages/core/src/tools/tool_draw_graphics.ts b/packages/core/src/tools/tool_draw_graphics.ts index 19569f54..4623fd6c 100644 --- a/packages/core/src/tools/tool_draw_graphics.ts +++ b/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([ diff --git a/packages/core/src/tools/tool_select/tool_select_move.ts b/packages/core/src/tools/tool_select/tool_select_move.ts index 67fc7239..9c64cbd2 100644 --- a/packages/core/src/tools/tool_select/tool_select_move.ts +++ b/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); diff --git a/packages/core/src/tools/tool_select/tool_select_resize.ts b/packages/core/src/tools/tool_select/tool_select_resize.ts index 93dfd80a..597310b0 100644 --- a/packages/core/src/tools/tool_select/tool_select_resize.ts +++ b/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(), }); diff --git a/packages/suika/src/components/Editor.tsx b/packages/suika/src/components/Editor.tsx index a9167c8c..c69c80f1 100644 --- a/packages/suika/src/components/Editor.tsx +++ b/packages/suika/src/components/Editor.tsx @@ -24,6 +24,7 @@ const storeKeys: Partial[] = [ 'invertZoomDirection', 'highlightLayersOnHover', 'flipObjectsWhileResizing', + 'snapToObjects', ]; const Editor: FC = () => { diff --git a/packages/suika/src/components/Header/components/Toolbar/menu/Menu.tsx b/packages/suika/src/components/Header/components/Toolbar/menu/Menu.tsx index ebcc6e53..e2eadd33 100644 --- a/packages/suika/src/components/Header/components/Toolbar/menu/Menu.tsx +++ b/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; diff --git a/packages/suika/src/locale/en.json b/packages/suika/src/locale/en.json index 8feee77a..a868b298 100644 --- a/packages/suika/src/locale/en.json +++ b/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", diff --git a/packages/suika/src/locale/zh.json b/packages/suika/src/locale/zh.json index 8daa2ca4..88787158 100644 --- a/packages/suika/src/locale/zh.json +++ b/packages/suika/src/locale/zh.json @@ -61,6 +61,7 @@ "invertZoomDirection": "反转缩放方向", "highlightLayersOnHover": "鼠标悬停时高亮图层", "flipObjectsWhileResizing": "缩放时对图形进行翻转", + "snapToObjects": "吸附到对象", "done": "完成",