@cornerstonejs/tools 1.32.3 → 1.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.32.3",
+  "version": "1.34.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.3",
+    "@cornerstonejs/core": "^1.34.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": "0a00cbe4159dc323fcce9b374938f3eedf343ed1"
+  "gitHead": "a1bdeb0d4083453272dbca7e8c5f445d30d1fd4c"
 }

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/SynchronizerManager/Synchronizer.ts

@@ -17,6 +17,7 @@ class Synchronizer {
   //
   private _enabled: boolean;
   private _eventName: string;
+  private _auxiliaryEventNames: string[];
   private _eventHandler: ISynchronizerEventHandler;
   private _ignoreFiredEvents: boolean;
   private _sourceViewports: Array<Types.IViewportId>;
@@ -38,6 +39,7 @@ class Synchronizer {
     this._sourceViewports = [];
     this._targetViewports = [];
     this._options = options || {};
+    this._auxiliaryEventNames = this._options.auxiliaryEventNames || [];
 
     //
     this.id = synchronizerId;
@@ -89,11 +91,26 @@ class Synchronizer {
 
     const { renderingEngineId, viewportId } = viewportInfo;
 
-    const { element } =
+    const viewport =
       getRenderingEngine(renderingEngineId).getViewport(viewportId);
 
-    // @ts-ignore
+    if (!viewport) {
+      console.warn(
+        `Synchronizer.addSource: No viewport for ${renderingEngineId} ${viewportId}`
+      );
+      return;
+    }
+
+    const element = viewport.element;
+
     element.addEventListener(this._eventName, this._onEvent.bind(this));
+
+    if (this._auxiliaryEventNames.length) {
+      this._auxiliaryEventNames.forEach((eventName) => {
+        element.addEventListener(eventName, this._onEvent.bind(this));
+      });
+    }
+
     this._updateDisableHandlers();
 
     this._sourceViewports.push(viewportInfo);
@@ -157,8 +174,16 @@ class Synchronizer {
     const element = _getViewportElement(viewportInfo);
 
     this._sourceViewports.splice(index, 1);
-    // @ts-ignore
+
+    //@ts-ignore
     element.removeEventListener(this._eventName, this._eventHandler);
+
+    if (this._auxiliaryEventNames) {
+      this._auxiliaryEventNames.forEach((eventName) => {
+        //@ts-ignore
+        element.removeEventListener(eventName, this._eventHandler);
+      });
+    }
     this._updateDisableHandlers();
   }
 

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/synchronizers/callbacks/areViewportsCoplanar .ts

@@ -2,8 +2,8 @@ import { vec3 } from 'gl-matrix';
 import { Types } from '@cornerstonejs/core';
 
 export default function areViewportsCoplanar(
-  viewport1: Types.IStackViewport,
-  viewport2: Types.IStackViewport
+  viewport1: Types.IStackViewport | Types.IVolumeViewport,
+  viewport2: Types.IStackViewport | Types.IVolumeViewport
 ): boolean {
   const { viewPlaneNormal: viewPlaneNormal1 } = viewport1.getCamera();
   const { viewPlaneNormal: viewPlaneNormal2 } = viewport2.getCamera();

package/src/synchronizers/callbacks/{stackImageSyncCallback.ts → imageSliceSyncCallback.ts}

@@ -4,6 +4,7 @@ import {
   Types,
   metaData,
   utilities,
+  VolumeViewport,
 } from '@cornerstonejs/core';
 import { Synchronizer } from '../../store';
 import { jumpToSlice } from '../../utilities';
@@ -37,7 +38,7 @@ const getSpatialRegistration = (targetId, sourceId) =>
  *   the same as sourceViewport.
  * @param cameraModifiedEvent - The CAMERA_MODIFIED event.
  */
-export default async function stackImageSyncCallback(
+export default async function imageSliceSyncCallback(
   synchronizerInstance: Synchronizer,
   sourceViewport: Types.IViewportId,
   targetViewport: Types.IViewportId
@@ -49,9 +50,9 @@ export default async function stackImageSyncCallback(
     );
   }
 
-  const sViewport = renderingEngine.getViewport(
-    sourceViewport.viewportId
-  ) as Types.IStackViewport;
+  const sViewport = renderingEngine.getViewport(sourceViewport.viewportId) as
+    | Types.IVolumeViewport
+    | Types.IStackViewport;
 
   const options = synchronizerInstance.getOptions(targetViewport.viewportId);
 
@@ -59,9 +60,9 @@ export default async function stackImageSyncCallback(
     return;
   }
 
-  const tViewport = renderingEngine.getViewport(
-    targetViewport.viewportId
-  ) as Types.IStackViewport;
+  const tViewport = renderingEngine.getViewport(targetViewport.viewportId) as
+    | Types.IVolumeViewport
+    | Types.IStackViewport;
 
   const imageId1 = sViewport.getCurrentImageId();
   const imagePlaneModule1 = metaData.get('imagePlaneModule', imageId1);
@@ -116,12 +117,19 @@ export default async function stackImageSyncCallback(
     targetImageIds
   );
 
+  let imageIndexToSet = closestImageIdIndex2.index;
+  if (tViewport instanceof VolumeViewport) {
+    // since in case of volume viewport our stack is reversed, we should
+    // reverse the index as well
+    imageIndexToSet = targetImageIds.length - closestImageIdIndex2.index - 1;
+  }
+
   if (
     closestImageIdIndex2.index !== -1 &&
     tViewport.getCurrentImageIdIndex() !== closestImageIdIndex2.index
   ) {
     await jumpToSlice(tViewport.element, {
-      imageIndex: closestImageIdIndex2.index,
+      imageIndex: imageIndexToSet,
     });
   }
 }

package/src/synchronizers/index.ts

@@ -1,11 +1,15 @@
 import createCameraPositionSynchronizer from './synchronizers/createCameraPositionSynchronizer';
 import createVOISynchronizer from './synchronizers/createVOISynchronizer';
 import createZoomPanSynchronizer from './synchronizers/createZoomPanSynchronizer';
-import createStackImageSynchronizer from './synchronizers/createStackImageSynchronizer';
+import createImageSliceSynchronizer from './synchronizers/createImageSliceSynchronizer';
+
+// for backward compatibility
+const createStackImageSynchronizer = createImageSliceSynchronizer;
 
 export {
   createCameraPositionSynchronizer,
   createVOISynchronizer,
   createZoomPanSynchronizer,
+  createImageSliceSynchronizer,
   createStackImageSynchronizer,
 };

package/src/synchronizers/synchronizers/{createStackImageSynchronizer.ts → createImageSliceSynchronizer.ts}

@@ -1,24 +1,27 @@
 import { createSynchronizer } from '../../store/SynchronizerManager';
 import { Enums } from '@cornerstonejs/core';
-import stackImageSyncCallback from '../callbacks/stackImageSyncCallback';
+import imageSliceSyncCallback from '../callbacks/imageSliceSyncCallback';
 import Synchronizer from '../../store/SynchronizerManager/Synchronizer';
 
-const { STACK_NEW_IMAGE } = Enums.Events;
+const { STACK_NEW_IMAGE, VOLUME_NEW_IMAGE } = Enums.Events;
 
 /**
  * A helper that creates a new `Synchronizer` which listens to the `STACK_NEW_IMAGE`
- * rendering event and calls the `stackImageSyncCallback`.
+ * rendering event and calls the `ImageSliceSyncCallback`.
  *
  * @param synchronizerName - The name of the synchronizer.
  * @returns A new `Synchronizer` instance.
  */
-export default function createStackImageSynchronizer(
+export default function createImageSliceSynchronizer(
   synchronizerName: string
 ): Synchronizer {
   const stackImageSynchronizer = createSynchronizer(
     synchronizerName,
     STACK_NEW_IMAGE,
-    stackImageSyncCallback
+    imageSliceSyncCallback,
+    {
+      auxiliaryEventNames: [VOLUME_NEW_IMAGE],
+    }
   );
 
   return stackImageSynchronizer;

package/src/synchronizers/synchronizers/index.ts

@@ -1,11 +1,14 @@
 import createCameraPositionSynchronizer from './createCameraPositionSynchronizer';
 import createVOISynchronizer from './createVOISynchronizer';
 import createZoomPanSynchronizer from './createZoomPanSynchronizer';
-import createStackImageSynchronizer from './createStackImageSynchronizer';
+import createImageSliceSynchronizer from './createImageSliceSynchronizer';
 
+// for backward compatibility
+const createStackImageSynchronizer = createImageSliceSynchronizer;
 export {
   createCameraPositionSynchronizer,
   createVOISynchronizer,
   createZoomPanSynchronizer,
+  createImageSliceSynchronizer,
   createStackImageSynchronizer,
 };

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
         );