Change: ショートカットキー周りをHotkeyManagerにまとめる

package.json

@@ -49,6 +49,7 @@
     "electron-window-state": "5.0.3",
     "encoding-japanese": "1.0.30",
     "glob": "8.0.3",
+    "hotkeys-js": "3.13.6",
     "immer": "9.0.21",
     "markdown-it": "13.0.2",
     "move-file": "3.0.0",
@@ -80,7 +81,6 @@
     "@types/encoding-japanese": "1.0.18",
     "@types/glob": "8.0.0",
     "@types/markdown-it": "12.2.0",
-    "@types/mousetrap": "1.6.8",
     "@types/multistream": "4.1.0",
     "@types/semver": "7.3.9",
     "@types/unzipper": "0.10.5",
@@ -110,7 +110,6 @@
     "license-checker": "25.0.1",
     "markdownlint": "0.31.1",
     "markdownlint-cli": "0.37.0",
-    "mousetrap": "1.6.5",
     "node-fetch": "3.3.1",
     "optionator": "0.9.1",
     "prettier": "2.3.0",

src/App.vue

@@ -14,14 +14,13 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, ref, computed } from "vue";
+import { watch, onMounted, ref, computed, toRaw } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
 import { useRoute } from "vue-router";
-import Mousetrap from "mousetrap";
 import { EngineId } from "./type/preload";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
-import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const store = useStore();
 const route = useRoute();
@@ -49,39 +48,14 @@ watch(
 );
 
 // ソフトウェアを初期化
+const hotkeyManager = useHotkeyManager();
 const isEnginesReady = ref(false);
 onMounted(async () => {
   await store.dispatch("INIT_VUEX");
 
-  // Electronのデフォルトのundo/redoを無効化
-  const disableDefaultUndoRedo = (event: KeyboardEvent) => {
-    // ctrl+z, ctrl+shift+z, ctrl+y
-    if (
-      isOnCommandOrCtrlKeyDown(event) &&
-      (event.key == "z" || (!event.shiftKey && event.key == "y"))
-    ) {
-      event.preventDefault();
-    }
-  };
-  document.addEventListener("keydown", disableDefaultUndoRedo);
-
-  // ショートカットキー操作を止める条件の設定
-  // 止めるなら`true`を返す
-  Mousetrap.prototype.stopCallback = (
-    e: Mousetrap.ExtendedKeyboardEvent, // 未使用
-    element: Element,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    combo: string // 未使用
-  ) => {
-    return (
-      element.tagName === "INPUT" ||
-      element.tagName === "SELECT" ||
-      element.tagName === "TEXTAREA" ||
-      (element instanceof HTMLElement && element.contentEditable === "true") ||
-      // メニュー項目ではショートカットキーを無効化
-      element.classList.contains("q-item")
-    );
-  };
+  const hotkeySettings = store.state.hotkeySettings;
+
+  hotkeyManager.load(structuredClone(toRaw(hotkeySettings)));
 
   // エンジンの初期化開始
 

src/components/Dialog/HotkeySettingDialog.vue

@@ -215,8 +215,8 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useStore } from "@/store";
-import { parseCombo } from "@/store/setting";
 import { HotkeyActionType, HotkeySettingType } from "@/type/preload";
+import { useHotkeyManager, parseCombo } from "@/plugins/hotkeyPlugin";
 
 const props =
   defineProps<{
@@ -277,7 +277,12 @@ const recordCombination = (event: KeyboardEvent) => {
   }
 };
 
+const hotkeyManager = useHotkeyManager();
 const changeHotkeySettings = (action: string, combo: string) => {
+  hotkeyManager.replace({
+    action: action as HotkeyActionType,
+    combination: combo,
+  });
   return store.dispatch("SET_HOTKEY_SETTINGS", {
     data: {
       action: action as HotkeyActionType,

src/components/HeaderBar.vue

@@ -26,13 +26,9 @@ import {
   generateAndSaveOneAudioWithDialog,
 } from "@/components/Dialog/Dialog";
 import { useStore } from "@/store";
-import { setHotkeyFunctions } from "@/store/setting";
-import {
-  HotkeyActionType,
-  HotkeyReturnType,
-  ToolbarButtonTagType,
-} from "@/type/preload";
+import { ToolbarButtonTagType } from "@/type/preload";
 import { getToolbarButtonName } from "@/store/utility";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 type ButtonContent = {
   text: string;
@@ -54,47 +50,39 @@ const nowPlayingContinuously = computed(
   () => store.state.nowPlayingContinuously
 );
 
-const undoRedoHotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  // undo
-  [
-    "元に戻す",
-    () => {
-      if (!uiLocked.value && canUndo.value) {
-        undo();
-      }
-      return false;
-    },
-  ],
-  // redo
-  [
-    "やり直す",
-    () => {
-      if (!uiLocked.value && canRedo.value) {
-        redo();
-      }
-      return false;
-    },
-  ],
-]);
-setHotkeyFunctions(undoRedoHotkeyMap);
+const hotkeyManager = useHotkeyManager();
+hotkeyManager.register({
+  editor: "talk",
+  action: "元に戻す",
+  callback: () => {
+    if (!uiLocked.value && canUndo.value) {
+      undo();
+    }
+  },
+});
+hotkeyManager.register({
+  editor: "talk",
+  action: "やり直す",
+  callback: () => {
+    if (!uiLocked.value && canRedo.value) {
+      redo();
+    }
+  },
+});
 
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  // play/stop continuously
-  [
-    "連続再生/停止",
-    () => {
-      if (!uiLocked.value) {
-        if (nowPlayingContinuously.value) {
-          stop();
-        } else {
-          playContinuously();
-        }
+hotkeyManager.register({
+  editor: "talk",
+  action: "連続再生/停止",
+  callback: () => {
+    if (!uiLocked.value) {
+      if (nowPlayingContinuously.value) {
+        stop();
+      } else {
+        playContinuously();
       }
-    },
-  ],
-]);
-
-setHotkeyFunctions(hotkeyMap);
+    }
+  },
+});
 
 const undo = () => {
   store.dispatch("UNDO");

src/components/Sing/MenuBar.vue

@@ -5,8 +5,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useStore } from "@/store";
-import { HotkeyActionType, HotkeyReturnType } from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
 import BaseMenuBar, { MenuItemData } from "@/components/BaseMenuBar.vue";
 
 const store = useStore();
@@ -54,11 +52,4 @@ const fileSubMenuData: MenuItemData[] = [
     disableWhenUiLocked: true,
   },
 ];
-
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  // NOTE: 初期設定なし
-  // ["新規", createNewSingProject],
-]);
-
-setHotkeyFunctions(hotkeyMap);
 </script>

src/components/Sing/ToolBar.vue

@@ -118,8 +118,22 @@ import {
 } from "@/sing/domain";
 import CharacterMenuButton from "@/components/Sing/CharacterMenuButton.vue";
 import { getStyleDescription } from "@/sing/viewHelper";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const store = useStore();
+const hotkeyManager = useHotkeyManager();
+
+hotkeyManager.register({
+  action: "再生/停止",
+  editor: "song",
+  callback: () => {
+    if (nowPlaying.value) {
+      stop();
+    } else {
+      play();
+    }
+  },
+});
 
 const userOrderedCharacterInfos = computed(() =>
   store.getters.USER_ORDERED_CHARACTER_INFOS("singerLike")