@cornerstonejs/core 4.17.5 → 4.18.1

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

@@ -0,0 +1,99 @@
+import type { mat4 } from 'gl-matrix';
+import type { Point3, Point2, ICamera, ECGViewportInput, ECGWaveformData, ECGViewportProperties, ViewReferenceSpecifier } from '../types';
+import { Transform } from './helpers/cpuFallback/rendering/transform';
+import Viewport from './Viewport';
+declare class ECGViewport extends Viewport {
+    readonly uid: string;
+    readonly renderingEngineId: string;
+    readonly canvasContext: CanvasRenderingContext2D;
+    private imageId;
+    private channels;
+    private waveformData;
+    private ecgWidth;
+    private ecgHeight;
+    private channelScale;
+    private ecgCamera;
+    constructor(props: ECGViewportInput);
+    static get useCustomRenderingPipeline(): boolean;
+    private addEventListeners;
+    private removeEventListeners;
+    private elementDisabledHandler;
+    setEcg(imageId: string): Promise<void>;
+    setChannelVisibility(index: number, visible: boolean): void;
+    getVisibleChannels(): {
+        name: string;
+        visible: boolean;
+    }[];
+    getWaveformData(): ECGWaveformData | null;
+    getContentDimensions(): {
+        width: number;
+        height: number;
+    };
+    private computeChannelScale;
+    private recalculateHeight;
+    private computeChannelLayouts;
+    setProperties(props: ECGViewportProperties): void;
+    getProperties: () => ECGViewportProperties;
+    resetProperties(): void;
+    setCamera(camera: ICamera): void;
+    getCamera(): ICamera;
+    resetCamera: () => boolean;
+    getFrameOfReferenceUID: () => string;
+    resize: () => void;
+    canvasToWorld: (canvasPos: Point2, destPos?: Point3) => Point3;
+    worldToCanvas: (worldPos: Point3) => Point2;
+    getPan(): Point2;
+    getRotation: () => number;
+    getNumberOfSlices: () => number;
+    getCurrentImageIdIndex: () => number;
+    getCurrentImageId: () => string | undefined;
+    getViewReferenceId(_specifier?: ViewReferenceSpecifier): string;
+    hasImageURI(imageURI: string): boolean;
+    isReferenceViewable(viewRef: {
+        FrameOfReferenceUID?: string;
+    }): boolean;
+    getSliceIndex: () => number;
+    getImageIds: () => string[];
+    scroll: () => void;
+    customRenderViewportToCanvas: () => void;
+    updateCameraClippingPlanesAndRange(): void;
+    private refreshRenderValues;
+    private getWorldToCanvasRatio;
+    protected getTransform(): Transform;
+    private renderFrame;
+    private drawGrid;
+    private drawTraces;
+    private drawLabels;
+    getImageData(): {
+        dimensions: number[];
+        spacing: number[];
+        origin: number[];
+        direction: number[];
+        imageData: {
+            getDirection: () => number[];
+            getDimensions: () => number[];
+            getRange: () => Point2;
+            getSpacing: () => number[];
+            worldToIndex: (point: Point3) => Point3;
+            indexToWorld: (point: Point3) => Point3;
+        };
+        hasPixelSpacing: boolean;
+        calibration: import("../types").IImageCalibration;
+        preScale: {
+            scaled: boolean;
+        };
+        metadata: {
+            Modality: string;
+        };
+    };
+    getSliceViewInfo(): {
+        width: number;
+        height: number;
+        sliceIndex: number;
+        slicePlane: number;
+        sliceToIndexMatrix: mat4;
+        indexToSliceMatrix: mat4;
+    };
+    getMiddleSliceData: () => never;
+}
+export default ECGViewport;

package/dist/esm/RenderingEngine/ECGViewport.js

@@ -0,0 +1,548 @@
+import { Events as EVENTS, MetadataModules } from '../enums';
+import { Transform } from './helpers/cpuFallback/rendering/transform';
+import triggerEvent from '../utilities/triggerEvent';
+import Viewport from './Viewport';
+import { getOrCreateCanvas } from './helpers';
+import * as metaData from '../metaData';
+const SECONDS_WIDTH = 150;
+const CHANNEL_SPACING = 5;
+const ECG_AMPLITUDE_INDEX_SIZE = 65536;
+const COLOR_GRID_MAJOR = '#7f0000';
+const COLOR_GRID_MINOR = '#3f0000';
+const COLOR_BASELINE = '#7F4C00';
+const COLOR_TRACE = '#ffffff';
+const COLOR_LABEL = '#ffff00';
+const COLOR_BACKGROUND = '#000000';
+function computeMinMax(data) {
+    let min = 0;
+    let max = 0;
+    for (let i = 0; i < data.length; i++) {
+        if (data[i] < min) {
+            min = data[i];
+        }
+        if (data[i] > max) {
+            max = data[i];
+        }
+    }
+    return { min, max };
+}
+class ECGViewport extends Viewport {
+    constructor(props) {
+        super({
+            ...props,
+            canvas: props.canvas || getOrCreateCanvas(props.element),
+        });
+        this.imageId = null;
+        this.channels = [];
+        this.waveformData = null;
+        this.ecgWidth = 0;
+        this.ecgHeight = 0;
+        this.channelScale = 0;
+        this.ecgCamera = {
+            panWorld: [0, 0],
+            parallelScale: 1,
+        };
+        this.getProperties = () => {
+            return {
+                visibleChannels: this.channels
+                    .map((ch, i) => (ch.visible ? i : -1))
+                    .filter((i) => i >= 0),
+            };
+        };
+        this.resetCamera = () => {
+            this.refreshRenderValues();
+            this.canvasContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
+            this.renderFrame();
+            return true;
+        };
+        this.getFrameOfReferenceUID = () => {
+            return `ecg-viewport-${this.id}`;
+        };
+        this.resize = () => {
+            const canvas = this.canvas;
+            const { clientWidth, clientHeight } = canvas;
+            if (canvas.width !== clientWidth || canvas.height !== clientHeight) {
+                canvas.width = clientWidth;
+                canvas.height = clientHeight;
+            }
+            if (this.waveformData) {
+                this.computeChannelScale();
+                this.recalculateHeight();
+            }
+            this.refreshRenderValues();
+            this.renderFrame();
+        };
+        this.canvasToWorld = (canvasPos, destPos = [0, 0, 0]) => {
+            if (!this.waveformData) {
+                destPos[0] = 0;
+                destPos[1] = 0;
+                destPos[2] = 0;
+                return destPos;
+            }
+            const scale = this.getWorldToCanvasRatio();
+            const pan = this.ecgCamera.panWorld;
+            const layouts = this.computeChannelLayouts();
+            const subCanvasPos = [
+                canvasPos[0] / scale - pan[0],
+                canvasPos[1] / scale - pan[1],
+            ];
+            let z = 0;
+            for (let i = 0; i < layouts.length; i++) {
+                const layout = layouts[i];
+                if (subCanvasPos[1] <= layout.yOffset) {
+                    z = i;
+                    break;
+                }
+                if (i === layouts.length - 1) {
+                    z = i;
+                }
+            }
+            const x = Math.max(0, Math.min(this.waveformData.numberOfSamples - 1, (subCanvasPos[0] * this.waveformData.numberOfSamples) / this.ecgWidth));
+            const layout = layouts[z];
+            const y = (layout.baseline - subCanvasPos[1]) / this.channelScale;
+            destPos[0] = x;
+            destPos[1] = y;
+            destPos[2] = z;
+            return destPos;
+        };
+        this.worldToCanvas = (worldPos) => {
+            if (!this.waveformData) {
+                return [0, 0];
+            }
+            const scale = this.getWorldToCanvasRatio();
+            const pan = this.ecgCamera.panWorld;
+            const layouts = this.computeChannelLayouts();
+            const z = Math.round(worldPos[2]);
+            if (z < 0 || z >= layouts.length) {
+                return [0, 0];
+            }
+            const layout = layouts[z];
+            const canvasX = (worldPos[0] / this.waveformData.numberOfSamples) *
+                this.ecgWidth *
+                scale +
+                pan[0] * scale;
+            const canvasY = (layout.baseline - worldPos[1] * this.channelScale) * scale +
+                pan[1] * scale;
+            return [canvasX, canvasY];
+        };
+        this.getRotation = () => 0;
+        this.getNumberOfSlices = () => {
+            return 1;
+        };
+        this.getCurrentImageIdIndex = () => {
+            return 0;
+        };
+        this.getCurrentImageId = () => {
+            return this.imageId;
+        };
+        this.getSliceIndex = () => {
+            return 0;
+        };
+        this.getImageIds = () => {
+            return this.imageId ? [this.imageId] : [];
+        };
+        this.scroll = () => {
+        };
+        this.customRenderViewportToCanvas = () => {
+            this.renderFrame();
+        };
+        this.renderFrame = () => {
+            if (!this.waveformData) {
+                return;
+            }
+            const dpr = window.devicePixelRatio || 1;
+            const transform = this.getTransform();
+            const m = transform.getMatrix();
+            const ctx = this.canvasContext;
+            ctx.resetTransform();
+            ctx.fillStyle = COLOR_BACKGROUND;
+            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+            ctx.setTransform(m[0] / dpr, m[1] / dpr, m[2] / dpr, m[3] / dpr, m[4] / dpr, m[5] / dpr);
+            const layouts = this.computeChannelLayouts();
+            this.drawGrid(ctx);
+            this.drawTraces(ctx, layouts);
+            this.drawLabels(ctx, layouts);
+            ctx.resetTransform();
+            triggerEvent(this.element, EVENTS.IMAGE_RENDERED, {
+                element: this.element,
+                viewportId: this.id,
+                viewport: this,
+                renderingEngineId: this.renderingEngineId,
+            });
+        };
+        this.getMiddleSliceData = () => {
+            throw new Error('Method not implemented for ECG viewport.');
+        };
+        this.canvasContext = this.canvas.getContext('2d');
+        this.renderingEngineId = props.renderingEngineId;
+        this.element.setAttribute('data-viewport-uid', this.id);
+        this.element.setAttribute('data-rendering-engine-uid', this.renderingEngineId);
+        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();
+    }
+    async setEcg(imageId) {
+        this.imageId = imageId;
+        const ecgModule = metaData.get(MetadataModules.ECG, imageId);
+        if (!ecgModule?.waveformData?.retrieveBulkData) {
+            throw new Error(`[ECGViewport] No ECG waveform data for imageId: ${imageId}`);
+        }
+        const { numberOfWaveformChannels: numberOfChannels, numberOfWaveformSamples: numberOfSamples, samplingFrequency, waveformBitsAllocated: bitsAllocated = 16, waveformSampleInterpretation: sampleInterpretation = 'SS', multiplexGroupLabel, channelDefinitionSequence: channelDefinitions = [], } = ecgModule;
+        const channelArrays = await ecgModule.waveformData.retrieveBulkData();
+        this.channels = [];
+        for (let i = 0; i < numberOfChannels; i++) {
+            const channelDef = channelDefinitions[i] || {};
+            const name = channelDef.channelSourceSequence?.codeMeaning ||
+                channelDef.ChannelSourceSequence?.CodeMeaning ||
+                `Channel ${i + 1}`;
+            const data = channelArrays[i] || new Int16Array(0);
+            const { min, max } = computeMinMax(data);
+            this.channels.push({ name, data, visible: true, min, max });
+        }
+        this.waveformData = {
+            channels: this.channels,
+            numberOfChannels,
+            numberOfSamples,
+            samplingFrequency,
+            bitsAllocated,
+            sampleInterpretation,
+            multiplexGroupLabel,
+        };
+        this.calibration = metaData.get(MetadataModules.CALIBRATION, imageId);
+        this.ecgWidth = Math.ceil((numberOfSamples * SECONDS_WIDTH) / samplingFrequency);
+        this.computeChannelScale();
+        this.recalculateHeight();
+        this.refreshRenderValues();
+        this.renderFrame();
+    }
+    setChannelVisibility(index, visible) {
+        if (index >= 0 && index < this.channels.length) {
+            this.channels[index].visible = visible;
+            this.computeChannelScale();
+            this.recalculateHeight();
+            this.refreshRenderValues();
+            this.renderFrame();
+        }
+    }
+    getVisibleChannels() {
+        return this.channels.map((ch) => ({
+            name: ch.name,
+            visible: ch.visible,
+        }));
+    }
+    getWaveformData() {
+        return this.waveformData;
+    }
+    getContentDimensions() {
+        return { width: this.ecgWidth, height: this.ecgHeight };
+    }
+    computeChannelScale() {
+        const visibleChannels = this.channels.filter((c) => c.visible && c.data.length > 0);
+        if (visibleChannels.length === 0 || this.ecgWidth === 0) {
+            this.channelScale = 0;
+            return;
+        }
+        let maxRange = 1;
+        for (const channel of visibleChannels) {
+            const range = channel.max - channel.min;
+            maxRange = Math.max(maxRange, range);
+        }
+        const canvasAspect = this.canvas.offsetHeight && this.canvas.offsetWidth
+            ? this.canvas.offsetHeight / this.canvas.offsetWidth
+            : 2 / 3;
+        const targetTotalHeight = this.ecgWidth * canvasAspect;
+        const totalSpacing = CHANNEL_SPACING * visibleChannels.length;
+        const heightPerChannel = (targetTotalHeight - totalSpacing) / visibleChannels.length;
+        this.channelScale = heightPerChannel / (maxRange * 1.25);
+    }
+    recalculateHeight() {
+        const scale = this.channelScale;
+        let totalHeight = 0;
+        for (const channel of this.channels) {
+            if (!channel.visible || channel.data.length === 0) {
+                continue;
+            }
+            const itemHeight = (channel.max - channel.min) * scale * 1.25;
+            totalHeight += itemHeight + CHANNEL_SPACING;
+        }
+        this.ecgHeight = totalHeight;
+    }
+    computeChannelLayouts() {
+        const scale = this.channelScale;
+        const layouts = [];
+        let yOffset = 0;
+        for (const channel of this.channels) {
+            if (!channel.visible || channel.data.length === 0) {
+                continue;
+            }
+            const itemHeight = (channel.max - channel.min) * scale * 1.25;
+            yOffset += itemHeight + CHANNEL_SPACING;
+            const baseline = yOffset + channel.min * scale;
+            layouts.push({ channel, itemHeight, yOffset, baseline });
+        }
+        return layouts;
+    }
+    setProperties(props) {
+        if (props.visibleChannels !== undefined) {
+            for (let i = 0; i < this.channels.length; i++) {
+                this.channels[i].visible = props.visibleChannels.includes(i);
+            }
+            this.computeChannelScale();
+            this.recalculateHeight();
+            this.refreshRenderValues();
+            this.renderFrame();
+        }
+    }
+    resetProperties() {
+        for (const channel of this.channels) {
+            channel.visible = true;
+        }
+        this.computeChannelScale();
+        this.recalculateHeight();
+        this.refreshRenderValues();
+        this.renderFrame();
+    }
+    setCamera(camera) {
+        const { parallelScale, focalPoint } = camera;
+        if (parallelScale) {
+            this.ecgCamera.parallelScale =
+                this.element.clientHeight / 2 / parallelScale;
+        }
+        if (focalPoint !== undefined) {
+            const focalPointCanvas = this.worldToCanvas(focalPoint);
+            const canvasCenter = [
+                this.element.clientWidth / 2,
+                this.element.clientHeight / 2,
+            ];
+            const panWorldDelta = [
+                (focalPointCanvas[0] - canvasCenter[0]) / this.ecgCamera.parallelScale,
+                (focalPointCanvas[1] - canvasCenter[1]) / this.ecgCamera.parallelScale,
+            ];
+            this.ecgCamera.panWorld = [
+                this.ecgCamera.panWorld[0] - panWorldDelta[0],
+                this.ecgCamera.panWorld[1] - panWorldDelta[1],
+            ];
+        }
+        this.canvasContext.fillStyle = COLOR_BACKGROUND;
+        this.canvasContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        this.renderFrame();
+    }
+    getCamera() {
+        const { parallelScale } = this.ecgCamera;
+        const canvasCenter = [
+            this.element.clientWidth / 2,
+            this.element.clientHeight / 2,
+        ];
+        const canvasCenterWorld = this.canvasToWorld(canvasCenter);
+        return {
+            parallelProjection: true,
+            focalPoint: canvasCenterWorld,
+            position: [0, 0, 0],
+            viewUp: [0, -1, 0],
+            parallelScale: this.element.clientHeight / 2 / parallelScale,
+            viewPlaneNormal: [0, 0, 1],
+        };
+    }
+    getPan() {
+        const panWorld = this.ecgCamera.panWorld;
+        return [panWorld[0], panWorld[1]];
+    }
+    getViewReferenceId(_specifier) {
+        return `imageId:${this.imageId}`;
+    }
+    hasImageURI(imageURI) {
+        return this.imageId?.includes(imageURI) ?? false;
+    }
+    isReferenceViewable(viewRef) {
+        if (viewRef.FrameOfReferenceUID &&
+            viewRef.FrameOfReferenceUID !== this.getFrameOfReferenceUID()) {
+            return false;
+        }
+        return true;
+    }
+    updateCameraClippingPlanesAndRange() {
+    }
+    refreshRenderValues() {
+        if (!this.ecgWidth || !this.ecgHeight) {
+            return;
+        }
+        let worldToCanvasRatio = this.canvas.offsetWidth / this.ecgWidth;
+        if (this.ecgHeight * worldToCanvasRatio > this.canvas.offsetHeight) {
+            worldToCanvasRatio = this.canvas.offsetHeight / this.ecgHeight;
+        }
+        const drawWidth = Math.floor(this.ecgWidth * worldToCanvasRatio);
+        const drawHeight = Math.floor(this.ecgHeight * worldToCanvasRatio);
+        const xOffsetCanvas = (this.canvas.offsetWidth - drawWidth) / 2;
+        const yOffsetCanvas = (this.canvas.offsetHeight - drawHeight) / 2;
+        const xOffsetWorld = xOffsetCanvas / worldToCanvasRatio;
+        const yOffsetWorld = yOffsetCanvas / worldToCanvasRatio;
+        this.ecgCamera.panWorld = [xOffsetWorld, yOffsetWorld];
+        this.ecgCamera.parallelScale = worldToCanvasRatio;
+    }
+    getWorldToCanvasRatio() {
+        return this.ecgCamera.parallelScale;
+    }
+    getTransform() {
+        const panWorld = this.ecgCamera.panWorld;
+        const dpr = window.devicePixelRatio || 1;
+        const worldToCanvasRatio = this.getWorldToCanvasRatio();
+        const canvasToWorldRatio = 1.0 / worldToCanvasRatio;
+        const halfCanvas = [
+            this.canvas.offsetWidth / 2,
+            this.canvas.offsetHeight / 2,
+        ];
+        const halfCanvasWorldCoordinates = [
+            halfCanvas[0] * canvasToWorldRatio,
+            halfCanvas[1] * canvasToWorldRatio,
+        ];
+        const transform = new Transform();
+        transform.scale(dpr, dpr);
+        transform.translate(halfCanvas[0], halfCanvas[1]);
+        transform.scale(worldToCanvasRatio, worldToCanvasRatio);
+        transform.translate(panWorld[0], panWorld[1]);
+        transform.translate(-halfCanvasWorldCoordinates[0], -halfCanvasWorldCoordinates[1]);
+        return transform;
+    }
+    drawGrid(ctx) {
+        const scale = this.channelScale;
+        const pxWidth = this.ecgWidth;
+        const pxHeight = this.ecgHeight;
+        if (scale <= 0) {
+            return;
+        }
+        const MIN_LINE_SPACING = 8;
+        let hGridUnit = 100;
+        while (hGridUnit * scale < MIN_LINE_SPACING) {
+            hGridUnit *= 2;
+        }
+        const minorH = hGridUnit * scale;
+        const majorH = minorH * 5;
+        const minorV = SECONDS_WIDTH / 25;
+        const majorV = SECONDS_WIDTH / 5;
+        ctx.strokeStyle = COLOR_GRID_MINOR;
+        ctx.lineWidth = 0.5;
+        ctx.beginPath();
+        const hLines = Math.floor(pxHeight / minorH);
+        for (let h = 1; h <= hLines; h++) {
+            if (h % 5 !== 0) {
+                const y = h * minorH;
+                ctx.moveTo(0, y);
+                ctx.lineTo(pxWidth, y);
+            }
+        }
+        const vLines = Math.floor(pxWidth / minorV);
+        for (let v = 1; v <= vLines; v++) {
+            if (v % 5 !== 0) {
+                const x = v * minorV;
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, pxHeight);
+            }
+        }
+        ctx.stroke();
+        ctx.strokeStyle = COLOR_GRID_MAJOR;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        const hMajorLines = Math.floor(pxHeight / majorH);
+        for (let h = 1; h <= hMajorLines; h++) {
+            const y = h * majorH;
+            ctx.moveTo(0, y);
+            ctx.lineTo(pxWidth, y);
+        }
+        const vMajorLines = Math.floor(pxWidth / majorV);
+        for (let v = 1; v <= vMajorLines; v++) {
+            const x = v * majorV;
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, pxHeight);
+        }
+        ctx.stroke();
+    }
+    drawTraces(ctx, layouts) {
+        const scale = this.channelScale;
+        const pxWidth = this.ecgWidth;
+        for (const { channel, baseline } of layouts) {
+            ctx.strokeStyle = COLOR_BASELINE;
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(0, baseline);
+            ctx.lineTo(pxWidth, baseline);
+            ctx.stroke();
+            ctx.strokeStyle = COLOR_TRACE;
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for (let i = 0; i < channel.data.length; i++) {
+                const x = (i * pxWidth) / channel.data.length;
+                const y = baseline - channel.data[i] * scale;
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+        }
+    }
+    drawLabels(ctx, layouts) {
+        const worldToCanvas = this.getWorldToCanvasRatio();
+        const fontSize = 14 / worldToCanvas;
+        for (const { channel, itemHeight, yOffset } of layouts) {
+            const labelY = yOffset - itemHeight + fontSize;
+            ctx.font = `${fontSize}px monospace`;
+            const textWidth = ctx.measureText(channel.name).width;
+            ctx.fillStyle = COLOR_BACKGROUND;
+            ctx.fillRect(5, labelY - fontSize, textWidth + 4, fontSize + 4);
+            ctx.fillStyle = COLOR_LABEL;
+            ctx.fillText(channel.name, 5, labelY);
+        }
+    }
+    getImageData() {
+        if (!this.waveformData) {
+            return null;
+        }
+        const nSamples = this.waveformData.numberOfSamples;
+        const nChannels = this.waveformData.numberOfChannels;
+        const dimensions = [nSamples, ECG_AMPLITUDE_INDEX_SIZE, nChannels];
+        const spacing = [1, 1, 1];
+        const origin = [0, 0, 0];
+        const direction = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+        const amplitudeOffset = ECG_AMPLITUDE_INDEX_SIZE / 2;
+        const imageData = {
+            getDirection: () => direction,
+            getDimensions: () => dimensions,
+            getRange: () => [0, 1],
+            getSpacing: () => spacing,
+            worldToIndex: (point) => {
+                return [point[0], point[1] + amplitudeOffset, point[2]];
+            },
+            indexToWorld: (point) => {
+                return [point[0], point[1] - amplitudeOffset, point[2]];
+            },
+        };
+        return {
+            dimensions,
+            spacing,
+            origin,
+            direction,
+            imageData,
+            hasPixelSpacing: false,
+            calibration: this.calibration,
+            preScale: { scaled: false },
+            metadata: { Modality: 'ECG' },
+        };
+    }
+    getSliceViewInfo() {
+        throw new Error('Method not implemented for ECG viewport.');
+    }
+}
+export default ECGViewport;

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

@@ -4,6 +4,7 @@ import ViewportType from '../../enums/ViewportType';
 import VolumeViewport3D from '../VolumeViewport3D';
 import VideoViewport from '../VideoViewport';
 import WSIViewport from '../WSIViewport';
+import ECGViewport from '../ECGViewport';
 const viewportTypeToViewportClass = {
     [ViewportType.ORTHOGRAPHIC]: VolumeViewport,
     [ViewportType.PERSPECTIVE]: VolumeViewport,
@@ -11,5 +12,6 @@ const viewportTypeToViewportClass = {
     [ViewportType.VOLUME_3D]: VolumeViewport3D,
     [ViewportType.VIDEO]: VideoViewport,
     [ViewportType.WHOLE_SLIDE]: WSIViewport,
+    [ViewportType.ECG]: ECGViewport,
 };
 export default viewportTypeToViewportClass;

package/dist/esm/enums/MetadataModules.d.ts

@@ -18,6 +18,7 @@ declare enum MetadataModules {
     PET_SERIES = "petSeriesModule",
     SOP_COMMON = "sopCommonModule",
     ULTRASOUND_ENHANCED_REGION = "ultrasoundEnhancedRegionModule",
+    ECG = "ecgModule",
     VOI_LUT = "voiLutModule",
     FRAME_MODULE = "frameModule",
     WADO_WEB_CLIENT = "wadoWebClient",

package/dist/esm/enums/MetadataModules.js

@@ -19,6 +19,7 @@ var MetadataModules;
     MetadataModules["PET_SERIES"] = "petSeriesModule";
     MetadataModules["SOP_COMMON"] = "sopCommonModule";
     MetadataModules["ULTRASOUND_ENHANCED_REGION"] = "ultrasoundEnhancedRegionModule";
+    MetadataModules["ECG"] = "ecgModule";
     MetadataModules["VOI_LUT"] = "voiLutModule";
     MetadataModules["FRAME_MODULE"] = "frameModule";
     MetadataModules["WADO_WEB_CLIENT"] = "wadoWebClient";

package/dist/esm/enums/ViewportType.d.ts

@@ -4,6 +4,7 @@ declare enum ViewportType {
     PERSPECTIVE = "perspective",
     VOLUME_3D = "volume3d",
     VIDEO = "video",
-    WHOLE_SLIDE = "wholeSlide"
+    WHOLE_SLIDE = "wholeSlide",
+    ECG = "ecg"
 }
 export default ViewportType;

package/dist/esm/enums/ViewportType.js

@@ -6,5 +6,6 @@ var ViewportType;
     ViewportType["VOLUME_3D"] = "volume3d";
     ViewportType["VIDEO"] = "video";
     ViewportType["WHOLE_SLIDE"] = "wholeSlide";
+    ViewportType["ECG"] = "ecg";
 })(ViewportType || (ViewportType = {}));
 export default ViewportType;

package/dist/esm/index.d.ts

@@ -11,6 +11,7 @@ import BaseVolumeViewport from './RenderingEngine/BaseVolumeViewport';
 import StackViewport from './RenderingEngine/StackViewport';
 import VideoViewport from './RenderingEngine/VideoViewport';
 import WSIViewport from './RenderingEngine/WSIViewport';
+import ECGViewport from './RenderingEngine/ECGViewport';
 import Viewport from './RenderingEngine/Viewport';
 import eventTarget from './eventTarget';
 import { version } from './version';
@@ -39,4 +40,4 @@ import { cornerstoneMeshLoader } from './loaders/cornerstoneMeshLoader';
 import { setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports } from './RenderingEngine/helpers';
 export * from './loaders/decimatedVolumeLoader';
 export type { Types, IRetrieveConfiguration, RetrieveOptions, RetrieveStage, ImageLoadListener, IImagesLoader, };
-export { init, isCornerstoneInitialized, peerImport, resetInitialization, getConfiguration, setConfiguration, getWebWorkerManager, canRenderFloatTextures, Enums, CONSTANTS, Events as EVENTS, Settings, BaseVolumeViewport, VolumeViewport, VolumeViewport3D, Viewport, StackViewport, VideoViewport, WSIViewport, RenderingEngine, BaseRenderingEngine, TiledRenderingEngine, ContextPoolRenderingEngine, ImageVolume, Surface, getRenderingEngine, getRenderingEngines, getEnabledElement, getEnabledElementByIds, getEnabledElements, getEnabledElementByViewportId, createVolumeActor, createVolumeMapper, cache, eventTarget, triggerEvent, imageLoader, registerImageLoader, volumeLoader, metaData, utilities, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, imageLoadPoolManager as requestPoolManager, imageRetrievalPoolManager, imageLoadPoolManager, getShouldUseCPURendering, setUseCPURendering, setPreferSizeOverAccuracy, resetUseCPURendering, geometryLoader, cornerstoneMeshLoader, ProgressiveRetrieveImages, decimatedVolumeLoader, cornerstoneStreamingImageVolumeLoader, cornerstoneStreamingDynamicImageVolumeLoader, StreamingDynamicImageVolume, StreamingImageVolume, convertMapperToNotSharedMapper, version, };
+export { init, isCornerstoneInitialized, peerImport, resetInitialization, getConfiguration, setConfiguration, getWebWorkerManager, canRenderFloatTextures, Enums, CONSTANTS, Events as EVENTS, Settings, BaseVolumeViewport, VolumeViewport, VolumeViewport3D, Viewport, StackViewport, VideoViewport, WSIViewport, ECGViewport, RenderingEngine, BaseRenderingEngine, TiledRenderingEngine, ContextPoolRenderingEngine, ImageVolume, Surface, getRenderingEngine, getRenderingEngines, getEnabledElement, getEnabledElementByIds, getEnabledElements, getEnabledElementByViewportId, createVolumeActor, createVolumeMapper, cache, eventTarget, triggerEvent, imageLoader, registerImageLoader, volumeLoader, metaData, utilities, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, imageLoadPoolManager as requestPoolManager, imageRetrievalPoolManager, imageLoadPoolManager, getShouldUseCPURendering, setUseCPURendering, setPreferSizeOverAccuracy, resetUseCPURendering, geometryLoader, cornerstoneMeshLoader, ProgressiveRetrieveImages, decimatedVolumeLoader, cornerstoneStreamingImageVolumeLoader, cornerstoneStreamingDynamicImageVolumeLoader, StreamingDynamicImageVolume, StreamingImageVolume, convertMapperToNotSharedMapper, version, };

package/dist/esm/index.js

@@ -11,6 +11,7 @@ import BaseVolumeViewport from './RenderingEngine/BaseVolumeViewport';
 import StackViewport from './RenderingEngine/StackViewport';
 import VideoViewport from './RenderingEngine/VideoViewport';
 import WSIViewport from './RenderingEngine/WSIViewport';
+import ECGViewport from './RenderingEngine/ECGViewport';
 import Viewport from './RenderingEngine/Viewport';
 import eventTarget from './eventTarget';
 import { version } from './version';
@@ -36,4 +37,4 @@ import { cornerstoneStreamingDynamicImageVolumeLoader } from './loaders/cornerst
 import { cornerstoneMeshLoader } from './loaders/cornerstoneMeshLoader';
 import { setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, } from './RenderingEngine/helpers';
 export * from './loaders/decimatedVolumeLoader';
-export { init, isCornerstoneInitialized, peerImport, resetInitialization, getConfiguration, setConfiguration, getWebWorkerManager, canRenderFloatTextures, Enums, CONSTANTS, Events as EVENTS, Settings, BaseVolumeViewport, VolumeViewport, VolumeViewport3D, Viewport, StackViewport, VideoViewport, WSIViewport, RenderingEngine, BaseRenderingEngine, TiledRenderingEngine, ContextPoolRenderingEngine, ImageVolume, Surface, getRenderingEngine, getRenderingEngines, getEnabledElement, getEnabledElementByIds, getEnabledElements, getEnabledElementByViewportId, createVolumeActor, createVolumeMapper, cache, eventTarget, triggerEvent, imageLoader, registerImageLoader, volumeLoader, metaData, utilities, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, imageLoadPoolManager as requestPoolManager, imageRetrievalPoolManager, imageLoadPoolManager, getShouldUseCPURendering, setUseCPURendering, setPreferSizeOverAccuracy, resetUseCPURendering, geometryLoader, cornerstoneMeshLoader, ProgressiveRetrieveImages, decimatedVolumeLoader, cornerstoneStreamingImageVolumeLoader, cornerstoneStreamingDynamicImageVolumeLoader, StreamingDynamicImageVolume, StreamingImageVolume, convertMapperToNotSharedMapper, version, };
+export { init, isCornerstoneInitialized, peerImport, resetInitialization, getConfiguration, setConfiguration, getWebWorkerManager, canRenderFloatTextures, Enums, CONSTANTS, Events as EVENTS, Settings, BaseVolumeViewport, VolumeViewport, VolumeViewport3D, Viewport, StackViewport, VideoViewport, WSIViewport, ECGViewport, RenderingEngine, BaseRenderingEngine, TiledRenderingEngine, ContextPoolRenderingEngine, ImageVolume, Surface, getRenderingEngine, getRenderingEngines, getEnabledElement, getEnabledElementByIds, getEnabledElements, getEnabledElementByViewportId, createVolumeActor, createVolumeMapper, cache, eventTarget, triggerEvent, imageLoader, registerImageLoader, volumeLoader, metaData, utilities, setVolumesForViewports, addVolumesToViewports, addImageSlicesToViewports, imageLoadPoolManager as requestPoolManager, imageRetrievalPoolManager, imageLoadPoolManager, getShouldUseCPURendering, setUseCPURendering, setPreferSizeOverAccuracy, resetUseCPURendering, geometryLoader, cornerstoneMeshLoader, ProgressiveRetrieveImages, decimatedVolumeLoader, cornerstoneStreamingImageVolumeLoader, cornerstoneStreamingDynamicImageVolumeLoader, StreamingDynamicImageVolume, StreamingImageVolume, convertMapperToNotSharedMapper, version, };

package/dist/esm/types/ECGViewportProperties.d.ts

@@ -0,0 +1,5 @@
+import type { ViewportProperties } from './ViewportProperties';
+type ECGViewportProperties = ViewportProperties & {
+    visibleChannels?: number[];
+};
+export type { ECGViewportProperties as default };

package/dist/esm/types/ECGViewportTypes.d.ts

@@ -0,0 +1,34 @@
+import type { ViewportType } from '../enums';
+import type Point2 from './Point2';
+export interface InternalECGCamera {
+    panWorld?: Point2;
+    parallelScale?: number;
+}
+export interface ECGViewportInput {
+    id: string;
+    renderingEngineId: string;
+    type: ViewportType;
+    element: HTMLDivElement;
+    sx: number;
+    sy: number;
+    sWidth: number;
+    sHeight: number;
+    defaultOptions: unknown;
+    canvas: HTMLCanvasElement;
+}
+export interface ECGChannel {
+    name: string;
+    data: Int16Array;
+    visible: boolean;
+    min: number;
+    max: number;
+}
+export interface ECGWaveformData {
+    channels: ECGChannel[];
+    numberOfChannels: number;
+    numberOfSamples: number;
+    samplingFrequency: number;
+    bitsAllocated: number;
+    sampleInterpretation: string;
+    multiplexGroupLabel: string;
+}

package/dist/esm/types/IECGViewport.d.ts

@@ -0,0 +1,2 @@
+import type ECGViewport from '../RenderingEngine/ECGViewport';
+export type IECGViewport = ECGViewport;

package/dist/esm/types/index.d.ts

@@ -86,7 +86,10 @@ import type { Color, ColorLUT } from './Color';
 import type VideoViewportProperties from './VideoViewportProperties';
 import type WSIViewportProperties from './WSIViewportProperties';
 import type { IVideoViewport } from './IVideoViewport';
+import type { IECGViewport } from './IECGViewport';
 import type { InternalVideoCamera, VideoViewportInput } from './VideoViewportTypes';
+import type { InternalECGCamera, ECGViewportInput, ECGChannel, ECGWaveformData } from './ECGViewportTypes';
+import type ECGViewportProperties from './ECGViewportProperties';
 import type { ISurface } from './ISurface';
 import type BoundsIJK from './BoundsIJK';
 import type { ImageVolumeProps } from './ImageVolumeProps';
@@ -105,4 +108,4 @@ import type { RenderingEngineModeType } from './RenderingEngineMode';
 import type { VtkOffscreenMultiRenderWindow } from './VtkOffscreenMultiRenderWindow';
 export type * from './MetadataModuleTypes';
 export type * from './InstanceTypes';
-export type { Cornerstone3DConfig, IBaseStreamingImageVolume, ICamera, IStackViewport, IVideoViewport, IWSIViewport, IVolumeViewport, IEnabledElement, ICache, IVolume, IViewportId, IImageVolume, ImageVolumeProps, IDynamicImageVolume, IRenderingEngine, ScalingParameters, PTScaling, IPointsManager, PolyDataPointConfiguration, Scaling, IStreamingImageVolume, IImage, IImageData, IImageCalibration, CPUIImageData, CPUImageData, EventTypes, ImageLoaderFn, VolumeLoaderFn, IRegisterImageLoader, IStreamingVolumeProperties, IViewport, ViewReference, DataSetOptions as ImageSetOptions, ViewPresentation, ViewPresentationSelector, ReferenceCompatibleOptions, ViewReferenceSpecifier, StackViewportProperties, VolumeViewportProperties, ViewportProperties, PublicViewportInput, VolumeActor, Actor, ActorEntry, ImageActor, ICanvasActor, IImageLoadObject, IVolumeLoadObject, IVolumeInput, VolumeInputCallback, IStackInput, StackInputCallback, ViewportPreset, Metadata, OrientationVectors, AABB2, AABB3, Point2, Point3, PointsXYZ, Point4, Mat3, Plane, ViewportInputOptions, VideoViewportProperties, WSIViewportProperties, VOIRange, VOI, DisplayArea, FlipDirection, ICachedImage, ICachedVolume, CPUFallbackEnabledElement, CPUFallbackViewport, CPUFallbackTransform, CPUFallbackColormapData, CPUFallbackViewportDisplayedArea, CPUFallbackColormapsData, CPUFallbackColormap, TransformMatrix2D, CPUFallbackLookupTable, CPUFallbackLUT, CPUFallbackRenderingTools, CustomEventType, ActorSliceRange, ImageSliceData, IGeometry, IGeometryLoadObject, ICachedGeometry, PublicContourSetData, ContourSetData, ContourData, IContourSet, IContour, PublicSurfaceData, SurfaceData, ISurface, PublicMeshData, MeshData, IMesh, RGB, ColormapPublic, ColormapRegistration, PixelDataTypedArray, PixelDataTypedArrayString, ImagePixelModule, ImagePlaneModule, AffineMatrix, ImageLoadListener, InternalVideoCamera, VideoViewportInput, BoundsIJK, BoundsLPS, Color, ColorLUT, VolumeProps, IImageFrame, LocalVolumeOptions, IVoxelManager, IRLEVoxelMap, RLERun, ViewportInput, ImageLoadRequests, IBaseVolumeViewport, GeometryLoaderFn, ScrollOptions, JumpToSliceOptions, Memo, HistoryMemo, VoxelManager, RLEVoxelMap, RenderingEngineModeType, VtkOffscreenMultiRenderWindow, };
+export type { Cornerstone3DConfig, IBaseStreamingImageVolume, ICamera, IStackViewport, IVideoViewport, IECGViewport, IWSIViewport, IVolumeViewport, IEnabledElement, ICache, IVolume, IViewportId, IImageVolume, ImageVolumeProps, IDynamicImageVolume, IRenderingEngine, ScalingParameters, PTScaling, IPointsManager, PolyDataPointConfiguration, Scaling, IStreamingImageVolume, IImage, IImageData, IImageCalibration, CPUIImageData, CPUImageData, EventTypes, ImageLoaderFn, VolumeLoaderFn, IRegisterImageLoader, IStreamingVolumeProperties, IViewport, ViewReference, DataSetOptions as ImageSetOptions, ViewPresentation, ViewPresentationSelector, ReferenceCompatibleOptions, ViewReferenceSpecifier, StackViewportProperties, VolumeViewportProperties, ViewportProperties, PublicViewportInput, VolumeActor, Actor, ActorEntry, ImageActor, ICanvasActor, IImageLoadObject, IVolumeLoadObject, IVolumeInput, VolumeInputCallback, IStackInput, StackInputCallback, ViewportPreset, Metadata, OrientationVectors, AABB2, AABB3, Point2, Point3, PointsXYZ, Point4, Mat3, Plane, ViewportInputOptions, VideoViewportProperties, WSIViewportProperties, VOIRange, VOI, DisplayArea, FlipDirection, ICachedImage, ICachedVolume, CPUFallbackEnabledElement, CPUFallbackViewport, CPUFallbackTransform, CPUFallbackColormapData, CPUFallbackViewportDisplayedArea, CPUFallbackColormapsData, CPUFallbackColormap, TransformMatrix2D, CPUFallbackLookupTable, CPUFallbackLUT, CPUFallbackRenderingTools, CustomEventType, ActorSliceRange, ImageSliceData, IGeometry, IGeometryLoadObject, ICachedGeometry, PublicContourSetData, ContourSetData, ContourData, IContourSet, IContour, PublicSurfaceData, SurfaceData, ISurface, PublicMeshData, MeshData, IMesh, RGB, ColormapPublic, ColormapRegistration, PixelDataTypedArray, PixelDataTypedArrayString, ImagePixelModule, ImagePlaneModule, AffineMatrix, ImageLoadListener, InternalVideoCamera, VideoViewportInput, InternalECGCamera, ECGViewportInput, ECGChannel, ECGWaveformData, ECGViewportProperties, BoundsIJK, BoundsLPS, Color, ColorLUT, VolumeProps, IImageFrame, LocalVolumeOptions, IVoxelManager, IRLEVoxelMap, RLERun, ViewportInput, ImageLoadRequests, IBaseVolumeViewport, GeometryLoaderFn, ScrollOptions, JumpToSliceOptions, Memo, HistoryMemo, VoxelManager, RLEVoxelMap, RenderingEngineModeType, VtkOffscreenMultiRenderWindow, };

package/dist/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.17.5";
+export declare const version = "4.18.1";

package/dist/esm/version.js

@@ -1 +1 @@
-export const version = '4.17.5';
+export const version = '4.18.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "4.17.5",
+  "version": "4.18.1",
   "description": "Cornerstone3D Core",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
@@ -97,5 +97,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "d42f5ee3747c6521ef3af5e9d1faf69c98157396"
+  "gitHead": "1fc5684032269b1b1e3e3733cd891d48c27303f7"
 }