@cornerstonejs/core 0.36.2 → 0.36.4

package/src/RenderingEngine/helpers/cpuFallback/rendering/getVOILut.ts

@@ -0,0 +1,74 @@
+/* eslint no-bitwise: 0 */
+
+/**
+ * Volume of Interest Lookup Table Function
+ *
+ * @typedef {Function} VOILUTFunction
+ *
+ * @param {Number} modalityLutValue
+ * @returns {Number} transformed value
+ * @memberof Objects
+ */
+
+/**
+ * @module: VOILUT
+ */
+
+/**
+ *
+ * @param {Number} windowWidth Window Width
+ * @param {Number} windowCenter Window Center
+ * @returns {VOILUTFunction} VOI LUT mapping function
+ * @memberof VOILUT
+ */
+function generateLinearVOILUT(windowWidth: number, windowCenter: number) {
+  return function (modalityLutValue) {
+    return ((modalityLutValue - windowCenter) / windowWidth + 0.5) * 255.0;
+  };
+}
+
+/**
+ * Generate a non-linear volume of interest lookup table
+ *
+ * @param {LUT} voiLUT Volume of Interest Lookup Table Object
+ *
+ * @returns {VOILUTFunction} VOI LUT mapping function
+ * @memberof VOILUT
+ */
+function generateNonLinearVOILUT(voiLUT) {
+  // We don't trust the voiLUT.numBitsPerEntry, mainly thanks to Agfa!
+  const bitsPerEntry = Math.max(...voiLUT.lut).toString(2).length;
+  const shift = bitsPerEntry - 8;
+  const minValue = voiLUT.lut[0] >> shift;
+  const maxValue = voiLUT.lut[voiLUT.lut.length - 1] >> shift;
+  const maxValueMapped = voiLUT.firstValueMapped + voiLUT.lut.length - 1;
+
+  return function (modalityLutValue) {
+    if (modalityLutValue < voiLUT.firstValueMapped) {
+      return minValue;
+    } else if (modalityLutValue >= maxValueMapped) {
+      return maxValue;
+    }
+
+    return voiLUT.lut[modalityLutValue - voiLUT.firstValueMapped] >> shift;
+  };
+}
+
+/**
+ * Retrieve a VOI LUT mapping function given the current windowing settings
+ * and the VOI LUT for the image
+ *
+ * @param {Number} windowWidth Window Width
+ * @param {Number} windowCenter Window Center
+ * @param {LUT} [voiLUT] Volume of Interest Lookup Table Object
+ *
+ * @return {VOILUTFunction} VOI LUT mapping function
+ * @memberof VOILUT
+ */
+export default function (windowWidth: number, windowCenter: number, voiLUT) {
+  if (voiLUT) {
+    return generateNonLinearVOILUT(voiLUT);
+  }
+
+  return generateLinearVOILUT(windowWidth, windowCenter);
+}

package/src/RenderingEngine/helpers/cpuFallback/rendering/initializeRenderCanvas.ts

@@ -0,0 +1,37 @@
+import { CPUFallbackEnabledElement, IImage } from '../../../../types';
+
+/**
+ * Sets size and clears canvas
+ *
+ * @param {Object} enabledElement Cornerstone Enabled Element
+ * @param {Object} image Image to be rendered
+ * @returns {void}
+ * @memberof rendering
+ */
+export default function (
+  enabledElement: CPUFallbackEnabledElement,
+  image: IImage
+): void {
+  const renderCanvas = enabledElement.renderingTools.renderCanvas;
+
+  // Resize the canvas
+  renderCanvas.width = image.width;
+  renderCanvas.height = image.height;
+
+  const canvasContext = renderCanvas.getContext('2d');
+
+  // NOTE - we need to fill the render canvas with white pixels since we
+  // control the luminance using the alpha channel to improve rendering performance.
+  canvasContext.fillStyle = 'white';
+  canvasContext.fillRect(0, 0, renderCanvas.width, renderCanvas.height);
+
+  const renderCanvasData = canvasContext.getImageData(
+    0,
+    0,
+    image.width,
+    image.height
+  );
+
+  enabledElement.renderingTools.renderCanvasContext = canvasContext;
+  enabledElement.renderingTools.renderCanvasData = renderCanvasData;
+}

package/src/RenderingEngine/helpers/cpuFallback/rendering/lutMatches.ts

@@ -0,0 +1,21 @@
+/**
+ * Check if two lookup tables match
+ *
+ * @param {LUT} a A lookup table function
+ * @param {LUT} b Another lookup table function
+ * @return {boolean} Whether or not they match
+ * @memberof rendering
+ */
+export default function (a: any, b: any) {
+  // If undefined, they are equal
+  if (!a && !b) {
+    return true;
+  }
+  // If one is undefined, not equal
+  if (!a || !b) {
+    return false;
+  }
+
+  // Check the unique ids
+  return a.id === b.id;
+}

package/src/RenderingEngine/helpers/cpuFallback/rendering/now.ts

@@ -0,0 +1,13 @@
+/**
+ * Use the performance.now() method if possible, and if not, use Date.now()
+ *
+ * @return {number} Time elapsed since the time origin
+ * @memberof Polyfills
+ */
+export default function (): number {
+  if (window.performance) {
+    return performance.now();
+  }
+
+  return Date.now();
+}

package/src/RenderingEngine/helpers/cpuFallback/rendering/pixelToCanvas.ts

@@ -0,0 +1,22 @@
+import getTransform from './getTransform';
+import { CPUFallbackEnabledElement, Point2 } from '../../../../types';
+
+/**
+ * Converts a point in the pixel coordinate system to the canvas coordinate system
+ * system.  This can be used to render using canvas context without having the weird
+ * side effects that come from scaling and non square pixels
+ *
+ * @param {HTMLDivElement} element An HTML Element enabled for Cornerstone
+ * @param {{x: Number, y: Number}} pt The transformed point in the pixel coordinate system
+ *
+ * @returns {{x: Number, y: Number}} The input point in the canvas coordinate system
+ * @memberof PixelCoordinateSystem
+ */
+export default function (
+  enabledElement: CPUFallbackEnabledElement,
+  pt: Point2
+): Point2 {
+  const transform = getTransform(enabledElement);
+
+  return transform.transformPoint(pt);
+}

package/src/RenderingEngine/helpers/cpuFallback/rendering/renderColorImage.ts

@@ -0,0 +1,193 @@
+import now from './now';
+import generateColorLUT from './generateColorLUT';
+import storedColorPixelDataToCanvasImageData from './storedColorPixelDataToCanvasImageData';
+import storedRGBAPixelDataToCanvasImageData from './storedRGBAPixelDataToCanvasImageData';
+import setToPixelCoordinateSystem from './setToPixelCoordinateSystem';
+import doesImageNeedToBeRendered from './doesImageNeedToBeRendered';
+import initializeRenderCanvas from './initializeRenderCanvas';
+import saveLastRendered from './saveLastRendered';
+import {
+  IImage,
+  CPUFallbackViewport,
+  CPUFallbackEnabledElement,
+} from '../../../../types';
+
+/**
+ * Generates an appropriate Look Up Table to render the given image with the given window width and level (specified in the viewport)
+ * Uses an internal cache for performance
+ *
+ * @param {Object} image  The image to be rendered
+ * @param {Object} viewport The viewport values used for rendering
+ * @returns {Uint8ClampedArray} Look Up Table array.
+ * @memberof rendering
+ */
+function getLut(image: IImage, viewport: CPUFallbackViewport) {
+  // If we have a cached lut and it has the right values, return it immediately
+  if (
+    image.cachedLut !== undefined &&
+    image.cachedLut.windowCenter === viewport.voi.windowCenter &&
+    image.cachedLut.windowWidth === viewport.voi.windowWidth &&
+    image.cachedLut.invert === viewport.invert
+  ) {
+    return image.cachedLut.lutArray;
+  }
+
+  // Lut is invalid or not present, regenerate it and cache it
+  generateColorLUT(
+    image,
+    viewport.voi.windowWidth,
+    viewport.voi.windowCenter,
+    viewport.invert
+  );
+  image.cachedLut.windowWidth = viewport.voi.windowWidth;
+  image.cachedLut.windowCenter = viewport.voi.windowCenter;
+  image.cachedLut.invert = viewport.invert;
+
+  return image.cachedLut.lutArray;
+}
+
+/**
+ * Returns an appropriate canvas to render the Image. If the canvas available in the cache is appropriate
+ * it is returned, otherwise adjustments are made. It also sets the color transfer functions.
+ *
+ * @param enabledElement - The cornerstone enabled element
+ * @param image - The image to be rendered
+ * @param invalidated - Is pixel data valid
+ * @returns An appropriate canvas for rendering the image
+ * @memberof rendering
+ */
+function getRenderCanvas(
+  enabledElement: CPUFallbackEnabledElement,
+  image: IImage,
+  invalidated: boolean
+): HTMLCanvasElement {
+  const canvasWasColor =
+    enabledElement.renderingTools.lastRenderedIsColor === true;
+
+  if (!enabledElement.renderingTools.renderCanvas || !canvasWasColor) {
+    enabledElement.renderingTools.renderCanvas =
+      document.createElement('canvas');
+  }
+
+  const renderCanvas = enabledElement.renderingTools.renderCanvas;
+
+  // The ww/wc is identity and not inverted - get a canvas with the image rendered into it for
+  // Fast drawing
+  if (
+    enabledElement.viewport.voi.windowWidth === 255 &&
+    enabledElement.viewport.voi.windowCenter === 128 &&
+    enabledElement.viewport.invert === false &&
+    image.getCanvas &&
+    image.getCanvas()
+  ) {
+    return image.getCanvas();
+  }
+
+  // Apply the lut to the stored pixel data onto the render canvas
+  if (
+    doesImageNeedToBeRendered(enabledElement, image) === false &&
+    invalidated !== true
+  ) {
+    return renderCanvas;
+  }
+
+  // If our render canvas does not match the size of this image reset it
+  // NOTE: This might be inefficient if we are updating multiple images of different
+  // Sizes frequently.
+  if (
+    renderCanvas.width !== image.width ||
+    renderCanvas.height !== image.height
+  ) {
+    initializeRenderCanvas(enabledElement, image);
+  }
+
+  // Get the lut to use
+  let start = now();
+  const colorLUT = getLut(image, enabledElement.viewport);
+
+  image.stats = image.stats || {};
+  image.stats.lastLutGenerateTime = now() - start;
+
+  const renderCanvasData = enabledElement.renderingTools.renderCanvasData;
+  const renderCanvasContext = enabledElement.renderingTools.renderCanvasContext;
+
+  // The color image voi/invert has been modified - apply the lut to the underlying
+  // Pixel data and put it into the renderCanvas
+  if (image.rgba) {
+    storedRGBAPixelDataToCanvasImageData(
+      image,
+      colorLUT,
+      renderCanvasData.data
+    );
+  } else {
+    storedColorPixelDataToCanvasImageData(
+      image,
+      colorLUT,
+      renderCanvasData.data
+    );
+  }
+
+  start = now();
+  renderCanvasContext.putImageData(renderCanvasData, 0, 0);
+  image.stats.lastPutImageDataTime = now() - start;
+
+  return renderCanvas;
+}
+
+/**
+ * API function to render a color image to an enabled element
+ *
+ * @param {EnabledElement} enabledElement The Cornerstone Enabled Element to redraw
+ * @param {Boolean} invalidated - true if pixel data has been invalidated and cached rendering should not be used
+ * @returns {void}
+ * @memberof rendering
+ */
+export function renderColorImage(
+  enabledElement: CPUFallbackEnabledElement,
+  invalidated: boolean
+): void {
+  if (enabledElement === undefined) {
+    throw new Error(
+      'renderColorImage: enabledElement parameter must not be undefined'
+    );
+  }
+
+  const image = enabledElement.image;
+
+  if (image === undefined) {
+    throw new Error(
+      'renderColorImage: image must be loaded before it can be drawn'
+    );
+  }
+
+  // Get the canvas context and reset the transform
+  const context = enabledElement.canvas.getContext('2d');
+
+  context.setTransform(1, 0, 0, 1, 0, 0);
+
+  // Clear the canvas
+  context.fillStyle = 'black';
+  context.fillRect(
+    0,
+    0,
+    enabledElement.canvas.width,
+    enabledElement.canvas.height
+  );
+
+  // Turn off image smooth/interpolation if pixelReplication is set in the viewport
+  context.imageSmoothingEnabled = !enabledElement.viewport.pixelReplication;
+
+  // Save the canvas context state and apply the viewport properties
+  setToPixelCoordinateSystem(enabledElement, context);
+
+  const renderCanvas = getRenderCanvas(enabledElement, image, invalidated);
+
+  const sx = enabledElement.viewport.displayedArea.tlhc.x - 1;
+  const sy = enabledElement.viewport.displayedArea.tlhc.y - 1;
+  const width = enabledElement.viewport.displayedArea.brhc.x - sx;
+  const height = enabledElement.viewport.displayedArea.brhc.y - sy;
+
+  context.drawImage(renderCanvas, sx, sy, width, height, 0, 0, width, height);
+
+  enabledElement.renderingTools = saveLastRendered(enabledElement);
+}

package/src/RenderingEngine/helpers/cpuFallback/rendering/renderGrayscaleImage.ts

@@ -0,0 +1,166 @@
+import storedPixelDataToCanvasImageData from './storedPixelDataToCanvasImageData';
+import storedPixelDataToCanvasImageDataPET from './storedPixelDataToCanvasImageDataPET';
+import storedPixelDataToCanvasImageDataRGBA from './storedPixelDataToCanvasImageDataRGBA';
+import setToPixelCoordinateSystem from './setToPixelCoordinateSystem';
+import now from './now';
+import getLut from './getLut';
+import doesImageNeedToBeRendered from './doesImageNeedToBeRendered';
+import initializeRenderCanvas from './initializeRenderCanvas';
+import saveLastRendered from './saveLastRendered';
+import { IImage, CPUFallbackEnabledElement } from '../../../../types';
+
+/**
+ * Returns an appropriate canvas to render the Image. If the canvas available in the cache is appropriate
+ * it is returned, otherwise adjustments are made. It also sets the color transfer functions.
+ *
+ * @param {Object} enabledElement The cornerstone enabled element
+ * @param {Object} image The image to be rendered
+ * @param {Boolean} invalidated Is pixel data valid
+ * @param {Boolean} [useAlphaChannel = true] Will an alpha channel be used
+ * @returns {HTMLCanvasElement} An appropriate canvas for rendering the image
+ * @memberof rendering
+ */
+function getRenderCanvas(
+  enabledElement: CPUFallbackEnabledElement,
+  image: IImage,
+  invalidated: boolean,
+  useAlphaChannel = true
+): HTMLCanvasElement {
+  const canvasWasColor =
+    enabledElement.renderingTools.lastRenderedIsColor === true;
+
+  if (!enabledElement.renderingTools.renderCanvas || canvasWasColor) {
+    enabledElement.renderingTools.renderCanvas =
+      document.createElement('canvas');
+    initializeRenderCanvas(enabledElement, image);
+  }
+
+  const renderCanvas = enabledElement.renderingTools.renderCanvas;
+
+  if (
+    doesImageNeedToBeRendered(enabledElement, image) === false &&
+    invalidated !== true
+  ) {
+    return renderCanvas;
+  }
+
+  // If our render canvas does not match the size of this image reset it
+  // NOTE: This might be inefficient if we are updating multiple images of different
+  // Sizes frequently.
+  if (
+    renderCanvas.width !== image.width ||
+    renderCanvas.height !== image.height
+  ) {
+    initializeRenderCanvas(enabledElement, image);
+  }
+
+  image.stats = image.stats || {};
+
+  const renderCanvasData = enabledElement.renderingTools.renderCanvasData;
+  const renderCanvasContext = enabledElement.renderingTools.renderCanvasContext;
+
+  let start = now();
+  image.stats.lastLutGenerateTime = now() - start;
+
+  const { viewport } = enabledElement;
+
+  // If modality is 'PT' and the image is scaled then the results are floating points,
+  // and we cannot create a lut for it (cannot have float indices). Therefore,
+  // we use a mapping function to get the voiLUT from the values by applying
+  // the windowLevel and windowWidth.
+  if (viewport.modality === 'PT' && image.isPreScaled) {
+    const { windowWidth, windowCenter } = viewport.voi;
+    const minimum = windowCenter - windowWidth / 2;
+    const maximum = windowCenter + windowWidth / 2;
+    const range = maximum - minimum;
+    const collectedMultiplierTerms = 255.0 / range;
+
+    let petVOILutFunction;
+
+    if (viewport.invert) {
+      petVOILutFunction = (value) =>
+        255 - (value - minimum) * collectedMultiplierTerms;
+    } else {
+      // Note, don't need to math.floor, that is dealt with by setting the value in the Uint8Array.
+      petVOILutFunction = (value) =>
+        (value - minimum) * collectedMultiplierTerms;
+    }
+
+    storedPixelDataToCanvasImageDataPET(
+      image,
+      petVOILutFunction,
+      renderCanvasData.data
+    );
+  } else {
+    // Get the lut to use
+    const lut = getLut(image, viewport, invalidated);
+
+    if (useAlphaChannel) {
+      storedPixelDataToCanvasImageData(image, lut, renderCanvasData.data);
+    } else {
+      storedPixelDataToCanvasImageDataRGBA(image, lut, renderCanvasData.data);
+    }
+  }
+
+  start = now();
+  renderCanvasContext.putImageData(renderCanvasData, 0, 0);
+  image.stats.lastPutImageDataTime = now() - start;
+
+  return renderCanvas;
+}
+
+/**
+ * API function to draw a grayscale image to a given enabledElement
+ *
+ * @param {EnabledElement} enabledElement The Cornerstone Enabled Element to redraw
+ * @param {Boolean} invalidated - true if pixel data has been invalidated and cached rendering should not be used
+ * @returns {void}
+ * @memberof rendering
+ */
+export function renderGrayscaleImage(
+  enabledElement: CPUFallbackEnabledElement,
+  invalidated: boolean
+): void {
+  if (enabledElement === undefined) {
+    throw new Error(
+      'drawImage: enabledElement parameter must not be undefined'
+    );
+  }
+
+  const image = enabledElement.image;
+
+  if (image === undefined) {
+    throw new Error('drawImage: image must be loaded before it can be drawn');
+  }
+
+  // Get the canvas context and reset the transform
+  const context = enabledElement.canvas.getContext('2d');
+
+  context.setTransform(1, 0, 0, 1, 0, 0);
+
+  // Clear the canvas
+  context.fillStyle = 'black';
+  context.fillRect(
+    0,
+    0,
+    enabledElement.canvas.width,
+    enabledElement.canvas.height
+  );
+
+  // Turn off image smooth/interpolation if pixelReplication is set in the viewport
+  context.imageSmoothingEnabled = !enabledElement.viewport.pixelReplication;
+
+  // Save the canvas context state and apply the viewport properties
+  setToPixelCoordinateSystem(enabledElement, context);
+
+  const renderCanvas = getRenderCanvas(enabledElement, image, invalidated);
+
+  const sx = enabledElement.viewport.displayedArea.tlhc.x - 1;
+  const sy = enabledElement.viewport.displayedArea.tlhc.y - 1;
+  const width = enabledElement.viewport.displayedArea.brhc.x - sx;
+  const height = enabledElement.viewport.displayedArea.brhc.y - sy;
+
+  context.drawImage(renderCanvas, sx, sy, width, height, 0, 0, width, height);
+
+  enabledElement.renderingTools = saveLastRendered(enabledElement);
+}