feat: support complex hotkey

.gitignore

@@ -25,4 +25,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+
 .history

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

@@ -96,14 +96,13 @@ export class ToolManager {
 
     if (!hotkey) {
       console.log(`${type} has no hotkey`);
-    } else {
+    } else if (typeof hotkey === 'string') {
       if (this.hotkeySet.has(hotkey)) {
         console.log(`register same hotkey: "${hotkey}"`);
       }
       this.hotkeySet.add(hotkey);
 
-      const keyCode = `Key${toolCtor.hotkey.toUpperCase()}`;
-      // TODO: support complex hotkey
+      const keyCode = `Key${toolCtor.hotkey}`;
       const token = this.editor.keybindingManager.register({
         key: { keyCode: keyCode },
         actionName: type,
@@ -113,6 +112,26 @@ export class ToolManager {
         },
       });
       this.keyBindingToken.push(token);
+    } else {
+      // support complex hotkey
+      const hotkeyStr = `${hotkey.altKey ? 'alt+' : ''}${
+        hotkey.ctrlKey ? 'ctrl+' : ''
+      }${hotkey.shiftKey ? 'shift+' : ''}${hotkey.metaKey ? 'meta+' : ''}${
+        hotkey.keyCode
+      }`;
+      if (this.hotkeySet.has(hotkeyStr)) {
+        console.log(`register same hotkey: "${hotkey}"`);
+      }
+      this.hotkeySet.add(hotkeyStr);
+      const token = this.editor.keybindingManager.register({
+        key: hotkey,
+        actionName: type,
+        when: () => this.enableToolTypes.includes(type),
+        action: () => {
+          this.setActiveTool(type);
+        },
+      });
+      this.keyBindingToken.push(token);
     }
   }
   getActiveToolName() {

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',