@cornerstonejs/tools 0.56.2 → 0.56.3

package/src/tools/annotation/planarFreehandROITool/renderMethods.ts

@@ -0,0 +1,407 @@
+import type { Types } from '@cornerstonejs/core';
+import {
+  drawHandles as drawHandlesSvg,
+  drawPolyline as drawPolylineSvg,
+} from '../../../drawingSvg';
+import { polyline } from '../../../utilities/math';
+import { findOpenUShapedContourVectorToPeakOnRender } from './findOpenUShapedContourVectorToPeak';
+import { PlanarFreehandROIAnnotation } from '../../../types/ToolSpecificAnnotationTypes';
+import { StyleSpecifier } from '../../../types/AnnotationStyle';
+import { SVGDrawingHelper } from '../../../types';
+
+const { pointsAreWithinCloseContourProximity } = polyline;
+
+type PlanarFreehandROIRenderOptions = {
+  color?: string;
+  width?: number;
+  connectFirstToLast?: boolean;
+};
+
+function _getRenderingOptions(
+  enabledElement: Types.IEnabledElement,
+  annotation: PlanarFreehandROIAnnotation
+): PlanarFreehandROIRenderOptions {
+  const styleSpecifier: StyleSpecifier = {
+    toolGroupId: this.toolGroupId,
+    toolName: this.getToolName(),
+    viewportId: enabledElement.viewport.id,
+    annotationUID: annotation.annotationUID,
+  };
+
+  const lineWidth = this.getStyle('lineWidth', styleSpecifier, annotation);
+  const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
+  const color = this.getStyle('color', styleSpecifier, annotation);
+
+  const isOpenContour = annotation.data.isOpenContour;
+
+  const options = {
+    color: color === undefined ? undefined : <string>color,
+    width: lineWidth === undefined ? undefined : <number>lineWidth,
+    lineDash: lineDash === undefined ? undefined : <number[]>lineDash,
+    connectLastToFirst: !isOpenContour,
+  };
+
+  return options;
+}
+
+/**
+ * Renders a `PlanarFreehandROIAnnotation` that is not currently being drawn or edited.
+ */
+function renderContour(
+  enabledElement: Types.IEnabledElement,
+  svgDrawingHelper: SVGDrawingHelper,
+  annotation: PlanarFreehandROIAnnotation
+): void {
+  // prevent drawing or further calculation in case viewport data is not ready yet
+  if (!enabledElement?.viewport?.getImageData()) {
+    return;
+  }
+  // Check if the contour is an open contour
+  if (annotation.data.isOpenContour) {
+    // If its an open contour, check i its a U-shaped contour
+    if (annotation.data.isOpenUShapeContour) {
+      calculateUShapeContourVectorToPeakIfNotPresent(
+        enabledElement,
+        annotation
+      );
+
+      this.renderOpenUShapedContour(
+        enabledElement,
+        svgDrawingHelper,
+        annotation
+      );
+    } else {
+      // If not a U-shaped contour, render standard open contour.
+      this.renderOpenContour(enabledElement, svgDrawingHelper, annotation);
+    }
+  } else {
+    this.renderClosedContour(enabledElement, svgDrawingHelper, annotation);
+  }
+}
+
+/**
+ * If the open U-shaped contour does not have a peak.
+ */
+function calculateUShapeContourVectorToPeakIfNotPresent(
+  enabledElement: Types.IEnabledElement,
+  annotation: PlanarFreehandROIAnnotation
+): void {
+  if (!annotation.data.openUShapeContourVectorToPeak) {
+    // Annotation just been set to be an open U-shaped contour.
+    // calculate its peak vector here.
+    annotation.data.openUShapeContourVectorToPeak =
+      findOpenUShapedContourVectorToPeakOnRender(enabledElement, annotation);
+  }
+}
+
+/**
+ * Renders an closed `PlanarFreehandROIAnnotation` annotation.
+ */
+function renderClosedContour(
+  enabledElement: Types.IEnabledElement,
+  svgDrawingHelper: SVGDrawingHelper,
+  annotation: PlanarFreehandROIAnnotation
+): void {
+  const { viewport } = enabledElement;
+  const options = this._getRenderingOptions(enabledElement, annotation);
+
+  // Its unfortunate that we have to do this for each annotation,
+  // Even if its unchanged. In the future we could cache the canvas points per
+  // element on the tool? That feels very weird also as we'd need to manage
+  // it/clean them up. Its a pre-optimisation for now and we can tackle it if it
+  // becomes a problem.
+  const canvasPoints = annotation.data.polyline.map((worldPos) =>
+    viewport.worldToCanvas(worldPos)
+  );
+
+  const polylineUID = '1';
+
+  drawPolylineSvg(
+    svgDrawingHelper,
+    annotation.annotationUID,
+    polylineUID,
+    canvasPoints,
+    options
+  );
+}
+
+/**
+ * Renders an open `PlanarFreehandROIAnnotation` annotation.
+ */
+function renderOpenContour(
+  enabledElement: Types.IEnabledElement,
+  svgDrawingHelper: SVGDrawingHelper,
+  annotation: PlanarFreehandROIAnnotation
+): void {
+  const { viewport } = enabledElement;
+  const options = this._getRenderingOptions(enabledElement, annotation);
+
+  const canvasPoints = annotation.data.polyline.map((worldPos) =>
+    viewport.worldToCanvas(worldPos)
+  );
+
+  const polylineUID = '1';
+
+  drawPolylineSvg(
+    svgDrawingHelper,
+    annotation.annotationUID,
+    polylineUID,
+    canvasPoints,
+    options
+  );
+
+  const activeHandleIndex = annotation.data.handles.activeHandleIndex;
+
+  if (this.configuration.alwaysRenderOpenContourHandles?.enabled === true) {
+    const radius = this.configuration.alwaysRenderOpenContourHandles.radius;
+
+    // Draw highlighted points
+    const handleGroupUID = '0';
+
+    // We already mapped all the points, so don't do the mapping again.
+    // The activeHandleIndex can only be one of two points.
+    const handlePoints = [
+      canvasPoints[0],
+      canvasPoints[canvasPoints.length - 1],
+    ];
+
+    // Don't render a hovered handle, as this will be rendered larger in
+    // the next block.
+    if (activeHandleIndex === 0) {
+      handlePoints.shift();
+    } else if (activeHandleIndex === 1) {
+      handlePoints.pop();
+    }
+
+    drawHandlesSvg(
+      svgDrawingHelper,
+      annotation.annotationUID,
+      handleGroupUID,
+      handlePoints,
+      {
+        color: options.color,
+        handleRadius: radius,
+      }
+    );
+  }
+
+  if (activeHandleIndex !== null) {
+    // Draw highlighted points
+    const handleGroupUID = '1';
+
+    // We already mapped all the points, so don't do the mapping again.
+    // The activeHandleIndex can only be one of two points.
+    const indexOfCanvasPoints =
+      activeHandleIndex === 0 ? 0 : canvasPoints.length - 1;
+
+    const handlePoint = canvasPoints[indexOfCanvasPoints];
+
+    drawHandlesSvg(
+      svgDrawingHelper,
+      annotation.annotationUID,
+      handleGroupUID,
+      [handlePoint],
+      { color: options.color }
+    );
+  }
+}
+
+function renderOpenUShapedContour(
+  enabledElement: Types.IEnabledElement,
+  svgDrawingHelper: SVGDrawingHelper,
+  annotation: PlanarFreehandROIAnnotation
+): void {
+  const { viewport } = enabledElement;
+  const { polyline, openUShapeContourVectorToPeak } = annotation.data;
+
+  this.renderOpenContour(enabledElement, svgDrawingHelper, annotation);
+
+  // prevent rendering u shape in case openUShapeContourVectorToPeak is not set yet
+  if (!openUShapeContourVectorToPeak) {
+    return;
+  }
+
+  const firstCanvasPoint = viewport.worldToCanvas(polyline[0]);
+  const lastCanvasPoint = viewport.worldToCanvas(polyline[polyline.length - 1]);
+
+  const openUShapeContourVectorToPeakCanvas = [
+    viewport.worldToCanvas(openUShapeContourVectorToPeak[0]),
+    viewport.worldToCanvas(openUShapeContourVectorToPeak[1]),
+  ];
+
+  const options = this._getRenderingOptions(enabledElement, annotation);
+
+  // Join first and last points
+  drawPolylineSvg(
+    svgDrawingHelper,
+    annotation.annotationUID,
+    'first-to-last',
+    [firstCanvasPoint, lastCanvasPoint],
+    {
+      color: options.color,
+      width: options.width,
+      connectLastToFirst: false,
+      lineDash: '2,2',
+    }
+  );
+
+  // Render midpoint to open contour surface line
+  drawPolylineSvg(
+    svgDrawingHelper,
+    annotation.annotationUID,
+    'midpoint-to-open-contour',
+    [
+      openUShapeContourVectorToPeakCanvas[0],
+      openUShapeContourVectorToPeakCanvas[1],
+    ],
+    {
+      color: options.color,
+      width: options.width,
+      connectLastToFirst: false,
+      lineDash: '2,2',
+    }
+  );
+}
+
+/**
+ * Renders a new `PlanarFreehandROIAnnotation` annotation during
+ * creation/drawing.
+ */
+function renderContourBeingDrawn(
+  enabledElement: Types.IEnabledElement,
+  svgDrawingHelper: SVGDrawingHelper,
+  annotation: PlanarFreehandROIAnnotation
+): void {
+  const options = this._getRenderingOptions(enabledElement, annotation);
+
+  const { allowOpenContours } = this.configuration;
+  const { canvasPoints } = this.drawData;
+
+  // Override rendering whilst drawing the contour, we don't know if its open
+  // or closed yet
+  options.connectLastToFirst = false;
+
+  drawPolylineSvg(
+    svgDrawingHelper,
+    annotation.annotationUID,
+    '1',
+    canvasPoints,
+    options
+  );
+
+  if (allowOpenContours) {
+    const firstPoint = canvasPoints[0];
+    const lastPoint = canvasPoints[canvasPoints.length - 1];
+
+    // Check if start and end are within close proximity
+    if (
+      pointsAreWithinCloseContourProximity(
+        firstPoint,
+        lastPoint,
+        this.configuration.closeContourProximity
+      )
+    ) {
+      // Preview join last points
+      drawPolylineSvg(
+        svgDrawingHelper,
+        annotation.annotationUID,
+        '2',
+        [lastPoint, firstPoint],
+        options
+      );
+    } else {
+      // Draw start point
+      const handleGroupUID = '0';
+
+      drawHandlesSvg(
+        svgDrawingHelper,
+        annotation.annotationUID,
+        handleGroupUID,
+        [firstPoint],
+        { color: options.color, handleRadius: 2 }
+      );
+    }
+  }
+}
+
+/**
+ * Renders a closed `PlanarFreehandROIAnnotation` being edited.
+ */
+function renderClosedContourBeingEdited(
+  enabledElement,
+  svgDrawingHelper,
+  annotation
+): void {
+  const { fusedCanvasPoints } = this.editData;
+
+  if (fusedCanvasPoints === undefined) {
+    // No edit to render yet, render closed contour.
+    this.renderClosedContour(enabledElement, svgDrawingHelper, annotation);
+
+    return;
+  }
+
+  const options = this._getRenderingOptions(enabledElement, annotation);
+
+  const polylineUIDToRender = 'preview-1';
+
+  drawPolylineSvg(
+    svgDrawingHelper,
+    annotation.annotationUID,
+    polylineUIDToRender,
+    fusedCanvasPoints,
+    options
+  );
+}
+
+/**
+ * Renders an open `PlanarFreehandROIAnnotation` being edited.
+ */
+function renderOpenContourBeingEdited(
+  enabledElement: Types.IEnabledElement,
+  svgDrawingHelper: SVGDrawingHelper,
+  annotation: PlanarFreehandROIAnnotation
+): void {
+  const { fusedCanvasPoints } = this.editData;
+
+  if (fusedCanvasPoints === undefined) {
+    // No edit to render yet, render closed contour.
+    this.renderOpenContour(enabledElement, svgDrawingHelper, annotation);
+
+    return;
+  }
+
+  const options = this._getRenderingOptions(enabledElement, annotation);
+
+  const polylineUIDToRender = 'preview-1';
+
+  drawPolylineSvg(
+    svgDrawingHelper,
+    annotation.annotationUID,
+    polylineUIDToRender,
+    fusedCanvasPoints,
+    options
+  );
+}
+
+/**
+ * Registers the render methods of various contour states to the tool instance.
+ */
+function registerRenderMethods(toolInstance) {
+  toolInstance.renderContour = renderContour.bind(toolInstance);
+  toolInstance.renderClosedContour = renderClosedContour.bind(toolInstance);
+  toolInstance.renderOpenContour = renderOpenContour.bind(toolInstance);
+  toolInstance.renderOpenUShapedContour =
+    renderOpenUShapedContour.bind(toolInstance);
+
+  toolInstance.renderContourBeingDrawn =
+    renderContourBeingDrawn.bind(toolInstance);
+
+  toolInstance.renderClosedContourBeingEdited =
+    renderClosedContourBeingEdited.bind(toolInstance);
+  toolInstance.renderOpenContourBeingEdited =
+    renderOpenContourBeingEdited.bind(toolInstance);
+  toolInstance._getRenderingOptions = _getRenderingOptions.bind(toolInstance);
+}
+
+export default registerRenderMethods;

package/src/tools/base/AnnotationDisplayTool.ts

@@ -0,0 +1,228 @@
+import {
+  utilities,
+  getEnabledElement,
+  VolumeViewport,
+  StackViewport,
+  cache,
+} from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { vec4 } from 'gl-matrix';
+
+import BaseTool from './BaseTool';
+import { getAnnotationManager } from '../../stateManagement/annotation/annotationState';
+import { Annotation, Annotations, SVGDrawingHelper } from '../../types';
+import triggerAnnotationRender from '../../utilities/triggerAnnotationRender';
+import filterAnnotationsForDisplay from '../../utilities/planar/filterAnnotationsForDisplay';
+import { getStyleProperty } from '../../stateManagement/annotation/config/helpers';
+import { getState } from '../../stateManagement/annotation/config';
+import { StyleSpecifier } from '../../types/AnnotationStyle';
+
+/**
+ * Abstract class for tools which create and display annotations on the
+ * cornerstone3D canvas. In addition, it provides a base class for segmentation
+ * tools that require drawing an annotation before running the segmentation strategy
+ * for instance threshold segmentation based on an area and a threshold.
+ * Annotation tools make use of drawing utilities to draw SVG elements on the viewport.
+ *
+ * To create a new annotation tool, derive from this class and implement the
+ * abstract methods.
+ */
+abstract class AnnotationDisplayTool extends BaseTool {
+  static toolName;
+  // ===================================================================
+  // Abstract Methods - Must be implemented.
+  // ===================================================================
+
+  /**
+   * @abstract renderAnnotation it used to draw the tool's annotation in each
+   * request animation frame
+   *
+   * @param enabledElement - The Cornerstone's enabledElement.
+   * @param svgDrawingHelper - The svgDrawingHelper providing the context for drawing.
+   */
+  abstract renderAnnotation(
+    enabledElement: Types.IEnabledElement,
+    svgDrawingHelper: SVGDrawingHelper
+  );
+
+  /**
+   * @virtual Given the element and annotations which is an array of annotation, it
+   * filters the annotations array to only include the annotation based on the viewportType.
+   * If the viewport is StackViewport, it filters based on the current imageId of the viewport,
+   * if the viewport is volumeViewport, it only returns those that are within the
+   * same slice as the current rendered slice in the volume viewport.
+   * imageId as the enabledElement.
+   * @param element - The HTML element
+   * @param annotations - The annotations to filter (array of annotation)
+   * @returns The filtered annotations
+   */
+  filterInteractableAnnotationsForElement(
+    element: HTMLDivElement,
+    annotations: Annotations
+  ): Annotations | undefined {
+    if (!annotations || !annotations.length) {
+      return;
+    }
+
+    const enabledElement = getEnabledElement(element);
+    const { viewport } = enabledElement;
+
+    return filterAnnotationsForDisplay(viewport, annotations);
+  }
+
+  /**
+   * On Image Calibration, take all the annotation from the AnnotationState manager,
+   * and invalidate them to force them to be re-rendered and their stats to be recalculated.
+   * Then use the old and new imageData (non-calibrated and calibrated) to calculate the
+   * new position for the annotations in the space of the new imageData.
+   *
+   * @param evt - The calibration event
+   *
+   */
+  public onImageSpacingCalibrated = (
+    evt: Types.EventTypes.ImageSpacingCalibratedEvent
+  ) => {
+    const {
+      element,
+      rowScale,
+      columnScale,
+      imageId,
+      imageData: calibratedImageData,
+      worldToIndex: noneCalibratedWorldToIndex,
+    } = evt.detail;
+
+    const { viewport } = getEnabledElement(element);
+
+    if (viewport instanceof VolumeViewport) {
+      throw new Error('Cannot calibrate a volume viewport');
+    }
+
+    const calibratedIndexToWorld = calibratedImageData.getIndexToWorld();
+
+    const imageURI = utilities.imageIdToURI(imageId);
+    const stateManager = getAnnotationManager();
+    const framesOfReference = stateManager.getFramesOfReference();
+
+    // For each frame Of Reference
+    framesOfReference.forEach((frameOfReference) => {
+      const frameOfReferenceSpecificAnnotations =
+        stateManager.getAnnotations(frameOfReference);
+
+      const toolSpecificAnnotations =
+        frameOfReferenceSpecificAnnotations[this.getToolName()];
+
+      if (!toolSpecificAnnotations || !toolSpecificAnnotations.length) {
+        return;
+      }
+
+      // for this specific tool
+      toolSpecificAnnotations.forEach((annotation) => {
+        // if the annotation is drawn on the same imageId
+        const referencedImageURI = utilities.imageIdToURI(
+          annotation.metadata.referencedImageId
+        );
+
+        if (referencedImageURI === imageURI) {
+          // make them invalid since the image has been calibrated so that
+          // we can update the cachedStats and also rendering
+          annotation.invalidated = true;
+          annotation.data.cachedStats = {};
+
+          // Update annotation points to the new calibrated points. Basically,
+          // using the worldToIndex function we get the index on the non-calibrated
+          // image and then using the calibratedIndexToWorld function we get the
+          // corresponding point on the calibrated image world.
+          annotation.data.handles.points = annotation.data.handles.points.map(
+            (point) => {
+              const p = vec4.fromValues(...(point as Types.Point3), 1);
+              const pCalibrated = vec4.fromValues(0, 0, 0, 1);
+              const nonCalibratedIndexVec4 = vec4.create();
+              vec4.transformMat4(
+                nonCalibratedIndexVec4,
+                p,
+                noneCalibratedWorldToIndex
+              );
+              const calibratedIndex = [
+                columnScale * nonCalibratedIndexVec4[0],
+                rowScale * nonCalibratedIndexVec4[1],
+                nonCalibratedIndexVec4[2],
+              ];
+
+              vec4.transformMat4(
+                pCalibrated,
+                vec4.fromValues(
+                  calibratedIndex[0],
+                  calibratedIndex[1],
+                  calibratedIndex[2],
+                  1
+                ),
+                calibratedIndexToWorld
+              );
+
+              return pCalibrated.slice(0, 3) as Types.Point3;
+            }
+          );
+        }
+      });
+
+      triggerAnnotationRender(element);
+    });
+  };
+
+  protected getReferencedImageId(
+    viewport: Types.IStackViewport | Types.IVolumeViewport,
+    worldPos: Types.Point3,
+    viewPlaneNormal: Types.Point3,
+    viewUp: Types.Point3
+  ): string {
+    const targetId = this.getTargetId(viewport);
+
+    let referencedImageId;
+
+    if (viewport instanceof StackViewport) {
+      referencedImageId = targetId.split('imageId:')[1];
+    } else {
+      const volumeId = targetId.split('volumeId:')[1];
+      const imageVolume = cache.getVolume(volumeId);
+
+      referencedImageId = utilities.getClosestImageId(
+        imageVolume,
+        worldPos,
+        viewPlaneNormal,
+        viewUp
+      );
+    }
+
+    return referencedImageId;
+  }
+
+  /**
+   * It takes the property (color, lineDash, etc.) and based on the state of the
+   * annotation (selected, highlighted etc.) it returns the appropriate value
+   * based on the central toolStyle settings for each level of specification.
+   * @param property - The name of the style property to get.
+   * @param styleSpecifier - An object containing the specifications such as viewportId,
+   * toolGroupId, toolName and annotationUID which are used to get the style if the level of specificity is
+   * met (hierarchy is checked from most specific to least specific which is
+   * annotationLevel -> viewportLevel -> toolGroupLevel -> default.
+   * @param annotation - The annotation for the tool that is
+   * currently active.
+   * @returns The value of the property.
+   */
+  public getStyle(
+    property: string,
+    specifications: StyleSpecifier,
+    annotation?: Annotation
+  ): unknown {
+    return getStyleProperty(
+      property,
+      specifications,
+      getState(annotation),
+      this.mode
+    );
+  }
+}
+
+AnnotationDisplayTool.toolName = 'AnnotationDisplayTool';
+export default AnnotationDisplayTool;