@cornerstonejs/core 5.0.0-beta.1 → 5.0.1

package/dist/esm/RenderingEngine/WSIViewport.js

@@ -7,10 +7,9 @@ import Viewport from './Viewport';
 import { getOrCreateCanvas } from './helpers';
 import { EPSILON } from '../constants';
 import triggerEvent from '../utilities/triggerEvent';
-import { peerImport } from '../init';
-import microscopyViewportCss from '../constants/microscopyViewportCss';
 import eventTarget from '../eventTarget';
 import imageIdToURI from '../utilities/imageIdToURI';
+import { addWSIMiniNavigationOverlayCss, getDicomMicroscopyViewer, loadWSIData, } from '../utilities/WSIUtilities';
 let WSIUtilFunctions = null;
 const EVENT_POSTRENDER = 'postrender';
 const ANNOTATION_REMOVED = 'CORNERSTONE_TOOLS_ANNOTATION_REMOVED';
@@ -166,48 +165,7 @@ class WSIViewport extends Viewport {
         this.microscopyElement = null;
         this.imageURISet.clear();
     }
-    getImageDataMetadata(imageIndex = 0) {
-        const maxImage = this.metadataDicomweb.reduce((maxImage, image) => {
-            return maxImage?.NumberOfFrames < image.NumberOfFrames ? image : maxImage;
-        });
-        const { TotalPixelMatrixColumns: columns, TotalPixelMatrixRows: rows, ImageOrientationSlide, ImagedVolumeWidth: width, ImagedVolumeHeight: height, ImagedVolumeDepth: depth, } = maxImage;
-        const imagePlaneModule = metaData.get(MetadataModules.IMAGE_PLANE, this.imageIds[imageIndex]);
-        let rowCosines = ImageOrientationSlide.slice(0, 3);
-        let columnCosines = ImageOrientationSlide.slice(3, 6);
-        if (rowCosines == null || columnCosines == null) {
-            rowCosines = [1, 0, 0];
-            columnCosines = [0, 1, 0];
-        }
-        const rowCosineVec = vec3.fromValues(rowCosines[0], rowCosines[1], rowCosines[2]);
-        const colCosineVec = vec3.fromValues(columnCosines[0], columnCosines[1], columnCosines[2]);
-        const scanAxisNormal = vec3.create();
-        vec3.cross(scanAxisNormal, rowCosineVec, colCosineVec);
-        const { XOffsetInSlideCoordinateSystem = 0, YOffsetInSlideCoordinateSystem = 0, ZOffsetInSlideCoordinateSystem = 0, } = maxImage.TotalPixelMatrixOriginSequence?.[0] || {};
-        const origin = [
-            XOffsetInSlideCoordinateSystem,
-            YOffsetInSlideCoordinateSystem,
-            ZOffsetInSlideCoordinateSystem,
-        ];
-        const xSpacing = width / columns;
-        const ySpacing = height / rows;
-        const xVoxels = columns;
-        const yVoxels = rows;
-        const zSpacing = depth;
-        const zVoxels = 1;
-        this.hasPixelSpacing = !!(width && height);
-        return {
-            bitsAllocated: 8,
-            numberOfComponents: 3,
-            origin,
-            direction: [...rowCosineVec, ...colCosineVec, ...scanAxisNormal],
-            dimensions: [xVoxels, yVoxels, zVoxels],
-            spacing: [xSpacing, ySpacing, zSpacing],
-            hasPixelSpacing: this.hasPixelSpacing,
-            numVoxels: xVoxels * yVoxels * zVoxels,
-            imagePlaneModule,
-        };
-    }
-    async setFrameNumber(frame) {
+    async setFrameNumber(_frame) {
     }
     setProperties(props) {
         if (props.voiRange) {
@@ -309,12 +267,12 @@ class WSIViewport extends Viewport {
         if (parallelScale) {
             const worldToCanvasRatio = this.element.clientHeight / parallelScale;
             const resolution = 1 / xSpacing / worldToCanvasRatio;
-            view.setResolution(resolution);
+            view.setResolution?.(resolution);
         }
         if (focalPoint) {
             const newCanvas = this.worldToCanvas(focalPoint);
             const newIndex = this.canvasToIndex(newCanvas);
-            view.setCenter(newIndex);
+            view.setCenter([newIndex[0], newIndex[1]]);
         }
         const updatedCamera = this.getCamera();
         this.triggerCameraModifiedEventIfNecessary(previousCamera, updatedCamera);
@@ -344,9 +302,6 @@ class WSIViewport extends Viewport {
             viewPlaneNormal: [0, 0, 1],
         };
     }
-    static { this.getDicomMicroscopyViewer = async () => {
-        return peerImport('dicom-microscopy-viewer');
-    }; }
     worldToIndexWSI(point) {
         if (!WSIUtilFunctions) {
             return;
@@ -381,9 +336,22 @@ class WSIViewport extends Viewport {
         vec3.transformMat4(worldPos, point3D, indexToWorldMatrix);
         return [worldPos[0], worldPos[1], worldPos[2]];
     }
+    setDataList(entries) {
+        if (!entries.length) {
+            return;
+        }
+        const { dataId } = entries[0];
+        const dataSet = metaData.get('genericViewportDataSet', dataId);
+        if (dataSet?.imageIds) {
+            return this.setDataIds(dataSet.imageIds, {
+                webClient: dataSet.options?.webClient,
+            });
+        }
+        return this.setDataIds([dataId]);
+    }
     setDataIds(imageIds, options) {
         if (options?.miniNavigationOverlay !== false) {
-            WSIViewport.addMiniNavigationOverlayCss();
+            addWSIMiniNavigationOverlayCss();
         }
         const webClient = options?.webClient ||
             metaData.get(MetadataModules.WADO_WEB_CLIENT, imageIds[0]);
@@ -396,56 +364,25 @@ class WSIViewport extends Viewport {
         this.microscopyElement.style.background = 'black';
         this.microscopyElement.innerText = 'Loading';
         this.imageIds = imageIds;
-        this.imageURISet = new Set(imageIds.map((imageId) => imageIdToURI(imageId)));
-        const DicomMicroscopyViewer = await WSIViewport.getDicomMicroscopyViewer();
+        const DicomMicroscopyViewer = await getDicomMicroscopyViewer();
         WSIUtilFunctions ||= DicomMicroscopyViewer.utils;
-        this.frameOfReferenceUID = null;
-        const metadataDicomweb = this.imageIds.map((imageId) => {
-            const imageMetadata = client.getDICOMwebMetadata(imageId);
-            Object.defineProperty(imageMetadata, 'isMultiframe', {
-                value: imageMetadata.isMultiframe,
-                enumerable: false,
-            });
-            Object.defineProperty(imageMetadata, 'frameNumber', {
-                value: undefined,
-                enumerable: false,
-            });
-            const imageType = imageMetadata['00080008']?.Value;
-            if (imageType?.length === 1) {
-                imageMetadata['00080008'].Value = imageType[0].split('\\');
-            }
-            const frameOfReference = imageMetadata['00200052']?.Value?.[0];
-            if (!this.frameOfReferenceUID) {
-                this.frameOfReferenceUID = frameOfReference;
-            }
-            else if (frameOfReference !== this.frameOfReferenceUID) {
-                imageMetadata['00200052'].Value = [this.frameOfReferenceUID];
-            }
-            return imageMetadata;
-        });
-        const volumeImages = [];
-        metadataDicomweb.forEach((m) => {
-            const image = new DicomMicroscopyViewer.metadata.VLWholeSlideMicroscopyImage({
-                metadata: m,
-            });
-            const imageFlavor = image.ImageType[2];
-            if (imageFlavor === 'VOLUME' || imageFlavor === 'THUMBNAIL') {
-                volumeImages.push(image);
-            }
-            else {
-                console.log('Unknown image type', image.ImageType);
-            }
+        const loadedData = await loadWSIData({
+            imageIds: this.imageIds,
+            client,
+            dicomMicroscopyViewer: DicomMicroscopyViewer,
         });
-        this.metadataDicomweb = volumeImages;
+        this.imageURISet = loadedData.imageURISet;
+        this.frameOfReferenceUID = loadedData.frameOfReferenceUID;
+        this.metadata = loadedData.metadata;
+        this.hasPixelSpacing = loadedData.metadata.hasPixelSpacing;
         const viewer = new DicomMicroscopyViewer.viewer.VolumeImageViewer({
             client,
-            metadata: volumeImages,
+            metadata: loadedData.volumeImages,
             controls: ['overview', 'position'],
             retrieveRendered: false,
             bindings: {},
         });
         viewer.render({ container: this.microscopyElement });
-        this.metadata = this.getImageDataMetadata();
         viewer.deactivateDragPanInteraction();
         this.viewer = viewer;
         this.map = viewer.getMap();
@@ -530,15 +467,5 @@ class WSIViewport extends Viewport {
     getCurrentImageIdIndex() {
         return 0;
     }
-    static { this.overlayCssId = 'overlayCss'; }
-    static addMiniNavigationOverlayCss() {
-        if (document.getElementById(this.overlayCssId)) {
-            return;
-        }
-        const overlayCss = document.createElement('style');
-        overlayCss.innerText = microscopyViewportCss;
-        overlayCss.setAttribute('id', this.overlayCssId);
-        document.getElementsByTagName('head')[0].append(overlayCss);
-    }
 }
 export default WSIViewport;

package/dist/esm/RenderingEngine/helpers/addVolumesToViewports.js

@@ -1,20 +1,18 @@
-import BaseVolumeViewport from '../BaseVolumeViewport';
+import isVolumeCompatible, {} from './supportsVolumeCompatibilityApi';
 async function addVolumesToViewports(renderingEngine, volumeInputs, viewportIds, immediateRender = false, suppressEvents = false) {
+    const compatibleViewports = [];
     for (const viewportId of viewportIds) {
         const viewport = renderingEngine.getViewport(viewportId);
         if (!viewport) {
             throw new Error(`Viewport with Id ${viewportId} does not exist`);
         }
-        if (!(viewport instanceof BaseVolumeViewport)) {
-            console.warn(`Viewport with Id ${viewportId} is not a BaseVolumeViewport. Cannot add volume to this viewport.`);
+        if (!isVolumeCompatible(viewport)) {
+            console.warn(`Viewport with Id ${viewportId} does not implement addVolumes. Cannot add volume to this viewport.`);
             return;
         }
+        compatibleViewports.push(viewport);
     }
-    const addVolumePromises = viewportIds.map(async (viewportId) => {
-        const viewport = renderingEngine.getViewport(viewportId);
-        await viewport.addVolumes(volumeInputs, immediateRender, suppressEvents);
-    });
-    await Promise.all(addVolumePromises);
+    await Promise.all(compatibleViewports.map((viewport) => viewport.addVolumes(volumeInputs, immediateRender, suppressEvents)));
     return;
 }
 export default addVolumesToViewports;

package/dist/esm/RenderingEngine/helpers/cpuFallback/colors/colormap.d.ts

@@ -1,3 +1,6 @@
-import type { CPUFallbackColormap, CPUFallbackColormapData } from '../../../../types';
+import type { ColormapPublic, CPUFallbackColormap, CPUFallbackColormapData, VOIRange } from '../../../../types';
 export declare function getColormapsList(): any[];
+export declare function resolveCPUFallbackColormap(colormap?: string | ColormapPublic, fallbackColormap?: CPUFallbackColormap, options?: {
+    voiRange?: VOIRange;
+}): CPUFallbackColormap | undefined;
 export declare function getColormap(id: string, colormapData?: CPUFallbackColormapData): CPUFallbackColormap;

package/dist/esm/RenderingEngine/helpers/cpuFallback/colors/colormap.js

@@ -1,6 +1,21 @@
 import LookupTable from './lookupTable';
 import CPU_COLORMAPS from '../../../../constants/cpuColormaps';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import { resolveColormap as resolveSharedColormap } from '../../../../utilities/colormap';
 const COLOR_TRANSPARENT = [0, 0, 0, 0];
+const CPU_FALLBACK_COLOR_COUNT = 256;
+const CPU_FALLBACK_GRAYSCALE_NAMES = new Set([
+    'gray',
+    'grey',
+    'grayscale',
+    'greyscale',
+]);
+function getCPUFallbackUnitValue(index) {
+    return index / CPU_FALLBACK_COLOR_COUNT;
+}
+function mapCPUFallbackColorIndex(index, colorCount) {
+    return Math.min(colorCount - 1, Math.floor(getCPUFallbackUnitValue(index) * colorCount));
+}
 function linspace(a, b, n) {
     n = n === null ? 100 : n;
     const increment = (b - a) / (n - 1);
@@ -109,6 +124,23 @@ export function getColormapsList() {
     });
     return colormaps;
 }
+export function resolveCPUFallbackColormap(colormap, fallbackColormap, options) {
+    const name = typeof colormap === 'string' ? colormap.trim() : colormap?.name?.trim();
+    if (!name) {
+        return fallbackColormap;
+    }
+    const normalizedName = name.toLowerCase();
+    if (CPU_FALLBACK_GRAYSCALE_NAMES.has(normalizedName)) {
+        return undefined;
+    }
+    const registeredColormap = resolveSharedColormap(name);
+    if (registeredColormap) {
+        return resolveCPUFallbackOpacityMappedColormap(getOrCreateCPUFallbackColormap(registeredColormap, name), typeof colormap === 'string' ? undefined : colormap, options?.voiRange);
+    }
+    const colormapId = findCPUFallbackColormapId(name);
+    const resolvedBaseColormap = colormapId ? getColormap(colormapId) : undefined;
+    return resolveCPUFallbackOpacityMappedColormap(resolvedBaseColormap, typeof colormap === 'string' ? undefined : colormap, options?.voiRange);
+}
 export function getColormap(id, colormapData) {
     let colormap = CPU_COLORMAPS[id];
     if (!colormap) {
@@ -192,3 +224,128 @@ export function getColormap(id, colormapData) {
     };
     return cpuFallbackColormap;
 }
+function getOrCreateCPUFallbackColormap(colormap, originalName) {
+    const id = `vtk:${(colormap.name || colormap.Name || originalName)
+        .trim()
+        .toLowerCase()}`;
+    return getColormap(id, createCPUFallbackColormapData(colormap, originalName));
+}
+function createCPUFallbackColormapData(colormap, originalName) {
+    const transferFunction = vtkColorTransferFunction.newInstance();
+    transferFunction.applyColorMap(colormap);
+    const [lower, upper] = transferFunction.getRange();
+    const colors = Array.from({ length: CPU_FALLBACK_COLOR_COUNT }, (_unused, index) => {
+        const t = getCPUFallbackUnitValue(index);
+        const x = lower + t * (upper - lower);
+        const rgb = [];
+        transferFunction.getColor(x, rgb);
+        return [
+            Math.round(rgb[0] * 255),
+            Math.round(rgb[1] * 255),
+            Math.round(rgb[2] * 255),
+            255,
+        ];
+    });
+    return {
+        colors,
+        name: colormap.Name || originalName,
+        numColors: colors.length,
+    };
+}
+function findCPUFallbackColormapId(name) {
+    const normalizedName = name.trim().toLowerCase();
+    return Object.keys(CPU_COLORMAPS).find((id) => {
+        const colormap = CPU_COLORMAPS[id];
+        return (id.toLowerCase() === normalizedName ||
+            colormap.name?.trim().toLowerCase() === normalizedName);
+    });
+}
+function resolveCPUFallbackOpacityMappedColormap(baseColormap, colormap, voiRange) {
+    if (!baseColormap) {
+        return;
+    }
+    if (colormap?.opacity === undefined && colormap?.threshold === undefined) {
+        return baseColormap;
+    }
+    if (!voiRange || voiRange.upper <= voiRange.lower) {
+        return baseColormap;
+    }
+    const alphaMappedColors = createOpacityMappedColors(baseColormap, colormap, voiRange);
+    const id = [
+        baseColormap.getId(),
+        `lower:${roundColormapNumber(voiRange.lower)}`,
+        `upper:${roundColormapNumber(voiRange.upper)}`,
+        `opacity:${serializeColormapOpacity(colormap?.opacity)}`,
+        `threshold:${roundColormapNumber(colormap?.threshold)}`,
+    ].join(':');
+    return getColormap(id, {
+        colors: alphaMappedColors,
+        name: baseColormap.getColorSchemeName(),
+        numColors: alphaMappedColors.length,
+    });
+}
+function createOpacityMappedColors(baseColormap, colormap, voiRange) {
+    const numberOfColors = Math.max(baseColormap.getNumberOfColors(), 1);
+    return Array.from({ length: CPU_FALLBACK_COLOR_COUNT }, (_unused, index) => {
+        const sourceIndex = numberOfColors === 1
+            ? 0
+            : mapCPUFallbackColorIndex(index, numberOfColors);
+        const rgba = baseColormap.getColor(sourceIndex);
+        const scalarValue = voiRange.lower +
+            (voiRange.upper - voiRange.lower) * getCPUFallbackUnitValue(index);
+        const opacity = resolveOpacityAtValue(scalarValue, colormap?.opacity, colormap?.threshold);
+        return [
+            rgba[0],
+            rgba[1],
+            rgba[2],
+            Math.round((rgba[3] / 255) * opacity * 255),
+        ];
+    });
+}
+function resolveOpacityAtValue(scalarValue, opacity, threshold) {
+    if (threshold !== undefined && scalarValue < threshold) {
+        return 0;
+    }
+    if (opacity === undefined) {
+        return 1;
+    }
+    if (typeof opacity === 'number') {
+        return clampToUnit(opacity);
+    }
+    if (!opacity.length) {
+        return 1;
+    }
+    if (scalarValue <= opacity[0].value) {
+        return clampToUnit(opacity[0].opacity);
+    }
+    for (let i = 1; i < opacity.length; i++) {
+        const previous = opacity[i - 1];
+        const current = opacity[i];
+        if (scalarValue <= current.value) {
+            const range = current.value - previous.value;
+            const t = range > 0 ? (scalarValue - previous.value) / range : 0;
+            return clampToUnit(previous.opacity + (current.opacity - previous.opacity) * t);
+        }
+    }
+    return clampToUnit(opacity[opacity.length - 1].opacity);
+}
+function clampToUnit(value) {
+    return Math.max(0, Math.min(1, value));
+}
+function serializeColormapOpacity(opacity) {
+    if (opacity === undefined) {
+        return 'none';
+    }
+    if (typeof opacity === 'number') {
+        return String(roundColormapNumber(opacity));
+    }
+    return opacity
+        .map(({ opacity: alpha, value }) => `${roundColormapNumber(value)}-${roundColormapNumber(alpha)}`)
+        .join(',');
+}
+function roundColormapNumber(value) {
+    if (value === undefined) {
+        return 'none';
+    }
+    return String(Math.round(value * 1000) / 1000);
+}

package/dist/esm/RenderingEngine/helpers/cpuFallback/colors/index.d.ts

@@ -1,3 +1,2 @@
-import { getColormap, getColormapsList } from './colormap';
-import LookupTable from './lookupTable';
-export { getColormap, getColormapsList, LookupTable };
+export * from './colormap';
+export { default as LookupTable } from './lookupTable';

package/dist/esm/RenderingEngine/helpers/cpuFallback/colors/index.js

@@ -1,3 +1,2 @@
-import { getColormap, getColormapsList } from './colormap';
-import LookupTable from './lookupTable';
-export { getColormap, getColormapsList, LookupTable };
+export * from './colormap';
+export { default as LookupTable } from './lookupTable';

package/dist/esm/RenderingEngine/helpers/cpuFallback/rendering/calculateTransform.js

@@ -1,6 +1,14 @@
 import { Transform } from './transform';
+function getViewportScale(scale) {
+    if (Array.isArray(scale)) {
+        return [scale[0] ?? 1, scale[1] ?? 1, true];
+    }
+    const scalarScale = scale ?? 1;
+    return [scalarScale, scalarScale, false];
+}
 export default function (enabledElement, scale) {
     const transform = new Transform();
+    const aspectRatio = enabledElement.viewport.aspectRatio;
     if (!enabledElement.viewport.displayedArea) {
         return transform;
     }
@@ -9,13 +17,16 @@ export default function (enabledElement, scale) {
     if (angle !== 0) {
         transform.rotate((angle * Math.PI) / 180);
     }
-    let widthScale = enabledElement.viewport.scale;
-    let heightScale = enabledElement.viewport.scale;
+    const [viewportScaleX, viewportScaleY, hasExplicitAxisScale] = getViewportScale(enabledElement.viewport.scale);
+    let widthScale = viewportScaleX;
+    let heightScale = viewportScaleY;
     const width = enabledElement.viewport.displayedArea.brhc.x -
         (enabledElement.viewport.displayedArea.tlhc.x - 1);
     const height = enabledElement.viewport.displayedArea.brhc.y -
         (enabledElement.viewport.displayedArea.tlhc.y - 1);
-    if (enabledElement.viewport.displayedArea.presentationSizeMode === 'NONE') {
+    if (hasExplicitAxisScale) {
+    }
+    else if (enabledElement.viewport.displayedArea.presentationSizeMode === 'NONE') {
         if (enabledElement.image.rowPixelSpacing <
             enabledElement.image.columnPixelSpacing) {
             widthScale *=
@@ -59,9 +70,13 @@ export default function (enabledElement, scale) {
     if (angle !== 0) {
         transform.rotate((angle * Math.PI) / 180);
     }
-    if (scale !== undefined) {
+    if (scale !== undefined && aspectRatio === undefined) {
         transform.scale(scale, scale);
     }
+    if (aspectRatio !== undefined && scale === undefined) {
+        const [scaleX, scaleY] = aspectRatio;
+        transform.scale(scaleX, scaleY);
+    }
     if (enabledElement.viewport.hflip) {
         transform.scale(-1, 1);
     }

package/dist/esm/RenderingEngine/helpers/cpuFallback/rendering/renderPseudoColorImage.js

@@ -19,7 +19,12 @@ function getRenderCanvas(enabledElement, image, invalidated) {
         console.warn('enabledElement.options.colormap is deprecated. Use enabledElement.viewport.colormap instead');
     }
     if (colormap && typeof colormap === 'string') {
-        colormap = colors.getColormap(colormap);
+        colormap = colors.resolveCPUFallbackColormap(colormap);
+    }
+    else if (colormap &&
+        typeof colormap === 'object' &&
+        typeof colormap.getId !== 'function') {
+        colormap = colors.resolveCPUFallbackColormap(colormap);
     }
     if (!colormap) {
         throw new Error('renderPseudoColorImage: colormap not found.');
@@ -87,8 +92,13 @@ export function renderPseudoColorImage(enabledElement, invalidated) {
     }
     const context = enabledElement.canvas.getContext('2d');
     context.setTransform(1, 0, 0, 1, 0, 0);
-    context.fillStyle = 'black';
-    context.fillRect(0, 0, enabledElement.canvas.width, enabledElement.canvas.height);
+    if (enabledElement.options?.transparentBackground) {
+        context.clearRect(0, 0, enabledElement.canvas.width, enabledElement.canvas.height);
+    }
+    else {
+        context.fillStyle = 'black';
+        context.fillRect(0, 0, enabledElement.canvas.width, enabledElement.canvas.height);
+    }
     context.imageSmoothingEnabled = !enabledElement.viewport.pixelReplication;
     setToPixelCoordinateSystem(enabledElement, context);
     const renderCanvas = getRenderCanvas(enabledElement, image, invalidated);

package/dist/esm/RenderingEngine/helpers/createVolumeSliceActor.d.ts

@@ -0,0 +1,14 @@
+import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
+import type { ImageActor } from '../../types/IActor';
+interface CreateVolumeSliceActorOptions {
+    volumeId: string;
+    callback?: ({ volumeActor, volumeId, }: {
+        volumeActor: ImageActor;
+        volumeId: string;
+    }) => void;
+}
+declare function createVolumeSliceActor(props: CreateVolumeSliceActorOptions, element: HTMLDivElement, viewportId: string, suppressEvents?: boolean): Promise<{
+    actor: ImageActor;
+    slicePlane: vtkPlane;
+}>;
+export default createVolumeSliceActor;

package/dist/esm/RenderingEngine/helpers/createVolumeSliceActor.js

@@ -0,0 +1,69 @@
+import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
+import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
+import { vtkSharedImageResliceMapper } from '../vtkClasses';
+import { loadVolume } from '../../loaders/volumeLoader';
+import triggerEvent from '../../utilities/triggerEvent';
+import { Events } from '../../enums';
+import setDefaultVolumeVOI from './setDefaultVolumeVOI';
+async function createVolumeSliceActor(props, element, viewportId, suppressEvents = false) {
+    const { volumeId, callback } = props;
+    const imageVolume = await loadVolume(volumeId);
+    if (!imageVolume) {
+        throw new Error(`imageVolume with id: ${volumeId} does not exist`);
+    }
+    const { imageData, vtkOpenGLTexture } = imageVolume;
+    const loadStatus = imageVolume.loadStatus;
+    const slicePlane = vtkPlane.newInstance();
+    const mapper = vtkSharedImageResliceMapper.newInstance();
+    if (!loadStatus || loadStatus.loaded) {
+        vtkOpenGLTexture.modified();
+    }
+    mapper.setInputData(imageData);
+    mapper.setSlicePlane(slicePlane);
+    mapper.setSlabThickness(0);
+    mapper.setScalarTexture?.(vtkOpenGLTexture);
+    mapper.modified();
+    const actor = vtkImageSlice.newInstance();
+    actor.setMapper(mapper);
+    const imageDataMetadata = imageData.get('numberOfComponents');
+    const numberOfComponents = imageDataMetadata?.numberOfComponents ?? 1;
+    if (numberOfComponents > 1) {
+        actor.getProperty().setIndependentComponents(false);
+    }
+    const imageProperty = actor.getProperty();
+    imageProperty.set({ viewportId }, true);
+    await setDefaultVolumeVOI(actor, imageVolume);
+    const defaultWindow = imageProperty.getColorWindow?.();
+    const defaultLevel = imageProperty.getColorLevel?.();
+    if (defaultWindow === 255 && defaultLevel === 127.5) {
+        const scalarRange = imageVolume.voxelManager?.getRange?.();
+        if (scalarRange?.length === 2) {
+            imageProperty.setColorWindow(scalarRange[1] - scalarRange[0]);
+            imageProperty.setColorLevel((scalarRange[1] + scalarRange[0]) / 2);
+        }
+    }
+    if (callback) {
+        callback({ volumeActor: actor, volumeId });
+    }
+    if (!suppressEvents) {
+        triggerVOIModified(element, viewportId, actor, volumeId);
+    }
+    return { actor, slicePlane };
+}
+function triggerVOIModified(element, viewportId, actor, volumeId) {
+    const transferFunction = actor.getProperty().getRGBTransferFunction(0);
+    if (!transferFunction) {
+        return;
+    }
+    const voiRange = transferFunction.getRange();
+    const voiModifiedEventDetail = {
+        viewportId,
+        range: {
+            lower: voiRange[0],
+            upper: voiRange[1],
+        },
+        volumeId,
+    };
+    triggerEvent(element, Events.VOI_MODIFIED, voiModifiedEventDetail);
+}
+export default createVolumeSliceActor;

package/dist/esm/RenderingEngine/helpers/getCameraVectors.d.ts

@@ -6,12 +6,13 @@ export interface CameraPositionConfig {
     orientation?: Enums.OrientationAxis;
     useViewportNormal?: boolean;
 }
+export type CameraVectorViewport = Pick<Types.IBaseVolumeViewport, 'getActors' | 'getCamera' | 'getCurrentImageId' | 'getImageIds' | 'type'>;
 export declare function calculateCameraPosition(rowCosineVec: vec3, colCosineVec: vec3, scanAxisNormal: vec3, orientation: Enums.OrientationAxis): {
     viewPlaneNormal: [number, number, number];
     viewUp: [number, number, number];
     viewRight: [number, number, number];
 };
-export declare function getCameraVectors(viewport: Types.IBaseVolumeViewport, config?: CameraPositionConfig): {
+export declare function getCameraVectors(viewport: CameraVectorViewport, config?: CameraPositionConfig): {
     viewPlaneNormal: [number, number, number];
     viewUp: [number, number, number];
     viewRight: [number, number, number];

package/dist/esm/RenderingEngine/helpers/getCameraVectors.js

@@ -103,7 +103,7 @@ export function getCameraVectors(viewport, config) {
     if (!imageId) {
         return;
     }
-    const { imageOrientationPatient } = metaData.get('imagePlaneModule', imageId);
+    const { imageOrientationPatient } = metaData.get(Enums.MetadataModules.IMAGE_PLANE, imageId);
     const rowCosineVec = vec3.fromValues(imageOrientationPatient[0], imageOrientationPatient[1], imageOrientationPatient[2]);
     const colCosineVec = vec3.fromValues(imageOrientationPatient[3], imageOrientationPatient[4], imageOrientationPatient[5]);
     const scanAxisNormal = vec3.cross(vec3.create(), rowCosineVec, colCosineVec);

package/dist/esm/RenderingEngine/helpers/getProjectionScaleMatrix.d.ts

@@ -0,0 +1,2 @@
+import { mat4 } from 'gl-matrix';
+export declare function getProjectionScaleMatrix(aspectRatio: Array<number>): mat4;

package/dist/esm/RenderingEngine/helpers/getProjectionScaleMatrix.js

@@ -0,0 +1,10 @@
+import { mat4 } from 'gl-matrix';
+export function getProjectionScaleMatrix(aspectRatio) {
+    const [scaleX, scaleY] = aspectRatio;
+    const projectionScaleMatrix = mat4.fromScaling(mat4.create(), [
+        scaleX,
+        scaleY,
+        1.0,
+    ]);
+    return projectionScaleMatrix;
+}

package/dist/esm/RenderingEngine/helpers/index.d.ts

@@ -5,4 +5,5 @@ import setVolumesForViewports from './setVolumesForViewports';
 import addVolumesToViewports from './addVolumesToViewports';
 import volumeNewImageEventDispatcher from './volumeNewImageEventDispatcher';
 import addImageSlicesToViewports from './addImageSlicesToViewports';
-export { createVolumeActor, createVolumeMapper, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, volumeNewImageEventDispatcher, };
+import { getProjectionScaleMatrix } from './getProjectionScaleMatrix';
+export { createVolumeActor, createVolumeMapper, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, volumeNewImageEventDispatcher, getProjectionScaleMatrix, };

package/dist/esm/RenderingEngine/helpers/index.js

@@ -5,4 +5,5 @@ import setVolumesForViewports from './setVolumesForViewports';
 import addVolumesToViewports from './addVolumesToViewports';
 import volumeNewImageEventDispatcher from './volumeNewImageEventDispatcher';
 import addImageSlicesToViewports from './addImageSlicesToViewports';
-export { createVolumeActor, createVolumeMapper, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, volumeNewImageEventDispatcher, };
+import { getProjectionScaleMatrix } from './getProjectionScaleMatrix';
+export { createVolumeActor, createVolumeMapper, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, volumeNewImageEventDispatcher, getProjectionScaleMatrix, };