@cornerstonejs/core 2.0.0-beta.6 → 2.0.0-beta.7

package/dist/esm/RenderingEngine/StackViewport.js

@@ -1,39 +1,44 @@
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 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, imageRetrieveMetadataProvider, } 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, ViewportStatus, } 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 createLinearRGBTransferFunction from '../utilities/createLinearRGBTransferFunction';
+import { getConfiguration, getShouldUseCPURendering } from '../init';
 import { createProgressive } from '../loaders/ProgressiveRetrieveImages';
+import createLinearRGBTransferFunction from '../utilities/createLinearRGBTransferFunction';
+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;
@@ -50,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);
@@ -78,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,
@@ -106,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
@@ -117,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();
@@ -191,6 +219,9 @@ class StackViewport extends Viewport {
         this.getCurrentImageIdIndex = () => {
             return this.currentImageIdIndex;
         };
+        this.getSliceIndex = () => {
+            return this.currentImageIdIndex;
+        };
         this.getTargetImageIdIndex = () => {
             return this.targetImageIdIndex;
         };
@@ -248,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,
@@ -397,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,
             },
@@ -423,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,
             },
@@ -445,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);
@@ -489,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 });
@@ -532,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(this.initialInvert);
+        this.setInvertColor(false);
+        this.render();
     }
     _setPropertiesFromCache() {
         const { interpolationType, invert } = this;
@@ -628,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) {
@@ -639,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;
@@ -674,6 +796,10 @@ 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)
@@ -682,6 +808,11 @@ class StackViewport extends Viewport {
             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();
@@ -773,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 &&
@@ -810,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);
@@ -851,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;
@@ -888,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);
@@ -900,19 +1066,30 @@ 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();
@@ -983,27 +1160,7 @@ 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);
     }
     _loadAndDisplayImage(imageId, imageIdIndex) {
         return this.useCPURendering
@@ -1091,6 +1248,7 @@ class StackViewport extends Viewport {
                     enabled: true,
                 },
                 useRGBA: true,
+                requestType,
             };
             const eventDetail = {
                 imageId,
@@ -1109,10 +1267,10 @@ class StackViewport extends Viewport {
         }
         const csImgFrame = this.csImage?.imageFrame;
         const imgFrame = image?.imageFrame;
-        if (csImgFrame?.photometricInterpretation !==
-            imgFrame?.photometricInterpretation ||
-            this.csImage?.photometricInterpretation !==
-                image?.photometricInterpretation) {
+        const photometricInterpretation = csImgFrame?.photometricInterpretation ||
+            this.csImage?.photometricInterpretation;
+        const newPhotometricInterpretation = imgFrame?.photometricInterpretation || image?.photometricInterpretation;
+        if (photometricInterpretation !== newPhotometricInterpretation) {
             this.stackInvalidated = true;
         }
         this._setCSImage(image);
@@ -1123,8 +1281,8 @@ class StackViewport extends Viewport {
             viewportId: this.id,
             renderingEngineId: this.renderingEngineId,
         };
-        triggerEvent(this.element, Events.STACK_NEW_IMAGE, eventDetail);
         this._updateActorToDisplayImageId(image);
+        triggerEvent(this.element, Events.STACK_NEW_IMAGE, eventDetail);
         this.render();
         this.currentImageIdIndex = imageIdIndex;
     }
@@ -1153,14 +1311,15 @@ class StackViewport extends Viewport {
             },
             useRGBA: false,
             transferSyntaxUID,
+            useNativeDataType: this.useNativeDataType,
             priority: 5,
             requestType: RequestType.Interaction,
             additionalDetails,
         };
         return options;
     }
-    loadImages(imageIds, listener) {
-        return Promise.allSettled(imageIds.map((imageId) => {
+    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);
@@ -1170,6 +1329,15 @@ class StackViewport extends Viewport {
                 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) {
         const eventDetail = {
@@ -1184,7 +1352,7 @@ class StackViewport extends Viewport {
         });
     }
     _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);
@@ -1201,6 +1369,29 @@ 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();
@@ -1220,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;
@@ -1251,13 +1449,14 @@ class StackViewport extends Viewport {
         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);
@@ -1296,14 +1495,24 @@ class StackViewport extends Viewport {
             return windowLevelUtil.toLowHighRange(width, center);
         }
     }
-    _setImageIdIndex(imageIdIndex) {
+    async _setImageIdIndex(imageIdIndex) {
         if (imageIdIndex >= this.imageIds.length) {
             throw new Error(`ImageIdIndex provided ${imageIdIndex} is invalid, the stack only has ${this.imageIds.length} elements`);
         }
         this.currentImageIdIndex = imageIdIndex;
         this.hasPixelSpacing = true;
         this.viewportStatus = ViewportStatus.PRE_RENDER;
-        return this._loadAndDisplayImage(this.imageIds[imageIdIndex], imageIdIndex);
+        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) {
         const { image } = this._cpuFallbackEnabledElement;
@@ -1431,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`);
     }
@@ -1448,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,