vue hotkey mixin

MixinHotKeys.js

export const hotkeys = {
  created() {
    document.addEventListener("keydown", this.doCommand);
  },
  destroyed() {
    document.removeEventListener("keydown", this.doCommand);
  },
  methods: {
    showHeplHandler() {
      this.popupHandler("hotKeyHelper");
    },
    setOpacityHandler(val) {
      if (val.length > 3) val = this.opacity;
      this.setHeaderConfig({ key: "opacity", value: val });
      this.opacityAction(val);
      this.$forceUpdate();
    },
    doCommand(ev) {
      let numberKeys = [
        "Digit1",
        "Digit2",
        "Digit3",
        "Digit4",
        "Digit5",
        "Digit6",
        "Digit7",
        "Digit8",
        "Digit9",
        "Digit0"
      ].includes(ev.code)
        ? ev.code
        : "";
      if (ev.shiftKey && ev.code === "KeyF") {
        this.paper.fitImageToPage();
      } else if (ev.shiftKey && ev.ctrlKey && ev.code === "Enter") {
        this.submitDataImageHandler();
      } else if (ev.shiftKey && ev.altKey && ev.code === "KeyH") {
        this.showLabels = !this.showLabels;
        this.showLabelsHandler(this.showLabels);
      } else if (ev.ctrlKey && ev.code === "KeyQ") {
        this.goNext();
      } else if (ev.code === "Equal") {
        this.setZoomActon(true);
      } else if (ev.code === "Minus") {
        this.setZoomActon(false);
      } else if (ev.code === "Delete") {
        this.paper.ctxRemove(this.getActiveObject.uuid);
      } else if (ev.shiftKey && ev.ctrlKey && ev.code === "KeyD") {
        this.paper.deselect();
      } else if (ev.ctrlKey && ev.code === "BracketRight") {
        this.paper.ctxMoveForward(this.getActiveObject.uuid);
      } else if (ev.ctrlKey && ev.code === "BracketLeft") {
        this.paper.ctxMoveBackward(this.getActiveObject.uuid);
      } else if (ev.ctrlKey && ev.code === "KeyZ") {
        this.paper.back();
      } else if (ev.ctrlKey && ev.shiftKey && ev.code === "KeyZ") {
        this.paper.next();
      } else if (ev.code === "Tab") {
        this.paper.selectNextGroup();
      } else if (ev.shiftKey && ev.code === "Tab") {
        this.paper.selectPreviousGroup();
      } else if (ev.code === "KeyK") {
        this.paper.finishDrawPolygon();
      } else if (ev.code === "KeyC") {
        this.canChangeObjectClassHandler();
      } else if (ev.code === "KeyS") {
        this.submitDataImageHandler({
          autosave: true
        }).then(() => {
          this.popupHandler("savedSucces");
        });
      } else if (ev.code === "F2") {
        this.showHeplHandler();
      } else if (ev.ctrlKey && ev.altKey && ev.code === "Digit0") {
        this.setOpacityHandler(100);
      } else if (ev.altKey && ev.code === numberKeys) {
        console.log(ev.code, numberKeys, ev.key);
        this.setOpacityHandler(Number(ev.key * 10));
      }

      ev.stopPropagation();
      // ev.preventDefault();
    }
  }
}