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

extensions/cornerstone/src/commandsModule.ts

@@ -25,7 +25,6 @@ import {
   colorPickerDialog,
 } from '@ohif/extension-default';
 import { vec3, mat4 } from 'gl-matrix';
-
 import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
 import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
@@ -34,6 +33,7 @@ import toggleVOISliceSync from './utils/toggleVOISliceSync';
 import { usePositionPresentationStore, useSegmentationPresentationStore } from './stores';
 import { toolNames } from './initCornerstoneTools';
 
+const { DefaultHistoryMemo } = csUtils.HistoryMemo;
 const toggleSyncFunctions = {
   imageSlice: toggleImageSliceSync,
   voi: toggleVOISliceSync,
@@ -430,6 +430,37 @@ function commandsModule({
 
       actions.setViewportWindowLevel({ ...props, viewportId });
     },
+    setWindowLevelPreset: ({ presetName, presetIndex }) => {
+      const windowLevelPresets = customizationService.getCustomization(
+        'cornerstone.windowLevelPresets'
+      );
+
+      const activeViewport = viewportGridService.getActiveViewportId();
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(activeViewport);
+      const metadata = viewport.getImageData().metadata;
+
+      const modality = metadata.Modality;
+
+      if (!modality) {
+        return;
+      }
+
+      const windowLevelPresetForModality = windowLevelPresets[modality];
+
+      if (!windowLevelPresetForModality) {
+        return;
+      }
+
+      const windowLevelPreset =
+        windowLevelPresetForModality[presetName] ??
+        Object.values(windowLevelPresetForModality)[presetIndex];
+
+      actions.setViewportWindowLevel({
+        viewportId: activeViewport,
+        window: windowLevelPreset.window,
+        level: windowLevelPreset.level,
+      });
+    },
     setToolEnabled: ({ toolName, toggle, toolGroupId }) => {
       const { viewports } = viewportGridService.getState();
 
@@ -1327,6 +1358,12 @@ function commandsModule({
         measurementService.remove(activeAnnotationUID);
       });
     },
+    undo: () => {
+      DefaultHistoryMemo.undo();
+    },
+    redo: () => {
+      DefaultHistoryMemo.redo();
+    },
   };
 
   const definitions = {
@@ -1391,6 +1428,9 @@ function commandsModule({
     setWindowLevel: {
       commandFn: actions.setWindowLevel,
     },
+    setWindowLevelPreset: {
+      commandFn: actions.setWindowLevelPreset,
+    },
     setToolActive: {
       commandFn: actions.setToolActive,
     },
@@ -1590,6 +1630,8 @@ function commandsModule({
     deleteActiveAnnotation: {
       commandFn: actions.deleteActiveAnnotation,
     },
+    undo: actions.undo,
+    redo: actions.redo,
   };
 
   return {

extensions/default/src/ViewerLayout/index.tsx

@@ -199,7 +199,7 @@ function ViewerLayout({
           </ResizablePanelGroup>
         </React.Fragment>
       </div>
-      <Onboarding />
+      <Onboarding tours={customizationService.getCustomization('ohif.tours')} />
       <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
     </div>
   );

extensions/default/src/customizations/hotkeyBindingsCustomization.ts

@@ -0,0 +1,5 @@
+import { defaults } from '@ohif/core';
+
+export default {
+  'ohif.hotkeyBindings': defaults.hotkeyBindings,
+};

extensions/default/src/customizations/onboardingCustomization.ts

@@ -0,0 +1,210 @@
+function waitForElement(selector, maxAttempts = 20, interval = 25) {
+  return new Promise(resolve => {
+    let attempts = 0;
+
+    const checkForElement = setInterval(() => {
+      const element = document.querySelector(selector);
+
+      if (element || attempts >= maxAttempts) {
+        clearInterval(checkForElement);
+        resolve();
+      }
+
+      attempts++;
+    }, interval);
+  });
+}
+
+export default {
+  'ohif.tours': [
+    {
+      id: 'basicViewerTour',
+      route: '/viewer',
+      steps: [
+        {
+          id: 'scroll',
+          title: 'Scrolling Through Images',
+          text: 'You can scroll through the images using the mouse wheel or scrollbar.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'top',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'zoom',
+          title: 'Zooming In and Out',
+          text: 'You can zoom the images using the right click.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'left',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_UP',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'pan',
+          title: 'Panning the Image',
+          text: 'You can pan the images using the middle click.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'top',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_UP',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'windowing',
+          title: 'Adjusting Window Level',
+          text: 'You can modify the window level using the left click.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'left',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_UP',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'length',
+          title: 'Using the Measurement Tools',
+          text: 'You can measure the length of a region using the Length tool.',
+          attachTo: {
+            element: '[data-cy="MeasurementTools-split-button-primary"]',
+            on: 'bottom',
+          },
+          advanceOn: {
+            selector: '[data-cy="MeasurementTools-split-button-primary"]',
+            event: 'click',
+          },
+          beforeShowPromise: () =>
+            waitForElement('[data-cy="MeasurementTools-split-button-primary]'),
+        },
+        {
+          id: 'drawAnnotation',
+          title: 'Drawing Length Annotations',
+          text: 'Use the length tool on the viewport to measure the length of a region.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'right',
+          },
+          advanceOn: {
+            selector: 'body',
+            event: 'event::measurement_added',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'trackMeasurement',
+          title: 'Tracking Measurements in the Panel',
+          text: 'Click yes to track the measurements in the measurement panel.',
+          attachTo: {
+            element: '[data-cy="prompt-begin-tracking-yes-btn"]',
+            on: 'bottom',
+          },
+          advanceOn: {
+            selector: '[data-cy="prompt-begin-tracking-yes-btn"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="prompt-begin-tracking-yes-btn"]'),
+        },
+        {
+          id: 'openMeasurementPanel',
+          title: 'Opening the Measurements Panel',
+          text: 'Click the measurements button to open the measurements panel.',
+          attachTo: {
+            element: '#trackedMeasurements-btn',
+            on: 'left-start',
+          },
+          advanceOn: {
+            selector: '#trackedMeasurements-btn',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('#trackedMeasurements-btn'),
+        },
+        {
+          id: 'scrollAwayFromMeasurement',
+          title: 'Scrolling Away from a Measurement',
+          text: 'Scroll the images using the mouse wheel away from the measurement.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'left',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'jumpToMeasurement',
+          title: 'Jumping to Measurements in the Panel',
+          text: 'Click the measurement in the measurement panel to jump to it.',
+          attachTo: {
+            element: '[data-cy="data-row"]',
+            on: 'left-start',
+          },
+          advanceOn: {
+            selector: '[data-cy="data-row"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="data-row"]'),
+        },
+        {
+          id: 'changeLayout',
+          title: 'Changing Layout',
+          text: 'You can change the layout of the viewer using the layout button.',
+          attachTo: {
+            element: '[data-cy="Layout"]',
+            on: 'bottom',
+          },
+          advanceOn: {
+            selector: '[data-cy="Layout"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="Layout"]'),
+        },
+        {
+          id: 'selectLayout',
+          title: 'Selecting the MPR Layout',
+          text: 'Select the MPR layout to view the images in MPR mode.',
+          attachTo: {
+            element: '[data-cy="MPR"]',
+            on: 'left-start',
+          },
+          advanceOn: {
+            selector: '[data-cy="MPR"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="MPR"]'),
+        },
+      ],
+      tourOptions: {
+        useModalOverlay: true,
+        defaultStepOptions: {
+          buttons: [
+            {
+              text: 'Skip all',
+              action() {
+                this.complete();
+              },
+              secondary: true,
+            },
+          ],
+        },
+      },
+    },
+  ],
+};

extensions/default/src/getCustomizationModule.tsx

@@ -18,7 +18,8 @@ import progressLoadingBarCustomization from './customizations/progressLoadingBar
 import viewportActionCornersCustomization from './customizations/viewportActionCornersCustomization';
 import labellingFlowCustomization from './customizations/labellingFlowCustomization';
 import viewportNotificationCustomization from './customizations/notificationCustomization';
-
+import hotkeyBindingsCustomization from './customizations/hotkeyBindingsCustomization';
+import onboardingCustomization from './customizations/onboardingCustomization';
 /**
  *
  * Note: this is an example of how the customization module can be used
@@ -62,6 +63,8 @@ export default function getCustomizationModule({ servicesManager, extensionManag
         ...labellingFlowCustomization,
         ...contextMenuUICustomization,
         ...viewportNotificationCustomization,
+        ...hotkeyBindingsCustomization,
+        ...onboardingCustomization,
       },
     },
   ];