@cornerstonejs/tools 1.52.0 → 1.54.0

package/src/tools/annotation/SplineROITool.ts

@@ -6,7 +6,10 @@ import {
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 import { vec3 } from 'gl-matrix';
-import { removeAnnotation } from '../../stateManagement/annotation/annotationState';
+import {
+  getChildAnnotations,
+  removeAnnotation,
+} from '../../stateManagement/annotation/annotationState';
 import {
   drawHandles as drawHandlesSvg,
   drawPolyline as drawPolylineSvg,
@@ -37,13 +40,15 @@ import {
   getCalibratedScale,
   getCalibratedAreaUnits,
 } from '../../utilities';
+import getMouseModifierKey from '../../eventDispatchers/shared/getMouseModifier';
 import { getViewportIdsWithToolToRender } from '../../utilities/viewportFilters';
 import { getTextBoxCoordsCanvas } from '../../utilities/drawing';
 
-import { SplineROIAnnotation } from '../../types/ToolSpecificAnnotationTypes';
-import {
-  AnnotationCompletedEventDetail,
+import { ContourWindingDirection } from '../../types/ContourAnnotation';
+import type { SplineROIAnnotation } from '../../types/ToolSpecificAnnotationTypes';
+import type {
   AnnotationModifiedEventDetail,
+  ContourAnnotationCompletedEventDetail,
 } from '../../types/EventTypes';
 import { ISpline } from '../../types/ISpline';
 import { CardinalSpline } from './splines/CardinalSpline';
@@ -51,7 +56,7 @@ import { LinearSpline } from './splines/LinearSpline';
 import { CatmullRomSpline } from './splines/CatmullRomSpline';
 import { BSpline } from './splines/BSpline';
 import ContourSegmentationBaseTool from '../base/ContourSegmentationBaseTool';
-import reverseIfAntiClockwise from '../../utilities/contours/reverseIfAntiClockwise';
+import updateContourPolyline from '../../utilities/contours/updateContourPolyline';
 
 const SPLINE_MIN_POINTS = 3;
 const SPLINE_CLICK_CLOSE_CURVE_DIST = 10;
@@ -93,12 +98,14 @@ class SplineROITool extends ContourSegmentationBaseTool {
     newAnnotation?: boolean;
     hasMoved?: boolean;
     lastCanvasPoint?: Types.Point2;
+    contourHoleProcessingEnabled?: boolean;
   } | null;
   isDrawing: boolean;
   isHandleOutsideImage = false;
   fireChangeOnUpdate: {
     annotationUID: string;
     changeType: ChangeTypes;
+    contourHoleProcessingEnabled: boolean;
   } = null;
 
   constructor(
@@ -109,6 +116,11 @@ class SplineROITool extends ContourSegmentationBaseTool {
         preventHandleOutsideImage: false,
         calculateStats: true,
         getTextLines: defaultGetTextLines,
+        /**
+         * Specify which modifier key is used to add a hole to a contour. The
+         * modifier must be pressed when the first point of a new contour is added.
+         */
+        contourHoleAdditionModifierKey: KeyboardBindings.Shift,
         spline: {
           configuration: {
             [SplineTypesEnum.Cardinal]: {
@@ -176,6 +188,9 @@ class SplineROITool extends ContourSegmentationBaseTool {
     const eventDetail = evt.detail;
     const { currentPoints, element } = eventDetail;
     const { canvas: canvasPos } = currentPoints;
+    const contourHoleProcessingEnabled =
+      getMouseModifierKey(evt.detail.event) ===
+      this.configuration.contourHoleAdditionModifierKey;
 
     const enabledElement = getEnabledElement(element);
     const { renderingEngine } = enabledElement;
@@ -196,6 +211,7 @@ class SplineROITool extends ContourSegmentationBaseTool {
       newAnnotation: true,
       hasMoved: false,
       lastCanvasPoint: canvasPos,
+      contourHoleProcessingEnabled,
     };
 
     this._activateDraw(element);
@@ -303,7 +319,12 @@ class SplineROITool extends ContourSegmentationBaseTool {
     const eventDetail = evt.detail;
     const { element } = eventDetail;
 
-    const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
+    const {
+      annotation,
+      viewportIdsToRender,
+      newAnnotation,
+      contourHoleProcessingEnabled,
+    } = this.editData;
     const { data } = annotation;
     annotation.autoGenerated = false;
 
@@ -338,6 +359,7 @@ class SplineROITool extends ContourSegmentationBaseTool {
       changeType: newAnnotation
         ? ChangeTypes.Completed
         : ChangeTypes.HandlesUpdated,
+      contourHoleProcessingEnabled,
     };
 
     triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
@@ -466,14 +488,7 @@ class SplineROITool extends ContourSegmentationBaseTool {
       const { deltaPoints } = eventDetail as EventTypes.MouseDragEventDetail;
       const worldPosDelta = deltaPoints.world;
 
-      const points = data.handles.points;
-
-      points.forEach((point) => {
-        point[0] += worldPosDelta[0];
-        point[1] += worldPosDelta[1];
-        point[2] += worldPosDelta[2];
-      });
-      annotation.invalidated = true;
+      this.moveAnnotation(annotation, worldPosDelta);
     } else {
       // Move mode - after double click, and mouse move to draw
       const { currentPoints } = eventDetail;
@@ -522,11 +537,15 @@ class SplineROITool extends ContourSegmentationBaseTool {
   /**
    * Triggers an annotation completed event.
    */
-  triggerAnnotationCompleted = (annotation: SplineROIAnnotation): void => {
+  triggerAnnotationCompleted = (
+    annotation: SplineROIAnnotation,
+    contourHoleProcessingEnabled: boolean
+  ): void => {
     const eventType = Events.ANNOTATION_COMPLETED;
-    const eventDetail: AnnotationCompletedEventDetail = {
+    const eventDetail: ContourAnnotationCompletedEventDetail = {
       annotation,
       changeType: ChangeTypes.Completed,
+      contourHoleProcessingEnabled,
     };
 
     triggerEvent(eventTarget, eventType, eventDetail);
@@ -558,10 +577,11 @@ class SplineROITool extends ContourSegmentationBaseTool {
   triggerChangeEvent = (
     annotation: SplineROIAnnotation,
     enabledElement: Types.IEnabledElement,
-    changeType = ChangeTypes.StatsUpdated
+    changeType = ChangeTypes.StatsUpdated,
+    contourHoleProcessingEnabled
   ): void => {
     if (changeType === ChangeTypes.Completed) {
-      this.triggerAnnotationCompleted(annotation);
+      this.triggerAnnotationCompleted(annotation, contourHoleProcessingEnabled);
     } else {
       this.triggerAnnotationModified(annotation, enabledElement, changeType);
     }
@@ -620,7 +640,7 @@ class SplineROITool extends ContourSegmentationBaseTool {
   };
 
   protected isContourSegmentationTool(): boolean {
-    // Disable contour segmenatation behavior because it shall be activated only
+    // Disable contour segmentation behavior because it shall be activated only
     // for SplineContourSegmentationTool
     return false;
   }
@@ -658,15 +678,32 @@ class SplineROITool extends ContourSegmentationBaseTool {
     const { drawPreviewEnabled } = this.configuration.spline;
     const splineType = annotation.data.spline.type;
     const splineConfig = this._getSplineConfig(splineType);
-    const spline = this._updateSplineInstance(element, annotation);
-    const splinePolylineCanvas = reverseIfAntiClockwise(
-      spline.getPolylinePoints()
-    );
-    const splinePolylineWorld = splinePolylineCanvas.map((point2) =>
-      viewport.canvasToWorld(point2)
-    );
+    const spline = annotation.data.spline.instance;
 
-    data.contour.polyline = splinePolylineWorld;
+    // Update current and all child annotations/splines
+    if (annotation.invalidated) {
+      const splineAnnotationsGroup = [
+        annotation,
+        ...getChildAnnotations(annotation),
+      ].filter((annotation) =>
+        this._isSplineROIAnnotation(annotation)
+      ) as SplineROIAnnotation[];
+
+      splineAnnotationsGroup.forEach((annotation) => {
+        const spline = this._updateSplineInstance(element, annotation);
+        const splinePolylineCanvas = spline.getPolylinePoints();
+
+        updateContourPolyline(
+          annotation,
+          {
+            points: splinePolylineCanvas,
+            closed: data.contour.closed,
+            targetWindingDirection: ContourWindingDirection.Clockwise,
+          },
+          viewport
+        );
+      });
+    }
 
     // Let the base class render the contour
     super.renderAnnotationInstance(renderContext);
@@ -768,7 +805,8 @@ class SplineROITool extends ContourSegmentationBaseTool {
       this.triggerChangeEvent(
         annotation,
         enabledElement,
-        this.fireChangeOnUpdate.changeType
+        this.fireChangeOnUpdate.changeType,
+        this.fireChangeOnUpdate.contourHoleProcessingEnabled
       );
       this.fireChangeOnUpdate = null;
     }
@@ -990,6 +1028,12 @@ class SplineROITool extends ContourSegmentationBaseTool {
     );
   };
 
+  _isSplineROIAnnotation(
+    annotation: Annotation
+  ): annotation is SplineROIAnnotation {
+    return !!(<SplineROIAnnotation>annotation).data?.spline;
+  }
+
   /**
    * Get a spline config merged with the default settings.
    * @param type - Spline type (CARDINAL, CATMULLROM, LINEAR or BSPLINE)
@@ -1019,7 +1063,10 @@ class SplineROITool extends ContourSegmentationBaseTool {
     spline.closed = !!data.contour.closed;
 
     // Update spline resolution in case it has changed
-    if (spline.resolution !== splineConfig.resolution) {
+    if (
+      !spline.fixedResolution &&
+      spline.resolution !== splineConfig.resolution
+    ) {
       spline.resolution = parseInt(splineConfig.resolution);
       annotation.invalidated = true;
     }

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

@@ -7,14 +7,16 @@ import {
   resetElementCursor,
   hideElementCursor,
 } from '../../../cursors/elementCursor';
-import { EventTypes } from '../../../types';
+import type { EventTypes } from '../../../types';
 import { polyline } from '../../../utilities/math';
-import { PlanarFreehandROIAnnotation } from '../../../types/ToolSpecificAnnotationTypes';
+import { ContourWindingDirection } from '../../../types/ContourAnnotation';
+import type { PlanarFreehandROIAnnotation } from '../../../types/ToolSpecificAnnotationTypes';
 import {
   getInterpolatedPoints,
   shouldSmooth,
 } from '../../../utilities/planarFreehandROITool/smoothPoints';
 import triggerAnnotationRenderForViewportIds from '../../../utilities/triggerAnnotationRenderForViewportIds';
+import updateContourPolyline from '../../../utilities/contours/updateContourPolyline';
 import { triggerAnnotationModified } from '../../../stateManagement/annotation/helpers/state';
 
 const { getSubPixelSpacingAndXYDirections, addCanvasPointsToArray, getArea } =
@@ -223,12 +225,16 @@ function finishEditAndStartNewEdit(evt: EventTypes.InteractionEventType): void {
   const { annotation, viewportIdsToRender } = this.commonData;
   const { fusedCanvasPoints, editCanvasPoints } = this.editData;
 
-  const worldPoints = fusedCanvasPoints.map((canvasPoint) =>
-    viewport.canvasToWorld(canvasPoint)
+  updateContourPolyline(
+    annotation,
+    {
+      points: fusedCanvasPoints,
+      closed: true,
+      targetWindingDirection: ContourWindingDirection.Clockwise,
+    },
+    viewport
   );
 
-  annotation.data.contour.polyline = worldPoints;
-  annotation.data.contour.closed = true;
   // If any manual update, triggered on an annotation, then it will be treated as non-autogenerated.
   if (annotation.autoGenerated) {
     annotation.autoGenerated = false;
@@ -446,12 +452,15 @@ function completeClosedContourEdit(element: HTMLDivElement) {
         )
       : fusedCanvasPoints;
 
-    const worldPoints = updatedPoints.map((canvasPoint) =>
-      viewport.canvasToWorld(canvasPoint)
+    updateContourPolyline(
+      annotation,
+      {
+        points: updatedPoints,
+        closed: true,
+        targetWindingDirection: ContourWindingDirection.Clockwise,
+      },
+      viewport
     );
-    annotation.data.contour.polyline = worldPoints;
-    annotation.data.contour.closed = true;
-    annotation.invalidated = true;
 
     // If any manual update, triggered on an annotation, then it will be treated as non-autogenerated.
     if (annotation.autoGenerated) {

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

@@ -11,12 +11,14 @@ import {
   shouldSmooth,
   getInterpolatedPoints,
 } from '../../../utilities/planarFreehandROITool/smoothPoints';
+import getMouseModifierKey from '../../../eventDispatchers/shared/getMouseModifier';
 import triggerAnnotationRenderForViewportIds from '../../../utilities/triggerAnnotationRenderForViewportIds';
-import { triggerAnnotationCompleted } from '../../../stateManagement/annotation/helpers/state';
+import { triggerContourAnnotationCompleted } from '../../../stateManagement/annotation/helpers/state';
 import { PlanarFreehandROIAnnotation } from '../../../types/ToolSpecificAnnotationTypes';
 import findOpenUShapedContourVectorToPeak from './findOpenUShapedContourVectorToPeak';
 import { polyline } from '../../../utilities/math';
 import { removeAnnotation } from '../../../stateManagement/annotation/annotationState';
+import { updateContourPolyline } from '../../../utilities/contours/';
 import reverseIfAntiClockwise from '../../../utilities/contours/reverseIfAntiClockwise';
 
 const {
@@ -41,6 +43,9 @@ function activateDraw(
   const canvasPos = currentPoints.canvas;
   const enabledElement = getEnabledElement(element);
   const { viewport } = enabledElement;
+  const contourHoleProcessingEnabled =
+    getMouseModifierKey(evt.detail.event) ===
+    this.configuration.contourHoleAdditionModifierKey;
 
   const { spacing, xDir, yDir } = getSubPixelSpacingAndXYDirections(
     viewport,
@@ -50,6 +55,7 @@ function activateDraw(
   this.drawData = {
     canvasPoints: [canvasPos],
     polylineIndex: 0,
+    contourHoleProcessingEnabled,
   };
 
   this.commonData = {
@@ -171,7 +177,7 @@ function mouseDragDrawCallback(evt: EventTypes.InteractionEventType): void {
  */
 function mouseUpDrawCallback(evt: EventTypes.InteractionEventType): void {
   const { allowOpenContours } = this.configuration;
-  const { canvasPoints } = this.drawData;
+  const { canvasPoints, contourHoleProcessingEnabled } = this.drawData;
   const firstPoint = canvasPoints[0];
   const lastPoint = canvasPoints[canvasPoints.length - 1];
   const eventDetail = evt.detail;
@@ -185,16 +191,19 @@ function mouseUpDrawCallback(evt: EventTypes.InteractionEventType): void {
       this.configuration.closeContourProximity
     )
   ) {
-    this.completeDrawOpenContour(element);
+    this.completeDrawOpenContour(element, contourHoleProcessingEnabled);
   } else {
-    this.completeDrawClosedContour(element);
+    this.completeDrawClosedContour(element, contourHoleProcessingEnabled);
   }
 }
 
 /**
  * Completes the contour being drawn, creating a closed contour annotation. It will return true if contour is completed or false in case contour drawing is halted.
  */
-function completeDrawClosedContour(element: HTMLDivElement): boolean {
+function completeDrawClosedContour(
+  element: HTMLDivElement,
+  contourHoleProcessingEnabled: boolean
+): boolean {
   this.removeCrossedLinesOnCompleteDraw();
   const { canvasPoints } = this.drawData;
 
@@ -226,19 +235,22 @@ function completeDrawClosedContour(element: HTMLDivElement): boolean {
     : clockwise;
 
   // Note: -> This is pretty expensive and may not scale well with hundreds of
-  // contours. A future optimisation if we use this for segmentation is to re-do
+  // contours. A future optimization if we use this for segmentation is to re-do
   // this rendering with the GPU rather than SVG.
-  const worldPoints = updatedPoints.map((canvasPoint) =>
-    viewport.canvasToWorld(canvasPoint)
+
+  updateContourPolyline(
+    annotation,
+    {
+      points: updatedPoints,
+      closed: true,
+    },
+    viewport
   );
 
-  annotation.data.contour.polyline = worldPoints;
-  annotation.data.contour.closed = true;
-  annotation.invalidated = true;
   const { textBox } = annotation.data.handles;
 
-  if (!textBox.hasMoved) {
-    triggerAnnotationCompleted(annotation);
+  if (!textBox?.hasMoved) {
+    triggerContourAnnotationCompleted(annotation, contourHoleProcessingEnabled);
   }
 
   this.isDrawing = false;
@@ -280,7 +292,10 @@ function removeCrossedLinesOnCompleteDraw(): void {
 /**
  * Completes the contour being drawn, creating an open contour annotation. It will return true if contour is completed or false in case contour drawing is halted.
  */
-function completeDrawOpenContour(element: HTMLDivElement): boolean {
+function completeDrawOpenContour(
+  element: HTMLDivElement,
+  contourHoleProcessingEnabled: boolean
+): boolean {
   const { canvasPoints } = this.drawData;
 
   // check and halt if necessary the drawing process, last chance to complete drawing and fire events.
@@ -299,14 +314,18 @@ function completeDrawOpenContour(element: HTMLDivElement): boolean {
   // Note: -> This is pretty expensive and may not scale well with hundreds of
   // contours. A future optimisation if we use this for segmentation is to re-do
   // this rendering with the GPU rather than SVG.
-  const worldPoints = updatedPoints.map((canvasPoint) =>
-    viewport.canvasToWorld(canvasPoint)
+
+  updateContourPolyline(
+    annotation,
+    {
+      points: updatedPoints,
+      closed: false,
+    },
+    viewport
   );
 
-  annotation.data.contour.polyline = worldPoints;
-  annotation.data.contour.closed = false;
-  annotation.invalidated = true;
   const { textBox } = annotation.data.handles;
+  const worldPoints = annotation.data.contour.polyline;
 
   // Add the first and last points to the list of handles. These means they
   // will render handles on mouse hover.
@@ -322,7 +341,7 @@ function completeDrawOpenContour(element: HTMLDivElement): boolean {
   }
 
   if (!textBox.hasMoved) {
-    triggerAnnotationCompleted(annotation);
+    triggerContourAnnotationCompleted(annotation, contourHoleProcessingEnabled);
   }
 
   this.isDrawing = false;
@@ -407,7 +426,7 @@ function applyCreateOnCross(
  */
 function cancelDrawing(element: HTMLElement) {
   const { allowOpenContours } = this.configuration;
-  const { canvasPoints } = this.drawData;
+  const { canvasPoints, contourHoleProcessingEnabled } = this.drawData;
   const firstPoint = canvasPoints[0];
   const lastPoint = canvasPoints[canvasPoints.length - 1];
 
@@ -419,9 +438,9 @@ function cancelDrawing(element: HTMLElement) {
       this.configuration.closeContourProximity
     )
   ) {
-    this.completeDrawOpenContour(element);
+    this.completeDrawOpenContour(element, contourHoleProcessingEnabled);
   } else {
-    this.completeDrawClosedContour(element);
+    this.completeDrawClosedContour(element, contourHoleProcessingEnabled);
   }
 }
 

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

@@ -15,6 +15,7 @@ import {
   getInterpolatedPoints,
 } from '../../../utilities/planarFreehandROITool/smoothPoints';
 import triggerAnnotationRenderForViewportIds from '../../../utilities/triggerAnnotationRenderForViewportIds';
+import { updateContourPolyline } from '../../../utilities/contours';
 import findOpenUShapedContourVectorToPeak from './findOpenUShapedContourVectorToPeak';
 import { triggerAnnotationModified } from '../../../stateManagement/annotation/helpers/state';
 
@@ -213,12 +214,17 @@ function openContourEditOverwriteEnd(
   const { annotation, viewportIdsToRender } = this.commonData;
   const fusedCanvasPoints = this.fuseEditPointsForOpenContourEndEdit();
 
-  const worldPoints = fusedCanvasPoints.map((canvasPoint) =>
-    viewport.canvasToWorld(canvasPoint)
+  updateContourPolyline(
+    annotation,
+    {
+      points: fusedCanvasPoints,
+      closed: false,
+    },
+    viewport
   );
 
-  annotation.data.contour.polyline = worldPoints;
-  annotation.data.contour.closed = false;
+  const worldPoints = annotation.data.contour.polyline;
+
   // Note: Contours generate from fusedCanvasPoints will be in the direction
   // with the last point being the current mouse position
   annotation.data.handles.points = [
@@ -495,12 +501,17 @@ function finishEditOpenOnSecondCrossing(
   const { annotation, viewportIdsToRender } = this.commonData;
   const { fusedCanvasPoints, editCanvasPoints } = this.editData;
 
-  const worldPoints = fusedCanvasPoints.map((canvasPoint) =>
-    viewport.canvasToWorld(canvasPoint)
+  updateContourPolyline(
+    annotation,
+    {
+      points: fusedCanvasPoints,
+      closed: false,
+    },
+    viewport
   );
 
-  annotation.data.contour.polyline = worldPoints;
-  annotation.data.contour.closed = false;
+  const worldPoints = annotation.data.contour.polyline;
+
   annotation.data.handles.points = [
     worldPoints[0],
     worldPoints[worldPoints.length - 1],
@@ -551,13 +562,17 @@ function completeOpenContourEdit(element: HTMLDivElement) {
         )
       : fusedCanvasPoints;
 
-    const worldPoints = updatedPoints.map((canvasPoint) =>
-      viewport.canvasToWorld(canvasPoint)
+    updateContourPolyline(
+      annotation,
+      {
+        points: updatedPoints,
+        closed: false,
+      },
+      viewport
     );
 
-    annotation.invalidated = true;
-    annotation.data.contour.polyline = worldPoints;
-    annotation.data.contour.closed = false;
+    const worldPoints = annotation.data.contour.polyline;
+
     annotation.data.handles.points = [
       worldPoints[0],
       worldPoints[worldPoints.length - 1],

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

@@ -47,7 +47,7 @@ function activateOpenContourEndEdit(
   }
 
   let movingTextBox = false;
-  if ((handle as TextBoxHandle).worldPosition) {
+  if ((handle as TextBoxHandle)?.worldPosition) {
     movingTextBox = true;
   }
 

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

@@ -2,12 +2,14 @@ import type { Types } from '@cornerstonejs/core';
 import {
   drawHandles as drawHandlesSvg,
   drawPolyline as drawPolylineSvg,
+  drawPath as drawPathSvg,
 } 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';
+import { getContourHolesDataCanvas } from '../../../utilities/contours';
 
 const { pointsAreWithinCloseContourProximity } = polyline;
 
@@ -42,7 +44,7 @@ function _getRenderingOptions(
     lineDash,
     fillColor,
     fillOpacity,
-    connectLastToFirst: isClosedContour,
+    closePath: isClosedContour,
   };
 
   return options;
@@ -106,6 +108,10 @@ function renderClosedContour(
   svgDrawingHelper: SVGDrawingHelper,
   annotation: PlanarFreehandROIAnnotation
 ): void {
+  if (annotation.parentAnnotationUID) {
+    return;
+  }
+
   const { viewport } = enabledElement;
   const options = this._getRenderingOptions(enabledElement, annotation);
 
@@ -114,17 +120,19 @@ function renderClosedContour(
   // 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.contour.polyline.map((worldPos) =>
+  const canvasPolyline = annotation.data.contour.polyline.map((worldPos) =>
     viewport.worldToCanvas(worldPos)
   );
 
+  const childContours = getContourHolesDataCanvas(annotation, viewport);
+  const allContours = [canvasPolyline, ...childContours];
   const polylineUID = '1';
 
-  drawPolylineSvg(
+  drawPathSvg(
     svgDrawingHelper,
     annotation.annotationUID,
     polylineUID,
-    canvasPoints,
+    allContours,
     options
   );
 }
@@ -245,7 +253,7 @@ function renderOpenUShapedContour(
     {
       color: options.color,
       width: options.width,
-      connectLastToFirst: false,
+      closePath: false,
       lineDash: '2,2',
     }
   );
@@ -262,7 +270,7 @@ function renderOpenUShapedContour(
     {
       color: options.color,
       width: options.width,
-      connectLastToFirst: false,
+      closePath: false,
       lineDash: '2,2',
     }
   );
@@ -284,7 +292,7 @@ function renderContourBeingDrawn(
 
   // Override rendering whilst drawing the contour, we don't know if its open
   // or closed yet
-  options.connectLastToFirst = false;
+  options.closePath = false;
 
   drawPolylineSvg(
     svgDrawingHelper,
@@ -337,6 +345,7 @@ function renderClosedContourBeingEdited(
   svgDrawingHelper,
   annotation
 ): void {
+  const { viewport } = enabledElement;
   const { fusedCanvasPoints } = this.editData;
 
   if (fusedCanvasPoints === undefined) {
@@ -346,15 +355,24 @@ function renderClosedContourBeingEdited(
     return;
   }
 
-  const options = this._getRenderingOptions(enabledElement, annotation);
+  // Get the polylines from child annotations (holes)
+  const childContours = getContourHolesDataCanvas(annotation, viewport);
 
+  const allContours = [fusedCanvasPoints, ...childContours];
+  const options = this._getRenderingOptions(enabledElement, annotation);
   const polylineUIDToRender = 'preview-1';
 
-  drawPolylineSvg(
+  // Set `fillOpacity` to zero if it is a child annotation (hole) otherwise
+  // it would "close" the hole when editing it
+  if (annotation.parentAnnotationUID && options.fillOpacity) {
+    options.fillOpacity = 0;
+  }
+
+  drawPathSvg(
     svgDrawingHelper,
     annotation.annotationUID,
     polylineUIDToRender,
-    fusedCanvasPoints,
+    allContours,
     options
   );
 }

package/src/tools/annotation/splines/LinearSpline.ts

@@ -13,7 +13,7 @@ import { CardinalSpline } from './CardinalSpline';
  */
 class LinearSpline extends CardinalSpline {
   constructor() {
-    super({ scale: 0, fixedScale: true });
+    super({ resolution: 0, fixedResolution: true, scale: 0, fixedScale: true });
   }
 }