@cornerstonejs/tools 0.56.1 → 0.56.3

package/src/tools/segmentation/SphereScissorsTool.ts

@@ -0,0 +1,368 @@
+import { cache, getEnabledElement, StackViewport } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { BaseTool } from '../base';
+import {
+  PublicToolProps,
+  ToolProps,
+  EventTypes,
+  SVGDrawingHelper,
+} from '../../types';
+
+import { fillInsideSphere } from './strategies/fillSphere';
+import { Events } from '../../enums';
+import { drawCircle as drawCircleSvg } from '../../drawingSvg';
+import {
+  resetElementCursor,
+  hideElementCursor,
+} from '../../cursors/elementCursor';
+
+import triggerAnnotationRenderForViewportIds from '../../utilities/triggerAnnotationRenderForViewportIds';
+import {
+  config as segmentationConfig,
+  segmentLocking,
+  segmentIndex as segmentIndexController,
+  activeSegmentation,
+} from '../../stateManagement/segmentation';
+
+import { getSegmentation } from '../../stateManagement/segmentation/segmentationState';
+import { LabelmapSegmentationData } from '../../types/LabelmapTypes';
+
+/**
+ * Tool for manipulating segmentation data by drawing a sphere in 3d space. It acts on the
+ * active Segmentation on the viewport (enabled element) and requires an active
+ * segmentation to be already present. By default it will use the activeSegmentIndex
+ * for the segmentation to modify. You can use SegmentationModule to set the active
+ * segmentation and segmentIndex. Todo: sphere scissor has some memory problem which
+ * lead to ui blocking behavior that needs to be fixed.
+ */
+class SphereScissorsTool extends BaseTool {
+  static toolName;
+  editData: {
+    annotation: any;
+    segmentation: any;
+    segmentIndex: number;
+    segmentsLocked: number[];
+    segmentationId: string;
+    toolGroupId: string;
+    segmentColor: [number, number, number, number];
+    viewportIdsToRender: string[];
+    handleIndex?: number;
+    movingTextBox: boolean;
+    newAnnotation?: boolean;
+    hasMoved?: boolean;
+    centerCanvas?: Array<number>;
+  } | null;
+  isDrawing: boolean;
+  isHandleOutsideImage: boolean;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        strategies: {
+          FILL_INSIDE: fillInsideSphere,
+        },
+        defaultStrategy: 'FILL_INSIDE',
+        activeStrategy: 'FILL_INSIDE',
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  /**
+   * Based on the current position of the mouse and the enabledElement, it
+   * finds the active segmentation info and use it for the current tool.
+   *
+   * @param evt -  EventTypes.NormalizedMouseEventType
+   * @returns The annotation object.
+   *
+   */
+  preMouseDownCallback = (evt: EventTypes.InteractionEventType): true => {
+    const eventDetail = evt.detail;
+    const { currentPoints, element } = eventDetail;
+    const worldPos = currentPoints.world;
+    const canvasPos = currentPoints.canvas;
+
+    const enabledElement = getEnabledElement(element);
+    const { viewport, renderingEngine } = enabledElement;
+
+    this.isDrawing = true;
+
+    const camera = viewport.getCamera();
+    const { viewPlaneNormal, viewUp } = camera;
+    const toolGroupId = this.toolGroupId;
+
+    const activeSegmentationRepresentation =
+      activeSegmentation.getActiveSegmentationRepresentation(toolGroupId);
+    if (!activeSegmentationRepresentation) {
+      throw new Error(
+        'No active segmentation detected, create one before using scissors tool'
+      );
+    }
+
+    const { segmentationRepresentationUID, segmentationId, type } =
+      activeSegmentationRepresentation;
+    const segmentIndex =
+      segmentIndexController.getActiveSegmentIndex(segmentationId);
+    const segmentsLocked = segmentLocking.getLockedSegments(segmentationId);
+
+    const segmentColor = segmentationConfig.color.getColorForSegmentIndex(
+      toolGroupId,
+      segmentationRepresentationUID,
+      segmentIndex
+    );
+
+    const { representationData } = getSegmentation(segmentationId);
+
+    // Todo: are we going to support contour editing with rectangle scissors?
+    const { volumeId } = representationData[type] as LabelmapSegmentationData;
+    const segmentation = cache.getVolume(volumeId);
+
+    this.isDrawing = true;
+
+    // Used for drawing the svg only, we might not need it at all
+    const annotation = {
+      metadata: {
+        viewPlaneNormal: <Types.Point3>[...viewPlaneNormal],
+        viewUp: <Types.Point3>[...viewUp],
+        FrameOfReferenceUID: viewport.getFrameOfReferenceUID(),
+        referencedImageId: '',
+        toolName: this.getToolName(),
+        segmentColor,
+      },
+      data: {
+        invalidated: true,
+        handles: {
+          points: [[...worldPos], [...worldPos], [...worldPos], [...worldPos]],
+          activeHandleIndex: null,
+        },
+        cachedStats: {},
+        highlighted: true,
+      },
+    };
+
+    const viewportIdsToRender = [viewport.id];
+
+    this.editData = {
+      annotation,
+      segmentation,
+      centerCanvas: canvasPos,
+      segmentIndex,
+      segmentsLocked,
+      segmentColor,
+      segmentationId,
+      toolGroupId,
+      viewportIdsToRender,
+      handleIndex: 3,
+      movingTextBox: false,
+      newAnnotation: true,
+      hasMoved: false,
+    };
+
+    this._activateDraw(element);
+
+    hideElementCursor(element);
+
+    evt.preventDefault();
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    return true;
+  };
+
+  _dragCallback = (evt: EventTypes.InteractionEventType) => {
+    this.isDrawing = true;
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+    const { currentPoints } = eventDetail;
+    const currentCanvasPoints = currentPoints.canvas;
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine, viewport } = enabledElement;
+    const { canvasToWorld } = viewport;
+
+    //////
+    const { annotation, viewportIdsToRender, centerCanvas } = this.editData;
+    const { data } = annotation;
+
+    const dX = Math.abs(currentCanvasPoints[0] - centerCanvas[0]);
+    const dY = Math.abs(currentCanvasPoints[1] - centerCanvas[1]);
+    const radius = Math.sqrt(dX * dX + dY * dY);
+
+    const bottomCanvas: Types.Point2 = [
+      centerCanvas[0],
+      centerCanvas[1] + radius,
+    ];
+    const topCanvas: Types.Point2 = [centerCanvas[0], centerCanvas[1] - radius];
+    const leftCanvas: Types.Point2 = [
+      centerCanvas[0] - radius,
+      centerCanvas[1],
+    ];
+    const rightCanvas: Types.Point2 = [
+      centerCanvas[0] + radius,
+      centerCanvas[1],
+    ];
+
+    data.handles.points = [
+      canvasToWorld(bottomCanvas),
+      canvasToWorld(topCanvas),
+      canvasToWorld(leftCanvas),
+      canvasToWorld(rightCanvas),
+    ];
+
+    annotation.invalidated = true;
+
+    this.editData.hasMoved = true;
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+  };
+
+  _endCallback = (evt: EventTypes.InteractionEventType) => {
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+
+    const {
+      annotation,
+      newAnnotation,
+      hasMoved,
+      segmentation,
+      segmentIndex,
+      segmentsLocked,
+      segmentationId,
+    } = this.editData;
+    const { data } = annotation;
+    const { viewPlaneNormal, viewUp } = annotation.metadata;
+
+    if (newAnnotation && !hasMoved) {
+      return;
+    }
+    annotation.highlighted = false;
+    data.handles.activeHandleIndex = null;
+
+    this._deactivateDraw(element);
+
+    resetElementCursor(element);
+
+    const enabledElement = getEnabledElement(element);
+    const { viewport } = enabledElement;
+
+    this.editData = null;
+    this.isDrawing = false;
+
+    if (viewport instanceof StackViewport) {
+      throw new Error('Not implemented yet');
+    }
+
+    const operationData = {
+      points: data.handles.points,
+      volume: segmentation,
+      segmentIndex,
+      segmentsLocked,
+      segmentationId,
+      viewPlaneNormal,
+      viewUp,
+    };
+
+    this.applyActiveStrategy(enabledElement, operationData);
+  };
+
+  /**
+   * Add event handlers for the modify event loop, and prevent default event propagation.
+   */
+  _activateDraw = (element) => {
+    element.addEventListener(Events.MOUSE_UP, this._endCallback);
+    element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);
+    element.addEventListener(Events.MOUSE_CLICK, this._endCallback);
+
+    element.addEventListener(Events.TOUCH_END, this._endCallback);
+    element.addEventListener(Events.TOUCH_TAP, this._endCallback);
+    element.addEventListener(Events.TOUCH_DRAG, this._dragCallback);
+  };
+
+  /**
+   * Add event handlers for the modify event loop, and prevent default event prapogation.
+   */
+  _deactivateDraw = (element) => {
+    element.removeEventListener(Events.MOUSE_UP, this._endCallback);
+    element.removeEventListener(Events.MOUSE_DRAG, this._dragCallback);
+    element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);
+
+    element.removeEventListener(Events.TOUCH_END, this._endCallback);
+    element.removeEventListener(Events.TOUCH_DRAG, this._dragCallback);
+    element.removeEventListener(Events.TOUCH_TAP, this._endCallback);
+  };
+
+  /**
+   * it is used to draw the sphereScissor annotation in each
+   * request animation frame. Note that the annotation are disappeared
+   * after the segmentation modification.
+   *
+   * @param enabledElement - The Cornerstone's enabledElement.
+   * @param svgDrawingHelper - The svgDrawingHelper providing the context for drawing.
+   */
+  renderAnnotation = (
+    enabledElement: Types.IEnabledElement,
+    svgDrawingHelper: SVGDrawingHelper
+  ): boolean => {
+    let renderStatus = false;
+    if (!this.editData) {
+      return renderStatus;
+    }
+
+    const { viewport } = enabledElement;
+    const { viewportIdsToRender } = this.editData;
+
+    if (!viewportIdsToRender.includes(viewport.id)) {
+      return renderStatus;
+    }
+
+    const { annotation } = this.editData;
+
+    // Todo: rectangle color based on segment index
+    const toolMetadata = annotation.metadata;
+    const annotationUID = annotation.annotationUID;
+
+    const data = annotation.data;
+    const { points } = data.handles;
+    const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
+
+    const bottom = canvasCoordinates[0];
+    const top = canvasCoordinates[1];
+
+    const center = [
+      Math.floor((bottom[0] + top[0]) / 2),
+      Math.floor((bottom[1] + top[1]) / 2),
+    ];
+
+    const radius = Math.abs(bottom[1] - Math.floor((bottom[1] + top[1]) / 2));
+
+    const color = `rgb(${toolMetadata.segmentColor.slice(0, 3)})`;
+
+    // If rendering engine has been destroyed while rendering
+    if (!viewport.getRenderingEngine()) {
+      console.warn('Rendering Engine has been destroyed');
+      return renderStatus;
+    }
+
+    const circleUID = '0';
+    drawCircleSvg(
+      svgDrawingHelper,
+      annotationUID,
+      circleUID,
+      center as Types.Point2,
+      radius,
+      {
+        color,
+      }
+    );
+
+    renderStatus = true;
+
+    return renderStatus;
+  };
+}
+
+SphereScissorsTool.toolName = 'SphereScissor';
+export default SphereScissorsTool;

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

@@ -0,0 +1,30 @@
+import type { Types } from '@cornerstonejs/core';
+
+import { fillInsideCircle } from './fillCircle';
+
+type OperationData = {
+  segmentationId: string;
+  imageVolume: Types.IImageVolume;
+  points: any; // Todo:fix
+  volume: Types.IImageVolume;
+  segmentIndex: number;
+  segmentsLocked: number[];
+  viewPlaneNormal: number[];
+  viewUp: number[];
+  strategySpecificConfiguration: any;
+  constraintFn: () => boolean;
+};
+
+export function eraseInsideCircle(
+  enabledElement: Types.IEnabledElement,
+  operationData: OperationData
+): void {
+  // Take the arguments and set the segmentIndex to 0,
+  // Then use existing fillInsideCircle functionality.
+  const eraseOperationData = {
+    ...operationData,
+    segmentIndex: 0,
+  };
+
+  fillInsideCircle(enabledElement, eraseOperationData);
+}

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

@@ -0,0 +1,81 @@
+import { ImageVolume, utilities as csUtils } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { getBoundingBoxAroundShape } from '../../../utilities/boundingBox';
+import { triggerSegmentationDataModified } from '../../../stateManagement/segmentation/triggerSegmentationEvents';
+import { pointInShapeCallback } from '../../../utilities';
+
+const { transformWorldToIndex } = csUtils;
+
+type EraseOperationData = {
+  segmentationId: string;
+  points: [Types.Point3, Types.Point3, Types.Point3, Types.Point3];
+  volume: ImageVolume;
+  constraintFn: (x: [number, number, number]) => boolean;
+  segmentsLocked: number[];
+};
+
+function eraseRectangle(
+  enabledElement: Types.IEnabledElement,
+  operationData: EraseOperationData,
+  inside = true
+): void {
+  const {
+    volume: segmentation,
+    points,
+    segmentsLocked,
+    segmentationId,
+  } = operationData;
+  const { imageData, dimensions } = segmentation;
+  const scalarData = segmentation.getScalarData();
+
+  const rectangleCornersIJK = points.map((world) => {
+    return transformWorldToIndex(imageData, world);
+  });
+
+  const boundsIJK = getBoundingBoxAroundShape(rectangleCornersIJK, dimensions);
+
+  if (boundsIJK.every(([min, max]) => min !== max)) {
+    throw new Error('Oblique segmentation tools are not supported yet');
+  }
+
+  // Since always all points inside the boundsIJK is inside the rectangle...
+  const pointInShape = () => true;
+
+  const callback = ({ value, index }) => {
+    if (segmentsLocked.includes(value)) {
+      return;
+    }
+    scalarData[index] = 0;
+  };
+
+  pointInShapeCallback(imageData, pointInShape, callback, boundsIJK);
+
+  triggerSegmentationDataModified(segmentationId);
+}
+
+/**
+ * Erase the rectangle region segment inside the segmentation defined by the operationData.
+ * It erases the segmentation pixels inside the defined rectangle.
+ * @param enabledElement - The element for which the segment is being erased.
+ * @param operationData - EraseOperationData
+ */
+export function eraseInsideRectangle(
+  enabledElement: Types.IEnabledElement,
+  operationData: EraseOperationData
+): void {
+  eraseRectangle(enabledElement, operationData, true);
+}
+
+/**
+ * Erase the rectangle region segment inside the segmentation defined by the operationData.
+ * It erases the segmentation pixels outside the defined rectangle.
+ * @param enabledElement - The element for which the segment is being erased.
+ * @param operationData - EraseOperationData
+ */
+export function eraseOutsideRectangle(
+  enabledElement: Types.IEnabledElement,
+  operationData: EraseOperationData
+): void {
+  eraseRectangle(enabledElement, operationData, false);
+}

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

@@ -0,0 +1,27 @@
+import type { Types } from '@cornerstonejs/core';
+
+import { fillInsideSphere } from './fillSphere';
+
+type OperationData = {
+  points: [Types.Point3, Types.Point3, Types.Point3, Types.Point3];
+  volume: Types.IImageVolume;
+  segmentIndex: number;
+  segmentationId: string;
+  segmentsLocked: number[];
+  viewPlaneNormal: Types.Point3;
+  viewUp: Types.Point3;
+  constraintFn: () => boolean;
+};
+
+export function eraseInsideSphere(
+  enabledElement: Types.IEnabledElement,
+  operationData: OperationData
+): void {
+  // Take the arguments and set the segmentIndex to 0,
+  // Then use existing fillInsideCircle functionality.
+  const eraseOperationData = Object.assign({}, operationData, {
+    segmentIndex: 0,
+  });
+
+  fillInsideSphere(enabledElement, eraseOperationData);
+}

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

@@ -0,0 +1,185 @@
+import { vec3 } from 'gl-matrix';
+import type { Types } from '@cornerstonejs/core';
+import { utilities as csUtils } from '@cornerstonejs/core';
+
+import {
+  getCanvasEllipseCorners,
+  pointInEllipse,
+} from '../../../utilities/math/ellipse';
+import { getBoundingBoxAroundShape } from '../../../utilities/boundingBox';
+import { triggerSegmentationDataModified } from '../../../stateManagement/segmentation/triggerSegmentationEvents';
+import { pointInShapeCallback } from '../../../utilities';
+
+const { transformWorldToIndex } = csUtils;
+
+type OperationData = {
+  segmentationId: string;
+  imageVolume: Types.IImageVolume;
+  points: any; // Todo:fix
+  volume: Types.IImageVolume;
+  segmentIndex: number;
+  segmentsLocked: number[];
+  viewPlaneNormal: number[];
+  viewUp: number[];
+  strategySpecificConfiguration: any;
+  constraintFn: () => boolean;
+};
+
+function fillCircle(
+  enabledElement: Types.IEnabledElement,
+  operationData: OperationData,
+  threshold = false
+): void {
+  const {
+    volume: segmentationVolume,
+    imageVolume,
+    points,
+    segmentsLocked,
+    segmentIndex,
+    segmentationId,
+    strategySpecificConfiguration,
+  } = operationData;
+  const { imageData, dimensions } = segmentationVolume;
+  const scalarData = segmentationVolume.getScalarData();
+  const { viewport } = enabledElement;
+
+  // Average the points to get the center of the ellipse
+  const center = vec3.fromValues(0, 0, 0);
+  points.forEach((point) => {
+    vec3.add(center, center, point);
+  });
+  vec3.scale(center, center, 1 / points.length);
+
+  const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
+
+  // 1. From the drawn tool: Get the ellipse (circle) topLeft and bottomRight
+  // corners in canvas coordinates
+  const [topLeftCanvas, bottomRightCanvas] =
+    getCanvasEllipseCorners(canvasCoordinates);
+
+  // 2. Find the extent of the ellipse (circle) in IJK index space of the image
+  const topLeftWorld = viewport.canvasToWorld(topLeftCanvas);
+  const bottomRightWorld = viewport.canvasToWorld(bottomRightCanvas);
+
+  const ellipsoidCornersIJK = [
+    <Types.Point3>transformWorldToIndex(imageData, topLeftWorld),
+    <Types.Point3>transformWorldToIndex(imageData, bottomRightWorld),
+  ];
+
+  const boundsIJK = getBoundingBoxAroundShape(ellipsoidCornersIJK, dimensions);
+
+  if (boundsIJK.every(([min, max]) => min !== max)) {
+    throw new Error('Oblique segmentation tools are not supported yet');
+  }
+
+  // using circle as a form of ellipse
+  const ellipseObj = {
+    center: center as Types.Point3,
+    xRadius: Math.abs(topLeftWorld[0] - bottomRightWorld[0]) / 2,
+    yRadius: Math.abs(topLeftWorld[1] - bottomRightWorld[1]) / 2,
+    zRadius: Math.abs(topLeftWorld[2] - bottomRightWorld[2]) / 2,
+  };
+
+  const modifiedSlicesToUse = new Set() as Set<number>;
+
+  let callback;
+
+  if (threshold) {
+    callback = ({ value, index, pointIJK }) => {
+      if (segmentsLocked.includes(value)) {
+        return;
+      }
+
+      if (
+        isWithinThreshold(index, imageVolume, strategySpecificConfiguration)
+      ) {
+        scalarData[index] = segmentIndex;
+        //Todo: I don't think this will always be index 2 in streamingImageVolume?
+        modifiedSlicesToUse.add(pointIJK[2]);
+      }
+    };
+  } else {
+    callback = ({ value, index, pointIJK }) => {
+      if (segmentsLocked.includes(value)) {
+        return;
+      }
+      scalarData[index] = segmentIndex;
+      //Todo: I don't think this will always be index 2 in streamingImageVolume?
+      modifiedSlicesToUse.add(pointIJK[2]);
+    };
+  }
+
+  pointInShapeCallback(
+    imageData,
+    (pointLPS, pointIJK) => pointInEllipse(ellipseObj, pointLPS),
+    callback,
+    boundsIJK
+  );
+
+  const arrayOfSlices: number[] = Array.from(modifiedSlicesToUse);
+
+  triggerSegmentationDataModified(segmentationId, arrayOfSlices);
+}
+
+function isWithinThreshold(
+  index: number,
+  imageVolume: Types.IImageVolume,
+  strategySpecificConfiguration: any
+) {
+  const { THRESHOLD_INSIDE_CIRCLE } = strategySpecificConfiguration;
+
+  const voxelValue = imageVolume.getScalarData()[index];
+  const { threshold } = THRESHOLD_INSIDE_CIRCLE;
+
+  return threshold[0] <= voxelValue && voxelValue <= threshold[1];
+}
+
+/**
+ * Fill inside the circular region segment inside the segmentation defined by the operationData.
+ * It fills the segmentation pixels inside the defined circle.
+ * @param enabledElement - The element for which the segment is being erased.
+ * @param operationData - EraseOperationData
+ */
+export function fillInsideCircle(
+  enabledElement: Types.IEnabledElement,
+  operationData: OperationData
+): void {
+  fillCircle(enabledElement, operationData, false);
+}
+
+/**
+ * Fill inside the circular region segment inside the segmentation defined by the operationData.
+ * It fills the segmentation pixels inside the defined circle.
+ * @param enabledElement - The element for which the segment is being erased.
+ * @param operationData - EraseOperationData
+ */
+export function thresholdInsideCircle(
+  enabledElement: Types.IEnabledElement,
+  operationData: OperationData
+): void {
+  const { volume, imageVolume } = operationData;
+
+  if (
+    !csUtils.isEqual(volume.dimensions, imageVolume.dimensions) ||
+    !csUtils.isEqual(volume.direction, imageVolume.direction)
+  ) {
+    throw new Error(
+      'Only source data the same dimensions/size/orientation as the segmentation currently supported.'
+    );
+  }
+
+  fillCircle(enabledElement, operationData, true);
+}
+
+/**
+ * Fill outside the circular region segment inside the segmentation defined by the operationData.
+ * It fills the segmentation pixels outside the  defined circle.
+ * @param enabledElement - The element for which the segment is being erased.
+ * @param operationData - EraseOperationData
+ */
+export function fillOutsideCircle(
+  enabledElement: Types.IEnabledElement,
+  operationData: OperationData
+): void {
+  throw new Error('Not yet implemented');
+}