fix: Store hotkeys to specified name (#3280)

* fix: Store hotkeys to specified name

* fix: Move hotkey name into a new hotkey object

platform/core/src/classes/HotkeysManager.ts

@@ -64,19 +64,17 @@ export class HotkeysManager {
    *
    * @param {HotkeyDefinition[] | Object} [hotkeyDefinitions=[]] Contains hotkeys definitions
    */
-  setHotkeys(hotkeyDefinitions = [], key = 'hotkey-definitions') {
+  setHotkeys(hotkeyDefinitions = [], name = 'hotkey-definitions') {
     try {
       const definitions = this.getValidDefinitions(hotkeyDefinitions);
       if (isequal(definitions, this.hotkeyDefaults)) {
-        console.log('hotkeys REMOVING unused definition', key);
-        localStorage.removeItem(key);
+        localStorage.removeItem(name);
       } else {
-        console.log('hotkeys setting local storage', key);
-        localStorage.setItem(key, JSON.stringify(definitions));
+        localStorage.setItem(name, JSON.stringify(definitions));
       }
       definitions.forEach(definition => this.registerHotkeys(definition));
     } catch (error) {
-      const { uiNotificationService, } = this._servicesManager.services;
+      const { uiNotificationService } = this._servicesManager.services;
       uiNotificationService.show({
         title: 'Hotkeys Manager',
         message: 'Error while setting hotkeys',

platform/docs/docs/platform/modes/index.md

@@ -315,7 +315,9 @@ handles creation of the displaySets.
 ### Hotkeys
 
 `hotkeys` is another property in the configuration of a mode that can be defined
-to add the specific hotkeys to the viewer at all routes.
+to add the specific hotkeys to the viewer on the mode route.  Additionally, the
+name under which the hotkeys are stored can be configured as `hotkeyName`.
+This allows user customization of the mode specific hotkeys.
 
 ```js
 // default hotkeys
@@ -347,7 +349,13 @@ function modeFactory() {
     /*
     ...
     */
-    hotkeys: [..hotkeys.defaults.hotkeyBindings, ...myHotkeys],
+    hotkeys: {
+      // The name in preferences to use for this set of hotkeys
+      // Allows defining different sets for different modes
+      name: 'custom-hotkey-name',
+      // And the actual custom values here.
+      hotkeys:[..hotkeys.defaults.hotkeyBindings, ...myHotkeys]
+    },
   }
 }
 

platform/viewer/src/routes/Mode/Mode.tsx

@@ -114,7 +114,15 @@ export default function ModeRoute({
     hangingProtocolService,
   } = (servicesManager as ServicesManager).services;
 
-  const { extensions, sopClassHandlers, hotkeys, hangingProtocol } = mode;
+  const {
+    extensions,
+    sopClassHandlers,
+    hotkeys: hotkeyObj,
+    hangingProtocol,
+  } = mode;
+  // Preserve the old array interface for hotkeys
+  const hotkeys = Array.isArray(hotkeyObj) ? hotkeyObj : hotkeyObj?.hotkeys;
+  const hotkeyName = hotkeyObj?.name || 'hotkey-definitions-v2';
 
   if (dataSourceName === undefined) {
     dataSourceName = extensionManager.defaultDataSourceName;
@@ -204,14 +212,12 @@ export default function ModeRoute({
 
     hotkeysManager.setDefaultHotKeys(hotkeys);
 
-    const userPreferredHotkeys = JSON.parse(
-      localStorage.getItem('hotkey-definitions')
-    );
+    const userPreferredHotkeys = JSON.parse(localStorage.getItem(hotkeyName));
 
     if (userPreferredHotkeys?.length) {
-      hotkeysManager.setHotkeys(userPreferredHotkeys);
+      hotkeysManager.setHotkeys(userPreferredHotkeys, hotkeyName);
     } else {
-      hotkeysManager.setHotkeys(hotkeys);
+      hotkeysManager.setHotkeys(hotkeys, hotkeyName);
     }
 
     return () => {