@cornerstonejs/core 4.22.13 → 5.0.0

package/dist/esm/RenderingEngine/ContextPoolRenderingEngine.js

@@ -5,11 +5,9 @@ import Events from '../enums/Events';
 import eventTarget from '../eventTarget';
 import triggerEvent from '../utilities/triggerEvent';
 import ViewportType from '../enums/ViewportType';
-import VolumeViewport from './VolumeViewport';
-import StackViewport from './StackViewport';
-import VolumeViewport3D from './VolumeViewport3D';
-import viewportTypeUsesCustomRenderingPipeline from './helpers/viewportTypeUsesCustomRenderingPipeline';
+import viewportTypeUsesCustomRenderingPipeline, { viewportUsesCustomRenderingPipeline, } from './helpers/viewportTypeUsesCustomRenderingPipeline';
 import getOrCreateCanvas, { updateCanvasSizeAndAspectRatio, } from './helpers/getOrCreateCanvas';
+import { getViewportClassForInput } from './helpers/viewportTypeToViewportClass';
 class ContextPoolRenderingEngine extends BaseRenderingEngine {
     constructor(id) {
         super(id);
@@ -36,11 +34,17 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
                 }
             });
         };
-        const { rendering } = getConfiguration();
-        const { webGlContextCount } = rendering;
         if (!this.useCPURendering) {
+            this.ensureContextPool();
+        }
+    }
+    ensureContextPool() {
+        if (!this.contextPool) {
+            const { rendering } = getConfiguration();
+            const { webGlContextCount } = rendering;
             this.contextPool = new WebGLContextPool(webGlContextCount);
         }
+        return this.contextPool;
     }
     enableVTKjsDrivenViewport(viewportInputEntry) {
         const viewports = this._getViewportsAsArray();
@@ -53,18 +57,19 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         this.addVtkjsDrivenViewport(internalViewportEntry);
     }
     addVtkjsDrivenViewport(viewportInputEntry) {
+        const contextPool = this.ensureContextPool();
         const { element, canvas, viewportId, type, defaultOptions } = viewportInputEntry;
         element.tabIndex = -1;
         let contextIndex = 0;
         if (type === ViewportType.STACK) {
-            const contexts = this.contextPool.getAllContexts();
+            const contexts = contextPool.getAllContexts();
             contextIndex = this._viewports.size % contexts.length;
         }
-        this.contextPool.assignViewportToContext(viewportId, contextIndex);
-        this.contextPool.updateViewportSize(viewportId, canvas.width, canvas.height);
-        const contextData = this.contextPool.getContextByIndex(contextIndex);
+        contextPool.assignViewportToContext(viewportId, contextIndex);
+        contextPool.updateViewportSize(viewportId, canvas.width, canvas.height);
+        const contextData = contextPool.getContextByIndex(contextIndex);
         const { context: offscreenMultiRenderWindow, container } = contextData;
-        const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
+        const maxSize = contextPool.getMaxSizeForContext(contextIndex);
         container.width = maxSize.width;
         container.height = maxSize.height;
         offscreenMultiRenderWindow.resize();
@@ -87,20 +92,13 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
             sHeight: canvas.height,
             defaultOptions: defaultOptions || {},
         };
-        let viewport;
-        if (type === ViewportType.STACK) {
-            viewport = new StackViewport(viewportInput);
-        }
-        else if (type === ViewportType.ORTHOGRAPHIC ||
-            type === ViewportType.PERSPECTIVE) {
-            viewport = new VolumeViewport(viewportInput);
-        }
-        else if (type === ViewportType.VOLUME_3D) {
-            viewport = new VolumeViewport3D(viewportInput);
-        }
-        else {
+        const ViewportClass = getViewportClassForInput(viewportInputEntry);
+        if (!ViewportClass) {
             throw new Error(`Viewport Type ${type} is not supported`);
         }
+        const viewport = new ViewportClass(viewportInput);
+        viewport.requestedType =
+            viewportInputEntry.requestedType ?? type;
         this._viewports.set(viewportId, viewport);
         const eventDetail = {
             element,
@@ -163,10 +161,17 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
             this._resize(vtkDrivenViewports);
         }
         vtkDrivenViewports.forEach((vp) => {
+            vp.resize?.();
             const prevCamera = vp.getCamera();
-            const rotation = vp.getRotation();
+            const rotation = vp.getRotation?.() ?? 0;
             const { flipHorizontal } = prevCamera;
-            vp.resetCameraForResize();
+            const resizeResetViewport = vp;
+            if (resizeResetViewport.resetViewStateForResize) {
+                resizeResetViewport.resetViewStateForResize();
+            }
+            else {
+                resizeResetViewport.resetCameraForResize?.();
+            }
             const displayArea = vp.getDisplayArea();
             if (keepCamera) {
                 if (displayArea) {
@@ -187,11 +192,11 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         }
     }
     renderViewportUsingCustomOrVtkPipeline(viewport) {
-        if (viewportTypeUsesCustomRenderingPipeline(viewport.type)) {
+        if (viewportUsesCustomRenderingPipeline(viewport)) {
             const eventDetail = viewport.customRenderViewportToCanvas();
             return eventDetail;
         }
-        if (this.useCPURendering) {
+        if (!this.contextPool) {
             throw new Error('GPU not available, and using a viewport with no custom render pipeline.');
         }
         const assignedContextIndex = this.contextPool.getContextIndexForViewport(viewport.id);
@@ -210,10 +215,10 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
             console.warn('Viewport is too small', viewport.sWidth, viewport.sHeight);
             return;
         }
-        if (viewportTypeUsesCustomRenderingPipeline(viewport.type)) {
+        if (viewportUsesCustomRenderingPipeline(viewport)) {
             return viewport.customRenderViewportToCanvas();
         }
-        if (this.useCPURendering) {
+        if (!this.contextPool) {
             throw new Error('GPU not available, and using a viewport with no custom render pipeline.');
         }
         if (!offscreenMultiRenderWindow.getRenderer(viewport.id)) {
@@ -241,7 +246,8 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         renderer.setViewport(0, 0, xEnd, yEnd);
         const allRenderers = offscreenMultiRenderWindow.getRenderers();
         allRenderers.forEach(({ renderer: r, id }) => {
-            r.setDraw(id === viewport.id);
+            const baseId = id.split('::')[0];
+            r.setDraw(baseId === viewport.id);
         });
         const widgetRenderers = this.getWidgetRenderers();
         widgetRenderers.forEach((viewportId, renderer) => {
@@ -349,7 +355,13 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
     }
     getRenderer(viewportId) {
         const contextIndex = this.contextPool?.getContextIndexForViewport(viewportId);
+        if (contextIndex === undefined || !this.contextPool) {
+            return;
+        }
         const contextData = this.contextPool.getContextByIndex(contextIndex);
+        if (!contextData) {
+            return;
+        }
         const { context: offscreenMultiRenderWindow } = contextData;
         return offscreenMultiRenderWindow.getRenderer(viewportId);
     }
@@ -360,7 +372,7 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         }
         super.disableElement(viewportId);
         if (!viewportTypeUsesCustomRenderingPipeline(viewport.type) &&
-            !this.useCPURendering) {
+            this.contextPool) {
             const contextIndex = this.contextPool.getContextIndexForViewport(viewportId);
             if (contextIndex !== undefined) {
                 const contextData = this.contextPool.getContextByIndex(contextIndex);
@@ -373,17 +385,23 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         }
     }
     destroy() {
+        super.destroy();
         if (this.contextPool) {
             this.contextPool.destroy();
         }
-        super.destroy();
     }
     getOffscreenMultiRenderWindow(viewportId) {
-        if (this.useCPURendering) {
-            throw new Error('Offscreen multi render window is not available when using CPU rendering.');
+        if (!this.contextPool) {
+            throw new Error('Offscreen multi render window is not available.');
         }
         const contextIndex = this.contextPool.getContextIndexForViewport(viewportId);
+        if (contextIndex === undefined) {
+            throw new Error(`Offscreen multi render window is not available for viewport ${viewportId}.`);
+        }
         const contextData = this.contextPool.getContextByIndex(contextIndex);
+        if (!contextData) {
+            throw new Error(`Offscreen multi render window is not available for viewport ${viewportId}.`);
+        }
         return contextData.context;
     }
 }

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

@@ -78,7 +78,7 @@ declare class ECGViewport extends Viewport {
             indexToWorld: (point: Point3) => Point3;
         };
         hasPixelSpacing: boolean;
-        calibration: import("../types").IImageCalibration;
+        calibration: import("packages/metadata/dist/esm").IImageCalibration;
         preScale: {
             scaled: boolean;
         };

package/dist/esm/RenderingEngine/ECGViewport.js

@@ -1,31 +1,10 @@
-import { Events as EVENTS, MetadataModules } from '../enums';
+import { Events as EVENTS } 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;
+import { ECG_CHANNEL_SPACING, computeECGChannelLayouts, computeECGHeight, drawECGGrid, drawECGLabels, drawECGTraces, ECG_RENDERING_COLORS, ECG_SECONDS_WIDTH, getVisibleECGChannelsByFlag, loadECGWaveform, } from '../utilities/ECGUtilities';
 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({
@@ -155,7 +134,7 @@ class ECGViewport extends Viewport {
             const m = transform.getMatrix();
             const ctx = this.canvasContext;
             ctx.resetTransform();
-            ctx.fillStyle = COLOR_BACKGROUND;
+            ctx.fillStyle = ECG_RENDERING_COLORS.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();
@@ -195,33 +174,19 @@ class ECGViewport extends Viewport {
     }
     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 });
-        }
+        const { waveform, calibration } = await loadECGWaveform(imageId);
+        this.channels = waveform.channels.map((channel) => ({
+            ...channel,
+            visible: true,
+        }));
         this.waveformData = {
+            ...waveform,
             channels: this.channels,
-            numberOfChannels,
-            numberOfSamples,
-            samplingFrequency,
-            bitsAllocated,
-            sampleInterpretation,
-            multiplexGroupLabel,
+            multiplexGroupLabel: waveform.multiplexGroupLabel,
         };
-        this.calibration = metaData.get(MetadataModules.CALIBRATION, imageId);
-        this.ecgWidth = Math.ceil((numberOfSamples * SECONDS_WIDTH) / samplingFrequency);
+        this.calibration = calibration;
+        this.ecgWidth = Math.ceil((this.waveformData.numberOfSamples * ECG_SECONDS_WIDTH) /
+            this.waveformData.samplingFrequency);
         this.computeChannelScale();
         this.recalculateHeight();
         this.refreshRenderValues();
@@ -249,7 +214,7 @@ class ECGViewport extends Viewport {
         return { width: this.ecgWidth, height: this.ecgHeight };
     }
     computeChannelScale() {
-        const visibleChannels = this.channels.filter((c) => c.visible && c.data.length > 0);
+        const visibleChannels = getVisibleECGChannelsByFlag(this.channels);
         if (visibleChannels.length === 0 || this.ecgWidth === 0) {
             this.channelScale = 0;
             return;
@@ -263,36 +228,18 @@ class ECGViewport extends Viewport {
             ? this.canvas.offsetHeight / this.canvas.offsetWidth
             : 2 / 3;
         const targetTotalHeight = this.ecgWidth * canvasAspect;
-        const totalSpacing = CHANNEL_SPACING * visibleChannels.length;
+        const totalSpacing = ECG_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;
+        this.ecgHeight = computeECGHeight(getVisibleECGChannelsByFlag(this.channels), this.channelScale);
     }
     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;
+        return computeECGChannelLayouts({
+            visibleChannels: getVisibleECGChannelsByFlag(this.channels),
+            channelScale: this.channelScale,
+        });
     }
     setProperties(props) {
         if (props.visibleChannels !== undefined) {
@@ -335,7 +282,7 @@ class ECGViewport extends Viewport {
                 this.ecgCamera.panWorld[1] - panWorldDelta[1],
             ];
         }
-        this.canvasContext.fillStyle = COLOR_BACKGROUND;
+        this.canvasContext.fillStyle = ECG_RENDERING_COLORS.background;
         this.canvasContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
         this.renderFrame();
     }
@@ -416,96 +363,22 @@ class ECGViewport extends Viewport {
         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();
+        drawECGGrid(ctx, {
+            ecgWidth: this.ecgWidth,
+            ecgHeight: this.ecgHeight,
+            channelScale: this.channelScale,
+        });
     }
     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();
-        }
+        drawECGTraces({
+            ctx,
+            layouts,
+            ecgWidth: this.ecgWidth,
+            channelScale: this.channelScale,
+        });
     }
     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);
-        }
+        drawECGLabels(ctx, layouts, this.getWorldToCanvasRatio());
     }
     getImageData() {
         if (!this.waveformData) {

package/dist/esm/RenderingEngine/GenericViewport/DefaultRenderPathResolver.d.ts

@@ -0,0 +1,10 @@
+import type { BaseViewportRenderContext, DataAddOptions, LoadedData, RenderPathDefinition, RenderPathResolver } from './ViewportArchitectureTypes';
+import type ViewportType from '../../enums/ViewportType';
+export declare class DefaultRenderPathResolver implements RenderPathResolver {
+    private paths;
+    constructor(paths?: ReadonlyArray<RenderPathDefinition>);
+    register<TRootContext extends BaseViewportRenderContext, TAdapterContext extends BaseViewportRenderContext>(path: RenderPathDefinition<TRootContext, TAdapterContext>): void;
+    private add;
+    resolve<TContext extends BaseViewportRenderContext>(type: ViewportType, data: LoadedData, options: DataAddOptions): RenderPathDefinition<TContext, BaseViewportRenderContext>;
+}
+export declare const defaultRenderPathResolver: DefaultRenderPathResolver;

package/dist/esm/RenderingEngine/GenericViewport/DefaultRenderPathResolver.js

@@ -0,0 +1,25 @@
+export class DefaultRenderPathResolver {
+    constructor(paths = []) {
+        this.paths = [];
+        paths.forEach((path) => this.add(path));
+    }
+    register(path) {
+        this.add(path);
+    }
+    add(path) {
+        const existingPath = this.paths.find((candidate) => candidate.id === path.id);
+        if (existingPath) {
+            console.debug(`[DefaultRenderPathResolver] Duplicate render path registration ignored for "${path.id}"`);
+            return;
+        }
+        this.paths.push(path);
+    }
+    resolve(type, data, options) {
+        const path = this.paths.find((candidate) => candidate.type === type && candidate.matches(data, options));
+        if (!path) {
+            throw new Error(`No render path for ${type}/${data.type}/${options.renderMode}`);
+        }
+        return path;
+    }
+}
+export const defaultRenderPathResolver = new DefaultRenderPathResolver();

package/dist/esm/RenderingEngine/GenericViewport/ECG/CanvasECGRenderPath.d.ts

@@ -0,0 +1,17 @@
+import { ViewportType } from '../../../enums';
+import type { DataAddOptions, LoadedData, RenderPathAttachment, RenderPathDefinition, RenderPath } from '../ViewportArchitectureTypes';
+import type { ECGCanvasRenderContext, ECGDataPresentation } from './ECGViewportTypes';
+export declare class CanvasECGRenderPath implements RenderPath<ECGCanvasRenderContext> {
+    addData(ctx: ECGCanvasRenderContext, data: LoadedData, options: DataAddOptions): Promise<RenderPathAttachment<ECGDataPresentation>>;
+    private updateDataPresentation;
+    private applyViewState;
+    private getFrameOfReferenceUID;
+    private render;
+    private removeData;
+}
+export declare class CanvasECGPath implements RenderPathDefinition<ECGCanvasRenderContext> {
+    readonly id = "ecg:canvas-signal";
+    readonly type = ViewportType.ECG_NEXT;
+    matches(data: LoadedData, options: DataAddOptions): boolean;
+    createRenderPath(): CanvasECGRenderPath;
+}

package/dist/esm/RenderingEngine/GenericViewport/ECG/CanvasECGRenderPath.js

@@ -0,0 +1,144 @@
+import { Events as EVENTS, ViewportType } from '../../../enums';
+import triggerEvent from '../../../utilities/triggerEvent';
+import { computeECGChannelLayouts, computeECGRenderMetrics, drawECGGrid, drawECGLabels, drawECGTraces, ensureECGCanvasSize, getVisibleECGChannels, } from '../../../utilities/ECGUtilities';
+import { resolveECGCanvasMapping } from './ecgViewportCamera';
+export class CanvasECGRenderPath {
+    async addData(ctx, data, options) {
+        const waveform = data;
+        const rendering = {
+            renderMode: 'signal2d',
+            canvas: ctx.canvas,
+            canvasContext: ctx.canvasContext,
+            metrics: {
+                ecgWidth: 1,
+                ecgHeight: 1,
+                channelScale: 1,
+                worldToCanvasRatio: 1,
+                xOffsetCanvas: 0,
+                yOffsetCanvas: 0,
+            },
+        };
+        return {
+            rendering,
+            updateDataPresentation: (props) => {
+                this.updateDataPresentation(rendering, props);
+            },
+            applyViewState: (camera) => {
+                this.applyViewState(rendering, camera);
+            },
+            getFrameOfReferenceUID: () => {
+                return this.getFrameOfReferenceUID(ctx);
+            },
+            render: () => {
+                this.render(ctx, rendering, waveform);
+            },
+            removeData: () => {
+                this.removeData();
+            },
+        };
+    }
+    updateDataPresentation(rendering, props) {
+        rendering.currentDataPresentation = props;
+    }
+    applyViewState(rendering, camera) {
+        rendering.currentCamera = camera;
+    }
+    getFrameOfReferenceUID(ctx) {
+        return `ecg-viewport-${ctx.viewportId}`;
+    }
+    render(ctx, rendering, waveform) {
+        drawFrame(ctx, rendering, waveform);
+    }
+    removeData() {
+    }
+}
+export class CanvasECGPath {
+    constructor() {
+        this.id = 'ecg:canvas-signal';
+        this.type = ViewportType.ECG_NEXT;
+    }
+    matches(data, options) {
+        return data.type === 'ecg' && options.renderMode === 'signal2d';
+    }
+    createRenderPath() {
+        return new CanvasECGRenderPath();
+    }
+}
+function getEffectiveTransform(metrics, camera, canvas) {
+    const mapping = resolveECGCanvasMapping({
+        metrics,
+        camera,
+        canvas,
+    });
+    return {
+        effectiveRatio: mapping.effectiveRatio,
+        xOffset: mapping.xOffset,
+        yOffset: mapping.yOffset,
+    };
+}
+function computeTimeWindow(waveform, camera) {
+    const durationMs = (waveform.numberOfSamples / waveform.samplingFrequency) * 1000;
+    const startMs = Math.max(0, Math.min(camera.timeRange[0], durationMs));
+    const requestedEnd = Math.max(startMs + 1, camera.timeRange[1]);
+    const endMs = Math.max(startMs + 1, Math.min(requestedEnd, durationMs));
+    const startIndex = Math.max(0, Math.min(waveform.numberOfSamples - 1, Math.floor((startMs / 1000) * waveform.samplingFrequency)));
+    const endIndex = Math.max(startIndex + 1, Math.min(waveform.numberOfSamples, Math.ceil((endMs / 1000) * waveform.samplingFrequency)));
+    return {
+        startMs,
+        endMs,
+        startIndex,
+        endIndex,
+    };
+}
+function drawFrame(ecgCtx, ecgRendering, waveform) {
+    const { canvas, canvasContext, currentCamera, currentDataPresentation } = ecgRendering;
+    if (!currentCamera) {
+        return;
+    }
+    const visibleChannels = getVisibleECGChannels(waveform.channels, currentDataPresentation?.visibleChannels);
+    ensureECGCanvasSize(canvas);
+    const metrics = computeECGRenderMetrics({
+        canvas,
+        visibleChannels,
+        windowMs: Math.max(1, currentCamera.timeRange[1] - currentCamera.timeRange[0]),
+        valueRange: currentCamera.valueRange,
+    });
+    const layouts = computeECGChannelLayouts({
+        visibleChannels,
+        channelScale: metrics.channelScale,
+    });
+    const timeWindow = computeTimeWindow(waveform, currentCamera);
+    const dpr = window.devicePixelRatio || 1;
+    ecgRendering.metrics = metrics;
+    const { effectiveRatio, xOffset, yOffset } = getEffectiveTransform(metrics, currentCamera, canvas);
+    canvasContext.resetTransform();
+    canvasContext.fillStyle = '#000000';
+    canvasContext.fillRect(0, 0, canvas.width, canvas.height);
+    if (currentDataPresentation?.visible === false) {
+        return;
+    }
+    canvasContext.globalAlpha = currentDataPresentation?.opacity ?? 1;
+    canvasContext.setTransform(effectiveRatio * dpr, 0, 0, effectiveRatio * dpr, xOffset * dpr, yOffset * dpr);
+    drawECGGrid(canvasContext, metrics, {
+        showGrid: currentDataPresentation?.showGrid,
+    });
+    drawECGTraces({
+        ctx: canvasContext,
+        layouts,
+        ecgWidth: metrics.ecgWidth,
+        channelScale: metrics.channelScale,
+        startIndex: timeWindow.startIndex,
+        endIndex: timeWindow.endIndex,
+        lineWidth: currentDataPresentation?.lineWidth,
+        amplitudeScale: currentDataPresentation?.amplitudeScale,
+    });
+    drawECGLabels(canvasContext, layouts, metrics.worldToCanvasRatio);
+    canvasContext.resetTransform();
+    canvasContext.globalAlpha = 1;
+    triggerEvent(ecgCtx.element, EVENTS.IMAGE_RENDERED, {
+        element: ecgCtx.element,
+        viewportId: ecgCtx.viewportId,
+        renderingEngineId: ecgCtx.renderingEngineId,
+        rendering: ecgRendering,
+    });
+}

package/dist/esm/RenderingEngine/GenericViewport/ECG/DefaultECGDataProvider.d.ts

@@ -0,0 +1,5 @@
+import type { DataProvider, LoadedData } from '../ViewportArchitectureTypes';
+import type { ECGWaveformPayload } from './ECGViewportTypes';
+export declare class DefaultECGDataProvider implements DataProvider {
+    load(dataId: string): Promise<LoadedData<ECGWaveformPayload>>;
+}

package/dist/esm/RenderingEngine/GenericViewport/ECG/DefaultECGDataProvider.js

@@ -0,0 +1,13 @@
+import { loadECGWaveform } from '../../../utilities/ECGUtilities';
+import { getGenericViewportSourceDataId } from '../genericViewportDataSetAccess';
+export class DefaultECGDataProvider {
+    async load(dataId) {
+        const sourceDataId = getGenericViewportSourceDataId(dataId);
+        const { waveform } = await loadECGWaveform(sourceDataId);
+        return {
+            id: dataId,
+            type: 'ecg',
+            ...waveform,
+        };
+    }
+}