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

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

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

export class HotKeyCtrl extends ModuleControl<EditorModule> {
  // 热键配置
  hotKeys = this.defineHotKeys([
    // 取消选中
    {
      hotKey: "esc",
      action() {
        this.controls.editorCtrl.clickPickComp("");
      },
    },
    // 切换到父组件
    {
      hotKey: "ctrl+up",
      action() {
        this.actions.pickParentComp(this.store.currCompId);
      },
    },{
      hotKey: "ctrl+q",
      action() {
        this.actions.ctrlq();
      },
    },
    {
      hotKey: "ctrl+c",
      action() {
        this.actions.ctrlc();
      },
    },{
      hotKey: "ctrl+g",
      action() {
        this.actions.toogleGroup();
      },
    },
    {
      hotKey: "ctrl+v",
      action() {
        this.actions.ctrlv();
      },
    },
    {
      hotKey: "ctrl+x",
      action() {
        this.actions.ctrlx();
      },
    },
    // 删除当前组件
    {
      hotKey: "Backspace,del",
      action() {
        if (this.controls.selectCtrl.gizmo.selected.length > 1) {
          this.actions.removeSelectComps();
          return;
        }
        this.actions.removeComp(this.store.currCompId);
      },
    },
    {
      hotKey: "q,w,a,s,d,e",
      action(key) {
        // this.actions.removeComp(this.store.currCompId);
        // console.log("image hot key down", key);
        this.actions.handleImageHotKey(key);
      },
    },
    // 回退
    {
      hotKey: "ctrl+z",
      action() {
        // if (!this.controls.historyCtrl.state.enable) return;
        // this.controls.historyCtrl.history.undo();
        this.controls.selectCtrl.gizmo.history.undo();
      },
    },
    // 重做
    {
      hotKey: "ctrl+shift+z",
      action() {
        if (!this.controls.historyCtrl.state.enable) return;
        
        this.controls.historyCtrl.history.redo();
      },
    }, //移动
    {
      hotKey: "up,down,left,right",
      action(key) {
        console.log("move key down", key);
        this.actions.handleSelectMoving(key);
      },
    },
  ]);

  init() {
    const { module, hotKeys } = this;
    document.addEventListener('keydown',(event) =>{
      // 判断按下的键是否是 Ctrl 键和 A 键
      if (event.ctrlKey && event.key === 'a') {
        event.preventDefault();
        event.stopPropagation();
        // 文字编辑状态，不做操作
        if(this.controls.textEditorCtrl.state.currEditor) return
        this.actions.ctrlAndA();
      }
    });

    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;
  }
}