@cornerstonejs/tools 2.0.0-beta.5 → 2.0.0-beta.7

package/src/tools/CrosshairsTool.ts

@@ -54,27 +54,6 @@ import { CONSTANTS } from '@cornerstonejs/core';
 
 const { RENDERING_DEFAULTS } = CONSTANTS;
 
-// TODO: nested config is weird
-interface ToolConfiguration {
-  configuration?: {
-    getReferenceLineColor?: (viewportId: string) => string;
-    getReferenceLineControllable?: (viewportId: string) => boolean;
-    getReferenceLineDraggableRotatable?: (viewportId: string) => boolean;
-    getReferenceLineSlabThicknessControlsOn?: (viewportId: string) => boolean;
-    referenceLinesCenterGapRadius?: number;
-    shadow?: boolean;
-    autopan?: {
-      enabled: boolean;
-      panSize: number;
-    };
-    mobile?: {
-      enabled: boolean;
-      opacity: number;
-      handleRadius: number;
-    };
-  };
-}
-
 interface CrosshairsAnnotation extends Annotation {
   data: {
     handles: {
@@ -142,7 +121,13 @@ class CrosshairsTool extends AnnotationTool {
         shadow: true,
         // renders a colored circle on top right of the viewports whose color
         // matches the color of the reference line
-        viewportIndicators: true,
+        viewportIndicators: false,
+
+        viewportIndicatorsConfig: {
+          radius: 5,
+          x: null,
+          y: null,
+        },
         // Auto pan is a configuration which will update pan
         // other viewports in the toolGroup if the center of the crosshairs
         // is outside of the viewport. This might be useful for the case
@@ -311,6 +296,42 @@ class CrosshairsTool extends AnnotationTool {
     });
   }
 
+  resetCrosshairs = () => {
+    const viewportsInfo = this._getViewportsInfo();
+    viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+      const enabledElement = getEnabledElementByIds(
+        viewportId,
+        renderingEngineId
+      );
+      const { viewport } = enabledElement;
+      const resetPan = true;
+      const resetZoom = true;
+      const resetToCenter = true;
+      const resetRotation = true;
+      const supressEvents = true;
+      viewport.resetCamera(
+        resetPan,
+        resetZoom,
+        resetToCenter,
+        resetRotation,
+        supressEvents
+      );
+      (viewport as Types.IVolumeViewport).resetSlabThickness();
+      const { element } = viewport;
+      let annotations = this._getAnnotations(enabledElement);
+      annotations = this.filterInteractableAnnotationsForElement(
+        element,
+        annotations
+      );
+      if (annotations.length) {
+        removeAnnotation(annotations[0].annotationUID);
+      }
+      viewport.render();
+    });
+
+    this.computeToolCenter(viewportsInfo);
+  };
+
   /**
    * When activated, it initializes the crosshairs. It begins by computing
    * the intersection of viewports associated with the crosshairs instance.
@@ -322,9 +343,10 @@ class CrosshairsTool extends AnnotationTool {
    */
   computeToolCenter = (viewportsInfo): void => {
     if (!viewportsInfo.length || viewportsInfo.length === 1) {
-      throw new Error(
+      console.warn(
         'For crosshairs to operate, at least two viewports must be given.'
       );
+      return;
     }
 
     // Todo: handle two same view viewport, or more than 3 viewports
@@ -661,6 +683,10 @@ class CrosshairsTool extends AnnotationTool {
     triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
   };
 
+  onResetCamera = (evt) => {
+    this.resetCrosshairs();
+  };
+
   mouseMoveCallback = (
     evt: EventTypes.MouseMoveEventType,
     filteredToolAnnotations: Annotations
@@ -1407,21 +1433,26 @@ class CrosshairsTool extends AnnotationTool {
     data.handles.rotationPoints = newRtpoints;
     data.handles.slabThicknessPoints = newStpoints;
 
+    debugger;
     if (this.configuration.viewportIndicators) {
-      // render a circle to pin point the viewport color
-      // TODO: This should not be part of the tool, and definitely not part of the renderAnnotation loop
+      const { viewportIndicatorsConfig } = this.configuration;
+
+      const xOffset = viewportIndicatorsConfig?.xOffset || 0.95;
+      const yOffset = viewportIndicatorsConfig?.yOffset || 0.05;
       const referenceColorCoordinates = [
-        clientWidth * 0.95,
-        clientHeight * 0.05,
-      ] as Types.Point2;
-      const circleRadius = canvasDiagonalLength * 0.01;
+        clientWidth * xOffset,
+        clientHeight * yOffset,
+      ];
+
+      const circleRadius =
+        viewportIndicatorsConfig?.circleRadius || canvasDiagonalLength * 0.01;
 
       const circleUID = '0';
       drawCircleSvg(
         svgDrawingHelper,
         annotationUID,
         circleUID,
-        referenceColorCoordinates,
+        referenceColorCoordinates as Types.Point2,
         circleRadius,
         { color, fill: color }
       );
@@ -1432,7 +1463,19 @@ class CrosshairsTool extends AnnotationTool {
 
   _getAnnotations = (enabledElement: Types.IEnabledElement) => {
     const { viewport } = enabledElement;
-    return getAnnotations(this.getToolName(), viewport.element);
+    const annotations =
+      getAnnotations(this.getToolName(), viewport.element) || [];
+    const viewportIds = this._getViewportsInfo().map(
+      ({ viewportId }) => viewportId
+    );
+
+    // filter the annotations to only keep that are for this toolGroup
+    const toolGroupAnnotations = annotations.filter((annotation) => {
+      const { data } = annotation;
+      return viewportIds.includes(data.viewportId);
+    });
+
+    return toolGroupAnnotations;
   };
 
   _onNewVolume = (e: any) => {

package/src/tools/MIPJumpToClickTool.ts

@@ -1,6 +1,6 @@
 import { BaseTool } from './base';
 import { getEnabledElement, VolumeViewport } from '@cornerstonejs/core';
-import type { Types } from '@cornerstonejs/core';
+import { type Types, utilities } from '@cornerstonejs/core';
 import { getPointInLineOfSightWithCriteria } from '../utilities/planar';
 import jumpToWorld from '../utilities/viewport/jumpToWorld';
 import { PublicToolProps, ToolProps } from '../types';
@@ -54,7 +54,7 @@ class MIPJumpToClickTool extends BaseTool {
       );
     }
 
-    const volumeId = targetId.split('volumeId:')[1];
+    const volumeId = utilities.getVolumeId(targetId);
 
     // 3. Criteria function to search for the point (maximum intensity)
     let maxIntensity = -Infinity;

package/src/tools/MagnifyTool.ts

@@ -42,6 +42,8 @@ class MagnifyTool extends BaseTool {
     super(toolProps, defaultToolProps);
   }
 
+  private _hasBeenRemoved = false;
+
   _getReferencedImageId(
     viewport: Types.IStackViewport | Types.IVolumeViewport
   ): string {
@@ -155,8 +157,10 @@ class MagnifyTool extends BaseTool {
     const magnifyViewport = renderingEngine.getViewport(
       MAGNIFY_VIEWPORT_ID
     ) as Types.IStackViewport;
-
     magnifyViewport.setStack([referencedImageId]).then(() => {
+      if (this._hasBeenRemoved) {
+        return;
+      }
       // match the original viewport voi range
       magnifyViewport.setProperties(viewportProperties);
 
@@ -261,10 +265,12 @@ class MagnifyTool extends BaseTool {
 
     this._deactivateDraw(element);
     resetElementCursor(element);
+    this._hasBeenRemoved = true;
   };
 
   _activateDraw = (element: HTMLDivElement) => {
     state.isInteractingWithTool = true;
+    this._hasBeenRemoved = false;
 
     element.addEventListener(
       Events.MOUSE_UP,

package/src/tools/OrientationMarkerTool.ts

@@ -7,8 +7,15 @@ 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 {
+  Enums,
+  eventTarget,
+  getEnabledElementByIds,
+  getRenderingEngines,
+} from '@cornerstonejs/core';
 import { filterViewportsWithToolEnabled } from '../utilities/viewportFilters';
+import { getToolGroup } from '../store/ToolGroupManager';
+import { Events } from '../enums';
 
 const OverlayMarkerType = {
   ANNOTATED_CUBE: 1,
@@ -27,11 +34,10 @@ class OrientationMarkerTool extends BaseTool {
   static VTPFILE = 3;
   orientationMarkers;
   polyDataURL;
+  _resizeObservers = new Map();
 
   static OVERLAY_MARKER_TYPES = OverlayMarkerType;
 
-  configuration_invalidated = true;
-
   constructor(
     toolProps = {},
     defaultToolProps = {
@@ -82,18 +88,145 @@ class OrientationMarkerTool extends BaseTool {
   ) {
     super(toolProps, defaultToolProps);
     this.orientationMarkers = {};
-    this.configuration_invalidated = true;
   }
 
   onSetToolEnabled = (): void => {
     this.initViewports();
-    this.configuration_invalidated = true;
+    this._subscribeToViewportEvents();
   };
 
   onSetToolActive = (): void => {
     this.initViewports();
+
+    this._subscribeToViewportEvents();
+  };
+
+  onSetToolDisabled = (): void => {
+    this.cleanUpData();
+    this._unsubscribeToViewportNewVolumeSet();
   };
 
+  _getViewportsInfo = () => {
+    const viewports = getToolGroup(this.toolGroupId).viewportsInfo;
+
+    return viewports;
+  };
+
+  resize = (viewportId) => {
+    const orientationMarker = this.orientationMarkers[viewportId];
+    if (!orientationMarker) {
+      return;
+    }
+
+    const { orientationWidget } = orientationMarker;
+    orientationWidget.updateViewport();
+  };
+
+  _unsubscribeToViewportNewVolumeSet() {
+    const unsubscribe = () => {
+      const viewportsInfo = this._getViewportsInfo();
+      viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+        const { viewport } = getEnabledElementByIds(
+          viewportId,
+          renderingEngineId
+        );
+        const { element } = viewport;
+
+        element.removeEventListener(
+          Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+          this.initViewports.bind(this)
+        );
+
+        const resizeObserver = this._resizeObservers.get(viewportId);
+        resizeObserver.unobserve(element);
+      });
+    };
+
+    eventTarget.removeEventListener(Events.TOOLGROUP_VIEWPORT_ADDED, (evt) => {
+      if (evt.detail.toolGroupId !== this.toolGroupId) {
+        return;
+      }
+      unsubscribe();
+      this.initViewports();
+    });
+  }
+
+  _subscribeToViewportEvents() {
+    const subscribeToElementResize = () => {
+      const viewportsInfo = this._getViewportsInfo();
+      viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+        const { viewport } = getEnabledElementByIds(
+          viewportId,
+          renderingEngineId
+        );
+        const { element } = viewport;
+        this.initViewports();
+
+        element.addEventListener(
+          Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+          this.initViewports.bind(this)
+        );
+
+        const resizeObserver = new ResizeObserver(() => {
+          // Todo: i wish there was a better way to do this
+          setTimeout(() => {
+            const element = getEnabledElementByIds(
+              viewportId,
+              renderingEngineId
+            );
+            if (!element) {
+              return;
+            }
+            const { viewport } = element;
+            this.resize(viewportId);
+            viewport.render();
+          }, 100);
+        });
+
+        resizeObserver.observe(element);
+
+        this._resizeObservers.set(viewportId, resizeObserver);
+      });
+    };
+
+    subscribeToElementResize();
+
+    eventTarget.addEventListener(Events.TOOLGROUP_VIEWPORT_ADDED, (evt) => {
+      if (evt.detail.toolGroupId !== this.toolGroupId) {
+        return;
+      }
+
+      subscribeToElementResize();
+      this.initViewports();
+    });
+  }
+
+  private cleanUpData() {
+    const renderingEngines = getRenderingEngines();
+    const renderingEngine = renderingEngines[0];
+    const viewports = renderingEngine.getViewports();
+
+    viewports.forEach((viewport) => {
+      const orientationMarker = this.orientationMarkers[viewport.id];
+      if (!orientationMarker) {
+        return;
+      }
+
+      const { actor, orientationWidget } = orientationMarker;
+      orientationWidget?.setEnabled(false);
+      orientationWidget?.delete();
+      actor?.delete();
+
+      const renderWindow = viewport
+        .getRenderingEngine()
+        .offscreenMultiRenderWindow.getRenderWindow();
+      renderWindow.render();
+      viewport.getRenderingEngine().render();
+
+      delete this.orientationMarkers[viewport.id];
+    });
+  }
+
   private initViewports() {
     const renderingEngines = getRenderingEngines();
     const renderingEngine = renderingEngines[0];
@@ -104,7 +237,12 @@ class OrientationMarkerTool extends BaseTool {
 
     let viewports = renderingEngine.getViewports();
     viewports = filterViewportsWithToolEnabled(viewports, this.getToolName());
-    viewports.forEach((viewport) => this.addAxisActorInViewport(viewport));
+
+    viewports.forEach((viewport) => {
+      if (!viewport.getWidget(this.getToolName())) {
+        this.addAxisActorInViewport(viewport);
+      }
+    });
   }
 
   async addAxisActorInViewport(viewport) {
@@ -159,11 +297,9 @@ class OrientationMarkerTool extends BaseTool {
       orientationWidget,
       actor,
     };
-    renderer.resetCamera();
+    viewport.addWidget(this.getToolName(), orientationWidget);
     renderWindow.render();
     viewport.getRenderingEngine().render();
-
-    this.configuration_invalidated = false;
   }
 
   private async createCustomActor() {

package/src/tools/ReferenceLinesTool.ts

@@ -4,7 +4,7 @@ import {
   CONSTANTS,
   utilities as csUtils,
 } from '@cornerstonejs/core';
-import type { Types } from '@cornerstonejs/core';
+import { type Types, getEnabledElementByViewportId } from '@cornerstonejs/core';
 
 import { addAnnotation } from '../stateManagement/annotation/annotationState';
 
@@ -21,7 +21,6 @@ const { EPSILON } = CONSTANTS;
 /**
  * @public
  */
-
 class ReferenceLines extends AnnotationDisplayTool {
   static toolName;
 
@@ -30,7 +29,7 @@ class ReferenceLines extends AnnotationDisplayTool {
   _throttledCalculateCachedStats: any;
   editData: {
     renderingEngine: any;
-    sourceViewport: any;
+    sourceViewportId: string;
     annotation: ReferenceLineAnnotation;
   } | null = {} as any;
   isDrawing: boolean;
@@ -71,7 +70,7 @@ class ReferenceLines extends AnnotationDisplayTool {
       this.configuration.sourceViewportId
     ) as Types.IVolumeViewport;
 
-    if (!sourceViewport || !sourceViewport.getImageData()) {
+    if (!sourceViewport?.getImageData()) {
       return;
     }
 
@@ -110,7 +109,7 @@ class ReferenceLines extends AnnotationDisplayTool {
     }
 
     this.editData = {
-      sourceViewport,
+      sourceViewportId: sourceViewport.id,
       renderingEngine,
       annotation,
     };
@@ -127,6 +126,10 @@ class ReferenceLines extends AnnotationDisplayTool {
     this._init();
   };
 
+  onSetToolConfiguration = (): void => {
+    this._init();
+  };
+
   onCameraModified = (evt: Types.EventTypes.CameraModifiedEvent): void => {
     // If the camera is modified, we need to update the reference lines
     // we really don't care which viewport triggered the
@@ -148,10 +151,15 @@ class ReferenceLines extends AnnotationDisplayTool {
     svgDrawingHelper: SVGDrawingHelper
   ): boolean => {
     const { viewport: targetViewport } = enabledElement;
-    const { annotation, sourceViewport } = this.editData;
+    const { annotation, sourceViewportId } = this.editData;
 
     let renderStatus = false;
 
+    // we need to grab the viewport again since there might have been
+    // a change in the viewport state since the last time we cached it
+    const { viewport: sourceViewport } =
+      getEnabledElementByViewportId(sourceViewportId) || {};
+
     if (!sourceViewport) {
       return renderStatus;
     }
@@ -254,6 +262,10 @@ class ReferenceLines extends AnnotationDisplayTool {
       );
     }
 
+    if (canvasCoordinates.length < 2) {
+      return renderStatus;
+    }
+
     const dataId = `${annotationUID}-line`;
     const lineUID = '1';
     drawLineSvg(

package/src/tools/ScaleOverlayTool.ts

@@ -139,7 +139,10 @@ class ScaleOverlayTool extends AnnotationDisplayTool {
 
       addAnnotation(newAnnotation, viewport.element);
       annotation = newAnnotation;
-    } else if (this.editData.annotation.data.viewportId == viewport.id) {
+    } else if (
+      this.editData.annotation &&
+      this.editData.annotation.data.viewportId == viewport.id
+    ) {
       this.editData.annotation.data.handles.points =
         viewportCanvasCornersInWorld;
       this.editData.annotation.data.viewportId = viewport.id;
@@ -201,8 +204,8 @@ class ScaleOverlayTool extends AnnotationDisplayTool {
     };
 
     const canvasSize = {
-      width: canvas.width,
-      height: canvas.height,
+      width: canvas.width / window.devicePixelRatio || 1,
+      height: canvas.height / window.devicePixelRatio || 1,
     };
 
     const topLeft = annotation.data.handles.points[0];