@cornerstonejs/tools 1.52.0 → 1.53.0

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;
 
@@ -228,17 +237,20 @@ function completeDrawClosedContour(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: 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);
+    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/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 });
   }
 }
 

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

@@ -26,6 +26,7 @@ type CurveSegmentDistanceSquared = {
 abstract class Spline implements ISpline {
   private _controlPoints: Types.Point2[] = [];
   private _resolution: number;
+  private _fixedResolution: boolean;
   private _closed: boolean;
   private _invalidated = false;
   private _curveSegments: SplineCurveSegment[];
@@ -35,6 +36,7 @@ abstract class Spline implements ISpline {
   constructor(props?: SplineProps) {
     this._controlPoints = [];
     this._resolution = props?.resolution ?? 20;
+    this._fixedResolution = props?.fixedResolution ?? false;
     this._closed = props?.closed ?? false;
     this._invalidated = true;
   }
@@ -61,7 +63,7 @@ abstract class Spline implements ISpline {
 
   /** Set the resolution of the spline curve */
   public set resolution(resolution: number) {
-    if (this._resolution === resolution) {
+    if (this._fixedResolution || this._resolution === resolution) {
       return;
     }
 
@@ -69,6 +71,16 @@ abstract class Spline implements ISpline {
     this.invalidated = true;
   }
 
+  /** Fixed resolution
+   *
+   * Linar spline is one of the splines that does not allow changing the resolution
+   * for better performance otherwise it would calculate and render 20 line segments
+   * instead of a single one..
+   */
+  public get fixedResolution() {
+    return this._fixedResolution;
+  }
+
   /** Flag that is set to true when the curve is already closed */
   public get closed(): boolean {
     return this._closed;

package/src/tools/base/AnnotationTool.ts

@@ -19,6 +19,7 @@ import {
   InteractionTypes,
   ToolProps,
   PublicToolProps,
+  IToolBinding,
 } from '../../types';
 import { StyleSpecifier } from '../../types/AnnotationStyle';
 

package/src/tools/base/ContourBaseTool.ts

@@ -3,6 +3,7 @@ import type { Types } from '@cornerstonejs/core';
 import {
   addAnnotation,
   getAnnotations,
+  getChildAnnotations,
 } from '../../stateManagement/annotation/annotationState';
 import type {
   Annotation,
@@ -13,9 +14,10 @@ import type {
   SVGDrawingHelper,
   AnnotationRenderContext,
 } from '../../types';
-import { drawPolyline as drawPolylineSvg } from '../../drawingSvg';
+import { drawPath as drawPathSvg } from '../../drawingSvg';
 import { StyleSpecifier } from '../../types/AnnotationStyle';
 import AnnotationTool from './AnnotationTool';
+import { getContourHolesDataCanvas } from '../../utilities/contours';
 
 /**
  * A contour base class responsible for rendering contour instances such as
@@ -177,6 +179,37 @@ abstract class ContourBaseTool extends AnnotationTool {
     // noop method just to give a chance for child classes to override it
   }
 
+  /**
+   * Move an annotation and all its child annotations in a recursive way.
+   *
+   * That is useful when clicking on a spline contour to completely translate
+   * it to a different place. In that case all holes (child annotations) must
+   * also be translated too.
+   *
+   * @param annotation - Annotation
+   * @param worldPosDelta - Delta in world space
+   */
+  protected moveAnnotation(
+    annotation: Annotation,
+    worldPosDelta: Types.Point3
+  ): void {
+    const { points } = annotation.data.handles;
+
+    for (let i = 0, numPoints = points.length; i < numPoints; i++) {
+      const point = points[i];
+
+      point[0] += worldPosDelta[0];
+      point[1] += worldPosDelta[1];
+      point[2] += worldPosDelta[2];
+    }
+
+    annotation.invalidated = true;
+
+    getChildAnnotations(annotation).forEach((childAnnotation) =>
+      this.moveAnnotation(childAnnotation, worldPosDelta)
+    );
+  }
+
   /**
    * Get polyline points in world space.
    * Just to give a chance for child classes to override it.
@@ -197,6 +230,12 @@ abstract class ContourBaseTool extends AnnotationTool {
   ): boolean {
     const { enabledElement, annotationStyle, svgDrawingHelper } = renderContext;
     const annotation = renderContext.annotation as ContourAnnotation;
+
+    // Do not render the contour because it must be rendered by the parent annotation
+    if (annotation.parentAnnotationUID) {
+      return;
+    }
+
     const { annotationUID } = annotation;
     const { viewport } = enabledElement;
     const { worldToCanvas } = viewport;
@@ -206,11 +245,14 @@ abstract class ContourBaseTool extends AnnotationTool {
     const { lineWidth, lineDash, color, fillColor, fillOpacity } =
       annotationStyle;
 
-    drawPolylineSvg(
+    const childContours = getContourHolesDataCanvas(annotation, viewport);
+    const allContours = [polylineCanvasPoints, ...childContours];
+
+    drawPathSvg(
       svgDrawingHelper,
       annotationUID,
       'contourPolyline',
-      polylineCanvasPoints,
+      allContours,
       {
         color,
         lineDash,

package/src/tools/base/ContourSegmentationBaseTool.ts

@@ -175,6 +175,7 @@ abstract class ContourSegmentationBaseTool extends ContourBaseTool {
     const annotation = context.annotation as ContourSegmentationAnnotation;
     const { segmentationRepresentationUID, segmentationId, segmentIndex } =
       annotation.data.segmentation;
+    const segmentation = segmentationState.getSegmentation(segmentationId);
     const segmentationRepresentation =
       segmentationState.getSegmentationRepresentationByUID(
         toolGroupId,
@@ -252,6 +253,11 @@ abstract class ContourSegmentationBaseTool extends ContourBaseTool {
       fillOpacity = mergedConfig.fillAlphaInactive ?? fillOpacity;
     }
 
+    // Change the line thickness when the mouse is over the contour segment
+    if (segmentation.activeSegmentIndex === segmentIndex) {
+      lineWidth += mergedConfig.activeSegmentOutlineWidthDelta;
+    }
+
     lineWidth = mergedConfig.renderOutline ? lineWidth : 0;
     fillOpacity = mergedConfig.renderFill ? fillOpacity : 0;
 

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

@@ -10,6 +10,7 @@ const defaultContourConfig: ContourConfig = {
   outlineDashActive: undefined,
   outlineDashInactive: undefined,
   outlineDashAutoGenerated: '5,3',
+  activeSegmentOutlineWidthDelta: 0,
   renderFill: true,
   fillAlpha: 0.5,
   fillAlphaInactive: 0.3,

package/src/types/AnnotationTypes.ts

@@ -3,6 +3,20 @@ import type { Types } from '@cornerstonejs/core';
 type Annotation = {
   /** A unique identifier for this annotation */
   annotationUID?: string;
+  /**
+   * Parent annotation UID
+   *
+   * An annotation may have a parent annotation when it is, for example, a
+   * hole inside a contour.
+   */
+  parentAnnotationUID?: string;
+  /**
+   * Array that contains all child annotation UID
+   *
+   * An annotation may have one or more child annotations when it is contour
+   * and have some holes in it.
+   */
+  childAnnotationUIDs?: string[];
   /** If the annotation is being hovered over and is highlighted */
   highlighted?: boolean;
   /** If the annotation is locked for manipulation */

package/src/types/ContourAnnotation.ts

@@ -1,11 +1,24 @@
 import type { Types } from '@cornerstonejs/core';
 import { Annotation } from './AnnotationTypes';
 
+/**
+ * Polyline winding direction
+ *
+ * It is defined as -1 and 1 to make it easier to change its direction multiplying
+ * by -1 whenever polyline.reverse() is called instead of using IF/ELSE
+ */
+export enum ContourWindingDirection {
+  CounterClockwise = -1,
+  Unknown = 0,
+  Clockwise = 1,
+}
+
 export type ContourAnnotationData = {
   data: {
     contour: {
       polyline: Types.Point3[];
       closed: boolean;
+      windingDirection?: ContourWindingDirection;
     };
   };
 };

package/src/types/ContourTypes.ts

@@ -16,6 +16,9 @@ export type ContourConfig = {
   outlineDashActive?: string;
   /** dash style of the outline when segmentation is inactive */
   outlineDashInactive?: string;
+  /** delta thickness of the active segment index outline (0 means same thickness,
+   * 1 means 1px thicker, -1 means 1px thinner) */
+  activeSegmentOutlineWidthDelta?: number;
   /**
    * Dash style of the outline when segmentation is auto-generated
    */

package/src/types/EventTypes.ts

@@ -214,6 +214,14 @@ type AnnotationInterpolationRemovedEventDetail = {
   renderingEngineId: string;
 };
 
+/**
+ * The data that is passed to the event handler when a new contour annotation is
+ * completed drawing on the viewport.
+ */
+type ContourAnnotationCompletedEventDetail = AnnotationCompletedEventDetail & {
+  contourHoleProcessingEnabled: boolean;
+};
+
 /**
  * EventDetail for when a Segmentation Data is modified by a tool
  */
@@ -713,6 +721,7 @@ export {
   AnnotationInterpolationCompletedEventType,
   AnnotationInterpolationRemovedEventDetail,
   AnnotationInterpolationRemovedEventType,
+  ContourAnnotationCompletedEventDetail,
   SegmentationDataModifiedEventType,
   SegmentationRepresentationModifiedEventDetail,
   SegmentationRepresentationModifiedEventType,

package/src/types/ISpline.ts

@@ -19,6 +19,9 @@ export interface ISpline {
   /** Set the resolution of the spline curve */
   set resolution(resolution: number);
 
+  /** Fixed resolution (eg: Linear Spline) */
+  get fixedResolution(): boolean;
+
   /** Flag that is set to true when the curve is already closed */
   get closed(): boolean;
 

package/src/types/SplineProps.ts

@@ -10,6 +10,16 @@ export type SplineProps = {
    */
   resolution?: number;
 
+  /**
+   * Fixed resolution (Linear spline)
+   *
+   * Splines with `fixedResolution` set to true shall attempt to change the
+   * resolution (eg: spline.resolution = 10). That is useful, for example, for
+   * linear splines because having more line segments between two control points
+   * would not change its resolution and that is why it is fixed to 0.
+   */
+  fixedResolution?: boolean;
+
   /** Flag that is set to true when the curve is closed */
   closed?: boolean;
 };

package/src/utilities/contours/getContourHolesDataCanvas.ts

@@ -0,0 +1,33 @@
+import type { Types } from '@cornerstonejs/core';
+import type { Annotation } from '../../types';
+import getContourHolesDataWorld from './getContourHolesDataWorld';
+
+/**
+ * Get the polylines for the child annotations (holes)
+ * @param annotation - Annotation
+ * @param viewport - Viewport used to convert the points from world to canvas space
+ * @returns An array that contains all child polylines
+ */
+export default function getContourHolesDataCanvas(
+  annotation: Annotation,
+  viewport: Types.IViewport
+): Types.Point2[][] {
+  const worldHoleContours = getContourHolesDataWorld(annotation);
+  const canvasHoleContours = [];
+
+  worldHoleContours.forEach((worldHoleContour) => {
+    const numPoints = worldHoleContour.length;
+
+    // Pre-allocated arrays are 3-4x faster than multiple "push()" calls
+    const canvasHoleContour: Types.Point2[] = new Array(numPoints);
+
+    // Using FOR loop instead of map() for better performance when processing large arrays
+    for (let i = 0; i < numPoints; i++) {
+      canvasHoleContour[i] = viewport.worldToCanvas(worldHoleContour[i]);
+    }
+
+    canvasHoleContours.push(canvasHoleContour);
+  });
+
+  return canvasHoleContours;
+}