@cornerstonejs/tools 2.0.0-beta.6 → 2.0.0-beta.7

package/src/tools/annotation/SplineROITool.ts

@@ -0,0 +1,1238 @@
+import {
+  getEnabledElement,
+  eventTarget,
+  triggerEvent,
+  utilities,
+} from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+import { vec3 } from 'gl-matrix';
+import {
+  getChildAnnotations,
+  removeAnnotation,
+} from '../../stateManagement/annotation/annotationState';
+import {
+  drawHandles as drawHandlesSvg,
+  drawPolyline as drawPolylineSvg,
+  drawLinkedTextBox as drawLinkedTextBoxSvg,
+} from '../../drawingSvg';
+import { state } from '../../store';
+import {
+  Events,
+  MouseBindings,
+  KeyboardBindings,
+  ChangeTypes,
+} from '../../enums';
+import { resetElementCursor } from '../../cursors/elementCursor';
+import type {
+  Annotation,
+  EventTypes,
+  ToolHandle,
+  TextBoxHandle,
+  PublicToolProps,
+  ToolProps,
+  AnnotationRenderContext,
+} from '../../types';
+import {
+  math,
+  throttle,
+  roundNumber,
+  triggerAnnotationRenderForViewportIds,
+  getCalibratedLengthUnitsAndScale,
+} from '../../utilities';
+import getMouseModifierKey from '../../eventDispatchers/shared/getMouseModifier';
+import { getViewportIdsWithToolToRender } from '../../utilities/viewportFilters';
+import { getTextBoxCoordsCanvas } from '../../utilities/drawing';
+
+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';
+import { LinearSpline } from './splines/LinearSpline';
+import { CatmullRomSpline } from './splines/CatmullRomSpline';
+import { BSpline } from './splines/BSpline';
+import ContourSegmentationBaseTool from '../base/ContourSegmentationBaseTool';
+
+const SPLINE_MIN_POINTS = 3;
+const SPLINE_CLICK_CLOSE_CURVE_DIST = 10;
+
+const DEFAULT_SPLINE_CONFIG = {
+  resolution: 20,
+  controlPointAdditionDistance: 6,
+  controlPointDeletionDistance: 6,
+  showControlPointsConnectors: false,
+  controlPointAdditionEnabled: true,
+  controlPointDeletionEnabled: true,
+};
+
+enum SplineTypesEnum {
+  Cardinal = 'CARDINAL',
+  Linear = 'LINEAR',
+  CatmullRom = 'CATMULLROM',
+  BSpline = 'BSPLINE',
+}
+
+enum SplineToolActions {
+  AddControlPoint = 'addControlPoint',
+  DeleteControlPoint = 'deleteControlPoint',
+}
+
+class SplineROITool extends ContourSegmentationBaseTool {
+  static toolName;
+  static SplineTypes = SplineTypesEnum;
+  static Actions = SplineToolActions;
+
+  touchDragCallback: any;
+  mouseDragCallback: any;
+  _throttledCalculateCachedStats: any;
+  editData: {
+    annotation: SplineROIAnnotation;
+    viewportIdsToRender: Array<string>;
+    handleIndex?: number;
+    movingTextBox?: boolean;
+    newAnnotation?: boolean;
+    hasMoved?: boolean;
+    lastCanvasPoint?: Types.Point2;
+    contourHoleProcessingEnabled?: boolean;
+  } | null;
+  isDrawing: boolean;
+  isHandleOutsideImage = false;
+  fireChangeOnUpdate: {
+    annotationUID: string;
+    changeType: ChangeTypes;
+    contourHoleProcessingEnabled: boolean;
+  } = null;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        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,
+        /**
+         * The polyline may get processed in order to reduce the number of points
+         * for better performance and storage.
+         */
+        decimate: {
+          enabled: false,
+          /** A maximum given distance 'epsilon' to decide if a point should or
+           * shouldn't be added the resulting polyline which will have a lower
+           * number of points for higher `epsilon` values.
+           */
+          epsilon: 0.1,
+        },
+        spline: {
+          configuration: {
+            [SplineTypesEnum.Cardinal]: {
+              Class: CardinalSpline,
+              scale: 0.5,
+            },
+            [SplineTypesEnum.CatmullRom]: {
+              Class: CatmullRomSpline,
+            },
+            [SplineTypesEnum.Linear]: {
+              Class: LinearSpline,
+            },
+            [SplineTypesEnum.BSpline]: {
+              Class: BSpline,
+              controlPointAdditionEnabled: false,
+              controlPointDeletionEnabled: false,
+              showControlPointsConnectors: true,
+            },
+          },
+          type: SplineTypesEnum.CatmullRom,
+          drawPreviewEnabled: true,
+          lastControlPointDeletionKeys: ['Backspace', 'Delete'],
+        },
+        actions: {
+          [SplineToolActions.AddControlPoint]: {
+            method: 'addControlPointCallback',
+            bindings: [
+              {
+                mouseButton: MouseBindings.Primary,
+                modifierKey: KeyboardBindings.Shift,
+              },
+            ],
+          },
+          [SplineToolActions.DeleteControlPoint]: {
+            method: 'deleteControlPointCallback',
+            bindings: [
+              {
+                mouseButton: MouseBindings.Primary,
+                modifierKey: KeyboardBindings.Ctrl,
+              },
+            ],
+          },
+        },
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+
+    this._throttledCalculateCachedStats = throttle(
+      this._calculateCachedStats,
+      100,
+      { trailing: true }
+    );
+  }
+
+  /**
+   * Based on the current position of the mouse and the current imageId to create
+   * a CircleROI Annotation and stores it in the annotationManager
+   *
+   * @param evt -  EventTypes.NormalizedMouseEventType
+   * @returns The annotation object.
+   *
+   */
+  addNewAnnotation(evt: EventTypes.InteractionEventType): SplineROIAnnotation {
+    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;
+    const annotation = this.createAnnotation(evt) as SplineROIAnnotation;
+
+    this.isDrawing = true;
+    this.addAnnotation(annotation, element);
+
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    this.editData = {
+      annotation,
+      viewportIdsToRender,
+      movingTextBox: false,
+      newAnnotation: true,
+      hasMoved: false,
+      lastCanvasPoint: canvasPos,
+      contourHoleProcessingEnabled,
+    };
+
+    this._activateDraw(element);
+    evt.preventDefault();
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    return annotation;
+  }
+
+  /**
+   * It returns if the canvas point is near the provided annotation in the provided
+   * element or not. A proximity is passed to the function to determine the
+   * proximity of the point to the annotation in number of pixels.
+   *
+   * @param element - HTML Element
+   * @param annotation - Annotation
+   * @param canvasCoords - Canvas coordinates
+   * @param proximity - Proximity to tool to consider
+   * @returns Boolean, whether the canvas point is near tool
+   */
+  isPointNearTool = (
+    element: HTMLDivElement,
+    annotation: SplineROIAnnotation,
+    canvasCoords: Types.Point2,
+    proximity: number
+  ): boolean => {
+    const { instance: spline } = annotation.data.spline;
+
+    return spline.isPointNearCurve(canvasCoords, proximity);
+  };
+
+  toolSelectedCallback = (
+    evt: EventTypes.InteractionEventType,
+    annotation: SplineROIAnnotation
+  ): void => {
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+
+    annotation.highlighted = true;
+
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    this.editData = {
+      annotation,
+      viewportIdsToRender,
+      movingTextBox: false,
+    };
+
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+
+    this._activateModify(element);
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+    evt.preventDefault();
+  };
+
+  handleSelectedCallback = (
+    evt: EventTypes.InteractionEventType,
+    annotation: SplineROIAnnotation,
+    handle: ToolHandle
+  ): void => {
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+    const { data } = annotation;
+
+    annotation.highlighted = true;
+
+    let movingTextBox = false;
+    let handleIndex;
+
+    if ((handle as TextBoxHandle).worldPosition) {
+      movingTextBox = true;
+    } else {
+      const { points } = data.handles;
+
+      handleIndex = points.findIndex((p) => p === handle);
+    }
+
+    // Find viewports to render on drag.
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    this.editData = {
+      annotation,
+      viewportIdsToRender,
+      handleIndex,
+      movingTextBox,
+    };
+    this._activateModify(element);
+
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    evt.preventDefault();
+  };
+
+  _endCallback = (evt: EventTypes.InteractionEventType): void => {
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+
+    const {
+      annotation,
+      viewportIdsToRender,
+      newAnnotation,
+      contourHoleProcessingEnabled,
+    } = this.editData;
+    const { data } = annotation;
+    annotation.autoGenerated = false;
+
+    data.handles.activeHandleIndex = null;
+
+    this._deactivateModify(element);
+    this._deactivateDraw(element);
+    resetElementCursor(element);
+
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+
+    // Decide whether there's at least one point is outside image
+    const image = this.getTargetIdImage(
+      this.getTargetId(enabledElement.viewport),
+      enabledElement.renderingEngine
+    );
+    const { imageData, dimensions } = image;
+    this.isHandleOutsideImage = data.handles.points
+      .map((p) => utilities.transformWorldToIndex(imageData, p))
+      .some((index) => !utilities.indexWithinDimensions(index, dimensions));
+
+    if (
+      this.isHandleOutsideImage &&
+      this.configuration.preventHandleOutsideImage
+    ) {
+      removeAnnotation(annotation.annotationUID);
+    }
+
+    const changeType = newAnnotation
+      ? ChangeTypes.Completed
+      : ChangeTypes.HandlesUpdated;
+    if (!this.fireChangeOnUpdate) {
+      this.fireChangeOnUpdate = {
+        annotationUID: annotation.annotationUID,
+        changeType,
+        contourHoleProcessingEnabled,
+      };
+    } else {
+      this.fireChangeOnUpdate.annotationUID = annotation.annotationUID;
+      this.fireChangeOnUpdate.changeType = changeType;
+    }
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    this.editData = null;
+    this.isDrawing = false;
+  };
+
+  private _keyDownCallback = (evt: EventTypes.KeyDownEventType) => {
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+    const key = eventDetail.key ?? '';
+    const { lastControlPointDeletionKeys } = this.configuration.spline;
+    const deleteLastPoint = lastControlPointDeletionKeys.includes(key);
+
+    if (!deleteLastPoint) {
+      return;
+    }
+
+    const { annotation } = this.editData;
+    const { data } = annotation;
+
+    if (data.handles.points.length === SPLINE_MIN_POINTS) {
+      this.cancel(element);
+      return;
+    } else {
+      const controlPointIndex = data.handles.points.length - 1;
+      this._deleteControlPointByIndex(element, annotation, controlPointIndex);
+    }
+
+    evt.preventDefault();
+  };
+
+  private _mouseMoveCallback = (evt: EventTypes.InteractionEventType): void => {
+    const { drawPreviewEnabled } = this.configuration.spline;
+
+    // Does not force a re-render if preview is not enabled
+    if (!drawPreviewEnabled) {
+      return;
+    }
+
+    const { element } = evt.detail;
+    const { renderingEngine } = getEnabledElement(element);
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    this.editData.lastCanvasPoint = evt.detail.currentPoints.canvas;
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+    evt.preventDefault();
+  };
+
+  private _mouseDownCallback = (evt: EventTypes.InteractionEventType): void => {
+    const doubleClick = evt.type === Events.MOUSE_DOUBLE_CLICK;
+    const { annotation, viewportIdsToRender } = this.editData;
+    const { data } = annotation;
+
+    if (data.contour.closed) {
+      return;
+    }
+
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+    const { currentPoints } = eventDetail;
+    const { canvas: canvasPoint, world: worldPoint } = currentPoints;
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+    let closeContour = data.handles.points.length >= 2 && doubleClick;
+    let addNewPoint = true;
+
+    // Check if user clicked on the first point to close the curve
+    if (data.handles.points.length >= 3) {
+      const { instance: spline } = data.spline;
+      const closestControlPoint = spline.getClosestControlPointWithinDistance(
+        canvasPoint,
+        SPLINE_CLICK_CLOSE_CURVE_DIST
+      );
+
+      if (closestControlPoint?.index === 0) {
+        addNewPoint = false;
+        closeContour = true;
+      }
+    }
+
+    if (addNewPoint) {
+      data.handles.points.push(worldPoint);
+    }
+
+    data.contour.closed = data.contour.closed || closeContour;
+    annotation.invalidated = true;
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    if (data.contour.closed) {
+      this._endCallback(evt);
+    }
+
+    evt.preventDefault();
+  };
+
+  private _dragCallback = (evt: EventTypes.InteractionEventType): void => {
+    this.isDrawing = true;
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+
+    const { annotation, viewportIdsToRender, handleIndex, movingTextBox } =
+      this.editData;
+    const { data } = annotation;
+
+    if (movingTextBox) {
+      // Drag mode - moving text box
+      const { deltaPoints } = eventDetail as EventTypes.MouseDragEventDetail;
+      const worldPosDelta = deltaPoints.world;
+
+      const { textBox } = data.handles;
+      const { worldPosition } = textBox;
+
+      worldPosition[0] += worldPosDelta[0];
+      worldPosition[1] += worldPosDelta[1];
+      worldPosition[2] += worldPosDelta[2];
+
+      textBox.hasMoved = true;
+    } else if (handleIndex === undefined) {
+      // Drag mode - moving handle
+      const { deltaPoints } = eventDetail as EventTypes.MouseDragEventDetail;
+      const worldPosDelta = deltaPoints.world;
+
+      this.moveAnnotation(annotation, worldPosDelta);
+    } else {
+      // Move mode - after double click, and mouse move to draw
+      const { currentPoints } = eventDetail;
+      const worldPos = currentPoints.world;
+
+      data.handles.points[handleIndex] = [...worldPos];
+      annotation.invalidated = true;
+    }
+
+    this.editData.hasMoved = true;
+
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+  };
+
+  cancel(element: HTMLDivElement) {
+    // If it is not in mid-draw or mid-modify
+    if (!this.isDrawing) {
+      return;
+    }
+
+    this.isDrawing = false;
+    this._deactivateDraw(element);
+    this._deactivateModify(element);
+    resetElementCursor(element);
+
+    const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
+
+    if (newAnnotation) {
+      removeAnnotation(annotation.annotationUID);
+    }
+
+    super.cancelAnnotation(annotation);
+
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    this.editData = null;
+    return annotation.annotationUID;
+  }
+
+  /**
+   * Triggers an annotation completed event.
+   */
+  triggerAnnotationCompleted = (
+    annotation: SplineROIAnnotation,
+    contourHoleProcessingEnabled: boolean
+  ): void => {
+    const eventType = Events.ANNOTATION_COMPLETED;
+    const eventDetail: ContourAnnotationCompletedEventDetail = {
+      annotation,
+      changeType: ChangeTypes.Completed,
+      contourHoleProcessingEnabled,
+    };
+
+    triggerEvent(eventTarget, eventType, eventDetail);
+  };
+
+  /**
+   * Triggers an annotation modified event.
+   */
+  triggerAnnotationModified = (
+    annotation: SplineROIAnnotation,
+    enabledElement: Types.IEnabledElement,
+    changeType = ChangeTypes.StatsUpdated
+  ): void => {
+    const { viewportId, renderingEngineId } = enabledElement;
+    const eventType = Events.ANNOTATION_MODIFIED;
+    const eventDetail: AnnotationModifiedEventDetail = {
+      annotation,
+      viewportId,
+      renderingEngineId,
+      changeType,
+    };
+
+    triggerEvent(eventTarget, eventType, eventDetail);
+  };
+
+  /**
+   * Triggers an annotation complete or modified event based on changeType.
+   */
+  triggerChangeEvent = (
+    annotation: SplineROIAnnotation,
+    enabledElement: Types.IEnabledElement,
+    changeType = ChangeTypes.StatsUpdated,
+    contourHoleProcessingEnabled
+  ): void => {
+    if (changeType === ChangeTypes.Completed) {
+      this.triggerAnnotationCompleted(annotation, contourHoleProcessingEnabled);
+    } else {
+      this.triggerAnnotationModified(annotation, enabledElement, changeType);
+    }
+  };
+
+  private _activateModify = (element) => {
+    state.isInteractingWithTool = true;
+
+    element.addEventListener(Events.MOUSE_UP, this._endCallback);
+    element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);
+    element.addEventListener(Events.MOUSE_CLICK, this._endCallback);
+
+    element.addEventListener(Events.TOUCH_END, this._endCallback);
+    element.addEventListener(Events.TOUCH_DRAG, this._dragCallback);
+    element.addEventListener(Events.TOUCH_TAP, this._endCallback);
+  };
+
+  private _deactivateModify = (element) => {
+    state.isInteractingWithTool = false;
+
+    element.removeEventListener(Events.MOUSE_UP, this._endCallback);
+    element.removeEventListener(Events.MOUSE_DRAG, this._dragCallback);
+    element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);
+
+    element.removeEventListener(Events.TOUCH_END, this._endCallback);
+    element.removeEventListener(Events.TOUCH_DRAG, this._dragCallback);
+    element.removeEventListener(Events.TOUCH_TAP, this._endCallback);
+  };
+
+  private _activateDraw = (element) => {
+    state.isInteractingWithTool = true;
+
+    element.addEventListener(Events.KEY_DOWN, this._keyDownCallback);
+    element.addEventListener(Events.MOUSE_MOVE, this._mouseMoveCallback);
+    element.addEventListener(Events.MOUSE_DOWN, this._mouseDownCallback);
+    element.addEventListener(
+      Events.MOUSE_DOUBLE_CLICK,
+      this._mouseDownCallback
+    );
+
+    element.addEventListener(Events.TOUCH_TAP, this._mouseDownCallback);
+  };
+
+  private _deactivateDraw = (element) => {
+    state.isInteractingWithTool = false;
+
+    element.removeEventListener(Events.KEY_DOWN, this._keyDownCallback);
+    element.removeEventListener(Events.MOUSE_MOVE, this._mouseMoveCallback);
+    element.removeEventListener(Events.MOUSE_DOWN, this._mouseDownCallback);
+    element.removeEventListener(
+      Events.MOUSE_DOUBLE_CLICK,
+      this._mouseDownCallback
+    );
+
+    element.removeEventListener(Events.TOUCH_TAP, this._mouseDownCallback);
+  };
+
+  protected isContourSegmentationTool(): boolean {
+    // Disable contour segmentation behavior because it shall be activated only
+    // for SplineContourSegmentationTool
+    return false;
+  }
+
+  /**
+   * Render an annotation instance
+   * @param renderContext - Render context that contains the annotation, enabledElement, etc.
+   * @returns True if the annotation is rendered or false otherwise
+   */
+  protected renderAnnotationInstance(
+    renderContext: AnnotationRenderContext
+  ): boolean {
+    const { enabledElement, targetId, svgDrawingHelper, annotationStyle } =
+      renderContext;
+    const { viewport } = enabledElement;
+    const { worldToCanvas } = viewport;
+    const { element } = viewport;
+    const annotation = renderContext.annotation as SplineROIAnnotation;
+    const { annotationUID, data, highlighted } = annotation;
+    const { handles } = data;
+    const { points: controlPoints, activeHandleIndex } = handles;
+    const newAnnotation = this.editData?.newAnnotation;
+
+    const {
+      lineWidth,
+      lineDash,
+      color,
+      locked: annotationLocked,
+    } = annotationStyle;
+
+    const canvasCoordinates = controlPoints.map((p) =>
+      worldToCanvas(p)
+    ) as Types.Point2[];
+
+    const { drawPreviewEnabled } = this.configuration.spline;
+    const splineType = annotation.data.spline.type;
+    const splineConfig = this._getSplineConfig(splineType);
+    const spline = annotation.data.spline.instance;
+
+    const childAnnotations = getChildAnnotations(annotation);
+    const missingAnnotation = childAnnotations.findIndex((it) => !it);
+    if (missingAnnotation !== -1) {
+      // Child annotations go AWOL for a variety of reasons, so report is specifically here
+      throw new Error(
+        `Can't find annotation for child ${annotation.childAnnotationUIDs.join()}`
+      );
+    }
+    // Update current and all child annotations/splines
+    const splineAnnotationsGroup = [annotation, ...childAnnotations].filter(
+      (annotation) => this._isSplineROIAnnotation(annotation)
+    ) as SplineROIAnnotation[];
+
+    splineAnnotationsGroup.forEach((annotation) => {
+      const spline = this._updateSplineInstance(element, annotation);
+      const splinePolylineCanvas = spline.getPolylinePoints();
+
+      this.updateContourPolyline(
+        annotation,
+        {
+          points: splinePolylineCanvas,
+          closed: data.contour.closed,
+          targetWindingDirection: ContourWindingDirection.Clockwise,
+        },
+        viewport
+      );
+    });
+
+    // Let the base class render the contour
+    super.renderAnnotationInstance(renderContext);
+
+    // If cachedStats does not exist, or the areaUnit is missing (as part of
+    // import/hydration etc.), force to recalculate the stats from the points
+    if (
+      !data.cachedStats[targetId] ||
+      data.cachedStats[targetId].areaUnit == null
+    ) {
+      data.cachedStats[targetId] = {
+        Modality: null,
+        area: null,
+        areaUnit: null,
+      };
+
+      this._calculateCachedStats(annotation, element);
+    } else if (annotation.invalidated) {
+      this._throttledCalculateCachedStats(annotation, element);
+    }
+
+    let activeHandleCanvasCoords;
+
+    if (!annotationLocked && !this.editData && activeHandleIndex !== null) {
+      // Not locked or creating and hovering over handle, so render handle.
+      activeHandleCanvasCoords = [canvasCoordinates[activeHandleIndex]];
+    }
+
+    if (activeHandleCanvasCoords || newAnnotation || highlighted) {
+      const handleGroupUID = '0';
+
+      // Move this call to the base class (contour seg) in the near future
+      drawHandlesSvg(
+        svgDrawingHelper,
+        annotationUID,
+        handleGroupUID,
+        canvasCoordinates,
+        {
+          color,
+          lineWidth: Math.max(1, lineWidth),
+          handleRadius: '3',
+        }
+      );
+    }
+
+    if (
+      drawPreviewEnabled &&
+      spline.numControlPoints > 1 &&
+      this.editData?.lastCanvasPoint &&
+      !spline.closed
+    ) {
+      const { lastCanvasPoint } = this.editData;
+      const previewPolylinePoints = spline.getPreviewPolylinePoints(
+        lastCanvasPoint,
+        SPLINE_CLICK_CLOSE_CURVE_DIST
+      );
+
+      drawPolylineSvg(
+        svgDrawingHelper,
+        annotationUID,
+        'previewSplineChange',
+        previewPolylinePoints,
+        {
+          color: '#9EA0CA',
+          lineDash,
+          lineWidth: 1,
+        }
+      );
+    }
+
+    if (splineConfig.showControlPointsConnectors) {
+      const controlPointsConnectors = [...canvasCoordinates];
+
+      // Connect the last point to the first one when the spline is closed
+      if (spline.closed) {
+        controlPointsConnectors.push(canvasCoordinates[0]);
+      }
+
+      drawPolylineSvg(
+        svgDrawingHelper,
+        annotationUID,
+        'controlPointsConnectors',
+        controlPointsConnectors,
+        {
+          color: 'rgba(255, 255, 255, 0.5)',
+          lineWidth: 1,
+        }
+      );
+    }
+
+    this._renderStats(
+      annotation,
+      viewport,
+      svgDrawingHelper,
+      annotationStyle.textbox
+    );
+
+    if (this.fireChangeOnUpdate?.annotationUID === annotationUID) {
+      this.triggerChangeEvent(
+        annotation,
+        enabledElement,
+        this.fireChangeOnUpdate.changeType,
+        this.fireChangeOnUpdate.contourHoleProcessingEnabled
+      );
+      this.fireChangeOnUpdate = null;
+    }
+
+    annotation.invalidated = false;
+    return true;
+  }
+
+  /**
+   * Creates new interpolated handles for the spline control given the
+   * polyline data.  This allows creating the spline from polyline data
+   * directly.
+   */
+  protected createInterpolatedSplineControl(annotation) {
+    if (annotation.data.handles.points?.length) {
+      // The interpolation itself created the handles
+      return;
+    }
+    const { polyline } = annotation.data.contour;
+    if (!polyline || !polyline.length) {
+      return;
+    }
+    annotation.data.handles.points = [];
+    const { points } = annotation.data.handles;
+    const increment = Math.max(10, Math.floor(polyline.length / 20));
+    for (let i = 0; i < polyline.length - increment; i += increment) {
+      points.push(polyline[i]);
+    }
+    points.push(polyline[polyline.length - 1]);
+  }
+
+  protected createAnnotation(evt: EventTypes.InteractionEventType): Annotation {
+    const contourAnnotation = super.createAnnotation(evt);
+    const { world: worldPos } = evt.detail.currentPoints;
+    const { type: splineType } = this.configuration.spline;
+    const splineConfig = this._getSplineConfig(splineType);
+    const spline = new splineConfig.Class();
+    const createSpline = () => ({
+      type: splineConfig.type,
+      instance: spline,
+      resolution: splineConfig.resolution,
+    });
+
+    // Add an action to create a new spline data on creating an interpolated
+    // instance.
+    let onInterpolationComplete;
+    if (this.configuration.interpolation?.enabled) {
+      onInterpolationComplete = (annotation) => {
+        annotation.data.spline ||= createSpline();
+        this.createInterpolatedSplineControl(annotation);
+      };
+    }
+
+    return <SplineROIAnnotation>utilities.deepMerge(contourAnnotation, {
+      data: {
+        handles: {
+          points: [[...worldPos]],
+        },
+        spline: createSpline(),
+        cachedStats: {},
+      },
+      onInterpolationComplete,
+    });
+  }
+
+  private _renderStats = (
+    annotation,
+    viewport,
+    svgDrawingHelper,
+    textboxStyle
+  ) => {
+    const data = annotation.data;
+    const targetId = this.getTargetId(viewport);
+
+    if (!data.spline.instance.closed || !textboxStyle.visibility) {
+      return;
+    }
+
+    const textLines = this.configuration.getTextLines(data, targetId);
+    if (!textLines || textLines.length === 0) {
+      return;
+    }
+
+    const canvasCoordinates = data.handles.points.map((p) =>
+      viewport.worldToCanvas(p)
+    );
+    if (!data.handles.textBox.hasMoved) {
+      const canvasTextBoxCoords = getTextBoxCoordsCanvas(canvasCoordinates);
+
+      data.handles.textBox.worldPosition =
+        viewport.canvasToWorld(canvasTextBoxCoords);
+    }
+
+    const textBoxPosition = viewport.worldToCanvas(
+      data.handles.textBox.worldPosition
+    );
+
+    const textBoxUID = 'textBox';
+    const boundingBox = drawLinkedTextBoxSvg(
+      svgDrawingHelper,
+      annotation.annotationUID ?? '',
+      textBoxUID,
+      textLines,
+      textBoxPosition,
+      canvasCoordinates,
+      {},
+      textboxStyle
+    );
+
+    const { x: left, y: top, width, height } = boundingBox;
+
+    data.handles.textBox.worldBoundingBox = {
+      topLeft: viewport.canvasToWorld([left, top]),
+      topRight: viewport.canvasToWorld([left + width, top]),
+      bottomLeft: viewport.canvasToWorld([left, top + height]),
+      bottomRight: viewport.canvasToWorld([left + width, top + height]),
+    };
+  };
+
+  addControlPointCallback = (
+    evt: EventTypes.InteractionEventType,
+    annotation: SplineROIAnnotation
+  ) => {
+    const { data } = annotation;
+    const splineType = data.spline.type;
+    const splineConfig = this._getSplineConfig(splineType);
+    const maxDist = splineConfig.controlPointAdditionDistance;
+
+    if (splineConfig.controlPointAdditionEnabled === false) {
+      return;
+    }
+
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine, viewport } = enabledElement;
+    const { canvasToWorld } = viewport;
+
+    const { instance: spline } = data.spline;
+    const canvasPos = evt.detail.currentPoints.canvas;
+    const closestPointInfo = spline.getClosestPoint(canvasPos);
+
+    if (closestPointInfo.distance > maxDist) {
+      return;
+    }
+
+    // Add a point at the `u` position from Parameter Space
+    const { index, point: canvasPoint } = spline.addControlPointAtU(
+      closestPointInfo.uValue
+    );
+
+    data.handles.points.splice(index, 0, canvasToWorld(canvasPoint));
+    annotation.invalidated = true;
+
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+  };
+
+  private _deleteControlPointByIndex(
+    element: HTMLDivElement,
+    annotation: SplineROIAnnotation,
+    controlPointIndex: number
+  ) {
+    const enabledElement = getEnabledElement(element);
+    const { points: controlPoints } = annotation.data.handles;
+
+    // There is no curve with only 2 points
+    if (controlPoints.length === 3) {
+      removeAnnotation(annotation.annotationUID);
+    } else {
+      controlPoints.splice(controlPointIndex, 1);
+    }
+
+    const { renderingEngine } = enabledElement;
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    annotation.invalidated = true;
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+  }
+
+  deleteControlPointCallback = (
+    evt: EventTypes.InteractionEventType,
+    annotation: SplineROIAnnotation
+  ) => {
+    const splineType = annotation.data.spline.type;
+    const splineConfig = this._getSplineConfig(splineType);
+    const maxDist = splineConfig.controlPointDeletionDistance;
+
+    if (splineConfig.controlPointDeletionEnabled === false) {
+      return;
+    }
+
+    const eventDetail = evt.detail;
+    const { element, currentPoints } = eventDetail;
+    const { canvas: canvasPos } = currentPoints;
+    const { instance: spline } = annotation.data.spline;
+    const closestControlPoint = spline.getClosestControlPointWithinDistance(
+      canvasPos,
+      maxDist
+    );
+
+    if (!closestControlPoint) {
+      return;
+    }
+
+    this._deleteControlPointByIndex(
+      element,
+      annotation,
+      closestControlPoint.index
+    );
+  };
+
+  _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)
+   * @returns Spline configuration
+   */
+  private _getSplineConfig(type: string) {
+    const { configuration: config } = this;
+    const splineConfigs = config.spline.configuration;
+
+    return Object.assign({ type }, DEFAULT_SPLINE_CONFIG, splineConfigs[type]);
+  }
+
+  private _updateSplineInstance(
+    element: HTMLDivElement,
+    annotation: SplineROIAnnotation
+  ): ISpline {
+    const enabledElement = getEnabledElement(element);
+    const { viewport } = enabledElement;
+    const { worldToCanvas } = viewport;
+    const { data } = annotation;
+    const { type: splineType, instance: spline } = annotation.data.spline;
+    const splineConfig = this._getSplineConfig(splineType);
+    const worldPoints = data.handles.points;
+    const canvasPoints = worldPoints.map(worldToCanvas);
+    const resolution =
+      splineConfig.resolution !== undefined
+        ? parseInt(splineConfig.resolution)
+        : undefined;
+    const scale =
+      splineConfig.scale !== undefined
+        ? parseFloat(splineConfig.scale)
+        : undefined;
+
+    spline.setControlPoints(canvasPoints);
+    spline.closed = !!data.contour.closed;
+
+    // Update spline resolution in case it has changed
+    if (
+      !spline.fixedResolution &&
+      resolution !== undefined &&
+      spline.resolution !== resolution
+    ) {
+      spline.resolution = resolution;
+      annotation.invalidated = true;
+    }
+
+    // Update Cardinal spline scale in case it has changed
+    if (
+      spline instanceof CardinalSpline &&
+      !spline.fixedScale &&
+      scale !== undefined &&
+      spline.scale !== scale
+    ) {
+      spline.scale = scale;
+      annotation.invalidated = true;
+    }
+
+    return spline;
+  }
+
+  private _calculateCachedStats = (
+    annotation: SplineROIAnnotation,
+    element: HTMLDivElement
+  ) => {
+    if (!this.configuration.calculateStats) {
+      return;
+    }
+    const data = annotation.data;
+
+    if (!data.contour.closed) {
+      return;
+    }
+
+    const enabledElement = getEnabledElement(element);
+    const { viewport, renderingEngine } = enabledElement;
+    const { cachedStats } = data;
+    const { polyline: points } = data.contour;
+    const targetIds = Object.keys(cachedStats);
+
+    for (let i = 0; i < targetIds.length; i++) {
+      const targetId = targetIds[i];
+      const image = this.getTargetIdImage(targetId, renderingEngine);
+
+      // If image does not exists for the targetId, skip. This can be due
+      // to various reasons such as if the target was a volumeViewport, and
+      // the volumeViewport has been decached in the meantime.
+      if (!image) {
+        continue;
+      }
+
+      const { metadata } = image;
+      const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
+
+      // Using an arbitrary start point (canvasPoint), calculate the
+      // mm spacing for the canvas in the X and Y directions.
+      const canvasPoint = canvasCoordinates[0];
+      const originalWorldPoint = viewport.canvasToWorld(canvasPoint);
+      const deltaXPoint = viewport.canvasToWorld([
+        canvasPoint[0] + 1,
+        canvasPoint[1],
+      ]);
+      const deltaYPoint = viewport.canvasToWorld([
+        canvasPoint[0],
+        canvasPoint[1] + 1,
+      ]);
+
+      const deltaInX = vec3.distance(originalWorldPoint, deltaXPoint);
+      const deltaInY = vec3.distance(originalWorldPoint, deltaYPoint);
+
+      const { imageData } = image;
+      const { scale, areaUnits } = getCalibratedLengthUnitsAndScale(
+        image,
+        () => {
+          const {
+            maxX: canvasMaxX,
+            maxY: canvasMaxY,
+            minX: canvasMinX,
+            minY: canvasMinY,
+          } = math.polyline.getAABB(canvasCoordinates);
+
+          const topLeftBBWorld = viewport.canvasToWorld([
+            canvasMinX,
+            canvasMinY,
+          ]);
+
+          const topLeftBBIndex = utilities.transformWorldToIndex(
+            imageData,
+            topLeftBBWorld
+          );
+
+          const bottomRightBBWorld = viewport.canvasToWorld([
+            canvasMaxX,
+            canvasMaxY,
+          ]);
+
+          const bottomRightBBIndex = utilities.transformWorldToIndex(
+            imageData,
+            bottomRightBBWorld
+          );
+
+          return [topLeftBBIndex, bottomRightBBIndex];
+        }
+      );
+      let area = math.polyline.getArea(canvasCoordinates) / scale / scale;
+
+      // Convert from canvas_pixels ^2 to mm^2
+      area *= deltaInX * deltaInY;
+
+      cachedStats[targetId] = {
+        Modality: metadata.Modality,
+        area,
+        areaUnit: areaUnits,
+      };
+    }
+
+    this.triggerAnnotationModified(
+      annotation,
+      enabledElement,
+      ChangeTypes.StatsUpdated
+    );
+
+    return cachedStats;
+  };
+}
+
+function defaultGetTextLines(data, targetId): string[] {
+  const cachedVolumeStats = data.cachedStats[targetId];
+  const { area, isEmptyArea, areaUnit } = cachedVolumeStats;
+  const textLines: string[] = [];
+
+  if (area) {
+    const areaLine = isEmptyArea
+      ? `Area: Oblique not supported`
+      : `Area: ${roundNumber(area)} ${areaUnit}`;
+
+    textLines.push(areaLine);
+  }
+
+  return textLines;
+}
+
+SplineROITool.toolName = 'SplineROI';
+export default SplineROITool;