@cornerstonejs/core 2.0.0-beta.3 → 2.0.0-beta.5

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "",
   "main": "dist/umd/index.js",
-  "types": "dist/esm/index.d.ts",
+  "types": "dist/types",
   "module": "dist/esm/index.js",
   "repository": "https://github.com/cornerstonejs/cornerstone3D",
   "files": [
@@ -32,8 +32,7 @@
   "dependencies": {
     "@kitware/vtk.js": "27.3.1",
     "detect-gpu": "^5.0.22",
-    "gl-matrix": "^3.4.3",
-    "lodash.clonedeep": "4.5.0"
+    "gl-matrix": "^3.4.3"
   },
   "contributors": [
     {
@@ -46,5 +45,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "d78cf780d4383a61ea0a9762bafa4104666757a4"
+  "gitHead": "0767e6b927df9f41cf6e59ad13837de383c15c05"
 }

package/src/RenderingEngine/StackViewport.ts

@@ -1,7 +1,6 @@
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import type { vtkImageData as vtkImageDataType } from '@kitware/vtk.js/Common/DataModel/ImageData';
-import _cloneDeep from 'lodash.clonedeep';
 import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
 import { vec2, vec3, mat4 } from 'gl-matrix';
 import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
@@ -19,8 +18,9 @@ import {
   imageIdToURI,
   isImageActor,
   actorIsA,
+  imageRetrieveMetadataProvider,
 } from '../utilities';
-import {
+import type {
   Point2,
   Point3,
   VOIRange,
@@ -41,19 +41,21 @@ import {
   Mat3,
   ColormapRegistration,
   IImageCalibration,
+  IImagesLoader,
+  ImageLoadListener,
 } from '../types';
 import { ViewportInput } from '../types/IViewport';
 import drawImageSync from './helpers/cpuFallback/drawImageSync';
 import { getColormap } from './helpers/cpuFallback/colors/index';
 
-import { loadAndCacheImage } from '../loaders/imageLoader';
+import { loadAndCacheImage, ImageLoaderOptions } from '../loaders/imageLoader';
 import imageLoadPoolManager from '../requestPool/imageLoadPoolManager';
 import {
   InterpolationType,
   RequestType,
   Events,
-  CalibrationTypes,
   VOILUTFunctionType,
+  ViewportStatus,
 } from '../enums';
 import canvasToPixel from './helpers/cpuFallback/rendering/canvasToPixel';
 import pixelToCanvas from './helpers/cpuFallback/rendering/pixelToCanvas';
@@ -78,7 +80,7 @@ import {
   ImagePixelModule,
   ImagePlaneModule,
 } from '../types';
-import ViewportStatus from '../enums/ViewportStatus';
+import { createProgressive } from '../loaders/ProgressiveRetrieveImages';
 
 const EPSILON = 1; // Slice Thickness
 
@@ -115,7 +117,7 @@ type SetVOIOptions = {
  * is not available (or low performance). Read more about StackViewports in
  * the documentation section of this website.
  */
-class StackViewport extends Viewport implements IStackViewport {
+class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
   private imageIds: Array<string>;
   // current imageIdIndex that is rendered in the viewport
   private currentImageIdIndex: number;
@@ -123,6 +125,10 @@ class StackViewport extends Viewport implements IStackViewport {
   private targetImageIdIndex: number;
   // setTimeout if the image is debounced to be loaded
   private debouncedTimeout: number;
+  /**
+   * The progressive retrieval configuration used for this viewport.
+   */
+  protected imagesLoader: IImagesLoader = this;
 
   // Viewport Properties
   private voiRange: VOIRange;
@@ -187,7 +193,7 @@ class StackViewport extends Viewport implements IStackViewport {
 
   public setUseCPURendering(value: boolean) {
     this.useCPURendering = value;
-    this._configureRenderingPipeline();
+    this._configureRenderingPipeline(value);
   }
 
   static get useCustomRenderingPipeline(): boolean {
@@ -198,9 +204,9 @@ class StackViewport extends Viewport implements IStackViewport {
     this._configureRenderingPipeline();
   };
 
-  private _configureRenderingPipeline() {
+  private _configureRenderingPipeline(value?: boolean) {
     this.useNativeDataType = this._shouldUseNativeDataType();
-    this.useCPURendering = getShouldUseCPURendering();
+    this.useCPURendering = value ?? getShouldUseCPURendering();
 
     for (const [funcName, functions] of Object.entries(
       this.renderingPipelineFunctions
@@ -1434,6 +1440,17 @@ class StackViewport extends Viewport implements IStackViewport {
     this.imageIds = imageIds;
     this.currentImageIdIndex = currentImageIdIndex;
     this.targetImageIdIndex = currentImageIdIndex;
+    const imageRetrieveConfiguration = metaData.get(
+      imageRetrieveMetadataProvider.IMAGE_RETRIEVE_CONFIGURATION,
+      imageIds[currentImageIdIndex],
+      'stack'
+    );
+
+    this.imagesLoader = imageRetrieveConfiguration
+      ? (imageRetrieveConfiguration.create || createProgressive)(
+          imageRetrieveConfiguration
+        )
+      : this;
 
     // reset the stack
     this.stackInvalidated = true;
@@ -1583,15 +1600,13 @@ class StackViewport extends Viewport implements IStackViewport {
    * @param imageId - string representing the imageId
    * @param imageIdIndex - index of the imageId in the imageId list
    */
-  private async _loadAndDisplayImage(
+  private _loadAndDisplayImage(
     imageId: string,
     imageIdIndex: number
   ): Promise<string> {
-    await (this.useCPURendering
+    return this.useCPURendering
       ? this._loadAndDisplayImageCPU(imageId, imageIdIndex)
-      : this._loadAndDisplayImageGPU(imageId, imageIdIndex));
-
-    return imageId;
+      : this._loadAndDisplayImageGPU(imageId, imageIdIndex);
   }
 
   private _loadAndDisplayImageCPU(
@@ -1721,7 +1736,7 @@ class StackViewport extends Viewport implements IStackViewport {
 
       const priority = -5;
       const requestType = RequestType.Interaction;
-      const additionalDetails = { imageId };
+      const additionalDetails = { imageId, imageIdIndex };
       const options = {
         preScale: {
           enabled: true,
@@ -1746,113 +1761,132 @@ class StackViewport extends Viewport implements IStackViewport {
     });
   }
 
-  private _loadAndDisplayImageGPU(imageId: string, imageIdIndex: number) {
-    return new Promise((resolve, reject) => {
-      // 1. Load the image using the Image Loader
-      function successCallback(image, imageIdIndex, imageId) {
-        // Todo: trigger an event to allow applications to hook into END of loading state
-        // Currently we use loadHandlerManagers for this
-        // Perform this check after the image has finished loading
-        // in case the user has already scrolled away to another image.
-        // In that case, do not render this image.
-        if (this.currentImageIdIndex !== imageIdIndex) {
-          return;
-        }
+  public successCallback(imageId, image) {
+    const imageIdIndex = this.imageIds.indexOf(imageId);
+    // Todo: trigger an event to allow applications to hook into END of loading state
+    // Currently we use loadHandlerManagers for this
+    // Perform this check after the image has finished loading
+    // in case the user has already scrolled away to another image.
+    // In that case, do not render this image.
+    if (this.currentImageIdIndex !== imageIdIndex) {
+      return;
+    }
 
-        // If Photometric Interpretation is not the same for the next image we are trying to load
-        // invalidate the stack to recreate the VTK imageData
-        const csImgFrame = this.csImage?.imageFrame;
-        const imgFrame = image?.imageFrame;
-
-        // if a volume is decached into images then the imageFrame will be undefined
-        if (
-          csImgFrame?.photometricInterpretation !==
-            imgFrame?.photometricInterpretation ||
-          this.csImage?.photometricInterpretation !==
-            image?.photometricInterpretation
-        ) {
-          this.stackInvalidated = true;
-        }
+    // If Photometric Interpretation is not the same for the next image we are trying to load
+    // invalidate the stack to recreate the VTK imageData
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const csImgFrame = (<any>this.csImage)?.imageFrame;
+    const imgFrame = image?.imageFrame;
 
-        this._setCSImage(image);
+    // if a volume is decached into images then the imageFrame will be undefined
+    if (
+      csImgFrame?.photometricInterpretation !==
+        imgFrame?.photometricInterpretation ||
+      this.csImage?.photometricInterpretation !==
+        image?.photometricInterpretation
+    ) {
+      this.stackInvalidated = true;
+    }
 
-        const eventDetail: EventTypes.StackNewImageEventDetail = {
-          image,
-          imageId,
-          imageIdIndex,
-          viewportId: this.id,
-          renderingEngineId: this.renderingEngineId,
-        };
+    this._setCSImage(image);
 
-        triggerEvent(this.element, Events.STACK_NEW_IMAGE, eventDetail);
-        this._updateActorToDisplayImageId(image);
+    const eventDetail: EventTypes.StackNewImageEventDetail = {
+      image,
+      imageId,
+      imageIdIndex,
+      viewportId: this.id,
+      renderingEngineId: this.renderingEngineId,
+    };
 
-        // Trigger the image to be drawn on the next animation frame
-        this.render();
+    triggerEvent(this.element, Events.STACK_NEW_IMAGE, eventDetail);
+    this._updateActorToDisplayImageId(image);
 
-        // Update the viewport's currentImageIdIndex to reflect the newly
-        // rendered image
-        this.currentImageIdIndex = imageIdIndex;
-        resolve(imageId);
-      }
+    // Trigger the image to be drawn on the next animation frame
+    this.render();
 
-      function errorCallback(error, imageIdIndex, imageId) {
-        const eventDetail = {
-          error,
-          imageIdIndex,
-          imageId,
-        };
+    // Update the viewport's currentImageIdIndex to reflect the newly
+    // rendered image
+    this.currentImageIdIndex = imageIdIndex;
+  }
 
-        triggerEvent(eventTarget, Events.IMAGE_LOAD_ERROR, eventDetail);
-        reject(error);
-      }
+  public errorCallback(imageId, permanent, error) {
+    if (!permanent) {
+      return;
+    }
+    const imageIdIndex = this.imageIds.indexOf(imageId);
+    const eventDetail = {
+      error,
+      imageIdIndex,
+      imageId,
+    };
+
+    triggerEvent(eventTarget, Events.IMAGE_LOAD_ERROR, eventDetail);
+  }
+
+  public getLoaderImageOptions(imageId: string) {
+    const imageIdIndex = this.imageIds.indexOf(imageId);
+    const { transferSyntaxUID } = metaData.get('transferSyntax', imageId) || {};
+
+    /**
+     * 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 additionalDetails = { imageId, imageIdIndex };
+    const options = {
+      targetBuffer: {
+        type: this.useNativeDataType ? undefined : 'Float32Array',
+      },
+      preScale: {
+        enabled: true,
+      },
+      useRGBA: false,
+      transferSyntaxUID,
+      priority: 5,
+      requestType: RequestType.Interaction,
+      additionalDetails,
+    };
+    return options;
+  }
+
+  public loadImages(
+    imageIds: string[],
+    listener: ImageLoadListener
+  ): Promise<unknown> {
+    return Promise.allSettled(
+      imageIds.map((imageId) => {
+        const options = this.getLoaderImageOptions(
+          imageId
+        ) as ImageLoaderOptions;
 
-      function sendRequest(imageId, imageIdIndex, options) {
         return loadAndCacheImage(imageId, options).then(
           (image) => {
-            successCallback.call(this, image, imageIdIndex, imageId);
+            listener.successCallback(imageId, image);
+            return imageId;
           },
           (error) => {
-            errorCallback.call(this, error, imageIdIndex, imageId);
+            listener.errorCallback(imageId, true, error);
+            return imageId;
           }
         );
-      }
-
-      /**
-       * 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.useNativeDataType ? undefined : 'Float32Array',
-        },
-        preScale: {
-          enabled: true,
-        },
-        useRGBA: false,
-      };
+      })
+    );
+  }
 
-      const eventDetail: EventTypes.PreStackNewImageEventDetail = {
-        imageId,
-        imageIdIndex,
-        viewportId: this.id,
-        renderingEngineId: this.renderingEngineId,
-      };
-      triggerEvent(this.element, Events.PRE_STACK_NEW_IMAGE, eventDetail);
+  private _loadAndDisplayImageGPU(imageId: string, imageIdIndex: number) {
+    const eventDetail: EventTypes.PreStackNewImageEventDetail = {
+      imageId,
+      imageIdIndex,
+      viewportId: this.id,
+      renderingEngineId: this.renderingEngineId,
+    };
+    triggerEvent(this.element, Events.PRE_STACK_NEW_IMAGE, eventDetail);
 
-      imageLoadPoolManager.addRequest(
-        sendRequest.bind(this, imageId, imageIdIndex, options),
-        requestType,
-        additionalDetails,
-        priority
-      );
+    return this.imagesLoader.loadImages([imageId], this).then((v) => {
+      return imageId;
     });
   }
 
@@ -1957,7 +1991,7 @@ class StackViewport extends Viewport implements IStackViewport {
 
     // Cache camera props so we can trigger one camera changed event after
     // The full transition.
-    const previousCameraProps = _cloneDeep(this.getCamera());
+    const previousCameraProps = structuredClone(this.getCamera());
     if (sameImageData && !this.stackInvalidated) {
       // 3a. If we can reuse it, replace the scalar data under the hood
       this._updateVTKImageDataFromCornerstoneImage(image);
@@ -2145,7 +2179,7 @@ class StackViewport extends Viewport implements IStackViewport {
    * Loads the image based on the provided imageIdIndex
    * @param imageIdIndex - number represents imageId index
    */
-  private async _setImageIdIndex(imageIdIndex: number): Promise<string> {
+  private _setImageIdIndex(imageIdIndex: number): Promise<string> {
     if (imageIdIndex >= this.imageIds.length) {
       throw new Error(
         `ImageIdIndex provided ${imageIdIndex} is invalid, the stack only has ${this.imageIds.length} elements`
@@ -2159,12 +2193,7 @@ class StackViewport extends Viewport implements IStackViewport {
 
     // Todo: trigger an event to allow applications to hook into START of loading state
     // Currently we use loadHandlerManagers for this
-    const imageId = await this._loadAndDisplayImage(
-      this.imageIds[imageIdIndex],
-      imageIdIndex
-    );
-
-    return imageId;
+    return this._loadAndDisplayImage(this.imageIds[imageIdIndex], imageIdIndex);
   }
 
   private resetCameraCPU(resetPan, resetZoom) {
@@ -2272,18 +2301,18 @@ class StackViewport extends Viewport implements IStackViewport {
    * @param imageIdIndex - number represents imageId index in the list of
    * provided imageIds in setStack
    */
-  public async setImageIdIndex(imageIdIndex: number): Promise<string> {
+  public setImageIdIndex(imageIdIndex: number): Promise<string> {
     this._throwIfDestroyed();
 
     // If we are already on this imageId index, stop here
     if (this.currentImageIdIndex === imageIdIndex) {
-      return this.getCurrentImageId();
+      return Promise.resolve(this.getCurrentImageId());
     }
 
     // Otherwise, get the imageId and attempt to display it
-    const imageId = this._setImageIdIndex(imageIdIndex);
+    const imageIdPromise = this._setImageIdIndex(imageIdIndex);
 
-    return imageId;
+    return imageIdPromise;
   }
 
   /**

package/src/RenderingEngine/Viewport.ts

@@ -4,7 +4,6 @@ import vtkMath from '@kitware/vtk.js/Common/Core/Math';
 import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
 
 import { vec2, vec3 } from 'gl-matrix';
-import _cloneDeep from 'lodash.clonedeep';
 
 import Events from '../enums/Events';
 import ViewportStatus from '../enums/ViewportStatus';
@@ -103,11 +102,11 @@ class Viewport implements IViewport {
       this.renderingEngineId
     );
 
-    this.defaultOptions = _cloneDeep(props.defaultOptions);
+    this.defaultOptions = structuredClone(props.defaultOptions);
     this.suppressEvents = props.defaultOptions.suppressEvents
       ? props.defaultOptions.suppressEvents
       : false;
-    this.options = _cloneDeep(props.defaultOptions);
+    this.options = structuredClone(props.defaultOptions);
     this.isDisabled = false;
   }
 
@@ -180,7 +179,7 @@ class Viewport implements IViewport {
    * @param immediate - If `true`, renders the viewport after the options are set.
    */
   public setOptions(options: ViewportInputOptions, immediate = false): void {
-    this.options = <ViewportInputOptions>_cloneDeep(options);
+    this.options = <ViewportInputOptions>structuredClone(options);
 
     // TODO When this is needed we need to move the camera position.
     // We can steal some logic from the tools we build to do this.
@@ -198,7 +197,7 @@ class Viewport implements IViewport {
    * @param immediate - If `true`, renders the viewport after the options are reset.
    */
   public reset(immediate = false) {
-    this.options = _cloneDeep(this.defaultOptions);
+    this.options = structuredClone(this.defaultOptions);
 
     // TODO When this is needed we need to move the camera position.
     // We can steal some logic from the tools we build to do this.
@@ -660,7 +659,7 @@ class Viewport implements IViewport {
       flipVertical: false,
     });
 
-    const previousCamera = _cloneDeep(this.getCamera());
+    const previousCamera = structuredClone(this.getCamera());
     const bounds = renderer.computeVisiblePropBounds();
     const focalPoint = <Point3>[0, 0, 0];
     const imageData = this.getDefaultImageData();
@@ -775,9 +774,9 @@ class Viewport implements IViewport {
       clippingRange: clippingRangeToUse,
     });
 
-    const modifiedCamera = _cloneDeep(this.getCamera());
+    const modifiedCamera = structuredClone(this.getCamera());
 
-    this.setFitToCanvasCamera(_cloneDeep(this.getCamera()));
+    this.setFitToCanvasCamera(structuredClone(this.getCamera()));
 
     if (storeAsInitialCamera) {
       this.setInitialCamera(modifiedCamera);
@@ -1007,7 +1006,7 @@ class Viewport implements IViewport {
     storeAsInitialCamera = false
   ): void {
     const vtkCamera = this.getVtkActiveCamera();
-    const previousCamera = _cloneDeep(this.getCamera());
+    const previousCamera = structuredClone(this.getCamera());
     const updatedCamera = Object.assign({}, previousCamera, cameraInterface);
     const {
       viewUp,