@cornerstonejs/core 5.0.0-beta.1 → 5.0.0

package/dist/esm/RenderingEngine/CanvasActor/index.js

@@ -5,6 +5,8 @@ export default class CanvasActor {
         this.canvasProperties = new CanvasProperties(this);
         this.visibility = false;
         this.mapper = new CanvasMapper(this);
+        this.rasterDirty = true;
+        this.hasCachedRaster = false;
         this.className = 'CanvasActor';
         this.derivedImage = derivedImage;
         this.viewport = viewport;
@@ -14,53 +16,54 @@ export default class CanvasActor {
         let { canvas } = this;
         if (!canvas || canvas.width !== width || canvas.height !== height) {
             this.canvas = canvas = new window.OffscreenCanvas(width, height);
+            this.cachedImageData = undefined;
+            this.rasterDirty = true;
+        }
+        if (!this.rasterDirty) {
+            if (this.hasCachedRaster) {
+                context.drawImage(canvas, 0, 0);
+            }
+            return;
         }
         const localContext = canvas.getContext('2d');
-        const imageData = localContext.createImageData(width, height);
+        let imageData = this.cachedImageData;
+        if (!imageData) {
+            imageData = localContext.createImageData(width, height);
+            this.cachedImageData = imageData;
+        }
         const { data: imageArray } = imageData;
         imageArray.fill(0);
         const { map } = voxelManager;
-        let dirtyX = Infinity;
-        let dirtyY = Infinity;
-        let dirtyX2 = -Infinity;
-        let dirtyY2 = -Infinity;
+        let hasVisiblePixels = false;
         for (let y = 0; y < height; y++) {
             const row = map.getRun(y, 0);
             if (!row) {
                 continue;
             }
-            dirtyY = Math.min(dirtyY, y);
-            dirtyY2 = Math.max(dirtyY2, y);
             const baseOffset = (y * width) << 2;
-            let indicesToDelete;
             for (const run of row) {
                 const { start, end, value: segmentIndex } = run;
                 if (segmentIndex === 0) {
-                    indicesToDelete ||= [];
-                    indicesToDelete.push(row.indexOf(run));
                     continue;
                 }
-                dirtyX = Math.min(dirtyX, start);
-                dirtyX2 = Math.max(dirtyX2, end);
-                const rgb = this.canvasProperties
-                    .getColor(segmentIndex)
-                    .map((v) => v * 255);
+                hasVisiblePixels = true;
                 let startOffset = baseOffset + (start << 2);
                 for (let i = start; i < end; i++) {
-                    imageArray[startOffset++] = rgb[0];
-                    imageArray[startOffset++] = rgb[1];
-                    imageArray[startOffset++] = rgb[2];
-                    imageArray[startOffset++] = rgb[3];
+                    this.canvasProperties.getColorBytes(segmentIndex, imageArray, startOffset);
+                    startOffset += 4;
                 }
             }
         }
-        if (dirtyX > width) {
+        if (!hasVisiblePixels) {
+            localContext.clearRect(0, 0, width, height);
+            this.hasCachedRaster = false;
+            this.rasterDirty = false;
             return;
         }
-        const dirtyWidth = dirtyX2 - dirtyX;
-        const dirtyHeight = dirtyY2 - dirtyY;
-        localContext.putImageData(imageData, 0, 0, dirtyX - 1, dirtyY - 1, dirtyWidth + 2, dirtyHeight + 2);
-        context.drawImage(canvas, dirtyX, dirtyY, dirtyWidth, dirtyHeight, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
+        localContext.putImageData(imageData, 0, 0);
+        this.hasCachedRaster = true;
+        this.rasterDirty = false;
+        context.drawImage(canvas, 0, 0);
     }
     setMapper(mapper) {
         this.mapper = mapper;
@@ -76,49 +79,53 @@ export default class CanvasActor {
             return;
         }
         const { voxelManager } = image;
-        if (voxelManager) {
-            if (voxelManager.map.getRun) {
-                this.renderRLE(viewport, context, voxelManager);
-                return;
-            }
+        if (voxelManager?.map?.getRun) {
+            this.renderRLE(viewport, context, voxelManager);
+            return;
         }
         let { canvas } = this;
         if (!canvas || canvas.width !== width || canvas.height !== height) {
             this.canvas = canvas = new window.OffscreenCanvas(width, height);
+            this.cachedImageData = undefined;
+            this.rasterDirty = true;
+        }
+        if (!this.rasterDirty) {
+            if (this.hasCachedRaster) {
+                context.drawImage(canvas, 0, 0);
+            }
+            return;
         }
         const localContext = canvas.getContext('2d');
-        const imageData = localContext.createImageData(width, height);
+        let imageData = this.cachedImageData;
+        if (!imageData) {
+            imageData = localContext.createImageData(width, height);
+            this.cachedImageData = imageData;
+        }
         const { data: imageArray } = imageData;
+        imageArray.fill(0);
         let offset = 0;
         let destOffset = 0;
-        let dirtyX = Infinity;
-        let dirtyY = Infinity;
-        let dirtyX2 = -Infinity;
-        let dirtyY2 = -Infinity;
+        let hasVisiblePixels = false;
         for (let y = 0; y < height; y++) {
             for (let x = 0; x < width; x++) {
                 const segmentIndex = data[offset++];
                 if (segmentIndex) {
-                    dirtyX = Math.min(x, dirtyX);
-                    dirtyY = Math.min(y, dirtyY);
-                    dirtyX2 = Math.max(x, dirtyX2);
-                    dirtyY2 = Math.max(y, dirtyY2);
-                    const rgb = this.canvasProperties.getColor(segmentIndex);
-                    imageArray[destOffset] = rgb[0] * 255;
-                    imageArray[destOffset + 1] = rgb[1] * 255;
-                    imageArray[destOffset + 2] = rgb[2] * 255;
-                    imageArray[destOffset + 3] = 127;
+                    hasVisiblePixels = true;
+                    this.canvasProperties.getColorBytes(segmentIndex, imageArray, destOffset);
                 }
                 destOffset += 4;
             }
         }
-        if (dirtyX > width) {
+        if (!hasVisiblePixels) {
+            localContext.clearRect(0, 0, width, height);
+            this.hasCachedRaster = false;
+            this.rasterDirty = false;
             return;
         }
-        const dirtyWidth = dirtyX2 - dirtyX + 1;
-        const dirtyHeight = dirtyY2 - dirtyY + 1;
-        localContext.putImageData(imageData, 0, 0, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
-        context.drawImage(canvas, dirtyX, dirtyY, dirtyWidth, dirtyHeight, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
+        localContext.putImageData(imageData, 0, 0);
+        this.hasCachedRaster = true;
+        this.rasterDirty = false;
+        context.drawImage(canvas, 0, 0);
     }
     getClassName() {
         return this.className;
@@ -135,6 +142,9 @@ export default class CanvasActor {
     isA(actorType) {
         return actorType === this.className;
     }
+    modified() {
+        this.rasterDirty = true;
+    }
     getImage() {
         if (this.image) {
             return this.image;
@@ -152,6 +162,7 @@ export default class CanvasActor {
             setDerivedImage: (image) => {
                 this.derivedImage = image;
                 this.image = null;
+                this.modified();
             },
             modified: () => null,
         });

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

@@ -1,17 +1,16 @@
 import BaseRenderingEngine from './BaseRenderingEngine';
-import type IStackViewport from '../types/IStackViewport';
-import type IVolumeViewport from '../types/IVolumeViewport';
 import type * as EventTypes from '../types/EventTypes';
 import type { InternalViewportInput, NormalizedViewportInput, IViewport } from '../types/IViewport';
 import type vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import type { VtkOffscreenMultiRenderWindow } from '../types';
 declare class ContextPoolRenderingEngine extends BaseRenderingEngine {
-    private contextPool;
+    private contextPool?;
     constructor(id?: string);
+    private ensureContextPool;
     protected enableVTKjsDrivenViewport(viewportInputEntry: NormalizedViewportInput): void;
     protected addVtkjsDrivenViewport(viewportInputEntry: InternalViewportInput): void;
     protected setVtkjsDrivenViewports(viewportInputEntries: NormalizedViewportInput[]): void;
-    protected _resizeVTKViewports(vtkDrivenViewports: (IStackViewport | IVolumeViewport)[], keepCamera?: boolean, immediate?: boolean): void;
+    protected _resizeVTKViewports(vtkDrivenViewports: IViewport[], keepCamera?: boolean, immediate?: boolean): void;
     protected _renderFlaggedViewports: () => void;
     private renderViewportUsingCustomOrVtkPipeline;
     private _renderViewportWithContext;

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,
@@ -147,9 +145,6 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         if (viewportsNeedingResize.length === 0) {
             return;
         }
-        if (this._animationFrameSet) {
-            return;
-        }
         for (const vp of viewportsNeedingResize) {
             const canvas = getOrCreateCanvas(vp.element);
             const displayedWidth = Math.round(canvas.clientWidth * devicePixelRatio);
@@ -159,14 +154,24 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
             vp.sWidth = targetWidth;
             vp.sHeight = targetHeight;
         }
+        if (this._animationFrameSet) {
+            return;
+        }
         if (vtkDrivenViewports.length) {
             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;
         };