@cornerstonejs/tools 1.32.2 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.32.2",
+  "version": "1.33.0",
   "description": "Cornerstone3D Tools",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.32.2",
+    "@cornerstonejs/core": "^1.33.0",
     "comlink": "^4.4.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
@@ -53,5 +53,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "c6c2dfdee7f3b1137fae77d9154809267076dc87"
+  "gitHead": "bcfcf24cacbc6d230a3ddc722823d5ecc05cbb6d"
 }

package/src/eventListeners/index.ts

@@ -7,6 +7,7 @@ import {
   segmentationRepresentationModifiedEventListener,
   segmentationRepresentationRemovedEventListener,
   segmentationModifiedListener,
+  imageChangeEventListener,
 } from './segmentation';
 import {
   annotationSelectionListener,
@@ -23,6 +24,7 @@ export {
   segmentationModifiedListener,
   segmentationRepresentationRemovedEventListener,
   segmentationDataModifiedEventListener,
+  imageChangeEventListener,
   annotationSelectionListener,
   annotationModifiedListener,
 };

package/src/eventListeners/segmentation/imageChangeEventListener.ts

@@ -0,0 +1,215 @@
+import {
+  StackViewport,
+  getEnabledElement,
+  Enums,
+  getEnabledElementByIds,
+  cache,
+  utilities,
+  Types,
+  metaData,
+} from '@cornerstonejs/core';
+import { getToolGroupForViewport } from '../../store/ToolGroupManager';
+import Representations from '../../enums/SegmentationRepresentations';
+import * as SegmentationState from '../../stateManagement/segmentation/segmentationState';
+import { LabelmapSegmentationDataStack } from '../../types/LabelmapTypes';
+import { isVolumeSegmentation } from '../../tools/segmentation/strategies/utils/stackVolumeCheck';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import triggerSegmentationRender from '../../utilities/segmentation/triggerSegmentationRender';
+
+const enable = function (element: HTMLDivElement): void {
+  const { viewport } = getEnabledElement(element);
+
+  if (!(viewport instanceof StackViewport)) {
+    return;
+  }
+
+  element.addEventListener(
+    Enums.Events.STACK_NEW_IMAGE,
+    _imageChangeEventListener as EventListener
+  );
+  // this listener handles the segmentation modifications
+  element.addEventListener(
+    Enums.Events.IMAGE_RENDERED,
+    _imageChangeEventListener as EventListener
+  );
+};
+
+const disable = function (element: HTMLDivElement): void {
+  const { viewport } = getEnabledElement(element);
+
+  if (!(viewport instanceof StackViewport)) {
+    return;
+  }
+
+  element.removeEventListener(
+    Enums.Events.STACK_NEW_IMAGE,
+    _imageChangeEventListener as EventListener
+  );
+  element.removeEventListener(
+    Enums.Events.IMAGE_RENDERED,
+    _imageChangeEventListener as EventListener
+  );
+};
+
+/**
+ *  When the image is rendered, check what tools can be rendered for this element.
+ *
+ * - First we get all tools which are active, passive or enabled on the element.
+ * - If any of these tools have a `renderAnnotation` method, then we render them.
+ * - Note that these tools don't necessarily have to be instances of  `AnnotationTool`,
+ *   Any tool may register a `renderAnnotation` method (e.g. a tool that displays an overlay).
+ *
+ * @param evt - The normalized IMAGE_RENDERED event.
+ */
+function _imageChangeEventListener(evt) {
+  const eventData = evt.detail;
+  const { viewportId, renderingEngineId } = eventData;
+  const { viewport } = getEnabledElementByIds(
+    viewportId,
+    renderingEngineId
+  ) as { viewport: Types.IStackViewport };
+
+  const toolGroup = getToolGroupForViewport(viewportId, renderingEngineId);
+  let toolGroupSegmentationRepresentations =
+    SegmentationState.getSegmentationRepresentations(toolGroup.id) || [];
+
+  toolGroupSegmentationRepresentations =
+    toolGroupSegmentationRepresentations.filter(
+      (representation) => representation.type === Representations.Labelmap
+    );
+
+  if (!toolGroupSegmentationRepresentations?.length) {
+    return;
+  }
+
+  const segmentationRepresentations = {};
+  toolGroupSegmentationRepresentations.forEach((representation) => {
+    const segmentation = SegmentationState.getSegmentation(
+      representation.segmentationId
+    );
+
+    if (!segmentation) {
+      return;
+    }
+
+    const labelmapData =
+      segmentation.representationData[Representations.Labelmap];
+
+    if (isVolumeSegmentation(labelmapData)) {
+      return;
+    }
+
+    const { imageIdReferenceMap } =
+      labelmapData as LabelmapSegmentationDataStack;
+
+    segmentationRepresentations[representation.segmentationRepresentationUID] =
+      {
+        imageIdReferenceMap,
+      };
+  });
+
+  const representationList = Object.keys(segmentationRepresentations);
+  const currentImageId = viewport.getCurrentImageId();
+  const actors = viewport.getActors();
+
+  actors.forEach((actor) => {
+    if (!representationList.includes(actor.uid)) {
+      return;
+    }
+    const segmentationActor = actor.actor;
+
+    const { imageIdReferenceMap } = segmentationRepresentations[actor.uid];
+
+    const derivedImageId = imageIdReferenceMap.get(currentImageId);
+
+    const segmentationImageData = segmentationActor.getMapper().getInputData();
+
+    if (!derivedImageId) {
+      // this means that this slice doesn't have a segmentation for this representation
+      // this can be a case where the segmentation was added to certain slices only
+      // so we can keep the actor but empty out the imageData
+      const scalarArray = vtkDataArray.newInstance({
+        name: 'Pixels',
+        numberOfComponents: 1,
+        values: new Uint8Array(segmentationImageData.getNumberOfPoints()),
+      });
+
+      const imageData = vtkImageData.newInstance();
+      imageData.getPointData().setScalars(scalarArray);
+      segmentationActor.getMapper().setInputData(imageData);
+      return;
+    }
+
+    const derivedImage = cache.getImage(derivedImageId);
+
+    const { origin, dimensions, spacing, direction } =
+      viewport.getImageDataMetadata(derivedImage);
+
+    segmentationImageData.setOrigin(origin);
+    segmentationImageData.modified();
+
+    if (
+      segmentationImageData.getDimensions()[0] !== dimensions[0] ||
+      segmentationImageData.getDimensions()[1] !== dimensions[1]
+    ) {
+      // IMPORTANT: Not sure why we can't just update the dimensions
+      // and the orientation of the image data and then call modified
+      // I tried calling modified on everything, but seems like we should remove
+      // and add the actor again below
+      viewport.removeActors([actor.uid]);
+      viewport.addImages(
+        [
+          {
+            imageId: derivedImageId,
+            actorUID: actor.uid,
+            callback: ({ imageActor }) => {
+              const scalarArray = vtkDataArray.newInstance({
+                name: 'Pixels',
+                numberOfComponents: 1,
+                values: [...derivedImage.getPixelData()],
+              });
+
+              const imageData = vtkImageData.newInstance();
+
+              imageData.setDimensions(dimensions[0], dimensions[1], 1);
+              imageData.setSpacing(spacing);
+              imageData.setDirection(direction);
+              imageData.setOrigin(origin);
+              imageData.getPointData().setScalars(scalarArray);
+
+              imageActor.getMapper().setInputData(imageData);
+            },
+          },
+        ],
+        true,
+        false
+      );
+
+      triggerSegmentationRender(toolGroup.id);
+      return;
+    }
+
+    utilities.updateVTKImageDataWithCornerstoneImage(
+      segmentationImageData,
+      derivedImage
+    );
+    viewport.render();
+
+    // This is put here to make sure that the segmentation is rendered
+    // for the initial image as well after that we don't need it since
+    // stack new image is called when changing slices
+    if (evt.type === Enums.Events.IMAGE_RENDERED) {
+      // unsubscribe after the initial render
+      viewport.element.removeEventListener(
+        Enums.Events.IMAGE_RENDERED,
+        _imageChangeEventListener as EventListener
+      );
+    }
+  });
+}
+
+export default {
+  enable,
+  disable,
+};

package/src/eventListeners/segmentation/index.ts

@@ -2,10 +2,12 @@ import segmentationRepresentationModifiedEventListener from './segmentationRepre
 import segmentationDataModifiedEventListener from './segmentationDataModifiedEventListener';
 import segmentationRepresentationRemovedEventListener from './segmentationRepresentationRemovedEventListener';
 import segmentationModifiedListener from './segmentationModifiedEventListener';
+import imageChangeEventListener from './imageChangeEventListener';
 
 export {
   segmentationRepresentationModifiedEventListener,
   segmentationDataModifiedEventListener,
   segmentationRepresentationRemovedEventListener,
   segmentationModifiedListener,
+  imageChangeEventListener,
 };

package/src/eventListeners/segmentation/segmentationDataModifiedEventListener.ts

@@ -1,9 +1,19 @@
-import { cache } from '@cornerstonejs/core';
+import {
+  cache,
+  getEnabledElementByIds,
+  utilities as csUtils,
+} from '@cornerstonejs/core';
 
 import triggerSegmentationRender from '../../utilities/segmentation/triggerSegmentationRender';
 import SegmentationRepresentations from '../../enums/SegmentationRepresentations';
 import * as SegmentationState from '../../stateManagement/segmentation/segmentationState';
 import { SegmentationDataModifiedEventType } from '../../types/EventTypes';
+import {
+  LabelmapSegmentationDataStack,
+  LabelmapSegmentationDataVolume,
+} from '../../types/LabelmapTypes';
+import { isVolumeSegmentation } from '../../tools/segmentation/strategies/utils/stackVolumeCheck';
+import { getToolGroup } from '../../store/ToolGroupManager';
 
 /** A callback function that is called when the segmentation data is modified which
  *  often is as a result of tool interactions e.g., scissors, eraser, etc.
@@ -16,11 +26,19 @@ const onSegmentationDataModified = function (
   const { representationData, type } =
     SegmentationState.getSegmentation(segmentationId);
 
-  let toolGroupIds;
-  if (type === SegmentationRepresentations.Labelmap) {
+  const toolGroupIds =
+    SegmentationState.getToolGroupIdsWithSegmentation(segmentationId);
+
+  if (type !== SegmentationRepresentations.Labelmap) {
+    throw new Error(
+      `onSegmentationDataModified: representationType ${type} not supported yet`
+    );
+  }
+
+  if (isVolumeSegmentation(representationData[type])) {
     // get the volume from cache, we need the openGLTexture to be updated to GPU
     const segmentationVolume = cache.getVolume(
-      representationData[type].volumeId
+      (representationData[type] as LabelmapSegmentationDataVolume).volumeId
     );
 
     if (!segmentationVolume) {
@@ -45,12 +63,55 @@ const onSegmentationDataModified = function (
 
     // Trigger modified on the imageData to update the image
     imageData.modified();
-    toolGroupIds =
-      SegmentationState.getToolGroupIdsWithSegmentation(segmentationId);
   } else {
-    throw new Error(
-      `onSegmentationDataModified: representationType ${type} not supported yet`
-    );
+    toolGroupIds.forEach((toolGroupId) => {
+      const toolGroupSegmentationRepresentations =
+        SegmentationState.getSegmentationRepresentations(toolGroupId);
+
+      const toolGroup = getToolGroup(toolGroupId);
+      const viewportsInfo = toolGroup.getViewportsInfo();
+
+      toolGroupSegmentationRepresentations.forEach((representation) => {
+        if (representation.segmentationId !== segmentationId) {
+          return;
+        }
+
+        viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+          const viewport = getEnabledElementByIds(
+            viewportId,
+            renderingEngineId
+          ).viewport;
+
+          const actorEntry = viewport.getActor(
+            representation.segmentationRepresentationUID
+          );
+
+          if (!actorEntry) {
+            return;
+          }
+
+          const currentImageId = viewport.getCurrentImageId();
+
+          const segImageData = actorEntry.actor.getMapper().getInputData();
+
+          const { imageIdReferenceMap } = representationData[
+            type
+          ] as LabelmapSegmentationDataStack;
+
+          const currentSegmentationImageId =
+            imageIdReferenceMap.get(currentImageId);
+
+          const segmentationImage = cache.getImage(currentSegmentationImageId);
+          segImageData.modified();
+
+          // update the cache with the new image data
+          csUtils.updateVTKImageDataWithCornerstoneImage(
+            segImageData,
+            segmentationImage
+          );
+        });
+      });
+    });
   }
 
   toolGroupIds.forEach((toolGroupId) => {

package/src/store/addEnabledElement.ts

@@ -4,6 +4,7 @@ import {
   wheelEventListener,
   touchEventListeners,
   keyEventListener,
+  imageChangeEventListener,
 } from '../eventListeners';
 import {
   imageRenderedEventDispatcher,
@@ -41,6 +42,7 @@ export default function addEnabledElement(
   wheelEventListener.enable(element);
   touchEventListeners.enable(element);
   keyEventListener.enable(element);
+  imageChangeEventListener.enable(element);
 
   // Dispatchers: renderer
   imageRenderedEventDispatcher.enable(element);

package/src/store/removeEnabledElement.ts

@@ -23,6 +23,7 @@ import { removeAnnotation } from '../stateManagement';
 import getSynchronizersForViewport from './SynchronizerManager/getSynchronizersForViewport';
 import getToolGroupForViewport from './ToolGroupManager/getToolGroupForViewport';
 import { annotationRenderingEngine } from '../utilities/triggerAnnotationRender';
+import imageChangeEventListener from '../eventListeners/segmentation/imageChangeEventListener';
 
 const VIEWPORT_ELEMENT = 'viewport-element';
 
@@ -43,7 +44,9 @@ function removeEnabledElement(
   wheelEventListener.disable(element);
   touchEventListeners.disable(element);
   keyEventListener.disable(element);
+
   // labelmap
+  imageChangeEventListener.disable(element);
 
   // Dispatchers: renderer
   imageRenderedEventDispatcher.disable(element);

package/src/tools/StackScrollToolMouseWheelTool.ts

@@ -20,6 +20,7 @@ class StackScrollMouseWheelTool extends BaseTool {
         invert: false,
         debounceIfNotLoaded: true,
         loop: false,
+        scrollSlabs: false,
       },
     }
   ) {
@@ -41,6 +42,7 @@ class StackScrollMouseWheelTool extends BaseTool {
       debounceLoading: this.configuration.debounceIfNotLoaded,
       loop: this.configuration.loop,
       volumeId,
+      scrollSlabs: this.configuration.scrollSlabs,
     });
   }
 }

package/src/tools/annotation/CircleROITool.ts

@@ -55,10 +55,7 @@ import {
 import triggerAnnotationRenderForViewportIds from '../../utilities/triggerAnnotationRenderForViewportIds';
 import { pointInShapeCallback } from '../../utilities';
 import { StyleSpecifier } from '../../types/AnnotationStyle';
-import {
-  ModalityUnitOptions,
-  getModalityUnit,
-} from '../../utilities/getModalityUnit';
+import { getModalityUnit } from '../../utilities/getModalityUnit';
 import { isViewportPreScaled } from '../../utilities/viewport/isViewportPreScaled';
 import {
   getCanvasCircleCorners,
@@ -986,7 +983,10 @@ class CircleROITool extends AnnotationTool {
 
         const pointsInShape = pointInShapeCallback(
           imageData,
-          (pointLPS, pointIJK) => pointInEllipse(ellipseObj, pointLPS),
+          (pointLPS) =>
+            pointInEllipse(ellipseObj, pointLPS, {
+              fast: true,
+            }),
           this.configuration.statsCalculator.statsCallback,
           boundsIJK
         );

package/src/tools/annotation/EllipticalROITool.ts

@@ -1114,7 +1114,7 @@ class EllipticalROITool extends AnnotationTool {
 
         const pointsInShape = pointInShapeCallback(
           imageData,
-          (pointLPS, pointIJK) => pointInEllipse(ellipseObj, pointLPS),
+          (pointLPS) => pointInEllipse(ellipseObj, pointLPS, { fast: true }),
           this.configuration.statsCalculator.statsCallback,
           boundsIJK
         );

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

@@ -1,10 +1,15 @@
 import {
   getEnabledElement,
   addVolumesToViewports,
+  addImageSlicesToViewports,
   Types,
   Enums,
 } from '@cornerstonejs/core';
-
+import {
+  LabelmapSegmentationData,
+  LabelmapSegmentationDataStack,
+} from '../../../types/LabelmapTypes';
+import { isVolumeSegmentation } from '../../segmentation/strategies/utils/stackVolumeCheck';
 /**
  * It adds a labelmap segmentation representation of the viewport's HTML Element.
  * NOTE: This function should not be called directly.
@@ -17,7 +22,7 @@ import {
  */
 async function addLabelmapToElement(
   element: HTMLDivElement,
-  volumeId: string,
+  labelMapData: LabelmapSegmentationData,
   segmentationRepresentationUID: string
 ): Promise<void> {
   const enabledElement = getEnabledElement(element);
@@ -31,27 +36,51 @@ async function addLabelmapToElement(
   const immediateRender = false;
   const suppressEvents = true;
 
-  // Todo: Right now we use MIP blend mode for the labelmap, since the
-  // composite blend mode has a non linear behavior regarding fill and line
-  // opacity. This should be changed to a custom labelmap blendMode which does
-  // what composite does, but with a linear behavior.
-  const volumeInputs: Types.IVolumeInput[] = [
-    {
-      volumeId,
-      actorUID: segmentationRepresentationUID,
-      visibility,
-      blendMode: Enums.BlendModes.MAXIMUM_INTENSITY_BLEND,
-    },
-  ];
+  if (isVolumeSegmentation(labelMapData)) {
+    // Todo: Right now we use MIP blend mode for the labelmap, since the
+    // composite blend mode has a non linear behavior regarding fill and line
+    // opacity. This should be changed to a custom labelmap blendMode which does
+    // what composite does, but with a linear behavior.
+    const volumeInputs: Types.IVolumeInput[] = [
+      {
+        volumeId: labelMapData.volumeId,
+        actorUID: segmentationRepresentationUID,
+        visibility,
+        blendMode: Enums.BlendModes.MAXIMUM_INTENSITY_BLEND,
+      },
+    ];
+
+    // Add labelmap volumes to the viewports to be be rendered, but not force the render
+    await addVolumesToViewports(
+      renderingEngine,
+      volumeInputs,
+      [viewportId],
+      immediateRender,
+      suppressEvents
+    );
+  } else {
+    // We can use the current imageId in the viewport to get the segmentation imageId
+    // which later is used to create the actor and mapper.
+    const segmentationImageId = (
+      labelMapData as LabelmapSegmentationDataStack
+    ).imageIdReferenceMap.get(viewport.getCurrentImageId());
+
+    const stackInputs: Types.IStackInput[] = [
+      {
+        imageId: segmentationImageId,
+        actorUID: segmentationRepresentationUID,
+      },
+    ];
 
-  // Add labelmap volumes to the viewports to be be rendered, but not force the render
-  await addVolumesToViewports(
-    renderingEngine,
-    volumeInputs,
-    [viewportId],
-    immediateRender,
-    suppressEvents
-  );
+    // Add labelmap volumes to the viewports to be be rendered, but not force the render
+    await addImageSlicesToViewports(
+      renderingEngine,
+      stackInputs,
+      [viewportId],
+      immediateRender,
+      suppressEvents
+    );
+  }
 }
 
 export default addLabelmapToElement;