@cornerstonejs/core 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/esm/RenderingEngine/BaseVolumeViewport.js

@@ -1,6 +1,7 @@
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import { vec2, vec3 } from 'gl-matrix';
 import cache from '../cache';
 import { MPR_CAMERA_VALUES, RENDERING_DEFAULTS, VIEWPORT_PRESETS, } from '../constants';
 import { Events, ViewportStatus, VOILUTFunctionType, } from '../enums';
@@ -8,19 +9,71 @@ import ViewportType from '../enums/ViewportType';
 import eventTarget from '../eventTarget';
 import { getShouldUseCPURendering } from '../init';
 import { loadVolume } from '../loaders/volumeLoader';
-import { actorIsA, applyPreset, createSigmoidRGBTransferFunction, getVoiFromSigmoidRGBTransferFunction, imageIdToURI, invertRgbTransferFunction, triggerEvent, colormap as colormapUtils, } from '../utilities';
+import { actorIsA, applyPreset, createSigmoidRGBTransferFunction, getVoiFromSigmoidRGBTransferFunction, imageIdToURI, invertRgbTransferFunction, triggerEvent, colormap as colormapUtils, isEqualNegative, getVolumeViewportScrollInfo, snapFocalPointToSlice, isEqual, } from '../utilities';
 import { createVolumeActor } from './helpers';
 import volumeNewImageEventDispatcher, { resetVolumeNewImageState, } from './helpers/volumeNewImageEventDispatcher';
 import Viewport from './Viewport';
 import vtkSlabCamera from './vtkClasses/vtkSlabCamera';
 import transformWorldToIndex from '../utilities/transformWorldToIndex';
+import { findMatchingColormap } from '../utilities/colormap';
+import { getTransferFunctionNodes } from '../utilities/transferFunctionUtils';
 class BaseVolumeViewport extends Viewport {
     constructor(props) {
         super(props);
         this.useCPURendering = false;
-        this.use16BitTexture = false;
-        this.inverted = false;
-        this.getProperties = () => {
+        this.useNativeDataType = false;
+        this.perVolumeIdDefaultProperties = new Map();
+        this.viewportProperties = {};
+        this.setRotation = (rotation) => {
+            const panFit = this.getPan(this.fitToCanvasCamera);
+            const pan = this.getPan();
+            const previousCamera = this.getCamera();
+            const panSub = vec2.sub([0, 0], panFit, pan);
+            this.setPan(panSub, false);
+            const { flipVertical } = this.getCamera();
+            const initialViewUp = flipVertical
+                ? vec3.negate([0, 0, 0], this.initialViewUp)
+                : this.initialViewUp;
+            this.setCameraNoEvent({
+                viewUp: initialViewUp,
+            });
+            this.rotateCamera(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);
+            if (this._suppressCameraModifiedEvents) {
+                return;
+            }
+            const camera = this.getCamera();
+            const eventDetail = {
+                previousCamera,
+                camera,
+                element: this.element,
+                viewportId: this.id,
+                renderingEngineId: this.renderingEngineId,
+            };
+            triggerEvent(this.element, Events.CAMERA_MODIFIED, eventDetail);
+        };
+        this.getDefaultProperties = (volumeId) => {
+            let volumeProperties;
+            if (volumeId !== undefined) {
+                volumeProperties = this.perVolumeIdDefaultProperties.get(volumeId);
+            }
+            if (volumeProperties !== undefined) {
+                return volumeProperties;
+            }
+            return {
+                ...this.globalDefaultProperties,
+            };
+        };
+        this.getProperties = (volumeId) => {
+            const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
+            if (!applicableVolumeActorInfo) {
+                return;
+            }
+            const { colormap: latestColormap, VOILUTFunction, interpolationType, invert, slabThickness, preset, } = this.viewportProperties;
             const voiRanges = this.getActors()
                 .map((actorEntry) => {
                 const volumeActor = actorEntry.actor;
@@ -30,15 +83,57 @@ class BaseVolumeViewport extends Viewport {
                     return null;
                 }
                 const cfun = volumeActor.getProperty().getRGBTransferFunction(0);
-                const [lower, upper] = this.VOILUTFunction === 'SIGMOID'
+                const [lower, upper] = this.viewportProperties?.VOILUTFunction === 'SIGMOID'
                     ? getVoiFromSigmoidRGBTransferFunction(cfun)
                     : cfun.getRange();
                 return { volumeId, voiRange: { lower, upper } };
             })
                 .filter(Boolean);
-            const voiRange = voiRanges.length ? voiRanges[0].voiRange : null;
-            const VOILUTFunction = this.VOILUTFunction;
-            return { voiRange, VOILUTFunction, invert: this.inverted };
+            const voiRange = volumeId
+                ? voiRanges.find((range) => range.volumeId === volumeId)?.voiRange
+                : voiRanges[0]?.voiRange;
+            const volumeColormap = this.getColormap(volumeId);
+            const colormap = volumeId && volumeColormap ? volumeColormap : latestColormap;
+            return {
+                colormap: colormap,
+                voiRange: voiRange,
+                VOILUTFunction: VOILUTFunction,
+                interpolationType: interpolationType,
+                invert: invert,
+                slabThickness: slabThickness,
+                preset,
+            };
+        };
+        this.getColormap = (volumeId) => {
+            const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
+            if (!applicableVolumeActorInfo) {
+                return;
+            }
+            const { volumeActor } = applicableVolumeActorInfo;
+            const cfun = volumeActor.getProperty().getRGBTransferFunction(0);
+            const { nodes } = cfun.getState();
+            const RGBPoints = nodes.reduce((acc, node) => {
+                acc.push(node.x, node.r, node.g, node.b);
+                return acc;
+            }, []);
+            const matchedColormap = findMatchingColormap(RGBPoints, volumeActor);
+            return matchedColormap;
+        };
+        this.getRotation = () => {
+            const { viewUp: currentViewUp, viewPlaneNormal, flipVertical, } = this.getCameraNoRotation();
+            const initialViewUp = flipVertical
+                ? vec3.negate([0, 0, 0], this.initialViewUp)
+                : this.initialViewUp;
+            if (!initialViewUp) {
+                return 0;
+            }
+            const initialToCurrentViewUpAngle = (vec3.angle(initialViewUp, currentViewUp) * 180) / Math.PI;
+            const initialToCurrentViewUpCross = vec3.cross([0, 0, 0], initialViewUp, currentViewUp);
+            const normalDot = vec3.dot(initialToCurrentViewUpCross, viewPlaneNormal);
+            const value = normalDot >= 0
+                ? initialToCurrentViewUpAngle
+                : (360 - initialToCurrentViewUpAngle) % 360;
+            return value;
         };
         this.getFrameOfReferenceUID = () => {
             return this._FrameOfReferenceUID;
@@ -109,7 +204,7 @@ class BaseVolumeViewport extends Viewport {
             return imageVolume.imageIds;
         };
         this.useCPURendering = getShouldUseCPURendering();
-        this.use16BitTexture = this._shouldUseNativeDataType();
+        this.useNativeDataType = this._shouldUseNativeDataType();
         if (this.useCPURendering) {
             throw new Error('VolumeViewports cannot be used whilst CPU Fallback Rendering is enabled.');
         }
@@ -134,12 +229,15 @@ class BaseVolumeViewport extends Viewport {
     static get useCustomRenderingPipeline() {
         return false;
     }
-    applyViewOrientation(orientation) {
+    applyViewOrientation(orientation, resetCamera = true) {
         const { viewPlaneNormal, viewUp } = this._getOrientationVectors(orientation);
         const camera = this.getVtkActiveCamera();
         camera.setDirectionOfProjection(-viewPlaneNormal[0], -viewPlaneNormal[1], -viewPlaneNormal[2]);
         camera.setViewUpFrom(viewUp);
-        this.resetCamera();
+        this.initialViewUp = viewUp;
+        if (resetCamera) {
+            this.resetCamera();
+        }
     }
     initializeVolumeNewImageEventDispatcher() {
         const volumeNewImageHandlerBound = volumeNewImageHandler.bind(this);
@@ -182,8 +280,8 @@ class BaseVolumeViewport extends Viewport {
             voiLUTFunction = VOILUTFunctionType.LINEAR;
         }
         const { voiRange } = this.getProperties();
-        this.VOILUTFunction = voiLUTFunction;
         this.setVOI(voiRange, volumeId, suppressEvents);
+        this.viewportProperties.VOILUTFunction = voiLUTFunction;
     }
     setColormap(colormap, volumeId, suppressEvents) {
         const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
@@ -191,8 +289,6 @@ class BaseVolumeViewport extends Viewport {
             return;
         }
         const { volumeActor } = applicableVolumeActorInfo;
-        const mapper = volumeActor.getMapper();
-        mapper.setSampleDistance(1.0);
         const cfun = vtkColorTransferFunction.newInstance();
         let colormapObj = colormapUtils.getColormap(colormap.name);
         const { name } = colormap;
@@ -209,6 +305,15 @@ class BaseVolumeViewport extends Viewport {
         cfun.applyColorMap(colormapObj);
         cfun.setMappingRange(range[0], range[1]);
         volumeActor.getProperty().setRGBTransferFunction(0, cfun);
+        this.viewportProperties.colormap = colormap;
+        if (!suppressEvents) {
+            const eventDetail = {
+                viewportId: this.id,
+                colormap,
+                volumeId,
+            };
+            triggerEvent(this.element, Events.COLORMAP_MODIFIED, eventDetail);
+        }
     }
     setOpacity(colormap, volumeId) {
         const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
@@ -231,8 +336,12 @@ class BaseVolumeViewport extends Viewport {
             });
         }
         volumeActor.getProperty().setScalarOpacity(0, ofun);
+        if (!this.viewportProperties.colormap) {
+            this.viewportProperties.colormap = {};
+        }
+        this.viewportProperties.colormap.opacity = colormap.opacity;
     }
-    setInvert(invert, volumeId, suppressEvents) {
+    setInvert(inverted, volumeId, suppressEvents) {
         const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
         if (!applicableVolumeActorInfo) {
             return;
@@ -240,20 +349,39 @@ class BaseVolumeViewport extends Viewport {
         const volumeIdToUse = applicableVolumeActorInfo.volumeId;
         const cfun = this._getOrCreateColorTransferFunction(volumeIdToUse);
         invertRgbTransferFunction(cfun);
-        this.inverted = invert;
-        const { voiRange } = this.getProperties();
+        this.viewportProperties.invert = inverted;
         if (!suppressEvents) {
             const eventDetail = {
-                viewportId: this.id,
-                range: voiRange,
-                volumeId: volumeIdToUse,
-                VOILUTFunction: this.VOILUTFunction,
-                invert: this.inverted,
+                ...this.getVOIModifiedEventDetail(volumeIdToUse),
                 invertStateChanged: true,
             };
             triggerEvent(this.element, Events.VOI_MODIFIED, eventDetail);
         }
     }
+    getVOIModifiedEventDetail(volumeId) {
+        const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
+        if (!applicableVolumeActorInfo) {
+            throw new Error(`No actor found for the given volumeId: ${volumeId}`);
+        }
+        const volumeActor = applicableVolumeActorInfo.volumeActor;
+        const transferFunction = volumeActor
+            .getProperty()
+            .getRGBTransferFunction(0);
+        const range = transferFunction.getMappingRange();
+        const matchedColormap = this.getColormap(volumeId);
+        const { VOILUTFunction, invert } = this.getProperties(volumeId);
+        return {
+            viewportId: this.id,
+            range: {
+                lower: range[0],
+                upper: range[1],
+            },
+            volumeId: applicableVolumeActorInfo.volumeId,
+            VOILUTFunction: VOILUTFunction,
+            colormap: matchedColormap,
+            invert,
+        };
+    }
     _getOrCreateColorTransferFunction(volumeId) {
         const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
         if (!applicableVolumeActorInfo) {
@@ -278,6 +406,7 @@ class BaseVolumeViewport extends Viewport {
         const { volumeActor } = applicableVolumeActorInfo;
         const volumeProperty = volumeActor.getProperty();
         volumeProperty.setInterpolationType(interpolationType);
+        this.viewportProperties.interpolationType = interpolationType;
     }
     setVOI(voiRange, volumeId, suppressEvents = false) {
         const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
@@ -293,7 +422,8 @@ class BaseVolumeViewport extends Viewport {
             const maxVoiRange = { lower: range[0], upper: range[1] };
             voiRangeToUse = maxVoiRange;
         }
-        if (this.VOILUTFunction === VOILUTFunctionType.SAMPLED_SIGMOID) {
+        const { VOILUTFunction } = this.getProperties(volumeIdToUse);
+        if (VOILUTFunction === VOILUTFunctionType.SAMPLED_SIGMOID) {
             const cfun = createSigmoidRGBTransferFunction(voiRangeToUse);
             volumeActor.getProperty().setRGBTransferFunction(0, cfun);
         }
@@ -306,15 +436,137 @@ class BaseVolumeViewport extends Viewport {
         }
         if (!suppressEvents) {
             const eventDetail = {
-                viewportId: this.id,
-                range: voiRange,
-                volumeId: volumeIdToUse,
-                VOILUTFunction: this.VOILUTFunction,
+                ...this.getVOIModifiedEventDetail(volumeIdToUse),
             };
             triggerEvent(this.element, Events.VOI_MODIFIED, eventDetail);
         }
+        this.viewportProperties.voiRange = voiRangeToUse;
+    }
+    rotateCamera(rotation) {
+        const rotationToApply = rotation - this.getRotation();
+        this.getVtkActiveCamera().roll(-rotationToApply);
+    }
+    setDefaultProperties(ViewportProperties, volumeId) {
+        if (volumeId == null) {
+            this.globalDefaultProperties = ViewportProperties;
+        }
+        else {
+            this.perVolumeIdDefaultProperties.set(volumeId, ViewportProperties);
+        }
+    }
+    clearDefaultProperties(volumeId) {
+        if (volumeId == null) {
+            this.globalDefaultProperties = {};
+            this.resetProperties();
+        }
+        else {
+            this.perVolumeIdDefaultProperties.delete(volumeId);
+            this.resetToDefaultProperties(volumeId);
+        }
+    }
+    getViewReference(viewRefSpecifier = {}) {
+        const target = super.getViewReference(viewRefSpecifier);
+        const volumeId = this.getVolumeId(viewRefSpecifier);
+        if (viewRefSpecifier?.forFrameOfReference !== false) {
+            target.volumeId = volumeId;
+        }
+        if (typeof viewRefSpecifier?.sliceIndex !== 'number') {
+            return target;
+        }
+        const { viewPlaneNormal } = target;
+        const delta = viewRefSpecifier.sliceIndex - this.getSliceIndex();
+        const { sliceRangeInfo } = getVolumeViewportScrollInfo(this, volumeId, true);
+        const { sliceRange, spacingInNormalDirection, camera } = sliceRangeInfo;
+        const { focalPoint, position } = camera;
+        const { newFocalPoint } = snapFocalPointToSlice(focalPoint, position, sliceRange, viewPlaneNormal, spacingInNormalDirection, delta);
+        target.cameraFocalPoint = newFocalPoint;
+        return target;
+    }
+    isReferenceViewable(viewRef, options) {
+        if (!viewRef.FrameOfReferenceUID) {
+            return false;
+        }
+        if (!super.isReferenceViewable(viewRef, options)) {
+            return false;
+        }
+        if (options?.withNavigation) {
+            return true;
+        }
+        const currentSliceIndex = this.getSliceIndex();
+        const { sliceIndex } = viewRef;
+        if (Array.isArray(sliceIndex)) {
+            return (sliceIndex[0] <= currentSliceIndex && currentSliceIndex <= sliceIndex[1]);
+        }
+        return sliceIndex === undefined || sliceIndex === currentSliceIndex;
+    }
+    scroll(delta = 1) {
+        const volumeId = this.getVolumeId();
+        const { sliceRangeInfo } = getVolumeViewportScrollInfo(this, volumeId, true);
+        if (!sliceRangeInfo) {
+            return;
+        }
+        const { sliceRange, spacingInNormalDirection, camera } = sliceRangeInfo;
+        const { focalPoint, viewPlaneNormal, position } = camera;
+        const { newFocalPoint, newPosition } = snapFocalPointToSlice(focalPoint, position, sliceRange, viewPlaneNormal, spacingInNormalDirection, delta);
+        this.setCamera({
+            focalPoint: newFocalPoint,
+            position: newPosition,
+        });
+    }
+    setViewReference(viewRef) {
+        if (!viewRef) {
+            return;
+        }
+        const volumeId = this.getVolumeId();
+        const { viewPlaneNormal: refViewPlaneNormal, FrameOfReferenceUID: refFrameOfReference, cameraFocalPoint, viewUp, } = viewRef;
+        let { sliceIndex } = viewRef;
+        const { focalPoint, viewPlaneNormal, position } = this.getCamera();
+        const isNegativeNormal = isEqualNegative(viewPlaneNormal, refViewPlaneNormal);
+        const isSameNormal = isEqual(viewPlaneNormal, refViewPlaneNormal);
+        if (typeof sliceIndex === 'number' &&
+            viewRef.volumeId === volumeId &&
+            (isNegativeNormal || isSameNormal)) {
+            const { currentStepIndex, sliceRangeInfo, numScrollSteps } = getVolumeViewportScrollInfo(this, volumeId, true);
+            const { sliceRange, spacingInNormalDirection } = sliceRangeInfo;
+            if (isNegativeNormal) {
+                sliceIndex = numScrollSteps - sliceIndex - 1;
+            }
+            const delta = sliceIndex - currentStepIndex;
+            const { newFocalPoint, newPosition } = snapFocalPointToSlice(focalPoint, position, sliceRange, viewPlaneNormal, spacingInNormalDirection, delta);
+            this.setCamera({ focalPoint: newFocalPoint, position: newPosition });
+        }
+        else if (refFrameOfReference === this.getFrameOfReferenceUID()) {
+            if (refViewPlaneNormal && !isNegativeNormal && !isSameNormal) {
+                this.setOrientation({ viewPlaneNormal: refViewPlaneNormal, viewUp });
+                return this.setViewReference(viewRef);
+            }
+            if (cameraFocalPoint) {
+                const focalDelta = vec3.subtract([0, 0, 0], cameraFocalPoint, focalPoint);
+                const useNormal = refViewPlaneNormal ?? viewPlaneNormal;
+                const normalDot = vec3.dot(focalDelta, useNormal);
+                if (!isEqual(normalDot, 0)) {
+                    vec3.scale(focalDelta, useNormal, normalDot);
+                }
+                const newFocal = vec3.add([0, 0, 0], focalPoint, focalDelta);
+                const newPosition = vec3.add([0, 0, 0], position, focalDelta);
+                this.setCamera({ focalPoint: newFocal, position: newPosition });
+            }
+        }
+        else {
+            throw new Error(`Incompatible view refs: ${refFrameOfReference}!==${this.getFrameOfReferenceUID()}`);
+        }
     }
-    setProperties({ voiRange, VOILUTFunction, invert, colormap, preset, interpolationType, } = {}, volumeId, suppressEvents = false) {
+    setProperties({ voiRange, VOILUTFunction, invert, colormap, preset, interpolationType, slabThickness, } = {}, volumeId, suppressEvents = false) {
+        if (this.globalDefaultProperties == null) {
+            this.setDefaultProperties({
+                voiRange,
+                VOILUTFunction,
+                invert,
+                colormap,
+                preset,
+                slabThickness,
+            });
+        }
         if (colormap?.name) {
             this.setColormap(colormap, volumeId, suppressEvents);
         }
@@ -330,26 +582,66 @@ class BaseVolumeViewport extends Viewport {
         if (VOILUTFunction !== undefined) {
             this.setVOILUTFunction(VOILUTFunction, volumeId, suppressEvents);
         }
-        if (invert !== undefined && this.inverted !== invert) {
+        if (invert !== undefined && this.viewportProperties.invert !== invert) {
             this.setInvert(invert, volumeId, suppressEvents);
         }
         if (preset !== undefined) {
             this.setPreset(preset, volumeId, suppressEvents);
         }
+        if (slabThickness !== undefined) {
+            this.setSlabThickness(slabThickness);
+            this.viewportProperties.slabThickness = slabThickness;
+        }
     }
-    setPreset(presetName, volumeId, suppressEvents) {
+    resetToDefaultProperties(volumeId) {
+        const properties = this.globalDefaultProperties;
+        if (properties.colormap?.name) {
+            this.setColormap(properties.colormap, volumeId);
+        }
+        if (properties.colormap?.opacity != null) {
+            this.setOpacity(properties.colormap, volumeId);
+        }
+        if (properties.voiRange !== undefined) {
+            this.setVOI(properties.voiRange, volumeId);
+        }
+        if (properties.VOILUTFunction !== undefined) {
+            this.setVOILUTFunction(properties.VOILUTFunction, volumeId);
+        }
+        if (properties.invert !== undefined) {
+            this.setInvert(properties.invert, volumeId);
+        }
+        if (properties.slabThickness !== undefined) {
+            this.setSlabThickness(properties.slabThickness);
+            this.viewportProperties.slabThickness = properties.slabThickness;
+        }
+        this.render();
+    }
+    setPreset(presetNameOrObj, volumeId, suppressEvents) {
         const applicableVolumeActorInfo = this._getApplicableVolumeActor(volumeId);
         if (!applicableVolumeActorInfo) {
             return;
         }
         const { volumeActor } = applicableVolumeActorInfo;
-        const preset = VIEWPORT_PRESETS.find((preset) => {
-            return preset.name === presetName;
-        });
+        let preset = presetNameOrObj;
+        if (typeof preset === 'string') {
+            preset = VIEWPORT_PRESETS.find((preset) => {
+                return preset.name === presetNameOrObj;
+            });
+        }
         if (!preset) {
             return;
         }
         applyPreset(volumeActor, preset);
+        this.viewportProperties.preset = preset;
+        this.render();
+        if (!suppressEvents) {
+            triggerEvent(this.element, Events.PRESET_MODIFIED, {
+                viewportId: this.id,
+                volumeId: applicableVolumeActorInfo.volumeId,
+                actor: volumeActor,
+                presetName: preset.name,
+            });
+        }
     }
     async setVolumes(volumeInputArray, immediate = false, suppressEvents = false) {
         const firstImageVolume = cache.getVolume(volumeInputArray[0].volumeId);
@@ -362,17 +654,18 @@ class BaseVolumeViewport extends Viewport {
         const volumeActors = [];
         for (let i = 0; i < volumeInputArray.length; i++) {
             const { volumeId, actorUID, slabThickness } = volumeInputArray[i];
-            const actor = await createVolumeActor(volumeInputArray[i], this.element, this.id, suppressEvents, this.use16BitTexture);
+            const actor = await createVolumeActor(volumeInputArray[i], this.element, this.id, suppressEvents, this.useNativeDataType);
             const uid = actorUID || volumeId;
             volumeActors.push({
                 uid,
                 actor,
                 slabThickness,
-                referenceId: volumeId,
+                referencedId: volumeId,
             });
         }
         this._setVolumeActors(volumeActors);
         this.viewportStatus = ViewportStatus.PRE_RENDER;
+        this.initializeColorTransferFunction(volumeInputArray);
         triggerEvent(this.element, Events.VOLUME_VIEWPORT_NEW_VOLUME, {
             viewportId: this.id,
             volumeActors,
@@ -390,7 +683,7 @@ class BaseVolumeViewport extends Viewport {
         await this._isValidVolumeInputArray(volumeInputArray, this._FrameOfReferenceUID);
         for (let i = 0; i < volumeInputArray.length; i++) {
             const { volumeId, visibility, actorUID, slabThickness } = volumeInputArray[i];
-            const actor = await createVolumeActor(volumeInputArray[i], this.element, this.id, suppressEvents, this.use16BitTexture);
+            const actor = await createVolumeActor(volumeInputArray[i], this.element, this.id, suppressEvents, this.useNativeDataType);
             if (visibility === false) {
                 actor.setVisibility(false);
             }
@@ -399,10 +692,11 @@ class BaseVolumeViewport extends Viewport {
                 uid,
                 actor,
                 slabThickness,
-                referenceId: volumeId,
+                referencedId: volumeId,
             });
         }
         this.addActors(volumeActors);
+        this.initializeColorTransferFunction(volumeInputArray);
         if (immediate) {
             this.render();
         }
@@ -413,9 +707,16 @@ class BaseVolumeViewport extends Viewport {
             this.render();
         }
     }
-    setOrientation(orientation, immediate = true) {
+    setOrientation(_orientation, _immediate = true) {
         console.warn('Method "setOrientation" needs implementation');
     }
+    initializeColorTransferFunction(volumeInputArray) {
+        const selectedVolumeId = volumeInputArray[0].volumeId;
+        const colorTransferFunction = this._getOrCreateColorTransferFunction(selectedVolumeId);
+        if (!this.initialTransferFunctionNodes && colorTransferFunction) {
+            this.initialTransferFunctionNodes = getTransferFunctionNodes(colorTransferFunction);
+        }
+    }
     _getApplicableVolumeActor(volumeId) {
         if (volumeId !== undefined && !this.getActor(volumeId)) {
             return;
@@ -487,13 +788,16 @@ class BaseVolumeViewport extends Viewport {
             imageData: actor.getMapper().getInputData(),
             metadata: {
                 Modality: volume?.metadata?.Modality,
+                FrameOfReferenceUID: volume?.metadata?.FrameOfReferenceUID,
             },
             scaling: volume?.scaling,
             hasPixelSpacing: true,
         };
     }
     _setVolumeActors(volumeActorEntries) {
-        this.inverted = false;
+        for (let i = 0; i < volumeActorEntries.length; i++) {
+            this.viewportProperties.invert = false;
+        }
         this.setActors(volumeActorEntries);
     }
     _getOrientationVectors(orientation) {
@@ -507,6 +811,7 @@ class BaseVolumeViewport extends Viewport {
         }
         else if (typeof orientation === 'string' &&
             MPR_CAMERA_VALUES[orientation]) {
+            this.viewportProperties.orientation = orientation;
             return MPR_CAMERA_VALUES[orientation];
         }
         else {
@@ -538,6 +843,31 @@ class BaseVolumeViewport extends Viewport {
             index[0];
         return volume.getScalarData()[voxelIndex];
     }
+    getVolumeId(specifier) {
+        const actorEntries = this.getActors();
+        if (!actorEntries) {
+            return;
+        }
+        if (!specifier?.volumeId) {
+            return actorEntries.find((actorEntry) => actorEntry.actor.getClassName() === 'vtkVolume')?.uid;
+        }
+        return actorEntries.find((actorEntry) => actorEntry.actor.getClassName() === 'vtkVolume' &&
+            actorEntry.uid === specifier.volumeId)?.uid;
+    }
+    getViewReferenceId(specifier = {}) {
+        let { volumeId, sliceIndex: sliceIndex } = specifier;
+        if (!volumeId) {
+            const actorEntries = this.getActors();
+            if (!actorEntries) {
+                return;
+            }
+            volumeId = actorEntries.find((actorEntry) => actorEntry.actor.getClassName() === 'vtkVolume')?.uid;
+        }
+        const currentIndex = this.getSliceIndex();
+        sliceIndex ??= currentIndex;
+        const { viewPlaneNormal, focalPoint } = this.getCamera();
+        const querySeparator = volumeId.indexOf('?') > -1 ? '&' : '?';
+        return `volumeId:${volumeId}${querySeparator}sliceIndex=${sliceIndex}&viewPlaneNormal=${viewPlaneNormal.join(',')}&focalPoint=${focalPoint.join(',')}`;
+    }
 }
 export default BaseVolumeViewport;
-//# sourceMappingURL=BaseVolumeViewport.js.map

package/dist/esm/RenderingEngine/CanvasActor/CanvasMapper.d.ts

@@ -0,0 +1,6 @@
+import CanvasActor from '.';
+export default class CanvasMapper {
+    private actor;
+    constructor(actor: CanvasActor);
+    getInputData(): any;
+}

package/dist/esm/RenderingEngine/CanvasActor/CanvasMapper.js

@@ -0,0 +1,8 @@
+export default class CanvasMapper {
+    constructor(actor) {
+        this.actor = actor;
+    }
+    getInputData() {
+        return this.actor.getImage();
+    }
+}

package/dist/esm/RenderingEngine/CanvasActor/CanvasProperties.d.ts

@@ -0,0 +1,15 @@
+import CanvasActor from '.';
+export default class CanvasProperties {
+    private actor;
+    private opacity;
+    private outlineOpacity;
+    private transferFunction;
+    constructor(actor: CanvasActor);
+    setRGBTransferFunction(index: any, cfun: any): void;
+    setScalarOpacity(opacity: number): void;
+    setInterpolationTypeToNearest(): void;
+    setUseLabelOutline(): void;
+    setLabelOutlineOpacity(opacity: any): void;
+    setLabelOutlineThickness(): void;
+    getColor(index: number): any[];
+}

package/dist/esm/RenderingEngine/CanvasActor/CanvasProperties.js

@@ -0,0 +1,29 @@
+export default class CanvasProperties {
+    constructor(actor) {
+        this.opacity = 0.4;
+        this.outlineOpacity = 0.4;
+        this.transferFunction = [];
+        this.actor = actor;
+    }
+    setRGBTransferFunction(index, cfun) {
+        this.transferFunction[index] = cfun;
+    }
+    setScalarOpacity(opacity) {
+    }
+    setInterpolationTypeToNearest() {
+    }
+    setUseLabelOutline() {
+    }
+    setLabelOutlineOpacity(opacity) {
+        this.outlineOpacity = opacity;
+    }
+    setLabelOutlineThickness() {
+    }
+    getColor(index) {
+        const cfun = this.transferFunction[0];
+        const r = cfun.getRedValue(index);
+        const g = cfun.getGreenValue(index);
+        const b = cfun.getBlueValue(index);
+        return [r, g, b, this.opacity];
+    }
+}