@cornerstonejs/core 4.22.13 → 5.0.0

package/dist/esm/RenderingEngine/VideoViewport.js

@@ -1,6 +1,4 @@
-import { vec3 } from 'gl-matrix';
-import { Events as EVENTS, VideoEnums as VideoViewportEnum, MetadataModules, } from '../enums';
-import * as metaData from '../metaData';
+import { Events as EVENTS, VideoEnums as VideoViewportEnum } from '../enums';
 import { Transform } from './helpers/cpuFallback/rendering/transform';
 import triggerEvent from '../utilities/triggerEvent';
 import Viewport from './Viewport';
@@ -10,8 +8,8 @@ import cache from '../cache/cache';
 import uuidv4 from '../utilities/uuidv4';
 import FrameRange from '../utilities/FrameRange';
 import { pointInShapeCallback } from '../utilities/pointInShapeCallback';
+import { getVideoImageDataMetadata, loadVideoStreamMetadata, normalizeVideoPlaybackInfo, } from '../utilities/VideoUtilities';
 class VideoViewport extends Viewport {
-    static { this.frameRangeExtractor = /(\/frames\/|[&?]frameNumber=)([^/&?]*)/i; }
     constructor(props) {
         super({
             ...props,
@@ -193,69 +191,34 @@ class VideoViewport extends Viewport {
     }
     getImageDataMetadata(image) {
         const imageId = typeof image === 'string' ? image : image.imageId;
-        const imagePlaneModule = metaData.get(MetadataModules.IMAGE_PLANE, imageId);
-        let rowCosines = imagePlaneModule.rowCosines;
-        let columnCosines = imagePlaneModule.columnCosines;
-        const usingDefaultValues = imagePlaneModule.usingDefaultValues;
-        if (usingDefaultValues || 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 { rows, columns } = imagePlaneModule;
-        const scanAxisNormal = vec3.create();
-        vec3.cross(scanAxisNormal, rowCosineVec, colCosineVec);
-        let origin = imagePlaneModule.imagePositionPatient;
-        if (origin == null) {
-            origin = [0, 0, 0];
-        }
-        const xSpacing = imagePlaneModule.columnPixelSpacing || 1;
-        const ySpacing = imagePlaneModule.rowPixelSpacing || 1;
-        const xVoxels = imagePlaneModule.columns;
-        const yVoxels = imagePlaneModule.rows;
-        const zSpacing = 1;
-        const zVoxels = 1;
-        this.hasPixelSpacing = !!imagePlaneModule.columnPixelSpacing;
-        return {
-            bitsAllocated: 8,
-            numberOfComponents: 3,
-            origin,
-            rows,
-            columns,
-            direction: [...rowCosineVec, ...colCosineVec, ...scanAxisNormal],
-            dimensions: [xVoxels, yVoxels, zVoxels],
-            spacing: [xSpacing, ySpacing, zSpacing],
-            hasPixelSpacing: this.hasPixelSpacing,
-            numVoxels: xVoxels * yVoxels * zVoxels,
-            imagePlaneModule,
-        };
+        const metadata = getVideoImageDataMetadata(imageId);
+        this.hasPixelSpacing = metadata.hasPixelSpacing;
+        return metadata;
     }
     setDataIds(imageIds, options) {
         this.setVideo(imageIds[0], (options.viewReference?.sliceIndex || 0) + 1);
     }
+    setDataList(entries) {
+        if (!entries.length) {
+            return;
+        }
+        return this.setVideo(entries[0].dataId);
+    }
     setVideo(imageId, frameNumber) {
         this.imageId = Array.isArray(imageId) ? imageId[0] : imageId;
-        const imageUrlModule = metaData.get(MetadataModules.IMAGE_URL, imageId);
-        if (!imageUrlModule?.rendered) {
-            throw new Error(`Video Image ID ${imageId} does not have a rendered video view`);
-        }
-        const { rendered } = imageUrlModule;
-        const generalSeries = metaData.get(MetadataModules.GENERAL_SERIES, imageId);
-        this.modality = generalSeries?.Modality;
-        this.metadata = this.getImageDataMetadata(imageId);
-        let { cineRate, numberOfFrames } = metaData.get(MetadataModules.CINE, imageId);
-        this.numberOfFrames = numberOfFrames;
-        return this.setVideoURL(rendered).then(() => {
-            if (!numberOfFrames || numberOfFrames === 1) {
-                numberOfFrames = Math.round(this.videoElement.duration * (cineRate || 30));
-            }
-            if (!cineRate) {
-                cineRate = Math.round(numberOfFrames / this.videoElement.duration);
-            }
-            this.fps = cineRate;
-            this.numberOfFrames = numberOfFrames;
-            this.setFrameRange([1, numberOfFrames]);
+        const stream = loadVideoStreamMetadata(imageId);
+        this.modality = stream.modality;
+        this.metadata = stream.metadata;
+        this.numberOfFrames = stream.numberOfFrames;
+        return this.setVideoURL(stream.renderedUrl).then(() => {
+            const playbackInfo = normalizeVideoPlaybackInfo({
+                durationSeconds: this.videoElement.duration,
+                cineRate: stream.cineRate,
+                numberOfFrames: stream.numberOfFrames,
+            });
+            this.fps = playbackInfo.fps;
+            this.numberOfFrames = playbackInfo.numberOfFrames;
+            this.setFrameRange(playbackInfo.frameRange);
             this.initialRender = () => {
                 this.initialRender = null;
                 this.pause();
@@ -309,7 +272,7 @@ class VideoViewport extends Viewport {
                 this.renderWhilstPlaying();
             }
         }
-        catch (e) {
+        catch (_error) {
         }
     }
     pause() {
@@ -317,7 +280,7 @@ class VideoViewport extends Viewport {
             this.isPlaying = false;
             this.videoElement.pause();
         }
-        catch (e) {
+        catch {
         }
     }
     async scroll(delta = 1) {
@@ -327,7 +290,7 @@ class VideoViewport extends Viewport {
         const currentTime = videoElement.currentTime;
         const newTime = currentTime + (delta * this.scrollSpeed) / this.fps;
         videoElement.currentTime = newTime;
-        const seekEventListener = (evt) => {
+        const seekEventListener = () => {
             renderFrame();
             videoElement.removeEventListener('seeked', seekEventListener);
         };
@@ -338,7 +301,7 @@ class VideoViewport extends Viewport {
         const renderFrame = this.renderFrame;
         videoElement.currentTime = 0;
         if (videoElement.paused) {
-            const seekEventListener = (evt) => {
+            const seekEventListener = () => {
                 renderFrame();
                 videoElement.removeEventListener('seeked', seekEventListener);
             };
@@ -350,7 +313,7 @@ class VideoViewport extends Viewport {
         const renderFrame = this.renderFrame;
         videoElement.currentTime = videoElement.duration;
         if (videoElement.paused) {
-            const seekEventListener = (evt) => {
+            const seekEventListener = () => {
                 renderFrame();
                 videoElement.removeEventListener('seeked', seekEventListener);
             };
@@ -362,7 +325,7 @@ class VideoViewport extends Viewport {
         const renderFrame = this.renderFrame;
         videoElement.currentTime = timeInSeconds;
         if (videoElement.paused) {
-            const seekEventListener = (evt) => {
+            const seekEventListener = () => {
                 renderFrame();
                 videoElement.removeEventListener('seeked', seekEventListener);
             };
@@ -579,7 +542,7 @@ class VideoViewport extends Viewport {
         return current;
     }
     getViewReferenceId(specifier = {}) {
-        const { sliceIndex: sliceIndex } = specifier;
+        const { sliceIndex } = specifier;
         if (sliceIndex === undefined) {
             return `videoId:${this.getCurrentImageId()}`;
         }
@@ -749,4 +712,5 @@ class VideoViewport extends Viewport {
         return new CanvasActor(this, image);
     }
 }
+VideoViewport.frameRangeExtractor = /(\/frames\/|[&?]frameNumber=)([^/&?]*)/i;
 export default VideoViewport;

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

@@ -4,7 +4,7 @@ import type { mat4 } from 'gl-matrix';
 import ViewportStatus from '../enums/ViewportStatus';
 import ViewportType from '../enums/ViewportType';
 import type { ICamera, ActorEntry, IRenderingEngine, ViewportInputOptions, Point2, Point3, FlipDirection, DisplayArea, ViewPresentation, ViewReference, ViewportProperties, ImageActor } from '../types';
-import type { ViewportInput, ViewReferenceSpecifier, ReferenceCompatibleOptions, ViewPresentationSelector, DataSetOptions, PlaneRestriction } from '../types/IViewport';
+import type { ViewportInput, ViewReferenceSpecifier, ReferenceCompatibleOptions, ViewPresentationSelector, DataSetOptions, PlaneRestriction, RenderingEngineResizeOptions } from '../types/IViewport';
 import type { vtkSlabCamera } from './vtkClasses/vtkSlabCamera';
 import type IImageCalibration from '../types/IImageCalibration';
 import { InterpolationType } from '../enums';
@@ -17,6 +17,7 @@ declare class Viewport {
     readonly canvas: HTMLCanvasElement;
     readonly renderingEngineId: string;
     readonly type: ViewportType;
+    requestedType?: ViewportType;
     protected insetImageMultiplier: number;
     protected flipHorizontal: boolean;
     protected flipVertical: boolean;
@@ -47,6 +48,8 @@ declare class Viewport {
     getNumberOfSlices: () => number;
     protected setRotation: (_rotation: number) => void;
     static get useCustomRenderingPipeline(): boolean;
+    getUseCustomRenderingPipeline(): boolean;
+    resizeForRenderingEngine({ keepCamera, }?: RenderingEngineResizeOptions): void;
     isOrientationChangeable(): boolean;
     private viewportWidgets;
     addWidget: (widgetId: any, widget: any) => void;
@@ -54,6 +57,8 @@ declare class Viewport {
     getWidgets: () => any[];
     getRenderPasses: () => any;
     removeWidgets: () => void;
+    dispose(): void;
+    destroy(): void;
     setRendered(): void;
     setNeedsRender(): void;
     protected setColorTransform(voiRange: any, averageWhite: any): any;
@@ -104,13 +109,13 @@ declare class Viewport {
     }): boolean;
     protected setInitialCamera(camera: ICamera): void;
     protected setFitToCanvasCamera(camera: ICamera): void;
-    getPan(initialCamera?: ICamera): Point2;
+    getPan(initialCamera?: ICamera<number>): Point2;
     getCurrentImageIdIndex(): number;
     getSliceIndex(): number;
     getImageData(): any;
     getViewReferenceId(_specifier?: ViewReferenceSpecifier): string;
     setPan(pan: Point2, storeAsInitialCamera?: boolean): void;
-    getZoom(compareCamera?: ICamera): number;
+    getZoom(compareCamera?: ICamera<number>): number;
     setZoom(value: number, storeAsInitialCamera?: boolean): void;
     getAspectRatio(): Point2;
     setAspectRatio(value: Point2, isFitViewportAfterStretch?: boolean, storeAsInitialCamera?: boolean): void;
@@ -131,7 +136,7 @@ declare class Viewport {
     isPlaneViewable(planeRestriction: PlaneRestriction, options?: ReferenceCompatibleOptions): boolean;
     isReferenceViewable(viewRef: ViewReference, options?: ReferenceCompatibleOptions): boolean;
     getViewPresentation(viewPresSel?: ViewPresentationSelector): ViewPresentation;
-    setViewReference(viewRef: ViewReference): void;
+    setViewReference(_viewRef: ViewReference): void;
     setViewPresentation(viewPres: ViewPresentation): void;
     _getCorners(bounds: number[]): number[][];
     _getFocalPointForResetCamera(centeredFocalPoint: Point3, previousCamera: ICamera, { resetPan, resetToCenter }: {
@@ -141,6 +146,10 @@ declare class Viewport {
     _isInBounds(point: Point3, bounds: number[]): boolean;
     _getEdges(bounds: number[]): [number[], number[]][];
     static boundsRadius(bounds: number[]): number;
-    setDataIds(_imageIds: string[], _options?: DataSetOptions): void;
+    setDataList(_entries: Array<{
+        dataId: string;
+        options?: DataSetOptions;
+    }>): void;
 }
+export declare function getVolumeCenterIJK(dimensions: number[], direction: ArrayLike<number>, viewPlaneNormal: ArrayLike<number>): number[];
 export default Viewport;

package/dist/esm/RenderingEngine/Viewport.js

@@ -18,17 +18,6 @@ import { updatePlaneRestriction } from '../utilities/updatePlaneRestriction';
 import { getCubeSizeInView } from '../utilities/getPlaneCubeIntersectionDimensions';
 import { getConfiguration } from '../init';
 class Viewport {
-    static { this.CameraViewPresentation = {
-        rotation: true,
-        pan: true,
-        zoom: true,
-        aspectRatio: true,
-        displayArea: true,
-    }; }
-    static { this.TransferViewPresentation = {
-        windowLevel: true,
-        paletteLut: true,
-    }; }
     constructor(props) {
         this.insetImageMultiplier = getConfiguration().rendering
             ?.useLegacyCameraFOV
@@ -92,9 +81,27 @@ class Viewport {
     static get useCustomRenderingPipeline() {
         return false;
     }
+    getUseCustomRenderingPipeline() {
+        return this.constructor.useCustomRenderingPipeline;
+    }
+    resizeForRenderingEngine({ keepCamera = true, } = {}) {
+        if (typeof this.resize === 'function') {
+            this.resize();
+        }
+        const previousCamera = keepCamera ? this.getCamera() : undefined;
+        this.resetCamera();
+        if (previousCamera) {
+            this.setCamera(previousCamera);
+        }
+    }
     isOrientationChangeable() {
         return false;
     }
+    dispose() {
+    }
+    destroy() {
+        this.dispose();
+    }
     setRendered() {
         if (this.viewportStatus === ViewportStatus.NO_DATA ||
             this.viewportStatus === ViewportStatus.LOADING) {
@@ -144,7 +151,7 @@ class Viewport {
         renderingEngine.renderViewport(this.id);
     }
     setOptions(options, immediate = false) {
-        this.options = structuredClone(options);
+        this.options = deepClone(options);
         if (this.options?.displayArea) {
             this.setDisplayArea(this.options?.displayArea);
         }
@@ -153,7 +160,7 @@ class Viewport {
         }
     }
     reset(immediate = false) {
-        this.options = structuredClone(this.defaultOptions);
+        this.options = deepClone(this.defaultOptions);
         if (immediate) {
             this.render();
         }
@@ -173,7 +180,7 @@ class Viewport {
         const viewPlaneNormalToSet = vec3.negate(vec3.create(), viewPlaneNormal);
         const distance = vec3.distance(position, focalPoint);
         const dimensions = imageData.getDimensions();
-        const middleIJK = dimensions.map((d) => Math.floor(d / 2));
+        const middleIJK = getVolumeCenterIJK(dimensions, imageData.getDirection(), viewPlaneNormal);
         const idx = [middleIJK[0], middleIJK[1], middleIJK[2]];
         const centeredFocalPoint = imageData.indexToWorld(idx, vec3.create());
         const resetFocalPoint = this._getFocalPointForResetCamera(centeredFocalPoint, camera, { resetPan: true, resetToCenter: false });
@@ -530,18 +537,13 @@ class Viewport {
         focalPoint[2] = (bounds[4] + bounds[5]) / 2.0;
         if (imageData) {
             const dimensions = imageData.getDimensions();
-            const middleIJK = dimensions.map((d) => Math.floor(d / 2));
+            const middleIJK = getVolumeCenterIJK(dimensions, imageData.getDirection(), viewPlaneNormal);
             const idx = [middleIJK[0], middleIJK[1], middleIJK[2]];
             imageData.indexToWorld(idx, focalPoint);
         }
-        let { widthWorld, heightWorld } = imageData
+        const { widthWorld, heightWorld } = imageData
             ? getCubeSizeInView(imageData, viewPlaneNormal, viewUp)
             : this._getWorldDistanceViewUpAndViewRight(bounds, viewUp, viewPlaneNormal);
-        if (imageData) {
-            const spacing = imageData.getSpacing();
-            widthWorld = Math.max(spacing[0], widthWorld - spacing[0]);
-            heightWorld = Math.max(spacing[1], heightWorld - spacing[1]);
-        }
         const canvasSize = [this.sWidth, this.sHeight];
         const boundsAspectRatio = widthWorld / heightWorld;
         const canvasAspectRatio = canvasSize[0] / canvasSize[1];
@@ -1089,7 +1091,7 @@ class Viewport {
         }
         return target;
     }
-    setViewReference(viewRef) {
+    setViewReference(_viewRef) {
     }
     setViewPresentation(viewPres) {
         if (!viewPres) {
@@ -1184,8 +1186,42 @@ class Viewport {
         const radius = Math.sqrt(w1 + w2 + w3 || 1) * 0.5;
         return radius;
     }
-    setDataIds(_imageIds, _options) {
-        throw new Error('Unsupported operatoin setDataIds');
+    setDataList(_entries) {
+        throw new Error('Unsupported operation setDataList');
     }
 }
+Viewport.CameraViewPresentation = {
+    rotation: true,
+    pan: true,
+    zoom: true,
+    aspectRatio: true,
+    displayArea: true,
+};
+Viewport.TransferViewPresentation = {
+    windowLevel: true,
+    paletteLut: true,
+};
+export function getVolumeCenterIJK(dimensions, direction, viewPlaneNormal) {
+    const ijkAxes = [
+        [direction[0], direction[1], direction[2]],
+        [direction[3], direction[4], direction[5]],
+        [direction[6], direction[7], direction[8]],
+    ];
+    const normal = [
+        viewPlaneNormal[0],
+        viewPlaneNormal[1],
+        viewPlaneNormal[2],
+    ];
+    let sliceAxis = 0;
+    let maxDot = -1;
+    for (let i = 0; i < 3; i++) {
+        const dot = Math.abs(vec3.dot(ijkAxes[i], normal));
+        if (dot > maxDot) {
+            maxDot = dot;
+            sliceAxis = i;
+        }
+    }
+    const isAxisAligned = Math.abs(maxDot - 1) < 1e-3;
+    return dimensions.map((d, i) => i === sliceAxis && isAxisAligned ? Math.floor(d / 2) : (d - 1) / 2);
+}
 export default Viewport;

package/dist/esm/RenderingEngine/VolumeViewport.js

@@ -5,9 +5,6 @@ import { EPSILON, MPR_CAMERA_VALUES, RENDERING_DEFAULTS } from '../constants';
 import { OrientationAxis, Events } from '../enums';
 import { actorIsA } 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';
@@ -16,6 +13,7 @@ import { transformCanvasToIJK } from '../utilities/transformCanvasToIJK';
 import { transformIJKToCanvas } from '../utilities/transformIJKToCanvas';
 import getVolumeViewportScrollInfo from '../utilities/getVolumeViewportScrollInfo';
 import { calculateCameraPosition, getCameraVectors, } from './helpers/getCameraVectors';
+import { getPlanarVolumeSliceNavigationState, getPlanarVolumeSlicePoint, } from './helpers/planarVolumeRendering';
 class VolumeViewport extends BaseVolumeViewport {
     constructor(props) {
         super(props);
@@ -66,14 +64,29 @@ class VolumeViewport extends BaseVolumeViewport {
             const imageVolume = cache.getVolume(volumeId);
             const camera = this.getCamera();
             const { focalPoint, position, viewPlaneNormal } = camera;
-            const spacingInNormalDirection = getSpacingInNormalDirection(imageVolume, viewPlaneNormal);
-            const sliceRange = getSliceRange(actorEntry.actor, viewPlaneNormal, focalPoint);
+            const { currentSliceIndex, sliceRange, spacingInNormalDirection } = getPlanarVolumeSliceNavigationState({
+                actor: actorEntry.actor,
+                camera: {
+                    focalPoint,
+                    position,
+                    viewPlaneNormal,
+                },
+                imageVolume,
+            });
             const numSlicesBackward = Math.round((sliceRange.current - sliceRange.min) / spacingInNormalDirection);
             const numSlicesForward = Math.round((sliceRange.max - sliceRange.current) / spacingInNormalDirection);
-            const currentSliceIndex = this.getSliceIndex();
             const focalPoints = [];
             for (let i = -numSlicesBackward; i <= numSlicesForward; i++) {
-                const { newFocalPoint: point } = snapFocalPointToSlice(focalPoint, position, sliceRange, viewPlaneNormal, spacingInNormalDirection, i);
+                const { newFocalPoint: point } = getPlanarVolumeSlicePoint({
+                    camera: {
+                        focalPoint,
+                        position,
+                        viewPlaneNormal,
+                    },
+                    delta: i,
+                    sliceRange,
+                    spacingInNormalDirection,
+                });
                 focalPoints.push({ sliceIndex: currentSliceIndex + i, point });
             }
             return focalPoints;

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

@@ -3,16 +3,16 @@ import type { WSIViewportProperties, Point3, Point2, ICamera, VOIRange, CPUIImag
 import { Transform } from './helpers/cpuFallback/rendering/transform';
 import Viewport from './Viewport';
 import type { DataSetOptions } from '../types/IViewport';
+import { type WSIClientLike, type WSIImageDataMetadata, type WSIMapLike, type WSIMapViewLike } from '../utilities/WSIUtilities';
 declare class WSIViewport extends Viewport {
     modality: any;
     protected imageIds: string[];
     readonly uid: any;
     readonly renderingEngineId: string;
     private frameOfReferenceUID;
-    protected metadata: any;
-    protected metadataDicomweb: any;
+    protected metadata: WSIImageDataMetadata;
     private microscopyElement;
-    protected map: any;
+    protected map: WSIMapLike;
     private imageURISet;
     private internalCamera;
     private viewer;
@@ -25,8 +25,7 @@ declare class WSIViewport extends Viewport {
     private addEventListeners;
     private removeEventListeners;
     private elementDisabledHandler;
-    private getImageDataMetadata;
-    setFrameNumber(frame: number): Promise<void>;
+    setFrameNumber(_frame: number): Promise<void>;
     setProperties(props: WSIViewportProperties): void;
     getProperties: () => WSIViewportProperties;
     resetProperties(): void;
@@ -45,7 +44,6 @@ declare class WSIViewport extends Viewport {
     getCamera(): ICamera;
     resetCamera: () => boolean;
     getNumberOfSlices: () => number;
-    static getDicomMicroscopyViewer: () => Promise<any>;
     getFrameOfReferenceUID: () => string;
     resize: () => void;
     worldToIndexWSI(point: Point3): Point2;
@@ -54,27 +52,29 @@ declare class WSIViewport extends Viewport {
     indexToWorld(point: Point3): Point3;
     canvasToWorld: (canvasPos: Point2) => Point3;
     worldToCanvas: (worldPos: Point3) => Point2;
+    setDataList(entries: Array<{
+        dataId: string;
+        options?: Record<string, unknown>;
+    }>): Promise<void>;
     setDataIds(imageIds: string[], options?: DataSetOptions & {
         miniNavigationOverlay?: boolean;
-        webClient: unknown;
+        webClient: WSIClientLike;
     }): Promise<void>;
-    setWSI(imageIds: string[], client: any): Promise<void>;
+    setWSI(imageIds: string[], client: WSIClientLike): Promise<void>;
     postrender: () => void;
     scroll(delta: number): void;
     getRotation: () => number;
     protected canvasToIndex: (canvasPos: Point2) => Point3;
     protected indexToCanvas: (indexPos: Point3) => Point2;
     getSliceIndex(): number;
-    getView(): any;
+    getView(): WSIMapViewLike | undefined;
     private refreshRenderValues;
     customRenderViewportToCanvas: () => void;
-    getZoom(): any;
+    getZoom(): number;
     setZoom(zoom: number): void;
     getImageIds: () => Array<string>;
     protected getTransform(): Transform;
     getViewReferenceId(): string;
     getCurrentImageIdIndex(): number;
-    private static overlayCssId;
-    static addMiniNavigationOverlayCss(): void;
 }
 export default WSIViewport;