OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles

* feat/ohif-332: finish raw ui

* feat/ohif-332: update mode configuration strategy

* feat/ohif-332: fix hotkey errors

* feat/ohif-332: update hotkey logic with recent merged changes

* feat/ohif-322: wrap

* feat/ohif-322: add disable state

* ohif-332: cr updates

* ohif-332: disable

* ohif-332: cr updates

* ohif-332: extract header component

* ohif-332: cr update to fix merge conflicts and design issue

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

platform/core/src/classes/HotkeysManager.js

@@ -61,8 +61,7 @@ export class HotkeysManager {
    */
   setHotkeys(hotkeyDefinitions = []) {
     try {
-      const definitions = this._getValidDefinitions(hotkeyDefinitions);
-
+      const definitions = this.getValidDefinitions(hotkeyDefinitions);
       definitions.forEach(definition => this.registerHotkeys(definition));
     } catch (error) {
       const { UINotificationService } = this._servicesManager.services;
@@ -81,8 +80,7 @@ export class HotkeysManager {
    * @param {HotkeyDefinition[] | Object} [hotkeyDefinitions=[]] Contains hotkeys definitions
    */
   setDefaultHotKeys(hotkeyDefinitions = []) {
-    const definitions = this._getValidDefinitions(hotkeyDefinitions);
-
+    const definitions = this.getValidDefinitions(hotkeyDefinitions);
     this.hotkeyDefaults = definitions;
   }
 
@@ -92,7 +90,7 @@ export class HotkeysManager {
    *
    * @param {HotkeyDefinition[] | Object} [hotkeyDefinitions=[]] Contains hotkeys definitions
    */
-  _getValidDefinitions(hotkeyDefinitions) {
+  getValidDefinitions(hotkeyDefinitions) {
     const definitions = Array.isArray(hotkeyDefinitions)
       ? [...hotkeyDefinitions]
       : this._parseToArrayLike(hotkeyDefinitions);
@@ -100,6 +98,24 @@ export class HotkeysManager {
     return definitions;
   }
 
+  /**
+   * Take hotkey definitions that can be an array and make sure that it
+   * returns an object of hotkeys definitions
+   *
+   * @param {HotkeyDefinition[]} [hotkeyDefinitions=[]] Contains hotkeys definitions
+   * @returns {Object}
+   */
+  getValidHotkeyDefinitions(hotkeyDefinitions) {
+    const definitions = this.getValidDefinitions(hotkeyDefinitions);
+    const objectDefinitions = {};
+    definitions.forEach(definition => {
+      const { commandName, commandOptions } = definition;
+      const commandHash = objectHash({ commandName, commandOptions });
+      objectDefinitions[commandHash] = definition;
+    });
+    return objectDefinitions;
+  }
+
   /**
    * It parses given object containing hotkeyDefinition to array like.
    * Each property of given object will be mapped to an object of an array. And its property name will be the value of a property named as commandName
@@ -147,7 +163,7 @@ export class HotkeysManager {
    * @param {String} extension
    * @returns {undefined}
    */
-  registerHotkeys({ commandName, commandOptions = {}, keys, label } = {}, extension) {
+  registerHotkeys({ commandName, commandOptions = {}, keys, label, isEditable } = {}, extension) {
     if (!commandName) {
       log.warn(`[hotkeys] No command was defined for hotkey "${keys}"`);
       return;
@@ -164,7 +180,7 @@ export class HotkeysManager {
     }
 
     // Set definition & bind
-    this.hotkeyDefinitions[commandHash] = { keys, label };
+    this.hotkeyDefinitions[commandHash] = { commandName, commandOptions, keys, label, isEditable };
     this._bindHotkeys(commandName, commandOptions, keys);
     log.info(`[hotkeys] Binding ${commandName} with ${options} options to ${keys}`);
   }

platform/core/src/defaults/hotkeyBindings.js

@@ -4,53 +4,64 @@ import windowLevelPresets from './windowLevelPresets';
  * Supported Keys: https://craig.is/killing/mice
  */
 export default [
-  /** Global */
-  {
-    commandName: 'incrementActiveViewport',
-    label: 'Next Viewport',
-    keys: ['right'],
-  },
-  {
-    commandName: 'decrementActiveViewport',
-    label: 'Previous Viewport',
-    keys: ['left'],
-  },
-  /** Viewport */
-  { commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
-  { commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
-  { commandName: 'invertViewport', label: 'Invert', keys: ['i'] },
-  {
-    commandName: 'cancelMeasurement',
-    label: 'Cancel Cornerstone Measurement',
-    keys: ['esc'],
-  },
+  { commandName: 'setToolActive', commandOptions: { toolName: 'Zoom' }, label: 'Zoom', keys: ['z'], isEditable: true },
+  { commandName: 'scaleUpViewport', label: 'Zoom In', keys: ['+'], isEditable: true },
+  { commandName: 'scaleDownViewport', label: 'Zoom Out', keys: ['-'], isEditable: true },
+  { commandName: 'fitViewportToWindow', label: 'Zoom to Fit', keys: ['='], isEditable: true },
+  { commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'], isEditable: true },
+  { commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'], isEditable: true },
   {
     commandName: 'flipViewportVertical',
     label: 'Flip Horizontally',
     keys: ['h'],
+    isEditable: true,
   },
   {
     commandName: 'flipViewportHorizontal',
     label: 'Flip Vertically',
     keys: ['v'],
+    isEditable: true,
   },
-  { commandName: 'scaleUpViewport', label: 'Zoom In', keys: ['+'] },
-  { commandName: 'scaleDownViewport', label: 'Zoom Out', keys: ['-'] },
-  { commandName: 'fitViewportToWindow', label: 'Zoom to Fit', keys: ['='] },
-  { commandName: 'resetViewport', label: 'Reset', keys: ['space'] },
-  { commandName: 'nextImage', label: 'Next Image', keys: ['down'] },
-  { commandName: 'previousImage', label: 'Previous Image', keys: ['up'] },
   {
-    commandName: 'previousViewportDisplaySet',
-    label: 'Previous Series',
-    keys: ['pagedown'],
+    commandName: 'invertViewport',
+    label: 'Invert',
+    keys: ['i'],
+    isEditable: true,
+  },
+  {
+    commandName: 'incrementActiveViewport',
+    label: 'Next Image Viewport',
+    keys: ['right'],
+    isEditable: true,
+  },
+  {
+    commandName: 'decrementActiveViewport',
+    label: 'Previous Image Viewport',
+    keys: ['left'],
+    isEditable: true,
   },
   {
     commandName: 'nextViewportDisplaySet',
     label: 'Next Series',
     keys: ['pageup'],
+    isEditable: true,
+  },
+  {
+    commandName: 'previousViewportDisplaySet',
+    label: 'Previous Series',
+    keys: ['pagedown'],
+    isEditable: true,
+  },
+  { commandName: 'nextImage', label: 'Next Image', keys: ['down'], isEditable: true },
+  { commandName: 'previousImage', label: 'Previous Image', keys: ['up'], isEditable: true },
+  { commandName: 'firstImage', label: 'First Image', keys: ['home'], isEditable: true },
+  { commandName: 'lastImage', label: 'Last Image', keys: ['end'], isEditable: true },
+  { commandName: 'resetViewport', label: 'Reset', keys: ['space'], isEditable: true },
+  {
+    commandName: 'cancelMeasurement',
+    label: 'Cancel Cornerstone Measurement',
+    keys: ['esc'],
   },
-  /** Window level presets */
   {
     commandName: 'setWindowLevel',
     commandOptions: windowLevelPresets[1],

platform/core/src/defaults/windowLevelPresets.js

@@ -5,8 +5,8 @@ export default {
   4: { description: 'Bone', window: '80', level: '40' },
   5: { description: 'Brain', window: '2500', level: '480' },
   6: { description: 'Trest', window: '1', level: '1' },
-  7: { description: '', window: '', level: '' },
-  8: { description: '', window: '', level: '' },
-  9: { description: '', window: '', level: '' },
-  10: { description: '', window: '', level: '' },
+  7: { description: 'Empty1', window: 'Empty1', level: 'Empty1' },
+  8: { description: 'Empty2', window: 'Empty2', level: 'Empty2' },
+  9: { description: 'Empty3', window: 'Empty3', level: 'Empty3' },
+  10: { description: 'Empty4', window: 'Empty4', level: 'Empty4' },
 };

platform/core/src/extensions/ExtensionManager.js

@@ -2,13 +2,14 @@ import MODULE_TYPES from './MODULE_TYPES.js';
 import log from './../log.js';
 
 export default class ExtensionManager {
-  constructor({ commandsManager, servicesManager, api, appConfig = {} }) {
+  constructor({ commandsManager, servicesManager, hotkeysManager, api, appConfig = {} }) {
     this.modules = {};
     this.registeredExtensionIds = [];
     this.moduleTypeNames = Object.values(MODULE_TYPES);
     //
     this._commandsManager = commandsManager;
     this._servicesManager = servicesManager;
+    this._hotkeysManager = hotkeysManager;
     this._appConfig = appConfig;
     this._api = api;
 
@@ -31,6 +32,7 @@ export default class ExtensionManager {
       registeredExtensionIds,
       _servicesManager,
       _commandsManager,
+      _hotkeysManager,
       _extensionLifeCycleHooks,
     } = this;
 
@@ -51,6 +53,7 @@ export default class ExtensionManager {
         onModeEnter({
           servicesManager: _servicesManager,
           commandsManager: _commandsManager,
+          hotkeysManager: _hotkeysManager
         });
       }
     });
@@ -139,6 +142,7 @@ export default class ExtensionManager {
       extension.preRegistration({
         servicesManager: this._servicesManager,
         commandsManager: this._commandsManager,
+        hotkeysManager: this._hotkeysManager,
         appConfig: this._appConfig,
         configuration,
       });
@@ -239,8 +243,9 @@ export default class ExtensionManager {
         appConfig: this._appConfig,
         getDataSources: this.getDataSources, // Why pass this in if we're passing in `extensionManager`?
         commandsManager: this._commandsManager,
-        extensionManager: this,
         servicesManager: this._servicesManager,
+        hotkeysManager: this._hotkeysManager,
+        extensionManager: this,
         configuration,
         api: this._api,
       });