@cornerstonejs/core 4.22.13 → 5.0.0

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

@@ -17,26 +17,25 @@ declare abstract class BaseRenderingEngine {
     constructor(id?: string);
     enableElement(viewportInputEntry: PublicViewportInput): void;
     disableElement(viewportId: string): void;
+    disableViewport(viewportId: string): void;
     setViewports(publicViewportInputEntries: PublicViewportInput[]): void;
     resize(immediate?: boolean, keepCamera?: boolean): void;
-    getViewport(viewportId: string): IViewport;
+    getViewport<T = IViewport>(viewportId: string): T;
     getViewports(): IViewport[];
-    getStackViewport(viewportId: string): IStackViewport;
-    getStackViewports(): IStackViewport[];
-    getVolumeViewports(): IVolumeViewport[];
     render(): void;
     renderFrameOfReference: (FrameOfReferenceUID: string) => void;
     renderViewports(viewportIds: string[]): void;
     renderViewport(viewportId: string): void;
     destroy(): void;
     fillCanvasWithBackgroundColor(canvas: HTMLCanvasElement, backgroundColor: [number, number, number]): void;
+    private static readonly NEXT_TYPE_REMAP;
     private _normalizeViewportInputEntry;
     private _normalizeViewportInputEntries;
     private _resizeUsingCustomResizeHandler;
     private _removeViewport;
     private addCustomViewport;
     getRenderer(viewportId: any): import("@kitware/vtk.js/Rendering/Core/Renderer").vtkRenderer;
-    getOffscreenMultiRenderWindow(viewportId?: string): VtkOffscreenMultiRenderWindow;
+    getOffscreenMultiRenderWindow(_viewportId?: string): VtkOffscreenMultiRenderWindow;
     private setCustomViewports;
     protected _getViewportsAsArray(): IViewport[];
     private _setViewportsToBeRenderedNextFrame;

package/dist/esm/RenderingEngine/BaseRenderingEngine.js

@@ -4,12 +4,10 @@ import eventTarget from '../eventTarget';
 import uuidv4 from '../utilities/uuidv4';
 import triggerEvent from '../utilities/triggerEvent';
 import ViewportType from '../enums/ViewportType';
-import BaseVolumeViewport from './BaseVolumeViewport';
-import StackViewport from './StackViewport';
-import viewportTypeUsesCustomRenderingPipeline from './helpers/viewportTypeUsesCustomRenderingPipeline';
+import viewportTypeUsesCustomRenderingPipeline, { viewportUsesCustomRenderingPipeline, } from './helpers/viewportTypeUsesCustomRenderingPipeline';
 import getOrCreateCanvas from './helpers/getOrCreateCanvas';
-import { getShouldUseCPURendering, isCornerstoneInitialized, getConfiguration, } from '../init';
-import viewportTypeToViewportClass from './helpers/viewportTypeToViewportClass';
+import { getShouldUseCPURendering, getUseGenericViewport, isCornerstoneInitialized, getConfiguration, } from '../init';
+import { getViewportClassForInput } from './helpers/viewportTypeToViewportClass';
 import ViewportStatus from '../enums/ViewportStatus';
 import { OrientationAxis } from '../enums';
 import { StatsOverlay } from './helpers/stats';
@@ -55,7 +53,7 @@ class BaseRenderingEngine {
         }
         const { type } = viewportInput;
         const viewportUsesCustomRenderingPipeline = viewportTypeUsesCustomRenderingPipeline(type);
-        if (!this.useCPURendering && !viewportUsesCustomRenderingPipeline) {
+        if (!viewportUsesCustomRenderingPipeline) {
             this.enableVTKjsDrivenViewport(viewportInput);
         }
         else {
@@ -74,10 +72,8 @@ class BaseRenderingEngine {
         }
         this._resetViewport(viewport);
         if (!viewportTypeUsesCustomRenderingPipeline(viewport.type) &&
-            !this.useCPURendering) {
-            if (this.offscreenMultiRenderWindow) {
-                this.offscreenMultiRenderWindow.removeRenderer(viewportId);
-            }
+            this.offscreenMultiRenderWindow) {
+            this.offscreenMultiRenderWindow.removeRenderer(viewportId);
         }
         this._removeViewport(viewportId);
         viewport.isDisabled = true;
@@ -87,6 +83,9 @@ class BaseRenderingEngine {
             this._clearAnimationFrame();
         }
     }
+    disableViewport(viewportId) {
+        this.disableElement(viewportId);
+    }
     setViewports(publicViewportInputEntries) {
         const viewportInputEntries = this._normalizeViewportInputEntries(publicViewportInputEntries);
         this._throwIfDestroyed();
@@ -94,8 +93,7 @@ class BaseRenderingEngine {
         const vtkDrivenViewportInputEntries = [];
         const customRenderingViewportInputEntries = [];
         viewportInputEntries.forEach((vpie) => {
-            if (!this.useCPURendering &&
-                !viewportTypeUsesCustomRenderingPipeline(vpie.type)) {
+            if (!viewportTypeUsesCustomRenderingPipeline(vpie.type)) {
                 vtkDrivenViewportInputEntries.push(vpie);
             }
             else {
@@ -116,7 +114,7 @@ class BaseRenderingEngine {
         const vtkDrivenViewports = [];
         const customRenderingViewports = [];
         viewports.forEach((vpie) => {
-            if (!viewportTypeUsesCustomRenderingPipeline(vpie.type)) {
+            if (!viewportUsesCustomRenderingPipeline(vpie)) {
                 vtkDrivenViewports.push(vpie);
             }
             else {
@@ -137,30 +135,6 @@ class BaseRenderingEngine {
         this._throwIfDestroyed();
         return this._getViewportsAsArray();
     }
-    getStackViewport(viewportId) {
-        this._throwIfDestroyed();
-        const viewport = this.getViewport(viewportId);
-        if (!viewport) {
-            throw new Error(`Viewport with Id ${viewportId} does not exist`);
-        }
-        if (!(viewport instanceof StackViewport)) {
-            throw new Error(`Viewport with Id ${viewportId} is not a StackViewport.`);
-        }
-        return viewport;
-    }
-    getStackViewports() {
-        this._throwIfDestroyed();
-        const viewports = this.getViewports();
-        return viewports.filter((vp) => vp instanceof StackViewport);
-    }
-    getVolumeViewports() {
-        this._throwIfDestroyed();
-        const viewports = this.getViewports();
-        const isVolumeViewport = (viewport) => {
-            return viewport instanceof BaseVolumeViewport;
-        };
-        return viewports.filter(isVolumeViewport);
-    }
     render() {
         const viewports = this.getViewports();
         const viewportIds = viewports.map((vp) => vp.id);
@@ -177,19 +151,19 @@ class BaseRenderingEngine {
             return;
         }
         StatsOverlay.cleanup();
-        if (!this.useCPURendering) {
-            const viewports = this._getViewportsAsArray();
+        const viewports = this._getViewportsAsArray();
+        this._reset();
+        if (this.offscreenMultiRenderWindow) {
             viewports.forEach((vp) => {
-                if (this.offscreenMultiRenderWindow) {
+                if (this.offscreenMultiRenderWindow &&
+                    !viewportUsesCustomRenderingPipeline(vp) &&
+                    this.offscreenMultiRenderWindow.getRenderer(vp.id)) {
                     this.offscreenMultiRenderWindow.removeRenderer(vp.id);
                 }
             });
-            if (this.offscreenMultiRenderWindow) {
-                this.offscreenMultiRenderWindow.delete();
-            }
+            this.offscreenMultiRenderWindow.delete();
             delete this.offscreenMultiRenderWindow;
         }
-        this._reset();
         renderingEngineCache.delete(this.id);
         this.hasBeenDestroyed = true;
     }
@@ -202,7 +176,15 @@ class BaseRenderingEngine {
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
     _normalizeViewportInputEntry(viewportInputEntry) {
-        const { type, defaultOptions } = viewportInputEntry;
+        const requestedType = viewportInputEntry.type;
+        let { type } = viewportInputEntry;
+        const { defaultOptions } = viewportInputEntry;
+        if (getUseGenericViewport()) {
+            const remapped = BaseRenderingEngine.NEXT_TYPE_REMAP[type];
+            if (remapped) {
+                type = remapped;
+            }
+        }
         let options = defaultOptions;
         if (!options || Object.keys(options).length === 0) {
             options = {
@@ -210,7 +192,7 @@ class BaseRenderingEngine {
                 orientation: null,
                 displayArea: null,
             };
-            if (type === ViewportType.ORTHOGRAPHIC) {
+            if (requestedType === ViewportType.ORTHOGRAPHIC) {
                 options = {
                     ...options,
                     orientation: OrientationAxis.AXIAL,
@@ -219,6 +201,10 @@ class BaseRenderingEngine {
         }
         return {
             ...viewportInputEntry,
+            requestedType: requestedType !== type || getUseGenericViewport()
+                ? requestedType
+                : undefined,
+            type,
             defaultOptions: options,
         };
     }
@@ -231,16 +217,7 @@ class BaseRenderingEngine {
     }
     _resizeUsingCustomResizeHandler(customRenderingViewports, keepCamera = true, immediate = true) {
         customRenderingViewports.forEach((vp) => {
-            if (typeof vp.resize === 'function') {
-                vp.resize();
-            }
-        });
-        customRenderingViewports.forEach((vp) => {
-            const prevCamera = vp.getCamera();
-            vp.resetCamera();
-            if (keepCamera) {
-                vp.setCamera(prevCamera);
-            }
+            vp.resizeForRenderingEngine({ keepCamera });
         });
         if (immediate) {
             this.render();
@@ -275,8 +252,9 @@ class BaseRenderingEngine {
             sHeight: clientHeight,
             defaultOptions: defaultOptions || {},
         };
-        const ViewportType = viewportTypeToViewportClass[type];
-        const viewport = new ViewportType(viewportInput);
+        const ViewportClass = getViewportClassForInput(viewportInputEntry);
+        const viewport = new ViewportClass(viewportInput);
+        viewport.requestedType = type;
         this._viewports.set(viewportId, viewport);
         const eventDetail = {
             element,
@@ -288,9 +266,9 @@ class BaseRenderingEngine {
     getRenderer(viewportId) {
         return this.offscreenMultiRenderWindow.getRenderer(viewportId);
     }
-    getOffscreenMultiRenderWindow(viewportId) {
-        if (this.useCPURendering) {
-            throw new Error('Offscreen multi render window is not available when using CPU rendering.');
+    getOffscreenMultiRenderWindow(_viewportId) {
+        if (!this.offscreenMultiRenderWindow) {
+            throw new Error('Offscreen multi render window is not available.');
         }
         return this.offscreenMultiRenderWindow;
     }
@@ -328,6 +306,7 @@ class BaseRenderingEngine {
         };
         viewport.removeWidgets();
         triggerEvent(eventTarget, Events.ELEMENT_DISABLED, eventDetail);
+        viewport.destroy?.();
         element.removeAttribute('data-viewport-uid');
         element.removeAttribute('data-rendering-engine-uid');
         const context = canvas.getContext('2d');
@@ -353,4 +332,12 @@ class BaseRenderingEngine {
         }
     }
 }
+BaseRenderingEngine.NEXT_TYPE_REMAP = {
+    [ViewportType.STACK]: ViewportType.PLANAR_NEXT,
+    [ViewportType.ORTHOGRAPHIC]: ViewportType.PLANAR_NEXT,
+    [ViewportType.VIDEO]: ViewportType.VIDEO_NEXT,
+    [ViewportType.WHOLE_SLIDE]: ViewportType.WHOLE_SLIDE_NEXT,
+    [ViewportType.ECG]: ViewportType.ECG_NEXT,
+    [ViewportType.VOLUME_3D]: ViewportType.VOLUME_3D_NEXT,
+};
 export default BaseRenderingEngine;

package/dist/esm/RenderingEngine/BaseVolumeViewport.js

@@ -1,5 +1,4 @@
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
-import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import { vec2, vec3 } from 'gl-matrix';
 import cache from '../cache/cache';
@@ -14,6 +13,7 @@ import invertRgbTransferFunction from '../utilities/invertRgbTransferFunction';
 import createSigmoidRGBTransferFunction from '../utilities/createSigmoidRGBTransferFunction';
 import transformWorldToIndex from '../utilities/transformWorldToIndex';
 import { findMatchingColormap, updateOpacity as colormapUpdateOpacity, updateThreshold as colormapUpdateThreshold, getThresholdValue, getMaxOpacity, } from '../utilities/colormap';
+import getAcquisitionPlaneOrientation from '../utilities/getAcquisitionPlaneOrientation';
 import { getTransferFunctionNodes, setTransferFunctionNodes, } from '../utilities/transferFunctionUtils';
 import createVolumeActor from './helpers/createVolumeActor';
 import volumeNewImageEventDispatcher, { resetVolumeNewImageState, } from './helpers/volumeNewImageEventDispatcher';
@@ -31,6 +31,7 @@ import { getCameraVectors } from './helpers/getCameraVectors';
 import { isContextPoolRenderingEngine } from './helpers/isContextPoolRenderingEngine';
 import mprCameraValues from '../constants/mprCameraValues';
 import { isInvalidNumber } from './helpers/isInvalidNumber';
+import getVolumeViewReferenceId from '../utilities/getVolumeViewReferenceId';
 import { createSharpeningRenderPass, createSmoothingRenderPass, } from './renderPasses';
 class BaseVolumeViewport extends Viewport {
     constructor(props) {
@@ -434,11 +435,7 @@ class BaseVolumeViewport extends Viewport {
         }
         const { volumeActor } = applicableVolumeActorInfo;
         const cfun = vtkColorTransferFunction.newInstance();
-        let colormapObj = colormapUtils.getColormap(colormap.name);
-        const { name } = colormap;
-        if (!colormapObj) {
-            colormapObj = vtkColorMaps.getPresetByName(name);
-        }
+        const colormapObj = colormapUtils.resolveColormap(colormap.name);
         if (!colormapObj) {
             throw new Error(`Colormap ${colormap} not found`);
         }
@@ -1175,13 +1172,7 @@ class BaseVolumeViewport extends Viewport {
         if (!imageVolume) {
             throw new Error(`imageVolume with id: ${volumeId} does not exist in cache`);
         }
-        const { direction } = imageVolume;
-        const viewPlaneNormal = direction.slice(6, 9).map((x) => -x);
-        const viewUp = direction.slice(3, 6).map((x) => -x);
-        return {
-            viewPlaneNormal,
-            viewUp,
-        };
+        return getAcquisitionPlaneOrientation(imageVolume);
     }
     getSlabThickness() {
         const actors = this.getActors();
@@ -1231,10 +1222,12 @@ class BaseVolumeViewport extends Viewport {
         }
         const currentIndex = this.getSliceIndex();
         sliceIndex ??= currentIndex;
-        const { viewPlaneNormal, focalPoint } = this.getCamera();
-        const querySeparator = volumeId.includes('?') ? '&' : '?';
-        const formattedNormal = viewPlaneNormal.map((v) => v.toFixed(3)).join(',');
-        return `volumeId:${volumeId}${querySeparator}sliceIndex=${sliceIndex}&viewPlaneNormal=${formattedNormal}`;
+        const { viewPlaneNormal } = this.getCamera();
+        return getVolumeViewReferenceId({
+            sliceIndex,
+            viewPlaneNormal,
+            volumeId,
+        });
     }
     _addVolumeId(volumeId) {
         this.volumeIds.add(volumeId);

package/dist/esm/RenderingEngine/CanvasActor/CanvasMapper.d.ts

@@ -3,4 +3,5 @@ export default class CanvasMapper {
     private actor;
     constructor(actor: CanvasActor);
     getInputData(): any;
+    modified(): void;
 }

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

@@ -5,4 +5,7 @@ export default class CanvasMapper {
     getInputData() {
         return this.actor.getImage();
     }
+    modified() {
+        this.actor.modified();
+    }
 }

package/dist/esm/RenderingEngine/CanvasActor/CanvasProperties.d.ts

@@ -4,12 +4,20 @@ export default class CanvasProperties {
     private opacity;
     private outlineOpacity;
     private transferFunction;
+    private scalarOpacityFunction;
+    private colorCache;
     constructor(actor: CanvasActor);
     setRGBTransferFunction(index: any, cfun: any): void;
-    setScalarOpacity(opacity: number): void;
+    getRGBTransferFunction(index?: number): any;
+    setScalarOpacity(indexOrOpacity: any, scalarOpacityFunction?: any): void;
+    getScalarOpacity(): any;
+    getOpacity(): number;
     setInterpolationTypeToNearest(): void;
     setUseLabelOutline(): void;
     setLabelOutlineOpacity(opacity: any): void;
     setLabelOutlineThickness(): void;
-    getColor(index: number): any[];
+    modified(): void;
+    getColorBytes(index: number, destination?: Uint8ClampedArray | Uint8Array | number[], offset?: number): [number, number, number, number];
+    getColor(index: number): number[];
+    private invalidateColorCache;
 }

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

@@ -3,12 +3,37 @@ export default class CanvasProperties {
         this.opacity = 0.4;
         this.outlineOpacity = 0.4;
         this.transferFunction = [];
+        this.colorCache = new Map();
         this.actor = actor;
     }
     setRGBTransferFunction(index, cfun) {
         this.transferFunction[index] = cfun;
+        this.invalidateColorCache();
     }
-    setScalarOpacity(opacity) {
+    getRGBTransferFunction(index = 0) {
+        return this.transferFunction[index];
+    }
+    setScalarOpacity(indexOrOpacity, scalarOpacityFunction) {
+        if (scalarOpacityFunction?.getValue) {
+            this.scalarOpacityFunction = scalarOpacityFunction;
+            this.invalidateColorCache();
+            return;
+        }
+        if (indexOrOpacity?.getValue) {
+            this.scalarOpacityFunction = indexOrOpacity;
+            this.invalidateColorCache();
+            return;
+        }
+        if (typeof indexOrOpacity === 'number') {
+            this.opacity = indexOrOpacity;
+            this.invalidateColorCache();
+        }
+    }
+    getScalarOpacity() {
+        return this.scalarOpacityFunction;
+    }
+    getOpacity() {
+        return this.opacity;
     }
     setInterpolationTypeToNearest() {
     }
@@ -19,11 +44,44 @@ export default class CanvasProperties {
     }
     setLabelOutlineThickness() {
     }
+    modified() {
+        this.invalidateColorCache();
+    }
+    getColorBytes(index, destination, offset = 0) {
+        let color = this.colorCache.get(index);
+        if (!color) {
+            const cfun = this.transferFunction[0];
+            if (!cfun) {
+                color = [0, 0, 0, 0];
+            }
+            else {
+                const rawOpacity = this.scalarOpacityFunction?.getValue
+                    ? this.scalarOpacityFunction.getValue(index)
+                    : this.opacity;
+                const opacity = Math.min(Math.max(rawOpacity, 0), 1);
+                color = [
+                    Math.round(Math.min(Math.max(cfun.getRedValue(index), 0), 1) * 255),
+                    Math.round(Math.min(Math.max(cfun.getGreenValue(index), 0), 1) * 255),
+                    Math.round(Math.min(Math.max(cfun.getBlueValue(index), 0), 1) * 255),
+                    Math.round(opacity * 255),
+                ];
+            }
+            this.colorCache.set(index, color);
+        }
+        if (destination) {
+            destination[offset] = color[0];
+            destination[offset + 1] = color[1];
+            destination[offset + 2] = color[2];
+            destination[offset + 3] = color[3];
+        }
+        return color;
+    }
     getColor(index) {
-        const cfun = this.transferFunction[0];
-        const r = cfun.getRedValue(index);
-        const g = cfun.getGreenValue(index);
-        const b = cfun.getBlueValue(index);
-        return [r, g, b, this.opacity];
+        const [r, g, b, opacity] = this.getColorBytes(index);
+        return [r / 255, g / 255, b / 255, opacity / 255];
+    }
+    invalidateColorCache() {
+        this.colorCache.clear();
+        this.actor.modified();
     }
 }

package/dist/esm/RenderingEngine/CanvasActor/index.d.ts

@@ -8,6 +8,9 @@ export default class CanvasActor {
     private visibility;
     private mapper;
     private viewport;
+    private rasterDirty;
+    private hasCachedRaster;
+    private cachedImageData?;
     protected className: string;
     protected canvas: any;
     constructor(viewport: IViewport, derivedImage: any);
@@ -19,5 +22,6 @@ export default class CanvasActor {
     setVisibility(visibility: boolean): void;
     getMapper(): CanvasMapper;
     isA(actorType: any): boolean;
+    modified(): void;
     getImage(): any;
 }

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;