@cornerstonejs/tools 1.42.1 → 1.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.42.1",
+  "version": "1.43.0",
   "description": "Cornerstone3D Tools",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -29,13 +29,13 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.42.1",
+    "@cornerstonejs/core": "^1.43.0",
     "comlink": "^4.4.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
   "peerDependencies": {
-    "@kitware/vtk.js": "27.3.1",
+    "@kitware/vtk.js": "29.3.0",
     "@types/d3-array": "^3.0.4",
     "@types/d3-interpolate": "^3.0.1",
     "d3-array": "^3.2.3",
@@ -53,5 +53,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "14a1bff3ba983b6664529e8e829a655cc4ffda89"
+  "gitHead": "1681f72fb2df75001f844a2e1728f2e9b79b6985"
 }

package/src/index.ts

@@ -66,6 +66,7 @@ import {
   OrientationMarkerTool,
   OverlayGridTool,
   SegmentationIntersectionTool,
+  SegmentSelectTool,
 } from './tools';
 
 import VideoRedactionTool from './tools/annotation/VideoRedactionTool';
@@ -129,6 +130,7 @@ export {
   RectangleROIStartEndThresholdTool,
   BrushTool,
   OrientationMarkerTool,
+  SegmentSelectTool,
   // Synchronizers
   synchronizers,
   Synchronizer,

package/src/stateManagement/segmentation/activeSegmentation.ts

@@ -1,5 +1,8 @@
 import { ToolGroupSpecificRepresentation } from '../../types/SegmentationStateTypes';
-import { getDefaultSegmentationStateManager } from './segmentationState';
+import {
+  getDefaultSegmentationStateManager,
+  getSegmentation,
+} from './segmentationState';
 import { triggerSegmentationRepresentationModified } from './triggerSegmentationEvents';
 
 /**
@@ -27,6 +30,25 @@ function getActiveSegmentationRepresentation(
   return activeRepresentation;
 }
 
+/**
+ * Retrieves the active segmentation for a given tool group.
+ * @param toolGroupId - The ID of the tool group.
+ * @returns The active segmentation Id, or undefined if no active segmentation is found.
+ */
+function getActiveSegmentation(toolGroupId: string) {
+  const activeRepresentation = getActiveSegmentationRepresentation(toolGroupId);
+
+  if (!activeRepresentation) {
+    return;
+  }
+
+  const activeSegmentation = getSegmentation(
+    activeRepresentation.segmentationId
+  );
+
+  return activeSegmentation;
+}
+
 /**
  * Set the active segmentation for the given tool group for all its viewports
  *
@@ -55,6 +77,7 @@ function setActiveSegmentationRepresentation(
 export {
   // get
   getActiveSegmentationRepresentation,
+  getActiveSegmentation,
   // set
   setActiveSegmentationRepresentation,
 };

package/src/stateManagement/segmentation/segmentIndex.ts

@@ -1,9 +1,15 @@
-import { getSegmentation } from './segmentationState';
+import { invalidateBrushCursor } from '../../utilities/segmentation/';
+import {
+  getSegmentation,
+  getToolGroupIdsWithSegmentation,
+} from './segmentationState';
 import { triggerSegmentationModified } from './triggerSegmentationEvents';
 
 /**
  * Set the active segment index for a segmentation Id. It fires a global state
- * modified event.
+ * modified event. Also it invalidates the brush cursor for all toolGroups that
+ * has the segmentationId as active segment (since the brush cursor color
+ * should change as well)
  *
  * @triggers SEGMENTATION_MODIFIED
  * @param segmentationId - The id of the segmentation that the segment belongs to.
@@ -20,6 +26,13 @@ function setActiveSegmentIndex(
 
     triggerSegmentationModified(segmentationId);
   }
+
+  // get all toolGroups that has the segmentationId as active
+  // segment and call invalidateBrushCursor on them
+  const toolGroups = getToolGroupIdsWithSegmentation(segmentationId);
+  toolGroups.forEach((toolGroupId) => {
+    invalidateBrushCursor(toolGroupId);
+  });
 }
 
 /**

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

@@ -4,6 +4,7 @@ const defaultLabelmapConfig: LabelmapConfig = {
   renderOutline: true,
   outlineWidthActive: 3,
   outlineWidthInactive: 2,
+  activeSegmentOutlineWidthDelta: 0,
   renderFill: true,
   renderFillInactive: true,
   fillAlpha: 0.7,
@@ -24,6 +25,7 @@ function isValidLabelmapConfig(config): boolean {
     typeof config.renderOutline === 'boolean' &&
     typeof config.outlineWidthActive === 'number' &&
     typeof config.outlineWidthInactive === 'number' &&
+    typeof config.activeSegmentOutlineWidthDelta === 'number' &&
     typeof config.renderFill === 'boolean' &&
     typeof config.renderFillInactive === 'boolean' &&
     typeof config.fillAlpha === 'number' &&

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

@@ -6,7 +6,6 @@ import {
   getEnabledElementByIds,
   StackViewport,
   Types,
-  utilities,
   VolumeViewport,
 } from '@cornerstonejs/core';
 
@@ -302,27 +301,39 @@ function _setLabelmapColorAndOpacity(
     }
   }
 
-  const actor = actorEntry.actor as Types.Actor;
+  const actor = actorEntry.actor as Types.VolumeActor;
 
-  // @ts-ignore
   actor.getProperty().setRGBTransferFunction(0, cfun);
 
   ofun.setClamping(false);
 
-  // @ts-ignore
   actor.getProperty().setScalarOpacity(0, ofun);
-  // @ts-ignore
   actor.getProperty().setInterpolationTypeToNearest();
+  actor.getProperty().setUseLabelOutline(renderOutline);
 
-  if (utilities.actorIsA(actorEntry, 'vtkVolume')) {
-    // @ts-ignore
-    actor.getProperty().setUseLabelOutline(renderOutline);
-    // @ts-ignore
-    actor.getProperty().setLabelOutlineOpacity(outlineOpacity);
-    // @ts-ignore
-    actor.getProperty().setLabelOutlineThickness(outlineWidth);
+  // @ts-ignore - fix type in vtk
+  actor.getProperty().setLabelOutlineOpacity(outlineOpacity);
+
+  const { activeSegmentIndex } = SegmentationState.getSegmentation(
+    segmentationRepresentation.segmentationId
+  );
+
+  // create an array that contains all the segment indices and for the active
+  // segment index, use the activeSegmentOutlineWidthDelta, otherwise use the
+  // outlineWidth
+  // Pre-allocate the array with the required size to avoid dynamic resizing.
+  const outlineWidths = new Array(numColors - 1);
+
+  for (let i = 1; i < numColors; i++) {
+    // Start from 1 to skip the background segment index.
+    outlineWidths[i - 1] =
+      i === activeSegmentIndex
+        ? outlineWidth + toolGroupLabelmapConfig.activeSegmentOutlineWidthDelta
+        : outlineWidth;
   }
 
+  actor.getProperty().setLabelOutlineThickness(outlineWidths);
+
   // Set visibility based on whether actor visibility is specifically asked
   // to be turned on/off (on by default) AND whether is is in active but
   // we are rendering inactive labelmap

package/src/tools/index.ts

@@ -47,6 +47,7 @@ import RectangleROIStartEndThresholdTool from './segmentation/RectangleROIStartE
 import BrushTool from './segmentation/BrushTool';
 import PaintFillTool from './segmentation/PaintFillTool';
 import OrientationMarkerTool from './OrientationMarkerTool';
+import SegmentSelectTool from './segmentation/SegmentSelectTool';
 
 export {
   // ~~ BASE
@@ -99,4 +100,5 @@ export {
   PaintFillTool,
   ScaleOverlayTool,
   OrientationMarkerTool,
+  SegmentSelectTool,
 };

package/src/tools/segmentation/BrushTool.ts

@@ -179,7 +179,7 @@ class BrushTool extends BaseTool {
       activeSegmentation.getActiveSegmentationRepresentation(toolGroupId);
     if (!activeSegmentationRepresentation) {
       throw new Error(
-        'No active segmentation detected, create one before using the brush tool'
+        'No active segmentation detected, create a segmentation representation before using the brush tool'
       );
     }
 
@@ -271,9 +271,11 @@ class BrushTool extends BaseTool {
     this._previewData.isDrag = false;
     this._previewData.timerStart = Date.now();
 
+    const hoverData = this._hoverData || this.createHoverData(element);
+
     triggerAnnotationRenderForViewportUIDs(
       renderingEngine,
-      this._hoverData.viewportIdsToRender
+      hoverData.viewportIdsToRender
     );
 
     this.applyActiveStrategyCallback(
@@ -362,6 +364,40 @@ class BrushTool extends BaseTool {
     const camera = viewport.getCamera();
     const { viewPlaneNormal, viewUp } = camera;
 
+    const viewportIdsToRender = [viewport.id];
+
+    const {
+      segmentIndex,
+      segmentationId,
+      segmentationRepresentationUID,
+      segmentColor,
+    } = this.getActiveSegmentationData() || {};
+
+    // Center of circle in canvas Coordinates
+    const brushCursor = {
+      metadata: {
+        viewPlaneNormal: <Types.Point3>[...viewPlaneNormal],
+        viewUp: <Types.Point3>[...viewUp],
+        FrameOfReferenceUID: viewport.getFrameOfReferenceUID(),
+        referencedImageId: '',
+        toolName: this.getToolName(),
+        segmentColor,
+      },
+      data: {},
+    };
+
+    return {
+      brushCursor,
+      centerCanvas,
+      segmentIndex,
+      segmentationId,
+      segmentationRepresentationUID,
+      segmentColor,
+      viewportIdsToRender,
+    };
+  }
+
+  private getActiveSegmentationData() {
     const toolGroupId = this.toolGroupId;
 
     const activeSegmentationRepresentation =
@@ -384,30 +420,11 @@ class BrushTool extends BaseTool {
       segmentIndex
     );
 
-    const viewportIdsToRender = [viewport.id];
-
-    // Center of circle in canvas Coordinates
-
-    const brushCursor = {
-      metadata: {
-        viewPlaneNormal: <Types.Point3>[...viewPlaneNormal],
-        viewUp: <Types.Point3>[...viewUp],
-        FrameOfReferenceUID: viewport.getFrameOfReferenceUID(),
-        referencedImageId: '',
-        toolName: this.getToolName(),
-        segmentColor,
-      },
-      data: {},
-    };
-
     return {
-      brushCursor,
-      centerCanvas,
       segmentIndex,
       segmentationId,
       segmentationRepresentationUID,
       segmentColor,
-      viewportIdsToRender,
     };
   }
 
@@ -678,11 +695,17 @@ class BrushTool extends BaseTool {
   };
 
   public invalidateBrushCursor() {
-    if (this._hoverData !== undefined) {
-      const { data } = this._hoverData.brushCursor;
-
-      data.invalidated = true;
+    if (this._hoverData === undefined) {
+      return;
     }
+    const { data } = this._hoverData.brushCursor;
+
+    data.invalidated = true;
+
+    // Todo: figure out if other brush metadata (other than segment color) should get updated
+    // during the brush cursor invalidation
+    const { segmentColor } = this.getActiveSegmentationData() || {};
+    this._hoverData.brushCursor.metadata.segmentColor = segmentColor;
   }
 
   renderAnnotation(
@@ -713,6 +736,10 @@ class BrushTool extends BaseTool {
     }
 
     const toolMetadata = brushCursor.metadata;
+    if (!toolMetadata) {
+      return;
+    }
+
     const annotationUID = toolMetadata.brushCursorUID;
 
     const data = brushCursor.data;
@@ -729,7 +756,7 @@ class BrushTool extends BaseTool {
 
     const radius = Math.abs(bottom[1] - Math.floor((bottom[1] + top[1]) / 2));
 
-    const color = `rgb(${toolMetadata.segmentColor.slice(0, 3)})`;
+    const color = `rgb(${toolMetadata.segmentColor?.slice(0, 3) || [0, 0, 0]})`;
 
     // If rendering engine has been destroyed while rendering
     if (!viewport.getRenderingEngine()) {

package/src/tools/segmentation/CircleScissorsTool.ts

@@ -89,6 +89,13 @@ class CircleScissorsTool extends BaseTool {
    *
    */
   preMouseDownCallback = (evt: EventTypes.InteractionEventType): boolean => {
+    // if we are already drawing, means we have started with a click, and now we
+    // are moving the mouse (not dragging) so the final click should not
+    // be handled by this preMouseDownCallback but rather the endCallback
+    if (this.isDrawing === true) {
+      return;
+    }
+
     const eventDetail = evt.detail;
     const { currentPoints, element } = eventDetail;
     const worldPos = currentPoints.world;
@@ -292,6 +299,7 @@ class CircleScissorsTool extends BaseTool {
     element.addEventListener(Events.MOUSE_UP, this._endCallback);
     element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);
     element.addEventListener(Events.MOUSE_CLICK, this._endCallback);
+    element.addEventListener(Events.MOUSE_MOVE, this._dragCallback);
 
     element.addEventListener(Events.TOUCH_TAP, this._endCallback);
     element.addEventListener(Events.TOUCH_DRAG, this._dragCallback);
@@ -305,6 +313,7 @@ class CircleScissorsTool extends BaseTool {
     element.removeEventListener(Events.MOUSE_UP, this._endCallback);
     element.removeEventListener(Events.MOUSE_DRAG, this._dragCallback);
     element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);
+    element.removeEventListener(Events.MOUSE_MOVE, this._dragCallback);
 
     element.removeEventListener(Events.TOUCH_END, this._endCallback);
     element.removeEventListener(Events.TOUCH_DRAG, this._dragCallback);

package/src/tools/segmentation/RectangleScissorsTool.ts

@@ -91,6 +91,13 @@ class RectangleScissorsTool extends BaseTool {
    *
    */
   preMouseDownCallback = (evt: EventTypes.InteractionEventType): boolean => {
+    // if we are already drawing, means we have started with a click, and now we
+    // are moving the mouse (not dragging) so the final click should not
+    // be handled by this preMouseDownCallback but rather the endCallback
+    if (this.isDrawing === true) {
+      return;
+    }
+
     const eventDetail = evt.detail;
     const { currentPoints, element } = eventDetail;
     const worldPos = currentPoints.world;
@@ -315,6 +322,7 @@ class RectangleScissorsTool extends BaseTool {
   _activateDraw = (element) => {
     element.addEventListener(Events.MOUSE_UP, this._endCallback);
     element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);
+    element.addEventListener(Events.MOUSE_MOVE, this._dragCallback);
     element.addEventListener(Events.MOUSE_CLICK, this._endCallback);
 
     element.addEventListener(Events.TOUCH_END, this._endCallback);
@@ -328,9 +336,10 @@ class RectangleScissorsTool extends BaseTool {
   _deactivateDraw = (element) => {
     element.removeEventListener(Events.MOUSE_UP, this._endCallback);
     element.removeEventListener(Events.MOUSE_DRAG, this._dragCallback);
+    element.removeEventListener(Events.MOUSE_MOVE, this._dragCallback);
     element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);
-    element.removeEventListener(Events.TOUCH_TAP, this._endCallback);
 
+    element.removeEventListener(Events.TOUCH_TAP, this._endCallback);
     element.removeEventListener(Events.TOUCH_END, this._endCallback);
     element.removeEventListener(Events.TOUCH_DRAG, this._dragCallback);
   };

package/src/tools/segmentation/SegmentSelectTool.ts

@@ -0,0 +1,182 @@
+import {
+  cache,
+  getEnabledElement,
+  utilities as csUtils,
+} from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { BaseTool } from '../base';
+import {
+  PublicToolProps,
+  ToolProps,
+  EventTypes,
+  Segmentation,
+} from '../../types';
+import { triggerSegmentationModified } from '../../stateManagement/segmentation/triggerSegmentationEvents';
+import triggerAnnotationRenderForViewportIds from '../../utilities/triggerAnnotationRenderForViewportIds';
+import {
+  LabelmapSegmentationDataStack,
+  LabelmapSegmentationDataVolume,
+} from '../../types/LabelmapTypes';
+import { isVolumeSegmentation } from './strategies/utils/stackVolumeCheck';
+import {
+  getActiveSegmentation,
+  getActiveSegmentationRepresentation,
+} from '../../stateManagement/segmentation/activeSegmentation';
+import RepresentationTypes from '../../enums/SegmentationRepresentations';
+import { setActiveSegmentIndex } from '../../stateManagement/segmentation/segmentIndex';
+
+/**
+ * Represents a tool used for segment selection. It is used to select a segment
+ * by hovering over it.
+ *
+ */
+class SegmentSelectTool extends BaseTool {
+  static toolName;
+  private hoverTimer: ReturnType<typeof setTimeout> | null;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        hoverTimeout: 750,
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+    this.hoverTimer = null;
+  }
+
+  mouseMoveCallback = (evt: EventTypes.InteractionEventType): boolean => {
+    if (this.hoverTimer) {
+      clearTimeout(this.hoverTimer);
+    }
+
+    this.hoverTimer = setTimeout(() => {
+      this._setActiveSegment(evt);
+      this.hoverTimer = null;
+    }, this.configuration.hoverTimeout);
+
+    return true;
+  };
+
+  onSetToolEnabled = (): void => {
+    this.onSetToolActive();
+  };
+
+  onSetToolActive = (): void => {
+    this.hoverTimer = null;
+  };
+
+  onSetToolDisabled = (): void => {
+    this.hoverTimer = null;
+  };
+
+  _setActiveSegment(evt = {} as EventTypes.InteractionEventType): void {
+    const { element, currentPoints } = evt.detail;
+
+    const worldPoint = currentPoints.world;
+
+    const enabledElement = getEnabledElement(element);
+
+    if (!enabledElement) {
+      return;
+    }
+
+    const { viewport } = enabledElement;
+
+    const activeSegmentation = getActiveSegmentation(this.toolGroupId);
+
+    if (activeSegmentation.type === RepresentationTypes.Labelmap) {
+      this._setActiveSegmentLabelmap(activeSegmentation, worldPoint, viewport);
+    } else {
+      throw Error('non-labelmap segmentation not supported yet');
+    }
+  }
+
+  _setActiveSegmentLabelmap(
+    activeSegmentation: Segmentation,
+    worldPoint: Types.Point3,
+    viewport: Types.IStackViewport | Types.IVolumeViewport
+  ): void {
+    const imageDataInfo = viewport.getImageData();
+
+    if (!imageDataInfo) {
+      return;
+    }
+
+    const labelmapData = activeSegmentation.representationData.LABELMAP;
+
+    let hoveredSegmentIndex;
+
+    if (isVolumeSegmentation(activeSegmentation.representationData.LABELMAP)) {
+      const { volumeId } = labelmapData as LabelmapSegmentationDataVolume;
+
+      const segmentationVolume = cache.getVolume(volumeId);
+
+      if (!segmentationVolume) {
+        return;
+      }
+
+      hoveredSegmentIndex =
+        segmentationVolume.imageData.getScalarValueFromWorld(worldPoint);
+    } else {
+      const { imageIdReferenceMap } =
+        labelmapData as LabelmapSegmentationDataStack;
+
+      const currentImageId = viewport.getCurrentImageId();
+      const segmentationImageId = imageIdReferenceMap.get(currentImageId);
+
+      const image = cache.getImage(segmentationImageId);
+
+      if (!image) {
+        return;
+      }
+
+      const activeSegmentationRepresentation =
+        getActiveSegmentationRepresentation(this.toolGroupId);
+
+      if (!activeSegmentationRepresentation) {
+        return;
+      }
+
+      const segmentationActor = viewport.getActor(
+        activeSegmentationRepresentation.segmentationRepresentationUID
+      );
+
+      const imageData = segmentationActor?.actor.getMapper().getInputData();
+
+      const indexIJK = csUtils.transformWorldToIndex(imageData, worldPoint);
+
+      // since it is a stack we don't need to check the z
+      const flattenedIndex = indexIJK[0] + indexIJK[1] * image.columns;
+
+      const scalars = imageData.getPointData().getScalars().getData();
+
+      hoveredSegmentIndex = scalars[flattenedIndex];
+    }
+
+    // No need to select background
+    if (!hoveredSegmentIndex || hoveredSegmentIndex === 0) {
+      return;
+    }
+
+    setActiveSegmentIndex(
+      activeSegmentation.segmentationId,
+      hoveredSegmentIndex
+    );
+
+    const renderingEngine = viewport.getRenderingEngine();
+
+    // update states
+    triggerSegmentationModified(activeSegmentation.segmentationId);
+    triggerAnnotationRenderForViewportIds(
+      renderingEngine,
+      renderingEngine.getViewports().map((v) => v.id)
+    );
+  }
+}
+
+SegmentSelectTool.toolName = 'SegmentSelectTool';
+export default SegmentSelectTool;

package/src/tools/segmentation/SphereScissorsTool.ts

@@ -91,6 +91,13 @@ class SphereScissorsTool extends BaseTool {
    *
    */
   preMouseDownCallback = (evt: EventTypes.InteractionEventType): true => {
+    // if we are already drawing, means we have started with a click, and now we
+    // are moving the mouse (not dragging) so the final click should not
+    // be handled by this preMouseDownCallback but rather the endCallback
+    if (this.isDrawing === true) {
+      return;
+    }
+
     const eventDetail = evt.detail;
     const { currentPoints, element } = eventDetail;
     const worldPos = currentPoints.world;
@@ -296,6 +303,7 @@ class SphereScissorsTool extends BaseTool {
     element.addEventListener(Events.MOUSE_UP, this._endCallback);
     element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);
     element.addEventListener(Events.MOUSE_CLICK, this._endCallback);
+    element.addEventListener(Events.MOUSE_MOVE, this._dragCallback);
 
     element.addEventListener(Events.TOUCH_END, this._endCallback);
     element.addEventListener(Events.TOUCH_TAP, this._endCallback);
@@ -309,6 +317,7 @@ class SphereScissorsTool extends BaseTool {
     element.removeEventListener(Events.MOUSE_UP, this._endCallback);
     element.removeEventListener(Events.MOUSE_DRAG, this._dragCallback);
     element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);
+    element.removeEventListener(Events.MOUSE_MOVE, this._dragCallback);
 
     element.removeEventListener(Events.TOUCH_END, this._endCallback);
     element.removeEventListener(Events.TOUCH_DRAG, this._dragCallback);

package/src/tools/segmentation/strategies/BrushStrategy.ts

@@ -10,6 +10,7 @@ import type {
   LabelmapToolOperationDataAny,
   LabelmapToolOperationDataVolume,
 } from '../../../types/LabelmapToolOperationData';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 
 const { VoxelManager } = csUtils;
 
@@ -21,7 +22,7 @@ export type InitializedOperationData = LabelmapToolOperationDataAny & {
   viewport: Types.IViewport;
   imageVoxelManager: csUtils.VoxelManager<number>;
   segmentationVoxelManager: csUtils.VoxelManager<number>;
-  segmentationImageData: ImageData;
+  segmentationImageData: vtkImageData;
   previewVoxelManager: csUtils.VoxelManager<number>;
   // The index to use for the preview segment.  Currently always undefined or 255
   // but define it here for future expansion of LUT tables