fix(tools): CrosshairsTool and viewport functionality with documentat…

…ion updates (#1562)

* Core: Update ImageVolume load method and refactor imports

-  Made the `callback` parameter in `ImageVolume.load` method optional
-  Refactored import statements in `BaseStreamingImageVolume.ts` for better readability and separation of concerns
-  Removed registration of unknown volume loader in `cornerstoneStreamingImageVolumeLoader.ts`
-  Updated `volumeLoader.ts` to handle the unknown volume loader using `cornerstoneStreamingImageVolumeLoader`
-  Cleaned up package exports in `wadors/index.ts` and `wadouri/index.ts` to allow named exports
-  Removed unused UMD export path from `dicomImageLoader/package.json`

* fix playwright

* docs

* fix

* RenderingEngine: Refactor volume actor retrieval and VOI range calculation

-  Simplified the retrieval of the volume actor by directly finding the actor entry using the volume ID
-  Removed unnecessary mapping and filtering of actors to obtain VOI ranges
-  Streamlined the logic for determining the VOI range based on the volume's RGB transfer function
-  Ensured that the code handles cases where the volume actor is not found by returning early

* CrosshairsTool: Refactor computeToolCenter method

-  Renamed computeToolCenter to _computeToolCenter to indicate a private method
-  Updated all references to computeToolCenter to use the new _computeToolCenter name
-  Added a new computeToolCenter method that retrieves viewportsInfo and calls _computeToolCenter
-  Ensured consistency in method naming for better code readability and maintainability

* api

* Testing: Remove custom headers and refactor image comparison in tests

-  Removed `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` custom headers from `karma.conf.js` to simplify configuration
-  Eliminated the use of `setTimeout` in `stackSegmentation_test.js` to streamline the image comparison process
-  Directly compared images using `compareImages` for more efficient test execution
-  Cleaned up code in `jpegLossless.js` by removing unnecessary export statement

common/reviews/api/tools.api.md

@@ -1753,7 +1753,9 @@ export class CrosshairsTool extends AnnotationTool {
     // (undocumented)
     _checkIfViewportsRenderingSameScene: (viewport: any, otherViewport: any) => boolean;
     // (undocumented)
-    computeToolCenter: (viewportsInfo: any) => void;
+    computeToolCenter: () => void;
+    // (undocumented)
+    _computeToolCenter: (viewportsInfo: any) => void;
     // (undocumented)
     _deactivateModify: (element: any) => void;
     // (undocumented)

karma.conf.js

@@ -51,18 +51,6 @@ module.exports = function (config) {
       'karma-spec-reporter',
     ],
     frameworks: ['jasmine', 'webpack'],
-    customHeaders: [
-      {
-        match: '.*.html',
-        name: 'Cross-Origin-Opener-Policy',
-        value: 'same-origin',
-      },
-      {
-        match: '.*.html',
-        name: 'Cross-Origin-Embedder-Policy',
-        value: 'require-corp',
-      },
-    ],
     files: [
       'packages/core/test/**/*_test.js',
       'packages/tools/test/**/*_test.js',

packages/core/src/RenderingEngine/BaseVolumeViewport.ts

@@ -976,31 +976,30 @@ abstract class BaseVolumeViewport extends Viewport {
       slabThickness,
       preset,
     } = this.viewportProperties;
-    const volume = cache.getVolume(this.getVolumeId());
+
+    volumeId ||= this.getVolumeId();
+    const volume = cache.getVolume(volumeId);
+
     if (!volume) {
       return null;
     }
 
-    const voiRanges = this.getActors()
-      .map((actorEntry) => {
-        const volumeActor = actorEntry.actor as vtkVolume;
+    const volumeActorEntry = this.getActors().find((actorEntry) => {
+      return actorEntry.referencedId === volumeId;
+    });
 
-        if (!actorIsA(actorEntry, 'vtkVolume')) {
-          return null;
-        }
+    if (!volumeActorEntry) {
+      return;
+    }
+
+    const volumeActor = volumeActorEntry.actor as vtkVolume;
+    const cfun = volumeActor.getProperty().getRGBTransferFunction(0);
+    const [lower, upper] =
+      this.viewportProperties?.VOILUTFunction === 'SIGMOID'
+        ? getVoiFromSigmoidRGBTransferFunction(cfun)
+        : cfun.getRange();
 
-        const cfun = volumeActor.getProperty().getRGBTransferFunction(0);
-        const [lower, upper] =
-          this.viewportProperties?.VOILUTFunction === 'SIGMOID'
-            ? getVoiFromSigmoidRGBTransferFunction(cfun)
-            : cfun.getRange();
-        return { volumeId, voiRange: { lower, upper } };
-      })
-      .filter(Boolean);
-
-    const voiRange = volumeId
-      ? voiRanges.find((range) => range.volumeId === volumeId)?.voiRange
-      : voiRanges[0]?.voiRange;
+    const voiRange = { lower, upper };
 
     const volumeColormap = this.getColormap(volumeId);
 

packages/dicomImageLoader/src/codecs/jpegLossless.js

@@ -2059,5 +2059,3 @@
     [6]
   )(6);
 });
-
-export default JpegImage;

packages/docs/docs/migration-guides/2x/1-general.md

@@ -32,6 +32,15 @@ For more information, please refer to the [frameworks](../../getting-started/vue
 
 You need to modify your Vite and Webpack configurations to correctly import the Cornerstone3D library. Check each framework's repository for more details.
 
+
+## Removal of SharedArrayBuffer
+
+We have streamlined the process of loading volumes without sacrificing speed by eliminating the need for shared array buffers. This change resolves issues across various frameworks, where previously, specific security headers were required. Now, you can remove any previously set headers, which lowers the barrier for adopting Cornerstone 3D in frameworks that didn't support those headers. Shared array buffers are no longer necessary, and all related headers can be removed.
+
+You can remove `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` from your custom headers if you don't need them in other
+aspects of your app.
+
+
 ## Typescript Version
 
 We have upgraded the typescript version from 4.6 to 5.5 in the 2.0 version of the cornerstone3D.
@@ -67,6 +76,7 @@ Starting with Cornerstone3D 2.x, we will no longer ship the CommonJS (CJS) build
 Both Node.js and modern browsers now support ECMAScript Modules (ESM) by default. However, in the rare case where you need a non-ESM version, you can use the Universal Module Definition (UMD) build of the library.
 </details>
 
+
 ## Package Exports
 
 The Cornerstone libraries now utilize the `exports` field in their `package.json` files. This allows for more precise control over how modules are imported and ensures compatibility with different build systems.

packages/tools/src/tools/CrosshairsTool.ts

@@ -251,19 +251,19 @@ class CrosshairsTool extends AnnotationTool {
     this._unsubscribeToViewportNewVolumeSet(viewportsInfo);
     this._subscribeToViewportNewVolumeSet(viewportsInfo);
 
-    this.computeToolCenter(viewportsInfo);
+    this._computeToolCenter(viewportsInfo);
   }
 
   onSetToolPassive() {
     const viewportsInfo = this._getViewportsInfo();
 
-    this.computeToolCenter(viewportsInfo);
+    this._computeToolCenter(viewportsInfo);
   }
 
   onSetToolEnabled() {
     const viewportsInfo = this._getViewportsInfo();
 
-    this.computeToolCenter(viewportsInfo);
+    this._computeToolCenter(viewportsInfo);
   }
 
   onSetToolDisabled() {
@@ -330,7 +330,12 @@ class CrosshairsTool extends AnnotationTool {
       viewport.render();
     }
 
-    this.computeToolCenter(viewportsInfo);
+    this._computeToolCenter(viewportsInfo);
+  };
+
+  computeToolCenter = () => {
+    const viewportsInfo = this._getViewportsInfo();
+    this._computeToolCenter(viewportsInfo);
   };
 
   /**
@@ -342,7 +347,7 @@ class CrosshairsTool extends AnnotationTool {
    * of the two rendering viewports.
    * @param viewportsInfo Array of viewportInputs which each item containing `{viewportId, renderingEngineId}`
    */
-  computeToolCenter = (viewportsInfo): void => {
+  _computeToolCenter = (viewportsInfo): void => {
     if (!viewportsInfo.length || viewportsInfo.length === 1) {
       console.warn(
         'For crosshairs to operate, at least two viewports must be given.'
@@ -1475,7 +1480,7 @@ class CrosshairsTool extends AnnotationTool {
 
   _onNewVolume = () => {
     const viewportsInfo = this._getViewportsInfo();
-    this.computeToolCenter(viewportsInfo);
+    this._computeToolCenter(viewportsInfo);
   };
 
   _unsubscribeToViewportNewVolumeSet(viewportsInfo) {

packages/tools/src/tools/displayTools/Labelmap/addLabelmapToElement.ts

@@ -16,7 +16,10 @@ import type {
 } from '../../../types/LabelmapTypes';
 import { getCurrentLabelmapImageIdForViewport } from '../../../stateManagement/segmentation/getCurrentLabelmapImageIdForViewport';
 import { getSegmentation } from '../../../stateManagement/segmentation/getSegmentation';
-import { triggerSegmentationModified } from '../../../stateManagement/segmentation/triggerSegmentationEvents';
+import {
+  triggerSegmentationDataModified,
+  triggerSegmentationModified,
+} from '../../../stateManagement/segmentation/triggerSegmentationEvents';
 import { SegmentationRepresentations } from '../../../enums';
 
 const { uuidv4 } = utilities;
@@ -97,6 +100,9 @@ async function addLabelmapToElement(
     // Add labelmap volumes to the viewports to be be rendered, but not force the render
     await addImageSlicesToViewports(renderingEngine, stackInputs, [viewportId]);
   }
+
+  // Just to make sure if the segmentation data had value before, it gets updated too
+  triggerSegmentationDataModified(segmentationId);
 }
 
 /**

packages/tools/test/stackSegmentation_test.js

@@ -84,16 +84,14 @@ describe('Stack Segmentation Rendering:', () => {
     const vp = renderingEngine.getViewport(viewportId1);
 
     eventTarget.addEventListener(Events.SEGMENTATION_RENDERED, (evt) => {
-      setTimeout(() => {
-        const canvas = vp.getCanvas();
-        const image = canvas.toDataURL('image/png');
+      const canvas = vp.getCanvas();
+      const image = canvas.toDataURL('image/png');
 
-        compareImages(
-          image,
-          imageURI_64_64_10_5_1_1_0_SEG_Mocked,
-          'imageURI_64_64_10_5_1_1_0_SEG_Mocked'
-        ).then(done, done.fail);
-      }, 500);
+      compareImages(
+        image,
+        imageURI_64_64_10_5_1_1_0_SEG_Mocked,
+        'imageURI_64_64_10_5_1_1_0_SEG_Mocked'
+      ).then(done, done.fail);
     });
 
     try {
@@ -160,16 +158,14 @@ describe('Stack Segmentation Rendering:', () => {
       renderCount++;
 
       if (renderCount === expectedRenderCount) {
-        setTimeout(() => {
-          const canvas = vp.getCanvas();
-          const image = canvas.toDataURL('image/png');
-
-          compareImages(
-            image,
-            imageURI_64_64_10_5_1_1_0_SEG_Double_Mocked,
-            'imageURI_64_64_10_5_1_1_0_SEG_Double_Mocked'
-          ).then(done, done.fail);
-        }, 700);
+        const canvas = vp.getCanvas();
+        const image = canvas.toDataURL('image/png');
+
+        compareImages(
+          image,
+          imageURI_64_64_10_5_1_1_0_SEG_Double_Mocked,
+          'imageURI_64_64_10_5_1_1_0_SEG_Double_Mocked'
+        ).then(done, done.fail);
       }
     });