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

package/dist/esm/RenderingEngine/StackViewport.js

@@ -41,7 +41,6 @@ class StackViewport extends Viewport {
         this.initialTransferFunctionNodes = null;
         this.stackInvalidated = false;
         this._publishCalibratedEvent = false;
-        this.useNativeDataType = false;
         this.updateRenderingPipeline = () => {
             this._configureRenderingPipeline();
         };
@@ -66,7 +65,7 @@ class StackViewport extends Viewport {
             if (preferSizeOverAccuracy) {
                 mapper.setPreferSizeOverAccuracy(true);
             }
-            if (imageData.getPointData().getNumberOfComponents() > 1) {
+            if (imageData.getPointData().getScalars().getNumberOfComponents() > 1) {
                 actor.getProperty().setIndependentComponents(false);
             }
             return actor;
@@ -115,9 +114,12 @@ class StackViewport extends Viewport {
         };
         this.setRotation = (rotation) => {
             const previousCamera = this.getCamera();
-            this.useCPURendering
-                ? this.setRotationCPU(rotation)
-                : this.setRotationGPU(rotation);
+            if (this.useCPURendering) {
+                this.setRotationCPU(rotation);
+            }
+            else {
+                this.setRotationGPU(rotation);
+            }
             if (this._suppressCameraModifiedEvents) {
                 return;
             }
@@ -159,11 +161,11 @@ class StackViewport extends Viewport {
             const iVector = direction.slice(0, 3);
             const jVector = direction.slice(3, 6);
             const diff = vec3.subtract(vec3.create(), worldPos, origin);
-            const worldPoint = [
+            const indexPoint = [
                 vec3.dot(diff, iVector) / spacing[0],
                 vec3.dot(diff, jVector) / spacing[1],
             ];
-            const canvasPoint = pixelToCanvas(this._cpuFallbackEnabledElement, worldPoint);
+            const canvasPoint = pixelToCanvas(this._cpuFallbackEnabledElement, indexPoint);
             return canvasPoint;
         };
         this.canvasToWorldGPU = (canvasPos) => {
@@ -365,9 +367,8 @@ class StackViewport extends Viewport {
         this.scaling = {};
         this.modality = null;
         this.useCPURendering = getShouldUseCPURendering();
-        this.useNativeDataType = this._shouldUseNativeDataType();
         this._configureRenderingPipeline();
-        this.useCPURendering
+        const result = this.useCPURendering
             ? this._resetCPUFallbackElement()
             : this._resetGPUViewport();
         this.imageIds = [];
@@ -385,7 +386,6 @@ class StackViewport extends Viewport {
         return getShouldUseCPURendering();
     }
     _configureRenderingPipeline(value) {
-        this.useNativeDataType = this._shouldUseNativeDataType();
         this.useCPURendering = value ?? getShouldUseCPURendering();
         for (const key in this.renderingPipelineFunctions) {
             if (Object.prototype.hasOwnProperty.call(this.renderingPipelineFunctions, key)) {
@@ -393,7 +393,7 @@ class StackViewport extends Viewport {
                 this[key] = this.useCPURendering ? functions.cpu : functions.gpu;
             }
         }
-        this.useCPURendering
+        const result = this.useCPURendering
             ? this._resetCPUFallbackElement()
             : this._resetGPUViewport();
     }
@@ -438,7 +438,9 @@ class StackViewport extends Viewport {
             spacing: vtkImageData.getSpacing(),
             origin: vtkImageData.getOrigin(),
             direction: vtkImageData.getDirection(),
-            scalarData: vtkImageData.getPointData().getScalars().getData(),
+            get scalarData() {
+                return this.csImage.voxelManager.getScalarData();
+            },
             imageData: actor.getMapper().getInputData(),
             metadata: {
                 Modality: this.modality,
@@ -450,6 +452,7 @@ class StackViewport extends Viewport {
             preScale: {
                 ...this.csImage.preScale,
             },
+            voxelManager: this.csImage.voxelManager,
         };
     }
     getImageDataCPU() {
@@ -489,6 +492,7 @@ class StackViewport extends Viewport {
             preScale: {
                 ...this.csImage.preScale,
             },
+            voxelManager: this.csImage.voxelManager,
         };
     }
     buildMetadata(image) {
@@ -981,7 +985,7 @@ class StackViewport extends Viewport {
     _getNumCompsFromPhotometricInterpretation(photometricInterpretation) {
         let numberOfComponents = 1;
         if (photometricInterpretation === 'RGB' ||
-            photometricInterpretation.indexOf('YBR') !== -1 ||
+            photometricInterpretation.includes('YBR') ||
             photometricInterpretation === 'PALETTE COLOR') {
             numberOfComponents = 3;
         }
@@ -1010,11 +1014,11 @@ class StackViewport extends Viewport {
         const yVoxels = image.rows;
         const zSpacing = EPSILON;
         const zVoxels = 1;
-        const numComps = image.numComps ||
+        const numberOfComponents = image.numberOfComponents ||
             this._getNumCompsFromPhotometricInterpretation(imagePixelModule.photometricInterpretation);
         return {
             bitsAllocated: imagePixelModule.bitsAllocated,
-            numComps,
+            numberOfComponents,
             origin,
             direction: [...rowCosineVec, ...colCosineVec, ...scanAxisNormal],
             dimensions: [xVoxels, yVoxels, zVoxels],
@@ -1037,7 +1041,7 @@ class StackViewport extends Viewport {
         let { rowCosines, columnCosines } = imagePlaneModule;
         rowCosines ||= [1, 0, 0];
         columnCosines ||= [0, 1, 0];
-        const viewPlaneNormal = (vec3.cross([0, 0, 0], columnCosines, rowCosines));
+        const viewPlaneNormal = vec3.cross([0, 0, 0], columnCosines, rowCosines);
         return {
             FrameOfReferenceUID,
             viewPlaneNormal,
@@ -1058,11 +1062,11 @@ class StackViewport extends Viewport {
             viewUp: [viewUp[0], viewUp[1], viewUp[2]],
         };
     }
-    createVTKImageData({ origin, direction, dimensions, spacing, numComps, pixelArray, }) {
+    createVTKImageData({ origin, direction, dimensions, spacing, numberOfComponents, pixelArray, }) {
         const values = new pixelArray.constructor(pixelArray.length);
         const scalarArray = vtkDataArray.newInstance({
             name: 'Pixels',
-            numberOfComponents: numComps,
+            numberOfComponents: numberOfComponents,
             values: values,
         });
         const imageData = vtkImageData.newInstance();
@@ -1073,15 +1077,20 @@ class StackViewport extends Viewport {
         imageData.getPointData().setScalars(scalarArray);
         return imageData;
     }
-    _createVTKImageData({ origin, direction, dimensions, spacing, numComps, pixelArray, }) {
-        this._imageData = this.createVTKImageData({
-            origin,
-            direction,
-            dimensions,
-            spacing,
-            numComps,
-            pixelArray,
-        });
+    _createVTKImageData({ origin, direction, dimensions, spacing, numberOfComponents, pixelArray, }) {
+        try {
+            this._imageData = this.createVTKImageData({
+                origin,
+                direction,
+                dimensions,
+                spacing,
+                numberOfComponents,
+                pixelArray,
+            });
+        }
+        catch (e) {
+            console.error(e);
+        }
     }
     async setStack(imageIds, currentImageIdIndex = 0) {
         this._throwIfDestroyed();
@@ -1142,8 +1151,7 @@ class StackViewport extends Viewport {
             yVoxels === image.rows &&
             isEqual(imagePlaneModule.rowCosines, rowCosines) &&
             isEqual(imagePlaneModule.columnCosines, columnCosines) &&
-            (!this.useNativeDataType ||
-                dataType === image.getPixelData().constructor.name));
+            dataType === image.voxelManager.getScalarData().constructor.name);
     }
     _updateVTKImageDataFromCornerstoneImage(image) {
         const imagePlaneModule = this._getImagePlaneModule(image.imageId);
@@ -1165,7 +1173,7 @@ class StackViewport extends Viewport {
                 if (this.currentImageIdIndex !== imageIdIndex) {
                     return;
                 }
-                const pixelData = image.getPixelData();
+                const pixelData = image.voxelManager.getScalarData();
                 const preScale = image.preScale;
                 const scalingParams = preScale?.scalingParameters;
                 const scaledWithNonIntegers = (preScale?.scaled && scalingParams?.rescaleIntercept % 1 !== 0) ||
@@ -1290,17 +1298,12 @@ class StackViewport extends Viewport {
     getLoaderImageOptions(imageId) {
         const imageIdIndex = this.imageIds.indexOf(imageId);
         const { transferSyntaxUID } = metaData.get('transferSyntax', imageId) || {};
-        const additionalDetails = { imageId, imageIdIndex };
         const options = {
-            targetBuffer: {
-                type: this.useNativeDataType ? undefined : 'Float32Array',
-            },
             useRGBA: false,
             transferSyntaxUID,
-            useNativeDataType: this.useNativeDataType,
             priority: 5,
             requestType: RequestType.Interaction,
-            additionalDetails,
+            additionalDetails: { imageId, imageIdIndex },
         };
         return options;
     }
@@ -1346,7 +1349,7 @@ class StackViewport extends Viewport {
         this._cpuFallbackEnabledElement.metadata = {
             ...metadata,
         };
-        this.cpuImagePixelData = image.getPixelData();
+        this.cpuImagePixelData = image.voxelManager.getScalarData();
         const viewportSettingToUse = Object.assign({}, viewport, this._cpuFallbackEnabledElement.viewport);
         this._cpuFallbackEnabledElement.viewport = this.stackInvalidated
             ? viewport
@@ -1355,19 +1358,22 @@ class StackViewport extends Viewport {
         this.cpuRenderingInvalidated = true;
         this._cpuFallbackEnabledElement.transform = calculateTransform(this._cpuFallbackEnabledElement);
     }
+    getSliceViewInfo() {
+        throw new Error('Method not implemented.');
+    }
     addImages(stackInputs) {
         const actors = this.getActors();
         stackInputs.forEach((stackInput) => {
             const { imageId } = stackInput;
             const image = cache.getImage(imageId);
-            const { origin, dimensions, direction, spacing, numComps } = this.getImageDataMetadata(image);
+            const { origin, dimensions, direction, spacing, numberOfComponents } = this.getImageDataMetadata(image);
             const imagedata = this.createVTKImageData({
                 origin,
                 dimensions,
                 direction,
                 spacing,
-                numComps,
-                pixelArray: image.getPixelData(),
+                numberOfComponents,
+                pixelArray: image.voxelManager.getScalarData(),
             });
             const imageActor = this.createActorMapper(imagedata);
             if (imageActor) {
@@ -1405,14 +1411,14 @@ class StackViewport extends Viewport {
             this.stackActorReInitialized = false;
             return;
         }
-        const { origin, direction, dimensions, spacing, numComps, imagePixelModule, } = this.getImageDataMetadata(image);
-        const pixelArray = image.getPixelData();
+        const { origin, direction, dimensions, spacing, numberOfComponents, imagePixelModule, } = this.getImageDataMetadata(image);
+        const pixelArray = image.voxelManager.getScalarData();
         this._createVTKImageData({
             origin,
             direction,
             dimensions,
             spacing,
-            numComps,
+            numberOfComponents,
             pixelArray,
         });
         this._updateVTKImageDataFromCornerstoneImage(image);
@@ -1464,7 +1470,7 @@ class StackViewport extends Viewport {
         if (this.modality !== 'PT' || !this.csImage.isPreScaled) {
             return false;
         }
-        if (!this.csImage.preScale?.scalingParameters?.suvbw) {
+        if (!this.csImage.preScale?.scalingParameters.suvbw) {
             return false;
         }
         return true;
@@ -1626,18 +1632,28 @@ class StackViewport extends Viewport {
         return this._getVOIRangeFromWindowLevel(windowWidth, windowCenter);
     }
     _getValidVOILUTFunction(voiLUTFunction) {
-        if (Object.values(VOILUTFunctionType).indexOf(voiLUTFunction) === -1) {
-            voiLUTFunction = VOILUTFunctionType.LINEAR;
+        if (!Object.values(VOILUTFunctionType).includes(voiLUTFunction)) {
+            return VOILUTFunctionType.LINEAR;
         }
         return voiLUTFunction;
     }
+    getSliceInfo() {
+        const sliceIndex = this.getSliceIndex();
+        const { dimensions } = this.getImageData();
+        return {
+            width: dimensions[0],
+            height: dimensions[1],
+            sliceIndex,
+            slicePlane: 2,
+        };
+    }
     isReferenceViewable(viewRef, options = {}) {
         if (!super.isReferenceViewable(viewRef, options)) {
             return false;
         }
         const { referencedImageId, sliceIndex } = viewRef;
         if (viewRef.volumeId && !referencedImageId) {
-            return options.asVolume === true;
+            return options.asVolume;
         }
         let testIndex = this.getCurrentImageIdIndex();
         const currentImageId = this.imageIds[testIndex];
@@ -1715,16 +1731,16 @@ class StackViewport extends Viewport {
         if (!viewRef) {
             return;
         }
-        const { referencedImageId, sliceIndex, volumeId } = viewRef;
+        const { referencedImageId, sliceIndex } = viewRef;
         if (typeof sliceIndex === 'number' &&
             referencedImageId &&
             referencedImageId === this.imageIds[sliceIndex]) {
-            this.setImageIdIndex(sliceIndex);
+            this.scroll(sliceIndex - this.targetImageIdIndex);
         }
         else {
             const foundIndex = this.imageIds.indexOf(referencedImageId);
             if (foundIndex !== -1) {
-                this.setImageIdIndex(foundIndex);
+                this.scroll(foundIndex - this.targetImageIdIndex);
             }
             else {
                 throw new Error('Unsupported - referenced image id not found');

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

@@ -1,5 +1,6 @@
+import type { mat4 } from 'gl-matrix';
 import { VideoEnums as VideoViewportEnum } from '../enums';
-import type { IVideoViewport, VideoViewportProperties, Point3, Point2, ICamera, VideoViewportInput, VOIRange, IImage, ViewReferenceSpecifier, ViewReference, ReferenceCompatibleOptions } from '../types';
+import type { IVideoViewport, VideoViewportProperties, Point3, Point2, ICamera, VideoViewportInput, VOIRange, IImage, ViewReferenceSpecifier, ViewReference, ReferenceCompatibleOptions, ImageSetOptions, IStackInput, CPUIImageData, IImageData } from '../types';
 import { Transform } from './helpers/cpuFallback/rendering/transform';
 import Viewport from './Viewport';
 import CanvasActor from './CanvasActor';
@@ -39,7 +40,7 @@ declare class VideoViewport extends Viewport implements IVideoViewport {
     private elementDisabledHandler;
     getImageDataMetadata(image: IImage | string): {
         bitsAllocated: number;
-        numComps: number;
+        numberOfComponents: number;
         origin: any;
         rows: any;
         columns: any;
@@ -50,16 +51,25 @@ declare class VideoViewport extends Viewport implements IVideoViewport {
         numVoxels: number;
         imagePlaneModule: any;
     };
+    setDataIds(imageIds: string[], options?: ImageSetOptions): void;
     setVideo(imageId: string, frameNumber?: number): Promise<unknown>;
     setVideoURL(videoURL: string): Promise<unknown>;
     getImageIds(): string[];
     togglePlayPause(): boolean;
     play(): Promise<void>;
-    pause(): Promise<void>;
+    pause(): void;
     scroll(delta?: number): Promise<void>;
     start(): Promise<void>;
     end(): Promise<void>;
     setTime(timeInSeconds: number): Promise<void>;
+    getSliceViewInfo(): {
+        width: number;
+        height: number;
+        sliceIndex: number;
+        slicePlane: number;
+        sliceToIndexMatrix: mat4;
+        indexToSliceMatrix: mat4;
+    };
     setFrameNumber(frame: number): Promise<void>;
     setFrameRange(frameRange: number[]): void;
     getFrameRange(): [number, number];
@@ -69,30 +79,9 @@ declare class VideoViewport extends Viewport implements IVideoViewport {
     getProperties: () => VideoViewportProperties;
     resetProperties(): void;
     protected getScalarData(): CanvasScalarData;
-    getImageData(): {
-        dimensions: any;
-        spacing: any;
-        origin: any;
-        direction: any;
-        metadata: {
-            Modality: any;
-        };
-        getScalarData: () => CanvasScalarData;
-        imageData: {
-            getDirection: () => any;
-            getDimensions: () => any;
-            getRange: () => number[];
-            getScalarData: () => CanvasScalarData;
-            getSpacing: () => any;
-            worldToIndex: (point: Point3) => number[];
-            indexToWorld: (point: Point2, destPoint?: Point3) => Point3;
-        };
-        hasPixelSpacing: boolean;
-        calibration: import("../types").IImageCalibration;
-        preScale: {
-            scaled: boolean;
-        };
-    };
+    getImageData(): IImageData | CPUIImageData;
+    getMiddleSliceData: () => never;
+    useCustomRenderingPipeline: boolean;
     hasImageURI(imageURI: string): boolean;
     setVOI(voiRange: VOIRange): void;
     setWindowLevel(windowWidth?: number, windowCenter?: number): void;
@@ -102,6 +91,7 @@ declare class VideoViewport extends Viewport implements IVideoViewport {
     getCurrentImageId(): string;
     getViewReferenceId(specifier?: ViewReferenceSpecifier): string;
     isReferenceViewable(viewRef: ViewReference, options?: ReferenceCompatibleOptions): boolean;
+    setViewReference(viewRef: ViewReference): void;
     getViewReference(viewRefSpecifier?: ViewReferenceSpecifier): ViewReference;
     getFrameNumber(): number;
     getCurrentImageIdIndex(): number;
@@ -109,6 +99,7 @@ declare class VideoViewport extends Viewport implements IVideoViewport {
     getCamera(): ICamera;
     resetCamera: () => boolean;
     getNumberOfSlices: () => number;
+    getFrameRate(): number;
     getFrameOfReferenceUID: () => string;
     resize: () => void;
     canvasToWorld: (canvasPos: Point2, destPos?: Point3) => Point3;
@@ -123,7 +114,7 @@ declare class VideoViewport extends Viewport implements IVideoViewport {
     customRenderViewportToCanvas: () => void;
     protected getTransform(): Transform;
     updateCameraClippingPlanesAndRange(): void;
-    addImages(stackInputs: Array<any>): void;
+    addImages(stackInputs: IStackInput[]): void;
     protected createActorMapper(image: any): CanvasActor;
     private renderFrame;
     private renderWhilstPlaying;

package/dist/esm/RenderingEngine/VideoViewport.js

@@ -23,7 +23,6 @@ class VideoViewport extends Viewport {
         this.playbackRate = 1;
         this.frameRange = [0, 0];
         this.fps = 30;
-        this.numberOfFrames = 0;
         this.videoCamera = {
             panWorld: [0, 0],
             parallelScale: 1,
@@ -41,16 +40,21 @@ class VideoViewport extends Viewport {
                 voiRange: { ...this.voiRange },
             };
         };
+        this.getMiddleSliceData = () => {
+            throw new Error('Method not implemented.');
+        };
+        this.useCustomRenderingPipeline = true;
         this.resetCamera = () => {
             this.refreshRenderValues();
             this.canvasContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
-            if (this.isPlaying === false) {
+            if (!this.isPlaying) {
                 this.renderFrame();
             }
             return true;
         };
         this.getNumberOfSlices = () => {
-            return Math.round((this.videoElement.duration * this.fps) / this.scrollSpeed);
+            const computedSlices = Math.round((this.videoElement.duration * this.fps) / this.scrollSpeed);
+            return isNaN(computedSlices) ? this.numberOfFrames : computedSlices;
         };
         this.getFrameOfReferenceUID = () => {
             return this.videoElement.src;
@@ -63,7 +67,7 @@ class VideoViewport extends Viewport {
                 canvas.height = clientHeight;
             }
             this.refreshRenderValues();
-            if (this.isPlaying === false) {
+            if (!this.isPlaying) {
                 this.renderFrame();
             }
         };
@@ -98,7 +102,9 @@ class VideoViewport extends Viewport {
         };
         this.indexToCanvas = (indexPos) => {
             const transform = this.getTransform();
-            return (transform.transformPoint(indexPos).map((it) => it / devicePixelRatio));
+            return transform
+                .transformPoint(indexPos)
+                .map((it) => it / devicePixelRatio);
         };
         this.customRenderViewportToCanvas = () => {
             this.renderFrame();
@@ -109,7 +115,7 @@ class VideoViewport extends Viewport {
             const ctx = this.canvasContext;
             ctx.resetTransform();
             ctx.transform(transformationMatrix[0], transformationMatrix[1], transformationMatrix[2], transformationMatrix[3], transformationMatrix[4], transformationMatrix[5]);
-            ctx.drawImage(this.videoElement, 0, 0, this.videoWidth, this.videoHeight);
+            ctx.drawImage(this.videoElement, 0, 0, this.videoWidth || 1024, this.videoHeight || 1024);
             for (const actor of this.getActors()) {
                 actor.actor.render(this, this.canvasContext);
             }
@@ -126,11 +132,13 @@ class VideoViewport extends Viewport {
                 element: this.element,
                 viewportId: this.id,
                 viewport: this,
+                imageIndex: this.getCurrentImageIdIndex(),
+                numberOfSlices: this.numberOfFrames,
                 renderingEngineId: this.renderingEngineId,
                 time: this.videoElement.currentTime,
                 duration: this.videoElement.duration,
             });
-            this.initialRender?.();
+            this.initialRender();
             const frame = this.getFrameNumber();
             if (this.isPlaying) {
                 if (frame < this.frameRange[0]) {
@@ -204,7 +212,7 @@ class VideoViewport extends Viewport {
         this.hasPixelSpacing = !!imagePlaneModule.columnPixelSpacing;
         return {
             bitsAllocated: 8,
-            numComps: 3,
+            numberOfComponents: 3,
             origin,
             rows,
             columns,
@@ -216,15 +224,23 @@ class VideoViewport extends Viewport {
             imagePlaneModule,
         };
     }
+    setDataIds(imageIds, options) {
+        this.setVideo(imageIds[0], (options.viewReference.sliceIndex || 0) + 1);
+    }
     setVideo(imageId, frameNumber) {
         this.imageId = Array.isArray(imageId) ? imageId[0] : imageId;
-        const { rendered } = metaData.get(MetadataModules.IMAGE_URL, 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(() => {
-            let { cineRate, numberOfFrames } = metaData.get(MetadataModules.CINE, imageId);
-            if (!numberOfFrames) {
+            if (!numberOfFrames || numberOfFrames === 1) {
                 numberOfFrames = Math.round(this.videoElement.duration * (cineRate || 30));
             }
             if (!cineRate) {
@@ -281,18 +297,18 @@ class VideoViewport extends Viewport {
     async play() {
         try {
             if (!this.isPlaying) {
-                await this.videoElement.play();
                 this.isPlaying = true;
+                await this.videoElement.play();
                 this.renderWhilstPlaying();
             }
         }
         catch (e) {
         }
     }
-    async pause() {
+    pause() {
         try {
-            await this.videoElement.pause();
             this.isPlaying = false;
+            this.videoElement.pause();
         }
         catch (e) {
         }
@@ -346,6 +362,9 @@ class VideoViewport extends Viewport {
             videoElement.addEventListener('seeked', seekEventListener);
         }
     }
+    getSliceViewInfo() {
+        throw new Error('Method not implemented.');
+    }
     async setFrameNumber(frame) {
         this.setTime((frame - 1) / this.fps);
     }
@@ -404,7 +423,7 @@ class VideoViewport extends Viewport {
         });
     }
     getScalarData() {
-        if (this.scalarData?.frameNumber === this.getFrameNumber()) {
+        if (this.scalarData.frameNumber === this.getFrameNumber()) {
             return this.scalarData;
         }
         const canvas = document.createElement('canvas');
@@ -427,8 +446,12 @@ class VideoViewport extends Viewport {
             spacing,
             origin: metadata.origin,
             direction: metadata.direction,
-            metadata: { Modality: this.modality },
+            metadata: {
+                Modality: this.modality,
+                FrameOfReferenceUID: metadata.FrameOfReferenceUID,
+            },
             getScalarData: () => this.getScalarData(),
+            scalarData: this.getScalarData(),
             imageData: {
                 getDirection: () => metadata.direction,
                 getDimensions: () => metadata.dimensions,
@@ -462,7 +485,7 @@ class VideoViewport extends Viewport {
         const testURI = framesMatch
             ? imageURI.substring(0, framesMatch.index)
             : imageURI;
-        return this.imageId.indexOf(testURI) !== -1;
+        return this.imageId.includes(testURI);
     }
     setVOI(voiRange) {
         this.voiRange = voiRange;
@@ -527,7 +550,7 @@ class VideoViewport extends Viewport {
         }
         this.canvasContext.fillStyle = 'rgba(0,0,0,1)';
         this.canvasContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
-        if (this.isPlaying === false) {
+        if (!this.isPlaying) {
             this.renderFrame();
         }
     }
@@ -573,15 +596,23 @@ class VideoViewport extends Viewport {
             return false;
         }
         const match = referencedImageId.match(VideoViewport.frameRangeExtractor);
-        if (!match || !match[2]) {
+        if (!match[2]) {
             return true;
         }
         const range = match[2].split('-').map((it) => Number(it));
         const frame = currentIndex + 1;
         return range[0] <= frame && frame <= (range[1] ?? range[0]);
     }
+    setViewReference(viewRef) {
+        if (typeof viewRef.sliceIndex === 'number') {
+            this.setFrameNumber(viewRef.sliceIndex + 1);
+        }
+        else if (Array.isArray(viewRef.sliceIndex)) {
+            this.setFrameRange(viewRef.sliceIndex);
+        }
+    }
     getViewReference(viewRefSpecifier) {
-        let sliceIndex = viewRefSpecifier?.sliceIndex;
+        let sliceIndex = viewRefSpecifier.sliceIndex;
         if (!sliceIndex) {
             sliceIndex = this.isPlaying
                 ? [this.frameRange[0] - 1, this.frameRange[1] - 1]
@@ -600,7 +631,7 @@ class VideoViewport extends Viewport {
         return Math.round(this.videoElement.currentTime * this.fps);
     }
     getSliceIndex() {
-        return this.getCurrentImageIdIndex();
+        return this.getCurrentImageIdIndex() / this.scrollSpeed;
     }
     getCamera() {
         const { parallelScale } = this.videoCamera;
@@ -618,6 +649,9 @@ class VideoViewport extends Viewport {
             viewPlaneNormal: [0, 0, 1],
         };
     }
+    getFrameRate() {
+        return this.fps;
+    }
     getPan() {
         const panWorld = this.videoCamera.panWorld;
         return [panWorld[0], panWorld[1]];
@@ -673,7 +707,10 @@ class VideoViewport extends Viewport {
             if (imageActor) {
                 actors.push({ uid: stackInput.actorUID, actor: imageActor });
                 if (stackInput.callback) {
-                    stackInput.callback({ imageActor, imageId: stackInput.imageId });
+                    stackInput.callback({
+                        imageActor: imageActor,
+                        imageId: stackInput.imageId,
+                    });
                 }
             }
         });