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/components/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();
@@ -48,40 +47,32 @@ watch(
   { immediate: true }
 );
 
+// エディタの切り替えを監視する
+watch(
+  () => route.path,
+  async (unknownPath) => {
+    let path: "talk" | "song";
+    if (["/talk", "/song"].includes(unknownPath)) {
+      path = unknownPath.slice(1) as "talk" | "song";
+    } else {
+      // 不明なパスの場合はトークエディタにする
+      path = "talk";
+      window.electron.logWarn(`unknown path: ${unknownPath}`);
+    }
+
+    hotkeyManager.onEditorChange(path);
+  }
+);
+
 // ソフトウェアを初期化
+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 { HotkeyActionNameType, HotkeySettingType } from "@/type/preload";
+import { useHotkeyManager, eventToCombination } from "@/plugins/hotkeyPlugin";
 
 const props =
   defineProps<{
@@ -271,16 +271,21 @@ const recordCombination = (event: KeyboardEvent) => {
   if (!isHotkeyDialogOpened.value) {
     return;
   } else {
-    const recordedCombo = parseCombo(event);
+    const recordedCombo = eventToCombination(event);
     lastRecord.value = recordedCombo;
     event.preventDefault();
   }
 };
 
+const { hotkeyManager } = useHotkeyManager();
 const changeHotkeySettings = (action: string, combo: string) => {
+  hotkeyManager.replace({
+    action: action as HotkeyActionNameType,
+    combination: combo,
+  });
   return store.dispatch("SET_HOTKEY_SETTINGS", {
     data: {
-      action: action as HotkeyActionType,
+      action: action as HotkeyActionNameType,
       combination: combo,
     },
   });

src/components/Menu/MenuBar/BaseMenuBar.vue

@@ -34,16 +34,18 @@ import TitleBarButtons from "./TitleBarButtons.vue";
 import TitleBarEditorSwitcher from "./TitleBarEditorSwitcher.vue";
 import { useStore } from "@/store";
 import { base64ImageToUri } from "@/helpers/imageHelper";
-import { HotkeyActionType, HotkeyReturnType } from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const props =
   defineProps<{
     /** 「ファイル」メニューのサブメニュー */
     fileSubMenuData: MenuItemData[];
+    /** エディタの種類 */
+    editor: "talk" | "song";
   }>();
 
 const store = useStore();
+const { registerHotkeyWithCleanup } = useHotkeyManager();
 const currentVersion = ref("");
 
 // デフォルトエンジンの代替先ポート
@@ -439,14 +441,26 @@ watch(uiLocked, () => {
   }
 });
 
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  ["新規プロジェクト", createNewProject],
-  ["プロジェクトを上書き保存", saveProject],
-  ["プロジェクトを名前を付けて保存", saveProjectAs],
-  ["プロジェクト読み込み", importProject],
-]);
-
-setHotkeyFunctions(hotkeyMap);
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: createNewProject,
+  name: "新規プロジェクト",
+});
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: saveProject,
+  name: "プロジェクトを上書き保存",
+});
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: saveProjectAs,
+  name: "プロジェクトを名前を付けて保存",
+});
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: importProject,
+  name: "プロジェクト読み込み",
+});
 </script>
 
 <style lang="scss">

src/components/Menu/MenuItem.vue

@@ -74,7 +74,7 @@
 import { ref, computed, watch } from "vue";
 import { MenuItemData } from "./type";
 import { useStore } from "@/store";
-import { hotkeyActionSchema } from "@/type/preload";
+import { hotkeyActionNameSchema } from "@/type/preload";
 const props = withDefaults(
   defineProps<{
     selected?: boolean;
@@ -96,7 +96,7 @@ const hotkeySettingsMap = computed(
     )
 );
 const getMenuBarHotkey = (rawLabel: string) => {
-  const label = hotkeyActionSchema.safeParse(rawLabel);
+  const label = hotkeyActionNameSchema.safeParse(rawLabel);
   if (!label.success) {
     return "";
   }

src/components/Sing/MenuBar.vue

@@ -1,14 +1,12 @@
 <template>
-  <base-menu-bar :file-sub-menu-data="fileSubMenuData" />
+  <base-menu-bar editor="song" :file-sub-menu-data="fileSubMenuData" />
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { MenuItemData } from "@/components/Menu/type";
 import { useStore } from "@/store";
-import { HotkeyActionType, HotkeyReturnType } from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
 import BaseMenuBar from "@/components/Menu/MenuBar/BaseMenuBar.vue";
+import { MenuItemData } from "@/components/Menu/type";
 
 const store = useStore();
 const uiLocked = computed(() => store.getters.UI_LOCKED);
@@ -55,11 +53,4 @@ const fileSubMenuData: MenuItemData[] = [
     disableWhenUiLocked: true,
   },
 ];
-
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  // NOTE: 初期設定なし
-  // ["新規", createNewSingProject],
-]);
-
-setHotkeyFunctions(hotkeyMap);
 </script>

src/components/Sing/ToolBar.vue

@@ -115,8 +115,22 @@ import {
   isValidVoiceKeyShift,
 } from "@/sing/domain";
 import CharacterMenuButton from "@/components/Sing/CharacterMenuButton/MenuButton.vue";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const store = useStore();
+const { registerHotkeyWithCleanup } = useHotkeyManager();
+
+registerHotkeyWithCleanup({
+  editor: "song",
+  name: "再生/停止",
+  callback: () => {
+    if (nowPlaying.value) {
+      stop();
+    } else {
+      play();
+    }
+  },
+});
 
 const tempos = computed(() => store.state.tempos);
 const timeSignatures = computed(() => store.state.timeSignatures);