@cornerstonejs/core 0.43.1 → 0.44.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "0.43.1",
+  "version": "0.44.1",
   "description": "",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -26,19 +26,11 @@
     "prepublishOnly": "yarn run build",
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
-  "peerDependencies": {
-    "@kitware/vtk.js": "26.5.6",
-    "gl-matrix": "^3.4.3"
-  },
   "dependencies": {
-    "detect-gpu": "^4.0.45",
-    "lodash.clonedeep": "4.5.0"
-  },
-  "devDependencies": {
-    "@kitware/vtk.js": "26.5.6",
-    "detect-gpu": "^4.0.45",
+    "@kitware/vtk.js": "27.3.1",
+    "detect-gpu": "^5.0.22",
     "gl-matrix": "^3.4.3",
-    "resemblejs": "^4.1.0"
+    "lodash.clonedeep": "4.5.0"
   },
   "contributors": [
     {
@@ -51,5 +43,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "f64bb238239adaf0cf80ecdc2dca68341207bdd8"
+  "gitHead": "4e69e97b5fe86474240378344ff573decf94389d"
 }

package/src/RenderingEngine/BaseVolumeViewport.ts

@@ -63,7 +63,7 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
     super(props);
 
     this.useCPURendering = getShouldUseCPURendering();
-    this.use16BitTexture = this._shouldUse16BitTexture();
+    this.use16BitTexture = this._shouldUseNativeDataType();
 
     if (this.useCPURendering) {
       throw new Error(

package/src/RenderingEngine/StackViewport.ts

@@ -56,7 +56,7 @@ import resize from './helpers/cpuFallback/rendering/resize';
 
 import resetCamera from './helpers/cpuFallback/rendering/resetCamera';
 import { Transform } from './helpers/cpuFallback/rendering/transform';
-import { getShouldUseCPURendering } from '../init';
+import { getConfiguration, getShouldUseCPURendering } from '../init';
 import RequestType from '../enums/RequestType';
 import {
   StackViewportNewStackEventDetail,
@@ -66,7 +66,6 @@ import {
 import cache from '../cache';
 import correctShift from './helpers/cpuFallback/rendering/correctShift';
 import { ImageActor } from '../types/IActor';
-import isRgbaSourceRgbDest from './helpers/isRgbaSourceRgbDest';
 import createLinearRGBTransferFunction from '../utilities/createLinearRGBTransferFunction';
 
 const EPSILON = 1; // Slice Thickness
@@ -157,7 +156,12 @@ class StackViewport extends Viewport implements IStackViewport {
   private _cpuFallbackEnabledElement?: CPUFallbackEnabledElement;
   // CPU fallback
   private useCPURendering: boolean;
-  private use16BitTexture = false;
+  // Since WebGL natively supports 8 bit int and Float32, we should check if
+  // extra configuration flags has been set to use native data type
+  // which would save a lot of memory and speed up rendering but it is not
+  // yet widely supported in all hardwares. This feature can be turned on
+  // by setting useNorm16Texture or preferSizeOverAccuracy in the configuration
+  private useNativeDataType = false;
   private cpuImagePixelData: number[];
   private cpuRenderingInvalidated: boolean;
   private csImage: IImage;
@@ -178,34 +182,12 @@ class StackViewport extends Viewport implements IStackViewport {
     this.scaling = {};
     this.modality = null;
     this.useCPURendering = getShouldUseCPURendering();
-    this.use16BitTexture = this._shouldUse16BitTexture();
+    this.useNativeDataType = this._shouldUseNativeDataType();
     this._configureRenderingPipeline();
 
-    if (this.useCPURendering) {
-      this._cpuFallbackEnabledElement = {
-        canvas: this.canvas,
-        renderingTools: {},
-        transform: new Transform(),
-        viewport: { rotation: 0 },
-      };
-    } else {
-      const renderer = this.getRenderer();
-      const camera = vtkCamera.newInstance();
-      renderer.setActiveCamera(camera);
-
-      const viewPlaneNormal = <Point3>[0, 0, -1];
-      this.initialViewUp = <Point3>[0, -1, 0];
-
-      camera.setDirectionOfProjection(
-        -viewPlaneNormal[0],
-        -viewPlaneNormal[1],
-        -viewPlaneNormal[2]
-      );
-      camera.setViewUp(...this.initialViewUp);
-      camera.setParallelProjection(true);
-      camera.setThicknessFromFocalPoint(0.1);
-      camera.setFreezeFocalPoint(true);
-    }
+    this.useCPURendering
+      ? this._resetCPUFallbackElement()
+      : this._resetGPUViewport();
 
     this.imageIds = [];
     this.currentImageIdIndex = 0;
@@ -216,21 +198,60 @@ class StackViewport extends Viewport implements IStackViewport {
     this.initializeElementDisabledHandler();
   }
 
+  public setUseCPURendering(value: boolean) {
+    this.useCPURendering = value;
+    this._configureRenderingPipeline();
+  }
+
   static get useCustomRenderingPipeline(): boolean {
     return getShouldUseCPURendering();
   }
 
-  public setUseCPURendering(value: boolean) {
-    this.useCPURendering = value;
+  public updateRenderingPipeline = () => {
     this._configureRenderingPipeline();
-  }
+  };
 
   private _configureRenderingPipeline() {
+    this.useNativeDataType = this._shouldUseNativeDataType();
+    this.useCPURendering = getShouldUseCPURendering();
+
     for (const [funcName, functions] of Object.entries(
       this.renderingPipelineFunctions
     )) {
       this[funcName] = this.useCPURendering ? functions.cpu : functions.gpu;
     }
+
+    this.useCPURendering
+      ? this._resetCPUFallbackElement()
+      : this._resetGPUViewport();
+  }
+
+  private _resetCPUFallbackElement() {
+    this._cpuFallbackEnabledElement = {
+      canvas: this.canvas,
+      renderingTools: {},
+      transform: new Transform(),
+      viewport: { rotation: 0 },
+    };
+  }
+
+  private _resetGPUViewport() {
+    const renderer = this.getRenderer();
+    const camera = vtkCamera.newInstance();
+    renderer.setActiveCamera(camera);
+
+    const viewPlaneNormal = <Point3>[0, 0, -1];
+    this.initialViewUp = <Point3>[0, -1, 0];
+
+    camera.setDirectionOfProjection(
+      -viewPlaneNormal[0],
+      -viewPlaneNormal[1],
+      -viewPlaneNormal[2]
+    );
+    camera.setViewUp(...this.initialViewUp);
+    camera.setParallelProjection(true);
+    camera.setThicknessFromFocalPoint(0.1);
+    camera.setFreezeFocalPoint(true);
   }
 
   /**
@@ -500,6 +521,13 @@ class StackViewport extends Viewport implements IStackViewport {
 
     actor.setMapper(mapper);
 
+    const { preferSizeOverAccuracy } = getConfiguration().rendering;
+
+    if (preferSizeOverAccuracy) {
+      // @ts-ignore for now until vtk is updated
+      mapper.setPreferSizeOverAccuracy(true);
+    }
+
     if (imageData.getPointData().getNumberOfComponents() > 1) {
       actor.getProperty().setIndependentComponents(false);
     }
@@ -1430,32 +1458,10 @@ class StackViewport extends Viewport implements IStackViewport {
     direction,
     dimensions,
     spacing,
-    bitsAllocated,
     numComps,
-    numVoxels,
-    TypedArray,
+    pixelArray,
   }): void {
-    let pixelArray;
-    switch (bitsAllocated) {
-      case 8:
-        pixelArray = new Uint8Array(numVoxels * numComps);
-        break;
-      case 16:
-        if (this.use16BitTexture) {
-          pixelArray = new TypedArray(numVoxels * numComps);
-        } else {
-          pixelArray = new Float32Array(numVoxels * numComps);
-        }
-
-        break;
-      case 24:
-        pixelArray = new Uint8Array(numVoxels * 3 * numComps);
-
-        break;
-      default:
-        console.log('bit allocation not implemented');
-    }
-
+    // Todo: I guess nothing should be done for use16bit?
     const scalarArray = vtkDataArray.newInstance({
       name: 'Pixels',
       numberOfComponents: numComps,
@@ -1556,7 +1562,7 @@ class StackViewport extends Viewport implements IStackViewport {
       yVoxels === image.rows &&
       isEqual(imagePlaneModule.rowCosines, <Point3>rowCosines) &&
       isEqual(imagePlaneModule.columnCosines, <Point3>columnCosines) &&
-      (!this.use16BitTexture ||
+      (!this.useNativeDataType ||
         dataType === image.getPixelData().constructor.name)
     );
   }
@@ -1577,8 +1583,12 @@ class StackViewport extends Viewport implements IStackViewport {
 
     this._imageData.setOrigin(origin);
 
-    // 1. Update the pixel data in the vtkImageData object with the pixelData
-    //    from the loaded Cornerstone image
+    // Update the pixel data in the vtkImageData object with the pixelData
+    // from the loaded Cornerstone image
+    this._updatePixelData(image);
+  }
+
+  private _updatePixelData(image: IImage) {
     const pixelData = image.getPixelData();
     const scalars = this._imageData.getPointData().getScalars();
     const scalarData = scalars.getData() as
@@ -1587,24 +1597,21 @@ class StackViewport extends Viewport implements IStackViewport {
       | Uint16Array
       | Int16Array;
 
-    if (image.rgba || isRgbaSourceRgbDest(pixelData, scalarData)) {
-      if (!image.rgba) {
-        console.warn('rgba not specified but data looks rgba ish', image);
-      }
-      // if image is already cached with rgba for any reason (cpu fallback),
-      // we need to convert it to rgb for the pixel data set
-      // RGB case
-      const numPixels = pixelData.length / 4;
-
-      let rgbIndex = 0;
-      let index = 0;
-
-      for (let i = 0; i < numPixels; i++) {
-        scalarData[index++] = pixelData[rgbIndex++]; // red
-        scalarData[index++] = pixelData[rgbIndex++]; // green
-        scalarData[index++] = pixelData[rgbIndex++]; // blue
-        rgbIndex++; // skip alpha
+    // 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);
     }
@@ -1651,6 +1658,50 @@ class StackViewport extends Viewport implements IStackViewport {
           return;
         }
 
+        const pixelData = image.getPixelData();
+
+        // 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 floatMinMax = {
+            min: image.maxPixelValue,
+            max: image.minPixelValue,
+          };
+          const floatRange = Math.abs(floatMinMax.max - floatMinMax.min);
+          const intRange = 65535;
+          const slope = floatRange / intRange;
+          const intercept = floatMinMax.min;
+          const numPixels = pixelData.length;
+          const intPixelData = new Uint16Array(numPixels);
+
+          let min = 65535;
+
+          let max = 0;
+
+          for (let i = 0; i < numPixels; i++) {
+            const rescaledPixel = Math.floor(
+              (pixelData[i] - intercept) / slope
+            );
+
+            intPixelData[i] = rescaledPixel;
+            min = Math.min(min, rescaledPixel);
+            max = Math.max(max, rescaledPixel);
+          }
+
+          // reset the properties since basically the image has changed
+          image.minPixelValue = min;
+          image.maxPixelValue = max;
+          image.slope = slope;
+          image.intercept = intercept;
+          image.getPixelData = () => intPixelData;
+
+          image.preScale = {
+            ...image.preScale,
+            scaled: false,
+          };
+        }
+
         image.isPreScaled = image.preScale?.scaled;
         this.csImage = image;
 
@@ -1673,6 +1724,12 @@ class StackViewport extends Viewport implements IStackViewport {
           this._cpuFallbackEnabledElement.viewport.colormap
         );
 
+        const { windowCenter, windowWidth } = viewport.voi;
+        this.voiRange = windowLevelUtil.toLowHighRange(
+          windowWidth,
+          windowCenter
+        );
+
         this._cpuFallbackEnabledElement.image = image;
         this._cpuFallbackEnabledElement.metadata = {
           ...metadata,
@@ -1747,9 +1804,6 @@ class StackViewport extends Viewport implements IStackViewport {
       const requestType = RequestType.Interaction;
       const additionalDetails = { imageId };
       const options = {
-        targetBuffer: {
-          type: this.use16BitTexture ? undefined : 'Float32Array',
-        },
         preScale: {
           enabled: true,
         },
@@ -1833,17 +1887,19 @@ class StackViewport extends Viewport implements IStackViewport {
       }
 
       /**
-       * CSWIL will automatically choose the array type when no targetBuffer
-       * is provided. When CSWIL is initialized, the use16bit should match
-       * the settings of cornerstone3D (either preferSizeOverAccuracy or norm16
-       * textures need to be enabled)
+       * If use16bittexture is specified, the CSWIL will automatically choose the
+       * array type when no targetBuffer is provided. When CSWIL is initialized,
+       * the use16bit should match the settings of cornerstone3D (either preferSizeOverAccuracy
+       * or norm16 textures need to be enabled)
+       *
+       * If use16bittexture is not specified, we force the Float32Array for now
        */
       const priority = -5;
       const requestType = RequestType.Interaction;
       const additionalDetails = { imageId };
       const options = {
         targetBuffer: {
-          type: this.use16BitTexture ? undefined : 'Float32Array',
+          type: this.useNativeDataType ? undefined : 'Float32Array',
         },
         preScale: {
           enabled: true,
@@ -1952,9 +2008,7 @@ class StackViewport extends Viewport implements IStackViewport {
       direction,
       dimensions,
       spacing,
-      bitsAllocated,
       numComps,
-      numVoxels,
       imagePixelModule,
     } = this._getImageDataMetadata(image);
 
@@ -1965,10 +2019,8 @@ class StackViewport extends Viewport implements IStackViewport {
       direction,
       dimensions,
       spacing,
-      bitsAllocated,
       numComps,
-      numVoxels,
-      TypedArray: image.getPixelData().constructor,
+      pixelArray: image.getPixelData(),
     });
 
     // Set the scalar data of the vtkImageData object from the Cornerstone

package/src/RenderingEngine/Viewport.ts

@@ -111,6 +111,7 @@ class Viewport implements IViewport {
   customRenderViewportToCanvas: () => unknown;
   resize: () => void;
   getProperties: () => void;
+  updateRenderingPipeline: () => void;
 
   static get useCustomRenderingPipeline(): boolean {
     return false;
@@ -1222,7 +1223,7 @@ class Viewport implements IViewport {
     return { widthWorld: maxX - minX, heightWorld: maxY - minY };
   }
 
-  protected _shouldUse16BitTexture() {
+  protected _shouldUseNativeDataType() {
     const { useNorm16Texture, preferSizeOverAccuracy } =
       getConfiguration().rendering;
     return useNorm16Texture || preferSizeOverAccuracy;

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

@@ -75,7 +75,7 @@ function getRenderCanvas(
   // Fast drawing
   if (
     enabledElement.viewport.voi.windowWidth === 255 &&
-    enabledElement.viewport.voi.windowCenter === 128 &&
+    enabledElement.viewport.voi.windowCenter === 127 &&
     enabledElement.viewport.invert === false &&
     image.getCanvas &&
     image.getCanvas()

package/src/index.ts

@@ -33,6 +33,7 @@ import {
   getShouldUseSharedArrayBuffer,
   isCornerstoneInitialized,
   setUseCPURendering,
+  setPreferSizeOverAccuracy,
   setUseSharedArrayBuffer,
   resetUseCPURendering,
   resetUseSharedArrayBuffer,
@@ -70,7 +71,7 @@ export {
   // enums
   Enums,
   CONSTANTS,
-  Events as EVENTS, // CornerstoneWADOImageLoader uses this, Todo: remove it after fixing wado
+  Events as EVENTS, // CornerstoneDICOMImageLoader uses this, Todo: remove it after fixing wado
   //
   Settings,
   // Rendering Engine
@@ -113,6 +114,7 @@ export {
   // CPU Rendering
   getShouldUseCPURendering,
   setUseCPURendering,
+  setPreferSizeOverAccuracy,
   resetUseCPURendering,
   // SharedArrayBuffer
   getShouldUseSharedArrayBuffer,

package/src/init.ts

@@ -1,5 +1,6 @@
 import { getGPUTier } from 'detect-gpu';
 import { SharedArrayBufferModes } from './enums';
+import { getRenderingEngines } from './RenderingEngine/getRenderingEngine';
 let csRenderInitialized = false;
 let useSharedArrayBuffer = true;
 let sharedArrayBufferMode = SharedArrayBufferModes.TRUE;
@@ -10,8 +11,9 @@ import { Cornerstone3DConfig } from './types';
 const defaultConfig = {
   detectGPU: {},
   rendering: {
-    preferSizeOverAccuracy: false,
     useCPURendering: false,
+    // GPU rendering options
+    preferSizeOverAccuracy: false,
     useNorm16Texture: false, // _hasNorm16TextureSupport(),
     strictZSpacingForVolumeViewport: true,
   },
@@ -22,8 +24,9 @@ const defaultConfig = {
 let config = {
   detectGPU: {},
   rendering: {
-    preferSizeOverAccuracy: false,
     useCPURendering: false,
+    // GPU rendering options
+    preferSizeOverAccuracy: false,
     useNorm16Texture: false, // _hasNorm16TextureSupport(),
     strictZSpacingForVolumeViewport: true,
   },
@@ -68,21 +71,23 @@ function hasSharedArrayBuffer() {
   }
 }
 
-function _hasNorm16TextureSupport() {
-  const gl = _getGLContext();
+// Todo: commenting this out until proper support for int16 textures
+// are added to browsers, current implementation is buggy
+// function _hasNorm16TextureSupport() {
+//   const gl = _getGLContext();
 
-  if (gl) {
-    const ext = (gl as WebGL2RenderingContext).getExtension(
-      'EXT_texture_norm16'
-    );
+//   if (gl) {
+//     const ext = (gl as WebGL2RenderingContext).getExtension(
+//       'EXT_texture_norm16'
+//     );
 
-    if (ext) {
-      return true;
-    }
-  }
+//     if (ext) {
+//       return true;
+//     }
+//   }
 
-  return false;
-}
+//   return false;
+// }
 
 /**
  * Initialize the cornerstone-core. If the browser has a webgl context and
@@ -140,6 +145,13 @@ async function init(configuration = {}): Promise<boolean> {
 function setUseCPURendering(status: boolean): void {
   config.rendering.useCPURendering = status;
   csRenderInitialized = true;
+  _updateRenderingPipelinesForAllViewports();
+}
+
+function setPreferSizeOverAccuracy(status: boolean): void {
+  config.rendering.preferSizeOverAccuracy = status;
+  csRenderInitialized = true;
+  _updateRenderingPipelinesForAllViewports();
 }
 
 /**
@@ -150,6 +162,7 @@ function setUseCPURendering(status: boolean): void {
  */
 function resetUseCPURendering(): void {
   config.rendering.useCPURendering = !_hasActiveWebGLContext();
+  _updateRenderingPipelinesForAllViewports();
 }
 
 /**
@@ -225,6 +238,20 @@ function getConfiguration(): Cornerstone3DConfig {
 
 function setConfiguration(c: Cornerstone3DConfig) {
   config = c;
+  _updateRenderingPipelinesForAllViewports();
+}
+
+/**
+ * Update rendering pipelines for all viewports in all rendering engines.
+ * @returns {void}
+ * @category Initialization
+ */
+function _updateRenderingPipelinesForAllViewports(): void {
+  getRenderingEngines().forEach((engine) =>
+    engine
+      .getViewports()
+      .forEach((viewport) => viewport.updateRenderingPipeline?.())
+  );
 }
 
 export {
@@ -234,6 +261,7 @@ export {
   isCornerstoneInitialized,
   setUseCPURendering,
   setUseSharedArrayBuffer,
+  setPreferSizeOverAccuracy,
   resetUseCPURendering,
   resetUseSharedArrayBuffer,
   getConfiguration,

package/src/types/IImage.ts

@@ -2,6 +2,14 @@ import CPUFallbackLUT from './CPUFallbackLUT';
 import CPUFallbackColormap from './CPUFallbackColormap';
 import CPUFallbackEnabledElement from './CPUFallbackEnabledElement';
 
+type PixelDataTypedArray =
+  | Float32Array
+  | Int16Array
+  | Uint16Array
+  | Uint8Array
+  | Int8Array
+  | Uint8ClampedArray;
+
 /**
  * Cornerstone Image interface, it is used for both CPU and GPU rendering
  */
@@ -14,9 +22,9 @@ interface IImage {
   /** preScale object */
   preScale?: {
     /** boolean flag to indicate whether the image has been scaled */
-    scaled: boolean;
+    scaled?: boolean;
     /** scaling parameters */
-    scalingParameters: {
+    scalingParameters?: {
       /** modality of the image */
       modality?: string;
       /** rescale slop */
@@ -42,7 +50,7 @@ interface IImage {
   /** voiLUTFunction from metadata */
   voiLUTFunction: string;
   /** function that returns the pixelData as an array */
-  getPixelData: () => Array<number>;
+  getPixelData: () => PixelDataTypedArray;
   getCanvas: () => HTMLCanvasElement;
   /** image number of rows */
   rows: number;

package/src/types/IViewport.ts

@@ -101,6 +101,7 @@ interface IViewport {
   /** whether the viewport has custom rendering */
   customRenderViewportToCanvas: () => unknown;
   _getCorners(bounds: Array<number>): Array<number>[];
+  updateRenderingPipeline: () => void;
 }
 
 /**

package/src/utilities/loadImageToCanvas.ts

@@ -64,6 +64,7 @@ export default function loadImageToCanvas(
       targetBuffer: {
         type: useNorm16Texture ? undefined : 'Float32Array',
       },
+      useRGBA: true,
       preScale: {
         enabled: true,
       },