@cornerstonejs/tools 1.22.0 → 1.23.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Cornerstone3D Tools",
-  "main": "dist/umd/index.js",
+  "main": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
   "repository": "https://github.com/cornerstonejs/cornerstone3D",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.22.0",
+    "@cornerstonejs/core": "^1.23.0",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "ff226c7a2ed426dc568b8043d3bbbb1cdc993281"
+  "gitHead": "378523639b22b4aa8247118b215d68596f3dc54f"
 }

package/src/drawingSvg/drawPolyline.ts

@@ -17,6 +17,8 @@ export default function drawPolyline(
   points: Types.Point2[],
   options: {
     color?: string;
+    fillColor?: string;
+    fillOpacity?: number;
     width?: number;
     lineWidth?: number;
     lineDash?: string;
@@ -27,16 +29,19 @@ export default function drawPolyline(
     return;
   }
 
-  const { color, width, lineWidth, lineDash } = Object.assign(
-    {
-      color: 'dodgerblue',
-      width: '2',
-      lineWidth: undefined,
-      lineDash: undefined,
-      connectLastToFirst: false,
-    },
-    options
-  );
+  const { fillColor, fillOpacity, color, width, lineWidth, lineDash } =
+    Object.assign(
+      {
+        color: 'dodgerblue',
+        width: '2',
+        fillColor: 'none',
+        fillOpacity: 0,
+        lineWidth: undefined,
+        lineDash: undefined,
+        connectLastToFirst: false,
+      },
+      options
+    );
 
   // for supporting both lineWidth and width options
   const strokeWidth = lineWidth || width;
@@ -60,7 +65,8 @@ export default function drawPolyline(
   const attributes = {
     points: pointsAttribute,
     stroke: color,
-    fill: 'none',
+    fill: fillColor,
+    'fill-opacity': fillOpacity,
     'stroke-width': strokeWidth,
     'stroke-dasharray': lineDash,
   };

package/src/enums/SegmentationRepresentations.ts

@@ -6,7 +6,7 @@
 enum SegmentationRepresentations {
   Labelmap = 'LABELMAP',
   Contour = 'CONTOUR',
-  // Todo: add more representations
+  Surface = 'SURFACE',
 }
 
 export default SegmentationRepresentations;

package/src/index.ts

@@ -61,6 +61,7 @@ import {
   ScaleOverlayTool,
   OrientationMarkerTool,
   OverlayGridTool,
+  SegmentationIntersectionTool,
 } from './tools';
 
 import * as Enums from './enums';
@@ -92,6 +93,7 @@ export {
   CrosshairsTool,
   ReferenceLinesTool,
   OverlayGridTool,
+  SegmentationIntersectionTool,
   ProbeTool,
   RectangleROITool,
   EllipticalROITool,

package/src/stateManagement/segmentation/addSegmentationRepresentations.ts

@@ -8,6 +8,7 @@ import { getToolGroup } from '../../store/ToolGroupManager';
 
 import { labelmapDisplay } from '../../tools/displayTools/Labelmap';
 import { contourDisplay } from '../../tools/displayTools/Contour';
+import { surfaceDisplay } from '../../tools/displayTools/Surface';
 
 /**
  * Set the specified segmentation representations on the viewports of the specified
@@ -65,6 +66,13 @@ async function _addSegmentationRepresentation(
         representationInput,
         toolGroupSpecificRepresentationConfig
       );
+  } else if (representationInput.type === Representations.Surface) {
+    segmentationRepresentationUID =
+      await surfaceDisplay.addSegmentationRepresentation(
+        toolGroupId,
+        representationInput,
+        toolGroupSpecificRepresentationConfig
+      );
   } else {
     throw new Error(
       `The representation type ${representationInput.type} is not supported`

package/src/tools/SegmentationIntersectionTool.ts

@@ -0,0 +1,300 @@
+import { getRenderingEngine } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import {
+  addAnnotation,
+  getAnnotations,
+} from '../stateManagement/annotation/annotationState';
+import { drawPolyline } from '../drawingSvg';
+import { getToolGroup } from '../store/ToolGroupManager';
+import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
+import { PublicToolProps, ToolProps, SVGDrawingHelper } from '../types';
+import AnnotationDisplayTool from './base/AnnotationDisplayTool';
+import { Annotation } from '../types';
+import { distanceToPoint } from '../utilities/math/point';
+import { pointToString } from '../utilities/pointToString';
+import { polyDataUtils } from '../utilities';
+
+export interface SegmentationIntersectionAnnotation extends Annotation {
+  data: {
+    actorsWorldPointsMap: Map<string, Map<string, object>>;
+  };
+}
+
+class SegmentationIntersectionTool extends AnnotationDisplayTool {
+  static toolName;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      configuration: {
+        opacity: 0.5,
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  /**
+   * Initialize the annotation data and calculates surface intersections
+   * @returns
+   */
+  _init = (): void => {
+    const viewportsInfo = getToolGroup(this.toolGroupId).viewportsInfo;
+
+    if (!viewportsInfo?.length) {
+      console.warn(this.getToolName() + 'Tool: No viewports found');
+      return;
+    }
+
+    const firstViewport = getRenderingEngine(
+      viewportsInfo[0].renderingEngineId
+    )?.getViewport(viewportsInfo[0].viewportId);
+
+    if (!firstViewport) {
+      return;
+    }
+    const frameOfReferenceUID = firstViewport.getFrameOfReferenceUID();
+    const annotations = getAnnotations(this.getToolName(), frameOfReferenceUID);
+
+    if (!annotations?.length) {
+      const actorsWorldPointsMap = new Map();
+      calculateSurfaceSegmentationIntersections(
+        actorsWorldPointsMap,
+        viewportsInfo
+      );
+      const newAnnotation: SegmentationIntersectionAnnotation = {
+        highlighted: true,
+        invalidated: true,
+        metadata: {
+          toolName: this.getToolName(),
+          FrameOfReferenceUID: frameOfReferenceUID,
+          referencedImageId: null,
+        },
+        data: {
+          actorsWorldPointsMap,
+        },
+      };
+
+      addAnnotation(newAnnotation, frameOfReferenceUID);
+    }
+
+    triggerAnnotationRenderForViewportIds(
+      getRenderingEngine(viewportsInfo[0].renderingEngineId),
+      viewportsInfo.map(({ viewportId }) => viewportId)
+    );
+  };
+
+  onSetToolEnabled = (): void => {
+    this._init();
+  };
+
+  onCameraModified = (evt: Types.EventTypes.CameraModifiedEvent): void => {
+    this._init();
+  };
+
+  /**
+   * Renders the surface intersections
+   *
+   * @param enabledElement - The Cornerstone's enabledElement.
+   * @param svgDrawingHelper - The svgDrawingHelper providing the context for drawing.
+   */
+  renderAnnotation = (
+    enabledElement: Types.IEnabledElement,
+    svgDrawingHelper: SVGDrawingHelper
+  ): boolean => {
+    const { viewport, FrameOfReferenceUID } = enabledElement;
+
+    let renderStatus = false;
+
+    const annotations = getAnnotations(this.getToolName(), FrameOfReferenceUID);
+    if (!annotations?.length) {
+      return renderStatus;
+    }
+    const annotation = annotations[0];
+    const { annotationUID } = annotation;
+    const actorsWorldPointsMap = annotation.data.actorsWorldPointsMap;
+
+    calculateSurfaceSegmentationIntersectionsForViewport(
+      actorsWorldPointsMap,
+      viewport
+    );
+
+    const actorEntries = viewport.getActors();
+    const cacheId = getCacheId(viewport);
+
+    actorEntries.forEach((actorEntry) => {
+      if (!actorEntry?.clippingFilter) {
+        return;
+      }
+      const actorWorldPointMap = actorsWorldPointsMap.get(actorEntry.uid);
+      if (!actorWorldPointMap) {
+        return;
+      }
+      if (!actorWorldPointMap.get(cacheId)) {
+        return;
+      }
+      let polyLineIdx = 1;
+      const { worldPointsSet, color } = actorWorldPointMap.get(cacheId);
+      for (let i = 0; i < worldPointsSet.length; i++) {
+        const worldPoints = worldPointsSet[i];
+        const canvasPoints = worldPoints.map((point) =>
+          viewport.worldToCanvas(point)
+        );
+
+        const options = {
+          color: color,
+          fillColor: color,
+          fillOpacity: this.configuration.opacity,
+          connectLastToFirst: true,
+        };
+
+        const polyLineUID = actorEntry.uid + '#' + polyLineIdx;
+        drawPolyline(
+          svgDrawingHelper,
+          annotationUID,
+          polyLineUID,
+          canvasPoints,
+          options
+        );
+        polyLineIdx++;
+      }
+    });
+
+    renderStatus = true;
+    return renderStatus;
+  };
+}
+
+/**
+ * Calculates surface intersections points for all surface actors in a list of viewports
+ * @param actorWorldPointsMap
+ * @param viewportsInfo
+ */
+function calculateSurfaceSegmentationIntersections(
+  actorsWorldPointsMap,
+  viewportsInfo
+) {
+  viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+    const viewport =
+      getRenderingEngine(renderingEngineId)?.getViewport(viewportId);
+    calculateSurfaceSegmentationIntersectionsForViewport(
+      actorsWorldPointsMap,
+      viewport
+    );
+  });
+}
+
+/**
+ * Calculates surface intersections points for all surface actors in a viewport
+ * generating a set of polyline points for each actor
+ * @param actorWorldPointsMap
+ * @param viewport
+ */
+function calculateSurfaceSegmentationIntersectionsForViewport(
+  actorsWorldPointsMap,
+  viewport
+) {
+  const actorEntries = viewport.getActors();
+
+  // we should not use the focalPoint here, since the pan and zoom updates it,
+  // imageIndex is reliable enough
+  const cacheId = getCacheId(viewport);
+
+  actorEntries.forEach((actorEntry) => {
+    if (!actorEntry?.clippingFilter) {
+      return;
+    }
+
+    let actorWorldPointsMap = actorsWorldPointsMap.get(actorEntry.uid);
+    if (!actorWorldPointsMap) {
+      actorWorldPointsMap = new Map();
+      actorsWorldPointsMap.set(actorEntry.uid, actorWorldPointsMap);
+    }
+    if (!actorWorldPointsMap.get(cacheId)) {
+      const polyData = actorEntry.clippingFilter.getOutputData();
+      const worldPointsSet = polyDataUtils.getPolyDataPoints(polyData);
+      if (!worldPointsSet) {
+        return;
+      }
+
+      // worldPointsSet = removeExtraPoints(viewport, worldPointsSet);
+      const colorArray = actorEntry.actor.getProperty().getColor();
+      const color = colorToString(colorArray);
+      actorWorldPointsMap.set(cacheId, { worldPointsSet, color });
+    }
+  });
+}
+
+function getCacheId(viewport) {
+  const { viewPlaneNormal } = viewport.getCamera();
+  const imageIndex = viewport.getCurrentImageIdIndex();
+  return `${viewport.id}-${pointToString(viewPlaneNormal)}-${imageIndex}`;
+}
+
+/**
+ * Transform a color array into a string
+ * @param colorArray
+ * @returns
+ */
+function colorToString(colorArray): string {
+  function colorComponentToString(component) {
+    let componentString = Math.floor(component * 255).toString(16);
+    if (componentString.length === 1) {
+      componentString = '0' + componentString;
+    }
+    return componentString;
+  }
+  return (
+    '#' +
+    colorComponentToString(colorArray[0]) +
+    colorComponentToString(colorArray[1]) +
+    colorComponentToString(colorArray[2])
+  );
+}
+
+/**
+ * Remove duplicate and unnecessary points
+ * @param worldPoints
+ * @param canvasPoints
+ * @returns
+ */
+function removeExtraPoints(viewport, worldPointsSet) {
+  return worldPointsSet.map((worldPoints) => {
+    const canvasPoints = worldPoints.map((point) => {
+      const canvasPoint = viewport.worldToCanvas(point);
+      return [Math.floor(canvasPoint[0]), Math.floor(canvasPoint[1])];
+    });
+
+    let lastPoint;
+    const newWorldPoints = [];
+    let newCanvasPoints = [];
+    // removing duplicate points
+    for (let i = 0; i < worldPoints.length; i++) {
+      if (lastPoint) {
+        if (distanceToPoint(lastPoint, canvasPoints[i]) > 0) {
+          newWorldPoints.push(worldPoints[i]);
+          newCanvasPoints.push(canvasPoints[i]);
+        }
+      }
+      lastPoint = canvasPoints[i];
+    }
+
+    // checking if a middle point is near the start
+    const firstPoint = newCanvasPoints[0];
+    for (
+      let j = Math.min(30, newCanvasPoints.length);
+      j < newCanvasPoints.length;
+      j++
+    ) {
+      if (distanceToPoint(firstPoint, newCanvasPoints[j]) < 0.5) {
+        newCanvasPoints = newCanvasPoints.slice(0, j);
+        return newWorldPoints.slice(0, j);
+      }
+    }
+    return newWorldPoints;
+  });
+}
+
+SegmentationIntersectionTool.toolName = 'SegmentationIntersection';
+export default SegmentationIntersectionTool;

package/src/tools/displayTools/Contour/addContourSetsToElement.ts

@@ -51,7 +51,7 @@ export function addContourSetsToElement(
     );
 
     const contourSet = geometry.data;
-    const polyData = getPolyData(contourSet);
+    const polyData = getPolyData(contourSet as Types.IContourSet);
     const color = contourSet.getColor();
 
     const size = polyData.getPoints().getNumberOfPoints();

package/src/tools/displayTools/SegmentationDisplayTool.ts

@@ -15,6 +15,7 @@ import {
   SegmentationRepresentationConfig,
   ToolGroupSpecificRepresentation,
 } from '../../types/SegmentationStateTypes';
+import { surfaceDisplay } from './Surface';
 import { contourDisplay } from './Contour';
 import { labelmapDisplay } from './Labelmap';
 
@@ -143,10 +144,15 @@ class SegmentationDisplayTool extends BaseTool {
         const config = this._getMergedRepresentationsConfig(toolGroupId);
 
         const viewportsRenderList = [];
-        const display =
-          representation.type === Representations.Labelmap
-            ? labelmapDisplay
-            : contourDisplay;
+
+        const renderers = {
+          [Representations.Labelmap]: labelmapDisplay,
+          [Representations.Contour]: contourDisplay,
+          [Representations.Surface]: surfaceDisplay,
+        }
+
+        const display = renderers[representation.type];
+
 
         for (const viewport of toolGroupViewports) {
           const renderedViewport = display.render(

package/src/tools/displayTools/Surface/addSurfaceToElement.ts

@@ -0,0 +1,115 @@
+import {
+  getEnabledElement,
+  Enums,
+  VolumeViewport3D,
+} from '@cornerstonejs/core';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkClipClosedSurface from '@kitware/vtk.js/Filters/General/ClipClosedSurface';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
+import { pointToString } from '../../../utilities/pointToString';
+
+const polyDataCache = new Map();
+
+function addSurfaceToElement(
+  element: HTMLDivElement,
+  surface: any,
+  actorUID: string
+): void {
+  const enabledElement = getEnabledElement(element);
+  const { viewport } = enabledElement;
+
+  // Default to true since we are setting a new segmentation, however,
+  // in the event listener, we will make other segmentations visible/invisible
+  // based on the config
+  const points = surface.getPoints();
+  const polys = surface.getPolys();
+  const color = surface.getColor();
+
+  const polyData = vtkPolyData.newInstance();
+  polyData.getPoints().setData(points, 3);
+
+  const triangles = vtkCellArray.newInstance({
+    values: Float32Array.from(polys),
+  });
+  polyData.setPolys(triangles);
+
+  const mapper = vtkMapper.newInstance({});
+  let clippingFilter;
+  if (!(viewport instanceof VolumeViewport3D)) {
+    clippingFilter = vtkClipClosedSurface.newInstance({
+      clippingPlanes: [],
+      activePlaneId: 2,
+      passPointData: false,
+    });
+    clippingFilter.setInputData(polyData);
+    clippingFilter.setGenerateOutline(true);
+    clippingFilter.setGenerateFaces(false);
+    clippingFilter.update();
+    const filteredData = clippingFilter.getOutputData();
+    mapper.setInputData(filteredData);
+  } else {
+    mapper.setInputData(polyData);
+  }
+
+  const actor = vtkActor.newInstance();
+  actor.setMapper(mapper);
+
+  // sets the color of the surface actor
+  actor.getProperty().setColor(color[0] / 255, color[1] / 255, color[2] / 255);
+  viewport.addActor({
+    actor,
+    uid: actorUID,
+    clippingFilter,
+  });
+
+  element.addEventListener(
+    Enums.Events.CLIPPING_PLANES_UPDATED,
+    updateSurfacePlanes
+  );
+}
+
+/**
+ * Updates the clipping planes of a surface and caches the resulting poly data
+ * @param evt
+ */
+function updateSurfacePlanes(evt) {
+  const { actorEntry, vtkPlanes, viewport } = evt.detail;
+  if (!actorEntry?.clippingFilter) {
+    return;
+  }
+
+  const mapper = actorEntry.actor.getMapper();
+
+  const { viewPlaneNormal } = viewport.getCamera();
+  const imageIndex = viewport.getCurrentImageIdIndex();
+
+  // we should not use the focalPoint here, since the pan and zoom updates it,
+  // imageIndex is reliable enough
+  const cacheId = `${viewport.id}-${pointToString(
+    viewPlaneNormal
+  )}-${imageIndex}`;
+
+  let actorCache = polyDataCache.get(actorEntry.uid);
+  if (!actorCache) {
+    actorCache = new Map();
+    polyDataCache.set(actorEntry.uid, actorCache);
+  }
+
+  let polyData = actorCache.get(cacheId);
+  if (!polyData) {
+    const clippingFilter = actorEntry.clippingFilter;
+    clippingFilter.setClippingPlanes(vtkPlanes);
+    try {
+      clippingFilter.update();
+      polyData = clippingFilter.getOutputData();
+      actorCache.set(cacheId, polyData);
+    } catch (e) {
+      console.error('Error clipping surface', e);
+    }
+  }
+  mapper.setInputData(polyData);
+}
+
+export default addSurfaceToElement;

package/src/tools/displayTools/Surface/index.ts

@@ -0,0 +1,3 @@
+import surfaceDisplay from './surfaceDisplay';
+
+export { surfaceDisplay };

package/src/tools/displayTools/Surface/removeSurfaceFromElement.ts

@@ -0,0 +1,35 @@
+import { getEnabledElement } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+/**
+ * Remove the surface representation from the viewport's HTML Element.
+ * NOTE: This function should not be called directly.
+ *
+ * @param element - The element that the segmentation is being added to.
+ * @param segmentationRepresentationUID - The UID of the surface representation to remove.
+ * @param removeFromCache - boolean
+ *
+ * @internal
+ */
+function removeContourFromElement(
+  element: HTMLDivElement,
+  segmentationRepresentationUID: string,
+  removeFromCache = false // Todo
+): void {
+  const enabledElement = getEnabledElement(element);
+  const { viewport } = enabledElement;
+
+  const actorEntries = (viewport as Types.IVolumeViewport).getActors();
+
+  // remove actors whose id has the same prefix as the segmentationRepresentationUID
+  const actorUIDsToRemove = actorEntries
+    .map(({ uid }) =>
+      uid.startsWith(segmentationRepresentationUID) ? uid : undefined
+    )
+    .filter(Boolean);
+
+  // @ts-ignore
+  viewport.removeActors(actorUIDsToRemove);
+}
+
+export default removeContourFromElement;