@cornerstonejs/core 2.0.0-beta.1 → 2.0.0-beta.11

package/src/utilities/renderToCanvasGPU.ts

@@ -1,10 +1,19 @@
-import getOrCreateCanvas from '../RenderingEngine/helpers/getOrCreateCanvas';
+import getOrCreateCanvas, {
+  EPSILON,
+} from '../RenderingEngine/helpers/getOrCreateCanvas';
 import { ViewportType, Events } from '../enums';
-import StackViewport from '../RenderingEngine/StackViewport';
-import { IImage } from '../types';
+import {
+  IImage,
+  IStackViewport,
+  IVolume,
+  ViewportInputOptions,
+  IVolumeViewport,
+  ViewReference,
+} from '../types';
 import { getRenderingEngine } from '../RenderingEngine/getRenderingEngine';
 import RenderingEngine from '../RenderingEngine';
 import isPTPrescaledWithSUV from './isPTPrescaledWithSUV';
+import { CanvasLoadPosition } from './loadImageToCanvas';
 
 /**
  * Renders an cornerstone image to a Canvas. This method will handle creation
@@ -21,39 +30,45 @@ import isPTPrescaledWithSUV from './isPTPrescaledWithSUV';
  * renderToCanvasGPU(canvas, image)
  * ```
  * @param canvas - Canvas element to render to
- * @param image - The image to render
+ * @param imageOrVolume - The image to render
  * @param modality - [Default = undefined] The modality of the image
  * @returns - A promise that resolves when the image has been rendered with the imageId
  */
 export default function renderToCanvasGPU(
   canvas: HTMLCanvasElement,
-  image: IImage,
+  imageOrVolume: IImage | IVolume,
   modality = undefined,
-  renderingEngineId = '_thumbnails'
-): Promise<string> {
+  renderingEngineId = '_thumbnails',
+  viewportOptions: ViewportInputOptions & { viewReference?: ViewReference } = {
+    displayArea: { imageArea: [1, 1] },
+  }
+): Promise<CanvasLoadPosition> {
   if (!canvas || !(canvas instanceof HTMLCanvasElement)) {
     throw new Error('canvas element is required');
   }
 
-  const imageIdToPrint = image.imageId;
+  const isVolume = !(imageOrVolume as IImage).imageId;
+  const image = !isVolume && (imageOrVolume as IImage);
+  const volume = isVolume && (imageOrVolume as IVolume);
+  const imageIdToPrint = image?.imageId || volume?.volumeId;
   const viewportId = `renderGPUViewport-${imageIdToPrint}`;
-  const imageId = image.imageId;
   const element = document.createElement('div');
-  element.style.width = `${canvas.width}px`;
-  element.style.height = `${canvas.height}px`;
-  element.style.visibility = 'hidden';
-  element.style.position = 'absolute';
-
-  // Up-sampling the provided canvas to match the device pixel ratio
-  // since we use device pixel ratio to determine the size of the canvas
-  // inside the rendering engine.
   const devicePixelRatio = window.devicePixelRatio || 1;
+  if (!viewportOptions.displayArea) {
+    viewportOptions.displayArea = { imageArea: [1, 1] };
+  }
   const originalWidth = canvas.width;
   const originalHeight = canvas.height;
-  canvas.width = originalWidth * devicePixelRatio;
-  canvas.height = originalHeight * devicePixelRatio;
-  canvas.style.width = `${originalWidth}px`;
-  canvas.style.height = `${originalHeight}px`;
+  // The canvas width/height are set by flooring the CSS size converted
+  // into physical pixels, but because these are float values, the conversion
+  // isn't exact, and using the exact value sometimes leads to an off by 1
+  // in the actual size, so adding EPSILON to the size resolves
+  // the problem.
+  // Don't touch the canvas size here as what we get out is a canvas at the right size
+  element.style.width = `${originalWidth / devicePixelRatio + EPSILON}px`;
+  element.style.height = `${originalHeight / devicePixelRatio + EPSILON}px`;
+  element.style.visibility = 'hidden';
+  element.style.position = 'absolute';
 
   document.body.appendChild(element);
 
@@ -61,23 +76,26 @@ export default function renderToCanvasGPU(
   const uniqueId = viewportId.split(':').join('-');
   element.setAttribute('viewport-id-for-remove', uniqueId);
 
+  // get the canvas element that is the child of the div
+  const temporaryCanvas = getOrCreateCanvas(element);
   const renderingEngine =
     (getRenderingEngine(renderingEngineId) as RenderingEngine) ||
     new RenderingEngine(renderingEngineId);
 
-  let viewport = renderingEngine.getViewport(viewportId) as StackViewport;
+  let viewport = renderingEngine.getViewport(viewportId);
 
   if (!viewport) {
-    const stackViewportInput = {
+    const viewportInput = {
       viewportId,
-      type: ViewportType.STACK,
+      type: isVolume ? ViewportType.ORTHOGRAPHIC : ViewportType.STACK,
       element,
       defaultOptions: {
+        ...viewportOptions,
         suppressEvents: true,
       },
     };
-    renderingEngine.enableElement(stackViewportInput);
-    viewport = renderingEngine.getViewport(viewportId) as StackViewport;
+    renderingEngine.enableElement(viewportInput);
+    viewport = renderingEngine.getViewport(viewportId);
   }
 
   return new Promise((resolve) => {
@@ -85,14 +103,20 @@ export default function renderToCanvasGPU(
     // enable it and later disable it without losing the canvas context
     let elementRendered = false;
 
+    let { viewReference } = viewportOptions;
+
     // Create a named function to handle the event
     const onImageRendered = (eventDetail) => {
       if (elementRendered) {
         return;
       }
-
-      // get the canvas element that is the child of the div
-      const temporaryCanvas = getOrCreateCanvas(element);
+      if (viewReference) {
+        const useViewRef = viewReference;
+        viewReference = null;
+        viewport.setViewReference(useViewRef);
+        viewport.render();
+        return;
+      }
 
       // Copy the temporary canvas to the given canvas
       const context = canvas.getContext('2d');
@@ -108,6 +132,16 @@ export default function renderToCanvasGPU(
         canvas.height // destination dimensions
       );
 
+      const origin = viewport.canvasToWorld([0, 0]);
+      const topRight = viewport.canvasToWorld([
+        temporaryCanvas.width / devicePixelRatio,
+        0,
+      ]);
+      const bottomLeft = viewport.canvasToWorld([
+        0,
+        temporaryCanvas.height / devicePixelRatio,
+      ]);
+      const thicknessMm = 1;
       elementRendered = true;
 
       // remove based on id
@@ -129,17 +163,26 @@ export default function renderToCanvasGPU(
           element.remove();
         });
       }, 0);
-      resolve(imageId);
+      resolve({
+        origin,
+        bottomLeft,
+        topRight,
+        thicknessMm,
+      });
     };
 
     element.addEventListener(Events.IMAGE_RENDERED, onImageRendered);
-    viewport.renderImageObject(image);
+    if (isVolume) {
+      (viewport as IVolumeViewport).setVolumes([volume], false, true);
+    } else {
+      (viewport as IStackViewport).renderImageObject(imageOrVolume);
+    }
 
-    // force a reset camera to center the image
+    // force a reset camera to center the image and undo the small scaling
     viewport.resetCamera();
 
     if (modality === 'PT' && !isPTPrescaledWithSUV(image)) {
-      viewport.setProperties({
+      (viewport as IStackViewport).setProperties({
         voiRange: {
           lower: image.minPixelValue,
           upper: image.maxPixelValue,

package/src/utilities/roundNumber.ts

@@ -0,0 +1,57 @@
+import { EPSILON } from '../constants';
+
+/**
+ * Truncates decimal points to that there is at least 1+precision significant
+ * digits.
+ *
+ * For example, with the default precision 2 (3 significant digits)
+ * * Values larger than 100 show no information after the decimal point
+ * * Values between 10 and 99 show 1 decimal point
+ * * Values between 1 and 9 show 2 decimal points
+ *
+ * @param value - to return a fixed measurement value from
+ * @param precision - defining how many digits after 1..9 are desired
+ */
+function roundNumber(
+  value: string | number | (string | number)[],
+  precision = 2
+): string {
+  if (Array.isArray(value)) {
+    return value.map((v) => roundNumber(v, precision)).join(', ');
+  }
+  if (value === undefined || value === null || value === '') {
+    return 'NaN';
+  }
+  value = Number(value);
+  const absValue = Math.abs(value);
+  if (absValue < 0.0001) {
+    return `${value}`;
+  }
+  const fixedPrecision =
+    absValue >= 100
+      ? precision - 2
+      : absValue >= 10
+      ? precision - 1
+      : absValue >= 1
+      ? precision
+      : absValue >= 0.1
+      ? precision + 1
+      : absValue >= 0.01
+      ? precision + 2
+      : absValue >= 0.001
+      ? precision + 3
+      : precision + 4;
+  return value.toFixed(fixedPrecision);
+}
+
+/**
+ * Rounds a number to the nearest multiple of EPSILON.
+ * @param value - The number to round.
+ * @returns The rounded number.
+ */
+function roundToPrecision(value) {
+  return Math.round(value / EPSILON) * EPSILON;
+}
+
+export { roundToPrecision };
+export default roundNumber;

package/src/utilities/sortImageIdsAndGetSpacing.ts

@@ -0,0 +1,180 @@
+import { vec3 } from 'gl-matrix';
+import { metaData, getConfiguration } from '../';
+import { Point3 } from '../types';
+
+type SortedImageIdsItem = {
+  zSpacing: number;
+  origin: Point3;
+  sortedImageIds: Array<string>;
+};
+/**
+ * Given an array of imageIds, sort them based on their imagePositionPatient, and
+ * also returns the spacing between images and the origin of the reference image
+ *
+ * @param imageIds - array of imageIds
+ * @param scanAxisNormal - [x, y, z] array or gl-matrix vec3
+ *
+ * @returns The sortedImageIds, zSpacing, and origin of the first image in the series.
+ */
+export default function sortImageIdsAndGetSpacing(
+  imageIds: Array<string>,
+  scanAxisNormal?: vec3
+): SortedImageIdsItem {
+  const {
+    imagePositionPatient: referenceImagePositionPatient,
+    imageOrientationPatient,
+  } = metaData.get('imagePlaneModule', imageIds[0]);
+
+  if (!scanAxisNormal) {
+    const rowCosineVec = vec3.fromValues(
+      imageOrientationPatient[0],
+      imageOrientationPatient[1],
+      imageOrientationPatient[2]
+    );
+    const colCosineVec = vec3.fromValues(
+      imageOrientationPatient[3],
+      imageOrientationPatient[4],
+      imageOrientationPatient[5]
+    );
+
+    scanAxisNormal = vec3.create();
+    vec3.cross(scanAxisNormal, rowCosineVec, colCosineVec);
+  }
+
+  const refIppVec = vec3.create();
+
+  // Check if we are using wadouri scheme
+  const usingWadoUri = imageIds[0].split(':')[0] === 'wadouri';
+
+  vec3.set(
+    refIppVec,
+    referenceImagePositionPatient[0],
+    referenceImagePositionPatient[1],
+    referenceImagePositionPatient[2]
+  );
+
+  let sortedImageIds: string[];
+  let zSpacing: number;
+
+  function getDistance(imageId: string) {
+    const { imagePositionPatient } = metaData.get('imagePlaneModule', imageId);
+
+    const positionVector = vec3.create();
+
+    vec3.sub(
+      positionVector,
+      referenceImagePositionPatient,
+      imagePositionPatient
+    );
+
+    return vec3.dot(positionVector, scanAxisNormal);
+  }
+
+  /**
+   * If we are using wadors and so have all image metadata cached ahead of time,
+   * then sort by image position in 3D space, and calculate average slice
+   * spacing from the entire volume. If not, then use the sampled images (1st
+   * and middle) to calculate slice spacing, and use the provided imageId order.
+   * Correct sorting must be done ahead of time.
+   */
+  if (!usingWadoUri) {
+    const distanceImagePairs = imageIds.map((imageId) => {
+      const distance = getDistance(imageId);
+
+      return {
+        distance,
+        imageId,
+      };
+    });
+
+    distanceImagePairs.sort((a, b) => b.distance - a.distance);
+
+    sortedImageIds = distanceImagePairs.map((a) => a.imageId);
+    const numImages = distanceImagePairs.length;
+
+    // Calculated average spacing.
+    // We would need to resample if these are not similar.
+    // It should be up to the host app to do this if it needed to.
+    zSpacing =
+      Math.abs(
+        distanceImagePairs[numImages - 1].distance -
+          distanceImagePairs[0].distance
+      ) /
+      (numImages - 1);
+  } else {
+    // Using wadouri, so we have only prefetched the first, middle, and last
+    // images for metadata. Assume initial imageId array order is pre-sorted,
+    // but check orientation.
+    const prefetchedImageIds = [
+      imageIds[0],
+      imageIds[Math.floor(imageIds.length / 2)],
+    ];
+    sortedImageIds = imageIds;
+    const firstImageDistance = getDistance(prefetchedImageIds[0]);
+    const middleImageDistance = getDistance(prefetchedImageIds[1]);
+    if (firstImageDistance - middleImageDistance < 0) {
+      sortedImageIds.reverse();
+    }
+
+    // Calculate average spacing between the first and middle prefetched images,
+    // otherwise fall back to DICOM `spacingBetweenSlices`
+    const metadataForMiddleImage = metaData.get(
+      'imagePlaneModule',
+      prefetchedImageIds[1]
+    );
+    if (!metadataForMiddleImage) {
+      throw new Error('Incomplete metadata required for volume construction.');
+    }
+
+    const positionVector = vec3.create();
+
+    vec3.sub(
+      positionVector,
+      referenceImagePositionPatient,
+      metadataForMiddleImage.imagePositionPatient
+    );
+    const distanceBetweenFirstAndMiddleImages = vec3.dot(
+      positionVector,
+      scanAxisNormal
+    );
+    zSpacing =
+      Math.abs(distanceBetweenFirstAndMiddleImages) /
+      Math.floor(imageIds.length / 2);
+  }
+
+  const {
+    imagePositionPatient: origin,
+    sliceThickness,
+    spacingBetweenSlices,
+  } = metaData.get('imagePlaneModule', sortedImageIds[0]);
+
+  const { strictZSpacingForVolumeViewport } = getConfiguration().rendering;
+
+  // We implemented these lines for multiframe dicom files that does not have
+  // position for each frame, leading to incorrect calculation of zSpacing = 0
+  // If possible, we use the sliceThickness, but we warn about this dicom file
+  // weirdness. If sliceThickness is not available, we set to 1 just to render
+  if (zSpacing === 0 && !strictZSpacingForVolumeViewport) {
+    if (sliceThickness && spacingBetweenSlices) {
+      console.log('Could not calculate zSpacing. Using spacingBetweenSlices');
+      zSpacing = spacingBetweenSlices;
+    } else if (sliceThickness) {
+      console.log(
+        'Could not calculate zSpacing and no spacingBetweenSlices. Using sliceThickness'
+      );
+      zSpacing = sliceThickness;
+    } else {
+      console.log(
+        'Could not calculate zSpacing. The VolumeViewport visualization is compromised. Setting zSpacing to 1 to render'
+      );
+      zSpacing = 1;
+    }
+  }
+  const result: SortedImageIdsItem = {
+    zSpacing,
+    origin,
+    sortedImageIds,
+  };
+
+  return result;
+}

package/src/utilities/spatialRegistrationMetadataProvider.ts

@@ -19,13 +19,11 @@ const spatialRegistrationMetadataProvider = {
     state[entryId] = payload;
   },
 
-  get: (type: string, query: string[]): mat4 => {
+  get: (type: string, viewportId1: string, viewportId2: string): mat4 => {
     if (type !== 'spatialRegistrationModule') {
       return;
     }
 
-    const [viewportId1, viewportId2] = query;
-
     // check both ways
     const entryId = `${viewportId1}_${viewportId2}`;
 

package/src/utilities/transferFunctionUtils.ts

@@ -0,0 +1,27 @@
+function getTransferFunctionNodes(transferFunction) {
+  const size = transferFunction.getSize();
+  const values = [];
+  for (let index = 0; index < size; index++) {
+    const nodeValue1 = [];
+
+    transferFunction.getNodeValue(index, nodeValue1);
+
+    values.push(nodeValue1);
+  }
+
+  return values;
+}
+
+function setTransferFunctionNodes(transferFunction, nodes) {
+  if (!nodes?.length) {
+    return;
+  }
+
+  transferFunction.removeAllPoints();
+
+  nodes.forEach((node) => {
+    transferFunction.addRGBPoint(...node);
+  });
+}
+
+export { getTransferFunctionNodes, setTransferFunctionNodes };

package/src/utilities/transformCanvasToIJK.ts

@@ -0,0 +1,18 @@
+import { IStackViewport, IVolumeViewport, Point2 } from '../types';
+import transformWorldToIndex from './transformWorldToIndex';
+
+/**
+ * Convert coordinates from canvas to index (volume) space
+ * @param viewport - Stack or Volume viewport
+ * @param ijkPoint - 2D point in canvas space
+ * @returns 3D point in index (volume) space
+ */
+export function transformCanvasToIJK(
+  viewport: IVolumeViewport | IStackViewport,
+  canvasPoint: Point2
+) {
+  const { imageData: vtkImageData } = viewport.getImageData();
+  const worldPoint = viewport.canvasToWorld(canvasPoint);
+
+  return transformWorldToIndex(vtkImageData, worldPoint);
+}

package/src/utilities/transformIJKToCanvas.ts

@@ -0,0 +1,18 @@
+import { IStackViewport, IVolumeViewport, Point3 } from '../types';
+import transformIndexToWorld from './transformIndexToWorld';
+
+/**
+ * Convert coordinates from index (volume) to canvas space
+ * @param viewport - Stack or Volume viewport
+ * @param ijkPoint - 3D point in index (volume) space
+ * @returns 2D point in canvas space
+ */
+export function transformIJKToCanvas(
+  viewport: IVolumeViewport | IStackViewport,
+  ijkPoint: Point3
+) {
+  const { imageData: vtkImageData } = viewport.getImageData();
+  const worldPoint = transformIndexToWorld(vtkImageData, ijkPoint);
+
+  return viewport.worldToCanvas(worldPoint);
+}

package/src/utilities/transformIndexToWorld.ts

@@ -0,0 +1,14 @@
+import type Point3 from '../types/Point3';
+
+/**
+ * Given an imageData object and a position in voxel space, return a point
+ * in world space.
+ *
+ * @param imageData - The image data object.
+ * @param voxelPos - Point in voxel space
+ * index space.
+ * @returns A point in world space.
+ */
+export default function transformIndexToWorld(imageData, voxelPos: Point3) {
+  return imageData.indexToWorld(voxelPos);
+}

package/src/utilities/updateVTKImageDataWithCornerstoneImage.ts

@@ -0,0 +1,42 @@
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { IImage, PixelDataTypedArray } from '../types';
+
+function updateVTKImageDataWithCornerstoneImage(
+  sourceImageData: vtkImageData,
+  image: IImage
+) {
+  const pixelData = image.getPixelData();
+  if (!sourceImageData.getPointData) {
+    // This happens for a CanvasActor, that doesn't have the getPointData
+    return;
+  }
+  const scalarData = sourceImageData
+    .getPointData()
+    .getScalars()
+    .getData() as PixelDataTypedArray;
+
+  // if the color image is loaded with CPU previously, it loads it
+  // with RGBA, and here we need to remove the A channel from the
+  // pixel data.
+  if (image.color && image.rgba) {
+    const newPixelData = new Uint8Array(image.columns * image.rows * 3);
+    for (let i = 0; i < image.columns * image.rows; i++) {
+      newPixelData[i * 3] = pixelData[i * 4];
+      newPixelData[i * 3 + 1] = pixelData[i * 4 + 1];
+      newPixelData[i * 3 + 2] = pixelData[i * 4 + 2];
+    }
+    // modify the image object to have the correct pixel data for later
+    // use.
+    image.rgba = false;
+    image.getPixelData = () => newPixelData;
+    scalarData.set(newPixelData);
+  } else {
+    scalarData.set(pixelData);
+  }
+
+  // Trigger modified on the VTK Object so the texture is updated
+  // TODO: evaluate directly changing things with texSubImage3D later
+  sourceImageData.modified();
+}
+
+export { updateVTKImageDataWithCornerstoneImage };

package/src/utilities/windowLevel.ts

@@ -1,5 +1,8 @@
 /**
  * Given a low and high window level, return the window width and window center
+ * Formulas from note 4 in
+ * https://dicom.nema.org/medical/dicom/current/output/html/part03.html#sect_C.11.2.1.2.1
+ * extended to allow for low/high swapping
  * @param low - The low window level.
  * @param high - The high window level.
  * @returns a JavaScript object with two properties: windowWidth and windowCenter.
@@ -11,14 +14,20 @@ function toWindowLevel(
   windowWidth: number;
   windowCenter: number;
 } {
-  const windowWidth = Math.abs(low - high);
-  const windowCenter = low + windowWidth / 2;
+  // Allow for swapping high/low
+  const windowWidth = Math.abs(high - low) + 1;
+  const windowCenter = (low + high + 1) / 2;
 
   return { windowWidth, windowCenter };
 }
 
 /**
  * Given a window width and center, return the lower and upper bounds of the window
+ * The formulas for the calculation are specified in
+ * https://dicom.nema.org/medical/dicom/current/output/html/part03.html#sect_C.11.2.1.2.1
+ * if (x <= c - 0.5 - (w-1) /2), then y = ymin
+ * else if (x > c - 0.5 + (w-1) /2), then y = ymax
+ * else y = ((x - (c - 0.5)) / (w-1) + 0.5) * (ymax- ymin) + ymin
  * @param windowWidth - the width of the window in HU
  * @param windowCenter - The center of the window.
  * @returns a JavaScript object with two properties: lower and upper.
@@ -30,8 +39,8 @@ function toLowHighRange(
   lower: number;
   upper: number;
 } {
-  const lower = windowCenter - windowWidth / 2.0;
-  const upper = windowCenter + windowWidth / 2.0;
+  const lower = windowCenter - 0.5 - (windowWidth - 1) / 2;
+  const upper = windowCenter - 0.5 + (windowWidth - 1) / 2;
 
   return { lower, upper };
 }