teachcloud-print-web/card/modules/free/components/ShortcutKey.vue

<template>
  <div class="shortcut-key"></div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { deepCopy, randomCode, getElementId } from "../../../plugins/utils";
import { getModel as getPageModel } from "../../../elements/page/model";

export default {
  name: "shortcut-key",
  data() {
    return {};
  },
  computed: {
    ...mapState("free", [
      "cardConfig",
      "pages",
      "curElement",
      "curPage",
      "curPageNo",
      "curColumnId",
      "curCopyElement",
      "openElementEditDialog",
    ]),
  },
  methods: {
    ...mapMutations("free", ["setCurCopyElement", "setOpenElementEditDialog"]),
    ...mapActions("free", [
      "modifyElement",
      "addPage",
      "removePage",
      "pasteElement",
      "removeElement",
      "moveElementZindex",
    ]),
    keyEvent(e) {
      if (this.openElementEditDialog) return;

      // move
      const moveAction = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
      const isCtrlKey = e.ctrlKey || e.metaKey;
      if (moveAction.includes(e.code)) {
        e.preventDefault();
        // move zindex
        if (isCtrlKey) {
          this.toMoverElementZindex(e.code);
          return;
        }
        const size = e.shiftKey ? 10 : 1;
        this.toMoveElement(e.code, size);
        return;
      }

      if (e.code === "KeyC" && isCtrlKey && !e.repeat) {
        e.preventDefault();
        this.toCopeElement();
        return;
      }
      if (e.code === "KeyV" && isCtrlKey && !e.repeat) {
        e.preventDefault();
        this.toPasteElement();
        return;
      }
      if (e.code === "KeyE" && isCtrlKey && !e.repeat) {
        e.preventDefault();
        this.toEditElement();
        return;
      }
      if (e.code === "KeyP" && isCtrlKey && !e.repeat) {
        e.preventDefault();
        this.$emit("sk-preview");
        return;
      }
      if (e.code === "KeyS" && isCtrlKey && !e.shiftKey && !e.repeat) {
        e.preventDefault();
        this.$emit("sk-save");
        return;
      }
      if (e.code === "KeyS" && isCtrlKey && e.shiftKey && !e.repeat) {
        e.preventDefault();
        this.$emit("sk-submit");
        return;
      }

      if (
        e.code === "Delete" &&
        !isCtrlKey &&
        !e.altKey &&
        !e.shiftKey &&
        !e.repeat
      ) {
        if (!this.curElement.id) return;
        e.preventDefault();
        this.removeElement(this.curElement);
        return;
      }

      // create new page
      // ctrl+n / ctrl+shift+n :无法重置浏览器默认操作
      if (e.code === "KeyN" && isCtrlKey && e.altKey && !e.repeat) {
        e.preventDefault();
        this.toAddPage();
        return;
      }
      // ctrl+alt+delete :无法重置系统默认操作
      if (e.code === "KeyD" && isCtrlKey && e.altKey && !e.repeat) {
        e.preventDefault();
        this.toDeletePage();
        return;
      }
    },
    // actions
    toMoveElement(direction, size) {
      if (!this.curElement.id) return;
      const actionSet = {
        ArrowUp: ["y", -1],
        ArrowDown: ["y", 1],
        ArrowLeft: ["x", -1],
        ArrowRight: ["x", 1],
      };
      const [moveParam, moveDirection] = actionSet[direction];
      const moveData = {
        [moveParam]: this.curElement[moveParam] + moveDirection * size,
        key: randomCode(),
      };
      this.modifyElement(Object.assign({}, this.curElement, moveData));
    },
    toMoverElementZindex(direction) {
      if (!this.curElement.id) return;

      const actionSet = {
        ArrowUp: -1,
        ArrowDown: 1,
      };
      if (!actionSet[direction]) return;
      this.moveElementZindex({
        curElement: this.curElement,
        pos: actionSet[direction],
      });
    },
    toAddPage() {
      const page = getPageModel(this.cardConfig);
      this.addPage(page);
    },
    toDeletePage() {
      if (this.pages.length === 1) {
        this.$message.error("只剩最后一页，不能再删除了");
        return;
      }
      this.removePage(this.curPage);
    },
    toCopeElement() {
      this.setCurCopyElement(deepCopy(this.curElement));
    },
    toPasteElement() {
      if (!this.curCopyElement.id) return;
      if (!this.curColumnId) return;

      this.pasteElement({
        element: {
          ...deepCopy(this.curCopyElement),
          x: 50,
          y: 50,
          id: getElementId(),
          key: randomCode(),
        },
        toColumnId: this.curColumnId,
      });
    },
    toEditElement() {
      if (!this.curElement.id) return;
      this.setOpenElementEditDialog(true);
    },
    // event
    registShortcutKey() {
      document.addEventListener("keydown", this.keyEvent);
    },
    removeShortcutKey() {
      document.removeEventListener("keydown", this.keyEvent);
    },
  },
  beforeDestroy() {
    this.removeShortcutKey();
  },
};
</script>