feat: add align shortcuts

F-star · Sep 8, 2024 · 3fa6470 · 3fa6470
1 parent 1c46772
commit 3fa6470
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/packages/core/src/host_event_manager/command_key_binding.ts b/packages/core/src/host_event_manager/command_key_binding.ts
@@ -6,14 +6,15 @@ import {
   SuikaText,
 } from '../graphs';
 import {
+  alignAndRecord,
   arrangeAndRecord,
   flipHorizontalAndRecord,
   flipVerticalAndRecord,
   MutateGraphsAndRecord,
   ungroupAndRecord,
 } from '../service';
 import { groupAndRecord } from '../service/group_and_record';
-import { ArrangeType } from '../type';
+import { AlignType, ArrangeType } from '../type';
 
 export class CommandKeyBinding {
   private isBound = false;
@@ -248,6 +249,61 @@ export class CommandKeyBinding {
       action: backwardAction,
     });
 
+    /*************** align **************/
+    editor.keybindingManager.register({
+      key: { altKey: true, keyCode: 'KeyA' },
+      when: (ctx) => !ctx.isToolDragging,
+      actionName: 'AlignLeft',
+      action: () => {
+        alignAndRecord(editor, AlignType.Left);
+      },
+    });
+
+    editor.keybindingManager.register({
+      key: { altKey: true, keyCode: 'KeyH' },
+      when: (ctx) => !ctx.isToolDragging,
+      actionName: 'AlignHorizontalCenters',
+      action: () => {
+        alignAndRecord(editor, AlignType.HCenter);
+      },
+    });
+
+    editor.keybindingManager.register({
+      key: { altKey: true, keyCode: 'KeyD' },
+      when: (ctx) => !ctx.isToolDragging,
+      actionName: 'AlignRight',
+      action: () => {
+        alignAndRecord(editor, AlignType.Right);
+      },
+    });
+
+    editor.keybindingManager.register({
+      key: { altKey: true, keyCode: 'KeyW' },
+      when: (ctx) => !ctx.isToolDragging,
+      actionName: 'AlignTop',
+      action: () => {
+        alignAndRecord(editor, AlignType.Top);
+      },
+    });
+
+    editor.keybindingManager.register({
+      key: { altKey: true, keyCode: 'KeyV' },
+      when: (ctx) => !ctx.isToolDragging,
+      actionName: 'AlignVerticalCenters',
+      action: () => {
+        alignAndRecord(editor, AlignType.VCenter);
+      },
+    });
+
+    editor.keybindingManager.register({
+      key: { altKey: true, keyCode: 'KeyS' },
+      when: (ctx) => !ctx.isToolDragging,
+      actionName: 'AlignBottom',
+      action: () => {
+        alignAndRecord(editor, AlignType.Bottom);
+      },
+    });
+
     /*************** group **************/
     // group
     const groupAction = () => {

diff --git a/packages/core/src/service/align_and_record.ts b/packages/core/src/service/align_and_record.ts
@@ -22,6 +22,8 @@ export const alignAndRecord = (editor: SuikaEditor, type: AlignType) => {
   const worldTfs = graphicsArr.map((item) => item.getWorldTransform());
   const mixedBBox = mergeBoxes(bboxes);
 
+  // TODO: check whether had align
+
   const transaction = new Transaction(editor);
 
   const updateGraphicsPosition = (