@cornerstonejs/tools 1.51.5 → 1.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.51.5",
+  "version": "1.53.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.51.5",
+    "@cornerstonejs/core": "^1.53.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": "8ed54955b6c0c04818954dabb9a1d22d1bf4360e"
+  "gitHead": "881872ffe29341443f91cead0b810871a6a1929b"
 }

package/src/drawingSvg/drawPath.ts

@@ -0,0 +1,96 @@
+import type { Types } from '@cornerstonejs/core';
+import _getHash from './_getHash';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import { SVGDrawingHelper } from '../types';
+
+/**
+ * Draws an SVG path with the given points.
+ *
+ * The `closePath` option, if true, draws a closed path (last point
+ * connected to the first).
+ */
+export default function drawPath(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  pathUID: string,
+  points: Types.Point2[] | Types.Point2[][],
+  options: {
+    color?: string;
+    fillColor?: string;
+    fillOpacity?: number;
+    width?: number;
+    lineWidth?: number;
+    lineDash?: string;
+    closePath?: boolean;
+  }
+): void {
+  // It may be a polyline with holes that will be an array with multiple
+  // 'points' arrays
+  const hasSubArrays =
+    points.length && points[0].length && Array.isArray(points[0][0]);
+
+  const pointsArrays = hasSubArrays ? points : [points];
+  const {
+    color = 'dodgerblue',
+    width = 10,
+    fillColor = 'none',
+    fillOpacity = 0,
+    lineWidth,
+    lineDash,
+    closePath = false,
+  } = options;
+
+  // for supporting both lineWidth and width options
+  const strokeWidth = lineWidth || width;
+
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'path', pathUID);
+  const existingNode = svgDrawingHelper.getSvgNode(svgNodeHash);
+  let pointsAttribute = '';
+
+  for (let i = 0, numArrays = pointsArrays.length; i < numArrays; i++) {
+    const points = pointsArrays[i];
+    const numPoints = points.length;
+
+    if (numPoints < 2) {
+      continue;
+    }
+
+    for (let j = 0; j < numPoints; j++) {
+      const point = points[j];
+      const cmd = j ? 'L' : 'M';
+
+      pointsAttribute += `${cmd} ${point[0]},${point[1]} `;
+    }
+
+    if (closePath) {
+      pointsAttribute += 'Z ';
+    }
+  }
+
+  if (!pointsAttribute) {
+    return;
+  }
+
+  const attributes = {
+    d: pointsAttribute,
+    stroke: color,
+    fill: fillColor,
+    'fill-opacity': fillOpacity,
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingNode) {
+    // This is run to avoid re-rendering annotations that actually haven't changed
+    setAttributesIfNecessary(attributes, existingNode);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const newNode = document.createElementNS(svgns, 'path');
+
+    setNewAttributesIfValid(attributes, newNode);
+    svgDrawingHelper.appendNode(newNode, svgNodeHash);
+  }
+}

package/src/drawingSvg/drawPolyline.ts

@@ -7,7 +7,7 @@ import { SVGDrawingHelper } from '../types';
 /**
  * Draws an SVG polyline with the given points.
  *
- * The `connectLastToFirst` option, if true, draws a closed polyline, with the
+ * The `closePath` option, if true, draws a closed polyline, with the
  * last point connected to the first.
  */
 export default function drawPolyline(
@@ -22,26 +22,22 @@ export default function drawPolyline(
     width?: number;
     lineWidth?: number;
     lineDash?: string;
-    connectLastToFirst?: boolean;
+    closePath?: boolean;
   }
 ): void {
   if (points.length < 2) {
     return;
   }
 
-  const { fillColor, fillOpacity, color, width, lineWidth, lineDash } =
-    Object.assign(
-      {
-        color: 'dodgerblue',
-        width: '2',
-        fillColor: 'none',
-        fillOpacity: 0,
-        lineWidth: undefined,
-        lineDash: undefined,
-        connectLastToFirst: false,
-      },
-      options
-    );
+  const {
+    color = 'dodgerblue',
+    width = 10,
+    fillColor = 'none',
+    fillOpacity = 0,
+    lineWidth,
+    lineDash,
+    closePath = false,
+  } = options;
 
   // for supporting both lineWidth and width options
   const strokeWidth = lineWidth || width;
@@ -53,10 +49,10 @@ export default function drawPolyline(
   let pointsAttribute = '';
 
   for (const point of points) {
-    pointsAttribute += `${point[0]}, ${point[1]} `;
+    pointsAttribute += `${point[0].toFixed(1)}, ${point[1].toFixed(1)} `;
   }
 
-  if (options.connectLastToFirst) {
+  if (closePath) {
     const firstPoint = points[0];
 
     pointsAttribute += `${firstPoint[0]}, ${firstPoint[1]}`;

package/src/drawingSvg/index.ts

@@ -6,6 +6,7 @@ import drawHandles from './drawHandles';
 import drawHandle from './drawHandle';
 import drawLine from './drawLine';
 import drawPolyline from './drawPolyline';
+import drawPath from './drawPath';
 import drawLinkedTextBox from './drawLinkedTextBox';
 import drawRect from './drawRect';
 import drawTextBox from './drawTextBox';
@@ -23,6 +24,7 @@ export {
   drawHandle,
   drawLine,
   drawPolyline,
+  drawPath,
   drawLinkedTextBox,
   drawRect,
   drawTextBox,

package/src/enums/ChangeTypes.ts

@@ -27,6 +27,10 @@ enum ChangeTypes {
    * Completed occurs only for the annotation completed event, just to identify it
    */
   Completed = 'Completed',
+  /**
+   * Occurs when an interpolation result is updated with more tool specific data.
+   */
+  InterpolationUpdated = 'InterpolationUpdated',
 }
 
 export default ChangeTypes;

package/src/eventDispatchers/keyboardEventHandlers/keyDown.ts

@@ -40,7 +40,7 @@ export default function keyDown(evt: KeyDownEventType): void {
       // so that the method can depend on the specific configuration in use.
       const method =
         typeof value.method === 'function' ? value.method : key[value.method];
-      method.call(key, element, value);
+      method.call(key, element, value, evt);
     }
   }
 }

package/src/eventDispatchers/shared/getActiveToolForMouseEvent.ts

@@ -1,5 +1,5 @@
 import { ToolGroupManager } from '../../store';
-import { MouseBindings, ToolModes } from '../../enums';
+import { ToolModes } from '../../enums';
 import { keyEventListener } from '../../eventListeners';
 import { EventTypes } from '../../types';
 import getMouseModifier from './getMouseModifier';

package/src/eventListeners/annotations/contourSegmentation/contourSegmentationCompleted.ts

@@ -14,16 +14,24 @@ import {
   getAnnotations,
   addAnnotation,
   removeAnnotation,
+  getChildAnnotations,
+  addChildAnnotation,
+  clearParentAnnotation,
 } from '../../../stateManagement/annotation/annotationState';
-import { AnnotationCompletedEventType } from '../../../types/EventTypes';
+import {
+  AnnotationCompletedEventType,
+  ContourAnnotationCompletedEventDetail,
+} from '../../../types/EventTypes';
 import * as contourUtils from '../../../utilities/contours';
 import * as contourSegUtils from '../../../utilities/contourSegmentation';
 import { ToolGroupManager, hasTool as cstHasTool } from '../../../store';
 import { PlanarFreehandContourSegmentationTool } from '../../../tools';
+import type { ContourAnnotation } from '../../../types/ContourAnnotation';
+import { ContourWindingDirection } from '../../../types/ContourAnnotation';
 
 const DEFAULT_CONTOUR_SEG_TOOLNAME = 'PlanarFreehandContourSegmentationTool';
 
-export default function contourSegmentationCompletedListener(
+export default async function contourSegmentationCompletedListener(
   evt: AnnotationCompletedEventType
 ) {
   const sourceAnnotation = evt.detail
@@ -60,15 +68,28 @@ export default function contourSegmentationCompletedListener(
     return;
   }
 
-  const { targetAnnotation, targetPolyline } = targetAnnotationInfo;
+  const { targetAnnotation, targetPolyline, isContourHole } =
+    targetAnnotationInfo;
 
-  processContours(
-    viewport,
-    sourceAnnotation,
-    sourcePolyline,
-    targetAnnotation,
-    targetPolyline
-  );
+  if (isContourHole) {
+    const { contourHoleProcessingEnabled = false } =
+      evt.detail as ContourAnnotationCompletedEventDetail;
+
+    // Do not create holes when contourHoleProcessingEnabled is `false`
+    if (!contourHoleProcessingEnabled) {
+      return;
+    }
+
+    createPolylineHole(viewport, targetAnnotation, sourceAnnotation);
+  } else {
+    combinePolylines(
+      viewport,
+      targetAnnotation,
+      targetPolyline,
+      sourceAnnotation,
+      sourcePolyline
+    );
+  }
 }
 
 function isFreehandContourSegToolRegistered(viewport: Types.IViewport) {
@@ -111,26 +132,16 @@ function convertContourPolylineToCanvasSpace(
   return projectedPolyline;
 }
 
-function convertPolylineToWorldSpace(
-  polyline: Types.Point2[],
-  viewport: Types.IViewport
-): Types.Point3[] {
-  const numPoints = polyline.length;
-  const projectedPolyline = new Array(numPoints);
-
-  for (let i = 0; i < numPoints; i++) {
-    projectedPolyline[i] = viewport.canvasToWorld(polyline[i]);
-  }
-
-  return projectedPolyline;
-}
-
 function getValidContourSegmentationAnnotations(
   sourceAnnotation: ContourSegmentationAnnotation
 ): ContourSegmentationAnnotation[] {
   const { annotationUID: sourceAnnotationUID } = sourceAnnotation;
   const { FrameOfReferenceUID } = sourceAnnotation.metadata;
 
+  if (!FrameOfReferenceUID) {
+    return [];
+  }
+
   // Get all annotations and filter all contour segmentations locally
   const toolName = undefined;
   const annotationsGroups = getAnnotations(toolName, FrameOfReferenceUID);
@@ -157,6 +168,7 @@ function findIntersectingContour(
 ): {
   targetAnnotation: ContourSegmentationAnnotation;
   targetPolyline: Types.Point2[];
+  isContourHole: boolean;
 } {
   const sourceAABB = math.polyline.getAABB(sourcePolyline);
 
@@ -168,22 +180,81 @@ function findIntersectingContour(
     );
 
     const targetAABB = math.polyline.getAABB(targetPolyline);
-    const polylinesIntersect =
-      math.aabb.intersectAABB(sourceAABB, targetAABB) &&
+    const aabbIntersect = math.aabb.intersectAABB(sourceAABB, targetAABB);
+    const lineSegmentsIntersect =
+      aabbIntersect &&
       math.polyline.intersectPolyline(sourcePolyline, targetPolyline);
+    const isContourHole =
+      aabbIntersect &&
+      !lineSegmentsIntersect &&
+      math.polyline.containsPoints(targetPolyline, sourcePolyline);
 
-    if (polylinesIntersect) {
-      return { targetAnnotation, targetPolyline };
+    if (lineSegmentsIntersect || isContourHole) {
+      return { targetAnnotation, targetPolyline, isContourHole };
     }
   }
 }
 
-function processContours(
+function createPolylineHole(
+  viewport: Types.IViewport,
+  targetAnnotation: ContourSegmentationAnnotation,
+  holeAnnotation: ContourSegmentationAnnotation
+) {
+  const { windingDirection: targetWindingDirection } =
+    targetAnnotation.data.contour;
+  const { windingDirection: holeWindingDirection } =
+    holeAnnotation.data.contour;
+
+  // Check if both normals are pointing to the same direction because the
+  // polyline for the hole needs to be in a different direction
+  // if (glMatrix.equals(1, dotNormals)) {
+  if (targetWindingDirection === holeWindingDirection) {
+    holeAnnotation.data.contour.polyline.reverse();
+    holeAnnotation.data.contour.windingDirection = targetWindingDirection * -1;
+  }
+
+  addChildAnnotation(targetAnnotation, holeAnnotation);
+
+  const { element } = viewport;
+  const enabledElement = getEnabledElement(element);
+  const { renderingEngine } = enabledElement;
+
+  // Updating a Spline contours, for example, should also update freehand contours
+  const updatedToolNames = new Set([
+    DEFAULT_CONTOUR_SEG_TOOLNAME,
+    targetAnnotation.metadata.toolName,
+    holeAnnotation.metadata.toolName,
+  ]);
+
+  for (const toolName of updatedToolNames.values()) {
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      toolName
+    );
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+  }
+}
+
+function getContourHolesData(
+  viewport: Types.IViewport,
+  annotation: ContourAnnotation
+) {
+  return getChildAnnotations(annotation).map((holeAnnotation) => {
+    const polyline = convertContourPolylineToCanvasSpace(
+      holeAnnotation.data.contour.polyline,
+      viewport
+    );
+
+    return { annotation: holeAnnotation, polyline };
+  });
+}
+
+async function combinePolylines(
   viewport: Types.IViewport,
-  sourceAnnotation: ContourSegmentationAnnotation,
-  sourcePolyline: Types.Point2[],
   targetAnnotation: ContourSegmentationAnnotation,
-  targetPolyline: Types.Point2[]
+  targetPolyline: Types.Point2[],
+  sourceAnnotation: ContourSegmentationAnnotation,
+  sourcePolyline: Types.Point2[]
 ) {
   const sourceStartPoint = sourcePolyline[0];
   const mergePolylines = math.polyline.containsPoint(
@@ -191,6 +262,20 @@ function processContours(
     sourceStartPoint
   );
 
+  const contourHolesData = getContourHolesData(viewport, targetAnnotation);
+  const unassignedContourHolesSet = new Set(contourHolesData);
+  const reassignedContourHolesMap = new Map();
+  const assignHoleToPolyline = (parentPolyline, holeData) => {
+    let holes = reassignedContourHolesMap.get(parentPolyline);
+
+    if (!holes) {
+      holes = [];
+      reassignedContourHolesMap.set(parentPolyline, holes);
+    }
+
+    holes.push(holeData);
+    unassignedContourHolesSet.delete(holeData);
+  };
   const newPolylines = [];
 
   if (mergePolylines) {
@@ -200,32 +285,58 @@ function processContours(
     );
 
     newPolylines.push(mergedPolyline);
+
+    // Keep all holes because the contour can only grow when merging and there
+    // is no chance for any hole to be removed
+    Array.from(unassignedContourHolesSet.keys()).forEach((holeData) =>
+      assignHoleToPolyline(mergedPolyline, holeData)
+    );
   } else {
     const subtractedPolylines = math.polyline.subtractPolylines(
       targetPolyline,
       sourcePolyline
     );
 
-    subtractedPolylines.forEach((newPolyline) =>
-      newPolylines.push(newPolyline)
-    );
+    subtractedPolylines.forEach((newPolyline) => {
+      newPolylines.push(newPolyline);
+
+      Array.from(unassignedContourHolesSet.keys()).forEach((holeData) => {
+        const containsHole = math.polyline.containsPoints(
+          newPolyline,
+          holeData.polyline
+        );
+
+        if (containsHole) {
+          assignHoleToPolyline(newPolyline, holeData);
+          unassignedContourHolesSet.delete(holeData);
+        }
+      });
+    });
   }
 
-  removeAnnotation(sourceAnnotation.annotationUID);
-  removeAnnotation(targetAnnotation.annotationUID);
+  // Make sure the holes that will be added to the new annotation are not
+  // associated to the target annotation that will be deleted
+  Array.from(reassignedContourHolesMap.values()).forEach(
+    (contourHolesDataArray) =>
+      contourHolesDataArray.forEach((contourHoleData) =>
+        clearParentAnnotation(contourHoleData.annotation)
+      )
+  );
 
   const { element } = viewport;
   const enabledElement = getEnabledElement(element);
-  const { renderingEngine } = enabledElement;
   const { metadata, data } = targetAnnotation;
   const { handles, segmentation } = data;
   const { textBox } = handles;
 
+  removeAnnotation(sourceAnnotation.annotationUID);
+  removeAnnotation(targetAnnotation.annotationUID);
+
   for (let i = 0; i < newPolylines.length; i++) {
-    const polyline = convertPolylineToWorldSpace(newPolylines[i], viewport);
-    const startPoint = polyline[0];
-    const endPoint = polyline[polyline.length - 1];
-    const newAnnotation = {
+    const polyline = newPolylines[i];
+    const startPoint = viewport.canvasToWorld(polyline[0]);
+    const endPoint = viewport.canvasToWorld(polyline[polyline.length - 1]);
+    const newAnnotation: ContourAnnotation = {
       metadata: {
         ...metadata,
         toolName: DEFAULT_CONTOUR_SEG_TOOLNAME,
@@ -237,7 +348,7 @@ function processContours(
           textBox: textBox ? { ...textBox } : undefined,
         },
         contour: {
-          polyline,
+          polyline: [],
           closed: true,
         },
         segmentation: {
@@ -251,23 +362,48 @@ function processContours(
       isVisible: undefined,
     };
 
-    addAnnotation(newAnnotation, element);
+    // Calling `updateContourPolyline` method instead of setting it locally
+    // because it is also responsible for checking/setting the winding direction.
+    contourUtils.updateContourPolyline(
+      newAnnotation,
+      {
+        points: polyline,
+        closed: true,
+        targetWindingDirection: ContourWindingDirection.Clockwise,
+      },
+      viewport
+    );
 
-    // Updating a Spline contours, for example, should also update freehand contours
-    const updatedTtoolNames = new Set([
-      DEFAULT_CONTOUR_SEG_TOOLNAME,
-      targetAnnotation.metadata.toolName,
-    ]);
+    addAnnotation(newAnnotation, element);
 
-    for (const toolName of updatedTtoolNames.values()) {
-      const viewportIdsToRender = getViewportIdsWithToolToRender(
-        element,
-        toolName
-      );
-      triggerAnnotationRenderForViewportIds(
-        renderingEngine,
-        viewportIdsToRender
+    reassignedContourHolesMap
+      .get(polyline)
+      ?.forEach((holeData) =>
+        addChildAnnotation(newAnnotation, holeData.annotation)
       );
-    }
   }
+
+  updateViewports(enabledElement, targetAnnotation, sourceAnnotation);
+}
+
+function updateViewports(enabledElement, targetAnnotation, sourceAnnotation) {
+  const { viewport } = enabledElement;
+  const { element } = viewport;
+  const { renderingEngine } = enabledElement;
+
+  const updatedTtoolNames = new Set([
+    DEFAULT_CONTOUR_SEG_TOOLNAME,
+    targetAnnotation.metadata.toolName,
+    sourceAnnotation.metadata.toolName,
+  ]);
+
+  for (const toolName of updatedTtoolNames.values()) {
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      toolName
+    );
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+  }
+
+  return new Promise((resolve) => window.requestAnimationFrame(resolve));
 }