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

package/src/tools/AdvancedMagnifyViewportManager.ts

@@ -0,0 +1,291 @@
+import { vec3 } from 'gl-matrix';
+import {
+  eventTarget,
+  Enums,
+  getRenderingEngine,
+  CONSTANTS,
+} from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+import { AnnotationRemovedEventType } from '../types/EventTypes';
+import { Events as cstEvents } from '../enums';
+import {
+  AdvancedMagnifyViewport,
+  AutoPanCallback,
+} from './AdvancedMagnifyViewport';
+import { AdvancedMagnifyAnnotation } from '../types/ToolSpecificAnnotationTypes';
+
+// Defined the tool name internally instead of importing
+// AdvangedMagnifyTool due to cyclic dependency
+const ADVANCED_MAGNIFY_TOOL_NAME = 'AdvancedMagnify';
+
+const PARALLEL_THRESHOLD = 1 - CONSTANTS.EPSILON;
+const { Events } = Enums;
+
+export type MagnifyViewportInfo = {
+  // Viewport id to be used or new v4 compliant GUID is used instead
+  magnifyViewportId?: string;
+  // Enabled element where the magnifying glass shall be added to
+  sourceEnabledElement: Types.IEnabledElement;
+  // Magnifying glass position (center)
+  position: Types.Point2;
+  // Magnifying glass radius (pixels)
+  radius: number;
+  // Amount of magnification applied to the magnifying glass image compared to the source viewport.
+  zoomFactor: number;
+  // Allow panning the viewport when moving an annotation point close to the border of the magnifying glass
+  autoPan: {
+    // Enable or disable auto pan
+    enabled: boolean;
+    // Minimum distance to the border before start auto panning
+    padding: number;
+    // Callback function responsible for updating the annotation (circle)
+    // that contains the magnifying viewport
+    callback: AutoPanCallback;
+  };
+};
+
+type MagnifyViewportsMapEntry = {
+  annotation: AdvancedMagnifyAnnotation;
+  magnifyViewport: AdvancedMagnifyViewport;
+};
+
+/**
+ * Manager responsible for creating, storing and destroying magnifying glass
+ * viewports. There are no restrictions to create a new instance of it but it
+ * should be accessed through getInstance() method.
+ */
+class AdvancedMagnifyViewportManager {
+  private static _singleton: AdvancedMagnifyViewportManager;
+  private _magnifyViewportsMap: Map<string, MagnifyViewportsMapEntry>;
+
+  constructor() {
+    this._magnifyViewportsMap = new Map();
+    this._initialize();
+  }
+
+  /**
+   * Creates a new magnifying glass viewport manager instance when this method is
+   * called for the first time or return the instance previously created for
+   * any subsequent call (singleton pattern).
+   * @returns A magnifying viewport manager instance
+   */
+  public static getInstance(): AdvancedMagnifyViewportManager {
+    AdvancedMagnifyViewportManager._singleton =
+      AdvancedMagnifyViewportManager._singleton ??
+      new AdvancedMagnifyViewportManager();
+
+    return AdvancedMagnifyViewportManager._singleton;
+  }
+
+  /**
+   * Creates a new magnifying glass viewport instance
+   * @param viewportInfo - Viewport data used when creating a new magnifying glass viewport
+   * @returns A magnifying glass viewport instance
+   */
+  public createViewport = (
+    annotation: AdvancedMagnifyAnnotation,
+    viewportInfo: MagnifyViewportInfo
+  ): AdvancedMagnifyViewport => {
+    const {
+      magnifyViewportId,
+      sourceEnabledElement,
+      position,
+      radius,
+      zoomFactor,
+      autoPan,
+    } = viewportInfo;
+    const { viewport: sourceViewport } = sourceEnabledElement;
+    const { element: sourceElement } = sourceViewport;
+
+    const magnifyViewport = new AdvancedMagnifyViewport({
+      magnifyViewportId,
+      sourceEnabledElement,
+      radius,
+      position,
+      zoomFactor,
+      autoPan,
+    });
+
+    this._addSourceElementEventListener(sourceElement);
+    this._magnifyViewportsMap.set(magnifyViewport.viewportId, {
+      annotation,
+      magnifyViewport,
+    });
+
+    return magnifyViewport;
+  };
+
+  /**
+   * Find and return a magnifying glass viewport based on its id
+   * @param magnifyViewportId - Magnifying glass viewport id
+   * @returns A magnifying glass viewport instance
+   */
+  public getViewport(magnifyViewportId: string): AdvancedMagnifyViewport {
+    return this._magnifyViewportsMap.get(magnifyViewportId)?.magnifyViewport;
+  }
+
+  /**
+   * Release all magnifying glass viewport instances and remove all event
+   * listeners making all objects available to be garbage collected.
+   */
+  public dispose() {
+    this._removeEventListeners();
+    this._destroyViewports();
+  }
+
+  private _destroyViewport(magnifyViewportId: string) {
+    const magnifyViewportMapEntry =
+      this._magnifyViewportsMap.get(magnifyViewportId);
+
+    if (magnifyViewportMapEntry) {
+      const { magnifyViewport } = magnifyViewportMapEntry;
+      const { viewport: sourceViewport } = magnifyViewport.sourceEnabledElement;
+      const { element: sourceElement } = sourceViewport;
+
+      this._removeSourceElementEventListener(sourceElement);
+
+      magnifyViewport.dispose();
+      this._magnifyViewportsMap.delete(magnifyViewportId);
+    }
+  }
+
+  private _destroyViewports() {
+    const magnifyViewportIds = Array.from(this._magnifyViewportsMap.keys());
+
+    magnifyViewportIds.forEach((magnifyViewportId) =>
+      this._destroyViewport(magnifyViewportId)
+    );
+  }
+
+  private _annotationRemovedCallback = (evt: AnnotationRemovedEventType) => {
+    const { annotation } = evt.detail;
+
+    if (annotation.metadata.toolName !== ADVANCED_MAGNIFY_TOOL_NAME) {
+      return;
+    }
+
+    this._destroyViewport(annotation.data.magnifyViewportId);
+  };
+
+  private _getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId) {
+    const magnifyViewportsMapEntries = Array.from(
+      this._magnifyViewportsMap.values()
+    );
+
+    return magnifyViewportsMapEntries.filter(({ magnifyViewport }) => {
+      const { viewport } = magnifyViewport.sourceEnabledElement;
+      return viewport.id === sourceViewportId;
+    });
+  }
+
+  private _newStackImageCallback = (
+    evt: Types.EventTypes.StackNewImageEvent
+  ) => {
+    const { viewportId: sourceViewportId, imageId } = evt.detail;
+    const magnifyViewportsMapEntries =
+      this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+
+    magnifyViewportsMapEntries.forEach(({ annotation }) => {
+      annotation.metadata.referencedImageId = imageId;
+      annotation.invalidated = true;
+    });
+  };
+
+  private _newVolumeImageCallback = (
+    evt: Types.EventTypes.VolumeNewImageEvent
+  ) => {
+    const { renderingEngineId, viewportId: sourceViewportId } = evt.detail;
+    const renderingEngine = getRenderingEngine(renderingEngineId);
+    const sourceViewport = renderingEngine.getViewport(sourceViewportId);
+    const { viewPlaneNormal: currentViewPlaneNormal } =
+      sourceViewport.getCamera();
+
+    const magnifyViewportsMapEntries =
+      this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+
+    magnifyViewportsMapEntries.forEach(({ annotation }) => {
+      const { viewPlaneNormal } = annotation.metadata;
+
+      // Compare the normal to make sure the volume is not rotate in 3D space
+      const isParallel =
+        Math.abs(vec3.dot(viewPlaneNormal, currentViewPlaneNormal)) >
+        PARALLEL_THRESHOLD;
+
+      if (!isParallel) {
+        return;
+      }
+
+      const { handles } = annotation.data;
+      const worldImagePlanePoint = sourceViewport.canvasToWorld([0, 0]);
+      const vecHandleToImagePlane = vec3.sub(
+        vec3.create(),
+        worldImagePlanePoint,
+        handles.points[0]
+      );
+      const worldDist = vec3.dot(vecHandleToImagePlane, currentViewPlaneNormal);
+      const worldDelta = vec3.scale(
+        vec3.create(),
+        currentViewPlaneNormal,
+        worldDist
+      );
+
+      // Move all handle points to the image plane to make the annotation visible
+      for (let i = 0, len = handles.points.length; i < len; i++) {
+        const point = handles.points[i];
+
+        point[0] += worldDelta[0];
+        point[1] += worldDelta[1];
+        point[2] += worldDelta[2];
+      }
+
+      annotation.invalidated = true;
+    });
+  };
+
+  private _addEventListeners() {
+    eventTarget.addEventListener(
+      cstEvents.ANNOTATION_REMOVED,
+      this._annotationRemovedCallback
+    );
+  }
+
+  private _removeEventListeners() {
+    eventTarget.removeEventListener(
+      cstEvents.ANNOTATION_REMOVED,
+      this._annotationRemovedCallback
+    );
+  }
+
+  private _addSourceElementEventListener(element) {
+    element.addEventListener(
+      Events.STACK_NEW_IMAGE,
+      this._newStackImageCallback
+    );
+
+    element.addEventListener(
+      Events.VOLUME_NEW_IMAGE,
+      this._newVolumeImageCallback
+    );
+  }
+
+  private _removeSourceElementEventListener(element) {
+    element.removeEventListener(
+      Events.STACK_NEW_IMAGE,
+      this._newStackImageCallback
+    );
+
+    element.removeEventListener(
+      Events.VOLUME_NEW_IMAGE,
+      this._newVolumeImageCallback
+    );
+  }
+
+  private _initialize() {
+    this._addEventListeners();
+  }
+}
+
+export {
+  AdvancedMagnifyViewportManager as default,
+  AdvancedMagnifyViewportManager,
+};

package/src/tools/MagnifyTool.ts

@@ -113,7 +113,7 @@ class MagnifyTool extends BaseTool {
     } = this.editData;
     const { viewport } = enabledElement;
     const { element } = viewport;
-    const { voiRange } = viewport.getProperties();
+    const viewportProperties = viewport.getProperties();
 
     const { canvas: canvasPos, world: worldPos } = currentPoints;
 
@@ -158,7 +158,7 @@ class MagnifyTool extends BaseTool {
 
     magnifyViewport.setStack([referencedImageId]).then(() => {
       // match the original viewport voi range
-      magnifyViewport.setProperties({ voiRange });
+      magnifyViewport.setProperties(viewportProperties);
 
       // Use the original viewport for the base for parallelScale
       const { parallelScale } = viewport.getCamera();

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;