@cornerstonejs/tools 1.17.1 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.17.1",
+  "version": "1.19.0",
   "description": "Cornerstone3D Tools",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.17.1",
+    "@cornerstonejs/core": "^1.19.0",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "ad1027f35619023f6b549bf254fcf4638eb3abf1"
+  "gitHead": "4caa1d79544a3076d89de80d02fbb9a18c1ad186"
 }

package/src/index.ts

@@ -58,6 +58,7 @@ import {
   ReferenceLines,
   PaintFillTool,
   ScaleOverlayTool,
+  OrientationMarkerTool,
   OverlayGridTool,
 } from './tools';
 
@@ -112,6 +113,7 @@ export {
   RectangleROIThresholdTool,
   RectangleROIStartEndThresholdTool,
   BrushTool,
+  OrientationMarkerTool,
   // Synchronizers
   synchronizers,
   Synchronizer,

package/src/tools/OrientationMarkerTool.ts

@@ -0,0 +1,235 @@
+import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
+import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor';
+import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+
+import { BaseTool } from './base';
+import { getRenderingEngines } from '@cornerstonejs/core';
+import { filterViewportsWithToolEnabled } from '../utilities/viewportFilters';
+
+const OverlayMarkerType = {
+  ANNOTATED_CUBE: 1,
+  AXES: 2,
+  CUSTOM: 3,
+};
+
+/**
+ * The OrientationMarker is a tool that includes an orientation marker in viewports
+ * when activated
+ */
+class OrientationMarkerTool extends BaseTool {
+  static toolName;
+  static CUBE = 1;
+  static AXIS = 2;
+  static VTPFILE = 3;
+  orientationMarkers;
+  polyDataURL;
+
+  static OVERLAY_MARKER_TYPES = OverlayMarkerType;
+
+  configuration_invalidated = true;
+
+  constructor(
+    toolProps = {},
+    defaultToolProps = {
+      configuration: {
+        orientationWidget: {
+          enabled: true,
+          viewportCorner: vtkOrientationMarkerWidget.Corners.BOTTOM_RIGHT,
+          viewportSize: 0.15,
+          minPixelSize: 100,
+          maxPixelSize: 300,
+        },
+        overlayMarkerType:
+          OrientationMarkerTool.OVERLAY_MARKER_TYPES.ANNOTATED_CUBE,
+        overlayConfiguration: {
+          [OrientationMarkerTool.OVERLAY_MARKER_TYPES.ANNOTATED_CUBE]: {
+            faceProperties: {
+              xPlus: { text: 'R', faceColor: '#ffff00', faceRotation: 90 },
+              xMinus: { text: 'L', faceColor: '#ffff00', faceRotation: 270 },
+              yPlus: {
+                text: 'P',
+                faceColor: '#00ffff',
+                fontColor: 'white',
+                faceRotation: 180,
+              },
+              yMinus: { text: 'A', faceColor: '#00ffff', fontColor: 'white' },
+              zPlus: { text: 'S' },
+              zMinus: { text: 'I' },
+            },
+            defaultStyle: {
+              fontStyle: 'bold',
+              fontFamily: 'Arial',
+              fontColor: 'black',
+              fontSizeScale: (res) => res / 2,
+              faceColor: '#0000ff',
+              edgeThickness: 0.1,
+              edgeColor: 'black',
+              resolution: 400,
+            },
+          },
+          [OrientationMarkerTool.OVERLAY_MARKER_TYPES.AXES]: {},
+          [OrientationMarkerTool.OVERLAY_MARKER_TYPES.CUSTOM]: {
+            polyDataURL:
+              'https://raw.githubusercontent.com/Slicer/Slicer/80ad0a04dacf134754459557bf2638c63f3d1d1b/Base/Logic/Resources/OrientationMarkers/Human.vtp',
+          },
+        },
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+    this.orientationMarkers = {};
+    this.configuration_invalidated = true;
+  }
+
+  onSetToolEnabled = (): void => {
+    this.initViewports();
+    this.configuration_invalidated = true;
+  };
+
+  onSetToolActive = (): void => {
+    this.initViewports();
+  };
+
+  private initViewports() {
+    const renderingEngines = getRenderingEngines();
+    const renderingEngine = renderingEngines[0];
+
+    if (!renderingEngine) {
+      return;
+    }
+
+    let viewports = renderingEngine.getViewports();
+    viewports = filterViewportsWithToolEnabled(viewports, this.getToolName());
+    viewports.forEach((viewport) => this.addAxisActorInViewport(viewport));
+  }
+
+  async addAxisActorInViewport(viewport) {
+    const viewportId = viewport.id;
+    const type = this.configuration.overlayMarkerType;
+
+    const overlayConfiguration = this.configuration.overlayConfiguration[type];
+
+    if (this.orientationMarkers[viewportId]) {
+      const { actor, orientationWidget } = this.orientationMarkers[viewportId];
+      // remove the previous one
+      viewport.getRenderer().removeActor(actor);
+      orientationWidget.setEnabled(false);
+    }
+
+    let actor;
+    if (type === 1) {
+      actor = this.createAnnotationCube(overlayConfiguration);
+    } else if (type === 2) {
+      actor = vtkAxesActor.newInstance();
+    } else if (type === 3) {
+      actor = await this.createCustomActor();
+    }
+
+    const renderer = viewport.getRenderer();
+    const renderWindow = viewport
+      .getRenderingEngine()
+      .offscreenMultiRenderWindow.getRenderWindow();
+
+    const {
+      enabled,
+      viewportCorner,
+      viewportSize,
+      minPixelSize,
+      maxPixelSize,
+    } = this.configuration.orientationWidget;
+
+    const orientationWidget = vtkOrientationMarkerWidget.newInstance({
+      actor,
+      interactor: renderWindow.getInteractor(),
+      parentRenderer: renderer,
+    });
+
+    orientationWidget.setEnabled(enabled);
+    orientationWidget.setViewportCorner(viewportCorner);
+    orientationWidget.setViewportSize(viewportSize);
+    orientationWidget.setMinPixelSize(minPixelSize);
+    orientationWidget.setMaxPixelSize(maxPixelSize);
+
+    orientationWidget.updateMarkerOrientation();
+    this.orientationMarkers[viewportId] = {
+      orientationWidget,
+      actor,
+    };
+    renderer.resetCamera();
+    renderWindow.render();
+    viewport.getRenderingEngine().render();
+
+    this.configuration_invalidated = false;
+  }
+
+  private async createCustomActor() {
+    const url =
+      this.configuration.overlayConfiguration[OverlayMarkerType.CUSTOM]
+        .polyDataURL;
+
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+    const vtpReader = vtkXMLPolyDataReader.newInstance();
+    vtpReader.parseAsArrayBuffer(arrayBuffer);
+    vtpReader.update();
+
+    const polyData = vtkPolyData.newInstance();
+    polyData.shallowCopy(vtpReader.getOutputData());
+    polyData.getPointData().setActiveScalars('Color');
+    const mapper = vtkMapper.newInstance();
+    mapper.setInputData(polyData);
+    mapper.setColorModeToDirectScalars();
+
+    const actor = vtkActor.newInstance();
+    actor.setMapper(mapper);
+    actor.rotateZ(180);
+    return actor;
+  }
+
+  private createAnnotationCube(overlayConfiguration: any) {
+    const actor = vtkAnnotatedCubeActor.newInstance();
+    actor.setDefaultStyle({ ...overlayConfiguration.defaultStyle });
+    actor.setXPlusFaceProperty({
+      ...overlayConfiguration.faceProperties.xPlus,
+    });
+    actor.setXMinusFaceProperty({
+      ...overlayConfiguration.faceProperties.xMinus,
+    });
+    actor.setYPlusFaceProperty({
+      ...overlayConfiguration.faceProperties.yPlus,
+    });
+    actor.setYMinusFaceProperty({
+      ...overlayConfiguration.faceProperties.yMinus,
+    });
+    actor.setZPlusFaceProperty({
+      ...overlayConfiguration.faceProperties.zPlus,
+    });
+    actor.setZMinusFaceProperty({
+      ...overlayConfiguration.faceProperties.zMinus,
+    });
+    return actor;
+  }
+
+  async createAnnotatedCubeActor() {
+    const axes = vtkAnnotatedCubeActor.newInstance();
+    const { faceProperties, defaultStyle } = this.configuration.annotatedCube;
+
+    axes.setDefaultStyle(defaultStyle);
+
+    Object.keys(faceProperties).forEach((key) => {
+      const methodName = `set${
+        key.charAt(0).toUpperCase() + key.slice(1)
+      }FaceProperty`;
+      axes[methodName](faceProperties[key]);
+    });
+
+    return axes;
+  }
+}
+
+OrientationMarkerTool.toolName = 'OrientationMarker';
+export default OrientationMarkerTool;

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/base/AnnotationDisplayTool.ts

@@ -102,6 +102,10 @@ abstract class AnnotationDisplayTool extends BaseTool {
 
       // for this specific tool
       toolSpecificAnnotations.forEach((annotation) => {
+        if (!annotation.metadata?.referencedImageId) {
+          return;
+        }
+
         // if the annotation is drawn on the same imageId
         const referencedImageURI = utilities.imageIdToURI(
           annotation.metadata.referencedImageId

package/src/tools/index.ts

@@ -39,6 +39,7 @@ import RectangleROIThresholdTool from './segmentation/RectangleROIThresholdTool'
 import RectangleROIStartEndThresholdTool from './segmentation/RectangleROIStartEndThresholdTool';
 import BrushTool from './segmentation/BrushTool';
 import PaintFillTool from './segmentation/PaintFillTool';
+import OrientationMarkerTool from './OrientationMarkerTool';
 
 export {
   // ~~ BASE
@@ -84,4 +85,5 @@ export {
   ReferenceLines,
   PaintFillTool,
   ScaleOverlayTool,
+  OrientationMarkerTool,
 };