@cornerstonejs/tools 0.56.2 → 0.56.4

package/src/tools/MIPJumpToClickTool.ts

@@ -0,0 +1,99 @@
+import { BaseTool } from './base';
+import { getEnabledElement, VolumeViewport } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+import { getPointInLineOfSightWithCriteria } from '../utilities/planar';
+import jumpToWorld from '../utilities/viewport/jumpToWorld';
+import { PublicToolProps, ToolProps } from '../types';
+
+/**
+ * On a Maximum Intensity Projection (MIP) viewport, MIPJumpToClickTool allows the
+ * user to click on a point in the MIP and the targetViewportIdS (provided in the
+ * tool configuration) will be scrolled (jumped) to the location of the point with
+ * the highest intensity value in the MIP.
+ */
+class MIPJumpToClickTool extends BaseTool {
+  static toolName;
+
+  _bounds: any;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        targetViewportIds: [],
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  /**
+   * Handles the click event, and move the camera's focal point the brightest
+   * point that is in the line of sight of camera. This function 1) search for the
+   * brightest point in the line of sight, 2) move the camera to that point,
+   * this triggers a cameraModified event which then 4) moves all other synced
+   * viewports and their crosshairs.
+   *
+   * @param evt - click event
+   */
+  mouseClickCallback(evt): void {
+    const { element, currentPoints } = evt.detail;
+
+    // 1. Getting the enabled element
+    const enabledElement = getEnabledElement(element);
+    const { viewport, renderingEngine } = enabledElement;
+
+    // 2. Getting the target volume that is clicked on
+    const targetId = this.getTargetId(viewport as Types.IVolumeViewport);
+
+    if (!targetId.startsWith('volumeId')) {
+      throw new Error(
+        `MIPJumpToClickTool: targetId is not a volumeId, you should only use MIPJumpToClickTool with a volumeId as the targetId`
+      );
+    }
+
+    const volumeId = targetId.split('volumeId:')[1];
+
+    // 3. Criteria function to search for the point (maximum intensity)
+    let maxIntensity = -Infinity;
+    const maxFn = (intensity, point) => {
+      if (intensity > maxIntensity) {
+        maxIntensity = intensity;
+        return point;
+      }
+    };
+
+    // 4. Search for the brightest point location in the line of sight
+    const brightestPoint = getPointInLineOfSightWithCriteria(
+      viewport as Types.IVolumeViewport,
+      currentPoints.world,
+      volumeId,
+      maxFn
+    );
+
+    if (!brightestPoint || !brightestPoint.length) {
+      return;
+    }
+
+    const { targetViewportIds } = this.configuration;
+
+    // 6. Update all the targetedViewports to jump
+    targetViewportIds.forEach((viewportId) => {
+      // Todo: current limitation is that we cannot jump in viewports
+      // that don't belong to the renderingEngine of the source clicked viewport
+      const viewport = renderingEngine.getViewport(viewportId);
+
+      if (viewport instanceof VolumeViewport) {
+        jumpToWorld(viewport, brightestPoint);
+      } else {
+        console.warn(
+          'Cannot jump to specified world coordinates for a viewport that is not a VolumeViewport'
+        );
+      }
+    });
+  }
+}
+
+MIPJumpToClickTool.toolName = 'MIPJumpToClickTool';
+export default MIPJumpToClickTool;

package/src/tools/MagnifyTool.ts

@@ -0,0 +1,319 @@
+import { BaseTool } from './base';
+import { Events } from '../enums';
+
+import { getEnabledElement, StackViewport } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+import { EventTypes, PublicToolProps, ToolProps } from '../types';
+import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
+import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
+import { state } from '../store';
+import { Enums } from '@cornerstonejs/core';
+
+import {
+  hideElementCursor,
+  resetElementCursor,
+} from '../cursors/elementCursor';
+import { IPoints } from '../types';
+
+const MAGNIFY_VIEWPORT_ID = 'magnify-viewport';
+
+class MagnifyTool extends BaseTool {
+  static toolName;
+  _bounds: any;
+  editData: {
+    referencedImageId: string;
+    viewportIdsToRender: string[];
+    enabledElement: Types.IEnabledElement;
+    renderingEngine: Types.IRenderingEngine;
+    currentPoints: IPoints;
+  } | null;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        magnifySize: 10, // parallel scale , higher more zoom
+        magnifyWidth: 250, //px
+        magnifyHeight: 250, //px
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  _getReferencedImageId(
+    viewport: Types.IStackViewport | Types.IVolumeViewport
+  ): string {
+    const targetId = this.getTargetId(viewport);
+
+    let referencedImageId;
+
+    if (viewport instanceof StackViewport) {
+      referencedImageId = targetId.split('imageId:')[1];
+    }
+
+    return referencedImageId;
+  }
+
+  preMouseDownCallback = (evt: EventTypes.InteractionEventType) => {
+    const eventDetail = evt.detail;
+    const { element, currentPoints } = eventDetail;
+    const enabledElement = getEnabledElement(element);
+    const { viewport, renderingEngine } = enabledElement;
+
+    if (!(viewport instanceof StackViewport)) {
+      throw new Error('MagnifyTool only works on StackViewports');
+    }
+
+    const referencedImageId = this._getReferencedImageId(viewport);
+
+    if (!referencedImageId) {
+      throw new Error(
+        'MagnifyTool: No referenced image id found, reconstructed planes not supported yet'
+      );
+    }
+
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    this.editData = {
+      referencedImageId,
+      viewportIdsToRender,
+      enabledElement,
+      renderingEngine,
+      currentPoints,
+    };
+
+    this._createMagnificationViewport();
+    this._activateDraw(element);
+
+    hideElementCursor(element);
+
+    evt.preventDefault();
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    return true;
+  };
+
+  preTouchStartCallback = (evt: EventTypes.InteractionEventType) => {
+    this.preMouseDownCallback(evt);
+  };
+
+  _createMagnificationViewport = () => {
+    const {
+      enabledElement,
+      referencedImageId,
+      viewportIdsToRender,
+      renderingEngine,
+      currentPoints,
+    } = this.editData;
+    const { viewport } = enabledElement;
+    const { element } = viewport;
+    const { voiRange } = viewport.getProperties();
+
+    const { canvas: canvasPos, world: worldPos } = currentPoints;
+
+    let magnifyToolElement: HTMLDivElement;
+
+    magnifyToolElement = element.querySelector('.magnifyTool');
+    if (magnifyToolElement === null) {
+      const magnifyElement = document.createElement('div');
+
+      magnifyElement.classList.add('magnifyTool');
+
+      magnifyElement.style.display = 'block';
+      magnifyElement.style.width = `${this.configuration.magnifyWidth}px`;
+      magnifyElement.style.height = `${this.configuration.magnifyHeight}px`;
+      magnifyElement.style.position = 'absolute';
+
+      magnifyToolElement = magnifyElement;
+
+      const viewportElement = element.querySelector('.viewport-element');
+      viewportElement.appendChild(magnifyElement);
+
+      const viewportInput = {
+        viewportId: MAGNIFY_VIEWPORT_ID,
+        type: Enums.ViewportType.STACK,
+        element: magnifyToolElement as HTMLDivElement,
+      };
+
+      renderingEngine.enableElement(viewportInput);
+    }
+
+    // Todo: use CSS transform instead of setting top and left for better performance
+    magnifyToolElement.style.top = `${
+      canvasPos[1] - this.configuration.magnifyHeight / 2
+    }px`;
+    magnifyToolElement.style.left = `${
+      canvasPos[0] - this.configuration.magnifyWidth / 2
+    }px`;
+
+    const magnifyViewport = renderingEngine.getViewport(
+      MAGNIFY_VIEWPORT_ID
+    ) as Types.IStackViewport;
+
+    magnifyViewport.setStack([referencedImageId]).then(() => {
+      // match the original viewport voi range
+      magnifyViewport.setProperties({ voiRange });
+
+      // Use the original viewport for the base for parallelScale
+      const { parallelScale } = viewport.getCamera();
+
+      const { focalPoint, position, viewPlaneNormal } =
+        magnifyViewport.getCamera();
+
+      const distance = Math.sqrt(
+        Math.pow(focalPoint[0] - position[0], 2) +
+          Math.pow(focalPoint[1] - position[1], 2) +
+          Math.pow(focalPoint[2] - position[2], 2)
+      );
+
+      const updatedFocalPoint = <Types.Point3>[
+        worldPos[0],
+        worldPos[1],
+        worldPos[2],
+      ];
+
+      const updatedPosition = <Types.Point3>[
+        updatedFocalPoint[0] + distance * viewPlaneNormal[0],
+        updatedFocalPoint[1] + distance * viewPlaneNormal[1],
+        updatedFocalPoint[2] + distance * viewPlaneNormal[2],
+      ];
+
+      magnifyViewport.setCamera({
+        parallelScale: parallelScale * (1 / this.configuration.magnifySize),
+        focalPoint: updatedFocalPoint,
+        position: updatedPosition,
+      });
+      magnifyViewport.render();
+    });
+
+    magnifyToolElement.style.display = 'block';
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+  };
+
+  _dragCallback = (evt: EventTypes.InteractionEventType) => {
+    const eventDetail = evt.detail;
+
+    const { deltaPoints, element, currentPoints } = eventDetail;
+    const deltaPointsWorld = deltaPoints.world;
+    const canvasPos = currentPoints.canvas;
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+
+    const magnifyViewport = renderingEngine.getViewport(MAGNIFY_VIEWPORT_ID);
+
+    const magnifyElement = element.querySelector(
+      '.magnifyTool'
+    ) as HTMLDivElement;
+
+    if (!magnifyElement) {
+      return;
+    }
+
+    magnifyElement.style.top = `${
+      canvasPos[1] - this.configuration.magnifyHeight / 2
+    }px`;
+    magnifyElement.style.left = `${
+      canvasPos[0] - this.configuration.magnifyWidth / 2
+    }px`;
+
+    const { focalPoint, position } = magnifyViewport.getCamera();
+
+    const updatedPosition = <Types.Point3>[
+      position[0] + deltaPointsWorld[0],
+      position[1] + deltaPointsWorld[1],
+      position[2] + deltaPointsWorld[2],
+    ];
+
+    const updatedFocalPoint = <Types.Point3>[
+      focalPoint[0] + deltaPointsWorld[0],
+      focalPoint[1] + deltaPointsWorld[1],
+      focalPoint[2] + deltaPointsWorld[2],
+    ];
+
+    magnifyViewport.setCamera({
+      focalPoint: updatedFocalPoint,
+      position: updatedPosition,
+    });
+
+    magnifyViewport.render();
+  };
+
+  _dragEndCallback = (evt: EventTypes.InteractionEventType) => {
+    const { element } = evt.detail;
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine } = enabledElement;
+
+    renderingEngine.disableElement(MAGNIFY_VIEWPORT_ID);
+
+    const viewportElement = element.querySelector('.viewport-element');
+
+    const magnifyToolElement = viewportElement.querySelector(
+      '.magnifyTool'
+    ) as HTMLDivElement;
+
+    viewportElement.removeChild(magnifyToolElement);
+
+    this._deactivateDraw(element);
+    resetElementCursor(element);
+  };
+
+  _activateDraw = (element: HTMLDivElement) => {
+    state.isInteractingWithTool = true;
+
+    element.addEventListener(
+      Events.MOUSE_UP,
+      this._dragEndCallback as EventListener
+    );
+    element.addEventListener(
+      Events.MOUSE_DRAG,
+      this._dragCallback as EventListener
+    );
+    element.addEventListener(
+      Events.MOUSE_CLICK,
+      this._dragEndCallback as EventListener
+    );
+
+    element.addEventListener(
+      Events.TOUCH_END,
+      this._dragEndCallback as EventListener
+    );
+    element.addEventListener(
+      Events.TOUCH_DRAG,
+      this._dragCallback as EventListener
+    );
+  };
+
+  _deactivateDraw = (element: HTMLDivElement) => {
+    state.isInteractingWithTool = false;
+
+    element.removeEventListener(
+      Events.MOUSE_UP,
+      this._dragEndCallback as EventListener
+    );
+    element.removeEventListener(
+      Events.MOUSE_DRAG,
+      this._dragCallback as EventListener
+    );
+    element.removeEventListener(
+      Events.MOUSE_CLICK,
+      this._dragEndCallback as EventListener
+    );
+    element.removeEventListener(
+      Events.TOUCH_END,
+      this._dragEndCallback as EventListener
+    );
+    element.removeEventListener(
+      Events.TOUCH_DRAG,
+      this._dragCallback as EventListener
+    );
+  };
+}
+
+MagnifyTool.toolName = 'Magnify';
+export default MagnifyTool;

package/src/tools/PanTool.ts

@@ -0,0 +1,58 @@
+import { BaseTool } from './base';
+import { getEnabledElement } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { EventTypes, PublicToolProps, ToolProps } from '../types';
+
+/**
+ * Tool that pans the camera in the plane defined by the viewPlaneNormal and the viewUp.
+ */
+class PanTool extends BaseTool {
+  static toolName;
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  touchDragCallback(evt: EventTypes.InteractionEventType) {
+    this._dragCallback(evt);
+  }
+
+  mouseDragCallback(evt: EventTypes.InteractionEventType) {
+    this._dragCallback(evt);
+  }
+
+  _dragCallback(evt: EventTypes.InteractionEventType) {
+    const { element, deltaPoints } = evt.detail;
+    const enabledElement = getEnabledElement(element);
+
+    const deltaPointsWorld = deltaPoints.world;
+    const camera = enabledElement.viewport.getCamera();
+    const { focalPoint, position } = camera;
+
+    const updatedPosition = <Types.Point3>[
+      position[0] - deltaPointsWorld[0],
+      position[1] - deltaPointsWorld[1],
+      position[2] - deltaPointsWorld[2],
+    ];
+
+    const updatedFocalPoint = <Types.Point3>[
+      focalPoint[0] - deltaPointsWorld[0],
+      focalPoint[1] - deltaPointsWorld[1],
+      focalPoint[2] - deltaPointsWorld[2],
+    ];
+
+    enabledElement.viewport.setCamera({
+      focalPoint: updatedFocalPoint,
+      position: updatedPosition,
+    });
+    enabledElement.viewport.render();
+  }
+}
+
+PanTool.toolName = 'Pan';
+export default PanTool;

package/src/tools/PlanarRotateTool.ts

@@ -0,0 +1,77 @@
+import {
+  BaseVolumeViewport,
+  getEnabledElement,
+  Types,
+} from '@cornerstonejs/core';
+import { mat4, vec3 } from 'gl-matrix';
+import { BaseTool } from './base';
+import angleBetweenLines from '../utilities/math/angle/angleBetweenLines';
+import { PublicToolProps, ToolProps, EventTypes } from '../types';
+
+/**
+ * The PlanarRotateTool is a tool that allows the user to rotate
+ * the image by pressing the mouse click and dragging
+ */
+class PlanarRotateTool extends BaseTool {
+  static toolName;
+  touchDragCallback: (evt: EventTypes.MouseDragEventType) => void;
+  mouseDragCallback: (evt: EventTypes.MouseDragEventType) => void;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+
+    this.touchDragCallback = this._dragCallback.bind(this);
+    this.mouseDragCallback = this._dragCallback.bind(this);
+  }
+
+  _dragCallback(evt: EventTypes.MouseDragEventType) {
+    const { element, currentPoints, startPoints } = evt.detail;
+    const currentPointWorld = currentPoints.world;
+    const startPointWorld = startPoints.world;
+    const enabledElement = getEnabledElement(element);
+    const { viewport } = enabledElement;
+    const camera = viewport.getCamera();
+    const width = element.clientWidth;
+    const height = element.clientHeight;
+
+    const centerCanvas: Types.Point2 = [width * 0.5, height * 0.5];
+    const centerWorld = viewport.canvasToWorld(centerCanvas);
+
+    let angle = angleBetweenLines(
+      [startPointWorld, centerWorld],
+      [centerWorld, currentPointWorld]
+    );
+
+    const { viewPlaneNormal, viewUp } = camera;
+
+    const v1 = vec3.sub(vec3.create(), centerWorld, startPointWorld);
+    const v2 = vec3.sub(vec3.create(), centerWorld, currentPointWorld);
+    const cross = vec3.cross(vec3.create(), v1, v2);
+    if (vec3.dot(viewPlaneNormal, cross) > 0) {
+      angle = -angle;
+    }
+
+    if (Number.isNaN(angle)) return;
+
+    if (viewport instanceof BaseVolumeViewport) {
+      const rotAngle = (angle * Math.PI) / 180;
+      const rotMat = mat4.identity(new Float32Array(16));
+      mat4.rotate(rotMat, rotMat, rotAngle, viewPlaneNormal);
+      const rotatedViewUp = vec3.transformMat4(vec3.create(), viewUp, rotMat);
+      viewport.setCamera({ viewUp: rotatedViewUp as Types.Point3 });
+    } else {
+      const { rotation } = (viewport as Types.IStackViewport).getProperties();
+      viewport.setProperties({ rotation: rotation + angle });
+    }
+
+    viewport.render();
+  }
+}
+
+PlanarRotateTool.toolName = 'PlanarRotate';
+export default PlanarRotateTool;