@cornerstonejs/tools 2.0.0-beta.2 → 2.0.0-beta.4

package/src/tools/annotation/CobbAngleTool.ts

@@ -23,6 +23,7 @@ import {
   drawHandles as drawHandlesSvg,
   drawLine as drawLineSvg,
   drawLinkedTextBox as drawLinkedTextBoxSvg,
+  drawTextBox as drawTextBoxSvg,
 } from '../../drawingSvg';
 import { state } from '../../store';
 import { getViewportIdsWithToolToRender } from '../../utilities/viewportFilters';
@@ -47,7 +48,7 @@ import {
   InteractionTypes,
   SVGDrawingHelper,
 } from '../../types';
-import { AngleAnnotation } from '../../types/ToolSpecificAnnotationTypes';
+import { CobbAngleAnnotation } from '../../types/ToolSpecificAnnotationTypes';
 import { StyleSpecifier } from '../../types/AnnotationStyle';
 
 class CobbAngleTool extends AnnotationTool {
@@ -64,6 +65,8 @@ class CobbAngleTool extends AnnotationTool {
     movingTextBox?: boolean;
     newAnnotation?: boolean;
     hasMoved?: boolean;
+    isNearFirstLine?: boolean;
+    isNearSecondLine?: boolean;
   } | null;
   isDrawing: boolean;
   isHandleOutsideImage: boolean;
@@ -83,7 +86,7 @@ class CobbAngleTool extends AnnotationTool {
 
     this._throttledCalculateCachedStats = throttle(
       this._calculateCachedStats,
-      100,
+      25,
       { trailing: true }
     );
   }
@@ -98,7 +101,7 @@ class CobbAngleTool extends AnnotationTool {
    */
   addNewAnnotation = (
     evt: EventTypes.MouseDownActivateEventType
-  ): AngleAnnotation => {
+  ): CobbAngleAnnotation => {
     if (this.angleStartedNotYetCompleted) {
       return;
     }
@@ -192,52 +195,20 @@ class CobbAngleTool extends AnnotationTool {
    */
   isPointNearTool = (
     element: HTMLDivElement,
-    annotation: AngleAnnotation,
+    annotation: CobbAngleAnnotation,
     canvasCoords: Types.Point2,
     proximity: number
   ): boolean => {
     const enabledElement = getEnabledElement(element);
     const { viewport } = enabledElement;
     const { data } = annotation;
-    const [point1, point2, point3, point4] = data.handles.points;
-    const canvasPoint1 = viewport.worldToCanvas(point1);
-    const canvasPoint2 = viewport.worldToCanvas(point2);
-    const canvasPoint3 = viewport.worldToCanvas(point3);
-    const canvasPoint4 = viewport.worldToCanvas(point4);
-
-    const line1 = {
-      start: {
-        x: canvasPoint1[0],
-        y: canvasPoint1[1],
-      },
-      end: {
-        x: canvasPoint2[0],
-        y: canvasPoint2[1],
-      },
-    };
-
-    const line2 = {
-      start: {
-        x: canvasPoint3[0],
-        y: canvasPoint3[1],
-      },
-      end: {
-        x: canvasPoint4[0],
-        y: canvasPoint4[1],
-      },
-    };
-
-    const distanceToPoint = lineSegment.distanceToPoint(
-      [line1.start.x, line1.start.y],
-      [line1.end.x, line1.end.y],
-      [canvasCoords[0], canvasCoords[1]]
-    );
 
-    const distanceToPoint2 = lineSegment.distanceToPoint(
-      [line2.start.x, line2.start.y],
-      [line2.end.x, line2.end.y],
-      [canvasCoords[0], canvasCoords[1]]
-    );
+    const { distanceToPoint, distanceToPoint2 } = this.distanceToLines({
+      viewport,
+      points: data.handles.points,
+      canvasCoords,
+      proximity,
+    });
 
     if (distanceToPoint <= proximity || distanceToPoint2 <= proximity) {
       return true;
@@ -248,8 +219,10 @@ class CobbAngleTool extends AnnotationTool {
 
   toolSelectedCallback = (
     evt: EventTypes.MouseDownEventType,
-    annotation: AngleAnnotation,
-    interactionType: InteractionTypes
+    annotation: CobbAngleAnnotation,
+    interactionType: InteractionTypes,
+    canvasCoords: Types.Point2,
+    proximity = 6
   ): void => {
     const eventDetail = evt.detail;
     const { element } = eventDetail;
@@ -261,19 +234,28 @@ class CobbAngleTool extends AnnotationTool {
       this.getToolName()
     );
 
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine, viewport } = enabledElement;
+
+    const { isNearFirstLine, isNearSecondLine } = this.distanceToLines({
+      viewport,
+      points: annotation.data.handles.points,
+      canvasCoords,
+      proximity,
+    });
+
     this.editData = {
       annotation,
       viewportIdsToRender,
       movingTextBox: false,
+      isNearFirstLine,
+      isNearSecondLine,
     };
 
     this._activateModify(element);
 
     hideElementCursor(element);
 
-    const enabledElement = getEnabledElement(element);
-    const { renderingEngine } = enabledElement;
-
     triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
 
     evt.preventDefault();
@@ -281,7 +263,7 @@ class CobbAngleTool extends AnnotationTool {
 
   handleSelectedCallback(
     evt: EventTypes.MouseDownEventType,
-    annotation: AngleAnnotation,
+    annotation: CobbAngleAnnotation,
     handle: ToolHandle,
     interactionType = 'mouse'
   ): void {
@@ -436,8 +418,14 @@ class CobbAngleTool extends AnnotationTool {
     const eventDetail = evt.detail;
     const { element } = eventDetail;
 
-    const { annotation, viewportIdsToRender, handleIndex, movingTextBox } =
-      this.editData;
+    const {
+      annotation,
+      viewportIdsToRender,
+      handleIndex,
+      movingTextBox,
+      isNearFirstLine,
+      isNearSecondLine,
+    } = this.editData;
     const { data } = annotation;
 
     if (movingTextBox) {
@@ -453,21 +441,35 @@ class CobbAngleTool extends AnnotationTool {
       worldPosition[2] += worldPosDelta[2];
 
       textBox.hasMoved = true;
-    } else if (handleIndex === undefined) {
-      // Drag mode - moving handle
+    } else if (
+      handleIndex === undefined &&
+      (isNearFirstLine || isNearSecondLine)
+    ) {
+      // select tool mode - moving annotation
       const { deltaPoints } = eventDetail as EventTypes.MouseDragEventDetail;
       const worldPosDelta = deltaPoints.world;
-
       const points = data.handles.points;
 
-      points.forEach((point) => {
-        point[0] += worldPosDelta[0];
-        point[1] += worldPosDelta[1];
-        point[2] += worldPosDelta[2];
-      });
+      // separate the logic for moving handles to move them separately
+      if (isNearFirstLine) {
+        const firstLinePoints = [points[0], points[1]];
+        firstLinePoints.forEach((point) => {
+          point[0] += worldPosDelta[0];
+          point[1] += worldPosDelta[1];
+          point[2] += worldPosDelta[2];
+        });
+      } else if (isNearSecondLine) {
+        const secondLinePoints = [points[2], points[3]];
+        secondLinePoints.forEach((point) => {
+          point[0] += worldPosDelta[0];
+          point[1] += worldPosDelta[1];
+          point[2] += worldPosDelta[2];
+        });
+      }
+
       annotation.invalidated = true;
     } else {
-      // Move mode - after double click, and mouse move to draw
+      // Drag handle mode - after double click, and mouse move to draw
       const { currentPoints } = eventDetail;
       const worldPos = currentPoints.world;
 
@@ -485,40 +487,44 @@ class CobbAngleTool extends AnnotationTool {
 
   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);
+    if (!this.isDrawing) {
+      return;
+    }
 
-      const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
-      const { data } = annotation;
+    this.isDrawing = false;
+    this._deactivateDraw(element);
+    this._deactivateModify(element);
+    resetElementCursor(element);
 
-      annotation.highlighted = false;
-      data.handles.activeHandleIndex = null;
+    const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
+    const { data } = annotation;
 
-      const enabledElement = getEnabledElement(element);
-      const { renderingEngine } = enabledElement;
+    if (data.handles.points.length < 4) {
+      // If it is mid-draw
+      removeAnnotation(annotation.annotationUID);
+    }
 
-      triggerAnnotationRenderForViewportIds(
-        renderingEngine,
-        viewportIdsToRender
-      );
+    annotation.highlighted = false;
+    data.handles.activeHandleIndex = null;
 
-      if (newAnnotation) {
-        const eventType = Events.ANNOTATION_COMPLETED;
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
 
-        const eventDetail: AnnotationCompletedEventDetail = {
-          annotation,
-        };
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
 
-        triggerEvent(eventTarget, eventType, eventDetail);
-      }
+    if (newAnnotation) {
+      const eventType = Events.ANNOTATION_COMPLETED;
 
-      this.editData = null;
-      this.angleStartedNotYetCompleted = false;
-      return annotation.annotationUID;
+      const eventDetail: AnnotationCompletedEventDetail = {
+        annotation,
+      };
+
+      triggerEvent(eventTarget, eventType, eventDetail);
     }
+
+    this.editData = null;
+    this.angleStartedNotYetCompleted = false;
+    return annotation.annotationUID;
   };
 
   _activateModify = (element: HTMLDivElement) => {
@@ -661,7 +667,7 @@ class CobbAngleTool extends AnnotationTool {
 
     // Draw SVG
     for (let i = 0; i < annotations.length; i++) {
-      const annotation = annotations[i] as AngleAnnotation;
+      const annotation = annotations[i] as CobbAngleAnnotation;
       const { annotationUID, data } = annotation;
       const { points, activeHandleIndex } = data.handles;
 
@@ -674,9 +680,32 @@ class CobbAngleTool extends AnnotationTool {
       const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
 
       // WE HAVE TO CACHE STATS BEFORE FETCHING TEXT
-      if (!data.cachedStats[targetId]) {
+      if (
+        !data.cachedStats[targetId] ||
+        data.cachedStats[targetId].angle == null
+      ) {
         data.cachedStats[targetId] = {
           angle: null,
+          arc1Angle: null,
+          arc2Angle: null,
+          points: {
+            world: {
+              arc1Start: null,
+              arc1End: null,
+              arc2Start: null,
+              arc2End: null,
+              arc1Angle: null,
+              arc2Angle: null,
+            },
+            canvas: {
+              arc1Start: null,
+              arc1End: null,
+              arc2Start: null,
+              arc2End: null,
+              arc1Angle: null,
+              arc2Angle: null,
+            },
+          },
         };
 
         this._calculateCachedStats(annotation, renderingEngine, enabledElement);
@@ -721,13 +750,22 @@ class CobbAngleTool extends AnnotationTool {
         );
       }
 
-      let lineUID = '1';
+      const firstLine = [canvasCoordinates[0], canvasCoordinates[1]] as [
+        Types.Point2,
+        Types.Point2
+      ];
+      const secondLine = [canvasCoordinates[2], canvasCoordinates[3]] as [
+        Types.Point2,
+        Types.Point2
+      ];
+
+      let lineUID = 'line1';
       drawLineSvg(
         svgDrawingHelper,
         annotationUID,
         lineUID,
-        canvasCoordinates[0],
-        canvasCoordinates[1],
+        firstLine[0],
+        firstLine[1],
         {
           color,
           width: lineWidth,
@@ -737,19 +775,19 @@ class CobbAngleTool extends AnnotationTool {
 
       renderStatus = true;
 
-      // Don't add textBox until annotation has 4 anchor points
+      // Don't add the stats until annotation has 4 anchor points
       if (canvasCoordinates.length < 4) {
         return renderStatus;
       }
 
-      lineUID = '2';
+      lineUID = 'line2';
 
       drawLineSvg(
         svgDrawingHelper,
         annotationUID,
         lineUID,
-        canvasCoordinates[2],
-        canvasCoordinates[3],
+        secondLine[0],
+        secondLine[1],
         {
           color,
           width: lineWidth,
@@ -757,15 +795,49 @@ class CobbAngleTool extends AnnotationTool {
         }
       );
 
-      lineUID = '3';
-      const mid1 = midPoint2(canvasCoordinates[0], canvasCoordinates[1]);
-      const mid2 = midPoint2(canvasCoordinates[2], canvasCoordinates[3]);
+      lineUID = 'linkLine';
+      const mid1 = midPoint2(firstLine[0], firstLine[1]);
+      const mid2 = midPoint2(secondLine[0], secondLine[1]);
       drawLineSvg(svgDrawingHelper, annotationUID, lineUID, mid1, mid2, {
         color,
         lineWidth: '1',
         lineDash: '1,4',
       });
 
+      // Calculating the arcs
+
+      const { arc1Start, arc1End, arc2End, arc2Start } =
+        data.cachedStats[targetId].points.canvas;
+      const { arc1Angle, arc2Angle } = data.cachedStats[targetId];
+
+      lineUID = 'arc1';
+
+      drawLineSvg(
+        svgDrawingHelper,
+        annotationUID,
+        lineUID,
+        arc1Start as Types.Point2,
+        arc1End as Types.Point2,
+        {
+          color,
+          lineWidth: '1',
+        }
+      );
+
+      lineUID = 'arc2';
+
+      drawLineSvg(
+        svgDrawingHelper,
+        annotationUID,
+        lineUID,
+        arc2Start as Types.Point2,
+        arc2End as Types.Point2,
+        {
+          color,
+          lineWidth: '1',
+        }
+      );
+
       if (!data.cachedStats[targetId]?.angle) {
         continue;
       }
@@ -798,7 +870,7 @@ class CobbAngleTool extends AnnotationTool {
         data.handles.textBox.worldPosition
       );
 
-      const textBoxUID = '1';
+      const textBoxUID = 'cobbAngleText';
       const boundingBox = drawLinkedTextBoxSvg(
         svgDrawingHelper,
         annotationUID,
@@ -818,6 +890,46 @@ class CobbAngleTool extends AnnotationTool {
         bottomLeft: viewport.canvasToWorld([left, top + height]),
         bottomRight: viewport.canvasToWorld([left + width, top + height]),
       };
+
+      const arc1TextBoxUID = 'arcAngle1';
+
+      const arc1TextLine = [
+        `${arc1Angle.toFixed(2)} ${String.fromCharCode(176)}`,
+      ];
+
+      const arch1TextPosCanvas = midPoint2(arc1Start, arc1End);
+
+      drawTextBoxSvg(
+        svgDrawingHelper,
+        annotationUID,
+        arc1TextBoxUID,
+        arc1TextLine,
+        arch1TextPosCanvas,
+        {
+          ...options,
+          padding: 3,
+        }
+      );
+
+      const arc2TextBoxUID = 'arcAngle2';
+
+      const arc2TextLine = [
+        `${arc2Angle.toFixed(2)} ${String.fromCharCode(176)}`,
+      ];
+
+      const arch2TextPosCanvas = midPoint2(arc2Start, arc2End);
+
+      drawTextBoxSvg(
+        svgDrawingHelper,
+        annotationUID,
+        arc2TextBoxUID,
+        arc2TextLine,
+        arch2TextPosCanvas,
+        {
+          ...options,
+          padding: 3,
+        }
+      );
     }
 
     return renderStatus;
@@ -859,16 +971,56 @@ class CobbAngleTool extends AnnotationTool {
         }
       }
     }
+    const { viewport } = enabledElement;
+
+    const canvasPoints = data.handles.points.map((p) =>
+      viewport.worldToCanvas(p)
+    );
+
+    const firstLine = [canvasPoints[0], canvasPoints[1]] as [
+      Types.Point2,
+      Types.Point2
+    ];
+    const secondLine = [canvasPoints[2], canvasPoints[3]] as [
+      Types.Point2,
+      Types.Point2
+    ];
+
+    const mid1 = midPoint2(firstLine[0], firstLine[1]);
+    const mid2 = midPoint2(secondLine[0], secondLine[1]);
+
+    const { arc1Start, arc1End, arc2End, arc2Start, arc1Angle, arc2Angle } =
+      this.getArcsStartEndPoints({
+        firstLine,
+        secondLine,
+        mid1,
+        mid2,
+      });
 
     const { cachedStats } = data;
     const targetIds = Object.keys(cachedStats);
 
     for (let i = 0; i < targetIds.length; i++) {
       const targetId = targetIds[i];
-      const angle = angleBetweenLines(seg1, seg2);
 
       cachedStats[targetId] = {
-        angle,
+        angle: angleBetweenLines(seg1, seg2),
+        arc1Angle,
+        arc2Angle,
+        points: {
+          canvas: {
+            arc1Start,
+            arc1End,
+            arc2End,
+            arc2Start,
+          },
+          world: {
+            arc1Start: viewport.canvasToWorld(arc1Start),
+            arc1End: viewport.canvasToWorld(arc1End),
+            arc2End: viewport.canvasToWorld(arc2End),
+            arc2Start: viewport.canvasToWorld(arc2Start),
+          },
+        },
       };
     }
 
@@ -886,6 +1038,177 @@ class CobbAngleTool extends AnnotationTool {
 
     return cachedStats;
   }
+
+  distanceToLines = ({ viewport, points, canvasCoords, proximity }) => {
+    const [point1, point2, point3, point4] = points;
+    const canvasPoint1 = viewport.worldToCanvas(point1);
+    const canvasPoint2 = viewport.worldToCanvas(point2);
+    const canvasPoint3 = viewport.worldToCanvas(point3);
+    const canvasPoint4 = viewport.worldToCanvas(point4);
+
+    const line1 = {
+      start: {
+        x: canvasPoint1[0],
+        y: canvasPoint1[1],
+      },
+      end: {
+        x: canvasPoint2[0],
+        y: canvasPoint2[1],
+      },
+    };
+
+    const line2 = {
+      start: {
+        x: canvasPoint3[0],
+        y: canvasPoint3[1],
+      },
+      end: {
+        x: canvasPoint4[0],
+        y: canvasPoint4[1],
+      },
+    };
+
+    const distanceToPoint = lineSegment.distanceToPoint(
+      [line1.start.x, line1.start.y],
+      [line1.end.x, line1.end.y],
+      [canvasCoords[0], canvasCoords[1]]
+    );
+
+    const distanceToPoint2 = lineSegment.distanceToPoint(
+      [line2.start.x, line2.start.y],
+      [line2.end.x, line2.end.y],
+      [canvasCoords[0], canvasCoords[1]]
+    );
+
+    let isNearFirstLine = false;
+    let isNearSecondLine = false;
+
+    if (distanceToPoint <= proximity) {
+      isNearFirstLine = true;
+    } else if (distanceToPoint2 <= proximity) {
+      isNearSecondLine = true;
+    }
+    return {
+      distanceToPoint,
+      distanceToPoint2,
+      isNearFirstLine,
+      isNearSecondLine,
+    };
+  };
+
+  getArcsStartEndPoints = ({
+    firstLine,
+    secondLine,
+    mid1,
+    mid2,
+  }): {
+    arc1Start: Types.Point2;
+    arc1End: Types.Point2;
+    arc2Start: Types.Point2;
+    arc2End: Types.Point2;
+    arc1Angle: number;
+    arc2Angle: number;
+  } => {
+    const linkLine = [mid1, mid2] as [Types.Point2, Types.Point2];
+
+    const arc1Angle = angleBetweenLines(firstLine, linkLine);
+    const arc2Angle = angleBetweenLines(secondLine, linkLine);
+
+    const arc1Side = arc1Angle > 90 ? 1 : 0;
+    const arc2Side = arc2Angle > 90 ? 0 : 1;
+
+    const midLinkLine = midPoint2(linkLine[0], linkLine[1]);
+
+    const linkLineLength = Math.sqrt(
+      (linkLine[1][0] - linkLine[0][0]) ** 2 +
+        (linkLine[1][1] - linkLine[0][1]) ** 2
+    );
+    const ratio = 0.1; // 10% of the line length
+
+    const midFirstLine = midPoint2(firstLine[0], firstLine[1]);
+    const midSecondLine = midPoint2(secondLine[0], secondLine[1]);
+
+    // For arc1Start
+    const directionVectorStartArc1 = [
+      firstLine[arc1Side][0] - midFirstLine[0],
+      firstLine[arc1Side][1] - midFirstLine[1],
+    ];
+    const magnitudeStartArc1 = Math.sqrt(
+      directionVectorStartArc1[0] ** 2 + directionVectorStartArc1[1] ** 2
+    );
+    const normalizedDirectionStartArc1 = [
+      directionVectorStartArc1[0] / magnitudeStartArc1,
+      directionVectorStartArc1[1] / magnitudeStartArc1,
+    ];
+    const arc1Start = [
+      midFirstLine[0] +
+        normalizedDirectionStartArc1[0] * linkLineLength * ratio,
+      midFirstLine[1] +
+        normalizedDirectionStartArc1[1] * linkLineLength * ratio,
+    ] as Types.Point2;
+
+    // Existing logic for arc1End
+    const directionVectorEndArc1 = [
+      midLinkLine[0] - mid1[0],
+      midLinkLine[1] - mid1[1],
+    ];
+    const magnitudeEndArc1 = Math.sqrt(
+      directionVectorEndArc1[0] ** 2 + directionVectorEndArc1[1] ** 2
+    );
+    const normalizedDirectionEndArc1 = [
+      directionVectorEndArc1[0] / magnitudeEndArc1,
+      directionVectorEndArc1[1] / magnitudeEndArc1,
+    ];
+    const arc1End = [
+      mid1[0] + normalizedDirectionEndArc1[0] * linkLineLength * ratio,
+      mid1[1] + normalizedDirectionEndArc1[1] * linkLineLength * ratio,
+    ] as Types.Point2;
+
+    // Similar logic for arc2Start
+    const directionVectorStartArc2 = [
+      secondLine[arc2Side][0] - midSecondLine[0],
+      secondLine[arc2Side][1] - midSecondLine[1],
+    ];
+    const magnitudeStartArc2 = Math.sqrt(
+      directionVectorStartArc2[0] ** 2 + directionVectorStartArc2[1] ** 2
+    );
+    const normalizedDirectionStartArc2 = [
+      directionVectorStartArc2[0] / magnitudeStartArc2,
+      directionVectorStartArc2[1] / magnitudeStartArc2,
+    ];
+    const arc2Start = [
+      midSecondLine[0] +
+        normalizedDirectionStartArc2[0] * linkLineLength * ratio,
+      midSecondLine[1] +
+        normalizedDirectionStartArc2[1] * linkLineLength * ratio,
+    ] as Types.Point2;
+
+    // Similar logic for arc2End
+    const directionVectorEndArc2 = [
+      midLinkLine[0] - mid2[0],
+      midLinkLine[1] - mid2[1],
+    ];
+    const magnitudeEndArc2 = Math.sqrt(
+      directionVectorEndArc2[0] ** 2 + directionVectorEndArc2[1] ** 2
+    );
+    const normalizedDirectionEndArc2 = [
+      directionVectorEndArc2[0] / magnitudeEndArc2,
+      directionVectorEndArc2[1] / magnitudeEndArc2,
+    ];
+    const arc2End = [
+      mid2[0] + normalizedDirectionEndArc2[0] * linkLineLength * ratio,
+      mid2[1] + normalizedDirectionEndArc2[1] * linkLineLength * ratio,
+    ] as Types.Point2;
+
+    return {
+      arc1Start,
+      arc1End,
+      arc2Start,
+      arc2End,
+      arc1Angle: arc1Angle > 90 ? 180 - arc1Angle : arc1Angle,
+      arc2Angle: arc2Angle > 90 ? 180 - arc2Angle : arc2Angle,
+    };
+  };
 }
 
 function defaultGetTextLines(data, targetId): string[] {