@cornerstonejs/tools 3.0.2 → 3.0.3

package/dist/esm/utilities/BucketQueue.js

@@ -0,0 +1,78 @@
+export class BucketQueue {
+    constructor({ numBits, getPriority, areEqual, }) {
+        this._bucketCount = 1 << numBits;
+        this._mask = this._bucketCount - 1;
+        this._size = 0;
+        this._currentBucketIndex = 0;
+        this._buckets = this._buildArray(this._bucketCount);
+        this._getPriority =
+            typeof getPriority !== 'undefined'
+                ? getPriority
+                : (item) => item;
+        this._areEqual =
+            typeof areEqual === 'function'
+                ? areEqual
+                : (itemA, itemB) => itemA === itemB;
+    }
+    push(item) {
+        const bucketIndex = this._getBucketIndex(item);
+        const oldHead = this._buckets[bucketIndex];
+        const newHead = {
+            value: item,
+            next: oldHead,
+        };
+        this._buckets[bucketIndex] = newHead;
+        this._size++;
+    }
+    pop() {
+        if (this._size === 0) {
+            throw new Error('Cannot pop because the queue is empty.');
+        }
+        while (this._buckets[this._currentBucketIndex] === null) {
+            this._currentBucketIndex =
+                (this._currentBucketIndex + 1) % this._bucketCount;
+        }
+        const ret = this._buckets[this._currentBucketIndex];
+        this._buckets[this._currentBucketIndex] = ret.next;
+        this._size--;
+        return ret.value;
+    }
+    remove(item) {
+        if (!item) {
+            return false;
+        }
+        const bucketIndex = this._getBucketIndex(item);
+        const firstBucketNode = this._buckets[bucketIndex];
+        let node = firstBucketNode;
+        let prevNode;
+        while (node !== null) {
+            if (this._areEqual(item, node.value)) {
+                break;
+            }
+            prevNode = node;
+            node = node.next;
+        }
+        if (node === null) {
+            return false;
+        }
+        if (node === firstBucketNode) {
+            this._buckets[bucketIndex] = node.next;
+        }
+        else {
+            prevNode.next = node.next;
+        }
+        this._size--;
+        return true;
+    }
+    isEmpty() {
+        return this._size === 0;
+    }
+    _getBucketIndex(item) {
+        return this._getPriority(item) & this._mask;
+    }
+    _buildArray(size) {
+        const buckets = new Array(size);
+        buckets.fill(null);
+        return buckets;
+    }
+}

package/dist/esm/utilities/annotationHydration.d.ts

@@ -0,0 +1,9 @@
+import type { Types } from '@cornerstonejs/core';
+import { StackViewport } from '@cornerstonejs/core';
+import type { Annotation } from '../types';
+declare function annotationHydration(viewport: Types.IViewport, toolName: string, worldPoints: Types.Point3[], options?: {
+    FrameOfReferenceUID?: string;
+    annotationUID?: string;
+}): Annotation;
+declare function getClosestImageIdForStackViewport(viewport: StackViewport, worldPos: Types.Point3, viewPlaneNormal: Types.Point3): string;
+export { annotationHydration, getClosestImageIdForStackViewport };

package/dist/esm/utilities/annotationHydration.js

@@ -0,0 +1,82 @@
+import { utilities, BaseVolumeViewport, StackViewport, cache, metaData, } from '@cornerstonejs/core';
+import { addAnnotation } from '../stateManagement/annotation/annotationState';
+import { vec3 } from 'gl-matrix';
+function annotationHydration(viewport, toolName, worldPoints, options) {
+    const viewReference = viewport.getViewReference();
+    const { viewPlaneNormal, FrameOfReferenceUID } = viewReference;
+    const annotation = {
+        annotationUID: options?.annotationUID || utilities.uuidv4(),
+        data: {
+            handles: {
+                points: worldPoints,
+            },
+        },
+        highlighted: false,
+        autoGenerated: false,
+        invalidated: false,
+        isLocked: false,
+        isVisible: true,
+        metadata: {
+            toolName,
+            viewPlaneNormal,
+            FrameOfReferenceUID,
+            referencedImageId: getReferencedImageId(viewport, worldPoints[0], viewPlaneNormal),
+            ...options,
+        },
+    };
+    addAnnotation(annotation, viewport.element);
+    return annotation;
+}
+function getReferencedImageId(viewport, worldPos, viewPlaneNormal) {
+    let referencedImageId;
+    if (viewport instanceof StackViewport) {
+        referencedImageId = getClosestImageIdForStackViewport(viewport, worldPos, viewPlaneNormal);
+    }
+    else if (viewport instanceof BaseVolumeViewport) {
+        const targetId = getTargetId(viewport);
+        const volumeId = utilities.getVolumeId(targetId);
+        const imageVolume = cache.getVolume(volumeId);
+        referencedImageId = utilities.getClosestImageId(imageVolume, worldPos, viewPlaneNormal);
+    }
+    else {
+        throw new Error('getReferencedImageId: viewport must be a StackViewport or BaseVolumeViewport');
+    }
+    return referencedImageId;
+}
+function getTargetId(viewport) {
+    const targetId = viewport.getViewReferenceId?.();
+    if (targetId) {
+        return targetId;
+    }
+    if (viewport instanceof BaseVolumeViewport) {
+        return `volumeId:${getTargetVolumeId(viewport)}`;
+    }
+    throw new Error('getTargetId: viewport must have a getTargetId method');
+}
+function getTargetVolumeId(viewport) {
+    const actorEntries = viewport.getActors();
+    if (!actorEntries) {
+        return;
+    }
+    return actorEntries.find((actorEntry) => actorEntry.actor.getClassName() === 'vtkVolume')?.uid;
+}
+function getClosestImageIdForStackViewport(viewport, worldPos, viewPlaneNormal) {
+    const imageIds = viewport.getImageIds();
+    if (!imageIds || !imageIds.length) {
+        return;
+    }
+    const distanceImagePairs = imageIds.map((imageId) => {
+        const { imagePositionPatient } = metaData.get('imagePlaneModule', imageId);
+        const distance = calculateDistanceToImage(worldPos, imagePositionPatient, viewPlaneNormal);
+        return { imageId, distance };
+    });
+    distanceImagePairs.sort((a, b) => a.distance - b.distance);
+    return distanceImagePairs[0].imageId;
+}
+function calculateDistanceToImage(worldPos, ImagePositionPatient, viewPlaneNormal) {
+    const dir = vec3.create();
+    vec3.sub(dir, worldPos, ImagePositionPatient);
+    const dot = vec3.dot(dir, viewPlaneNormal);
+    return Math.abs(dot);
+}
+export { annotationHydration, getClosestImageIdForStackViewport };

package/dist/esm/utilities/boundingBox/extend2DBoundingBoxInViewAxis.d.ts

@@ -0,0 +1,3 @@
+import type { Types } from '@cornerstonejs/core';
+declare function extend2DBoundingBoxInViewAxis(boundsIJK: [Types.Point2, Types.Point2, Types.Point2], numSlicesToProject: number): [Types.Point2, Types.Point2, Types.Point2];
+export default extend2DBoundingBoxInViewAxis;

package/dist/esm/utilities/boundingBox/extend2DBoundingBoxInViewAxis.js

@@ -0,0 +1,10 @@
+function extend2DBoundingBoxInViewAxis(boundsIJK, numSlicesToProject) {
+    const sliceNormalIndex = boundsIJK.findIndex(([min, max]) => min === max);
+    if (sliceNormalIndex === -1) {
+        throw new Error('3D bounding boxes not supported in an oblique plane');
+    }
+    boundsIJK[sliceNormalIndex][0] -= numSlicesToProject;
+    boundsIJK[sliceNormalIndex][1] += numSlicesToProject;
+    return boundsIJK;
+}
+export default extend2DBoundingBoxInViewAxis;

package/dist/esm/utilities/boundingBox/getBoundingBoxAroundShape.d.ts

@@ -0,0 +1,5 @@
+import type { Types } from '@cornerstonejs/core';
+type BoundingBox = [Types.Point2, Types.Point2, null] | [Types.Point2, Types.Point2, Types.Point2];
+export declare function getBoundingBoxAroundShapeIJK(points: Types.Point2[] | Types.Point3[], dimensions?: Types.Point2 | Types.Point3): BoundingBox;
+export declare function getBoundingBoxAroundShapeWorld(points: Types.Point2[] | Types.Point3[], clipBounds?: Types.Point2 | Types.Point3): BoundingBox;
+export {};

package/dist/esm/utilities/boundingBox/getBoundingBoxAroundShape.js

@@ -0,0 +1,55 @@
+import { CONSTANTS } from '@cornerstonejs/core';
+const { EPSILON } = CONSTANTS;
+function calculateBoundingBox(points, dimensions, isWorld = false) {
+    let xMin = Infinity;
+    let xMax = isWorld ? -Infinity : 0;
+    let yMin = Infinity;
+    let yMax = isWorld ? -Infinity : 0;
+    let zMin = Infinity;
+    let zMax = isWorld ? -Infinity : 0;
+    const is3D = points[0]?.length === 3;
+    for (let i = 0; i < points.length; i++) {
+        const p = points[i];
+        xMin = Math.min(p[0], xMin);
+        xMax = Math.max(p[0], xMax);
+        yMin = Math.min(p[1], yMin);
+        yMax = Math.max(p[1], yMax);
+        if (is3D) {
+            zMin = Math.min(p[2] ?? zMin, zMin);
+            zMax = Math.max(p[2] ?? zMax, zMax);
+        }
+    }
+    if (dimensions) {
+        xMin = Math.max(isWorld ? dimensions[0] + EPSILON : 0, xMin);
+        xMax = Math.min(isWorld ? dimensions[0] - EPSILON : dimensions[0] - 1, xMax);
+        yMin = Math.max(isWorld ? dimensions[1] + EPSILON : 0, yMin);
+        yMax = Math.min(isWorld ? dimensions[1] - EPSILON : dimensions[1] - 1, yMax);
+        if (is3D && dimensions.length === 3) {
+            zMin = Math.max(isWorld ? dimensions[2] + EPSILON : 0, zMin);
+            zMax = Math.min(isWorld ? dimensions[2] - EPSILON : dimensions[2] - 1, zMax);
+        }
+    }
+    else if (!isWorld) {
+        xMin = Math.max(0, xMin);
+        xMax = Math.min(Infinity, xMax);
+        yMin = Math.max(0, yMin);
+        yMax = Math.min(Infinity, yMax);
+        if (is3D) {
+            zMin = Math.max(0, zMin);
+            zMax = Math.min(Infinity, zMax);
+        }
+    }
+    return is3D
+        ? [
+            [xMin, xMax],
+            [yMin, yMax],
+            [zMin, zMax],
+        ]
+        : [[xMin, xMax], [yMin, yMax], null];
+}
+export function getBoundingBoxAroundShapeIJK(points, dimensions) {
+    return calculateBoundingBox(points, dimensions, false);
+}
+export function getBoundingBoxAroundShapeWorld(points, clipBounds) {
+    return calculateBoundingBox(points, clipBounds, true);
+}

package/dist/esm/utilities/boundingBox/index.d.ts

@@ -0,0 +1,3 @@
+import extend2DBoundingBoxInViewAxis from './extend2DBoundingBoxInViewAxis';
+import { getBoundingBoxAroundShapeIJK, getBoundingBoxAroundShapeWorld } from './getBoundingBoxAroundShape';
+export { extend2DBoundingBoxInViewAxis, getBoundingBoxAroundShapeIJK, getBoundingBoxAroundShapeWorld, getBoundingBoxAroundShapeIJK as getBoundingBoxAroundShape, };

package/dist/esm/utilities/boundingBox/index.js

@@ -0,0 +1,3 @@
+import extend2DBoundingBoxInViewAxis from './extend2DBoundingBoxInViewAxis';
+import { getBoundingBoxAroundShapeIJK, getBoundingBoxAroundShapeWorld, } from './getBoundingBoxAroundShape';
+export { extend2DBoundingBoxInViewAxis, getBoundingBoxAroundShapeIJK, getBoundingBoxAroundShapeWorld, getBoundingBoxAroundShapeIJK as getBoundingBoxAroundShape, };

package/dist/esm/utilities/calibrateImageSpacing.d.ts

@@ -0,0 +1,2 @@
+import type { Types } from '@cornerstonejs/core';
+export default function calibrateImageSpacing(imageId: string, renderingEngine: Types.IRenderingEngine, calibrationOrScale: Types.IImageCalibration | number): void;

package/dist/esm/utilities/calibrateImageSpacing.js

@@ -0,0 +1,18 @@
+import { utilities, Enums } from '@cornerstonejs/core';
+const { calibratedPixelSpacingMetadataProvider } = utilities;
+export default function calibrateImageSpacing(imageId, renderingEngine, calibrationOrScale) {
+    if (typeof calibrationOrScale === 'number') {
+        calibrationOrScale = {
+            type: Enums.CalibrationTypes.USER,
+            scale: calibrationOrScale,
+        };
+    }
+    calibratedPixelSpacingMetadataProvider.add(imageId, calibrationOrScale);
+    const viewports = renderingEngine.getStackViewports();
+    viewports.forEach((viewport) => {
+        const imageIds = viewport.getImageIds();
+        if (imageIds.includes(imageId)) {
+            viewport.calibrateSpacing(imageId);
+        }
+    });
+}

package/dist/esm/utilities/cine/events.d.ts

@@ -0,0 +1,5 @@
+declare enum Events {
+    CLIP_STOPPED = "CORNERSTONE_CINE_TOOL_STOPPED",
+    CLIP_STARTED = "CORNERSTONE_CINE_TOOL_STARTED"
+}
+export default Events;

package/dist/esm/utilities/cine/events.js

@@ -0,0 +1,6 @@
+var Events;
+(function (Events) {
+    Events["CLIP_STOPPED"] = "CORNERSTONE_CINE_TOOL_STOPPED";
+    Events["CLIP_STARTED"] = "CORNERSTONE_CINE_TOOL_STARTED";
+})(Events || (Events = {}));
+export default Events;

package/dist/esm/utilities/cine/index.d.ts

@@ -0,0 +1,4 @@
+import { playClip, stopClip } from './playClip';
+import Events from './events';
+import { getToolState, addToolState } from './state';
+export { playClip, stopClip, Events, getToolState, addToolState };

package/dist/esm/utilities/cine/index.js

@@ -0,0 +1,4 @@
+import { playClip, stopClip } from './playClip';
+import Events from './events';
+import { getToolState, addToolState } from './state';
+export { playClip, stopClip, Events, getToolState, addToolState };

package/dist/esm/utilities/cine/playClip.d.ts

@@ -0,0 +1,8 @@
+import type { CINETypes } from '../../types';
+type StopClipOptions = {
+    stopDynamicCine: boolean;
+    viewportId?: string;
+};
+declare function playClip(element: HTMLDivElement, playClipOptions: CINETypes.PlayClipOptions): void;
+declare function stopClip(element: HTMLDivElement, options?: StopClipOptions): void;
+export { playClip, stopClip };

package/dist/esm/utilities/cine/playClip.js

@@ -0,0 +1,352 @@
+import { glMatrix, vec3 } from 'gl-matrix';
+import { utilities as csUtils, getEnabledElement, StackViewport, VideoViewport, VolumeViewport, cache, BaseVolumeViewport, Enums, } from '@cornerstonejs/core';
+import CINE_EVENTS from './events';
+import { addToolState, getToolState, getToolStateByViewportId } from './state';
+const { ViewportStatus } = Enums;
+const { triggerEvent } = csUtils;
+const debounced = true;
+const dynamicVolumesPlayingMap = new Map();
+function playClip(element, playClipOptions) {
+    let playClipTimeouts;
+    let playClipIsTimeVarying;
+    if (element === undefined) {
+        throw new Error('playClip: element must not be undefined');
+    }
+    const enabledElement = getEnabledElement(element);
+    if (!enabledElement) {
+        throw new Error('playClip: element must be a valid Cornerstone enabled element');
+    }
+    if (!playClipOptions) {
+        playClipOptions = {};
+    }
+    playClipOptions.dynamicCineEnabled =
+        playClipOptions.dynamicCineEnabled ?? true;
+    const { viewport } = enabledElement;
+    const playClipContext = _createCinePlayContext(viewport, playClipOptions);
+    let playClipData = getToolState(element);
+    const isDynamicCinePlaying = playClipOptions.dynamicCineEnabled;
+    if (isDynamicCinePlaying) {
+        _stopDynamicVolumeCine(element);
+    }
+    if (!playClipData) {
+        playClipData = {
+            intervalId: undefined,
+            framesPerSecond: 30,
+            lastFrameTimeStamp: undefined,
+            ignoreFrameTimeVector: false,
+            usingFrameTimeVector: false,
+            frameTimeVector: playClipOptions.frameTimeVector ?? undefined,
+            speed: playClipOptions.frameTimeVectorSpeedMultiplier ?? 1,
+            reverse: playClipOptions.reverse ?? false,
+            loop: playClipOptions.loop ?? true,
+        };
+        addToolState(element, playClipData);
+    }
+    else {
+        _stopClip(element, {
+            stopDynamicCine: !isDynamicCinePlaying,
+            viewportId: viewport.id,
+        });
+    }
+    playClipData.dynamicCineEnabled = playClipOptions.dynamicCineEnabled;
+    if (playClipOptions.framesPerSecond < 0 ||
+        playClipOptions.framesPerSecond > 0) {
+        playClipData.framesPerSecond = Number(playClipOptions.framesPerSecond);
+        playClipData.reverse = playClipData.framesPerSecond < 0;
+        playClipData.ignoreFrameTimeVector = true;
+    }
+    if (playClipData.ignoreFrameTimeVector !== true &&
+        playClipData.frameTimeVector &&
+        playClipData.frameTimeVector.length === playClipContext.numScrollSteps &&
+        playClipContext.frameTimeVectorEnabled) {
+        const { timeouts, isTimeVarying } = _getPlayClipTimeouts(playClipData.frameTimeVector, playClipData.speed);
+        playClipTimeouts = timeouts;
+        playClipIsTimeVarying = isTimeVarying;
+    }
+    const playClipAction = () => {
+        const { numScrollSteps, currentStepIndex } = playClipContext;
+        let newStepIndex = currentStepIndex + (playClipData.reverse ? -1 : 1);
+        const newStepIndexOutOfRange = newStepIndex < 0 || newStepIndex >= numScrollSteps;
+        if (!playClipData.loop && newStepIndexOutOfRange) {
+            _stopClip(element, {
+                stopDynamicCine: !isDynamicCinePlaying,
+                viewportId: viewport.id,
+            });
+            const eventDetail = { element };
+            triggerEvent(element, CINE_EVENTS.CLIP_STOPPED, eventDetail);
+            return;
+        }
+        if (newStepIndex >= numScrollSteps) {
+            newStepIndex = 0;
+        }
+        else if (newStepIndex < 0) {
+            newStepIndex = numScrollSteps - 1;
+        }
+        const delta = newStepIndex - currentStepIndex;
+        if (delta) {
+            try {
+                playClipContext.scroll(delta);
+            }
+            catch (e) {
+                console.warn('Play clip not scrolling', e);
+                _stopClipWithData(playClipData);
+                triggerEvent(element, CINE_EVENTS.CLIP_STOPPED, eventDetail);
+                return;
+            }
+        }
+    };
+    if (isDynamicCinePlaying) {
+        const volume = _getVolumeFromViewport(viewport);
+        if (volume) {
+            dynamicVolumesPlayingMap.set(volume.volumeId, element);
+        }
+    }
+    if (playClipContext.play) {
+        playClipData.framesPerSecond = playClipContext.play(playClipOptions.framesPerSecond);
+    }
+    else if (playClipTimeouts &&
+        playClipTimeouts.length > 0 &&
+        playClipIsTimeVarying) {
+        playClipData.usingFrameTimeVector = true;
+        playClipData.intervalId = window.setTimeout(function playClipTimeoutHandler() {
+            playClipData.intervalId = window.setTimeout(playClipTimeoutHandler, playClipTimeouts[playClipContext.currentStepIndex]);
+            playClipAction();
+        }, 0);
+    }
+    else {
+        playClipData.usingFrameTimeVector = false;
+        playClipData.intervalId = window.setInterval(playClipAction, 1000 / Math.abs(playClipData.framesPerSecond));
+    }
+    const eventDetail = {
+        element,
+    };
+    triggerEvent(element, CINE_EVENTS.CLIP_STARTED, eventDetail);
+}
+function stopClip(element, options = {}) {
+    _stopClip(element, {
+        stopDynamicCine: true,
+        ...options,
+    });
+}
+function _stopClip(element, options = { stopDynamicCine: true, viewportId: undefined }) {
+    const { stopDynamicCine, viewportId } = options;
+    const enabledElement = getEnabledElement(element);
+    let toolState;
+    const viewport = enabledElement?.viewport;
+    if (!enabledElement) {
+        if (viewportId) {
+            toolState = getToolStateByViewportId(viewportId);
+        }
+        else {
+            return;
+        }
+    }
+    else {
+        const { viewport } = enabledElement;
+        toolState = getToolState(viewport.element);
+    }
+    if (toolState) {
+        _stopClipWithData(toolState);
+    }
+    if (viewport instanceof VideoViewport) {
+        viewport.pause();
+    }
+    else if (stopDynamicCine && viewport instanceof BaseVolumeViewport) {
+        _stopDynamicVolumeCine(element);
+    }
+}
+function _stopDynamicVolumeCine(element) {
+    const { viewport } = getEnabledElement(element);
+    if (viewport instanceof VolumeViewport) {
+        const volume = _getVolumeFromViewport(viewport);
+        if (volume?.isDynamicVolume()) {
+            const dynamicCineElement = dynamicVolumesPlayingMap.get(volume.volumeId);
+            dynamicVolumesPlayingMap.delete(volume.volumeId);
+            if (dynamicCineElement && dynamicCineElement !== element) {
+                stopClip(dynamicCineElement);
+            }
+        }
+    }
+}
+function _getPlayClipTimeouts(vector, speed) {
+    let i;
+    let sample;
+    let delay;
+    let sum = 0;
+    const limit = vector.length;
+    const timeouts = [];
+    let isTimeVarying = false;
+    if (typeof speed !== 'number' || speed <= 0) {
+        speed = 1;
+    }
+    for (i = 1; i < limit; i++) {
+        delay = (Number(vector[i]) / speed) | 0;
+        timeouts.push(delay);
+        if (i === 1) {
+            sample = delay;
+        }
+        else if (delay !== sample) {
+            isTimeVarying = true;
+        }
+        sum += delay;
+    }
+    if (timeouts.length > 0) {
+        if (isTimeVarying) {
+            delay = (sum / timeouts.length) | 0;
+        }
+        else {
+            delay = timeouts[0];
+        }
+        timeouts.push(delay);
+    }
+    return { timeouts, isTimeVarying };
+}
+function _stopClipWithData(playClipData) {
+    const id = playClipData.intervalId;
+    if (typeof id !== 'undefined') {
+        playClipData.intervalId = undefined;
+        if (playClipData.usingFrameTimeVector) {
+            clearTimeout(id);
+        }
+        else {
+            clearInterval(id);
+        }
+    }
+}
+function _getVolumeFromViewport(viewport) {
+    if (!(viewport instanceof VolumeViewport)) {
+        return undefined;
+    }
+    const volumeIds = viewport.getAllVolumeIds();
+    if (!volumeIds?.length) {
+        return undefined;
+    }
+    const dynamicVolumeId = volumeIds.find((volumeId) => cache.getVolume(volumeId)?.isDynamicVolume());
+    const volumeId = dynamicVolumeId ?? volumeIds[0];
+    return cache.getVolume(volumeId);
+}
+function _createStackViewportCinePlayContext(viewport, waitForRendered) {
+    const imageIds = viewport.getImageIds();
+    return {
+        get numScrollSteps() {
+            return imageIds.length;
+        },
+        get currentStepIndex() {
+            return viewport.getTargetImageIdIndex();
+        },
+        get frameTimeVectorEnabled() {
+            return true;
+        },
+        waitForRenderedCount: 0,
+        scroll(delta) {
+            if (this.waitForRenderedCount <= waitForRendered &&
+                viewport.viewportStatus !== ViewportStatus.RENDERED) {
+                this.waitForRenderedCount++;
+                return;
+            }
+            this.waitForRenderedCount = 0;
+            csUtils.scroll(viewport, { delta, debounceLoading: debounced });
+        },
+    };
+}
+function _createVideoViewportCinePlayContext(viewport, waitForRendered) {
+    return {
+        get numScrollSteps() {
+            return viewport.getNumberOfSlices();
+        },
+        get currentStepIndex() {
+            return viewport.getSliceIndex();
+        },
+        get frameTimeVectorEnabled() {
+            return true;
+        },
+        waitForRenderedCount: 0,
+        scroll(delta) {
+            if (this.waitForRenderedCount <= waitForRendered &&
+                viewport.viewportStatus !== ViewportStatus.RENDERED) {
+                this.waitForRenderedCount++;
+                return;
+            }
+            this.waitForRenderedCount = 0;
+            csUtils.scroll(viewport, { delta, debounceLoading: debounced });
+        },
+        play(fps) {
+            if (fps) {
+                viewport.setPlaybackRate(fps / 24);
+            }
+            viewport.play();
+            return viewport.getFrameRate();
+        },
+    };
+}
+function _createVolumeViewportCinePlayContext(viewport, volume) {
+    const { volumeId } = volume;
+    const cachedScrollInfo = {
+        viewPlaneNormal: vec3.create(),
+        scrollInfo: null,
+    };
+    const getScrollInfo = () => {
+        const camera = viewport.getCamera();
+        const updateCache = !cachedScrollInfo.scrollInfo ||
+            !vec3.equals(camera.viewPlaneNormal, cachedScrollInfo.viewPlaneNormal);
+        if (updateCache) {
+            const scrollInfo = csUtils.getVolumeViewportScrollInfo(viewport, volumeId);
+            cachedScrollInfo.viewPlaneNormal = camera.viewPlaneNormal;
+            cachedScrollInfo.scrollInfo = scrollInfo;
+        }
+        return cachedScrollInfo.scrollInfo;
+    };
+    return {
+        get numScrollSteps() {
+            return getScrollInfo().numScrollSteps;
+        },
+        get currentStepIndex() {
+            return getScrollInfo().currentStepIndex;
+        },
+        get frameTimeVectorEnabled() {
+            const camera = viewport.getCamera();
+            const volumeViewPlaneNormal = volume.direction
+                .slice(6, 9)
+                .map((x) => -x);
+            const dot = vec3.dot(volumeViewPlaneNormal, camera.viewPlaneNormal);
+            return glMatrix.equals(dot, 1);
+        },
+        scroll(delta) {
+            getScrollInfo().currentStepIndex += delta;
+            csUtils.scroll(viewport, { delta });
+        },
+    };
+}
+function _createDynamicVolumeViewportCinePlayContext(volume) {
+    return {
+        get numScrollSteps() {
+            return volume.numDimensionGroups;
+        },
+        get currentStepIndex() {
+            return volume.dimensionGroupNumber - 1;
+        },
+        get frameTimeVectorEnabled() {
+            return false;
+        },
+        scroll(delta) {
+            volume.scroll(delta);
+        },
+    };
+}
+function _createCinePlayContext(viewport, playClipOptions) {
+    if (viewport instanceof StackViewport) {
+        return _createStackViewportCinePlayContext(viewport, playClipOptions.waitForRendered ?? 30);
+    }
+    if (viewport instanceof VolumeViewport) {
+        const volume = _getVolumeFromViewport(viewport);
+        if (playClipOptions.dynamicCineEnabled && volume?.isDynamicVolume()) {
+            return _createDynamicVolumeViewportCinePlayContext(volume);
+        }
+        return _createVolumeViewportCinePlayContext(viewport, volume);
+    }
+    if (viewport instanceof VideoViewport) {
+        return _createVideoViewportCinePlayContext(viewport, playClipOptions.waitForRendered ?? 30);
+    }
+    throw new Error('Unknown viewport type');
+}
+export { playClip, stopClip };

package/dist/esm/utilities/cine/state.d.ts

@@ -0,0 +1,5 @@
+import type { CINETypes } from '../../types';
+declare function addToolState(element: HTMLDivElement, data: CINETypes.ToolData): void;
+declare function getToolState(element: HTMLDivElement): CINETypes.ToolData | undefined;
+declare function getToolStateByViewportId(viewportId: string): CINETypes.ToolData | undefined;
+export { addToolState, getToolState, getToolStateByViewportId };