fix(crosshairs): reset angle, position, and slabthickness for crossha…

…irs when reset viewport tool is used (#4113) Co-authored-by: Alireza <[email protected]>
OHIF · May 23, 2024 · 73d9e99 · 73d9e99
1 parent 1124c40
commit 73d9e99
Show file tree

Hide file tree

Showing 17 changed files with 200 additions and 49 deletions.
diff --git a/extensions/cornerstone-dicom-seg/package.json b/extensions/cornerstone-dicom-seg/package.json
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.74.6",
-    "@cornerstonejs/core": "^1.74.6",
+    "@cornerstonejs/adapters": "^1.74.7",
+    "@cornerstonejs/core": "^1.74.7",
     "@kitware/vtk.js": "30.4.1",
     "react-color": "^2.19.3"
   }

diff --git a/extensions/cornerstone-dicom-sr/package.json b/extensions/cornerstone-dicom-sr/package.json
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.74.6",
-    "@cornerstonejs/core": "^1.74.6",
-    "@cornerstonejs/tools": "^1.74.6",
+    "@cornerstonejs/adapters": "^1.74.7",
+    "@cornerstonejs/core": "^1.74.7",
+    "@cornerstonejs/tools": "^1.74.7",
     "classnames": "^2.3.2"
   }
 }
diff --git a/extensions/cornerstone-dynamic-volume/package.json b/extensions/cornerstone-dynamic-volume/package.json
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^1.74.6",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.74.6",
-    "@cornerstonejs/tools": "^1.74.6",
+    "@cornerstonejs/core": "^1.74.7",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.74.7",
+    "@cornerstonejs/tools": "^1.74.7",
     "classnames": "^2.3.2"
   }
 }
diff --git a/extensions/cornerstone/package.json b/extensions/cornerstone/package.json
@@ -38,7 +38,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.74.6",
+    "@cornerstonejs/dicom-image-loader": "^1.74.7",
     "@icr/polyseg-wasm": "^0.4.0",
     "@ohif/core": "3.9.0-beta.16",
     "@ohif/ui": "3.9.0-beta.16",
@@ -55,10 +55,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.74.6",
-    "@cornerstonejs/core": "^1.74.6",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.74.6",
-    "@cornerstonejs/tools": "^1.74.6",
+    "@cornerstonejs/adapters": "^1.74.7",
+    "@cornerstonejs/core": "^1.74.7",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.74.7",
+    "@cornerstonejs/tools": "^1.74.7",
     "@icr/polyseg-wasm": "^0.4.0",
     "@kitware/vtk.js": "30.4.1",
     "html2canvas": "^1.4.1",

diff --git a/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx b/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { LayoutSelector as OHIFLayoutSelector, ToolbarButton, LayoutPreset } from '@ohif/ui';
 
@@ -134,22 +134,30 @@ function LayoutSelector({
   ...rest
 }: withAppTypes) {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
 
   const { customizationService } = servicesManager.services;
   const commonPresets = customizationService.get('commonPresets') || defaultCommonPresets;
   const advancedPresets =
     customizationService.get('advancedPresets') || generateAdvancedPresets({ servicesManager });
 
-  const closeOnOutsideClick = () => {
-    if (isOpen) {
+  const closeOnOutsideClick = event => {
+    if (isOpen && dropdownRef.current) {
       setIsOpen(false);
     }
   };
 
   useEffect(() => {
-    window.addEventListener('click', closeOnOutsideClick);
+    if (!isOpen) {
+      return;
+    }
+
+    setTimeout(() => {
+      window.addEventListener('click', closeOnOutsideClick);
+    }, 0);
     return () => {
       window.removeEventListener('click', closeOnOutsideClick);
+      dropdownRef.current = null;
     };
   }, [isOpen]);
 
@@ -169,7 +177,10 @@ function LayoutSelector({
       disableToolTip={tooltipDisabled}
       dropdownContent={
         DropdownContent !== null && (
-          <div className="flex ">
+          <div
+            className="flex"
+            ref={dropdownRef}
+          >
             <div className="bg-secondary-dark flex flex-col gap-2.5 p-2">
               <div className="text-aqua-pale text-xs">Common</div>
 

diff --git a/extensions/measurement-tracking/package.json b/extensions/measurement-tracking/package.json
@@ -32,8 +32,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^1.74.6",
-    "@cornerstonejs/tools": "^1.74.6",
+    "@cornerstonejs/core": "^1.74.7",
+    "@cornerstonejs/tools": "^1.74.7",
     "@ohif/core": "3.9.0-beta.16",
     "@ohif/extension-cornerstone-dicom-sr": "3.9.0-beta.16",
     "@ohif/ui": "3.9.0-beta.16",

diff --git a/modes/longitudinal/src/initToolGroups.js b/modes/longitudinal/src/initToolGroups.js
@@ -77,9 +77,12 @@ function initDefaultToolGroup(
       { toolName: toolNames.Magnify },
       { toolName: toolNames.SegmentationDisplay },
       { toolName: toolNames.CalibrationLine },
-      { toolName: toolNames.PlanarFreehandContourSegmentation, configuration: {
-        displayOnePointAsCrosshairs: true,
-      } },
+      {
+        toolName: toolNames.PlanarFreehandContourSegmentation,
+        configuration: {
+          displayOnePointAsCrosshairs: true,
+        },
+      },
       { toolName: toolNames.UltrasoundDirectional },
       { toolName: toolNames.PlanarFreehandROI },
       { toolName: toolNames.SplineROI },
@@ -150,9 +153,12 @@ function initSRToolGroup(extensionManager, toolGroupService) {
       { toolName: SRToolNames.SRCircleROI },
       { toolName: SRToolNames.SRPlanarFreehandROI },
       { toolName: SRToolNames.SRRectangleROI },
-      { toolName: SRToolNames.SRPlanarFreehandContourSegmentation, configuration: {
-        displayOnePointAsCrosshairs: true,
-      } },
+      {
+        toolName: SRToolNames.SRPlanarFreehandContourSegmentation,
+        configuration: {
+          displayOnePointAsCrosshairs: true,
+        },
+      },
     ],
     enabled: [
       {
@@ -230,15 +236,23 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager, m
       { toolName: toolNames.CobbAngle },
       { toolName: toolNames.PlanarFreehandROI },
       { toolName: toolNames.SegmentationDisplay },
-      { toolName: toolNames.PlanarFreehandContourSegmentation, configuration: {
-        displayOnePointAsCrosshairs: true,
-      } },
+      {
+        toolName: toolNames.PlanarFreehandContourSegmentation,
+        configuration: {
+          displayOnePointAsCrosshairs: true,
+        },
+      },
     ],
     disabled: [
       {
         toolName: toolNames.Crosshairs,
         configuration: {
-          viewportIndicators: false,
+          viewportIndicators: true,
+          viewportIndicatorsConfig: {
+            circleRadius: 5,
+            xOffset: 0.95,
+            yOffset: 0.05,
+          },
           disableOnPassive: true,
           autoPan: {
             enabled: false,

diff --git a/modes/preclinical-4d/src/index.tsx b/modes/preclinical-4d/src/index.tsx
@@ -55,7 +55,7 @@ function modeFactory({ modeConfiguration }) {
       const { toolNames, Enums } = utilityModule.exports;
 
       measurementService.clearMeasurements();
-      initToolGroups({ toolNames, Enums, toolGroupService, commandsManager });
+      initToolGroups({ toolNames, Enums, toolGroupService, commandsManager, servicesManager });
 
       toolbarService.addButtons([...toolbarButtons, ...segmentationButtons]);
       toolbarService.createButtonSection('secondary', ['ProgressDropdown']);

diff --git a/modes/preclinical-4d/src/initToolGroups.tsx b/modes/preclinical-4d/src/initToolGroups.tsx
@@ -5,7 +5,20 @@ const toolGroupIds = {
   CT: 'dynamic4D-ct',
 };
 
-function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
+const colours = {
+  'viewport-0': 'rgb(200, 0, 0)',
+  'viewport-1': 'rgb(200, 200, 0)',
+  'viewport-2': 'rgb(0, 200, 0)',
+};
+
+const colorsByOrientation = {
+  axial: 'rgb(200, 0, 0)',
+  sagittal: 'rgb(200, 200, 0)',
+  coronal: 'rgb(0, 200, 0)',
+};
+
+function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, servicesManager) {
+  const { cornerstoneViewportService } = servicesManager.services;
   const tools = {
     active: [
       {
@@ -94,12 +107,31 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
       {
         toolName: toolNames.Crosshairs,
         configuration: {
-          viewportIndicators: false,
+          viewportIndicators: true,
+          viewportIndicatorsConfig: {
+            circleRadius: 5,
+            xOffset: 0.95,
+            yOffset: 0.05,
+          },
           disableOnPassive: true,
           autoPan: {
             enabled: false,
             panSize: 10,
           },
+          getReferenceLineColor: viewportId => {
+            const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+            const viewportOptions = viewportInfo?.viewportOptions;
+            if (viewportOptions) {
+              return (
+                colours[viewportOptions.id] ||
+                colorsByOrientation[viewportOptions.orientation] ||
+                '#0c0'
+              );
+            } else {
+              console.warn('missing viewport?', viewportId);
+              return '#0c0';
+            }
+          },
         },
       },
     ],
@@ -123,8 +155,8 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
   toolGroupService.createToolGroupAndAddTools(toolGroupIds.default, tools);
 }
 
-function initToolGroups({ toolNames, Enums, toolGroupService, commandsManager }) {
-  _initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
+function initToolGroups({ toolNames, Enums, toolGroupService, commandsManager, servicesManager }) {
+  _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, servicesManager);
 }
 
 export { initToolGroups as default, toolGroupIds };
diff --git a/modes/segmentation/src/initToolGroups.ts b/modes/segmentation/src/initToolGroups.ts
@@ -1,3 +1,15 @@
+const colours = {
+  'viewport-0': 'rgb(200, 0, 0)',
+  'viewport-1': 'rgb(200, 200, 0)',
+  'viewport-2': 'rgb(0, 200, 0)',
+};
+
+const colorsByOrientation = {
+  axial: 'rgb(200, 0, 0)',
+  sagittal: 'rgb(200, 200, 0)',
+  coronal: 'rgb(0, 200, 0)',
+};
+
 function createTools(utilityModule) {
   const { toolNames, Enums } = utilityModule.exports;
   return {
@@ -94,17 +106,38 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
   const utilityModule = extensionManager.getModuleEntry(
     '@ohif/extension-cornerstone.utilityModule.tools'
   );
+  const servicesManager = extensionManager._servicesManager;
+  const { cornerstoneViewportService } = servicesManager.services;
   const tools = createTools(utilityModule);
   tools.disabled.push(
     {
       toolName: utilityModule.exports.toolNames.Crosshairs,
       configuration: {
-        viewportIndicators: false,
+        viewportIndicators: true,
+        viewportIndicatorsConfig: {
+          circleRadius: 5,
+          xOffset: 0.95,
+          yOffset: 0.05,
+        },
         disableOnPassive: true,
         autoPan: {
           enabled: false,
           panSize: 10,
         },
+        getReferenceLineColor: viewportId => {
+          const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+          const viewportOptions = viewportInfo?.viewportOptions;
+          if (viewportOptions) {
+            return (
+              colours[viewportOptions.id] ||
+              colorsByOrientation[viewportOptions.orientation] ||
+              '#0c0'
+            );
+          } else {
+            console.warn('missing viewport?', viewportId);
+            return '#0c0';
+          }
+        },
       },
     },
     { toolName: utilityModule.exports.toolNames.ReferenceLines }

diff --git a/modes/tmtv/src/index.ts b/modes/tmtv/src/index.ts
@@ -63,7 +63,7 @@ function modeFactory({ modeConfiguration }) {
       const { toolNames, Enums } = utilityModule.exports;
 
       // Init Default and SR ToolGroups
-      initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
+      initToolGroups(toolNames, Enums, toolGroupService, commandsManager, null, servicesManager);
 
       const { unsubscribe } = toolGroupService.subscribe(
         toolGroupService.EVENTS.VIEWPORT_ADDED,

diff --git a/modes/tmtv/src/initToolGroups.js b/modes/tmtv/src/initToolGroups.js
@@ -6,7 +6,14 @@ export const toolGroupIds = {
   default: 'default',
 };
 
-function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig) {
+function _initToolGroups(
+  toolNames,
+  Enums,
+  toolGroupService,
+  commandsManager,
+  modeLabelConfig,
+  servicesManager
+) {
   const tools = {
     active: [
       {
@@ -125,7 +132,12 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, mo
       {
         toolName: toolNames.Crosshairs,
         configuration: {
-          viewportIndicators: false,
+          viewportIndicators: true,
+          viewportIndicatorsConfig: {
+            circleRadius: 5,
+            xOffset: 0.95,
+            yOffset: 0.05,
+          },
           disableOnPassive: true,
           autoPan: {
             enabled: false,
@@ -178,8 +190,22 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, mo
   toolGroupService.createToolGroupAndAddTools(toolGroupIds.MIP, mipTools);
 }
 
-function initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig) {
-  _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig);
+function initToolGroups(
+  toolNames,
+  Enums,
+  toolGroupService,
+  commandsManager,
+  modeLabelConfig,
+  servicesManager
+) {
+  _initToolGroups(
+    toolNames,
+    Enums,
+    toolGroupService,
+    commandsManager,
+    modeLabelConfig,
+    servicesManager
+  );
 }
 
 export default initToolGroups;
diff --git a/platform/app/package.json b/platform/app/package.json
@@ -53,7 +53,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^1.74.6",
+    "@cornerstonejs/dicom-image-loader": "^1.74.7",
     "@emotion/serialize": "^1.1.3",
     "@ohif/core": "3.9.0-beta.16",
     "@ohif/extension-cornerstone": "3.9.0-beta.16",