feat(hotkeys): Migrate hotkeys to customization service and fix issues with overrides

[sedghi]

Hotkeys

Key Changes:

• Hotkeys are no longer defined in mode factory via hotkeys: [...hotkeys.defaults.hotkeyBindings]
• Hotkeys are now managed through the customizationService under the key ohif.hotkeyBindings
• Default hotkeys are set automatically and can be customized using the customization service
• User-defined hotkey preferences are now stored in a new format in localStorage
• The HotkeysManager has undergone significant updates including better handling of defaults, key persistence, and cleanup

Migration Steps:

1. Remove hotkeys array from mode factory definition

Before:

- function modeFactory({ modeConfiguration }) {
-   return {
-     id: 'basic',
-     // ... other configuration
-     hotkeys: [...hotkeys.defaults.hotkeyBindings],
-   };
- }

After:

+ function modeFactory({ modeConfiguration }) {
+   return {
+     id: 'basic',
+     // ... other configuration
+     // No hotkeys array necessary
+   };
+ }

2. Set custom hotkeys using the customization service

There are several methods to modify hotkeys using the customization service:

a. Completely replace all hotkeys using $set:

+ onModeEnter: function ({ servicesManager }) {
+   const { customizationService } = servicesManager.services;
+   customizationService.setCustomizations({
+     'ohif.hotkeyBindings': {
+       $set: [
+         {
+           commandName: 'setToolActive',
+           commandOptions: { toolName: 'Zoom' },
+           label: 'Zoom',
+           keys: ['z'],
+           isEditable: true,
+         },
+       ],
+     },
+   });

b. Add new hotkeys using $push:

+ onModeEnter: function ({ servicesManager }) {
+   const { customizationService } = servicesManager.services;
+   customizationService.setCustomizations({
+     'ohif.hotkeyBindings': {
+       $push: [
+         {
+           commandName: 'myCustomCommand',
+           label: 'My Custom Function',
+           keys: ['ctrl+m'],
+           isEditable: true,
+         },
+       ],
+     },
+   });
+}

4. Update configuration file if you were setting window.config.hotkeys

If you were previously defining hotkeys in your window.config.js file, it was not really
taken into account. So you can safely remove it now.

Before:

- window.config = {
-   // ...other config
-   hotkeys: [
-     {
-       commandName: 'incrementActiveViewport',
-       label: 'Next Viewport',
-       keys: ['right'],
-     },
-     // ...more hotkeys
-   ],
- };

After:

+ window.config = {
+   // ...other config
+ };

5. Be aware that user preferences are now handled differently

The new system automatically handles user-preferred hotkey mappings:

• User hotkey preferences are stored in localStorage under the key user-preferred-keys
• The format is a hash-based mapping rather than a full array of definitions
• There's a migration utility that converts old preferences to the new format
• You don't need to manually handle this, but be aware of it if you're accessing localStorage directly

---

Tours

1. Update any direct references to window.config.tours

If you have any code that directly references window.config.tours, update it to use the customization service:

- const tours = window.config.tours;
+ const tours = customizationService.getCustomization('ohif.tours');

2. Use config update patterns for configuring tours

Before:

- window.config = {
-   tours: [
-     {
-       id: 'basicViewerTour',
-       route: '/viewer',
-       steps: [
-         // tour steps...
-       ],
-       tourOptions: {
-         // tour options...
-       },
-     },
-   ],
- };

After:

window.config = {
  customizationService: {
    'ohif.tours': {
      $set: [
        {
          id: 'basicViewerTour',
          route: '/viewer',
          steps: [
            // Your tour steps
          ],
        },
      ],
    },
  },
};

[netlify]

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	47b299c
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/67be0b82056e5f00088043de

[netlify]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	47b299c
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/67be0b822c4f750008e7f272
😎 Deploy Preview	https://deploy-preview-4777--ohif-platform-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wayfarer3130]

Do you need an example somewhere of how to add a custom binding? Probably something in e2e.js that demonstrates customizing the configuration bindings by adding a specific customization.

[wayfarer3130]

Can you add the changes:

Define the bindings for the extension in the extension
Define an array of customizations in the mode that combined define the hotkeys extensions to use
Define the default array of customizations in the extensions, and apply that as the default customizations to apply for a mode (so that modes do not need to define hotkey bindings customizations, but get something to apply by default)
Add a customization to the extensions in the e2e config that over-writes at least one hotkey to demonstrate how to use customization to add hotkey bindings.
Add at least one hotkey binding which has no keys, but is editable to demonstrate the ability to list hotkey commands which could be customized for the user should they choose to do so.
Generally I really like this change - I think it is a significant improvement

[sedghi]

As we discussed,

• I'll create issues for the requested scopes, specifically the extension-level hotkey customization, so we can mix and match them.
• I'll also ensure the case for isEditable: true with an empty key works properly.

[cypress]

Viewers    Run #4832

Run Properties:   Passed #4832  •  47b299c2cd: fix test

Project	Viewers
Branch Review	feat/undo-redo
Run status	Passed #4832
Run duration	02m 11s
Commit	47b299c2cd: fix test
Committer	sedghi
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	2
Skipped	0
Passing	44
View all changes introduced in this branch ↗︎