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

src/components/App.vue

@@ -17,7 +17,7 @@
 import { watch, onMounted, ref, computed, toRaw } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
 import { useRoute } from "vue-router";
-import { EngineId } from "./type/preload";
+import { EngineId } from "@/type/preload";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
@@ -47,6 +47,21 @@ 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";
+    }
+
+    hotkeyManager.onEditorChange(path);
+  }
+);
+
 // ソフトウェアを初期化
 const hotkeyManager = useHotkeyManager();
 const isEnginesReady = ref(false);

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({
+  editor: "song",
+  action: "再生/停止",
+  callback: () => {
+    if (nowPlaying.value) {
+      stop();
+    } else {
+      play();
+    }
+  },
+});
 
 const userOrderedCharacterInfos = computed(() =>
   store.getters.USER_ORDERED_CHARACTER_INFOS("singerLike")

src/main.ts

@@ -6,6 +6,7 @@ import router from "./router";
 import { store, storeKey } from "./store";
 import { ipcMessageReceiver } from "./plugins/ipcMessageReceiverPlugin";
 import { hotkeyPlugin } from "./plugins/hotkeyPlugin";
+import App from "@/components/App.vue";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
 import "@quasar/extras/material-icons/material-icons.css";

src/plugins/hotkeyPlugin.ts

@@ -1,3 +1,11 @@
+/**
+ * ショートカットキーを管理するプラグイン。
+ *
+ * HotkeyAction: 何をするか（再生するなど）の名称
+ * Combination: ショートカットキーを文字列で表したもの
+ * HotkeySetting: ユーザーが設定できるもの。ActionとCobinationのペア
+ * HotkeyEntry: プログラムが管理するもの。関数や発動条件など
+ */
 import { Plugin, inject } from "vue";
 import hotkeys from "hotkeys-js";
 import { HotkeyActionType, HotkeySettingType } from "@/type/preload";
@@ -11,8 +19,12 @@ export const useHotkeyManager = () => {
   return hotkeyManager;
 };
 
+const log = (message: string, ...args: unknown[]) => {
+  console.log(`[HotkeyManager] ${message}`, ...args);
+};
+
 /**
- * ショートカットキーの情報を格納する型。
+ * ショートカットキーの処理を登録するための型。
  */
 type HotkeyEntry = {
   /** どちらのエディタで有効か */
@@ -21,19 +33,22 @@ type HotkeyEntry = {
   enableInTextbox?: boolean;
   /** 名前。 */
   action: HotkeyActionType;
-  /** ブラウザのデフォルトの挙動をキャンセルするか。デフォルトはfalse。 */
-  keepDefaultBehavior?: boolean;
   /** ショートカットキーが押されたときの処理。 */
   callback: (e: KeyboardEvent) => void;
 };
+type HotkeyEntryKey = `${"talk" | "song"}:${HotkeyActionType}`;
+
+const entryToKey = (entry: HotkeyEntry): HotkeyEntryKey =>
+  `${entry.editor}:${entry.action}`;
 
 /**
  * ショートカットキーの管理を行うクラス。
  */
 export class HotkeyManager {
-  actions: HotkeyEntry[] = [];
-  settings: HotkeySettingType[] = [];
-  registered: Partial<Record<HotkeyActionType, string>> = {};
+  private entries: HotkeyEntry[] = [];
+  private settings: HotkeySettingType[] = [];
+  /// 登録されているショートカットキーの組み合わせ。キーは「エディタ:アクション」で、値はショートカットキーの文字列。
+  private registeredCombination: Partial<Record<HotkeyEntryKey, string>> = {};
 
   constructor() {
     // デフォルトだとテキスト欄でのショートカットキーが効かないので、テキスト欄でも効くようにする
@@ -52,75 +67,66 @@ export class HotkeyManager {
     if (this.settings.length === 0) {
       return;
     }
-    const changedActions = this.actions.filter(
+    const changedActions = this.entries.filter(
       (a) =>
-        this.registered[a.action] !==
+        this.registeredCombination[entryToKey(a)] !==
         this.settings.find((s) => s.action === a.action)?.combination
     );
+    if (changedActions.length === 0) {
+      return;
+    }
+    const keysToRemove = new Set(
+      ...changedActions
+        .map((key) =>
+          hotkeyToCombo(this.registeredCombination[entryToKey(key)] || "")
+        )
+        .filter((key) => key !== "")
+    );
+    for (const key of keysToRemove.values()) {
+      log("Unbind:", key);
+      hotkeys.unbind(key);
+    }
     for (const action of changedActions) {
-      const registered = this.registered[action.action];
-      if (registered) {
-        hotkeys.unbind(hotkeyToCombo(registered));
-      }
       const setting = this.settings.find((s) => s.action === action.action);
       if (!setting) {
         // unreachableのはず
         throw new Error("assert: setting == undefined");
       }
-
-      const actions = this.actions.filter((a) => a.action === action.action);
-      if (actions.length > 1) {
-        const songAction = actions.find((a) => a.editor === "song");
-        const talkAction = actions.find((a) => a.editor === "talk");
-        if (!songAction || !talkAction) {
-          throw new Error("assert: songAction && talkAction");
-        }
-        // talk/song両方で有効なショートカットキー
-        hotkeys(hotkeyToCombo(setting.combination), (e) => {
-          const path = location.hash.split("/")[1] as "talk" | "song";
-          const action = path === "talk" ? talkAction : songAction;
-          if (!action.enableInTextbox) {
-            const element = e.target as HTMLElement;
-            if (
-              element.tagName === "INPUT" ||
-              element.tagName === "SELECT" ||
-              element.tagName === "TEXTAREA" ||
-              (element instanceof HTMLElement &&
-                element.contentEditable === "true") ||
-              // メニュー項目ではショートカットキーを無効化
-              element.classList.contains("q-item")
-            ) {
-              return;
-            }
-          }
-          if (!action.keepDefaultBehavior) e.preventDefault();
-          action.callback(e);
-        });
+      if (setting.combination === "") {
+        log("Skip(empty combination):", action.action, "in", action.editor);
       } else {
-        hotkeys(hotkeyToCombo(setting.combination), (e) => {
-          if (!action.enableInTextbox) {
-            const element = e.target as HTMLElement;
-            if (
-              element.tagName === "INPUT" ||
-              element.tagName === "SELECT" ||
-              element.tagName === "TEXTAREA" ||
-              (element instanceof HTMLElement &&
-                element.contentEditable === "true") ||
-              // メニュー項目ではショートカットキーを無効化
-              element.classList.contains("q-item")
-            ) {
-              return;
+        log(
+          "Bind:",
+          hotkeyToCombo(setting.combination),
+          "to",
+          action.action,
+          "in",
+          action.editor
+        );
+        hotkeys(
+          hotkeyToCombo(setting.combination),
+          { scope: action.editor },
+          (e) => {
+            if (!action.enableInTextbox) {
+              const element = e.target as HTMLElement;
+              if (
+                element.tagName === "INPUT" ||
+                element.tagName === "SELECT" ||
+                element.tagName === "TEXTAREA" ||
+                (element instanceof HTMLElement &&
+                  element.contentEditable === "true") ||
+                // メニュー項目ではショートカットキーを無効化
+                element.classList.contains("q-item")
+              ) {
+                return;
+              }
             }
-          }
-          // TODO: もっと良い感じの取得方法があれば変更する
-          const path = location.hash.split("/")[1] as "talk" | "song";
-          if (path === action.editor) {
-            if (!action.keepDefaultBehavior) e.preventDefault();
+            e.preventDefault();
             action.callback(e);
           }
-        });
+        );
       }
-      this.registered[action.action] = setting.combination;
+      this.registeredCombination[entryToKey(action)] = setting.combination;
     }
   }
 
@@ -137,12 +143,20 @@ export class HotkeyManager {
   }
 
   /**
-   * ショートカットキーの登録を行う。
+   * ショートカットキーの処理を登録する。
    */
   register(data: HotkeyEntry): void {
-    this.actions.push(data);
+    this.entries.push(data);
     this.refreshBinding();
   }
+
+  /**
+   * エディタが変更されたときに呼び出される。
+   */
+  onEditorChange(editor: "talk" | "song"): void {
+    hotkeys.setScope(editor);
+    log("Editor changed to", editor);
+  }
 }
 
 const hotkeyToCombo = (hotkeyCombo: string) => {