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

package/dist/esm/RenderingEngine/StackViewport.js

@@ -1,38 +1,44 @@
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData 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 vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
 import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
-import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import { mat4, vec2, vec3 } from 'gl-matrix';
+import eventTarget from '../eventTarget';
 import * as metaData from '../metaData';
+import { actorIsA, colormap as colormapUtils, createSigmoidRGBTransferFunction, imageIdToURI, imageRetrieveMetadataProvider, invertRgbTransferFunction, isEqual, isImageActor, triggerEvent, updateVTKImageDataWithCornerstoneImage, windowLevel as windowLevelUtil, } from '../utilities';
 import Viewport from './Viewport';
-import eventTarget from '../eventTarget';
-import { triggerEvent, isEqual, invertRgbTransferFunction, createSigmoidRGBTransferFunction, windowLevel as windowLevelUtil, imageIdToURI, isImageActor, actorIsA, } from '../utilities';
-import drawImageSync from './helpers/cpuFallback/drawImageSync';
 import { getColormap } from './helpers/cpuFallback/colors/index';
+import drawImageSync from './helpers/cpuFallback/drawImageSync';
+import { Events, InterpolationType, MetadataModules, RequestType, VOILUTFunctionType, ViewportStatus, } from '../enums';
 import { loadAndCacheImage } from '../loaders/imageLoader';
 import imageLoadPoolManager from '../requestPool/imageLoadPoolManager';
-import { InterpolationType, RequestType, Events, VOILUTFunctionType, } from '../enums';
+import calculateTransform from './helpers/cpuFallback/rendering/calculateTransform';
 import canvasToPixel from './helpers/cpuFallback/rendering/canvasToPixel';
-import pixelToCanvas from './helpers/cpuFallback/rendering/pixelToCanvas';
 import getDefaultViewport from './helpers/cpuFallback/rendering/getDefaultViewport';
-import calculateTransform from './helpers/cpuFallback/rendering/calculateTransform';
+import pixelToCanvas from './helpers/cpuFallback/rendering/pixelToCanvas';
 import resize from './helpers/cpuFallback/rendering/resize';
-import resetCamera from './helpers/cpuFallback/rendering/resetCamera';
-import { Transform } from './helpers/cpuFallback/rendering/transform';
-import { getConfiguration, getShouldUseCPURendering } from '../init';
 import cache from '../cache';
-import correctShift from './helpers/cpuFallback/rendering/correctShift';
+import { getConfiguration, getShouldUseCPURendering } from '../init';
+import { createProgressive } from '../loaders/ProgressiveRetrieveImages';
 import createLinearRGBTransferFunction from '../utilities/createLinearRGBTransferFunction';
-import ViewportStatus from '../enums/ViewportStatus';
+import { getTransferFunctionNodes, setTransferFunctionNodes, } from '../utilities/transferFunctionUtils';
+import correctShift from './helpers/cpuFallback/rendering/correctShift';
+import resetCamera from './helpers/cpuFallback/rendering/resetCamera';
+import { Transform } from './helpers/cpuFallback/rendering/transform';
+import { findMatchingColormap } from '../utilities/colormap';
 const EPSILON = 1;
 class StackViewport extends Viewport {
     constructor(props) {
         super(props);
+        this.imagesLoader = this;
+        this.perImageIdDefaultProperties = new Map();
         this.voiUpdatedWithSetProperties = false;
         this.invert = false;
+        this.initialInvert = false;
+        this.initialTransferFunctionNodes = null;
         this.stackInvalidated = false;
         this._publishCalibratedEvent = false;
         this.useNativeDataType = false;
@@ -49,20 +55,8 @@ class StackViewport extends Viewport {
                 resize(this._cpuFallbackEnabledElement);
             }
         };
-        this.getFrameOfReferenceUID = () => {
-            const imageId = this.getCurrentImageId();
-            if (!imageId) {
-                return;
-            }
-            const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
-            if (!imagePlaneModule) {
-                return;
-            }
-            return imagePlaneModule.frameOfReferenceUID;
-        };
-        this.getCornerstoneImage = () => {
-            return this.csImage;
-        };
+        this.getFrameOfReferenceUID = (sliceIndex) => this.getImagePlaneReferenceData(sliceIndex)?.FrameOfReferenceUID;
+        this.getCornerstoneImage = () => this.csImage;
         this.createActorMapper = (imageData) => {
             const mapper = vtkImageMapper.newInstance();
             mapper.setInputData(imageData);
@@ -77,10 +71,27 @@ class StackViewport extends Viewport {
             }
             return actor;
         };
+        this.getNumberOfSlices = () => {
+            return this.imageIds.length;
+        };
+        this.getDefaultProperties = (imageId) => {
+            let imageProperties;
+            if (imageId !== undefined) {
+                imageProperties = this.perImageIdDefaultProperties.get(imageId);
+            }
+            if (imageProperties !== undefined) {
+                return imageProperties;
+            }
+            return {
+                ...this.globalDefaultProperties,
+                rotation: this.getRotation(),
+            };
+        };
         this.getProperties = () => {
-            const { voiRange, VOILUTFunction, interpolationType, invert, voiUpdatedWithSetProperties, } = this;
+            const { colormap, voiRange, VOILUTFunction, interpolationType, invert, voiUpdatedWithSetProperties, } = this;
             const rotation = this.getRotation();
             return {
+                colormap,
                 voiRange,
                 VOILUTFunction,
                 interpolationType,
@@ -105,6 +116,25 @@ class StackViewport extends Viewport {
                 ? initialToCurrentViewUpAngle
                 : (360 - initialToCurrentViewUpAngle) % 360;
         };
+        this.setRotation = (rotation) => {
+            const previousCamera = this.getCamera();
+            this.useCPURendering
+                ? this.setRotationCPU(rotation)
+                : this.setRotationGPU(rotation);
+            if (this._suppressCameraModifiedEvents) {
+                return;
+            }
+            const camera = this.getCamera();
+            const eventDetail = {
+                previousCamera,
+                camera,
+                element: this.element,
+                viewportId: this.id,
+                renderingEngineId: this.renderingEngineId,
+                rotation,
+            };
+            triggerEvent(this.element, Events.CAMERA_MODIFIED, eventDetail);
+        };
         this.renderImageObject = (image) => {
             this._setCSImage(image);
             const renderFn = this.useCPURendering
@@ -116,18 +146,17 @@ class StackViewport extends Viewport {
             image.isPreScaled = image.preScale?.scaled;
             this.csImage = image;
         };
-        this.canvasToWorldCPU = (canvasPos) => {
+        this.canvasToWorldCPU = (canvasPos, worldPos = [0, 0, 0]) => {
             if (!this._cpuFallbackEnabledElement.image) {
                 return;
             }
             const [px, py] = canvasToPixel(this._cpuFallbackEnabledElement, canvasPos);
             const { origin, spacing, direction } = this.getImageData();
-            const worldPos = vec3.fromValues(0, 0, 0);
             const iVector = direction.slice(0, 3);
             const jVector = direction.slice(3, 6);
             vec3.scaleAndAdd(worldPos, origin, iVector, px * spacing[0]);
             vec3.scaleAndAdd(worldPos, worldPos, jVector, py * spacing[1]);
-            return [worldPos[0], worldPos[1], worldPos[2]];
+            return worldPos;
         };
         this.worldToCanvasCPU = (worldPos) => {
             const { spacing, direction, origin } = this.getImageData();
@@ -190,6 +219,9 @@ class StackViewport extends Viewport {
         this.getCurrentImageIdIndex = () => {
             return this.currentImageIdIndex;
         };
+        this.getSliceIndex = () => {
+            return this.currentImageIdIndex;
+        };
         this.getTargetImageIdIndex = () => {
             return this.targetImageIdIndex;
         };
@@ -205,8 +237,9 @@ class StackViewport extends Viewport {
         this.hasImageURI = (imageURI) => {
             const imageIds = this.imageIds;
             for (let i = 0; i < imageIds.length; i++) {
-                if (imageIdToURI(imageIds[i]) === imageURI)
+                if (imageIdToURI(imageIds[i]) === imageURI) {
                     return true;
+                }
             }
             return false;
         };
@@ -246,6 +279,22 @@ class StackViewport extends Viewport {
                 cpu: this.setCameraCPU,
                 gpu: super.setCamera,
             },
+            getPan: {
+                cpu: this.getPanCPU,
+                gpu: super.getPan,
+            },
+            setPan: {
+                cpu: this.setPanCPU,
+                gpu: super.setPan,
+            },
+            getZoom: {
+                cpu: this.getZoomCPU,
+                gpu: super.getZoom,
+            },
+            setZoom: {
+                cpu: this.setZoomCPU,
+                gpu: super.setZoom,
+            },
             setVOI: {
                 cpu: this.setVOICPU,
                 gpu: this.setVOIGPU,
@@ -334,14 +383,14 @@ class StackViewport extends Viewport {
     }
     setUseCPURendering(value) {
         this.useCPURendering = value;
-        this._configureRenderingPipeline();
+        this._configureRenderingPipeline(value);
     }
     static get useCustomRenderingPipeline() {
         return getShouldUseCPURendering();
     }
-    _configureRenderingPipeline() {
+    _configureRenderingPipeline(value) {
         this.useNativeDataType = this._shouldUseNativeDataType();
-        this.useCPURendering = getShouldUseCPURendering();
+        this.useCPURendering = value ?? getShouldUseCPURendering();
         for (const [funcName, functions] of Object.entries(this.renderingPipelineFunctions)) {
             this[funcName] = this.useCPURendering ? functions.cpu : functions.gpu;
         }
@@ -395,7 +444,7 @@ class StackViewport extends Viewport {
             metadata: { Modality: this.modality },
             scaling: this.scaling,
             hasPixelSpacing: this.hasPixelSpacing,
-            calibration: this.calibration,
+            calibration: { ...this.csImage.calibration, ...this.calibration },
             preScale: {
                 ...this.csImage.preScale,
             },
@@ -421,17 +470,17 @@ class StackViewport extends Viewport {
                     const pixelCoord = canvasToPixel(this._cpuFallbackEnabledElement, canvasPoint);
                     return [pixelCoord[0], pixelCoord[1], 0];
                 },
-                indexToWorld: (point) => {
+                indexToWorld: (point, destPoint) => {
                     const canvasPoint = pixelToCanvas(this._cpuFallbackEnabledElement, [
                         point[0],
                         point[1],
                     ]);
-                    return this.canvasToWorldCPU(canvasPoint);
+                    return this.canvasToWorldCPU(canvasPoint, destPoint);
                 },
             },
             scalarData: this.cpuImagePixelData,
             hasPixelSpacing: this.hasPixelSpacing,
-            calibration: this.calibration,
+            calibration: { ...this.csImage.calibration, ...this.calibration },
             preScale: {
                 ...this.csImage.preScale,
             },
@@ -443,13 +492,14 @@ class StackViewport extends Viewport {
         const { windowWidth, windowCenter, voiLUTFunction } = image;
         const { modality } = metaData.get('generalSeriesModule', imageId);
         const imageIdScalingFactor = metaData.get('scalingModule', imageId);
+        const calibration = metaData.get(MetadataModules.CALIBRATION, imageId);
         if (modality === 'PT' && imageIdScalingFactor) {
             this._addScalingToViewport(imageIdScalingFactor);
         }
         this.modality = modality;
         const voiLUTFunctionEnum = this._getValidVOILUTFunction(voiLUTFunction);
         this.VOILUTFunction = voiLUTFunctionEnum;
-        this.calibration = null;
+        this.calibration = calibration;
         let imagePlaneModule = this._getImagePlaneModule(imageId);
         if (!this.useCPURendering) {
             imagePlaneModule = this.calibrateIfNecessary(imageId, imagePlaneModule);
@@ -476,8 +526,9 @@ class StackViewport extends Viewport {
         const { scale } = calibration || {};
         this.hasPixelSpacing = scale > 0 || imagePlaneModule.rowPixelSpacing > 0;
         imagePlaneModule.calibration = calibration;
-        if (!isUpdated)
+        if (!isUpdated) {
             return imagePlaneModule;
+        }
         this.calibration = calibration;
         this._publishCalibratedEvent = true;
         this._calibrationEvent = {
@@ -486,10 +537,44 @@ class StackViewport extends Viewport {
         };
         return imagePlaneModule;
     }
-    setProperties({ voiRange, VOILUTFunction, invert, interpolationType, rotation, } = {}, suppressEvents = false) {
+    setDefaultProperties(ViewportProperties, imageId) {
+        if (imageId == null) {
+            this.globalDefaultProperties = ViewportProperties;
+        }
+        else {
+            this.perImageIdDefaultProperties.set(imageId, ViewportProperties);
+            if (this.getCurrentImageId() === imageId) {
+                this.setProperties(ViewportProperties);
+            }
+        }
+    }
+    clearDefaultProperties(imageId) {
+        if (imageId == null) {
+            this.globalDefaultProperties = {};
+            this.resetProperties();
+        }
+        else {
+            this.perImageIdDefaultProperties.delete(imageId);
+            this.resetToDefaultProperties();
+        }
+    }
+    setProperties({ colormap, voiRange, VOILUTFunction, invert, interpolationType, rotation, } = {}, suppressEvents = false) {
         this.viewportStatus = this.csImage
             ? ViewportStatus.PRE_RENDER
             : ViewportStatus.LOADING;
+        if (this.globalDefaultProperties == null) {
+            this.setDefaultProperties({
+                colormap,
+                voiRange,
+                VOILUTFunction,
+                invert,
+                interpolationType,
+                rotation,
+            });
+        }
+        if (typeof colormap !== 'undefined') {
+            this.setColormap(colormap);
+        }
         if (typeof voiRange !== 'undefined') {
             const voiUpdatedWithSetProperties = true;
             this.setVOI(voiRange, { suppressEvents, voiUpdatedWithSetProperties });
@@ -529,11 +614,49 @@ class StackViewport extends Viewport {
             voiRange = this._getVOIRangeForCurrentImage();
         }
         this.setVOI(voiRange);
+        this.setInvertColor(this.initialInvert);
+        this.setInterpolationType(InterpolationType.LINEAR);
+        if (this.getRotation() !== 0) {
+            this.setRotation(0);
+        }
+        const transferFunction = this.getTransferFunction();
+        setTransferFunctionNodes(transferFunction, this.initialTransferFunctionNodes);
+        const nodes = getTransferFunctionNodes(transferFunction);
+        const RGBPoints = nodes.reduce((acc, node) => {
+            acc.push(node[0], node[1], node[2], node[3]);
+            return acc;
+        }, []);
+        const defaultActor = this.getDefaultActor();
+        const matchedColormap = findMatchingColormap(RGBPoints, defaultActor.actor);
+        this.setColormap(matchedColormap);
+    }
+    resetToDefaultProperties() {
+        this.cpuRenderingInvalidated = true;
+        this.viewportStatus = ViewportStatus.PRE_RENDER;
+        this.fillWithBackgroundColor();
+        if (this.useCPURendering) {
+            this._cpuFallbackEnabledElement.renderingTools = {};
+        }
+        const currentImageId = this.getCurrentImageId();
+        const properties = this.perImageIdDefaultProperties.get(currentImageId) ||
+            this.globalDefaultProperties;
+        if (properties.colormap?.name) {
+            this.setColormap(properties.colormap);
+        }
+        let voiRange;
+        if (properties.voiRange == undefined) {
+            voiRange = this._getVOIRangeForCurrentImage();
+        }
+        else {
+            voiRange = properties.voiRange;
+        }
+        this.setVOI(voiRange);
         if (this.getRotation() !== 0) {
             this.setRotation(0);
         }
         this.setInterpolationType(InterpolationType.LINEAR);
         this.setInvertColor(false);
+        this.render();
     }
     _setPropertiesFromCache() {
         const { interpolationType, invert } = this;
@@ -625,6 +748,25 @@ class StackViewport extends Viewport {
         };
         triggerEvent(this.element, Events.CAMERA_MODIFIED, eventDetail);
     }
+    getPanCPU() {
+        const { viewport } = this._cpuFallbackEnabledElement;
+        return [viewport.translation.x, viewport.translation.y];
+    }
+    setPanCPU(pan) {
+        const camera = this.getCameraCPU();
+        this.setCameraCPU({
+            ...camera,
+            focalPoint: [...pan.map((p) => -p), 0],
+        });
+    }
+    getZoomCPU() {
+        const { viewport } = this._cpuFallbackEnabledElement;
+        return viewport.scale;
+    }
+    setZoomCPU(zoom) {
+        const camera = this.getCameraCPU();
+        this.setCameraCPU({ ...camera, scale: zoom });
+    }
     setFlipCPU({ flipHorizontal, flipVertical }) {
         const { viewport } = this._cpuFallbackEnabledElement;
         if (flipHorizontal !== undefined) {
@@ -636,30 +778,13 @@ class StackViewport extends Viewport {
             this.flipVertical = viewport.vflip;
         }
     }
-    setRotation(rotation) {
-        const previousCamera = this.getCamera();
-        this.useCPURendering
-            ? this.setRotationCPU(rotation)
-            : this.setRotationGPU(rotation);
-        const camera = this.getCamera();
-        const eventDetail = {
-            previousCamera,
-            camera,
-            element: this.element,
-            viewportId: this.id,
-            renderingEngineId: this.renderingEngineId,
-            rotation,
-        };
-        triggerEvent(this.element, Events.CAMERA_MODIFIED, eventDetail);
-    }
     setVOILUTFunction(voiLUTFunction, suppressEvents) {
         if (this.useCPURendering) {
             throw new Error('VOI LUT function is not supported in CPU rendering');
         }
         const newVOILUTFunction = this._getValidVOILUTFunction(voiLUTFunction);
         let forceRecreateLUTFunction = false;
-        if (this.VOILUTFunction !== VOILUTFunctionType.LINEAR &&
-            newVOILUTFunction === VOILUTFunctionType.LINEAR) {
+        if (this.VOILUTFunction !== newVOILUTFunction) {
             forceRecreateLUTFunction = true;
         }
         this.VOILUTFunction = newVOILUTFunction;
@@ -671,14 +796,23 @@ class StackViewport extends Viewport {
         viewport.rotation = rotation;
     }
     setRotationGPU(rotation) {
+        const panFit = this.getPan(this.fitToCanvasCamera);
+        const pan = this.getPan();
+        const panSub = vec2.sub([0, 0], panFit, pan);
+        this.setPan(panSub, false);
         const { flipVertical } = this.getCamera();
         const initialViewUp = flipVertical
             ? vec3.negate(vec3.create(), this.initialViewUp)
             : this.initialViewUp;
-        this.setCamera({
+        this.setCameraNoEvent({
             viewUp: initialViewUp,
         });
         this.getVtkActiveCamera().roll(-rotation);
+        const afterPan = this.getPan();
+        const afterPanFit = this.getPan(this.fitToCanvasCamera);
+        const newCenter = vec2.sub([0, 0], afterPan, afterPanFit);
+        const newOffset = vec2.add([0, 0], panFit, newCenter);
+        this.setPan(newOffset, false);
     }
     setInterpolationTypeGPU(interpolationType) {
         const defaultActor = this.getDefaultActor();
@@ -770,6 +904,17 @@ class StackViewport extends Viewport {
             triggerEvent(this.element, Events.VOI_MODIFIED, eventDetail);
         }
     }
+    getTransferFunction() {
+        const defaultActor = this.getDefaultActor();
+        if (!defaultActor) {
+            return;
+        }
+        if (!isImageActor(defaultActor)) {
+            return;
+        }
+        const imageActor = defaultActor.actor;
+        return imageActor.getProperty().getRGBTransferFunction(0);
+    }
     setVOIGPU(voiRange, options = {}) {
         const { suppressEvents = false, forceRecreateLUTFunction = false, voiUpdatedWithSetProperties = false, } = options;
         if (voiRange &&
@@ -807,6 +952,8 @@ class StackViewport extends Viewport {
                 invertRgbTransferFunction(transferFunction);
             }
             imageActor.getProperty().setRGBTransferFunction(0, transferFunction);
+            this.initialTransferFunctionNodes =
+                getTransferFunctionNodes(transferFunction);
         }
         if (!isSigmoidTFun) {
             transferFunction.setRange(voiRangeToUse.lower, voiRangeToUse.upper);
@@ -848,7 +995,7 @@ class StackViewport extends Viewport {
         }
         return numberOfComponents;
     }
-    _getImageDataMetadata(image) {
+    getImageDataMetadata(image) {
         const { imagePlaneModule, imagePixelModule } = this.buildMetadata(image);
         let rowCosines, columnCosines;
         rowCosines = imagePlaneModule.rowCosines;
@@ -885,6 +1032,28 @@ class StackViewport extends Viewport {
             imagePixelModule,
         };
     }
+    getImagePlaneReferenceData(sliceIndex = this.getCurrentImageIdIndex()) {
+        const imageId = this.imageIds[sliceIndex];
+        if (!imageId) {
+            return;
+        }
+        const imagePlaneModule = metaData.get(MetadataModules.IMAGE_PLANE, imageId);
+        if (!imagePlaneModule) {
+            return;
+        }
+        const { imagePositionPatient, frameOfReferenceUID: FrameOfReferenceUID } = imagePlaneModule;
+        let { rowCosines, columnCosines } = imagePlaneModule;
+        rowCosines ||= [1, 0, 0];
+        columnCosines ||= [0, 1, 0];
+        const viewPlaneNormal = (vec3.cross([0, 0, 0], columnCosines, rowCosines));
+        return {
+            FrameOfReferenceUID,
+            viewPlaneNormal,
+            cameraFocalPoint: imagePositionPatient,
+            referencedImageId: imageId,
+            sliceIndex,
+        };
+    }
     _getCameraOrientation(imageDataDirection) {
         const viewPlaneNormal = imageDataDirection.slice(6, 9).map((x) => -x);
         const viewUp = imageDataDirection.slice(3, 6).map((x) => -x);
@@ -897,25 +1066,40 @@ class StackViewport extends Viewport {
             viewUp: [viewUp[0], viewUp[1], viewUp[2]],
         };
     }
-    _createVTKImageData({ origin, direction, dimensions, spacing, numComps, pixelArray, }) {
+    createVTKImageData({ origin, direction, dimensions, spacing, numComps, pixelArray, }) {
         const values = new pixelArray.constructor(pixelArray.length);
         const scalarArray = vtkDataArray.newInstance({
             name: 'Pixels',
             numberOfComponents: numComps,
             values: values,
         });
-        this._imageData = vtkImageData.newInstance();
-        this._imageData.setDimensions(dimensions);
-        this._imageData.setSpacing(spacing);
-        this._imageData.setDirection(direction);
-        this._imageData.setOrigin(origin);
-        this._imageData.getPointData().setScalars(scalarArray);
+        const imageData = vtkImageData.newInstance();
+        imageData.setDimensions(dimensions);
+        imageData.setSpacing(spacing);
+        imageData.setDirection(direction);
+        imageData.setOrigin(origin);
+        imageData.getPointData().setScalars(scalarArray);
+        return imageData;
+    }
+    _createVTKImageData({ origin, direction, dimensions, spacing, numComps, pixelArray, }) {
+        this._imageData = this.createVTKImageData({
+            origin,
+            direction,
+            dimensions,
+            spacing,
+            numComps,
+            pixelArray,
+        });
     }
     async setStack(imageIds, currentImageIdIndex = 0) {
         this._throwIfDestroyed();
         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;
         this.stackInvalidated = true;
         this.flipVertical = false;
         this.flipHorizontal = false;
@@ -976,33 +1160,12 @@ class StackViewport extends Viewport {
             origin = [0, 0, 0];
         }
         this._imageData.setOrigin(origin);
-        this._updatePixelData(image);
-    }
-    _updatePixelData(image) {
-        const pixelData = image.getPixelData();
-        const scalars = this._imageData.getPointData().getScalars();
-        const scalarData = scalars.getData();
-        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];
-            }
-            image.rgba = false;
-            image.getPixelData = () => newPixelData;
-            scalarData.set(newPixelData);
-        }
-        else {
-            scalarData.set(pixelData);
-        }
-        this._imageData.modified();
+        updateVTKImageDataWithCornerstoneImage(this._imageData, image);
     }
-    async _loadAndDisplayImage(imageId, imageIdIndex) {
-        await (this.useCPURendering
+    _loadAndDisplayImage(imageId, imageIdIndex) {
+        return this.useCPURendering
             ? this._loadAndDisplayImageCPU(imageId, imageIdIndex)
-            : this._loadAndDisplayImageGPU(imageId, imageIdIndex));
-        return imageId;
+            : this._loadAndDisplayImageGPU(imageId, imageIdIndex);
     }
     _loadAndDisplayImageCPU(imageId, imageIdIndex) {
         return new Promise((resolve, reject) => {
@@ -1079,12 +1242,13 @@ class StackViewport extends Viewport {
             }
             const priority = -5;
             const requestType = RequestType.Interaction;
-            const additionalDetails = { imageId };
+            const additionalDetails = { imageId, imageIdIndex };
             const options = {
                 preScale: {
                     enabled: true,
                 },
                 useRGBA: true,
+                requestType,
             };
             const eventDetail = {
                 imageId,
@@ -1096,70 +1260,99 @@ class StackViewport extends Viewport {
             imageLoadPoolManager.addRequest(sendRequest.bind(this, imageId, imageIdIndex, options), requestType, additionalDetails, priority);
         });
     }
+    successCallback(imageId, image) {
+        const imageIdIndex = this.imageIds.indexOf(imageId);
+        if (this.currentImageIdIndex !== imageIdIndex) {
+            return;
+        }
+        const csImgFrame = this.csImage?.imageFrame;
+        const imgFrame = image?.imageFrame;
+        const photometricInterpretation = csImgFrame?.photometricInterpretation ||
+            this.csImage?.photometricInterpretation;
+        const newPhotometricInterpretation = imgFrame?.photometricInterpretation || image?.photometricInterpretation;
+        if (photometricInterpretation !== newPhotometricInterpretation) {
+            this.stackInvalidated = true;
+        }
+        this._setCSImage(image);
+        const eventDetail = {
+            image,
+            imageId,
+            imageIdIndex,
+            viewportId: this.id,
+            renderingEngineId: this.renderingEngineId,
+        };
+        this._updateActorToDisplayImageId(image);
+        triggerEvent(this.element, Events.STACK_NEW_IMAGE, eventDetail);
+        this.render();
+        this.currentImageIdIndex = imageIdIndex;
+    }
+    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);
+    }
+    getLoaderImageOptions(imageId) {
+        const imageIdIndex = this.imageIds.indexOf(imageId);
+        const { transferSyntaxUID } = metaData.get('transferSyntax', imageId) || {};
+        const additionalDetails = { imageId, imageIdIndex };
+        const options = {
+            targetBuffer: {
+                type: this.useNativeDataType ? undefined : 'Float32Array',
+            },
+            preScale: {
+                enabled: true,
+            },
+            useRGBA: false,
+            transferSyntaxUID,
+            useNativeDataType: this.useNativeDataType,
+            priority: 5,
+            requestType: RequestType.Interaction,
+            additionalDetails,
+        };
+        return options;
+    }
+    async loadImages(imageIds, listener) {
+        const resultList = await Promise.allSettled(imageIds.map((imageId) => {
+            const options = this.getLoaderImageOptions(imageId);
+            return loadAndCacheImage(imageId, options).then((image) => {
+                listener.successCallback(imageId, image);
+                return imageId;
+            }, (error) => {
+                listener.errorCallback(imageId, true, error);
+                return imageId;
+            });
+        }));
+        const errorList = resultList.filter((item) => item.status === 'rejected');
+        if (errorList && errorList.length) {
+            const event = new CustomEvent(Events.IMAGE_LOAD_ERROR, {
+                detail: errorList,
+                cancelable: true,
+            });
+            eventTarget.dispatchEvent(event);
+        }
+        return resultList;
+    }
     _loadAndDisplayImageGPU(imageId, imageIdIndex) {
-        return new Promise((resolve, reject) => {
-            function successCallback(image, imageIdIndex, imageId) {
-                if (this.currentImageIdIndex !== imageIdIndex) {
-                    return;
-                }
-                if (this.csImage?.imageFrame.photometricInterpretation !==
-                    image?.imageFrame?.photometricInterpretation) {
-                    this.stackInvalidated = true;
-                }
-                this._setCSImage(image);
-                const eventDetail = {
-                    image,
-                    imageId,
-                    imageIdIndex,
-                    viewportId: this.id,
-                    renderingEngineId: this.renderingEngineId,
-                };
-                triggerEvent(this.element, Events.STACK_NEW_IMAGE, eventDetail);
-                this._updateActorToDisplayImageId(image);
-                this.render();
-                this.currentImageIdIndex = imageIdIndex;
-                resolve(imageId);
-            }
-            function errorCallback(error, imageIdIndex, imageId) {
-                const eventDetail = {
-                    error,
-                    imageIdIndex,
-                    imageId,
-                };
-                triggerEvent(eventTarget, Events.IMAGE_LOAD_ERROR, eventDetail);
-                reject(error);
-            }
-            function sendRequest(imageId, imageIdIndex, options) {
-                return loadAndCacheImage(imageId, options).then((image) => {
-                    successCallback.call(this, image, imageIdIndex, imageId);
-                }, (error) => {
-                    errorCallback.call(this, error, imageIdIndex, imageId);
-                });
-            }
-            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 = {
-                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);
+        const eventDetail = {
+            imageId,
+            imageIdIndex,
+            viewportId: this.id,
+            renderingEngineId: this.renderingEngineId,
+        };
+        triggerEvent(this.element, Events.PRE_STACK_NEW_IMAGE, eventDetail);
+        return this.imagesLoader.loadImages([imageId], this).then((v) => {
+            return imageId;
         });
     }
     _updateToDisplayImageCPU(image) {
-        const metadata = this._getImageDataMetadata(image);
+        const metadata = this.getImageDataMetadata(image);
         const viewport = getDefaultViewport(this.canvas, image, this.modality, this._cpuFallbackEnabledElement.viewport.colormap);
         const { windowCenter, windowWidth } = viewport.voi;
         this.voiRange = windowLevelUtil.toLowHighRange(windowWidth, windowCenter);
@@ -1176,10 +1369,33 @@ class StackViewport extends Viewport {
         this.cpuRenderingInvalidated = true;
         this._cpuFallbackEnabledElement.transform = calculateTransform(this._cpuFallbackEnabledElement);
     }
+    addImages(stackInputs) {
+        const actors = this.getActors();
+        stackInputs.forEach((stackInput) => {
+            const image = cache.getImage(stackInput.imageId);
+            const { origin, dimensions, direction, spacing, numComps } = this.getImageDataMetadata(image);
+            const imagedata = this.createVTKImageData({
+                origin,
+                dimensions,
+                direction,
+                spacing,
+                numComps,
+                pixelArray: image.getPixelData(),
+            });
+            const imageActor = this.createActorMapper(imagedata);
+            if (imageActor) {
+                actors.push({ uid: stackInput.actorUID, actor: imageActor });
+                if (stackInput.callback) {
+                    stackInput.callback({ imageActor, imageId: stackInput.imageId });
+                }
+            }
+        });
+        this.setActors(actors);
+    }
     _updateActorToDisplayImageId(image) {
         const sameImageData = this._checkVTKImageDataMatchesCornerstoneImage(image, this._imageData);
         const activeCamera = this.getRenderer().getActiveCamera();
-        const previousCameraProps = _cloneDeep(this.getCamera());
+        const previousCameraProps = structuredClone(this.getCamera());
         if (sameImageData && !this.stackInvalidated) {
             this._updateVTKImageDataFromCornerstoneImage(image);
             const cameraProps = this.getCamera();
@@ -1195,22 +1411,29 @@ class StackViewport extends Viewport {
             activeCamera.setFreezeFocalPoint(true);
             this._restoreCameraProps(cameraProps, previousCameraProps, panCache);
             this._setPropertiesFromCache();
+            this.stackActorReInitialized = false;
             return;
         }
-        const { origin, direction, dimensions, spacing, numComps, imagePixelModule, } = this._getImageDataMetadata(image);
+        const { origin, direction, dimensions, spacing, numComps, imagePixelModule, } = this.getImageDataMetadata(image);
+        const pixelArray = image.getPixelData();
         this._createVTKImageData({
             origin,
             direction,
             dimensions,
             spacing,
             numComps,
-            pixelArray: image.getPixelData(),
+            pixelArray,
         });
         this._updateVTKImageDataFromCornerstoneImage(image);
         const actor = this.createActorMapper(this._imageData);
-        const actors = [];
-        actors.push({ uid: this.id, actor });
-        this.setActors(actors);
+        const oldActors = this.getActors();
+        if (oldActors.length && oldActors[0].uid === this.id) {
+            oldActors[0].actor = actor;
+        }
+        else {
+            oldActors.unshift({ uid: this.id, actor });
+        }
+        this.setActors(oldActors);
         const { viewPlaneNormal, viewUp } = this._getCameraOrientation(direction);
         this.setCameraNoEvent({ viewUp, viewPlaneNormal });
         this.initialViewUp = viewUp;
@@ -1222,16 +1445,18 @@ class StackViewport extends Viewport {
         this.setVOI(this._getInitialVOIRange(image), {
             forceRecreateLUTFunction: !!monochrome1,
         });
-        this.setInvertColor(this.invert || !!monochrome1);
+        this.initialInvert = !!monochrome1;
+        this.setInvertColor(this.invert || this.initialInvert);
         this.cameraFocalPointOnRender = this.getCamera().focalPoint;
         this.stackInvalidated = false;
+        this.stackActorReInitialized = true;
         if (this._publishCalibratedEvent) {
             this.triggerCalibrationEvent();
         }
     }
     _getInitialVOIRange(image) {
         if (this.voiRange && this.voiUpdatedWithSetProperties) {
-            return this.voiRange;
+            return this.globalDefaultProperties.voiRange;
         }
         const { windowCenter, windowWidth } = image;
         let voiRange = this._getVOIRangeFromWindowLevel(windowWidth, windowCenter);
@@ -1276,7 +1501,17 @@ class StackViewport extends Viewport {
         }
         this.currentImageIdIndex = imageIdIndex;
         this.hasPixelSpacing = true;
+        this.viewportStatus = ViewportStatus.PRE_RENDER;
         const imageId = await this._loadAndDisplayImage(this.imageIds[imageIdIndex], imageIdIndex);
+        if (this.perImageIdDefaultProperties.size >= 1) {
+            const defaultProperties = this.perImageIdDefaultProperties.get(imageId);
+            if (defaultProperties !== undefined) {
+                this.setProperties(defaultProperties);
+            }
+            else if (this.globalDefaultProperties !== undefined) {
+                this.setProperties(this.globalDefaultProperties);
+            }
+        }
         return imageId;
     }
     resetCameraCPU(resetPan, resetZoom) {
@@ -1317,7 +1552,7 @@ class StackViewport extends Viewport {
         }
         this.targetImageIdIndex = newTargetImageIdIndex;
         const targetImageId = imageIds[newTargetImageIdIndex];
-        const imageAlreadyLoaded = cache.isImageIdCached(targetImageId);
+        const imageAlreadyLoaded = cache.isLoaded(targetImageId);
         if (imageAlreadyLoaded || !debounce) {
             this.setImageIdIndex(newTargetImageIdIndex);
         }
@@ -1336,13 +1571,13 @@ class StackViewport extends Viewport {
             triggerEvent(this.element, Events.STACK_VIEWPORT_SCROLL, eventData);
         }
     }
-    async setImageIdIndex(imageIdIndex) {
+    setImageIdIndex(imageIdIndex) {
         this._throwIfDestroyed();
         if (this.currentImageIdIndex === imageIdIndex) {
-            return this.getCurrentImageId();
+            return Promise.resolve(this.getCurrentImageId());
         }
-        const imageId = this._setImageIdIndex(imageIdIndex);
-        return imageId;
+        const imageIdPromise = this._setImageIdIndex(imageIdIndex);
+        return imageIdPromise;
     }
     calibrateSpacing(imageId) {
         const imageIdIndex = this.getImageIds().indexOf(imageId);
@@ -1405,6 +1640,73 @@ class StackViewport extends Viewport {
         }
         return voiLUTFunction;
     }
+    isReferenceViewable(viewRef, options = {}) {
+        if (!super.isReferenceViewable(viewRef, options)) {
+            return false;
+        }
+        let { imageURI } = options;
+        const { referencedImageId, sliceIndex } = viewRef;
+        if (viewRef.volumeId && !referencedImageId) {
+            return options.asVolume === true;
+        }
+        let testIndex = this.getCurrentImageIdIndex();
+        if (options.withNavigation && typeof sliceIndex === 'number') {
+            testIndex = sliceIndex;
+        }
+        const imageId = this.imageIds[testIndex];
+        if (!imageId) {
+            return false;
+        }
+        if (!imageURI) {
+            const colonIndex = imageId.indexOf(':');
+            imageURI = imageId.substring(colonIndex + 1);
+        }
+        return referencedImageId?.endsWith(imageURI);
+    }
+    getViewReference(viewRefSpecifier = {}) {
+        const { sliceIndex = this.getCurrentImageIdIndex() } = viewRefSpecifier;
+        const reference = super.getViewReference(viewRefSpecifier);
+        const referencedImageId = this.imageIds[sliceIndex];
+        if (!referencedImageId) {
+            return;
+        }
+        reference.referencedImageId = referencedImageId;
+        if (this.getCurrentImageIdIndex() !== sliceIndex) {
+            const referenceData = this.getImagePlaneReferenceData(sliceIndex);
+            if (!referenceData) {
+                return;
+            }
+            Object.assign(reference, referenceData);
+        }
+        return reference;
+    }
+    setViewReference(viewRef) {
+        if (!viewRef) {
+            return;
+        }
+        const { referencedImageId, sliceIndex, volumeId } = viewRef;
+        if (typeof sliceIndex === 'number' &&
+            referencedImageId &&
+            referencedImageId === this.imageIds[sliceIndex]) {
+            this.setImageIdIndex(sliceIndex);
+        }
+        else {
+            const foundIndex = this.imageIds.indexOf(referencedImageId);
+            if (foundIndex !== -1) {
+                this.setImageIdIndex(foundIndex);
+            }
+            else {
+                throw new Error('Unsupported - referenced image id not found');
+            }
+        }
+    }
+    getReferenceId(specifier = {}) {
+        const { sliceIndex: sliceIndex = this.currentImageIdIndex } = specifier;
+        if (Array.isArray(sliceIndex)) {
+            throw new Error('Use of slice ranges for stacks not supported');
+        }
+        return `imageId:${this.imageIds[sliceIndex]}`;
+    }
     getCPUFallbackError(method) {
         return new Error(`method ${method} cannot be used during CPU Fallback mode`);
     }
@@ -1422,37 +1724,50 @@ class StackViewport extends Viewport {
         this.render();
     }
     setColormapCPU(colormapData) {
+        this.colormap = colormapData;
         const colormap = getColormap(colormapData.name, colormapData);
         this._cpuFallbackEnabledElement.viewport.colormap = colormap;
         this._cpuFallbackEnabledElement.renderingTools = {};
         this.fillWithBackgroundColor();
         this.cpuRenderingInvalidated = true;
         this.render();
+        const eventDetail = {
+            viewportId: this.id,
+            colormap: colormapData,
+        };
+        triggerEvent(this.element, Events.COLORMAP_MODIFIED, eventDetail);
     }
     setColormapGPU(colormap) {
         const ActorEntry = this.getDefaultActor();
         const actor = ActorEntry.actor;
         const actorProp = actor.getProperty();
         const rgbTransferFunction = actorProp.getRGBTransferFunction();
+        const colormapObj = colormapUtils.getColormap(colormap.name) ||
+            vtkColorMaps.getPresetByName(colormap.name);
         if (!rgbTransferFunction) {
             const cfun = vtkColorTransferFunction.newInstance();
-            const voiRange = this._getVOIRangeForCurrentImage();
-            cfun.applyColorMap(colormap);
-            cfun.setMappingRange(voiRange.lower, voiRange.upper);
+            cfun.applyColorMap(colormapObj);
+            cfun.setMappingRange(this.voiRange.lower, this.voiRange.upper);
             actorProp.setRGBTransferFunction(0, cfun);
         }
         else {
-            rgbTransferFunction.applyColorMap(colormap);
+            rgbTransferFunction.applyColorMap(colormapObj);
+            rgbTransferFunction.setMappingRange(this.voiRange.lower, this.voiRange.upper);
             actorProp.setRGBTransferFunction(0, rgbTransferFunction);
         }
+        this.colormap = colormap;
         this.render();
+        const eventDetail = {
+            viewportId: this.id,
+            colormap,
+        };
+        triggerEvent(this.element, Events.COLORMAP_MODIFIED, eventDetail);
     }
     unsetColormapGPU() {
         throw new Error('unsetColormapGPU not implemented.');
     }
     _getImagePlaneModule(imageId) {
-        const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
-        const calibratedPixelSpacing = metaData.get('calibratedPixelSpacing', imageId);
+        const imagePlaneModule = metaData.get(MetadataModules.IMAGE_PLANE, imageId);
         this.calibration ||= imagePlaneModule.calibration;
         const newImagePlaneModule = {
             ...imagePlaneModule,