@cornerstonejs/core 0.44.2 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "0.44.2",
+  "version": "0.45.0",
   "description": "",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -43,5 +43,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "45b5360196e59bfc62c1a73122dfa31a4b61b9ff"
+  "gitHead": "94f27769ff36b2d414e730c9eb8ce462a8957816"
 }

package/src/RenderingEngine/RenderingEngine.ts

@@ -327,13 +327,17 @@ class RenderingEngine implements IRenderingEngine {
       }
     });
 
-    this._resizeVTKViewports(vtkDrivenViewports, keepCamera, immediate);
+    if (vtkDrivenViewports.length) {
+      this._resizeVTKViewports(vtkDrivenViewports, keepCamera, immediate);
+    }
 
-    this._resizeUsingCustomResizeHandler(
-      customRenderingViewports,
-      keepCamera,
-      immediate
-    );
+    if (customRenderingViewports.length) {
+      this._resizeUsingCustomResizeHandler(
+        customRenderingViewports,
+        keepCamera,
+        immediate
+      );
+    }
   }
 
   /**

package/src/RenderingEngine/StackViewport.ts

@@ -1665,7 +1665,14 @@ class StackViewport extends Viewport implements IStackViewport {
         // handle the case where the pixelData is a Float32Array
         // CPU path cannot handle it, it should be converted to Uint16Array
         // and via the Modality LUT we can display it properly
-        if (pixelData instanceof Float32Array) {
+        const preScale = image.preScale;
+        const scalingParams = preScale?.scalingParameters;
+
+        const scaledWithNonIntegers =
+          (preScale?.scaled && scalingParams?.rescaleIntercept % 1 !== 0) ||
+          scalingParams?.rescaleSlope % 1 !== 0;
+
+        if (pixelData instanceof Float32Array && scaledWithNonIntegers) {
           const floatMinMax = {
             min: image.maxPixelValue,
             max: image.minPixelValue,
@@ -1704,8 +1711,7 @@ class StackViewport extends Viewport implements IStackViewport {
           };
         }
 
-        image.isPreScaled = image.preScale?.scaled;
-        this.csImage = image;
+        this._setCSImage(image);
 
         const eventDetail: EventTypes.StackNewImageEventDetail = {
           image,
@@ -1842,9 +1848,7 @@ class StackViewport extends Viewport implements IStackViewport {
           return;
         }
 
-        // cornerstone image
-        image.isPreScaled = image.preScale?.scaled;
-        this.csImage = image;
+        this._setCSImage(image);
 
         const eventDetail: EventTypes.StackNewImageEventDetail = {
           image,
@@ -1926,6 +1930,32 @@ class StackViewport extends Viewport implements IStackViewport {
     });
   }
 
+  /**
+   * Renders the given Cornerstone image object in the viewport.
+   * This method is intended to be used by utilities to render
+   * an individual image, rather than by applications that want to display
+   * a complete image stack. If you want to load and display a complete
+   * image stack, use the setStack method instead of this one.
+   *
+   * The rendered image will appear in the viewport's element.
+   * Use this method if you have other means of loading and the
+   * cornerstone image object is already available.
+   *
+   * If you don't understand the difference between this method and
+   * setStack, you probably want to use setStack.
+   *
+   * @param image - The Cornerstone image object to render.
+   */
+  public renderImageObject = (image) => {
+    this._setCSImage(image);
+    this._updateActorToDisplayImageId(image);
+  };
+
+  private _setCSImage = (image) => {
+    image.isPreScaled = image.preScale?.scaled;
+    this.csImage = image;
+  };
+
   /**
    * It updates the volume actor with the retrieved cornerstone image.
    * It first checks if the new image has the same dimensions, spacings, and
@@ -2096,6 +2126,10 @@ class StackViewport extends Viewport implements IStackViewport {
       return false;
     }
 
+    if (!this.csImage.preScale?.scalingParameters?.suvbw) {
+      return false;
+    }
+
     return true;
   }
 

package/src/RenderingEngine/renderingEngineCache.ts

@@ -36,6 +36,21 @@ const renderingEngineCache = {
     const renderingEngineIds = Object.keys(cache);
     const renderingEngines = renderingEngineIds.map((id) => cache[id]);
 
+    // sort the rendering engines so that the ones that start with _
+    // are at the end of the array. The reason is for not breaking
+    // the code that used getRenderingEngines(), but since we moved
+    // the renderToCanvas utility to use GPU hence it needs a
+    // rendering engine and we don't want to use the default one.
+    renderingEngines.sort((a, b) => {
+      if (a.id[0] === '_' && b.id[0] !== '_') {
+        return 1;
+      } else if (a.id[0] !== '_' && b.id[0] === '_') {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+
     return renderingEngines;
   },
 };

package/src/types/RGB.ts

@@ -0,0 +1,6 @@
+/**
+ * RGB color type.
+ */
+type RGB = [number, number, number];
+
+export default RGB;

package/src/types/ViewportInputOptions.ts

@@ -1,12 +1,14 @@
 import { OrientationAxis } from '../enums';
 import OrientationVectors from './OrientationVectors';
 import DisplayArea from './displayArea';
+import RGB from './RGB';
+
 /**
  * This type defines the shape of viewport input options, so we can throw when it is incorrect.
  */
 type ViewportInputOptions = {
   /** background color */
-  background?: [number, number, number];
+  background?: RGB;
   /** orientation of the viewport which can be either an Enum for axis Enums.OrientationAxis.[AXIAL|SAGITTAL|CORONAL|DEFAULT] or an object with viewPlaneNormal and viewUp */
   orientation?: OrientationAxis | OrientationVectors;
   /** displayArea of interest */

package/src/types/index.ts

@@ -74,6 +74,7 @@ import type {
 import type ICachedGeometry from './ICachedGeometry';
 import type { IContourSet } from './IContourSet';
 import type { IContour } from './IContour';
+import type RGB from './RGB';
 
 export type {
   // config
@@ -156,4 +157,6 @@ export type {
   ContourData,
   IContourSet,
   IContour,
+  // Color
+  RGB,
 };

package/src/utilities/index.ts

@@ -24,7 +24,8 @@ import getVolumeViewportsContainingSameVolumes from './getVolumeViewportsContain
 import getViewportsWithVolumeId from './getViewportsWithVolumeId';
 import transformWorldToIndex from './transformWorldToIndex';
 import loadImageToCanvas from './loadImageToCanvas';
-import renderToCanvas from './renderToCanvas';
+import renderToCanvasCPU from './renderToCanvasCPU';
+import renderToCanvasGPU from './renderToCanvasGPU';
 import worldToImageCoords from './worldToImageCoords';
 import imageToWorldCoords from './imageToWorldCoords';
 import getVolumeSliceRangeInfo from './getVolumeSliceRangeInfo';
@@ -77,7 +78,8 @@ export {
   getViewportsWithVolumeId,
   transformWorldToIndex,
   loadImageToCanvas,
-  renderToCanvas,
+  renderToCanvasCPU,
+  renderToCanvasGPU,  
   worldToImageCoords,
   imageToWorldCoords,
   getVolumeSliceRangeInfo,

package/src/utilities/invertRgbTransferFunction.ts

@@ -20,6 +20,11 @@
 export default function invertRgbTransferFunction(
   rgbTransferFunction: any
 ): void {
+  // cut in case there is no function at all
+  if (!rgbTransferFunction) {
+    return;
+  }
+
   const size = rgbTransferFunction.getSize();
 
   for (let index = 0; index < size; index++) {

package/src/utilities/loadImageToCanvas.ts

@@ -4,12 +4,23 @@ import { loadAndCacheImage } from '../loaders/imageLoader';
 import * as metaData from '../metaData';
 import { RequestType } from '../enums';
 import imageLoadPoolManager from '../requestPool/imageLoadPoolManager';
-import renderToCanvas from './renderToCanvas';
+import renderToCanvasGPU from './renderToCanvasGPU';
+import renderToCanvasCPU from './renderToCanvasCPU';
 import { getConfiguration } from '../init';
 
+interface LoadImageOptions {
+  canvas: HTMLCanvasElement;
+  imageId: string;
+  requestType?: RequestType;
+  priority?: number;
+  renderingEngineId?: string;
+  useCPURendering?: boolean;
+}
+
 /**
- * Loads and renders an imageId to a Canvas. It will use the CPU rendering pipeline
- * for image.
+ * Loads and renders an imageId to a Canvas. It will use the GPU rendering pipeline
+ * for image by default but you can force the CPU rendering pipeline by setting the
+ * useCPURendering parameter to true.
  *
  * @example
  * ```
@@ -18,26 +29,37 @@ import { getConfiguration } from '../init';
  *
  * loadImageToCanvas(canvas, imageId)
  * ```
- * @param imageId - The imageId to render
  * @param canvas - Canvas element to render to
+ * @param imageId - The imageId to render
  * @param requestType - The type of request (default to interaction), can be 'interaction' or 'prefetch' or 'thumbnail'
  * the order of loading for the pool manager is interaction, thumbnail, prefetch
  * @param priority - The priority of the request within the request type (lower is higher priority)
+ * @param useCPURendering - Force the use of the CPU rendering pipeline (default to false)
  * @returns - A promise that resolves when the image has been rendered with the imageId
  */
 export default function loadImageToCanvas(
-  canvas: HTMLCanvasElement,
-  imageId: string,
-  requestType = RequestType.Thumbnail,
-  priority = -5
+  options: LoadImageOptions
 ): Promise<string> {
+  const {
+    canvas,
+    imageId,
+    requestType = RequestType.Thumbnail,
+    priority = -5,
+    renderingEngineId = '_thumbnails',
+    useCPURendering = false,
+  } = options;
+
+  const renderFn = useCPURendering ? renderToCanvasCPU : renderToCanvasGPU;
+
   return new Promise((resolve, reject) => {
     function successCallback(image: IImage, imageId: string) {
       const { modality } = metaData.get('generalSeriesModule', imageId) || {};
 
       image.isPreScaled = image.isPreScaled || image.preScale?.scaled;
-      renderToCanvas(canvas, image, modality);
-      resolve(imageId);
+
+      renderFn(canvas, image, modality, renderingEngineId).then(() => {
+        resolve(imageId);
+      });
     }
 
     function errorCallback(error: Error, imageId: string) {
@@ -64,10 +86,10 @@ export default function loadImageToCanvas(
       targetBuffer: {
         type: useNorm16Texture ? undefined : 'Float32Array',
       },
-      useRGBA: true,
       preScale: {
         enabled: true,
       },
+      useRGBA: !!useCPURendering,
       requestType,
     };
 

package/src/utilities/{renderToCanvas.ts → renderToCanvasCPU.ts}

@@ -11,11 +11,12 @@ import drawImageSync from '../RenderingEngine/helpers/cpuFallback/drawImageSync'
  * @param image - Cornerstone image object
  * @param canvas - Canvas element to render to
  */
-export default function renderToCanvas(
+export default function renderToCanvasCPU(
   canvas: HTMLCanvasElement,
   image: IImage,
-  modality?: string
-): void {
+  modality?: string,
+  renderingEngineId?: string
+): Promise<string> {
   const viewport = getDefaultViewport(canvas, image, modality);
 
   const enabledElement: CPUFallbackEnabledElement = {
@@ -28,5 +29,8 @@ export default function renderToCanvas(
   enabledElement.transform = calculateTransform(enabledElement);
 
   const invalidated = true;
-  drawImageSync(enabledElement, invalidated);
+  return new Promise((resolve, reject) => {
+    drawImageSync(enabledElement, invalidated);
+    resolve(image.imageId);
+  });
 }

package/src/utilities/renderToCanvasGPU.ts

@@ -0,0 +1,130 @@
+import getOrCreateCanvas from '../RenderingEngine/helpers/getOrCreateCanvas';
+import { ViewportType, Events } from '../enums';
+import StackViewport from '../RenderingEngine/StackViewport';
+import { IImage } from '../types';
+import { getRenderingEngine } from '../RenderingEngine/getRenderingEngine';
+import RenderingEngine from '../RenderingEngine';
+
+/**
+ * Renders an cornerstone image to a Canvas. This method will handle creation
+ * of a temporary enabledElement, setting the imageId, and rendering the image via
+ * a StackViewport, copying the canvas drawing to the given canvas Element, and
+ * disabling the created temporary element. SuppressEvents argument is used to
+ * prevent events from firing during the render process (e.g. during a series
+ * of renders to a thumbnail image).
+ *
+ * @example
+ * ```
+ * const canvas = document.getElementById('myCanvas')
+ *
+ * renderToCanvasGPU(canvas, image)
+ * ```
+ * @param canvas - Canvas element to render to
+ * @param image - 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,
+  modality = undefined,
+  renderingEngineId = '_thumbnails'
+): Promise<string> {
+  if (!canvas || !(canvas instanceof HTMLCanvasElement)) {
+    throw new Error('canvas element is required');
+  }
+
+  const imageIdToPrint = image.imageId;
+  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';
+
+  document.body.appendChild(element);
+
+  // add id to the element so we can find it later, and fix the : which is not allowed in css
+  const uniqueId = viewportId.split(':').join('-');
+  element.setAttribute('viewport-id-for-remove', uniqueId);
+
+  const renderingEngine =
+    (getRenderingEngine(renderingEngineId) as RenderingEngine) ||
+    new RenderingEngine(renderingEngineId);
+
+  let viewport = renderingEngine.getViewport(viewportId) as StackViewport;
+
+  if (!viewport) {
+    const stackViewportInput = {
+      viewportId,
+      type: ViewportType.STACK,
+      element,
+      defaultOptions: {
+        suppressEvents: true,
+      },
+    };
+    renderingEngine.enableElement(stackViewportInput);
+    viewport = renderingEngine.getViewport(viewportId) as StackViewport;
+  }
+
+  return new Promise((resolve) => {
+    // Creating a temporary HTML element so that we can
+    // enable it and later disable it without losing the canvas context
+    let elementRendered = false;
+
+    // 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);
+
+      // Copy the temporary canvas to the given canvas
+      const context = canvas.getContext('2d');
+      context.drawImage(temporaryCanvas, 0, 0);
+      elementRendered = true;
+
+      // remove based on id
+      element.removeEventListener(Events.IMAGE_RENDERED, onImageRendered);
+
+      // Ensure pending previous resize calls are done which might have been
+      // triggered by the same disableElement call. This is to avoid potential
+      // grab of the wrong canvas coordinate from the offscreen renderer since
+      // disable might have not finished resizing yet and it will cause weird
+      // copy to on screen from an incorrect location in the offscreen renderer.
+      setTimeout(() => {
+        renderingEngine.disableElement(viewportId);
+
+        // remove all the elements that has the same id
+        const elements = document.querySelectorAll(
+          `[viewport-id-for-remove="${uniqueId}"]`
+        );
+        elements.forEach((element) => {
+          element.remove();
+        });
+      }, 0);
+      resolve(imageId);
+    };
+
+    element.addEventListener(Events.IMAGE_RENDERED, onImageRendered);
+    viewport.renderImageObject(image);
+
+    if (modality === 'PT' && !_isPTImagePreScaledWithSUV(image)) {
+      viewport.setProperties({
+        voiRange: {
+          lower: image.minPixelValue,
+          upper: image.maxPixelValue,
+        },
+      });
+    }
+
+    viewport.render();
+  });
+}
+
+const _isPTImagePreScaledWithSUV = (image: IImage) => {
+  return image.preScale.scaled && image.preScale.scalingParameters.suvbw;
+};

package/dist/cjs/utilities/renderToCanvas.d.ts

@@ -1,2 +0,0 @@
-import { IImage } from '../types';
-export default function renderToCanvas(canvas: HTMLCanvasElement, image: IImage, modality?: string): void;

package/dist/cjs/utilities/renderToCanvas.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderToCanvas.js","sourceRoot":"","sources":["../../../src/utilities/renderToCanvas.ts"],"names":[],"mappings":";;;;;AAEA,6HAAqG;AACrG,6HAAqG;AACrG,yGAAiF;AASjF,SAAwB,cAAc,CACpC,MAAyB,EACzB,KAAa,EACb,QAAiB;IAEjB,MAAM,QAAQ,GAAG,IAAA,4BAAkB,EAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE7D,MAAM,cAAc,GAA8B;QAChD,MAAM;QACN,QAAQ;QACR,KAAK;QACL,cAAc,EAAE,EAAE;KACnB,CAAC;IAEF,cAAc,CAAC,SAAS,GAAG,IAAA,4BAAkB,EAAC,cAAc,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,IAAI,CAAC;IACzB,IAAA,uBAAa,EAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AAC7C,CAAC;AAlBD,iCAkBC"}

package/dist/esm/utilities/renderToCanvas.d.ts

@@ -1,2 +0,0 @@
-import { IImage } from '../types';
-export default function renderToCanvas(canvas: HTMLCanvasElement, image: IImage, modality?: string): void;

package/dist/esm/utilities/renderToCanvas.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderToCanvas.js","sourceRoot":"","sources":["../../../src/utilities/renderToCanvas.ts"],"names":[],"mappings":"AAEA,OAAO,kBAAkB,MAAM,qEAAqE,CAAC;AACrG,OAAO,kBAAkB,MAAM,qEAAqE,CAAC;AACrG,OAAO,aAAa,MAAM,sDAAsD,CAAC;AASjF,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,MAAyB,EACzB,KAAa,EACb,QAAiB;IAEjB,MAAM,QAAQ,GAAG,kBAAkB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE7D,MAAM,cAAc,GAA8B;QAChD,MAAM;QACN,QAAQ;QACR,KAAK;QACL,cAAc,EAAE,EAAE;KACnB,CAAC;IAEF,cAAc,CAAC,SAAS,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AAC7C,CAAC"}