BidirectionalTool.ts

import { vec2, vec3 } from 'gl-matrix';
import { getEnabledElement, utilities as csUtils } from '@cornerstonejs/core';
import type { Types } from '@cornerstonejs/core';

import { getCalibratedLengthUnitsAndScale } from '../../utilities/getCalibratedUnits';
import { roundNumber } from '../../utilities';
import { AnnotationTool } from '../base';
import throttle from '../../utilities/throttle';
import {
  addAnnotation,
  getAnnotations,
  removeAnnotation,
} from '../../stateManagement/annotation/annotationState';
import { isAnnotationLocked } from '../../stateManagement/annotation/annotationLocking';
import { isAnnotationVisible } from '../../stateManagement/annotation/annotationVisibility';
import {
  triggerAnnotationCompleted,
  triggerAnnotationModified,
} from '../../stateManagement/annotation/helpers/state';
import {
  drawLine as drawLineSvg,
  drawHandles as drawHandlesSvg,
  drawLinkedTextBox as drawLinkedTextBoxSvg,
} from '../../drawingSvg';
import { state } from '../../store';
import { Events } from '../../enums';
import { getViewportIdsWithToolToRender } from '../../utilities/viewportFilters';
import * as lineSegment from '../../utilities/math/line';
import { getTextBoxCoordsCanvas } from '../../utilities/drawing';
import {
  resetElementCursor,
  hideElementCursor,
} from '../../cursors/elementCursor';
import {
  EventTypes,
  ToolHandle,
  TextBoxHandle,
  PublicToolProps,
  ToolProps,
  SVGDrawingHelper,
} from '../../types';
import { BidirectionalAnnotation } from '../../types/ToolSpecificAnnotationTypes';

import triggerAnnotationRenderForViewportIds from '../../utilities/triggerAnnotationRenderForViewportIds';
import { StyleSpecifier } from '../../types/AnnotationStyle';

const { transformWorldToIndex } = csUtils;

/**
 * BidirectionalTool let you draw annotations that measures the length and
 * width at the same time in `mm` unit. It is consisted of two perpendicular lines and
 * a text box. You can use the BidirectionalTool in all planes even in oblique
 * reconstructed planes. Note: annotation tools in cornerstone3DTools exists in the exact location
 * in the physical 3d space, as a result, by default, all annotations that are
 * drawing in the same frameOfReference will get shared between viewports that
 * are in the same frameOfReference.
 *
 * The resulting annotation's data (statistics) and metadata (the
 * state of the viewport while drawing was happening) will get added to the
 * ToolState manager and can be accessed from the ToolState by calling getAnnotations
 * or similar methods.
 *
 * ```js
 * cornerstoneTools.addTool(BidirectionalTool)
 *
 * const toolGroup = ToolGroupManager.createToolGroup('toolGroupId')
 *
 * toolGroup.addTool(BidirectionalTool.toolName)
 *
 * toolGroup.addViewport('viewportId', 'renderingEngineId')
 *
 * toolGroup.setToolActive(BidirectionalTool.toolName, {
 *   bindings: [
 *    {
 *       mouseButton: MouseBindings.Primary, // Left Click
 *     },
 *   ],
 * })
 * ```
 *
 * Read more in the Docs section of the website.
 */

class BidirectionalTool extends AnnotationTool {
  static toolName;

  touchDragCallback: any;
  mouseDragCallback: any;
  _throttledCalculateCachedStats: any;
  editData: {
    annotation: any;
    viewportIdsToRender: string[];
    handleIndex?: number;
    movingTextBox: boolean;
    newAnnotation?: boolean;
    hasMoved?: boolean;
  } | null;
  isDrawing: boolean;
  isHandleOutsideImage: boolean;
  preventHandleOutsideImage: boolean;

  constructor(
    toolProps: PublicToolProps = {},
    defaultToolProps: ToolProps = {
      supportedInteractionTypes: ['Mouse', 'Touch'],
      configuration: {
        preventHandleOutsideImage: false,
        getTextLines: defaultGetTextLines,
      },
    }
  ) {
    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 Bidirectional Annotation and stores it in the annotationManager
   *
   * @param evt -  EventTypes.NormalizedMouseEventType
   * @returns The annotation object.
   *
   */
  addNewAnnotation(
    evt: EventTypes.InteractionEventType
  ): BidirectionalAnnotation {
    const eventDetail = evt.detail;
    const { currentPoints, element } = eventDetail;
    const worldPos = currentPoints.world;
    const enabledElement = getEnabledElement(element);
    const { viewport, renderingEngine } = enabledElement;

    this.isDrawing = true;

    const camera = viewport.getCamera();
    const { viewPlaneNormal, viewUp } = camera;

    const referencedImageId = this.getReferencedImageId(
      viewport,
      worldPos,
      viewPlaneNormal,
      viewUp
    );

    const FrameOfReferenceUID = viewport.getFrameOfReferenceUID();

    const annotation: BidirectionalAnnotation = {
      highlighted: true,
      invalidated: true,
      metadata: {
        toolName: this.getToolName(),
        viewPlaneNormal: <Types.Point3>[...viewPlaneNormal],
        viewUp: <Types.Point3>[...viewUp],
        FrameOfReferenceUID,
        referencedImageId,
      },
      data: {
        handles: {
          points: [
            // long
            <Types.Point3>[...worldPos],
            <Types.Point3>[...worldPos],
            // short
            <Types.Point3>[...worldPos],
            <Types.Point3>[...worldPos],
          ],
          textBox: {
            hasMoved: false,
            worldPosition: <Types.Point3>[0, 0, 0],
            worldBoundingBox: {
              topLeft: <Types.Point3>[0, 0, 0],
              topRight: <Types.Point3>[0, 0, 0],
              bottomLeft: <Types.Point3>[0, 0, 0],
              bottomRight: <Types.Point3>[0, 0, 0],
            },
          },
          activeHandleIndex: null,
        },
        label: '',
        cachedStats: {},
      },
    };

    addAnnotation(annotation, element);

    const viewportIdsToRender = getViewportIdsWithToolToRender(
      element,
      this.getToolName()
    );

    this.editData = {
      annotation,
      viewportIdsToRender,
      handleIndex: 1,
      movingTextBox: false,
      newAnnotation: true,
      hasMoved: false,
    };
    this._activateDraw(element);

    hideElementCursor(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: BidirectionalAnnotation,
    canvasCoords: Types.Point2,
    proximity: number
  ): boolean => {
    const enabledElement = getEnabledElement(element);
    const { viewport } = enabledElement;
    const { data } = annotation;
    const { points } = data.handles;

    // Check long axis
    let canvasPoint1 = viewport.worldToCanvas(points[0]);
    let canvasPoint2 = viewport.worldToCanvas(points[1]);

    let line = {
      start: {
        x: canvasPoint1[0],
        y: canvasPoint1[1],
      },
      end: {
        x: canvasPoint2[0],
        y: canvasPoint2[1],
      },
    };

    let distanceToPoint = lineSegment.distanceToPoint(
      [line.start.x, line.start.y],
      [line.end.x, line.end.y],
      [canvasCoords[0], canvasCoords[1]]
    );

    if (distanceToPoint <= proximity) {
      return true;
    }

    // Check short axis
    canvasPoint1 = viewport.worldToCanvas(points[2]);
    canvasPoint2 = viewport.worldToCanvas(points[3]);

    line = {
      start: {
        x: canvasPoint1[0],
        y: canvasPoint1[1],
      },
      end: {
        x: canvasPoint2[0],
        y: canvasPoint2[1],
      },
    };

    distanceToPoint = lineSegment.distanceToPoint(
      [line.start.x, line.start.y],
      [line.end.x, line.end.y],
      [canvasCoords[0], canvasCoords[1]]
    );

    if (distanceToPoint <= proximity) {
      return true;
    }

    return false;
  };

  /**
   * Handles the toolSelected callback for bidirectional tool
   * @param evt - EventTypes.MouseDownEventType
   * @param annotation - Bidirectional annotation
   * @param interactionType - interaction type (mouse, touch)
   */
  toolSelectedCallback = (
    evt: EventTypes.InteractionEventType,
    annotation: BidirectionalAnnotation
  ): void => {
    const eventDetail = evt.detail;
    const { element } = eventDetail;

    annotation.highlighted = true;

    const viewportIdsToRender = getViewportIdsWithToolToRender(
      element,
      this.getToolName()
    );

    this.editData = {
      annotation,
      viewportIdsToRender,
      movingTextBox: false,
    };

    this._activateModify(element);

    const enabledElement = getEnabledElement(element);
    const { renderingEngine } = enabledElement;

    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);

    hideElementCursor(element);

    evt.preventDefault();
  };

  /**
   * Executes the callback for when mouse has selected a handle (anchor point) of
   * the bidirectional tool or when the text box has been selected.
   *
   * @param evt - EventTypes.MouseDownEventType
   * @param annotation - Bidirectional annotation
   * @param handle - Handle index or selected textBox information
   * @param interactionType - interaction type (mouse, touch)
   */
  handleSelectedCallback = (
    evt: EventTypes.InteractionEventType,
    annotation: BidirectionalAnnotation,
    handle: ToolHandle
  ): void => {
    const eventDetail = evt.detail;
    const { element } = eventDetail;
    const data = annotation.data;

    annotation.highlighted = true;

    let movingTextBox = false;
    let handleIndex;

    if ((handle as TextBoxHandle).worldPosition) {
      movingTextBox = true;
    } else {
      handleIndex = data.handles.points.findIndex((p) => p === handle);
    }

    // Find viewports to render on drag.
    const viewportIdsToRender = getViewportIdsWithToolToRender(
      element,
      this.getToolName()
    );

    hideElementCursor(element);

    this.editData = {
      annotation,
      viewportIdsToRender,
      handleIndex,
      movingTextBox,
    };
    this._activateModify(element);

    const enabledElement = getEnabledElement(element);
    const { renderingEngine } = enabledElement;

    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);

    evt.preventDefault();
  };

  /**
   * Handles the mouse up action for the bidirectional tool. It can be at the end
   * of the annotation drawing (MouseUpEventType) or when the user clicks and release
   * the mouse button instantly which let to the annotation to draw without holding
   * the mouse button (MouseClickEventType).
   *
   * @param evt - mouse up or mouse click event types
   */
  _endCallback = (evt: EventTypes.InteractionEventType): void => {
    const eventDetail = evt.detail;
    const { element } = eventDetail;

    const { annotation, viewportIdsToRender, newAnnotation, hasMoved } =
      this.editData;
    const { data } = annotation;

    if (newAnnotation && !hasMoved) {
      return;
    }

    data.handles.activeHandleIndex = null;

    this._deactivateModify(element);
    this._deactivateDraw(element);

    resetElementCursor(element);

    const { renderingEngine } = getEnabledElement(element);

    if (this.editData.handleIndex !== undefined) {
      const { points } = data.handles;
      const firstLineSegmentLength = vec3.distance(points[0], points[1]);
      const secondLineSegmentLength = vec3.distance(points[2], points[3]);

      if (secondLineSegmentLength > firstLineSegmentLength) {
        // Switch points so [0,1] is the long axis and [2,3] is the short axis.

        const longAxis = [[...points[2]], [...points[3]]];

        const shortAxisPoint0 = [...points[0]];
        const shortAxisPoint1 = [...points[1]];

        // shortAxis[0->1] should be perpendicular (counter-clockwise) to longAxis[0->1]
        const longAxisVector = vec2.create();

        vec2.set(
          longAxisVector,
          longAxis[1][0] - longAxis[0][0],
          longAxis[1][1] - longAxis[1][0]
        );

        const counterClockWisePerpendicularToLongAxis = vec2.create();

        vec2.set(
          counterClockWisePerpendicularToLongAxis,
          -longAxisVector[1],
          longAxisVector[0]
        );

        const currentShortAxisVector = vec2.create();

        vec2.set(
          currentShortAxisVector,
          shortAxisPoint1[0] - shortAxisPoint0[0],
          shortAxisPoint1[1] - shortAxisPoint0[0]
        );

        let shortAxis;

        if (
          vec2.dot(
            currentShortAxisVector,
            counterClockWisePerpendicularToLongAxis
          ) > 0
        ) {
          shortAxis = [shortAxisPoint0, shortAxisPoint1];
        } else {
          shortAxis = [shortAxisPoint1, shortAxisPoint0];
        }

        data.handles.points = [
          longAxis[0],
          longAxis[1],
          shortAxis[0],
          shortAxis[1],
        ];
      }
    }

    if (
      this.isHandleOutsideImage &&
      this.configuration.preventHandleOutsideImage
    ) {
      removeAnnotation(annotation.annotationUID);
    }

    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);

    if (newAnnotation) {
      triggerAnnotationCompleted(annotation);
    }

    this.editData = null;
    this.isDrawing = false;
  };

  /**
   * @param evt - mouse move event type or mouse drag
   */
  _dragDrawCallback = (evt: EventTypes.InteractionEventType): void => {
    this.isDrawing = true;

    const eventDetail = evt.detail;
    const { currentPoints, element } = eventDetail;
    const enabledElement = getEnabledElement(element);
    const { renderingEngine, viewport } = enabledElement;
    const { worldToCanvas } = viewport;
    const { annotation, viewportIdsToRender, handleIndex } = this.editData;
    const { data } = annotation;

    const worldPos = currentPoints.world;

    // Update first move handle
    data.handles.points[handleIndex] = [...worldPos];

    const canvasCoordPoints = data.handles.points.map(worldToCanvas);

    const canvasCoords = {
      longLineSegment: {
        start: {
          x: canvasCoordPoints[0][0],
          y: canvasCoordPoints[0][1],
        },
        end: {
          x: canvasCoordPoints[1][0],
          y: canvasCoordPoints[1][1],
        },
      },
      shortLineSegment: {
        start: {
          x: canvasCoordPoints[2][0],
          y: canvasCoordPoints[2][1],
        },
        end: {
          x: canvasCoordPoints[3][0],
          y: canvasCoordPoints[3][1],
        },
      },
    };

    // ~~ calculate worldPos of our short axis handles
    // short axis is perpendicular to long axis, and we set its length to be 2/3 of long axis
    // (meaning each)
    const dist = vec2.distance(canvasCoordPoints[0], canvasCoordPoints[1]);

    const shortAxisDistFromCenter = dist / 3;
    // Calculate long line's incline
    const dx =
      canvasCoords.longLineSegment.start.x - canvasCoords.longLineSegment.end.x;
    const dy =
      canvasCoords.longLineSegment.start.y - canvasCoords.longLineSegment.end.y;
    const length = Math.sqrt(dx * dx + dy * dy);
    const vectorX = dx / length;
    const vectorY = dy / length;
    // middle point between long line segment's points
    const xMid =
      (canvasCoords.longLineSegment.start.x +
        canvasCoords.longLineSegment.end.x) /
      2;
    const yMid =
      (canvasCoords.longLineSegment.start.y +
        canvasCoords.longLineSegment.end.y) /
      2;
    // short points 1/3 distance from center of long points
    const startX = xMid + shortAxisDistFromCenter * vectorY;
    const startY = yMid - shortAxisDistFromCenter * vectorX;
    const endX = xMid - shortAxisDistFromCenter * vectorY;
    const endY = yMid + shortAxisDistFromCenter * vectorX;

    // Update perpendicular line segment's points
    data.handles.points[2] = viewport.canvasToWorld([startX, startY]);
    data.handles.points[3] = viewport.canvasToWorld([endX, endY]);

    annotation.invalidated = true;
    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);

    this.editData.hasMoved = true;
  };

  /**
   * Mouse drag to edit annotation callback
   * @param evt - mouse drag event
   */
  _dragModifyCallback = (evt: EventTypes.InteractionEventType): void => {
    this.isDrawing = true;

    const eventDetail = evt.detail;
    const { element } = eventDetail;
    const enabledElement = getEnabledElement(element);
    const { renderingEngine } = enabledElement;
    const { annotation, viewportIdsToRender, handleIndex, movingTextBox } =
      this.editData;
    const { data } = annotation;
    if (movingTextBox) {
      const { deltaPoints } = eventDetail;
      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) {
      // Moving tool
      const { deltaPoints } = eventDetail;
      const worldPosDelta = deltaPoints.world;
      const points = data.handles.points;

      points.forEach((point) => {
        point[0] += worldPosDelta[0];
        point[1] += worldPosDelta[1];
        point[2] += worldPosDelta[2];
      });
      annotation.invalidated = true;
    } else {
      this._dragModifyHandle(evt);
      annotation.invalidated = true;
    }

    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
  };

  /**
   * Mouse dragging a handle callback
   * @param evt - mouse drag event
   */
  _dragModifyHandle = (evt: EventTypes.InteractionEventType): void => {
    const eventDetail = evt.detail;
    const { currentPoints, element } = eventDetail;
    const enabledElement = getEnabledElement(element);
    const { viewport } = enabledElement;
    const { annotation, handleIndex: movingHandleIndex } = this.editData;
    const { data } = annotation;

    // Moving handle
    const worldPos = currentPoints.world;
    const canvasCoordHandlesCurrent = [
      viewport.worldToCanvas(data.handles.points[0]),
      viewport.worldToCanvas(data.handles.points[1]),
      viewport.worldToCanvas(data.handles.points[2]),
      viewport.worldToCanvas(data.handles.points[3]),
    ];

    const firstLineSegment = {
      start: {
        x: canvasCoordHandlesCurrent[0][0],
        y: canvasCoordHandlesCurrent[0][1],
      },
      end: {
        x: canvasCoordHandlesCurrent[1][0],
        y: canvasCoordHandlesCurrent[1][1],
      },
    };
    const secondLineSegment = {
      start: {
        x: canvasCoordHandlesCurrent[2][0],
        y: canvasCoordHandlesCurrent[2][1],
      },
      end: {
        x: canvasCoordHandlesCurrent[3][0],
        y: canvasCoordHandlesCurrent[3][1],
      },
    };

    // Handle we've selected's proposed point
    const proposedPoint = <Types.Point3>[...worldPos];
    const proposedCanvasCoord = viewport.worldToCanvas(proposedPoint);

    if (movingHandleIndex === 0 || movingHandleIndex === 1) {
      const fixedHandleIndex = movingHandleIndex === 0 ? 1 : 0;

      const fixedHandleCanvasCoord =
        canvasCoordHandlesCurrent[fixedHandleIndex];

      const fixedHandleToProposedCoordVec = vec2.set(
        vec2.create(),
        proposedCanvasCoord[0] - fixedHandleCanvasCoord[0],
        proposedCanvasCoord[1] - fixedHandleCanvasCoord[1]
      );

      const fixedHandleToOldCoordVec = vec2.set(
        vec2.create(),
        canvasCoordHandlesCurrent[movingHandleIndex][0] -
          fixedHandleCanvasCoord[0],
        canvasCoordHandlesCurrent[movingHandleIndex][1] -
          fixedHandleCanvasCoord[1]
      );

      // normalize vector
      vec2.normalize(
        fixedHandleToProposedCoordVec,
        fixedHandleToProposedCoordVec
      );
      vec2.normalize(fixedHandleToOldCoordVec, fixedHandleToOldCoordVec);

      // Check whether this
      const proposedFirstLineSegment = {
        start: {
          x: fixedHandleCanvasCoord[0],
          y: fixedHandleCanvasCoord[1],
        },
        end: {
          x: proposedCanvasCoord[0],
          y: proposedCanvasCoord[1],
        },
      };

      // Note: this is the case when we are modifying the long axis line segment
      // and we make it shorter and shorter until its second half size becomes zero
      // which basically means that any more modification would make the long axis
      // second half disappear. In this case, we just bail out and do not update
      // since we don't want to disrupt the bidirectional shape.
      if (
        this._movingLongAxisWouldPutItThroughShortAxis(
          proposedFirstLineSegment,
          secondLineSegment
        )
      ) {
        return;
      }

      const centerOfRotation = fixedHandleCanvasCoord;

      const angle = this._getSignedAngle(
        fixedHandleToOldCoordVec,
        fixedHandleToProposedCoordVec
      );

      // rotate handles around the center of rotation, first translate to origin,
      // then rotate, then translate back
      let firstPointX = canvasCoordHandlesCurrent[2][0];
      let firstPointY = canvasCoordHandlesCurrent[2][1];

      let secondPointX = canvasCoordHandlesCurrent[3][0];
      let secondPointY = canvasCoordHandlesCurrent[3][1];

      // translate to origin
      firstPointX -= centerOfRotation[0];
      firstPointY -= centerOfRotation[1];

      secondPointX -= centerOfRotation[0];
      secondPointY -= centerOfRotation[1];

      // rotate
      const rotatedFirstPoint =
        firstPointX * Math.cos(angle) - firstPointY * Math.sin(angle);
      const rotatedFirstPointY =
        firstPointX * Math.sin(angle) + firstPointY * Math.cos(angle);

      const rotatedSecondPoint =
        secondPointX * Math.cos(angle) - secondPointY * Math.sin(angle);
      const rotatedSecondPointY =
        secondPointX * Math.sin(angle) + secondPointY * Math.cos(angle);

      // translate back
      firstPointX = rotatedFirstPoint + centerOfRotation[0];
      firstPointY = rotatedFirstPointY + centerOfRotation[1];

      secondPointX = rotatedSecondPoint + centerOfRotation[0];
      secondPointY = rotatedSecondPointY + centerOfRotation[1];

      // update handles
      const newFirstPoint = viewport.canvasToWorld([firstPointX, firstPointY]);
      const newSecondPoint = viewport.canvasToWorld([
        secondPointX,
        secondPointY,
      ]);

      // the fixed handle is the one that is not being moved so we
      // don't need to update it
      data.handles.points[movingHandleIndex] = proposedPoint;
      data.handles.points[2] = newFirstPoint;
      data.handles.points[3] = newSecondPoint;
    } else {
      // Translation manipulator
      const translateHandleIndex = movingHandleIndex === 2 ? 3 : 2;

      const canvasCoordsCurrent = {
        longLineSegment: {
          start: firstLineSegment.start,
          end: firstLineSegment.end,
        },
        shortLineSegment: {
          start: secondLineSegment.start,
          end: secondLineSegment.end,
        },
      };

      const longLineSegmentVec = vec2.subtract(
        vec2.create(),
        [
          canvasCoordsCurrent.longLineSegment.end.x,
          canvasCoordsCurrent.longLineSegment.end.y,
        ],
        [
          canvasCoordsCurrent.longLineSegment.start.x,
          canvasCoordsCurrent.longLineSegment.start.y,
        ]
      );

      const longLineSegmentVecNormalized = vec2.normalize(
        vec2.create(),
        longLineSegmentVec
      );

      const proposedToCurrentVec = vec2.subtract(
        vec2.create(),
        [proposedCanvasCoord[0], proposedCanvasCoord[1]],
        [
          canvasCoordHandlesCurrent[movingHandleIndex][0],
          canvasCoordHandlesCurrent[movingHandleIndex][1],
        ]
      );

      const movementLength = vec2.length(proposedToCurrentVec);

      const angle = this._getSignedAngle(
        longLineSegmentVecNormalized,
        proposedToCurrentVec
      );

      const movementAlongLineSegmentLength = Math.cos(angle) * movementLength;

      const newTranslatedPoint = vec2.scaleAndAdd(
        vec2.create(),
        [
          canvasCoordHandlesCurrent[translateHandleIndex][0],
          canvasCoordHandlesCurrent[translateHandleIndex][1],
        ],
        longLineSegmentVecNormalized,
        movementAlongLineSegmentLength
      );

      // don't update if it passes through the other line segment
      if (
        this._movingLongAxisWouldPutItThroughShortAxis(
          {
            start: {
              x: proposedCanvasCoord[0],
              y: proposedCanvasCoord[1],
            },
            end: {
              x: newTranslatedPoint[0],
              y: newTranslatedPoint[1],
            },
          },
          {
            start: {
              x: canvasCoordsCurrent.longLineSegment.start.x,
              y: canvasCoordsCurrent.longLineSegment.start.y,
            },
            end: {
              x: canvasCoordsCurrent.longLineSegment.end.x,
              y: canvasCoordsCurrent.longLineSegment.end.y,
            },
          }
        )
      ) {
        return;
      }

      const intersectionPoint = lineSegment.intersectLine(
        [proposedCanvasCoord[0], proposedCanvasCoord[1]],
        [newTranslatedPoint[0], newTranslatedPoint[1]],
        [firstLineSegment.start.x, firstLineSegment.start.y],
        [firstLineSegment.end.x, firstLineSegment.end.y]
      );

      // don't update if it doesn't intersect
      if (!intersectionPoint) {
        return;
      }

      data.handles.points[translateHandleIndex] = viewport.canvasToWorld(
        newTranslatedPoint as Types.Point2
      );
      data.handles.points[movingHandleIndex] = proposedPoint;
    }
  };

  /**
   * Cancels an ongoing drawing of a bidirectional annotation
   * @param element - HTML Element
   */
  cancel = (element: HTMLDivElement) => {
    // If it is mid-draw or mid-modify
    if (this.isDrawing) {
      this.isDrawing = false;
      this._deactivateDraw(element);
      this._deactivateModify(element);
      resetElementCursor(element);

      const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
      const { data } = annotation;

      annotation.highlighted = false;
      data.handles.activeHandleIndex = null;

      const { renderingEngine } = getEnabledElement(element);

      triggerAnnotationRenderForViewportIds(
        renderingEngine,
        viewportIdsToRender
      );

      if (newAnnotation) {
        triggerAnnotationCompleted(annotation);
      }

      this.editData = null;
      return annotation.annotationUID;
    }
  };

  _activateDraw = (element) => {
    state.isInteractingWithTool = true;

    element.addEventListener(Events.MOUSE_UP, this._endCallback);
    element.addEventListener(Events.MOUSE_DRAG, this._dragDrawCallback);
    element.addEventListener(Events.MOUSE_MOVE, this._dragDrawCallback);
    element.addEventListener(Events.MOUSE_CLICK, this._endCallback);

    element.addEventListener(
      Events.TOUCH_TAP,
      this._endCallback as EventListener
    );
    element.addEventListener(
      Events.TOUCH_END,
      this._endCallback as EventListener
    );
    element.addEventListener(
      Events.TOUCH_DRAG,
      this._dragDrawCallback as EventListener
    );
  };

  _deactivateDraw = (element) => {
    state.isInteractingWithTool = false;

    element.removeEventListener(Events.MOUSE_UP, this._endCallback);
    element.removeEventListener(Events.MOUSE_DRAG, this._dragDrawCallback);
    element.removeEventListener(Events.MOUSE_MOVE, this._dragDrawCallback);
    element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);

    element.removeEventListener(
      Events.TOUCH_TAP,
      this._endCallback as EventListener
    );
    element.removeEventListener(
      Events.TOUCH_END,
      this._endCallback as EventListener
    );
    element.removeEventListener(
      Events.TOUCH_DRAG,
      this._dragDrawCallback as EventListener
    );
  };

  _activateModify = (element) => {
    state.isInteractingWithTool = true;

    element.addEventListener(Events.MOUSE_UP, this._endCallback);
    element.addEventListener(Events.MOUSE_DRAG, this._dragModifyCallback);
    element.addEventListener(Events.MOUSE_CLICK, this._endCallback);

    element.addEventListener(
      Events.TOUCH_END,
      this._endCallback as EventListener
    );
    element.addEventListener(
      Events.TOUCH_DRAG,
      this._dragModifyCallback as EventListener
    );
    element.addEventListener(
      Events.TOUCH_TAP,
      this._endCallback as EventListener
    );
  };

  _deactivateModify = (element) => {
    state.isInteractingWithTool = false;

    element.removeEventListener(Events.MOUSE_UP, this._endCallback);
    element.removeEventListener(Events.MOUSE_DRAG, this._dragModifyCallback);
    element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);

    element.removeEventListener(
      Events.TOUCH_END,
      this._endCallback as EventListener
    );
    element.removeEventListener(
      Events.TOUCH_DRAG,
      this._dragModifyCallback as EventListener
    );
    element.removeEventListener(
      Events.TOUCH_TAP,
      this._endCallback as EventListener
    );
  };

  /**
   * it is used to draw the bidirectional annotation in each
   * request animation frame. It calculates the updated cached statistics if
   * data is invalidated and cache it.
   *
   * @param enabledElement - The Cornerstone's enabledElement.
   * @param svgDrawingHelper - The svgDrawingHelper providing the context for drawing.
   */
  renderAnnotation = (
    enabledElement: Types.IEnabledElement,
    svgDrawingHelper: SVGDrawingHelper
  ): boolean => {
    let renderStatus = true;
    const { viewport } = enabledElement;
    const { element } = viewport;
    let annotations = getAnnotations(this.getToolName(), element);

    if (!annotations?.length) {
      return renderStatus;
    }

    annotations = this.filterInteractableAnnotationsForElement(
      element,
      annotations
    );

    if (!annotations?.length) {
      return renderStatus;
    }

    const targetId = this.getTargetId(viewport);

    const renderingEngine = viewport.getRenderingEngine();

    const styleSpecifier: StyleSpecifier = {
      toolGroupId: this.toolGroupId,
      toolName: this.getToolName(),
      viewportId: enabledElement.viewport.id,
    };

    for (let i = 0; i < annotations.length; i++) {
      const annotation = annotations[i] as BidirectionalAnnotation;
      const { annotationUID, data } = annotation;
      const { points, activeHandleIndex } = data.handles;
      const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));

      styleSpecifier.annotationUID = annotationUID;

      const { color, lineWidth, lineDash, shadow } = this.getAnnotationStyle({
        annotation,
        styleSpecifier,
      });

      // If cachedStats does not exist, or the unit is missing (as part of import/hydration etc.),
      // force to recalculate the stats from the points
      if (
        !data.cachedStats[targetId] ||
        data.cachedStats[targetId].unit == null
      ) {
        data.cachedStats[targetId] = {
          length: null,
          width: null,
          unit: null,
        };

        this._calculateCachedStats(annotation, renderingEngine, enabledElement);
      } else if (annotation.invalidated) {
        this._throttledCalculateCachedStats(
          annotation,
          renderingEngine,
          enabledElement
        );
      }

      // If rendering engine has been destroyed while rendering
      if (!viewport.getRenderingEngine()) {
        console.warn('Rendering Engine has been destroyed');
        return renderStatus;
      }

      let activeHandleCanvasCoords;

      if (!isAnnotationVisible(annotationUID)) {
        continue;
      }

      if (
        !isAnnotationLocked(annotation) &&
        !this.editData &&
        activeHandleIndex !== null
      ) {
        // Not locked or creating and hovering over handle, so render handle.
        activeHandleCanvasCoords = [canvasCoordinates[activeHandleIndex]];
      }

      if (activeHandleCanvasCoords) {
        const handleGroupUID = '0';

        drawHandlesSvg(
          svgDrawingHelper,
          annotationUID,
          handleGroupUID,
          activeHandleCanvasCoords,
          {
            color,
          }
        );
      }

      const dataId1 = `${annotationUID}-line-1`;
      const dataId2 = `${annotationUID}-line-2`;

      const lineUID = '0';
      drawLineSvg(
        svgDrawingHelper,
        annotationUID,
        lineUID,
        canvasCoordinates[0],
        canvasCoordinates[1],
        {
          color,
          lineDash,
          lineWidth,
          shadow,
        },
        dataId1
      );

      const secondLineUID = '1';
      drawLineSvg(
        svgDrawingHelper,
        annotationUID,
        secondLineUID,
        canvasCoordinates[2],
        canvasCoordinates[3],
        {
          color,
          lineDash,
          lineWidth,
          shadow,
        },
        dataId2
      );

      renderStatus = true;

      const options = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
      if (!options.visibility) {
        data.handles.textBox = {
          hasMoved: false,
          worldPosition: <Types.Point3>[0, 0, 0],
          worldBoundingBox: {
            topLeft: <Types.Point3>[0, 0, 0],
            topRight: <Types.Point3>[0, 0, 0],
            bottomLeft: <Types.Point3>[0, 0, 0],
            bottomRight: <Types.Point3>[0, 0, 0],
          },
        };
        continue;
      }

      const textLines = this.configuration.getTextLines(data, targetId);
      if (!textLines || textLines.length === 0) {
        continue;
      }

      let canvasTextBoxCoords;

      if (!data.handles.textBox.hasMoved) {
        canvasTextBoxCoords = getTextBoxCoordsCanvas(canvasCoordinates);

        data.handles.textBox.worldPosition =
          viewport.canvasToWorld(canvasTextBoxCoords);
      }

      const textBoxPosition = viewport.worldToCanvas(
        data.handles.textBox.worldPosition
      );

      const textBoxUID = '1';
      const boundingBox = drawLinkedTextBoxSvg(
        svgDrawingHelper,
        annotationUID,
        textBoxUID,
        textLines,
        textBoxPosition,
        canvasCoordinates,
        {},
        options
      );

      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]),
      };
    }

    return renderStatus;
  };

  _movingLongAxisWouldPutItThroughShortAxis = (
    firstLineSegment,
    secondLineSegment
  ) => {
    const vectorInSecondLineDirection = vec2.create();

    vec2.set(
      vectorInSecondLineDirection,
      secondLineSegment.end.x - secondLineSegment.start.x,
      secondLineSegment.end.y - secondLineSegment.start.y
    );

    vec2.normalize(vectorInSecondLineDirection, vectorInSecondLineDirection);

    const extendedSecondLineSegment = {
      start: {
        x: secondLineSegment.start.x - vectorInSecondLineDirection[0] * 10,
        y: secondLineSegment.start.y - vectorInSecondLineDirection[1] * 10,
      },
      end: {
        x: secondLineSegment.end.x + vectorInSecondLineDirection[0] * 10,
        y: secondLineSegment.end.y + vectorInSecondLineDirection[1] * 10,
      },
    };

    // Add some buffer in the secondLineSegment when finding the proposedIntersectionPoint
    // Of points to stop us getting stack when rotating quickly.

    const proposedIntersectionPoint = lineSegment.intersectLine(
      [extendedSecondLineSegment.start.x, extendedSecondLineSegment.start.y],
      [extendedSecondLineSegment.end.x, extendedSecondLineSegment.end.y],
      [firstLineSegment.start.x, firstLineSegment.start.y],
      [firstLineSegment.end.x, firstLineSegment.end.y]
    );

    const wouldPutThroughShortAxis = !proposedIntersectionPoint;

    return wouldPutThroughShortAxis;
  };

  _calculateLength(pos1, pos2) {
    const dx = pos1[0] - pos2[0];
    const dy = pos1[1] - pos2[1];
    const dz = pos1[2] - pos2[2];

    return Math.sqrt(dx * dx + dy * dy + dz * dz);
  }

  _calculateCachedStats = (annotation, renderingEngine, enabledElement) => {
    const { data } = annotation;
    const { element } = enabledElement.viewport;

    const worldPos1 = data.handles.points[0];
    const worldPos2 = data.handles.points[1];
    const worldPos3 = data.handles.points[2];
    const worldPos4 = data.handles.points[3];

    const { cachedStats } = data;
    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 { imageData, dimensions } = image;
      const index1 = transformWorldToIndex(imageData, worldPos1);
      const index2 = transformWorldToIndex(imageData, worldPos2);
      const index3 = transformWorldToIndex(imageData, worldPos3);
      const index4 = transformWorldToIndex(imageData, worldPos4);

      const handles1 = [index1, index2];
      const handles2 = [index3, index4];

      const { scale: scale1, units: units1 } = getCalibratedLengthUnitsAndScale(
        image,
        handles1
      );

      const { scale: scale2, units: units2 } = getCalibratedLengthUnitsAndScale(
        image,
        handles2
      );

      const dist1 = this._calculateLength(worldPos1, worldPos2) / scale1;
      const dist2 = this._calculateLength(worldPos3, worldPos4) / scale2;
      const length = dist1 > dist2 ? dist1 : dist2;
      const width = dist1 > dist2 ? dist2 : dist1;

      const lengthUnit = dist1 > dist2 ? units1 : units2;
      const widthUnit = dist1 > dist2 ? units2 : units1;

      this._isInsideVolume(index1, index2, index3, index4, dimensions)
        ? (this.isHandleOutsideImage = false)
        : (this.isHandleOutsideImage = true);

      cachedStats[targetId] = {
        length,
        width,
        unit: units1,
        lengthUnit,
        widthUnit,
      };
    }

    annotation.invalidated = false;

    // Dispatching annotation modified
    triggerAnnotationModified(annotation, element);

    return cachedStats;
  };

  _isInsideVolume = (index1, index2, index3, index4, dimensions): boolean => {
    return (
      csUtils.indexWithinDimensions(index1, dimensions) &&
      csUtils.indexWithinDimensions(index2, dimensions) &&
      csUtils.indexWithinDimensions(index3, dimensions) &&
      csUtils.indexWithinDimensions(index4, dimensions)
    );
  };

  _getSignedAngle = (vector1, vector2) => {
    return Math.atan2(
      vector1[0] * vector2[1] - vector1[1] * vector2[0],
      vector1[0] * vector2[0] + vector1[1] * vector2[1]
    );
  };
}

function defaultGetTextLines(data, targetId): string[] {
  const { cachedStats, label } = data;
  const { length, width, unit, lengthUnit, widthUnit } = cachedStats[targetId];

  const textLines = [];
  if (label) {
    textLines.push(label);
  }
  if (length === undefined) {
    return textLines;
  }

  // spaceBetweenSlices & pixelSpacing &
  // magnitude in each direction? Otherwise, this is "px"?
  textLines.push(
    `L: ${roundNumber(length)} ${lengthUnit || unit}`,
    `W: ${roundNumber(width)} ${widthUnit || unit}`
  );

  return textLines;
}

BidirectionalTool.toolName = 'Bidirectional';
export default BidirectionalTool;