Mousetrap: remove destructive bind endpoint...

and update usage

Author: NiloCK

packages/common-ui/src/components/cardRendering/AudioAutoPlayer.vue

@@ -91,19 +91,24 @@ onMounted(() => {
     });
   }
 
-  SkldrMouseTrap.bind([
+  // Define hotkeys
+  const hotkeys = [
     {
       hotkey: 'up',
       callback: play,
       command: 'Replay Audio',
     },
-  ]);
+  ];
+  
+  // Add bindings
+  SkldrMouseTrap.addBinding(hotkeys);
 
   play();
 });
 
 onBeforeUnmount(() => {
-  SkldrMouseTrap.reset();
+  // Clean up hotkey bindings
+  SkldrMouseTrap.removeBinding('up');
   stop();
 });
 </script>

packages/common-ui/src/components/studentInputs/RadioMultipleChoice.vue

@@ -37,6 +37,7 @@ export default defineComponent({
       currentSelection: -1,
       incorrectSelections: [] as number[],
       containerRef: null as null | HTMLElement,
+      _registeredHotkeys: [] as (string | string[])[],
     };
   },
   watch: {
@@ -102,7 +103,7 @@ export default defineComponent({
       return ret;
     },
     bindKeys() {
-      SkldrMouseTrap.bind([
+      const hotkeys = [
         {
           hotkey: 'left',
           callback: this.decrementSelection,
@@ -141,19 +142,21 @@ export default defineComponent({
             }
           })(i)} option`,
         })),
-      ]);
+      ];
+
+      SkldrMouseTrap.addBinding(hotkeys);
+      
+      // Store hotkeys for cleanup
+      this._registeredHotkeys = hotkeys.map(k => k.hotkey);
     },
 
     unbindKeys() {
-      // this.MouseTrap.unbind('left');
-      // this.MouseTrap.unbind('right');
-      // this.MouseTrap.unbind('enter');
-
-      // for (let i = 1; i <= this.choiceList.length; i++) {
-      //   this.MouseTrap.unbind(i.toString());
-      // }
-
-      SkldrMouseTrap.reset();
+      // Remove specific hotkeys instead of resetting all
+      if (this._registeredHotkeys) {
+        this._registeredHotkeys.forEach(key => {
+          SkldrMouseTrap.removeBinding(key);
+        });
+      }
     },
     // bindNumberKey(n: number): void {
     //   this.MouseTrap.bind(n.toString(), () => {

packages/common-ui/src/utils/SkldrMouseTrap.ts

@@ -31,28 +31,17 @@ export class SkldrMouseTrap {
     });
   }
 
-  public static bind(hk: HotKey[]) {
-    SkldrMouseTrap.reset();
-    SkldrMouseTrap.instance().hotkeys = hk;
-
-    hk.forEach((k) => {
-      Mousetrap.bindGlobal(k.hotkey, (a, b) => {
-        console.log(`Running ${k.hotkey}`);
-        k.callback(a, b);
-      });
-    });
-  }
-
   /**
-   * Add bindings without resetting existing ones
+   * Add keyboard bindings without resetting existing ones
+   * @param hk Single hotkey or array of hotkeys to bind
    */
   public static addBinding(hk: HotKey | HotKey[]) {
     const hotkeys = Array.isArray(hk) ? hk : [hk];
     const instance = SkldrMouseTrap.instance();
-    
+
     // Add to internal registry
     instance.hotkeys = [...instance.hotkeys, ...hotkeys];
-    
+
     // Bind each hotkey
     hotkeys.forEach((k) => {
       Mousetrap.bindGlobal(k.hotkey, (a, b) => {
@@ -63,23 +52,46 @@ export class SkldrMouseTrap {
   }
 
   /**
-   * Remove a specific binding without affecting others
+   * Remove specific keyboard binding(s) without affecting others
+   * @param hotkey Single hotkey or array of hotkeys to remove
    */
-  public static removeBinding(hotkey: string | string[]) {
+  public static removeBinding(hotkey: string | string[] | Array<string | string[]>) {
     const instance = SkldrMouseTrap.instance();
     const currentHotkeys = [...instance.hotkeys];
 
-    // Remove from internal registry
-    instance.hotkeys = currentHotkeys.filter(k => {
-      // Convert both to JSON for comparison to handle arrays correctly
-      return JSON.stringify(k.hotkey) !== JSON.stringify(hotkey);
-    });
-    
-    // Unbind from Mousetrap
-    Mousetrap.unbind(hotkey);
+    if (Array.isArray(hotkey) && !hotkey.every(k => typeof k === 'string' || typeof k === 'number')) {
+      // If it's an array of hotkey specifiers
+      hotkey.forEach(key => {
+        // Remove from internal registry
+        instance.hotkeys = instance.hotkeys.filter(k => {
+          return JSON.stringify(k.hotkey) !== JSON.stringify(key);
+        });
+        
+        // Unbind from Mousetrap
+        Mousetrap.unbind(key);
+      });
+    } else {
+      // Single hotkey removal (original implementation)
+      // Remove from internal registry
+      instance.hotkeys = currentHotkeys.filter(k => {
+        // Convert both to JSON for comparison to handle arrays correctly
+        return JSON.stringify(k.hotkey) !== JSON.stringify(hotkey);
+      });
+      
+      // Unbind from Mousetrap
+      Mousetrap.unbind(hotkey);
+    }
   }
 
+  /**
+   * Reset all keyboard bindings
+   * @warning Consider using removeBinding() for targeted cleanup instead to avoid affecting other components
+   */
   public static reset() {
+    console.warn(
+      'SkldrMouseTrap.reset() may affect hotkeys registered by other components. ' +
+      'Consider using removeBinding() with specific hotkeys for better component isolation.'
+    );
     Mousetrap.reset();
     SkldrMouseTrap.instance().mouseTrap.reset();
     SkldrMouseTrap.instance().hotkeys = [];

packages/courses/src/piano/questions/echo/Playback.vue

@@ -232,7 +232,7 @@ export default defineComponent({
       init();
 
       // Bind space key
-      SkldrMouseTrap.bind([
+      SkldrMouseTrap.addBinding([
         {
           hotkey: 'space',
           callback: clearAttempt,
@@ -242,7 +242,7 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      SkldrMouseTrap.reset();
+      SkldrMouseTrap.removeBinding('space');
     });
 
     return {

packages/platform-ui/src/App.vue

@@ -41,7 +41,9 @@
     </v-navigation-drawer>
 
     <v-app-bar density="compact">
-      <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
+      <SkMouseTrapToolTip hotkey="m" command="Toggle Menu" highlight-effect="none" position="right">
+        <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
+      </SkMouseTrapToolTip>
       <v-spacer></v-spacer>
       <user-login-and-registration-container />
     </v-app-bar>
@@ -63,7 +65,7 @@
     </v-footer> -->
     <snackbar-service id="SnackbarService" />
     <SkMouseTrap />
-    
+
     <v-footer app class="pa-0" color="transparent">
       <v-card flat width="100%" class="text-center">
         <v-card-text class="text-body-2 text-medium-emphasis">
@@ -131,20 +133,18 @@ onBeforeMount(async () => {
 
 onMounted(async () => {
   latestBuild.value = 'buildValue not implemented';
-  
+
   // Add a global shortcut to show the keyboard shortcuts dialog
-  SkldrMouseTrap.bind([
-    {
-      hotkey: '?',
-      command: 'Show keyboard shortcuts',
-      callback: () => {
-        const keyboardButton = document.querySelector('.mdi-keyboard');
-        if (keyboardButton) {
-          (keyboardButton as HTMLElement).click();
-        }
+  SkldrMouseTrap.addBinding({
+    hotkey: '?',
+    command: 'Show keyboard shortcuts',
+    callback: () => {
+      const keyboardButton = document.querySelector('.mdi-keyboard');
+      if (keyboardButton) {
+        (keyboardButton as HTMLElement).click();
       }
-    }
-  ]);
+    },
+  });
 });
 </script>
 

packages/platform-ui/src/components/Edit/BulkImport/CardPreviewList.vue

@@ -174,7 +174,11 @@ export default defineComponent({
 
   beforeUnmount() {
     // Clean up key bindings when component is unmounted
-    SkldrMouseTrap.reset();
+    if (this.shortcutsEnabled) {
+      this.keyBindings.forEach(kb => {
+        SkldrMouseTrap.removeBinding(kb.hotkey);
+      });
+    }
   },
 
   methods: {
@@ -235,22 +239,25 @@ export default defineComponent({
 
       if (this.shortcutsEnabled) {
         // Register keyboard shortcuts
-        SkldrMouseTrap.bind(this.keyBindings);
+        SkldrMouseTrap.addBinding(this.keyBindings);
       }
     },
 
     enableShortcuts() {
       if (!this.shortcutsEnabled) {
         this.shortcutsEnabled = true;
-        SkldrMouseTrap.bind(this.keyBindings);
+        SkldrMouseTrap.addBinding(this.keyBindings);
         console.log('[CardPreviewList] Keyboard shortcuts enabled');
       }
     },
 
     disableShortcuts() {
       if (this.shortcutsEnabled) {
         this.shortcutsEnabled = false;
-        SkldrMouseTrap.reset();
+        // Remove all registered key bindings
+        this.keyBindings.forEach(kb => {
+          SkldrMouseTrap.removeBinding(kb.hotkey);
+        });
         console.log('[CardPreviewList] Keyboard shortcuts disabled');
       }
     },