@cornerstonejs/tools 2.0.0-beta.7 → 2.0.0

package/src/tools/annotation/SplineROITool.ts

@@ -1,1238 +0,0 @@
-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;