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

src/plugins/hotkeyPlugin.ts

@@ -34,27 +34,21 @@ export const useHotkeyManager = () => {
   return { hotkeyManager, registerHotkeyWithCleanup };
 };
 
+type Editor = "talk" | "song";
+
 /**
  * ショートカットキーの処理を登録するための型。
  */
 export type HotkeyAction = {
   /** どちらのエディタで有効か */
-  editor: "talk" | "song";
+  editor: Editor;
   /** テキストボックス内で有効か。デフォルトはfalse。 */
   enableInTextbox?: boolean;
   /** 名前。 */
   name: HotkeyActionNameType;
   /** ショートカットキーが押されたときの処理。 */
   callback: (e: KeyboardEvent) => void;
 };
-type HotkeyActionId = `${"talk" | "song"}:${HotkeyActionNameType}`;
-
-const actionToId = (action: HotkeyAction): HotkeyActionId =>
-  `${action.editor}:${action.name}`;
-const idToEditorAndName = (
-  id: HotkeyActionId
-): [editor: "talk" | "song", name: HotkeyActionNameType] =>
-  id.split(":", 2) as [editor: "talk" | "song", name: HotkeyActionNameType];
 
 export type HotkeysJs = {
   (
@@ -73,14 +67,31 @@ hotkeys.filter = () => {
 };
 type Log = (message: string, ...args: unknown[]) => void;
 
+type RegisteredCombination = {
+  editor: Editor;
+  name: HotkeyActionNameType;
+  combination: string;
+};
+
+interface HotkeyTarget {
+  name: HotkeyActionNameType;
+  editor: Editor;
+}
+const isSameHotkeyTarget = (a: HotkeyTarget) => (b: HotkeyTarget) => {
+  return a.name === b.name && a.editor === b.editor;
+};
+const isNotSameHotkeyTarget = (a: HotkeyTarget) => (b: HotkeyTarget) => {
+  return a.name !== b.name || a.editor !== b.editor;
+};
+
 /**
  * ショートカットキーの管理を行うクラス。
  */
 export class HotkeyManager {
   private actions: HotkeyAction[] = [];
   private settings: HotkeySettingType[] | undefined;
-  // 登録されているショートカットキーの組み合わせ。キーは「エディタ:アクション」で、値はcombination。
-  private registeredCombinations: Partial<Record<HotkeyActionId, string>> = {};
+  // 登録されているショートカットキーの組み合わせ。
+  private registeredCombinations: RegisteredCombination[] = [];
 
   private hotkeys: HotkeysJs;
   private log: Log;
@@ -114,26 +125,35 @@ export class HotkeyManager {
     return setting;
   }
 
+  private getRegisteredCombination(action: HotkeyAction): string | undefined {
+    return this.registeredCombinations.find(isSameHotkeyTarget(action))
+      ?.combination;
+  }
+
   private refreshBinding(): void {
     if (!this.settings) {
       return;
     }
 
-    this.unbindUnregisteredActions();
-
+    const unregisteredCombinations = this.registeredCombinations.filter(
+      (c) => !this.actions.some(isSameHotkeyTarget(c))
+    );
     const changedActions = this.actions.filter((a) => {
       const setting = this.getSetting(a);
-      return this.registeredCombinations[actionToId(a)] !== setting.combination;
+      return this.getRegisteredCombination(a) !== setting.combination;
     });
-    if (changedActions.length === 0) {
+    if (changedActions.length === 0 && unregisteredCombinations.length === 0) {
       return;
     }
 
-    const actionsToUnbind = changedActions.filter((a) => {
-      // 未登録のものを弾く
-      return this.registeredCombinations[actionToId(a)] != undefined;
+    const unbindedCombinations = changedActions.flatMap((a) => {
+      const combination = this.registeredCombinations.find(
+        isSameHotkeyTarget(a)
+      );
+      // 空じゃないCombinationを探す
+      return combination?.combination ? [combination] : [];
     });
-    this.unbindActions(actionsToUnbind);
+    this.unbindActions([...unbindedCombinations, ...unregisteredCombinations]);
 
     const actionsToBind = changedActions.filter((a) => {
       const setting = this.getSetting(a);
@@ -143,34 +163,14 @@ export class HotkeyManager {
     this.bindActions(actionsToBind);
   }
 
-  private unbindUnregisteredActions(): void {
-    for (const [id, combination] of Object.entries(
-      this.registeredCombinations
-    )) {
-      if (!combination) {
-        continue;
-      }
-      if (this.actions.some((a) => actionToId(a) === id)) {
-        continue;
-      }
-      const [editor, name] = idToEditorAndName(id as HotkeyActionId);
-
-      this.log(`Unbind: ${name}(${combination}) in ${editor}`);
-      this.hotkeys.unbind(combinationToBindingKey(combination), editor);
-      this.registeredCombinations[id as HotkeyActionId] = undefined;
-    }
-  }
-
-  private unbindActions(actions: HotkeyAction[]): void {
-    for (const action of actions) {
-      const combination = this.registeredCombinations[actionToId(action)];
-      if (!combination) {
-        throw new Error("assert: combination != undefined");
-      }
-      const bindingKey = combinationToBindingKey(combination);
-      this.log("Unbind:", bindingKey, "in", action.editor);
-      this.hotkeys.unbind(bindingKey, action.editor);
-      this.registeredCombinations[actionToId(action)] = undefined;
+  private unbindActions(combinations: RegisteredCombination[]): void {
+    for (const combination of combinations) {
+      const bindingKey = combinationToBindingKey(combination.combination);
+      this.log("Unbind:", bindingKey, "in", combination.editor);
+      this.hotkeys.unbind(bindingKey, combination.editor);
+      this.registeredCombinations = this.registeredCombinations.filter(
+        isNotSameHotkeyTarget(combination)
+      );
     }
   }
 
@@ -212,7 +212,14 @@ export class HotkeyManager {
           action.callback(e);
         }
       );
-      this.registeredCombinations[actionToId(action)] = setting.combination;
+      this.registeredCombinations = this.registeredCombinations.filter(
+        isNotSameHotkeyTarget(action)
+      );
+      this.registeredCombinations.push({
+        editor: action.editor,
+        name: action.name,
+        combination: setting.combination,
+      });
     }
   }
 
@@ -248,9 +255,7 @@ export class HotkeyManager {
    * ショートカットキーの処理の登録を解除する。
    */
   unregister(data: HotkeyAction): void {
-    this.actions = this.actions.filter(
-      (a) => a.name !== data.name || a.editor !== data.editor
-    );
+    this.actions = this.actions.filter(isNotSameHotkeyTarget(data));
     this.refreshBinding();
   }