Created a SmartScrollbar component to show cached slices in each disp…

…layset and added an extra feature to prevent scrolling to uncached slices.
OHIF · Aug 20, 2024 · d781297 · d781297
1 parent 83f3bf4
commit d781297
Show file tree

Hide file tree

Showing 20 changed files with 357 additions and 13 deletions.
diff --git a/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx b/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { SmartScrollbar } from '@ohif/ui';
 
 import ViewportImageScrollbar from './ViewportImageScrollbar';
 import CustomizableViewportOverlay from './CustomizableViewportOverlay';
@@ -45,7 +46,7 @@ function CornerstoneOverlays(props: withAppTypes) {
 
   return (
     <div className="noselect">
-      <ViewportImageScrollbar
+      <SmartScrollbar
         viewportId={viewportId}
         viewportData={viewportData}
         element={element}

diff --git a/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.css b/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.css
@@ -19,6 +19,7 @@ line, it will be truncated with ellipsis in the end.
 
 .viewport-overlay.right-viewport-scrollbar {
   text-align: right;
+  right: 1.7rem;
 }
 .viewport-overlay.right-viewport-scrollbar .flex.flex-row {
   justify-content: flex-end;

diff --git a/extensions/cornerstone/src/commandsModule.ts b/extensions/cornerstone/src/commandsModule.ts
@@ -21,6 +21,7 @@ import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import toggleVOISliceSync from './utils/toggleVOISliceSync';
+import shouldPreventScroll from './utils/shouldPreventScroll';
 
 const toggleSyncFunctions = {
   imageSlice: toggleImageSliceSync,
@@ -556,7 +557,7 @@ function commandsModule({
       const options = { imageIndex: jumpIndex };
       cstUtils.jumpToSlice(viewport.element, options);
     },
-    scroll: ({ direction }) => {
+    scroll: ({ direction, isSmartScrolling = false }) => {
       const enabledElement = _getActiveViewportEnabledElement();
 
       if (!enabledElement) {
@@ -566,6 +567,16 @@ function commandsModule({
       const { viewport } = enabledElement;
       const options = { delta: direction };
 
+      if (
+        shouldPreventScroll(
+          !isSmartScrolling,
+          viewport.getCurrentImageIdIndex() + direction,
+          servicesManager
+        )
+      ) {
+        return;
+      }
+
       cstUtils.scroll(viewport, options);
     },
     setViewportColormap: ({

diff --git a/extensions/cornerstone/src/index.tsx b/extensions/cornerstone/src/index.tsx
@@ -40,6 +40,7 @@ import getSOPInstanceAttributes from './utils/measurementServiceMappings/utils/g
 import { findNearbyToolData } from './utils/findNearbyToolData';
 import { createFrameViewSynchronizer } from './synchronizers/frameViewSynchronizer';
 import { getSopClassHandlerModule } from './getSopClassHandlerModule';
+import shouldPreventScroll from './utils/shouldPreventScroll';
 
 const { helpers: volumeLoaderHelpers } = csStreamingImageVolumeLoader;
 const { getDynamicVolumeInfo } = volumeLoaderHelpers ?? {};
@@ -209,6 +210,8 @@ const cornerstoneExtension: Types.Extensions.Extension = {
         exports: {
           toolNames,
           Enums: cs3DToolsEnums,
+          shouldPreventScroll: (keyPressed, imageIdIndex) =>
+            shouldPreventScroll(keyPressed, imageIdIndex, servicesManager),
         },
       },
       {

diff --git a/extensions/cornerstone/src/initCornerstoneTools.js b/extensions/cornerstone/src/initCornerstoneTools.js
@@ -42,6 +42,8 @@ import {
 
 import CalibrationLineTool from './tools/CalibrationLineTool';
 import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';
+import SmartStackScrollMouseWheelTool from './tools/SmartStackScrollMouseWheelTool';
+import SmartStackScrollTool from './tools/SmartStackScrollTool';
 
 export default function initCornerstoneTools(configuration = {}) {
   CrosshairsTool.isAnnotation = false;
@@ -87,6 +89,8 @@ export default function initCornerstoneTools(configuration = {}) {
   addTool(OrientationMarkerTool);
   addTool(WindowLevelRegionTool);
   addTool(PlanarFreehandContourSegmentationTool);
+  addTool(SmartStackScrollMouseWheelTool);
+  addTool(SmartStackScrollTool);
 
   // Modify annotation tools to use dashed lines on SR
   const annotationStyle = {
@@ -142,6 +146,8 @@ const toolNames = {
   OrientationMarker: OrientationMarkerTool.toolName,
   WindowLevelRegion: WindowLevelRegionTool.toolName,
   PlanarFreehandContourSegmentation: PlanarFreehandContourSegmentationTool.toolName,
+  SmartStackScrollMouseWheel: SmartStackScrollMouseWheelTool.toolName,
+  SmartStackScroll: SmartStackScrollTool.toolName,
 };
 
 export { toolNames };
diff --git a/extensions/cornerstone/src/services/ToolGroupService/ToolGroupService.ts b/extensions/cornerstone/src/services/ToolGroupService/ToolGroupService.ts
@@ -252,8 +252,8 @@ export default class ToolGroupService {
     }
 
     if (passive) {
-      passive.forEach(({ toolName }) => {
-        toolGroup.setToolPassive(toolName);
+      passive.forEach(({ toolName, bindings }) => {
+        toolGroup.setToolPassive(toolName, { bindings });
       });
     }
 

diff --git a/extensions/cornerstone/src/tools/SmartStackScrollMouseWheelTool.ts b/extensions/cornerstone/src/tools/SmartStackScrollMouseWheelTool.ts
@@ -0,0 +1,29 @@
+import { getEnabledElement } from '@cornerstonejs/core';
+import { StackScrollMouseWheelTool, Types } from '@cornerstonejs/tools';
+
+class SmartStackScrollMouseWheelTool extends StackScrollMouseWheelTool {
+  parentMouseWheelCallback: (evt: Types.EventTypes.MouseWheelEventType) => void;
+
+  constructor(toolProps, defaultToolProps) {
+    super(toolProps, defaultToolProps);
+    this.parentMouseWheelCallback = this.mouseWheelCallback;
+    this.mouseWheelCallback = this.smartMouseWheelCallback;
+  }
+
+  smartMouseWheelCallback(evt: Types.EventTypes.MouseWheelEventType): void {
+    const { wheel, element } = evt.detail;
+    const { direction } = wheel;
+    const { invert, shouldPreventScroll } = this.configuration;
+    const { viewport } = getEnabledElement(element);
+    const delta = direction * (invert ? -1 : 1);
+
+    if (shouldPreventScroll(evt.detail.event.ctrlKey, viewport.getCurrentImageIdIndex() + delta)) {
+      return;
+    }
+
+    this.parentMouseWheelCallback(evt);
+  }
+}
+
+SmartStackScrollMouseWheelTool.toolName = 'SmartStackScrollMouseWheel';
+export default SmartStackScrollMouseWheelTool;
diff --git a/extensions/cornerstone/src/tools/SmartStackScrollTool.ts b/extensions/cornerstone/src/tools/SmartStackScrollTool.ts
@@ -0,0 +1,32 @@
+import { getEnabledElementByIds } from '@cornerstonejs/core';
+import { StackScrollTool, Types } from '@cornerstonejs/tools';
+
+class SmartStackScrollTool extends StackScrollTool {
+  parentDragCallback: (evt: Types.EventTypes.InteractionEventType) => void;
+
+  constructor(toolProps, defaultToolProps) {
+    super(toolProps, defaultToolProps);
+    this.parentDragCallback = this._dragCallback;
+    this._dragCallback = this._smartDragCallback;
+  }
+
+  _smartDragCallback(evt: Types.EventTypes.InteractionEventType) {
+    const { deltaPoints, viewportId, renderingEngineId } = evt.detail;
+    const { viewport } = getEnabledElementByIds(viewportId, renderingEngineId);
+    const { invert, shouldPreventScroll } = this.configuration;
+    const deltaPointY = deltaPoints.canvas[1];
+    const pixelsPerImage = this._getPixelPerImage(viewport);
+    const deltaY = deltaPointY + this.deltaY;
+    const imageIdIndexOffset = Math.round(deltaY / pixelsPerImage);
+    const delta = invert ? -imageIdIndexOffset : imageIdIndexOffset;
+
+    if (shouldPreventScroll(evt.detail.event.ctrlKey, viewport.getCurrentImageIdIndex() + delta)) {
+      return;
+    }
+
+    return this.parentDragCallback(evt);
+  }
+}
+
+SmartStackScrollTool.toolName = 'SmartStackScroll';
+export default SmartStackScrollTool;
diff --git a/extensions/cornerstone/src/utils/shouldPreventScroll.ts b/extensions/cornerstone/src/utils/shouldPreventScroll.ts
@@ -0,0 +1,18 @@
+export default function shouldPreventScroll(
+  keyPressed: boolean,
+  imageIdIndex: number,
+  servicesManager
+): boolean {
+  const { stateSyncService, viewportGridService } = servicesManager.services;
+  const { cachedSlicesPerSeries } = stateSyncService.getState();
+  const { activeViewportId, viewports } = viewportGridService.getState();
+  const cachedSlices = cachedSlicesPerSeries[
+    viewports.get(activeViewportId).displaySetInstanceUIDs[0]
+  ] as number[];
+
+  if (!cachedSlices) {
+    return false;
+  }
+
+  return !keyPressed && !cachedSlices.includes(imageIdIndex);
+}
diff --git a/extensions/default/src/init.ts b/extensions/default/src/init.ts
@@ -61,6 +61,9 @@ export default function init({
   // afterwards.
   stateSyncService.register('viewportsByPosition', { clearOnModeExit: true });
 
+  // Stores the cached frames of each series so that we can prevent scrolling to a slice that is not cached
+  stateSyncService.register('cachedSlicesPerSeries', { clearOnModeExit: true });
+
   // Adds extra custom attributes for use by hanging protocols
   registerHangingProtocolAttributes({ servicesManager });
 

diff --git a/modes/longitudinal/src/initToolGroups.js b/modes/longitudinal/src/initToolGroups.js
@@ -21,7 +21,7 @@ function initDefaultToolGroup(
     '@ohif/extension-cornerstone.utilityModule.tools'
   );
 
-  const { toolNames, Enums } = utilityModule.exports;
+  const { toolNames, Enums, shouldPreventScroll } = utilityModule.exports;
 
   const tools = {
     active: [
@@ -37,7 +37,11 @@ function initDefaultToolGroup(
         toolName: toolNames.Zoom,
         bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
       },
-      { toolName: toolNames.StackScrollMouseWheel, bindings: [] },
+      {
+        toolName: toolNames.SmartStackScrollMouseWheel,
+        bindings: [],
+        configuration: { shouldPreventScroll },
+      },
     ],
     passive: [
       { toolName: toolNames.Length },
@@ -71,7 +75,13 @@ function initDefaultToolGroup(
       { toolName: toolNames.EllipticalROI },
       { toolName: toolNames.CircleROI },
       { toolName: toolNames.RectangleROI },
-      { toolName: toolNames.StackScroll },
+      {
+        toolName: toolNames.SmartStackScroll,
+        bindings: [
+          { mouseButton: Enums.MouseBindings.Primary, modifierKey: Enums.KeyboardBindings.Ctrl },
+        ],
+        configuration: { shouldPreventScroll },
+      },
       { toolName: toolNames.Angle },
       { toolName: toolNames.CobbAngle },
       { toolName: toolNames.Magnify },

diff --git a/modes/longitudinal/src/moreTools.ts b/modes/longitudinal/src/moreTools.ts
@@ -96,7 +96,7 @@ const moreTools = [
           evaluate: 'evaluate.cornerstoneTool.toggle',
         }),
         createButton({
-          id: 'StackScroll',
+          id: 'SmartStackScroll',
           icon: 'tool-stack-scroll',
           label: 'Stack Scroll',
           tooltip: 'Stack Scroll',

diff --git a/modes/segmentation/src/initToolGroups.ts b/modes/segmentation/src/initToolGroups.ts
@@ -11,13 +11,17 @@ const colorsByOrientation = {
 };
 
 function createTools(utilityModule) {
-  const { toolNames, Enums } = utilityModule.exports;
+  const { toolNames, Enums, shouldPreventScroll } = utilityModule.exports;
   return {
     active: [
       { toolName: toolNames.WindowLevel, bindings: [{ mouseButton: Enums.MouseBindings.Primary }] },
       { toolName: toolNames.Pan, bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }] },
       { toolName: toolNames.Zoom, bindings: [{ mouseButton: Enums.MouseBindings.Secondary }] },
-      { toolName: toolNames.StackScrollMouseWheel, bindings: [] },
+      {
+        toolName: toolNames.SmartStackScrollMouseWheel,
+        bindings: [],
+        configuration: { shouldPreventScroll },
+      },
     ],
     passive: [
       {
@@ -84,7 +88,13 @@ function createTools(utilityModule) {
       { toolName: toolNames.CircleScissors },
       { toolName: toolNames.RectangleScissors },
       { toolName: toolNames.SphereScissors },
-      { toolName: toolNames.StackScroll },
+      {
+        toolName: toolNames.SmartStackScroll,
+        bindings: [
+          { mouseButton: Enums.MouseBindings.Primary, modifierKey: Enums.KeyboardBindings.Ctrl },
+        ],
+        configuration: { shouldPreventScroll },
+      },
       { toolName: toolNames.Magnify },
       { toolName: toolNames.SegmentationDisplay },
       { toolName: toolNames.WindowLevelRegion },

diff --git a/modes/segmentation/src/toolbarButtons.ts b/modes/segmentation/src/toolbarButtons.ts
@@ -165,7 +165,7 @@ const toolbarButtons: Button[] = [
           evaluate: 'evaluate.cornerstoneTool.toggle',
         }),
         createButton({
-          id: 'StackScroll',
+          id: 'SmartStackScroll',
           icon: 'tool-stack-scroll',
           label: 'Stack Scroll',
           tooltip: 'Stack Scroll',

diff --git a/platform/core/src/defaults/hotkeyBindings.js b/platform/core/src/defaults/hotkeyBindings.js
@@ -111,12 +111,26 @@ const bindings = [
   {
     commandName: 'nextImage',
     label: 'Next Image',
-    keys: ['down'],
+    keys: ['ctrl+down'],
     isEditable: true,
   },
   {
     commandName: 'previousImage',
     label: 'Previous Image',
+    keys: ['ctrl+up'],
+    isEditable: true,
+  },
+  {
+    commandName: 'nextImage',
+    commandOptions: { isSmartScrolling: true },
+    label: 'Smart Next Image',
+    keys: ['down'],
+    isEditable: true,
+  },
+  {
+    commandName: 'previousImage',
+    commandOptions: { isSmartScrolling: true },
+    label: 'Smart Previous Image',
     keys: ['up'],
     isEditable: true,
   },

diff --git a/platform/ui/src/components/ImageScrollbar/ImageScrollbar.css b/platform/ui/src/components/ImageScrollbar/ImageScrollbar.css
@@ -1,6 +1,7 @@
 .scroll {
   height: calc(100% - 30px);
   padding: 5px;
+  padding-left: 0;
   position: absolute;
   right: 0;
   top: 30px;