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

package/dist/esm/RenderingEngine/VolumeViewport.js

@@ -1,19 +1,26 @@
+import { mat4, vec3 } from 'gl-matrix';
 import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
-import cache from '../cache';
-import { MPR_CAMERA_VALUES, RENDERING_DEFAULTS } from '../constants';
+import cache from '../cache/cache';
+import { EPSILON, MPR_CAMERA_VALUES, RENDERING_DEFAULTS } from '../constants';
 import { OrientationAxis, Events } from '../enums';
-import { actorIsA, getClosestImageId, getSliceRange, getSpacingInNormalDirection, isImageActor, snapFocalPointToSlice, triggerEvent, } from '../utilities';
+import { actorIsA, isImageActor } from '../utilities/actorCheck';
+import getClosestImageId from '../utilities/getClosestImageId';
+import getSliceRange from '../utilities/getSliceRange';
+import getSpacingInNormalDirection from '../utilities/getSpacingInNormalDirection';
+import snapFocalPointToSlice from '../utilities/snapFocalPointToSlice';
+import triggerEvent from '../utilities/triggerEvent';
 import BaseVolumeViewport from './BaseVolumeViewport';
 import setDefaultVolumeVOI from './helpers/setDefaultVolumeVOI';
 import { setTransferFunctionNodes } from '../utilities/transferFunctionUtils';
 import getImageSliceDataForVolumeViewport from '../utilities/getImageSliceDataForVolumeViewport';
-import { vec3 } from 'gl-matrix';
+import { transformCanvasToIJK } from '../utilities/transformCanvasToIJK';
+import { transformIJKToCanvas } from '../utilities/transformIJKToCanvas';
 class VolumeViewport extends BaseVolumeViewport {
     constructor(props) {
         super(props);
         this._useAcquisitionPlaneForViewPlane = false;
         this.getNumberOfSlices = () => {
-            const { numberOfSlices } = getImageSliceDataForVolumeViewport(this);
+            const { numberOfSlices } = getImageSliceDataForVolumeViewport(this) || {};
             return numberOfSlices;
         };
         this.getCurrentImageIdIndex = (volumeId) => {
@@ -30,7 +37,7 @@ class VolumeViewport extends BaseVolumeViewport {
             return Math.round(Math.abs(distance) / spacingInNormal);
         };
         this.getSliceIndex = () => {
-            const { imageIndex } = getImageSliceDataForVolumeViewport(this);
+            const { imageIndex } = getImageSliceDataForVolumeViewport(this) || {};
             return imageIndex;
         };
         this.getCurrentImageId = () => {
@@ -176,14 +183,14 @@ class VolumeViewport extends BaseVolumeViewport {
         }
     }
     resetCamera(options) {
-        const { resetPan = true, resetZoom = true, resetRotation = true, resetToCenter = true, suppressEvents = false, } = options || {};
+        const { resetPan = true, resetZoom = true, resetRotation = true, resetToCenter = true, suppressEvents = false, resetOrientation = true, } = options || {};
         const { orientation } = this.viewportProperties;
-        if (orientation) {
+        if (orientation && resetOrientation) {
             this.applyViewOrientation(orientation, false);
         }
         super.resetCamera({ resetPan, resetZoom, resetToCenter });
-        this.resetVolumeViewportClippingRange();
         const activeCamera = this.getVtkActiveCamera();
+        this.setCameraClippingRange();
         const viewPlaneNormal = activeCamera.getViewPlaneNormal();
         const focalPoint = activeCamera.getFocalPoint();
         const actorEntries = this.getActors();
@@ -242,6 +249,7 @@ class VolumeViewport extends BaseVolumeViewport {
         });
         const currentCamera = this.getCamera();
         this.updateClippingPlanesForActors(currentCamera);
+        this.setCameraClippingRange();
         this.triggerCameraModifiedEventIfNecessary(currentCamera, currentCamera);
         this.viewportProperties.slabThickness = slabThickness;
     }
@@ -257,6 +265,74 @@ class VolumeViewport extends BaseVolumeViewport {
         this.triggerCameraModifiedEventIfNecessary(currentCamera, currentCamera);
         this.viewportProperties.slabThickness = undefined;
     }
+    getSliceViewInfo() {
+        const { width: canvasWidth, height: canvasHeight } = this.getCanvas();
+        const ijkOriginPoint = transformCanvasToIJK(this, [0, 0]);
+        const ijkRowPoint = transformCanvasToIJK(this, [canvasWidth - 1, 0]);
+        const ijkColPoint = transformCanvasToIJK(this, [0, canvasHeight - 1]);
+        const ijkRowVec = vec3.sub(vec3.create(), ijkRowPoint, ijkOriginPoint);
+        const ijkColVec = vec3.sub(vec3.create(), ijkColPoint, ijkOriginPoint);
+        const ijkSliceVec = vec3.cross(vec3.create(), ijkRowVec, ijkColVec);
+        vec3.normalize(ijkRowVec, ijkRowVec);
+        vec3.normalize(ijkColVec, ijkColVec);
+        vec3.normalize(ijkSliceVec, ijkSliceVec);
+        const { dimensions } = this.getImageData();
+        const [sx, sy, sz] = dimensions;
+        const ijkCorners = [
+            [0, 0, 0],
+            [sx - 1, 0, 0],
+            [0, sy - 1, 0],
+            [sx - 1, sy - 1, 0],
+            [0, 0, sz - 1],
+            [sx - 1, 0, sz - 1],
+            [0, sy - 1, sz - 1],
+            [sx - 1, sy - 1, sz - 1],
+        ];
+        const canvasCorners = ijkCorners.map((ijkCorner) => transformIJKToCanvas(this, ijkCorner));
+        const canvasAABB = canvasCorners.reduce((aabb, canvasPoint) => {
+            aabb.minX = Math.min(aabb.minX, canvasPoint[0]);
+            aabb.minY = Math.min(aabb.minY, canvasPoint[1]);
+            aabb.maxX = Math.max(aabb.maxX, canvasPoint[0]);
+            aabb.maxY = Math.max(aabb.maxY, canvasPoint[1]);
+            return aabb;
+        }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
+        const ijkTopLeft = transformCanvasToIJK(this, [
+            canvasAABB.minX,
+            canvasAABB.minY,
+        ]);
+        const sliceToIndexMatrix = mat4.fromValues(ijkRowVec[0], ijkRowVec[1], ijkRowVec[2], 0, ijkColVec[0], ijkColVec[1], ijkColVec[2], 0, ijkSliceVec[0], ijkSliceVec[1], ijkSliceVec[2], 0, ijkTopLeft[0], ijkTopLeft[1], ijkTopLeft[2], 1);
+        const ijkBottomRight = transformCanvasToIJK(this, [
+            canvasAABB.maxX,
+            canvasAABB.maxY,
+        ]);
+        const ijkDiagonal = vec3.sub(vec3.create(), ijkBottomRight, ijkTopLeft);
+        const indexToSliceMatrix = mat4.invert(mat4.create(), sliceToIndexMatrix);
+        const { viewPlaneNormal } = this.getCamera();
+        const isOblique = viewPlaneNormal.filter((component) => Math.abs(component) > EPSILON)
+            .length > 1;
+        if (isOblique) {
+            throw new Error('getSliceInfo is not supported for oblique views');
+        }
+        const sliceAxis = viewPlaneNormal.findIndex((component) => Math.abs(component) > 1 - EPSILON);
+        if (sliceAxis === -1) {
+            throw new Error('Unable to determine slice axis');
+        }
+        const sliceWidth = vec3.dot(ijkRowVec, ijkDiagonal) + 1;
+        const sliceHeight = vec3.dot(ijkColVec, ijkDiagonal) + 1;
+        return {
+            sliceIndex: this.getSliceIndex(),
+            width: sliceWidth,
+            height: sliceHeight,
+            slicePlane: sliceAxis,
+            sliceToIndexMatrix,
+            indexToSliceMatrix,
+        };
+    }
+    getCurrentSlicePixelData() {
+        const { voxelManager } = this.getImageData();
+        const sliceData = voxelManager.getSliceData(this.getSliceViewInfo());
+        return sliceData;
+    }
     getViewReference(viewRefSpecifier = {}) {
         const viewRef = super.getViewReference(viewRefSpecifier);
         if (!viewRef?.volumeId) {
@@ -285,7 +361,7 @@ class VolumeViewport extends BaseVolumeViewport {
         if (!imageVolume) {
             throw new Error(`imageVolume with id: ${volumeActor.uid} does not exist in cache`);
         }
-        setDefaultVolumeVOI(volumeActor.actor, imageVolume, false);
+        setDefaultVolumeVOI(volumeActor.actor, imageVolume);
         if (isImageActor(volumeActor)) {
             const transferFunction = volumeActor.actor
                 .getProperty()
@@ -307,6 +383,15 @@ class VolumeViewport extends BaseVolumeViewport {
         });
         triggerEvent(this.element, Events.VOI_MODIFIED, eventDetails);
     }
+    setCameraClippingRange() {
+        const activeCamera = this.getVtkActiveCamera();
+        if (activeCamera.getParallelProjection()) {
+            activeCamera.setClippingRange(activeCamera.getDistance(), activeCamera.getDistance() + this.getSlabThickness());
+        }
+        else {
+            activeCamera.setClippingRange(RENDERING_DEFAULTS.MINIMUM_SLAB_THICKNESS, RENDERING_DEFAULTS.MAXIMUM_RAY_DISTANCE);
+        }
+    }
     getSlicesClippingPlanes() {
         const focalPoints = this.getSlicePlaneCoordinates();
         const { viewPlaneNormal } = this.getCamera();

package/dist/esm/RenderingEngine/VolumeViewport3D.d.ts

@@ -1,13 +1,13 @@
-import { BlendModes } from '../enums';
+import type { BlendModes } from '../enums';
 import type { ViewportInput } from '../types/IViewport';
 import BaseVolumeViewport from './BaseVolumeViewport';
 declare class VolumeViewport3D extends BaseVolumeViewport {
     constructor(props: ViewportInput);
     resetCamera(resetPan?: boolean, resetZoom?: boolean, resetToCenter?: boolean): boolean;
     getRotation: () => number;
-    getCurrentImageIdIndex: () => number | undefined;
+    getCurrentImageIdIndex: () => number;
     getCurrentImageId: () => string;
-    setSlabThickness(slabThickness: number, filterActorUIDs?: Array<string>): void;
+    setSlabThickness(slabThickness: number, filterActorUIDs?: string[]): void;
     setBlendMode(blendMode: BlendModes, filterActorUIDs?: string[], immediate?: boolean): void;
     resetProperties(volumeId?: string): void;
     resetSlabThickness(): void;

package/dist/esm/RenderingEngine/VolumeViewport3D.js

@@ -1,3 +1,4 @@
+import { RENDERING_DEFAULTS } from '../constants';
 import { OrientationAxis } from '../enums';
 import BaseVolumeViewport from './BaseVolumeViewport';
 class VolumeViewport3D extends BaseVolumeViewport {
@@ -5,7 +6,7 @@ class VolumeViewport3D extends BaseVolumeViewport {
         super(props);
         this.getRotation = () => 0;
         this.getCurrentImageIdIndex = () => {
-            return undefined;
+            return 0;
         };
         this.getCurrentImageId = () => {
             return null;
@@ -21,8 +22,14 @@ class VolumeViewport3D extends BaseVolumeViewport {
     }
     resetCamera(resetPan = true, resetZoom = true, resetToCenter = true) {
         super.resetCamera({ resetPan, resetZoom, resetToCenter });
-        this.resetVolumeViewportClippingRange();
-        return;
+        const activeCamera = this.getVtkActiveCamera();
+        if (activeCamera.getParallelProjection()) {
+            activeCamera.setClippingRange(-RENDERING_DEFAULTS.MAXIMUM_RAY_DISTANCE, RENDERING_DEFAULTS.MAXIMUM_RAY_DISTANCE);
+        }
+        else {
+            activeCamera.setClippingRange(RENDERING_DEFAULTS.MINIMUM_SLAB_THICKNESS, RENDERING_DEFAULTS.MAXIMUM_RAY_DISTANCE);
+        }
+        return true;
     }
     setSlabThickness(slabThickness, filterActorUIDs) {
         return null;

package/dist/esm/RenderingEngine/WSIViewport.d.ts

@@ -0,0 +1,58 @@
+import type { IWSIViewport, WSIViewportProperties, Point3, Point2, ICamera, WSIViewportInput, CPUIImageData } from '../types';
+import { Transform } from './helpers/cpuFallback/rendering/transform';
+import Viewport from './Viewport';
+declare class WSIViewport extends Viewport implements IWSIViewport {
+    modality: any;
+    protected imageIds: string[];
+    readonly uid: any;
+    readonly renderingEngineId: string;
+    private frameOfReferenceUID;
+    protected metadata: any;
+    protected metadataDicomweb: any;
+    private microscopyElement;
+    protected map: any;
+    private internalCamera;
+    private viewer;
+    private voiRange;
+    constructor(props: WSIViewportInput);
+    static get useCustomRenderingPipeline(): boolean;
+    private addEventListeners;
+    private removeEventListeners;
+    private elementDisabledHandler;
+    private getImageDataMetadata;
+    setFrameNumber(frame: number): Promise<void>;
+    setProperties(props: WSIViewportProperties): void;
+    getProperties: () => WSIViewportProperties;
+    resetProperties(): void;
+    protected getScalarData(): any;
+    getImageData(): CPUIImageData;
+    hasImageURI(imageURI: string): boolean;
+    setCamera(camera: ICamera): void;
+    getCurrentImageId(): string;
+    getFrameNumber(): number;
+    getCamera(): ICamera;
+    resetCamera: () => boolean;
+    getNumberOfSlices: () => number;
+    static getDicomMicroscopyViewer: () => Promise<any>;
+    getFrameOfReferenceUID: () => string;
+    resize: () => void;
+    canvasToWorld: (canvasPos: Point2) => Point3;
+    worldToCanvas: (worldPos: Point3) => Point2;
+    setDataIds(imageIds: string[]): Promise<void>;
+    setWSI(imageIds: string[], client: any): Promise<void>;
+    postrender: () => void;
+    scroll(delta: number): void;
+    getRotation: () => number;
+    protected canvasToIndex: (canvasPos: Point2) => Point2;
+    protected indexToCanvas: (indexPos: Point2) => Point2;
+    getSliceIndex(): number;
+    getView(): any;
+    private refreshRenderValues;
+    customRenderViewportToCanvas: () => void;
+    getZoom(): any;
+    setZoom(zoom: number): void;
+    protected getTransform(): Transform;
+    getReferenceId(): string;
+    getCurrentImageIdIndex(): number;
+}
+export default WSIViewport;

package/dist/esm/RenderingEngine/WSIViewport.js

@@ -0,0 +1,414 @@
+import { vec3 } from 'gl-matrix';
+import { Events as EVENTS, MetadataModules } from '../enums';
+import uuidv4 from '../utilities/uuidv4';
+import * as metaData from '../metaData';
+import { Transform } from './helpers/cpuFallback/rendering/transform';
+import Viewport from './Viewport';
+import { getOrCreateCanvas } from './helpers';
+import { EPSILON } from '../constants';
+import triggerEvent from '../utilities/triggerEvent';
+import { peerImport } from '../init';
+const _map = Symbol.for('map');
+const EVENT_POSTRENDER = 'postrender';
+class WSIViewport extends Viewport {
+    constructor(props) {
+        super({
+            ...props,
+            canvas: props.canvas || getOrCreateCanvas(props.element),
+        });
+        this.internalCamera = {
+            rotation: 0,
+            centerIndex: [0, 0],
+            extent: [0, -2, 1, -1],
+            xSpacing: 1,
+            ySpacing: 1,
+            resolution: 1,
+            zoom: 1,
+        };
+        this.voiRange = {
+            lower: 0,
+            upper: 255,
+        };
+        this.getProperties = () => {
+            return {};
+        };
+        this.resetCamera = () => {
+            return true;
+        };
+        this.getNumberOfSlices = () => {
+            return 1;
+        };
+        this.getFrameOfReferenceUID = () => {
+            return this.frameOfReferenceUID;
+        };
+        this.resize = () => {
+            const canvas = this.canvas;
+            const { clientWidth, clientHeight } = canvas;
+            if (canvas.width !== clientWidth || canvas.height !== clientHeight) {
+                canvas.width = clientWidth;
+                canvas.height = clientHeight;
+            }
+            this.refreshRenderValues();
+        };
+        this.canvasToWorld = (canvasPos) => {
+            if (!this.metadata) {
+                return;
+            }
+            const [px, py] = this.canvasToIndex(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]];
+        };
+        this.worldToCanvas = (worldPos) => {
+            if (!this.metadata) {
+                return;
+            }
+            const { spacing, direction, origin } = this.metadata;
+            const iVector = direction.slice(0, 3);
+            const jVector = direction.slice(3, 6);
+            const diff = vec3.subtract([0, 0, 0], worldPos, origin);
+            const indexPoint = [
+                vec3.dot(diff, iVector) / spacing[0],
+                vec3.dot(diff, jVector) / spacing[1],
+            ];
+            const canvasPoint = this.indexToCanvas(indexPoint);
+            return canvasPoint;
+        };
+        this.postrender = () => {
+            this.refreshRenderValues();
+            triggerEvent(this.element, EVENTS.IMAGE_RENDERED, {
+                element: this.element,
+                viewportId: this.id,
+                viewport: this,
+                renderingEngineId: this.renderingEngineId,
+            });
+        };
+        this.getRotation = () => 0;
+        this.canvasToIndex = (canvasPos) => {
+            const transform = this.getTransform();
+            transform.invert();
+            return transform.transformPoint(canvasPos);
+        };
+        this.indexToCanvas = (indexPos) => {
+            const transform = this.getTransform();
+            return transform.transformPoint(indexPos);
+        };
+        this.customRenderViewportToCanvas = () => {
+        };
+        this.renderingEngineId = props.renderingEngineId;
+        this.element.setAttribute('data-viewport-uid', this.id);
+        this.element.setAttribute('data-rendering-engine-uid', this.renderingEngineId);
+        this.element.style.position = 'relative';
+        this.microscopyElement = document.createElement('div');
+        this.microscopyElement.id = uuidv4();
+        this.microscopyElement.innerText = 'Initial';
+        this.microscopyElement.style.background = 'grey';
+        this.microscopyElement.style.width = '100%';
+        this.microscopyElement.style.height = '100%';
+        this.microscopyElement.style.position = 'absolute';
+        this.microscopyElement.style.left = '0';
+        this.microscopyElement.style.top = '0';
+        const cs3dElement = this.element.firstElementChild;
+        cs3dElement.insertBefore(this.microscopyElement, cs3dElement.childNodes[1]);
+        this.addEventListeners();
+        this.resize();
+    }
+    static get useCustomRenderingPipeline() {
+        return true;
+    }
+    addEventListeners() {
+        this.canvas.addEventListener(EVENTS.ELEMENT_DISABLED, this.elementDisabledHandler);
+    }
+    removeEventListeners() {
+        this.canvas.removeEventListener(EVENTS.ELEMENT_DISABLED, this.elementDisabledHandler);
+    }
+    elementDisabledHandler() {
+        this.removeEventListeners();
+    }
+    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) {
+    }
+    setProperties(props) {
+    }
+    resetProperties() {
+        this.setProperties({});
+    }
+    getScalarData() {
+        return null;
+    }
+    getImageData() {
+        const { metadata } = this;
+        if (!metadata) {
+            return null;
+        }
+        const { spacing } = metadata;
+        return {
+            dimensions: metadata.dimensions,
+            spacing,
+            numberOfComponents: 3,
+            origin: metadata.origin,
+            direction: metadata.direction,
+            metadata: {
+                Modality: this.modality,
+                FrameOfReferenceUID: this.frameOfReferenceUID,
+            },
+            imageData: {
+                getDirection: () => metadata.direction,
+                getDimensions: () => metadata.dimensions,
+                getRange: () => [0, 255],
+                getScalarData: () => this.getScalarData(),
+                getSpacing: () => metadata.spacing,
+                worldToIndex: (point) => {
+                    const canvasPoint = this.worldToCanvas(point);
+                    const pixelCoord = this.canvasToIndex(canvasPoint);
+                    return [pixelCoord[0], pixelCoord[1], 0];
+                },
+                indexToWorld: (point) => {
+                    const canvasPoint = this.indexToCanvas([point[0], point[1]]);
+                    return this.canvasToWorld(canvasPoint);
+                },
+            },
+            hasPixelSpacing: this.hasPixelSpacing,
+            calibration: this.calibration,
+            preScale: {
+                scaled: false,
+            },
+            scalarData: this.getScalarData(),
+        };
+    }
+    hasImageURI(imageURI) {
+        return true;
+    }
+    setCamera(camera) {
+        const previousCamera = this.getCamera();
+        const { parallelScale, focalPoint } = camera;
+        const view = this.getView();
+        const { xSpacing } = this.internalCamera;
+        if (parallelScale) {
+            const worldToCanvasRatio = this.element.clientHeight / parallelScale;
+            const resolution = 1 / xSpacing / worldToCanvasRatio;
+            view.setResolution(resolution);
+        }
+        if (focalPoint) {
+            const newCanvas = this.worldToCanvas(focalPoint);
+            const newIndex = this.canvasToIndex(newCanvas);
+            view.setCenter(newIndex);
+        }
+        const updatedCamera = this.getCamera();
+        this.triggerCameraModifiedEventIfNecessary(previousCamera, updatedCamera);
+    }
+    getCurrentImageId() {
+        return this.imageIds[0];
+    }
+    getFrameNumber() {
+        return 1;
+    }
+    getCamera() {
+        this.refreshRenderValues();
+        const { resolution, xSpacing } = this.internalCamera;
+        const canvasToWorldRatio = resolution * xSpacing;
+        const canvasCenter = [
+            this.element.clientWidth / 2,
+            this.element.clientHeight / 2,
+        ];
+        const focalPoint = this.canvasToWorld(canvasCenter);
+        return {
+            parallelProjection: true,
+            focalPoint,
+            position: focalPoint,
+            viewUp: [0, -1, 0],
+            parallelScale: this.element.clientHeight * canvasToWorldRatio,
+            viewPlaneNormal: [0, 0, 1],
+        };
+    }
+    static { this.getDicomMicroscopyViewer = async () => {
+        return peerImport('dicom-microscopy-viewer');
+    }; }
+    setDataIds(imageIds) {
+        const webClient = metaData.get(MetadataModules.WADO_WEB_CLIENT, imageIds[0]);
+        if (!webClient) {
+            throw new Error(`To use setDataIds on WSI data, you must provide metaData.webClient for ${imageIds[0]}`);
+        }
+        return this.setWSI(imageIds, webClient);
+    }
+    async setWSI(imageIds, client) {
+        this.microscopyElement.style.background = 'black';
+        this.microscopyElement.innerText = 'Loading';
+        this.imageIds = imageIds;
+        const DicomMicroscopyViewer = await WSIViewport.getDicomMicroscopyViewer();
+        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);
+            }
+        });
+        this.metadataDicomweb = volumeImages;
+        const viewer = new DicomMicroscopyViewer.viewer.VolumeImageViewer({
+            client,
+            metadata: volumeImages,
+            controls: [],
+            bindings: {},
+        });
+        viewer.render({ container: this.microscopyElement });
+        this.metadata = this.getImageDataMetadata();
+        viewer.deactivateDragPanInteraction();
+        this.viewer = viewer;
+        this.map = viewer[_map];
+        this.map.on(EVENT_POSTRENDER, this.postrender);
+        this.resize();
+        this.microscopyElement.innerText = '';
+        Object.assign(this.microscopyElement.style, {
+            '--ol-partial-background-color': 'rgba(127, 127, 127, 0.7)',
+            '--ol-foreground-color': '#000000',
+            '--ol-subtle-foreground-color': '#000',
+            '--ol-subtle-background-color': 'rgba(78, 78, 78, 0.5)',
+            background: 'none',
+        });
+    }
+    scroll(delta) {
+        const camera = this.getCamera();
+        this.setCamera({
+            parallelScale: camera.parallelScale * (1 + 0.1 * delta),
+        });
+    }
+    getSliceIndex() {
+        return 0;
+    }
+    getView() {
+        if (!this.viewer) {
+            return;
+        }
+        const map = this.viewer[_map];
+        const anyWindow = window;
+        anyWindow.map = map;
+        anyWindow.viewer = this.viewer;
+        anyWindow.view = map?.getView();
+        anyWindow.wsi = this;
+        return map?.getView();
+    }
+    refreshRenderValues() {
+        const view = this.getView();
+        if (!view) {
+            return;
+        }
+        const resolution = view.getResolution();
+        if (!resolution || resolution < EPSILON) {
+            return;
+        }
+        const centerIndex = view.getCenter();
+        const extent = view.getProjection().getExtent();
+        const rotation = view.getRotation();
+        const zoom = view.getZoom();
+        const { metadata: { spacing: [xSpacing, ySpacing], }, } = this;
+        const worldToCanvasRatio = 1 / resolution / xSpacing;
+        Object.assign(this.internalCamera, {
+            extent,
+            centerIndex,
+            worldToCanvasRatio,
+            xSpacing,
+            ySpacing,
+            resolution,
+            rotation,
+            zoom,
+        });
+    }
+    getZoom() {
+        return this.getView()?.getZoom();
+    }
+    setZoom(zoom) {
+        this.getView()?.setZoom(zoom);
+    }
+    getTransform() {
+        this.refreshRenderValues();
+        const { centerIndex: center, resolution, rotation } = this.internalCamera;
+        const halfCanvas = [this.canvas.width / 2, this.canvas.height / 2];
+        const transform = new Transform();
+        transform.translate(halfCanvas[0], halfCanvas[1]);
+        transform.rotate(rotation);
+        transform.scale(1 / resolution, -1 / resolution);
+        transform.translate(-center[0], -center[1]);
+        return transform;
+    }
+    getReferenceId() {
+        return `imageId:${this.getCurrentImageId()}`;
+    }
+    getCurrentImageIdIndex() {
+        return 0;
+    }
+}
+export default WSIViewport;