@ohif/app 3.13.0-beta.23 → 3.13.0-beta.25

package/dist/{7537.bundle.5a26371cf1368d0e5cf2.js → 7537.bundle.1a18959ceec98634bc48.js}

@@ -2014,6 +2014,571 @@ function isCompatible(viewPlaneNormal, vector) {
 /* harmony default export */ const RenderingEngine_BaseVolumeViewport = (BaseVolumeViewport);
 
 
+/***/ },
+
+/***/ 95307
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _enums__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(71851);
+/* harmony import */ var _helpers_cpuFallback_rendering_transform__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(45354);
+/* harmony import */ var _utilities_triggerEvent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(69372);
+/* harmony import */ var _Viewport__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10056);
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(40661);
+/* harmony import */ var _metaData__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(74876);
+
+
+
+
+
+
+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__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A {
+    constructor(props) {
+        super({
+            ...props,
+            canvas: props.canvas || (0,_helpers__WEBPACK_IMPORTED_MODULE_4__/* .getOrCreateCanvas */ .oI)(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();
+            (0,_utilities_triggerEvent__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A)(this.element, _enums__WEBPACK_IMPORTED_MODULE_0__.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(_enums__WEBPACK_IMPORTED_MODULE_0__.Events.ELEMENT_DISABLED, this.elementDisabledHandler);
+    }
+    removeEventListeners() {
+        this.canvas.removeEventListener(_enums__WEBPACK_IMPORTED_MODULE_0__.Events.ELEMENT_DISABLED, this.elementDisabledHandler);
+    }
+    elementDisabledHandler() {
+        this.removeEventListeners();
+    }
+    async setEcg(imageId) {
+        this.imageId = imageId;
+        const ecgModule = _metaData__WEBPACK_IMPORTED_MODULE_5__.get(_enums__WEBPACK_IMPORTED_MODULE_0__.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__WEBPACK_IMPORTED_MODULE_5__.get(_enums__WEBPACK_IMPORTED_MODULE_0__.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 _helpers_cpuFallback_rendering_transform__WEBPACK_IMPORTED_MODULE_1__/* .Transform */ .d();
+        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.');
+    }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ECGViewport);
+
+
 /***/ },
 
 /***/ 4785
@@ -11695,7 +12260,8 @@ function getAcquisitionPlaneReformatOrientation(imageOrientationPatient) {
 /* harmony export */   Ay: () => (__WEBPACK_DEFAULT_EXPORT__),
 /* harmony export */   Nw: () => (/* binding */ createCanvas),
 /* harmony export */   oI: () => (/* binding */ getOrCreateCanvas),
-/* harmony export */   p8: () => (/* binding */ EPSILON)
+/* harmony export */   p8: () => (/* binding */ EPSILON),
+/* harmony export */   zV: () => (/* binding */ updateCanvasSizeAndAspectRatio)
 /* harmony export */ });
 /* unused harmony exports createViewportElement, setCanvasCreator */
 const VIEWPORT_ELEMENT = 'viewport-element';
@@ -11730,6 +12296,32 @@ function createViewportElement(element) {
 function setCanvasCreator(canvasCreatorArg) {
     canvasCreator = canvasCreatorArg;
 }
+function updateCanvasSizeAndAspectRatio(canvas, extentOrOffscreen) {
+    if (extentOrOffscreen === undefined) {
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        const rect = canvas.getBoundingClientRect();
+        const w = Math.round(rect.width * devicePixelRatio);
+        const h = Math.round(rect.height * devicePixelRatio);
+        if (w > 0 && h > 0) {
+            canvas.width = w;
+            canvas.height = h;
+            canvas.style.aspectRatio = `${w} / ${h}`;
+        }
+        return undefined;
+    }
+    const { width: targetW, height: targetH } = extentOrOffscreen;
+    if (targetW < 1 || targetH < 1) {
+        return false;
+    }
+    const needsUpdate = canvas.width !== targetW || canvas.height !== targetH;
+    if (needsUpdate) {
+        canvas.width = targetW;
+        canvas.height = targetH;
+        canvas.style.aspectRatio = `${targetW} / ${targetH}`;
+        return true;
+    }
+    return false;
+}
 function getOrCreateCanvas(element) {
     const canvasSelector = `canvas.${CANVAS_CSS_CLASS}`;
     const viewportElement = `div.${VIEWPORT_ELEMENT}`;
@@ -11743,8 +12335,11 @@ function getOrCreateCanvas(element) {
     const devicePixelRatio = window.devicePixelRatio || 1;
     const width = Math.ceil(rect.width * devicePixelRatio);
     const height = Math.ceil(rect.height * devicePixelRatio);
-    canvas.width = width;
-    canvas.height = height;
+    if (width > 0 && height > 0) {
+        canvas.width = width;
+        canvas.height = height;
+        canvas.style.aspectRatio = `${width} / ${height}`;
+    }
     return canvas;
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (getOrCreateCanvas);
@@ -11765,7 +12360,7 @@ __webpack_require__.d(__webpack_exports__, {
   A7: () => (/* reexport */ helpers_setVolumesForViewports)
 });
 
-// UNUSED EXPORTS: EPSILON, createCanvas, createViewportElement, createVolumeActor, createVolumeMapper, setCanvasCreator, volumeNewImageEventDispatcher
+// UNUSED EXPORTS: EPSILON, createCanvas, createViewportElement, createVolumeActor, createVolumeMapper, setCanvasCreator, updateCanvasSizeAndAspectRatio, volumeNewImageEventDispatcher
 
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/RenderingEngine/helpers/createVolumeActor.js + 2 modules
 var createVolumeActor = __webpack_require__(11836);
@@ -12024,6 +12619,8 @@ function _isCurrentImagePTPrescaled(modality, imageVolume) {
 /* harmony import */ var _VolumeViewport3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(40893);
 /* harmony import */ var _VideoViewport__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(32501);
 /* harmony import */ var _WSIViewport__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(81466);
+/* harmony import */ var _ECGViewport__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(95307);
+
 
 
 
@@ -12037,6 +12634,7 @@ const viewportTypeToViewportClass = {
     [_enums_ViewportType__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.VOLUME_3D]: _VolumeViewport3D__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A,
     [_enums_ViewportType__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.VIDEO]: _VideoViewport__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A,
     [_enums_ViewportType__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.WHOLE_SLIDE]: _WSIViewport__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A,
+    [_enums_ViewportType__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A.ECG]: _ECGViewport__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A,
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (viewportTypeToViewportClass);
 
@@ -12125,7 +12723,7 @@ __webpack_require__.d(__webpack_exports__, {
   PX: () => (/* reexport */ VolumeViewport/* default */.A)
 });
 
-// UNUSED EXPORTS: BaseRenderingEngine, ContextPoolRenderingEngine, EPSILON, RenderingEngine, TiledRenderingEngine, VolumeViewport3D, addImageSlicesToViewports, addVolumesToViewports, createCanvas, createViewportElement, createVolumeActor, createVolumeMapper, default, getOrCreateCanvas, getRenderingEngine, setCanvasCreator, setVolumesForViewports, volumeNewImageEventDispatcher
+// UNUSED EXPORTS: BaseRenderingEngine, ContextPoolRenderingEngine, EPSILON, RenderingEngine, TiledRenderingEngine, VolumeViewport3D, addImageSlicesToViewports, addVolumesToViewports, createCanvas, createViewportElement, createVolumeActor, createVolumeMapper, default, getOrCreateCanvas, getRenderingEngine, setCanvasCreator, setVolumesForViewports, updateCanvasSizeAndAspectRatio, volumeNewImageEventDispatcher
 
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/init.js + 2 modules
 var init = __webpack_require__(26896);
@@ -12296,6 +12894,7 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
         const viewportsDrivenByVtkJs = viewports.filter((vp) => (0,viewportTypeUsesCustomRenderingPipeline/* default */.A)(vp.type) === false);
         const canvasesDrivenByVtkJs = viewportsDrivenByVtkJs.map((vp) => vp.canvas);
         const canvas = (0,getOrCreateCanvas/* default */.Ay)(viewportInputEntry.element);
+        (0,getOrCreateCanvas/* updateCanvasSizeAndAspectRatio */.zV)(canvas);
         canvasesDrivenByVtkJs.push(canvas);
         const internalViewportEntry = { ...viewportInputEntry, canvas };
         this.addVtkjsDrivenViewport(internalViewportEntry);
@@ -12362,12 +12961,7 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
     setVtkjsDrivenViewports(viewportInputEntries) {
         if (viewportInputEntries.length) {
             const vtkDrivenCanvases = viewportInputEntries.map((vp) => (0,getOrCreateCanvas/* default */.Ay)(vp.element));
-            vtkDrivenCanvases.forEach((canvas) => {
-                const devicePixelRatio = window.devicePixelRatio || 1;
-                const rect = canvas.getBoundingClientRect();
-                canvas.width = rect.width * devicePixelRatio;
-                canvas.height = rect.height * devicePixelRatio;
-            });
+            vtkDrivenCanvases.forEach((canvas) => (0,getOrCreateCanvas/* updateCanvasSizeAndAspectRatio */.zV)(canvas));
             for (let i = 0; i < viewportInputEntries.length; i++) {
                 const vtkDrivenViewportInputEntry = viewportInputEntries[i];
                 const canvas = vtkDrivenCanvases[i];
@@ -12380,15 +12974,39 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
         }
     }
     _resizeVTKViewports(vtkDrivenViewports, keepCamera = true, immediate = true) {
-        const canvasesDrivenByVtkJs = vtkDrivenViewports.map((vp) => {
-            return (0,getOrCreateCanvas/* default */.Ay)(vp.element);
-        });
-        canvasesDrivenByVtkJs.forEach((canvas) => {
-            const devicePixelRatio = window.devicePixelRatio || 1;
-            canvas.width = canvas.clientWidth * devicePixelRatio;
-            canvas.height = canvas.clientHeight * devicePixelRatio;
-        });
-        if (canvasesDrivenByVtkJs.length) {
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        const viewportsNeedingResize = [];
+        for (const vp of vtkDrivenViewports) {
+            const canvas = (0,getOrCreateCanvas/* default */.Ay)(vp.element);
+            const displayedWidth = Math.round(canvas.clientWidth * devicePixelRatio);
+            const displayedHeight = Math.round(canvas.clientHeight * devicePixelRatio);
+            if (displayedWidth === 0 || displayedHeight === 0) {
+                continue;
+            }
+            const renderedWidth = canvas.width;
+            const renderedHeight = canvas.height;
+            if (displayedWidth === renderedWidth &&
+                displayedHeight === renderedHeight) {
+                continue;
+            }
+            viewportsNeedingResize.push(vp);
+        }
+        if (viewportsNeedingResize.length === 0) {
+            return;
+        }
+        if (this._animationFrameSet) {
+            return;
+        }
+        for (const vp of viewportsNeedingResize) {
+            const canvas = (0,getOrCreateCanvas/* default */.Ay)(vp.element);
+            const displayedWidth = Math.round(canvas.clientWidth * devicePixelRatio);
+            const displayedHeight = Math.round(canvas.clientHeight * devicePixelRatio);
+            const targetWidth = Math.max(BaseRenderingEngine/* VIEWPORT_MIN_SIZE */.i, displayedWidth);
+            const targetHeight = Math.max(BaseRenderingEngine/* VIEWPORT_MIN_SIZE */.i, displayedHeight);
+            vp.sWidth = targetWidth;
+            vp.sHeight = targetHeight;
+        }
+        if (vtkDrivenViewports.length) {
             this._resize(vtkDrivenViewports);
         }
         vtkDrivenViewports.forEach((vp) => {
@@ -12430,6 +13048,10 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
         return eventDetail;
     }
     _renderViewportWithContext(viewport, offscreenMultiRenderWindow, offScreenCanvasContainer) {
+        if (viewport.canvas.clientWidth === 0 ||
+            viewport.canvas.clientHeight === 0) {
+            return;
+        }
         if (viewport.sWidth < BaseRenderingEngine/* VIEWPORT_MIN_SIZE */.i ||
             viewport.sHeight < BaseRenderingEngine/* VIEWPORT_MIN_SIZE */.i) {
             console.warn('Viewport is too small', viewport.sWidth, viewport.sHeight);
@@ -12459,8 +13081,8 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
         const renderer = offscreenMultiRenderWindow.getRenderer(viewport.id);
         const contextIndex = this.contextPool.getContextIndexForViewport(viewport.id);
         const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
-        const viewportWidth = viewport.canvas.width;
-        const viewportHeight = viewport.canvas.height;
+        const viewportWidth = viewport.sWidth;
+        const viewportHeight = viewport.sHeight;
         const xEnd = Math.min(1, viewportWidth / maxSize.width);
         const yEnd = Math.min(1, viewportHeight / maxSize.height);
         renderer.setViewport(0, 0, xEnd, yEnd);
@@ -12494,7 +13116,7 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
         if (contextIndex === undefined) {
             return;
         }
-        const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.canvas.width, viewport.canvas.height);
+        const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.sWidth, viewport.sHeight);
         if (!maxSizeChanged) {
             return;
         }
@@ -12509,7 +13131,9 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
     }
     _copyToOnscreenCanvas(viewport, offScreenCanvas) {
         const { element, canvas, id: viewportId, renderingEngineId, suppressEvents, } = viewport;
-        const { width: dWidth, height: dHeight } = canvas;
+        const dWidth = viewport.sWidth;
+        const dHeight = viewport.sHeight;
+        (0,getOrCreateCanvas/* updateCanvasSizeAndAspectRatio */.zV)(canvas, { width: dWidth, height: dHeight });
         const onScreenContext = canvas.getContext('2d');
         const contextIndex = this.contextPool.getContextIndexForViewport(viewportId);
         const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
@@ -12528,10 +13152,8 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
         for (const viewport of viewportsDrivenByVtkJs) {
             viewport.sx = 0;
             viewport.sy = 0;
-            viewport.sWidth = viewport.canvas.width;
-            viewport.sHeight = viewport.canvas.height;
             const contextIndex = this.contextPool.getContextIndexForViewport(viewport.id);
-            const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.canvas.width, viewport.canvas.height);
+            const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.sWidth, viewport.sHeight);
             if (maxSizeChanged) {
                 contextsToResize.add(contextIndex);
             }
@@ -12539,8 +13161,8 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine/* default */.A {
             const { context: offscreenMultiRenderWindow } = contextData;
             const renderer = offscreenMultiRenderWindow.getRenderer(viewport.id);
             const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
-            const xEnd = Math.min(1, viewport.canvas.width / maxSize.width);
-            const yEnd = Math.min(1, viewport.canvas.height / maxSize.height);
+            const xEnd = Math.min(1, viewport.sWidth / maxSize.width);
+            const yEnd = Math.min(1, viewport.sHeight / maxSize.height);
             renderer.setViewport(0, 0, xEnd, yEnd);
         }
         contextsToResize.forEach((contextIndex) => {
@@ -24251,6 +24873,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";
@@ -24401,6 +25024,7 @@ var ViewportType;
     ViewportType["VOLUME_3D"] = "volume3d";
     ViewportType["VIDEO"] = "video";
     ViewportType["WHOLE_SLIDE"] = "wholeSlide";
+    ViewportType["ECG"] = "ecg";
 })(ViewportType || (ViewportType = {}));
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ViewportType);
 
@@ -35684,7 +36308,7 @@ function uuidv4() {
 
 "use strict";
 /* unused harmony export version */
-const version = '4.17.2';
+const version = '4.18.2';
 
 
 /***/ },