@cornerstonejs/tools 0.56.1 → 0.56.3

package/src/tools/StackScrollTool.ts

@@ -0,0 +1,97 @@
+import {
+  getEnabledElementByIds,
+  VolumeViewport,
+  StackViewport,
+  utilities as csUtils,
+} from '@cornerstonejs/core';
+import { BaseTool } from './base';
+import { scroll } from '../utilities';
+import { PublicToolProps, ToolProps, EventTypes } from '../types';
+
+/**
+ * The StackScrollTool is a tool that allows the user to scroll through a
+ * stack of images by pressing the mouse click and dragging
+ */
+class StackScrollTool extends BaseTool {
+  static toolName;
+  deltaY: number;
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        invert: false,
+        debounceIfNotLoaded: true,
+        loop: false
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+    this.deltaY = 1;
+  }
+
+  mouseDragCallback(evt: EventTypes.InteractionEventType) {
+    this._dragCallback(evt);
+  }
+  touchDragCallback(evt: EventTypes.InteractionEventType) {
+    this._dragCallback(evt);
+  }
+
+  _dragCallback(evt: EventTypes.InteractionEventType) {
+    const { deltaPoints, viewportId, renderingEngineId } = evt.detail;
+    const { viewport } = getEnabledElementByIds(viewportId, renderingEngineId);
+
+    const targetId = this.getTargetId(viewport);
+    const { debounceIfNotLoaded, invert, loop } = this.configuration;
+
+    const deltaPointY = deltaPoints.canvas[1];
+
+    let volumeId;
+    if (viewport instanceof VolumeViewport) {
+      volumeId = targetId.split('volumeId:')[1];
+    }
+
+    const pixelsPerImage = this._getPixelPerImage(viewport);
+    const deltaY = deltaPointY + this.deltaY;
+
+    if (!pixelsPerImage) {
+      return;
+    }
+
+    if (Math.abs(deltaY) >= pixelsPerImage) {
+      const imageIdIndexOffset = Math.round(deltaY / pixelsPerImage);
+
+      scroll(viewport, {
+        delta: invert ? -imageIdIndexOffset : imageIdIndexOffset,
+        volumeId,
+        debounceLoading: debounceIfNotLoaded,
+        loop: loop
+      });
+
+      this.deltaY = deltaY % pixelsPerImage;
+    } else {
+      this.deltaY = deltaY;
+    }
+  }
+
+  _getPixelPerImage(viewport) {
+    const { element } = viewport;
+    const numberOfSlices = this._getNumberOfSlices(viewport);
+
+    // The Math.max here makes it easier to mouseDrag-scroll small or really large image stacks
+    return Math.max(2, element.offsetHeight / Math.max(numberOfSlices, 8));
+  }
+
+  _getNumberOfSlices(viewport) {
+    if (viewport instanceof VolumeViewport) {
+      const { numberOfSlices } =
+        csUtils.getImageSliceDataForVolumeViewport(viewport);
+      return numberOfSlices;
+    } else if (viewport instanceof StackViewport) {
+      return viewport.getImageIds().length;
+    }
+  }
+}
+
+StackScrollTool.toolName = 'StackScroll';
+export default StackScrollTool;

package/src/tools/StackScrollToolMouseWheelTool.ts

@@ -0,0 +1,58 @@
+import {
+  getEnabledElement,
+  VolumeViewport,
+  StackViewport,
+} from '@cornerstonejs/core';
+import { BaseTool } from './base';
+import { MouseWheelEventType } from '../types/EventTypes';
+import { scrollVolume } from '../utilities/scroll';
+
+/**
+ * The StackScrollMouseWheelTool is a tool that allows the user to scroll through a
+ * stack of images using the mouse wheel
+ */
+class StackScrollMouseWheelTool extends BaseTool {
+  static toolName;
+
+  _configuration: any;
+
+  constructor(
+    toolProps = {},
+    defaultToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        invert: false,
+        debounceIfNotLoaded: true,
+        loop: false,
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  mouseWheelCallback(evt: MouseWheelEventType): void {
+    const { wheel, element } = evt.detail;
+    const { direction } = wheel;
+    const { invert } = this.configuration;
+    const { viewport } = getEnabledElement(element);
+    const delta = direction * (invert ? -1 : 1);
+
+    if (viewport instanceof StackViewport) {
+      viewport.scroll(
+        delta,
+        this.configuration.debounceIfNotLoaded,
+        this.configuration.loop
+      );
+    } else if (viewport instanceof VolumeViewport) {
+      const targetId = this.getTargetId(viewport);
+      const volumeId = targetId.split('volumeId:')[1];
+      // TODO: add loop implemention for scroll volume.
+      scrollVolume(viewport, volumeId, delta);
+    } else {
+      throw new Error('StackScrollMouseWheelTool: Unsupported viewport type');
+    }
+  }
+}
+
+StackScrollMouseWheelTool.toolName = 'StackScrollMouseWheel';
+export default StackScrollMouseWheelTool;

package/src/tools/TrackballRotateTool.ts

@@ -0,0 +1,141 @@
+import vtkMath from '@kitware/vtk.js/Common/Core/Math';
+
+import { getEnabledElement } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+import { mat4, vec3 } from 'gl-matrix';
+import { EventTypes, PublicToolProps, ToolProps } from '../types';
+import { BaseTool } from './base';
+
+/**
+ * Tool that rotates the camera in the plane defined by the viewPlaneNormal and the viewUp.
+ */
+class TrackballRotateTool extends BaseTool {
+  static toolName;
+  touchDragCallback: (evt: EventTypes.InteractionEventType) => void;
+  mouseDragCallback: (evt: EventTypes.InteractionEventType) => void;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        rotateIncrementDegrees: 2,
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+
+    this.touchDragCallback = this._dragCallback.bind(this);
+    this.mouseDragCallback = this._dragCallback.bind(this);
+  }
+
+  rotateCamera = (viewport, centerWorld, axis, angle) => {
+    const vtkCamera = viewport.getVtkActiveCamera();
+    const viewUp = vtkCamera.getViewUp();
+    const focalPoint = vtkCamera.getFocalPoint();
+    const position = vtkCamera.getPosition();
+
+    const newPosition: Types.Point3 = [0, 0, 0];
+    const newFocalPoint: Types.Point3 = [0, 0, 0];
+    const newViewUp: Types.Point3 = [0, 0, 0];
+
+    const transform = mat4.identity(new Float32Array(16));
+    mat4.translate(transform, transform, centerWorld);
+    mat4.rotate(transform, transform, angle, axis);
+    mat4.translate(transform, transform, [
+      -centerWorld[0],
+      -centerWorld[1],
+      -centerWorld[2],
+    ]);
+    vec3.transformMat4(newPosition, position, transform);
+    vec3.transformMat4(newFocalPoint, focalPoint, transform);
+
+    mat4.identity(transform);
+    mat4.rotate(transform, transform, angle, axis);
+    vec3.transformMat4(newViewUp, viewUp, transform);
+
+    viewport.setCamera({
+      position: newPosition,
+      viewUp: newViewUp,
+      focalPoint: newFocalPoint,
+    });
+  };
+
+  // pseudocode inspired from
+  // https://github.com/kitware/vtk-js/blob/HEAD/Sources/Interaction/Manipulators/MouseCameraUnicamRotateManipulator/index.js
+  _dragCallback(evt: EventTypes.InteractionEventType): void {
+    const { element, currentPoints, lastPoints } = evt.detail;
+    const currentPointsCanvas = currentPoints.canvas;
+    const lastPointsCanvas = lastPoints.canvas;
+    const { rotateIncrementDegrees } = this.configuration;
+    const enabledElement = getEnabledElement(element);
+    const { viewport } = enabledElement;
+    const camera = viewport.getCamera();
+    const width = element.clientWidth;
+    const height = element.clientHeight;
+
+    const normalizedPosition = [
+      currentPointsCanvas[0] / width,
+      currentPointsCanvas[1] / height,
+    ];
+
+    const normalizedPreviousPosition = [
+      lastPointsCanvas[0] / width,
+      lastPointsCanvas[1] / height,
+    ];
+
+    const center: Types.Point2 = [width * 0.5, height * 0.5];
+    // NOTE: centerWorld corresponds to the focal point in cornerstone3D
+    const centerWorld = viewport.canvasToWorld(center);
+    const normalizedCenter = [0.5, 0.5];
+
+    const radsq = (1.0 + Math.abs(normalizedCenter[0])) ** 2.0;
+    const op = [normalizedPreviousPosition[0], 0, 0];
+    const oe = [normalizedPosition[0], 0, 0];
+
+    const opsq = op[0] ** 2;
+    const oesq = oe[0] ** 2;
+
+    const lop = opsq > radsq ? 0 : Math.sqrt(radsq - opsq);
+    const loe = oesq > radsq ? 0 : Math.sqrt(radsq - oesq);
+
+    const nop: Types.Point3 = [op[0], 0, lop];
+    vtkMath.normalize(nop);
+    const noe: Types.Point3 = [oe[0], 0, loe];
+    vtkMath.normalize(noe);
+
+    const dot = vtkMath.dot(nop, noe);
+    if (Math.abs(dot) > 0.0001) {
+      const angleX =
+        -2 *
+        Math.acos(vtkMath.clampValue(dot, -1.0, 1.0)) *
+        Math.sign(normalizedPosition[0] - normalizedPreviousPosition[0]) *
+        rotateIncrementDegrees;
+
+      const upVec = camera.viewUp;
+      const atV = camera.viewPlaneNormal;
+      const rightV: Types.Point3 = [0, 0, 0];
+      const forwardV: Types.Point3 = [0, 0, 0];
+
+      vtkMath.cross(upVec, atV, rightV);
+      vtkMath.normalize(rightV);
+
+      vtkMath.cross(atV, rightV, forwardV);
+      vtkMath.normalize(forwardV);
+      vtkMath.normalize(upVec);
+
+      this.rotateCamera(viewport, centerWorld, forwardV, angleX);
+
+      const angleY =
+        (normalizedPreviousPosition[1] - normalizedPosition[1]) *
+        rotateIncrementDegrees;
+
+      this.rotateCamera(viewport, centerWorld, rightV, angleY);
+
+      viewport.render();
+    }
+  }
+}
+
+TrackballRotateTool.toolName = 'TrackballRotate';
+export default TrackballRotateTool;

package/src/tools/VolumeRotateMouseWheelTool.ts

@@ -0,0 +1,86 @@
+import { BaseTool } from './base';
+import { getEnabledElement } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { mat4, vec3 } from 'gl-matrix';
+import { PublicToolProps, ToolProps } from '../types';
+import { MouseWheelEventType } from '../types/EventTypes';
+
+const DIRECTIONS = {
+  X: [1, 0, 0],
+  Y: [0, 1, 0],
+  Z: [0, 0, 1],
+  CUSTOM: [],
+};
+
+/**
+ * Tool that rotates the camera on mouse wheel.
+ * It rotates the camera around the focal point, and around a defined axis. Default
+ * axis is set to be Z axis, but it can be configured to any custom normalized axis.
+ *
+ */
+class VolumeRotateMouseWheelTool extends BaseTool {
+  static toolName;
+  _configuration: any;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        direction: DIRECTIONS.Z,
+        rotateIncrementDegrees: 0.5,
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  mouseWheelCallback(evt: MouseWheelEventType) {
+    // https://github.com/kitware/vtk-js/blob/HEAD/Sources/Interaction/Manipulators/MouseCameraUnicamRotateManipulator/index.js#L73
+    const { element, wheel } = evt.detail;
+    const enabledElement = getEnabledElement(element);
+    const { viewport } = enabledElement;
+    const { direction, rotateIncrementDegrees } = this.configuration;
+
+    const camera = viewport.getCamera();
+    const { viewUp, position, focalPoint } = camera;
+
+    const { direction: deltaY } = wheel;
+
+    const [cx, cy, cz] = focalPoint;
+    const [ax, ay, az] = direction;
+
+    const angle = deltaY * rotateIncrementDegrees;
+
+    // position[3] = 1.0
+    // focalPoint[3] = 1.0
+    // viewUp[3] = 0.0
+
+    const newPosition: Types.Point3 = [0, 0, 0];
+    const newFocalPoint: Types.Point3 = [0, 0, 0];
+    const newViewUp: Types.Point3 = [0, 0, 0];
+
+    const transform = mat4.identity(new Float32Array(16));
+    mat4.translate(transform, transform, [cx, cy, cz]);
+    mat4.rotate(transform, transform, angle, [ax, ay, az]);
+    mat4.translate(transform, transform, [-cx, -cy, -cz]);
+    vec3.transformMat4(newPosition, position, transform);
+    vec3.transformMat4(newFocalPoint, focalPoint, transform);
+
+    mat4.identity(transform);
+    mat4.rotate(transform, transform, angle, [ax, ay, az]);
+    vec3.transformMat4(<Types.Point3>newViewUp, viewUp, transform);
+
+    viewport.setCamera({
+      position: newPosition,
+      viewUp: newViewUp,
+      focalPoint: newFocalPoint,
+    });
+
+    viewport.render();
+  }
+}
+
+VolumeRotateMouseWheelTool.toolName = 'VolumeRotateMouseWheel';
+export default VolumeRotateMouseWheelTool;

package/src/tools/WindowLevelTool.ts

@@ -0,0 +1,260 @@
+import { BaseTool } from './base';
+import {
+  getEnabledElement,
+  VolumeViewport,
+  StackViewport,
+  utilities,
+  cache,
+  Types,
+} from '@cornerstonejs/core';
+import { EventTypes } from '../types';
+
+// Todo: should move to configuration
+const DEFAULT_MULTIPLIER = 4;
+const DEFAULT_IMAGE_DYNAMIC_RANGE = 1024;
+const PT = 'PT';
+
+/**
+ * WindowLevel tool manipulates the windowLevel applied to a viewport. It
+ * provides a way to set the windowCenter and windowWidth of a viewport
+ * by dragging mouse over the image.
+ *
+ */
+class WindowLevelTool extends BaseTool {
+  static toolName;
+  constructor(
+    toolProps = {},
+    defaultToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  touchDragCallback(evt: EventTypes.InteractionEventType) {
+    this.mouseDragCallback(evt);
+  }
+
+  mouseDragCallback(evt: EventTypes.InteractionEventType) {
+    const { element, deltaPoints } = evt.detail;
+    const enabledElement = getEnabledElement(element);
+    const { renderingEngine, viewport } = enabledElement;
+
+    let volumeId,
+      lower,
+      upper,
+      modality,
+      newRange,
+      viewportsContainingVolumeUID;
+    let isPreScaled = false;
+
+    if (viewport instanceof VolumeViewport) {
+      const targetId = this.getTargetId(viewport as Types.IVolumeViewport);
+      volumeId = targetId.split('volumeId:')[1];
+      viewportsContainingVolumeUID = utilities.getViewportsWithVolumeId(
+        volumeId,
+        renderingEngine.id
+      );
+      const properties = viewport.getProperties();
+      ({ lower, upper } = properties.voiRange);
+      const volume = cache.getVolume(volumeId);
+      modality = volume.metadata.Modality;
+      isPreScaled = volume.scaling && Object.keys(volume.scaling).length > 0;
+    } else if (viewport instanceof StackViewport) {
+      const properties = viewport.getProperties();
+      modality = viewport.modality;
+      ({ lower, upper } = properties.voiRange);
+      const { preScale } = viewport.getImageData();
+      isPreScaled = preScale.scaled;
+    } else {
+      throw new Error('Viewport is not a valid type');
+    }
+
+    // If modality is PT, treat it special to not include the canvas delta in
+    // the x direction. For other modalities, use the canvas delta in both
+    // directions, and if the viewport is a volumeViewport, the multiplier
+    // is calculate using the volume min and max.
+    if (modality === PT && isPreScaled) {
+      newRange = this.getPTNewRange({
+        deltaPointsCanvas: deltaPoints.canvas,
+        lower,
+        upper,
+        clientHeight: element.clientHeight,
+      });
+    } else {
+      newRange = this.getNewRange({
+        viewport,
+        deltaPointsCanvas: deltaPoints.canvas,
+        volumeId,
+        lower,
+        upper,
+      });
+    }
+
+    if (viewport instanceof StackViewport) {
+      viewport.setProperties({
+        voiRange: newRange,
+      });
+
+      viewport.render();
+      return;
+    }
+
+    if (viewport instanceof VolumeViewport) {
+      viewport.setProperties({
+        voiRange: newRange,
+      });
+
+      viewportsContainingVolumeUID.forEach((vp) => {
+        vp.render();
+      });
+      return;
+    }
+  }
+
+  getPTNewRange({ deltaPointsCanvas, lower, upper, clientHeight }) {
+    const deltaY = deltaPointsCanvas[1];
+    const multiplier = 5 / clientHeight;
+    const wcDelta = deltaY * multiplier;
+
+    upper -= wcDelta;
+    upper = Math.max(upper, 0.1);
+
+    return { lower, upper };
+  }
+
+  getNewRange({ viewport, deltaPointsCanvas, volumeId, lower, upper }) {
+    const multiplier =
+      this._getMultiplierFromDynamicRange(viewport, volumeId) ||
+      DEFAULT_MULTIPLIER;
+
+    const wwDelta = deltaPointsCanvas[0] * multiplier;
+    const wcDelta = deltaPointsCanvas[1] * multiplier;
+
+    let { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
+      lower,
+      upper
+    );
+
+    windowWidth += wwDelta;
+    windowCenter += wcDelta;
+
+    windowWidth = Math.max(windowWidth, 1);
+
+    // Convert back to range
+    return utilities.windowLevel.toLowHighRange(windowWidth, windowCenter);
+  }
+
+  _getMultiplierFromDynamicRange(viewport, volumeId) {
+    let imageDynamicRange;
+
+    if (volumeId) {
+      const imageVolume = cache.getVolume(volumeId);
+      const { dimensions } = imageVolume;
+      const scalarData = imageVolume.getScalarData();
+      const calculatedDynamicRange = this._getImageDynamicRangeFromMiddleSlice(
+        scalarData,
+        dimensions
+      );
+      const BitsStored = imageVolume?.metadata?.BitsStored;
+      const metadataDynamicRange = BitsStored ? 2 ** BitsStored : Infinity;
+      // Burned in Pixels often use pixel values above the BitsStored.
+      // This results in a multiplier which is way higher than what you would
+      // want in practice. Thus we take the min between the metadata dynamic
+      // range and actual middel slice dynamic range.
+      imageDynamicRange = Math.min(
+        calculatedDynamicRange,
+        metadataDynamicRange
+      );
+    } else {
+      imageDynamicRange = this._getImageDynamicRangeFromViewport(viewport);
+    }
+
+    const ratio = imageDynamicRange / DEFAULT_IMAGE_DYNAMIC_RANGE;
+
+    let multiplier = DEFAULT_MULTIPLIER;
+
+    if (ratio > 1) {
+      multiplier = Math.round(ratio);
+    }
+    return multiplier;
+  }
+
+  _getImageDynamicRangeFromViewport(viewport) {
+    const { imageData } = viewport.getImageData();
+    const dimensions = imageData.getDimensions();
+
+    let scalarData;
+    // if getScalarData is a method on imageData
+    if (imageData.getScalarData) {
+      scalarData = imageData.getScalarData();
+    } else {
+      scalarData = imageData.getPointData().getScalars();
+    }
+
+    if (dimensions[2] !== 1) {
+      return this._getImageDynamicRangeFromMiddleSlice(scalarData, dimensions);
+    }
+
+    let range;
+    if (scalarData.getRange) {
+      range = scalarData.getRange();
+    } else {
+      const { min, max } = this._getMinMax(scalarData, scalarData.length);
+      range = [min, max];
+    }
+
+    return range[1] - range[0];
+  }
+
+  _getImageDynamicRangeFromMiddleSlice = (scalarData, dimensions) => {
+    const middleSliceIndex = Math.floor(dimensions[2] / 2);
+
+    const frameLength = dimensions[0] * dimensions[1];
+    let bytesPerVoxel;
+    let TypedArrayConstructor;
+
+    if (scalarData instanceof Float32Array) {
+      bytesPerVoxel = 4;
+      TypedArrayConstructor = Float32Array;
+    } else if (scalarData instanceof Uint8Array) {
+      bytesPerVoxel = 1;
+      TypedArrayConstructor = Uint8Array;
+    } else if (scalarData instanceof Uint16Array) {
+      bytesPerVoxel = 2;
+      TypedArrayConstructor = Uint16Array;
+    } else if (scalarData instanceof Int16Array) {
+      bytesPerVoxel = 2;
+      TypedArrayConstructor = Int16Array;
+    }
+
+    const buffer = scalarData.buffer;
+    const byteOffset = middleSliceIndex * frameLength * bytesPerVoxel;
+    const frame = new TypedArrayConstructor(buffer, byteOffset, frameLength);
+
+    const { max, min } = this._getMinMax(frame, frameLength);
+
+    return max - min;
+  };
+
+  private _getMinMax(frame: Uint8Array | Float32Array, frameLength: number) {
+    let min = Infinity;
+    let max = -Infinity;
+
+    for (let i = 0; i < frameLength; i++) {
+      const voxel = frame[i];
+
+      if (voxel < min) {
+        min = voxel;
+      }
+
+      if (voxel > max) {
+        max = voxel;
+      }
+    }
+    return { max, min };
+  }
+}
+
+WindowLevelTool.toolName = 'WindowLevel';
+export default WindowLevelTool;