@flowgram-vue/shortcuts-plugin 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+Copyright (c) 2026 Crayon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,289 @@
+'use strict';
+
+var core = require('@flowgram-vue/core');
+var inversify = require('inversify');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ShortcutsContribution = /* @__PURE__ */ Symbol("ShortcutsContribution");
+exports.ShortcutsRegistry = class ShortcutsRegistry {
+  constructor() {
+    this.shortcutsHandlers = [];
+  }
+  addHandlers(...handlers) {
+    handlers.forEach((handler) => {
+      if (!this.commandRegistry.getCommand(handler.commandId)) {
+        this.commandRegistry.registerCommand(
+          { id: handler.commandId, ...handler.commandDetail || {} },
+          { execute: handler.execute, isEnabled: handler.isEnabled }
+        );
+      } else {
+        this.commandRegistry.registerHandler(handler.commandId, {
+          execute: handler.execute,
+          isEnabled: handler.isEnabled
+        });
+      }
+    });
+    this.shortcutsHandlers.unshift(...handlers);
+  }
+  addHandlersIfNotFound(...handlers) {
+    handlers.forEach((handler) => {
+      if (!this.has(handler.commandId)) {
+        this.addHandlers(handler);
+      }
+    });
+  }
+  removeHandler(commandId) {
+    this.shortcutsHandlers = this.shortcutsHandlers.filter(
+      (handler) => handler.commandId !== commandId
+    );
+  }
+  has(commandId) {
+    return this.shortcutsHandlers.some((handler) => handler.commandId === commandId);
+  }
+  init() {
+    this.contribs?.forEach((contrib) => contrib.registerShortcuts(this));
+  }
+};
+__decorateClass([
+  inversify.inject(core.ContributionProvider),
+  inversify.named(ShortcutsContribution),
+  inversify.optional()
+], exports.ShortcutsRegistry.prototype, "contribs", 2);
+__decorateClass([
+  inversify.inject(core.CommandRegistry)
+], exports.ShortcutsRegistry.prototype, "commandRegistry", 2);
+__decorateClass([
+  inversify.postConstruct()
+], exports.ShortcutsRegistry.prototype, "init", 1);
+exports.ShortcutsRegistry = __decorateClass([
+  inversify.injectable()
+], exports.ShortcutsRegistry);
+
+// src/shortcuts-utils.ts
+var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(
+  typeof navigator !== "undefined" ? navigator?.platform : ""
+);
+var aliasKeyCodeMap = {
+  "0": 48,
+  "1": 49,
+  "2": 50,
+  "3": 51,
+  "4": 52,
+  "5": 53,
+  "6": 54,
+  "7": 55,
+  "8": 56,
+  "9": 57,
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  pausebreak: 19,
+  capslock: 20,
+  esc: 27,
+  space: 32,
+  pageup: 33,
+  pagedown: 34,
+  end: 35,
+  home: 36,
+  leftarrow: 37,
+  uparrow: 38,
+  rightarrow: 39,
+  downarrow: 40,
+  insert: 45,
+  delete: 46,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  leftwindowkey: 91,
+  rightwindowkey: 92,
+  meta: isAppleDevice ? [91, 93] : [91, 92],
+  selectkey: 93,
+  numpad0: 96,
+  numpad1: 97,
+  numpad2: 98,
+  numpad3: 99,
+  numpad4: 100,
+  numpad5: 101,
+  numpad6: 102,
+  numpad7: 103,
+  numpad8: 104,
+  numpad9: 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  decimalpoint: 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f11: 122,
+  f12: 123,
+  numlock: 144,
+  scrolllock: 145,
+  semicolon: 186,
+  equalsign: 187,
+  "=": 187,
+  comma: 188,
+  dash: 189,
+  "-": 189,
+  period: 190,
+  forwardslash: 191,
+  graveaccent: 192,
+  openbracket: 219,
+  backslash: 220,
+  closebracket: 221,
+  singlequote: 222
+};
+var modifierKey = {
+  ctrl: (event) => event.ctrlKey,
+  shift: (event) => event.shiftKey,
+  alt: (event) => event.altKey,
+  meta: (event) => {
+    if (event.type === "keyup") {
+      return aliasKeyCodeMap.meta.includes(event.keyCode);
+    }
+    return event.metaKey;
+  }
+};
+function countKeyByEvent(event) {
+  const countOfModifier = Object.keys(modifierKey).reduce((total, key) => {
+    if (modifierKey[key](event)) {
+      return total + 1;
+    }
+    return total;
+  }, 0);
+  return [16, 17, 18, 91, 92].includes(event.keyCode) ? countOfModifier : countOfModifier + 1;
+}
+function isKeyStringMatch(event, keyString, exactMatch = true) {
+  if (!event.key || !keyString) {
+    return false;
+  }
+  const genArr = keyString.split(/\s+/);
+  let genLen = 0;
+  for (const key of genArr) {
+    const genModifier = modifierKey[key];
+    const aliasKeyCode = aliasKeyCodeMap[key.toLowerCase()];
+    if (genModifier && genModifier(event) || aliasKeyCode && aliasKeyCode === event.keyCode) {
+      genLen++;
+    }
+  }
+  if (exactMatch) {
+    return genLen === genArr.length && countKeyByEvent(event) === genArr.length;
+  }
+  return genLen === genArr.length;
+}
+function isShortcutsMatch(event, shortcuts) {
+  return shortcuts.some((keyString) => isKeyStringMatch(event, keyString));
+}
+
+// src/layers/shortcuts-layer.ts
+var ShortcutsLayer = class extends core.Layer {
+  onReady() {
+    this.shortcuts.addHandlersIfNotFound(
+      /**
+       * 放大
+       */
+      {
+        commandId: core.Command.Default.ZOOM_IN,
+        shortcuts: ["meta =", "ctrl ="],
+        execute: () => {
+          this.config.zoomin();
+        }
+      },
+      /**
+       * 缩小
+       */
+      {
+        commandId: core.Command.Default.ZOOM_OUT,
+        shortcuts: ["meta -", "ctrl -"],
+        execute: () => {
+          this.config.zoomout();
+        }
+      }
+    );
+    this.toDispose.pushAll([
+      // 监听画布鼠标移动事件
+      this.listenPlaygroundEvent("keydown", (e) => {
+        if (!this.isFocused || e.target !== this.playgroundNode) {
+          return;
+        }
+        this.shortcuts.shortcutsHandlers.some((shortcutsHandler) => {
+          if (isShortcutsMatch(e, shortcutsHandler.shortcuts) && (!shortcutsHandler.isEnabled || shortcutsHandler.isEnabled(e))) {
+            shortcutsHandler.execute(e);
+            e.preventDefault();
+            return true;
+          }
+        });
+      })
+    ]);
+  }
+};
+ShortcutsLayer.type = "ShortcutsLayer";
+__decorateClass([
+  inversify.inject(exports.ShortcutsRegistry)
+], ShortcutsLayer.prototype, "shortcuts", 2);
+__decorateClass([
+  inversify.inject(core.SelectionService)
+], ShortcutsLayer.prototype, "selection", 2);
+ShortcutsLayer = __decorateClass([
+  inversify.injectable()
+], ShortcutsLayer);
+
+// src/create-shortcuts-plugin.ts
+var createShortcutsPlugin = core.definePluginCreator({
+  onBind: ({ bind }) => {
+    bind(exports.ShortcutsRegistry).toSelf().inSingletonScope();
+    core.bindContributionProvider(bind, ShortcutsContribution);
+  },
+  onInit: (ctx) => {
+    ctx.playground.registerLayer(ShortcutsLayer);
+  },
+  contributionKeys: [ShortcutsContribution]
+});
+
+exports.ShortcutsContribution = ShortcutsContribution;
+exports.createShortcutsPlugin = createShortcutsPlugin;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shortcuts-contribution.ts","../src/shortcuts-utils.ts","../src/layers/shortcuts-layer.ts","../src/create-shortcuts-plugin.ts"],"names":["ShortcutsRegistry","inject","ContributionProvider","named","optional","CommandRegistry","postConstruct","injectable","Layer","Command","SelectionService","definePluginCreator","bindContributionProvider"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { inject, injectable, named, optional, postConstruct } from 'inversify';\nimport { Command, CommandRegistry, ContributionProvider } from '@flowgram-vue/core';\n\nexport interface ShortcutsHandler {\n  commandId: string;\n  commandDetail?: Omit<Command, 'id'>;\n  shortcuts: string[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  isEnabled?: (...args: any[]) => boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  execute: (...args: any[]) => void;\n}\n\nexport const ShortcutsContribution = Symbol('ShortcutsContribution');\n\nexport interface ShortcutsContribution {\n  registerShortcuts: (registry: ShortcutsRegistry) => void;\n}\n\n@injectable()\nexport class ShortcutsRegistry {\n  @inject(ContributionProvider)\n  @named(ShortcutsContribution)\n  @optional()\n  protected contribs: ContributionProvider<ShortcutsContribution>;\n\n  @inject(CommandRegistry) protected commandRegistry: CommandRegistry;\n\n  shortcutsHandlers: ShortcutsHandler[] = [];\n\n  addHandlers(...handlers: ShortcutsHandler[]): void {\n    // 注册 command\n    handlers.forEach((handler) => {\n      if (!this.commandRegistry.getCommand(handler.commandId)) {\n        this.commandRegistry.registerCommand(\n          { id: handler.commandId, ...(handler.commandDetail || {}) },\n          { execute: handler.execute, isEnabled: handler.isEnabled }\n        );\n      } else {\n        this.commandRegistry.registerHandler(handler.commandId, {\n          execute: handler.execute,\n          isEnabled: handler.isEnabled,\n        });\n      }\n    });\n    // Insert before for override pre handlers\n    this.shortcutsHandlers.unshift(...handlers);\n  }\n\n  addHandlersIfNotFound(...handlers: ShortcutsHandler[]): void {\n    handlers.forEach((handler) => {\n      if (!this.has(handler.commandId)) {\n        this.addHandlers(handler);\n      }\n    });\n  }\n\n  removeHandler(commandId: string): void {\n    this.shortcutsHandlers = this.shortcutsHandlers.filter(\n      (handler) => handler.commandId !== commandId\n    );\n  }\n\n  has(commandId: string): boolean {\n    return this.shortcutsHandlers.some((handler) => handler.commandId === commandId);\n  }\n\n  @postConstruct()\n  protected init(): void {\n    this.contribs?.forEach((contrib) => contrib.registerShortcuts(this));\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nconst isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(\n  typeof navigator !== 'undefined' ? navigator?.platform : '',\n);\n// 键盘事件 keyCode 别名\nconst aliasKeyCodeMap: Record<string, number | number[]> = {\n  '0': 48,\n  '1': 49,\n  '2': 50,\n  '3': 51,\n  '4': 52,\n  '5': 53,\n  '6': 54,\n  '7': 55,\n  '8': 56,\n  '9': 57,\n  backspace: 8,\n  tab: 9,\n  enter: 13,\n  shift: 16,\n  ctrl: 17,\n  alt: 18,\n  pausebreak: 19,\n  capslock: 20,\n  esc: 27,\n  space: 32,\n  pageup: 33,\n  pagedown: 34,\n  end: 35,\n  home: 36,\n  leftarrow: 37,\n  uparrow: 38,\n  rightarrow: 39,\n  downarrow: 40,\n  insert: 45,\n  delete: 46,\n  a: 65,\n  b: 66,\n  c: 67,\n  d: 68,\n  e: 69,\n  f: 70,\n  g: 71,\n  h: 72,\n  i: 73,\n  j: 74,\n  k: 75,\n  l: 76,\n  m: 77,\n  n: 78,\n  o: 79,\n  p: 80,\n  q: 81,\n  r: 82,\n  s: 83,\n  t: 84,\n  u: 85,\n  v: 86,\n  w: 87,\n  x: 88,\n  y: 89,\n  z: 90,\n  leftwindowkey: 91,\n  rightwindowkey: 92,\n  meta: isAppleDevice ? [91, 93] : [91, 92],\n  selectkey: 93,\n  numpad0: 96,\n  numpad1: 97,\n  numpad2: 98,\n  numpad3: 99,\n  numpad4: 100,\n  numpad5: 101,\n  numpad6: 102,\n  numpad7: 103,\n  numpad8: 104,\n  numpad9: 105,\n  multiply: 106,\n  add: 107,\n  subtract: 109,\n  decimalpoint: 110,\n  divide: 111,\n  f1: 112,\n  f2: 113,\n  f3: 114,\n  f4: 115,\n  f5: 116,\n  f6: 117,\n  f7: 118,\n  f8: 119,\n  f9: 120,\n  f10: 121,\n  f11: 122,\n  f12: 123,\n  numlock: 144,\n  scrolllock: 145,\n  semicolon: 186,\n  equalsign: 187,\n  '=': 187,\n  comma: 188,\n  dash: 189,\n  '-': 189,\n  period: 190,\n  forwardslash: 191,\n  graveaccent: 192,\n  openbracket: 219,\n  backslash: 220,\n  closebracket: 221,\n  singlequote: 222,\n};\n\nconst modifierKey: any = {\n  ctrl: (event: KeyboardEvent) => event.ctrlKey,\n  shift: (event: KeyboardEvent) => event.shiftKey,\n  alt: (event: KeyboardEvent) => event.altKey,\n  meta: (event: KeyboardEvent) => {\n    if (event.type === 'keyup') {\n      return (aliasKeyCodeMap.meta as number[]).includes(event.keyCode);\n    }\n    return event.metaKey;\n  },\n};\n\n// 根据 event 计算激活键数量\nfunction countKeyByEvent(event: KeyboardEvent): number {\n  const countOfModifier = Object.keys(modifierKey).reduce((total, key) => {\n    if (modifierKey[key](event)) {\n      return total + 1;\n    }\n\n    return total;\n  }, 0);\n\n  // 16 17 18 91 92 是修饰键的 keyCode，如果 keyCode 是修饰键，那么激活数量就是修饰键的数量，如果不是，那么就需要 +1\n  return [16, 17, 18, 91, 92].includes(event.keyCode) ? countOfModifier : countOfModifier + 1;\n}\n\n/**\n *\n * @param event\n * @param keyString 'ctrl.s' 'meta.s'\n * @param exactMatch\n */\nfunction isKeyStringMatch(event: KeyboardEvent, keyString: string, exactMatch = true): boolean {\n  // 浏览器自动补全 input 的时候，会触发 keyDown、keyUp 事件，但此时 event.key 等为空\n  if (!event.key || !keyString) {\n    return false;\n  }\n  // 字符串依次判断是否有组合键\n  const genArr = keyString.split(/\\s+/);\n  let genLen = 0;\n\n  for (const key of genArr) {\n    // 组合键\n    const genModifier = modifierKey[key];\n    // keyCode 别名\n    const aliasKeyCode: number | number[] = aliasKeyCodeMap[key.toLowerCase()];\n\n    if ((genModifier && genModifier(event)) || (aliasKeyCode && aliasKeyCode === event.keyCode)) {\n      genLen++;\n    }\n  }\n\n  /**\n   * 需要判断触发的键位和监听的键位完全一致，判断方法就是触发的键位里有且等于监听的键位\n   * genLen === genArr.length 能判断出来触发的键位里有监听的键位\n   * countKeyByEvent(event) === genArr.length 判断出来触发的键位数量里有且等于监听的键位数量\n   * 主要用来防止按组合键其子集也会触发的情况，例如监听 ctrl+a 会触发监听 ctrl 和 a 两个键的事件。\n   */\n  if (exactMatch) {\n    return genLen === genArr.length && countKeyByEvent(event) === genArr.length;\n  }\n  return genLen === genArr.length;\n}\n\n/**\n * 匹配指定的快捷键\n * @param event\n * @param shortcuts\n */\nexport function isShortcutsMatch(event: KeyboardEvent, shortcuts: string[]): boolean {\n  return shortcuts.some(keyString => isKeyStringMatch(event, keyString));\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { inject, injectable } from 'inversify';\nimport { Layer, SelectionService, Command } from '@flowgram-vue/core';\n\nimport { isShortcutsMatch } from '../shortcuts-utils';\nimport { ShortcutsRegistry } from '../shortcuts-contribution';\n\n@injectable()\nexport class ShortcutsLayer extends Layer<object> {\n  static type = 'ShortcutsLayer';\n\n  @inject(ShortcutsRegistry) shortcuts: ShortcutsRegistry;\n\n  @inject(SelectionService) selection: SelectionService;\n\n  onReady(): void {\n    this.shortcuts.addHandlersIfNotFound(\n      /**\n       * 放大\n       */\n      {\n        commandId: Command.Default.ZOOM_IN,\n        shortcuts: ['meta =', 'ctrl ='],\n        execute: () => {\n          // TODO 这里要判断 CurrentEditor\n          this.config.zoomin();\n        },\n      },\n      /**\n       * 缩小\n       */\n      {\n        commandId: Command.Default.ZOOM_OUT,\n        shortcuts: ['meta -', 'ctrl -'],\n        execute: () => {\n          // TODO 这里要判断 CurrentEditor\n          this.config.zoomout();\n        },\n      },\n    );\n    this.toDispose.pushAll([\n      // 监听画布鼠标移动事件\n      this.listenPlaygroundEvent('keydown', (e: KeyboardEvent) => {\n        if (!this.isFocused || e.target !== this.playgroundNode) {\n          return;\n        }\n        this.shortcuts.shortcutsHandlers.some(shortcutsHandler => {\n          if (\n            isShortcutsMatch(e, shortcutsHandler.shortcuts) &&\n            (!shortcutsHandler.isEnabled || shortcutsHandler.isEnabled(e))\n          ) {\n            shortcutsHandler.execute(e);\n            e.preventDefault();\n            return true;\n          }\n        });\n      }),\n    ]);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { bindContributionProvider, definePluginCreator } from '@flowgram-vue/core';\n\nimport { ShortcutsRegistry, ShortcutsContribution } from './shortcuts-contribution';\nimport { ShortcutsLayer } from './layers';\n\n/**\n * @param opts\n *\n * createShortcutsPlugin({\n *   registerShortcuts(registry) {\n *   }\n * })\n */\nexport const createShortcutsPlugin = definePluginCreator<ShortcutsContribution>({\n  onBind: ({ bind }) => {\n    bind(ShortcutsRegistry).toSelf().inSingletonScope();\n    bindContributionProvider(bind, ShortcutsContribution);\n  },\n  onInit: (ctx) => {\n    ctx.playground.registerLayer(ShortcutsLayer);\n  },\n  contributionKeys: [ShortcutsContribution],\n});\n"]}

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+import * as _flowgram_vue_core from '@flowgram-vue/core';
+import { ContributionProvider, CommandRegistry, Command } from '@flowgram-vue/core';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface ShortcutsHandler {
+    commandId: string;
+    commandDetail?: Omit<Command, 'id'>;
+    shortcuts: string[];
+    isEnabled?: (...args: any[]) => boolean;
+    execute: (...args: any[]) => void;
+}
+declare const ShortcutsContribution: unique symbol;
+interface ShortcutsContribution {
+    registerShortcuts: (registry: ShortcutsRegistry) => void;
+}
+declare class ShortcutsRegistry {
+    protected contribs: ContributionProvider<ShortcutsContribution>;
+    protected commandRegistry: CommandRegistry;
+    shortcutsHandlers: ShortcutsHandler[];
+    addHandlers(...handlers: ShortcutsHandler[]): void;
+    addHandlersIfNotFound(...handlers: ShortcutsHandler[]): void;
+    removeHandler(commandId: string): void;
+    has(commandId: string): boolean;
+    protected init(): void;
+}
+
+/**
+ * @param opts
+ *
+ * createShortcutsPlugin({
+ *   registerShortcuts(registry) {
+ *   }
+ * })
+ */
+declare const createShortcutsPlugin: _flowgram_vue_core.PluginCreator<ShortcutsContribution>;
+
+export { ShortcutsContribution, type ShortcutsHandler, ShortcutsRegistry, createShortcutsPlugin };

package/dist/index.js

@@ -0,0 +1,286 @@
+import { ContributionProvider, CommandRegistry, SelectionService, definePluginCreator, bindContributionProvider, Layer, Command } from '@flowgram-vue/core';
+import { inject, named, optional, postConstruct, injectable } from 'inversify';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ShortcutsContribution = /* @__PURE__ */ Symbol("ShortcutsContribution");
+var ShortcutsRegistry = class {
+  constructor() {
+    this.shortcutsHandlers = [];
+  }
+  addHandlers(...handlers) {
+    handlers.forEach((handler) => {
+      if (!this.commandRegistry.getCommand(handler.commandId)) {
+        this.commandRegistry.registerCommand(
+          { id: handler.commandId, ...handler.commandDetail || {} },
+          { execute: handler.execute, isEnabled: handler.isEnabled }
+        );
+      } else {
+        this.commandRegistry.registerHandler(handler.commandId, {
+          execute: handler.execute,
+          isEnabled: handler.isEnabled
+        });
+      }
+    });
+    this.shortcutsHandlers.unshift(...handlers);
+  }
+  addHandlersIfNotFound(...handlers) {
+    handlers.forEach((handler) => {
+      if (!this.has(handler.commandId)) {
+        this.addHandlers(handler);
+      }
+    });
+  }
+  removeHandler(commandId) {
+    this.shortcutsHandlers = this.shortcutsHandlers.filter(
+      (handler) => handler.commandId !== commandId
+    );
+  }
+  has(commandId) {
+    return this.shortcutsHandlers.some((handler) => handler.commandId === commandId);
+  }
+  init() {
+    this.contribs?.forEach((contrib) => contrib.registerShortcuts(this));
+  }
+};
+__decorateClass([
+  inject(ContributionProvider),
+  named(ShortcutsContribution),
+  optional()
+], ShortcutsRegistry.prototype, "contribs", 2);
+__decorateClass([
+  inject(CommandRegistry)
+], ShortcutsRegistry.prototype, "commandRegistry", 2);
+__decorateClass([
+  postConstruct()
+], ShortcutsRegistry.prototype, "init", 1);
+ShortcutsRegistry = __decorateClass([
+  injectable()
+], ShortcutsRegistry);
+
+// src/shortcuts-utils.ts
+var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(
+  typeof navigator !== "undefined" ? navigator?.platform : ""
+);
+var aliasKeyCodeMap = {
+  "0": 48,
+  "1": 49,
+  "2": 50,
+  "3": 51,
+  "4": 52,
+  "5": 53,
+  "6": 54,
+  "7": 55,
+  "8": 56,
+  "9": 57,
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  pausebreak: 19,
+  capslock: 20,
+  esc: 27,
+  space: 32,
+  pageup: 33,
+  pagedown: 34,
+  end: 35,
+  home: 36,
+  leftarrow: 37,
+  uparrow: 38,
+  rightarrow: 39,
+  downarrow: 40,
+  insert: 45,
+  delete: 46,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  leftwindowkey: 91,
+  rightwindowkey: 92,
+  meta: isAppleDevice ? [91, 93] : [91, 92],
+  selectkey: 93,
+  numpad0: 96,
+  numpad1: 97,
+  numpad2: 98,
+  numpad3: 99,
+  numpad4: 100,
+  numpad5: 101,
+  numpad6: 102,
+  numpad7: 103,
+  numpad8: 104,
+  numpad9: 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  decimalpoint: 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f11: 122,
+  f12: 123,
+  numlock: 144,
+  scrolllock: 145,
+  semicolon: 186,
+  equalsign: 187,
+  "=": 187,
+  comma: 188,
+  dash: 189,
+  "-": 189,
+  period: 190,
+  forwardslash: 191,
+  graveaccent: 192,
+  openbracket: 219,
+  backslash: 220,
+  closebracket: 221,
+  singlequote: 222
+};
+var modifierKey = {
+  ctrl: (event) => event.ctrlKey,
+  shift: (event) => event.shiftKey,
+  alt: (event) => event.altKey,
+  meta: (event) => {
+    if (event.type === "keyup") {
+      return aliasKeyCodeMap.meta.includes(event.keyCode);
+    }
+    return event.metaKey;
+  }
+};
+function countKeyByEvent(event) {
+  const countOfModifier = Object.keys(modifierKey).reduce((total, key) => {
+    if (modifierKey[key](event)) {
+      return total + 1;
+    }
+    return total;
+  }, 0);
+  return [16, 17, 18, 91, 92].includes(event.keyCode) ? countOfModifier : countOfModifier + 1;
+}
+function isKeyStringMatch(event, keyString, exactMatch = true) {
+  if (!event.key || !keyString) {
+    return false;
+  }
+  const genArr = keyString.split(/\s+/);
+  let genLen = 0;
+  for (const key of genArr) {
+    const genModifier = modifierKey[key];
+    const aliasKeyCode = aliasKeyCodeMap[key.toLowerCase()];
+    if (genModifier && genModifier(event) || aliasKeyCode && aliasKeyCode === event.keyCode) {
+      genLen++;
+    }
+  }
+  if (exactMatch) {
+    return genLen === genArr.length && countKeyByEvent(event) === genArr.length;
+  }
+  return genLen === genArr.length;
+}
+function isShortcutsMatch(event, shortcuts) {
+  return shortcuts.some((keyString) => isKeyStringMatch(event, keyString));
+}
+
+// src/layers/shortcuts-layer.ts
+var ShortcutsLayer = class extends Layer {
+  onReady() {
+    this.shortcuts.addHandlersIfNotFound(
+      /**
+       * 放大
+       */
+      {
+        commandId: Command.Default.ZOOM_IN,
+        shortcuts: ["meta =", "ctrl ="],
+        execute: () => {
+          this.config.zoomin();
+        }
+      },
+      /**
+       * 缩小
+       */
+      {
+        commandId: Command.Default.ZOOM_OUT,
+        shortcuts: ["meta -", "ctrl -"],
+        execute: () => {
+          this.config.zoomout();
+        }
+      }
+    );
+    this.toDispose.pushAll([
+      // 监听画布鼠标移动事件
+      this.listenPlaygroundEvent("keydown", (e) => {
+        if (!this.isFocused || e.target !== this.playgroundNode) {
+          return;
+        }
+        this.shortcuts.shortcutsHandlers.some((shortcutsHandler) => {
+          if (isShortcutsMatch(e, shortcutsHandler.shortcuts) && (!shortcutsHandler.isEnabled || shortcutsHandler.isEnabled(e))) {
+            shortcutsHandler.execute(e);
+            e.preventDefault();
+            return true;
+          }
+        });
+      })
+    ]);
+  }
+};
+ShortcutsLayer.type = "ShortcutsLayer";
+__decorateClass([
+  inject(ShortcutsRegistry)
+], ShortcutsLayer.prototype, "shortcuts", 2);
+__decorateClass([
+  inject(SelectionService)
+], ShortcutsLayer.prototype, "selection", 2);
+ShortcutsLayer = __decorateClass([
+  injectable()
+], ShortcutsLayer);
+
+// src/create-shortcuts-plugin.ts
+var createShortcutsPlugin = definePluginCreator({
+  onBind: ({ bind }) => {
+    bind(ShortcutsRegistry).toSelf().inSingletonScope();
+    bindContributionProvider(bind, ShortcutsContribution);
+  },
+  onInit: (ctx) => {
+    ctx.playground.registerLayer(ShortcutsLayer);
+  },
+  contributionKeys: [ShortcutsContribution]
+});
+
+export { ShortcutsContribution, ShortcutsRegistry, createShortcutsPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shortcuts-contribution.ts","../src/shortcuts-utils.ts","../src/layers/shortcuts-layer.ts","../src/create-shortcuts-plugin.ts"],"names":["Command","inject","injectable"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { inject, injectable, named, optional, postConstruct } from 'inversify';\nimport { Command, CommandRegistry, ContributionProvider } from '@flowgram-vue/core';\n\nexport interface ShortcutsHandler {\n  commandId: string;\n  commandDetail?: Omit<Command, 'id'>;\n  shortcuts: string[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  isEnabled?: (...args: any[]) => boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  execute: (...args: any[]) => void;\n}\n\nexport const ShortcutsContribution = Symbol('ShortcutsContribution');\n\nexport interface ShortcutsContribution {\n  registerShortcuts: (registry: ShortcutsRegistry) => void;\n}\n\n@injectable()\nexport class ShortcutsRegistry {\n  @inject(ContributionProvider)\n  @named(ShortcutsContribution)\n  @optional()\n  protected contribs: ContributionProvider<ShortcutsContribution>;\n\n  @inject(CommandRegistry) protected commandRegistry: CommandRegistry;\n\n  shortcutsHandlers: ShortcutsHandler[] = [];\n\n  addHandlers(...handlers: ShortcutsHandler[]): void {\n    // 注册 command\n    handlers.forEach((handler) => {\n      if (!this.commandRegistry.getCommand(handler.commandId)) {\n        this.commandRegistry.registerCommand(\n          { id: handler.commandId, ...(handler.commandDetail || {}) },\n          { execute: handler.execute, isEnabled: handler.isEnabled }\n        );\n      } else {\n        this.commandRegistry.registerHandler(handler.commandId, {\n          execute: handler.execute,\n          isEnabled: handler.isEnabled,\n        });\n      }\n    });\n    // Insert before for override pre handlers\n    this.shortcutsHandlers.unshift(...handlers);\n  }\n\n  addHandlersIfNotFound(...handlers: ShortcutsHandler[]): void {\n    handlers.forEach((handler) => {\n      if (!this.has(handler.commandId)) {\n        this.addHandlers(handler);\n      }\n    });\n  }\n\n  removeHandler(commandId: string): void {\n    this.shortcutsHandlers = this.shortcutsHandlers.filter(\n      (handler) => handler.commandId !== commandId\n    );\n  }\n\n  has(commandId: string): boolean {\n    return this.shortcutsHandlers.some((handler) => handler.commandId === commandId);\n  }\n\n  @postConstruct()\n  protected init(): void {\n    this.contribs?.forEach((contrib) => contrib.registerShortcuts(this));\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nconst isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(\n  typeof navigator !== 'undefined' ? navigator?.platform : '',\n);\n// 键盘事件 keyCode 别名\nconst aliasKeyCodeMap: Record<string, number | number[]> = {\n  '0': 48,\n  '1': 49,\n  '2': 50,\n  '3': 51,\n  '4': 52,\n  '5': 53,\n  '6': 54,\n  '7': 55,\n  '8': 56,\n  '9': 57,\n  backspace: 8,\n  tab: 9,\n  enter: 13,\n  shift: 16,\n  ctrl: 17,\n  alt: 18,\n  pausebreak: 19,\n  capslock: 20,\n  esc: 27,\n  space: 32,\n  pageup: 33,\n  pagedown: 34,\n  end: 35,\n  home: 36,\n  leftarrow: 37,\n  uparrow: 38,\n  rightarrow: 39,\n  downarrow: 40,\n  insert: 45,\n  delete: 46,\n  a: 65,\n  b: 66,\n  c: 67,\n  d: 68,\n  e: 69,\n  f: 70,\n  g: 71,\n  h: 72,\n  i: 73,\n  j: 74,\n  k: 75,\n  l: 76,\n  m: 77,\n  n: 78,\n  o: 79,\n  p: 80,\n  q: 81,\n  r: 82,\n  s: 83,\n  t: 84,\n  u: 85,\n  v: 86,\n  w: 87,\n  x: 88,\n  y: 89,\n  z: 90,\n  leftwindowkey: 91,\n  rightwindowkey: 92,\n  meta: isAppleDevice ? [91, 93] : [91, 92],\n  selectkey: 93,\n  numpad0: 96,\n  numpad1: 97,\n  numpad2: 98,\n  numpad3: 99,\n  numpad4: 100,\n  numpad5: 101,\n  numpad6: 102,\n  numpad7: 103,\n  numpad8: 104,\n  numpad9: 105,\n  multiply: 106,\n  add: 107,\n  subtract: 109,\n  decimalpoint: 110,\n  divide: 111,\n  f1: 112,\n  f2: 113,\n  f3: 114,\n  f4: 115,\n  f5: 116,\n  f6: 117,\n  f7: 118,\n  f8: 119,\n  f9: 120,\n  f10: 121,\n  f11: 122,\n  f12: 123,\n  numlock: 144,\n  scrolllock: 145,\n  semicolon: 186,\n  equalsign: 187,\n  '=': 187,\n  comma: 188,\n  dash: 189,\n  '-': 189,\n  period: 190,\n  forwardslash: 191,\n  graveaccent: 192,\n  openbracket: 219,\n  backslash: 220,\n  closebracket: 221,\n  singlequote: 222,\n};\n\nconst modifierKey: any = {\n  ctrl: (event: KeyboardEvent) => event.ctrlKey,\n  shift: (event: KeyboardEvent) => event.shiftKey,\n  alt: (event: KeyboardEvent) => event.altKey,\n  meta: (event: KeyboardEvent) => {\n    if (event.type === 'keyup') {\n      return (aliasKeyCodeMap.meta as number[]).includes(event.keyCode);\n    }\n    return event.metaKey;\n  },\n};\n\n// 根据 event 计算激活键数量\nfunction countKeyByEvent(event: KeyboardEvent): number {\n  const countOfModifier = Object.keys(modifierKey).reduce((total, key) => {\n    if (modifierKey[key](event)) {\n      return total + 1;\n    }\n\n    return total;\n  }, 0);\n\n  // 16 17 18 91 92 是修饰键的 keyCode，如果 keyCode 是修饰键，那么激活数量就是修饰键的数量，如果不是，那么就需要 +1\n  return [16, 17, 18, 91, 92].includes(event.keyCode) ? countOfModifier : countOfModifier + 1;\n}\n\n/**\n *\n * @param event\n * @param keyString 'ctrl.s' 'meta.s'\n * @param exactMatch\n */\nfunction isKeyStringMatch(event: KeyboardEvent, keyString: string, exactMatch = true): boolean {\n  // 浏览器自动补全 input 的时候，会触发 keyDown、keyUp 事件，但此时 event.key 等为空\n  if (!event.key || !keyString) {\n    return false;\n  }\n  // 字符串依次判断是否有组合键\n  const genArr = keyString.split(/\\s+/);\n  let genLen = 0;\n\n  for (const key of genArr) {\n    // 组合键\n    const genModifier = modifierKey[key];\n    // keyCode 别名\n    const aliasKeyCode: number | number[] = aliasKeyCodeMap[key.toLowerCase()];\n\n    if ((genModifier && genModifier(event)) || (aliasKeyCode && aliasKeyCode === event.keyCode)) {\n      genLen++;\n    }\n  }\n\n  /**\n   * 需要判断触发的键位和监听的键位完全一致，判断方法就是触发的键位里有且等于监听的键位\n   * genLen === genArr.length 能判断出来触发的键位里有监听的键位\n   * countKeyByEvent(event) === genArr.length 判断出来触发的键位数量里有且等于监听的键位数量\n   * 主要用来防止按组合键其子集也会触发的情况，例如监听 ctrl+a 会触发监听 ctrl 和 a 两个键的事件。\n   */\n  if (exactMatch) {\n    return genLen === genArr.length && countKeyByEvent(event) === genArr.length;\n  }\n  return genLen === genArr.length;\n}\n\n/**\n * 匹配指定的快捷键\n * @param event\n * @param shortcuts\n */\nexport function isShortcutsMatch(event: KeyboardEvent, shortcuts: string[]): boolean {\n  return shortcuts.some(keyString => isKeyStringMatch(event, keyString));\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { inject, injectable } from 'inversify';\nimport { Layer, SelectionService, Command } from '@flowgram-vue/core';\n\nimport { isShortcutsMatch } from '../shortcuts-utils';\nimport { ShortcutsRegistry } from '../shortcuts-contribution';\n\n@injectable()\nexport class ShortcutsLayer extends Layer<object> {\n  static type = 'ShortcutsLayer';\n\n  @inject(ShortcutsRegistry) shortcuts: ShortcutsRegistry;\n\n  @inject(SelectionService) selection: SelectionService;\n\n  onReady(): void {\n    this.shortcuts.addHandlersIfNotFound(\n      /**\n       * 放大\n       */\n      {\n        commandId: Command.Default.ZOOM_IN,\n        shortcuts: ['meta =', 'ctrl ='],\n        execute: () => {\n          // TODO 这里要判断 CurrentEditor\n          this.config.zoomin();\n        },\n      },\n      /**\n       * 缩小\n       */\n      {\n        commandId: Command.Default.ZOOM_OUT,\n        shortcuts: ['meta -', 'ctrl -'],\n        execute: () => {\n          // TODO 这里要判断 CurrentEditor\n          this.config.zoomout();\n        },\n      },\n    );\n    this.toDispose.pushAll([\n      // 监听画布鼠标移动事件\n      this.listenPlaygroundEvent('keydown', (e: KeyboardEvent) => {\n        if (!this.isFocused || e.target !== this.playgroundNode) {\n          return;\n        }\n        this.shortcuts.shortcutsHandlers.some(shortcutsHandler => {\n          if (\n            isShortcutsMatch(e, shortcutsHandler.shortcuts) &&\n            (!shortcutsHandler.isEnabled || shortcutsHandler.isEnabled(e))\n          ) {\n            shortcutsHandler.execute(e);\n            e.preventDefault();\n            return true;\n          }\n        });\n      }),\n    ]);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { bindContributionProvider, definePluginCreator } from '@flowgram-vue/core';\n\nimport { ShortcutsRegistry, ShortcutsContribution } from './shortcuts-contribution';\nimport { ShortcutsLayer } from './layers';\n\n/**\n * @param opts\n *\n * createShortcutsPlugin({\n *   registerShortcuts(registry) {\n *   }\n * })\n */\nexport const createShortcutsPlugin = definePluginCreator<ShortcutsContribution>({\n  onBind: ({ bind }) => {\n    bind(ShortcutsRegistry).toSelf().inSingletonScope();\n    bindContributionProvider(bind, ShortcutsContribution);\n  },\n  onInit: (ctx) => {\n    ctx.playground.registerLayer(ShortcutsLayer);\n  },\n  contributionKeys: [ShortcutsContribution],\n});\n"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@flowgram-vue/shortcuts-plugin",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram-vue/core": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/ts-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0",
+    "@flowgram-vue/build-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "exit 0",
+    "test:cov": "exit 0",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/create-shortcuts-plugin.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { bindContributionProvider, definePluginCreator } from '@flowgram-vue/core';
+
+import { ShortcutsRegistry, ShortcutsContribution } from './shortcuts-contribution';
+import { ShortcutsLayer } from './layers';
+
+/**
+ * @param opts
+ *
+ * createShortcutsPlugin({
+ *   registerShortcuts(registry) {
+ *   }
+ * })
+ */
+export const createShortcutsPlugin = definePluginCreator<ShortcutsContribution>({
+  onBind: ({ bind }) => {
+    bind(ShortcutsRegistry).toSelf().inSingletonScope();
+    bindContributionProvider(bind, ShortcutsContribution);
+  },
+  onInit: (ctx) => {
+    ctx.playground.registerLayer(ShortcutsLayer);
+  },
+  contributionKeys: [ShortcutsContribution],
+});

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './create-shortcuts-plugin';
+export * from './shortcuts-contribution';

package/src/layers/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './shortcuts-layer';

package/src/layers/shortcuts-layer.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { Layer, SelectionService, Command } from '@flowgram-vue/core';
+
+import { isShortcutsMatch } from '../shortcuts-utils';
+import { ShortcutsRegistry } from '../shortcuts-contribution';
+
+@injectable()
+export class ShortcutsLayer extends Layer<object> {
+  static type = 'ShortcutsLayer';
+
+  @inject(ShortcutsRegistry) shortcuts: ShortcutsRegistry;
+
+  @inject(SelectionService) selection: SelectionService;
+
+  onReady(): void {
+    this.shortcuts.addHandlersIfNotFound(
+      /**
+       * 放大
+       */
+      {
+        commandId: Command.Default.ZOOM_IN,
+        shortcuts: ['meta =', 'ctrl ='],
+        execute: () => {
+          // TODO 这里要判断 CurrentEditor
+          this.config.zoomin();
+        },
+      },
+      /**
+       * 缩小
+       */
+      {
+        commandId: Command.Default.ZOOM_OUT,
+        shortcuts: ['meta -', 'ctrl -'],
+        execute: () => {
+          // TODO 这里要判断 CurrentEditor
+          this.config.zoomout();
+        },
+      },
+    );
+    this.toDispose.pushAll([
+      // 监听画布鼠标移动事件
+      this.listenPlaygroundEvent('keydown', (e: KeyboardEvent) => {
+        if (!this.isFocused || e.target !== this.playgroundNode) {
+          return;
+        }
+        this.shortcuts.shortcutsHandlers.some(shortcutsHandler => {
+          if (
+            isShortcutsMatch(e, shortcutsHandler.shortcuts) &&
+            (!shortcutsHandler.isEnabled || shortcutsHandler.isEnabled(e))
+          ) {
+            shortcutsHandler.execute(e);
+            e.preventDefault();
+            return true;
+          }
+        });
+      }),
+    ]);
+  }
+}

package/src/shortcuts-contribution.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable, named, optional, postConstruct } from 'inversify';
+import { Command, CommandRegistry, ContributionProvider } from '@flowgram-vue/core';
+
+export interface ShortcutsHandler {
+  commandId: string;
+  commandDetail?: Omit<Command, 'id'>;
+  shortcuts: string[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  isEnabled?: (...args: any[]) => boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  execute: (...args: any[]) => void;
+}
+
+export const ShortcutsContribution = Symbol('ShortcutsContribution');
+
+export interface ShortcutsContribution {
+  registerShortcuts: (registry: ShortcutsRegistry) => void;
+}
+
+@injectable()
+export class ShortcutsRegistry {
+  @inject(ContributionProvider)
+  @named(ShortcutsContribution)
+  @optional()
+  protected contribs: ContributionProvider<ShortcutsContribution>;
+
+  @inject(CommandRegistry) protected commandRegistry: CommandRegistry;
+
+  shortcutsHandlers: ShortcutsHandler[] = [];
+
+  addHandlers(...handlers: ShortcutsHandler[]): void {
+    // 注册 command
+    handlers.forEach((handler) => {
+      if (!this.commandRegistry.getCommand(handler.commandId)) {
+        this.commandRegistry.registerCommand(
+          { id: handler.commandId, ...(handler.commandDetail || {}) },
+          { execute: handler.execute, isEnabled: handler.isEnabled }
+        );
+      } else {
+        this.commandRegistry.registerHandler(handler.commandId, {
+          execute: handler.execute,
+          isEnabled: handler.isEnabled,
+        });
+      }
+    });
+    // Insert before for override pre handlers
+    this.shortcutsHandlers.unshift(...handlers);
+  }
+
+  addHandlersIfNotFound(...handlers: ShortcutsHandler[]): void {
+    handlers.forEach((handler) => {
+      if (!this.has(handler.commandId)) {
+        this.addHandlers(handler);
+      }
+    });
+  }
+
+  removeHandler(commandId: string): void {
+    this.shortcutsHandlers = this.shortcutsHandlers.filter(
+      (handler) => handler.commandId !== commandId
+    );
+  }
+
+  has(commandId: string): boolean {
+    return this.shortcutsHandlers.some((handler) => handler.commandId === commandId);
+  }
+
+  @postConstruct()
+  protected init(): void {
+    this.contribs?.forEach((contrib) => contrib.registerShortcuts(this));
+  }
+}

package/src/shortcuts-utils.ts

@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+const isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(
+  typeof navigator !== 'undefined' ? navigator?.platform : '',
+);
+// 键盘事件 keyCode 别名
+const aliasKeyCodeMap: Record<string, number | number[]> = {
+  '0': 48,
+  '1': 49,
+  '2': 50,
+  '3': 51,
+  '4': 52,
+  '5': 53,
+  '6': 54,
+  '7': 55,
+  '8': 56,
+  '9': 57,
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  pausebreak: 19,
+  capslock: 20,
+  esc: 27,
+  space: 32,
+  pageup: 33,
+  pagedown: 34,
+  end: 35,
+  home: 36,
+  leftarrow: 37,
+  uparrow: 38,
+  rightarrow: 39,
+  downarrow: 40,
+  insert: 45,
+  delete: 46,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  leftwindowkey: 91,
+  rightwindowkey: 92,
+  meta: isAppleDevice ? [91, 93] : [91, 92],
+  selectkey: 93,
+  numpad0: 96,
+  numpad1: 97,
+  numpad2: 98,
+  numpad3: 99,
+  numpad4: 100,
+  numpad5: 101,
+  numpad6: 102,
+  numpad7: 103,
+  numpad8: 104,
+  numpad9: 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  decimalpoint: 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f11: 122,
+  f12: 123,
+  numlock: 144,
+  scrolllock: 145,
+  semicolon: 186,
+  equalsign: 187,
+  '=': 187,
+  comma: 188,
+  dash: 189,
+  '-': 189,
+  period: 190,
+  forwardslash: 191,
+  graveaccent: 192,
+  openbracket: 219,
+  backslash: 220,
+  closebracket: 221,
+  singlequote: 222,
+};
+
+const modifierKey: any = {
+  ctrl: (event: KeyboardEvent) => event.ctrlKey,
+  shift: (event: KeyboardEvent) => event.shiftKey,
+  alt: (event: KeyboardEvent) => event.altKey,
+  meta: (event: KeyboardEvent) => {
+    if (event.type === 'keyup') {
+      return (aliasKeyCodeMap.meta as number[]).includes(event.keyCode);
+    }
+    return event.metaKey;
+  },
+};
+
+// 根据 event 计算激活键数量
+function countKeyByEvent(event: KeyboardEvent): number {
+  const countOfModifier = Object.keys(modifierKey).reduce((total, key) => {
+    if (modifierKey[key](event)) {
+      return total + 1;
+    }
+
+    return total;
+  }, 0);
+
+  // 16 17 18 91 92 是修饰键的 keyCode，如果 keyCode 是修饰键，那么激活数量就是修饰键的数量，如果不是，那么就需要 +1
+  return [16, 17, 18, 91, 92].includes(event.keyCode) ? countOfModifier : countOfModifier + 1;
+}
+
+/**
+ *
+ * @param event
+ * @param keyString 'ctrl.s' 'meta.s'
+ * @param exactMatch
+ */
+function isKeyStringMatch(event: KeyboardEvent, keyString: string, exactMatch = true): boolean {
+  // 浏览器自动补全 input 的时候，会触发 keyDown、keyUp 事件，但此时 event.key 等为空
+  if (!event.key || !keyString) {
+    return false;
+  }
+  // 字符串依次判断是否有组合键
+  const genArr = keyString.split(/\s+/);
+  let genLen = 0;
+
+  for (const key of genArr) {
+    // 组合键
+    const genModifier = modifierKey[key];
+    // keyCode 别名
+    const aliasKeyCode: number | number[] = aliasKeyCodeMap[key.toLowerCase()];
+
+    if ((genModifier && genModifier(event)) || (aliasKeyCode && aliasKeyCode === event.keyCode)) {
+      genLen++;
+    }
+  }
+
+  /**
+   * 需要判断触发的键位和监听的键位完全一致，判断方法就是触发的键位里有且等于监听的键位
+   * genLen === genArr.length 能判断出来触发的键位里有监听的键位
+   * countKeyByEvent(event) === genArr.length 判断出来触发的键位数量里有且等于监听的键位数量
+   * 主要用来防止按组合键其子集也会触发的情况，例如监听 ctrl+a 会触发监听 ctrl 和 a 两个键的事件。
+   */
+  if (exactMatch) {
+    return genLen === genArr.length && countKeyByEvent(event) === genArr.length;
+  }
+  return genLen === genArr.length;
+}
+
+/**
+ * 匹配指定的快捷键
+ * @param event
+ * @param shortcuts
+ */
+export function isShortcutsMatch(event: KeyboardEvent, shortcuts: string[]): boolean {
+  return shortcuts.some(keyString => isKeyStringMatch(event, keyString));
+}