@cornerstonejs/tools 2.0.0-beta.1 → 2.0.0-beta.3

package/src/tools/ReferenceLinesTool.ts

@@ -11,7 +11,6 @@ import { addAnnotation } from '../stateManagement/annotation/annotationState';
 import { drawLine as drawLineSvg } from '../drawingSvg';
 import { filterViewportsWithToolEnabled } from '../utilities/viewportFilters';
 import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
-
 import { PublicToolProps, ToolProps, SVGDrawingHelper } from '../types';
 import { ReferenceLineAnnotation } from '../types/ToolSpecificAnnotationTypes';
 import { StyleSpecifier } from '../types/AnnotationStyle';
@@ -43,6 +42,7 @@ class ReferenceLines extends AnnotationDisplayTool {
       supportedInteractionTypes: ['Mouse', 'Touch'],
       configuration: {
         sourceViewportId: '',
+        showFullDimension: false,
       },
     }
   ) {
@@ -177,7 +177,7 @@ class ReferenceLines extends AnnotationDisplayTool {
     const bottomLeft = annotation.data.handles.points[2];
     const bottomRight = annotation.data.handles.points[3];
 
-    const { focalPoint, viewPlaneNormal } = targetViewport.getCamera();
+    const { focalPoint, viewPlaneNormal, viewUp } = targetViewport.getCamera();
     const { viewPlaneNormal: sourceViewPlaneNormal } =
       sourceViewport.getCamera();
 
@@ -239,10 +239,21 @@ class ReferenceLines extends AnnotationDisplayTool {
     const color = this.getStyle('color', styleSpecifier, annotation);
     const shadow = this.getStyle('shadow', styleSpecifier, annotation);
 
-    const canvasCoordinates = [lineStartWorld, lineEndWorld].map((world) =>
+    let canvasCoordinates = [lineStartWorld, lineEndWorld].map((world) =>
       targetViewport.worldToCanvas(world)
     );
 
+    if (this.configuration.showFullDimension) {
+      canvasCoordinates = this.handleFullDimension(
+        targetViewport,
+        lineStartWorld,
+        viewPlaneNormal,
+        viewUp,
+        lineEndWorld,
+        canvasCoordinates
+      );
+    }
+
     const dataId = `${annotationUID}-line`;
     const lineUID = '1';
     drawLineSvg(
@@ -270,9 +281,126 @@ class ReferenceLines extends AnnotationDisplayTool {
     return Math.abs(dot) < EPSILON;
   };
 
+  private handleFullDimension(
+    targetViewport: Types.IStackViewport | Types.IVolumeViewport,
+    lineStartWorld: Types.Point3,
+    viewPlaneNormal: Types.Point3,
+    viewUp: Types.Point3,
+    lineEndWorld: Types.Point3,
+    canvasCoordinates: Types.Point2[]
+  ) {
+    const renderingEngine = targetViewport.getRenderingEngine();
+    const targetId = this.getTargetId(targetViewport);
+    const targetImage = this.getTargetIdImage(targetId, renderingEngine);
+
+    const referencedImageId = this.getReferencedImageId(
+      targetViewport,
+      lineStartWorld,
+      viewPlaneNormal,
+      viewUp
+    );
+
+    if (referencedImageId && targetImage) {
+      try {
+        const { imageData, dimensions } = targetImage;
+
+        // Calculate bound image coordinates
+        const [
+          topLeftImageCoord,
+          topRightImageCoord,
+          bottomRightImageCoord,
+          bottomLeftImageCoord,
+        ] = [
+          imageData.indexToWorld([0, 0, 0]) as Types.Point3,
+          imageData.indexToWorld([dimensions[0] - 1, 0, 0]) as Types.Point3,
+          imageData.indexToWorld([
+            dimensions[0] - 1,
+            dimensions[1] - 1,
+            0,
+          ]) as Types.Point3,
+          imageData.indexToWorld([0, dimensions[1] - 1, 0]) as Types.Point3,
+        ].map((world) => csUtils.worldToImageCoords(referencedImageId, world));
+
+        // Calculate line start and end image coordinates
+        const [lineStartImageCoord, lineEndImageCoord] = [
+          lineStartWorld,
+          lineEndWorld,
+        ].map((world) => csUtils.worldToImageCoords(referencedImageId, world));
+
+        // Calculate intersection points between line and image bounds
+        canvasCoordinates = [
+          [topLeftImageCoord, topRightImageCoord],
+          [topRightImageCoord, bottomRightImageCoord],
+          [bottomLeftImageCoord, bottomRightImageCoord],
+          [topLeftImageCoord, bottomLeftImageCoord],
+        ]
+          .map(([start, end]) =>
+            this.intersectInfiniteLines(
+              start,
+              end,
+              lineStartImageCoord,
+              lineEndImageCoord
+            )
+          )
+          .filter((point) => point && this.isInBound(point, dimensions))
+          .map((point) => {
+            const world = csUtils.imageToWorldCoords(
+              referencedImageId,
+              point as Types.Point2
+            );
+            return targetViewport.worldToCanvas(world);
+          });
+      } catch (err) {
+        console.log(err);
+      }
+    }
+    return canvasCoordinates;
+  }
+
+  // get the intersection point between two infinite lines, not line segments
+  intersectInfiniteLines(
+    line1Start: Types.Point2,
+    line1End: Types.Point2,
+    line2Start: Types.Point2,
+    line2End: Types.Point2
+  ) {
+    const [x1, y1] = line1Start;
+    const [x2, y2] = line1End;
+    const [x3, y3] = line2Start;
+    const [x4, y4] = line2End;
+
+    // Compute a1, b1, c1, where line joining points 1 and 2 is "a1 x  +  b1 y  +  c1  =  0"
+    const a1 = y2 - y1;
+    const b1 = x1 - x2;
+    const c1 = x2 * y1 - x1 * y2;
+
+    // Compute a2, b2, c2
+    const a2 = y4 - y3;
+    const b2 = x3 - x4;
+    const c2 = x4 * y3 - x3 * y4;
+
+    if (Math.abs(a1 * b2 - a2 * b1) < EPSILON) {
+      return;
+    }
+
+    const x = (b1 * c2 - b2 * c1) / (a1 * b2 - a2 * b1);
+    const y = (a2 * c1 - a1 * c2) / (a1 * b2 - a2 * b1);
+
+    return [x, y];
+  }
+
   isParallel(vec1: Types.Point3, vec2: Types.Point3): boolean {
     return Math.abs(vec3.dot(vec1, vec2)) > 1 - EPSILON;
   }
+
+  isInBound(point: number[], dimensions: Types.Point3): boolean {
+    return (
+      point[0] >= 0 &&
+      point[0] <= dimensions[0] &&
+      point[1] >= 0 &&
+      point[1] <= dimensions[1]
+    );
+  }
 }
 
 ReferenceLines.toolName = 'ReferenceLines';

package/src/tools/ScaleOverlayTool.ts

@@ -72,7 +72,9 @@ class ScaleOverlayTool extends AnnotationDisplayTool {
     // get viewports with tool enabled
     const viewportIds = getToolGroup(this.toolGroupId).viewportsInfo;
 
-    if (!viewportIds) return;
+    if (!viewportIds) {
+      return;
+    }
 
     // get enabled elements
     const enabledElements = viewportIds.map((e) =>

package/src/tools/annotation/AngleTool.ts

@@ -74,6 +74,7 @@ class AngleTool extends AnnotationTool {
       configuration: {
         shadow: true,
         preventHandleOutsideImage: false,
+        getTextLines: defaultGetTextLines,
       },
     }
   ) {
@@ -219,8 +220,12 @@ class AngleTool extends AnnotationTool {
       [canvasCoords[0], canvasCoords[1]]
     );
 
-    if (distanceToPoint <= proximity) return true;
-    if (!point3) return false;
+    if (distanceToPoint <= proximity) {
+      return true;
+    }
+    if (!point3) {
+      return false;
+    }
 
     const canvasPoint3 = viewport.worldToCanvas(point3);
 
@@ -653,7 +658,10 @@ class AngleTool 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,
         };
@@ -740,7 +748,22 @@ class AngleTool extends AnnotationTool {
         continue;
       }
 
-      const textLines = this._getTextLines(data, targetId);
+      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 (!data.handles.textBox.hasMoved) {
         // linked to the vertex by default
@@ -763,7 +786,7 @@ class AngleTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;
@@ -779,20 +802,6 @@ class AngleTool extends AnnotationTool {
     return renderStatus;
   };
 
-  // text line for the current active angle annotation
-  _getTextLines(data, targetId) {
-    const cachedVolumeStats = data.cachedStats[targetId];
-    const { angle } = cachedVolumeStats;
-
-    if (angle === undefined) {
-      return;
-    }
-
-    const textLines = [`${roundNumber(angle)} ${String.fromCharCode(176)}`];
-
-    return textLines;
-  }
-
   _calculateCachedStats(annotation, renderingEngine, enabledElement) {
     const data = annotation.data;
     const { viewportId, renderingEngineId } = enabledElement;
@@ -817,7 +826,7 @@ class AngleTool extends AnnotationTool {
       );
 
       cachedStats[targetId] = {
-        angle,
+        angle: isNaN(angle) ? 'Incomplete Angle' : angle,
       };
     }
 
@@ -837,5 +846,18 @@ class AngleTool extends AnnotationTool {
   }
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const cachedVolumeStats = data.cachedStats[targetId];
+  const { angle } = cachedVolumeStats;
+
+  if (angle === undefined) {
+    return;
+  }
+
+  const textLines = [`${roundNumber(angle)} ${String.fromCharCode(176)}`];
+
+  return textLines;
+}
+
 AngleTool.toolName = 'Angle';
 export default AngleTool;

package/src/tools/annotation/ArrowAnnotateTool.ts

@@ -776,6 +776,21 @@ class ArrowAnnotateTool extends AnnotationTool {
         continue;
       }
 
+      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;
+      }
+
       // Need to update to sync w/ annotation while unlinked/not moved
       if (!data.handles.textBox.hasMoved) {
         // linked to the point that doesn't have the arrowhead by default
@@ -798,7 +813,7 @@ class ArrowAnnotateTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;

package/src/tools/annotation/BidirectionalTool.ts

@@ -91,6 +91,7 @@ const { transformWorldToIndex } = csUtils;
  *
  * Read more in the Docs section of the website.
  */
+
 class BidirectionalTool extends AnnotationTool {
   static toolName;
 
@@ -115,6 +116,7 @@ class BidirectionalTool extends AnnotationTool {
       supportedInteractionTypes: ['Mouse', 'Touch'],
       configuration: {
         preventHandleOutsideImage: false,
+        getTextLines: defaultGetTextLines,
       },
     }
   ) {
@@ -1071,7 +1073,7 @@ class BidirectionalTool extends AnnotationTool {
       // force to recalculate the stats from the points
       if (
         !data.cachedStats[targetId] ||
-        data.cachedStats[targetId].unit === undefined
+        data.cachedStats[targetId].unit == null
       ) {
         data.cachedStats[targetId] = {
           length: null,
@@ -1160,11 +1162,26 @@ class BidirectionalTool extends AnnotationTool {
 
       renderStatus = true;
 
-      const textLines = this._getTextLines(data, targetId);
+      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) {
@@ -1187,7 +1204,7 @@ class BidirectionalTool extends AnnotationTool {
         textBoxPosition,
         canvasCoordinates,
         {},
-        this.getLinkedTextBoxStyle(styleSpecifier, annotation)
+        options
       );
 
       const { x: left, y: top, width, height } = boundingBox;
@@ -1243,27 +1260,6 @@ class BidirectionalTool extends AnnotationTool {
     return wouldPutThroughShortAxis;
   };
 
-  /**
-   * get text box content
-   */
-  _getTextLines = (data, targetId) => {
-    const { cachedStats } = data;
-    const { length, width, unit } = cachedStats[targetId];
-
-    if (length === undefined) {
-      return;
-    }
-
-    // spaceBetweenSlices & pixelSpacing &
-    // magnitude in each direction? Otherwise, this is "px"?
-    const textLines = [
-      `L: ${roundNumber(length)} ${unit}`,
-      `W: ${roundNumber(width)} ${unit}`,
-    ];
-
-    return textLines;
-  };
-
   _calculateLength(pos1, pos2) {
     const dx = pos1[0] - pos2[0];
     const dy = pos1[1] - pos2[1];
@@ -1351,5 +1347,23 @@ class BidirectionalTool extends AnnotationTool {
   };
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const { cachedStats } = data;
+  const { length, width, unit } = cachedStats[targetId];
+
+  if (length === undefined) {
+    return;
+  }
+
+  // spaceBetweenSlices & pixelSpacing &
+  // magnitude in each direction? Otherwise, this is "px"?
+  const textLines = [
+    `L: ${roundNumber(length)} ${unit}`,
+    `W: ${roundNumber(width)} ${unit}`,
+  ];
+
+  return textLines;
+}
+
 BidirectionalTool.toolName = 'Bidirectional';
 export default BidirectionalTool;