feat: support complex hotkey

packages/core/src/key_binding_manager.ts

@@ -2,7 +2,7 @@ import { isWindows } from '@suika/common';
 
 import { type SuikaEditor } from './editor';
 
-interface IKey {
+export interface IKey {
   ctrlKey?: boolean;
   shiftKey?: boolean;
   altKey?: boolean;

packages/core/src/tools/tool_manager.ts

@@ -2,6 +2,7 @@ import { EventEmitter, noop } from '@suika/common';
 import { type IPoint } from '@suika/geo';
 
 import { type SuikaEditor } from '../editor';
+import { type IKey } from '../key_binding_manager';
 import { DragCanvasTool } from './tool_drag_canvas';
 import { DrawEllipseTool } from './tool_draw_ellipse';
 import { DrawLineTool } from './tool_draw_line';
@@ -93,27 +94,40 @@ export class ToolManager {
 
     // select and pathSelect tool has same hotkey
     const hotkey = toolCtor.hotkey;
+    let keyCode = '';
+    let hotkeyObj: IKey;
 
     if (!hotkey) {
       console.log(`${type} has no hotkey`);
+      return;
+    }
+
+    if (typeof hotkey === 'string') {
+      keyCode = `Key${hotkey.toUpperCase()}`;
+      hotkeyObj = { keyCode: keyCode };
     } else {
-      if (this.hotkeySet.has(hotkey)) {
-        console.log(`register same hotkey: "${hotkey}"`);
-      }
-      this.hotkeySet.add(hotkey);
+      // support complex hotkey
+      keyCode = `${hotkey.altKey ? 'alt+' : ''}${
+        hotkey.ctrlKey ? 'ctrl+' : ''
+      }${hotkey.shiftKey ? 'shift+' : ''}${hotkey.metaKey ? 'meta+' : ''}${
+        hotkey.keyCode
+      }`;
+      hotkeyObj = hotkey;
+    }
 
-      const keyCode = `Key${toolCtor.hotkey.toUpperCase()}`;
-      // TODO: support complex hotkey
-      const token = this.editor.keybindingManager.register({
-        key: { keyCode: keyCode },
-        actionName: type,
-        when: () => this.enableToolTypes.includes(type),
-        action: () => {
-          this.setActiveTool(type);
-        },
-      });
-      this.keyBindingToken.push(token);
+    if (this.hotkeySet.has(keyCode)) {
+      console.log(`register same hotkey: "${keyCode}"`);
     }
+    this.hotkeySet.add(keyCode);
+    const token = this.editor.keybindingManager.register({
+      key: hotkeyObj,
+      actionName: type,
+      when: () => this.enableToolTypes.includes(type),
+      action: () => {
+        this.setActiveTool(type);
+      },
+    });
+    this.keyBindingToken.push(token);
   }
   getActiveToolName() {
     return this.currentTool?.type;

packages/core/src/tools/tool_pencil.ts

@@ -8,7 +8,7 @@ import { SuikaPath } from '../graphs';
 import { type ITool } from './type';
 
 const TYPE = 'pencil';
-const HOTKEY = '';
+const HOTKEY = { shiftKey: true, keyCode: 'KeyP' };
 
 export class PencilTool implements ITool {
   static readonly type = TYPE;

packages/core/src/tools/type.ts

@@ -1,8 +1,9 @@
 import { type ICursor } from '../cursor_manager';
 import { type SuikaEditor } from '../editor';
+import { type IKey } from '../key_binding_manager';
 
 export interface ITool extends IBaseTool {
-  hotkey: string;
+  hotkey: string | IKey;
   type: string;
   cursor: ICursor;
   onMoveExcludeDrag: (event: PointerEvent, isOutsideCanvas: boolean) => void;
@@ -40,5 +41,5 @@ export interface IBaseTool {
 export interface IToolClassConstructor {
   new (editor: SuikaEditor): ITool;
   type: string;
-  hotkey: string;
+  hotkey: string | IKey;
 }

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

@@ -1,5 +1,6 @@
 import './Toolbar.scss';
 
+import { isWindows } from '@suika/common';
 import { Button } from '@suika/components';
 import {
   EllipseOutlined,
@@ -92,7 +93,7 @@ export const ToolBar = () => {
     },
     pencil: {
       name: 'pencil',
-      hotkey: '',
+      hotkey: `${isWindows ? 'Shift+' : '⇧'}P`,
       intlId: 'tool.pencil',
       icon: <PencilOutlined />,
     },

packages/suika/vite.config.ts

@@ -8,6 +8,7 @@ export default defineConfig({
   base: './',
   server: {
     port: 6167,
+    host: true,
   },
   build: {
     outDir: 'build',