queenshow/src/modules/editor/controllers/HotKeyCtrl/index.ts

import hotkeys from "hotkeys-js";
import { ModuleControl } from "queenjs";
import { EditorModule } from "../..";

type IHotKeyItem = { hotKey: string; action: (this: EditorModule, key:string) => void };

export class HotKeyCtrl extends ModuleControl<EditorModule> {
  // 热键配置
  hotKeys = this.defineHotKeys([
    // 切换到父组件
    {
      hotKey: "ctrl+up",
      action() {
        this.actions.pickParentComp(this.store.currCompId);
      },
    },
    // 删除当前组件
    {
      hotKey: "Backspace,del",
      action(key:string) {
        this.actions.removeComp(this.store.currCompId);
      },
    },

    {
      hotKey: "q,w,a,s,d,e",
      action(key:string) {
        // this.actions.removeComp(this.store.currCompId);
        // console.log("image hot key down", key);
        this.actions.handleImageHotKey(key)
      },
    },

  ]);

  init() {
    const { module, hotKeys } = this;

    hotkeys(
      hotKeys.map((d) => d.hotKey).join(","),
      module.moduleName,
      function (event, handler) {
        event.preventDefault();
        
        const hotAct = hotKeys.find((d) =>
          d.hotKey.split(",").includes(handler.key)
        );
        hotAct?.action.call(module, handler.key);
      }
    );
    hotkeys.setScope(module.moduleName);
  }

  destroy() {
    hotkeys.deleteScope(this.module.moduleName);
  }

  defineHotKeys<T extends IHotKeyItem[]>(hotKeys: T) {
    return hotKeys;
  }
}