@cornerstonejs/core 5.0.0-beta.1 → 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,14 +4,14 @@ 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';
+import { convertColorArrayToRgbString } from '../utilities/convertColorArrayToRgbString';
 export const VIEWPORT_MIN_SIZE = 2;
 class BaseRenderingEngine {
     constructor(id) {
@@ -53,7 +53,7 @@ class BaseRenderingEngine {
         }
         const { type } = viewportInput;
         const viewportUsesCustomRenderingPipeline = viewportTypeUsesCustomRenderingPipeline(type);
-        if (!this.useCPURendering && !viewportUsesCustomRenderingPipeline) {
+        if (!viewportUsesCustomRenderingPipeline) {
             this.enableVTKjsDrivenViewport(viewportInput);
         }
         else {
@@ -72,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;
@@ -85,6 +83,9 @@ class BaseRenderingEngine {
             this._clearAnimationFrame();
         }
     }
+    disableViewport(viewportId) {
+        this.disableElement(viewportId);
+    }
     setViewports(publicViewportInputEntries) {
         const viewportInputEntries = this._normalizeViewportInputEntries(publicViewportInputEntries);
         this._throwIfDestroyed();
@@ -92,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 {
@@ -114,7 +114,7 @@ class BaseRenderingEngine {
         const vtkDrivenViewports = [];
         const customRenderingViewports = [];
         viewports.forEach((vpie) => {
-            if (!viewportTypeUsesCustomRenderingPipeline(vpie.type)) {
+            if (!viewportUsesCustomRenderingPipeline(vpie)) {
                 vtkDrivenViewports.push(vpie);
             }
             else {
@@ -135,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);
@@ -175,37 +151,40 @@ 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;
     }
     fillCanvasWithBackgroundColor(canvas, backgroundColor) {
         const ctx = canvas.getContext('2d');
-        let fillStyle;
-        if (backgroundColor) {
-            const rgb = backgroundColor.map((f) => Math.floor(255 * f));
-            fillStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
-        }
-        else {
-            fillStyle = 'black';
-        }
+        const fillStyle = backgroundColor
+            ? convertColorArrayToRgbString(backgroundColor)
+            : 'black';
         ctx.fillStyle = fillStyle;
         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 = {
@@ -213,7 +192,7 @@ class BaseRenderingEngine {
                 orientation: null,
                 displayArea: null,
             };
-            if (type === ViewportType.ORTHOGRAPHIC) {
+            if (requestedType === ViewportType.ORTHOGRAPHIC) {
                 options = {
                     ...options,
                     orientation: OrientationAxis.AXIAL,
@@ -222,6 +201,10 @@ class BaseRenderingEngine {
         }
         return {
             ...viewportInputEntry,
+            requestedType: requestedType !== type || getUseGenericViewport()
+                ? requestedType
+                : undefined,
+            type,
             defaultOptions: options,
         };
     }
@@ -234,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();
@@ -278,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,
@@ -291,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;
     }
@@ -308,6 +283,10 @@ class BaseRenderingEngine {
     _setViewportsToBeRenderedNextFrame(viewportIds) {
         viewportIds.forEach((viewportId) => {
             this._needsRender.add(viewportId);
+            const viewport = this._viewports.get(viewportId);
+            if (viewport) {
+                viewport.viewportStatus = ViewportStatus.NEEDS_RENDER;
+            }
         });
         this._render();
     }
@@ -327,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');
@@ -352,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.d.ts

@@ -1,7 +1,7 @@
 import type { mat4 } from 'gl-matrix';
 import type { BlendModes, InterpolationType } from '../enums';
 import { OrientationAxis } from '../enums';
-import type { FlipDirection, IImageData, IVolumeInput, OrientationVectors, Point2, Point3, VolumeViewportProperties, ViewReferenceSpecifier, ReferenceCompatibleOptions, ViewReference, ICamera } from '../types';
+import type { ActorEntry, FlipDirection, IImageData, IVolumeInput, OrientationVectors, Point2, Point3, VolumeViewportProperties, ViewReferenceSpecifier, ReferenceCompatibleOptions, ViewReference, ICamera } from '../types';
 import type { VoiModifiedEventDetail } from '../types/EventTypes';
 import type { PlaneRestriction, ViewportInput } from '../types/IViewport';
 import type { TransferFunctionNodes } from '../types/ITransferFunctionNode';
@@ -20,6 +20,7 @@ declare abstract class BaseVolumeViewport extends Viewport {
     private volumeIds;
     constructor(props: ViewportInput);
     static get useCustomRenderingPipeline(): boolean;
+    isOrientationChangeable(): boolean;
     getSliceViewInfo(): {
         width: number;
         height: number;
@@ -46,7 +47,7 @@ declare abstract class BaseVolumeViewport extends Viewport {
     isReferenceViewable(viewRef: ViewReference, options?: ReferenceCompatibleOptions): boolean;
     scroll(delta?: number): void;
     abstract isInAcquisitionPlane(): boolean;
-    setBestOrentation(inPlaneVector1: any, inPlaneVector2: any): void;
+    setBestOrentation(inPlaneVector1: Point3, inPlaneVector2: Point3): void;
     setViewPlane(planeRestriction: PlaneRestriction): void;
     setViewReference(viewRef: ViewReference): void;
     private setThreshold;
@@ -55,11 +56,12 @@ declare abstract class BaseVolumeViewport extends Viewport {
     private setSmoothing;
     protected shouldUseCustomRenderPass(): boolean;
     getRenderPasses: () => any[];
+    protected _restoreVolumeRenderingDefaults(volumeActor: ActorEntry, volumeId: string): void;
     resetToDefaultProperties(volumeId: string): void;
     private setPreset;
     setSampleDistanceMultiplier(multiplier: number): void;
     getDefaultProperties: (volumeId?: string) => VolumeViewportProperties;
-    getProperties: (volumeId?: string) => VolumeViewportProperties;
+    getProperties: (volumeId?: string) => VolumeViewportProperties | undefined | null;
     private getColormap;
     setVolumes(volumeInputArray: IVolumeInput[], immediate?: boolean, suppressEvents?: boolean): Promise<void>;
     addVolumes(volumeInputArray: IVolumeInput[], immediate?: boolean, suppressEvents?: boolean): Promise<void>;
@@ -88,7 +90,7 @@ declare abstract class BaseVolumeViewport extends Viewport {
     getRendererContextPool(): vtkRenderer;
     getRendererTiled(): vtkRenderer;
     hasImageURI: (imageURI: string) => boolean;
-    protected _getViewUp(viewPlaneNormal: any): Point3;
+    protected _getViewUp(viewPlaneNormal: Point3): Point3;
     protected _getOrientationVectors(orientation: OrientationAxis | OrientationVectors): OrientationVectors;
     protected _getAcquisitionPlaneOrientation(): OrientationVectors;
     getSlabThickness(): number;

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,13 +13,14 @@ 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 { getTransferFunctionNodes } from '../utilities/transferFunctionUtils';
+import getAcquisitionPlaneOrientation from '../utilities/getAcquisitionPlaneOrientation';
+import { getTransferFunctionNodes, setTransferFunctionNodes, } from '../utilities/transferFunctionUtils';
 import createVolumeActor from './helpers/createVolumeActor';
 import volumeNewImageEventDispatcher, { resetVolumeNewImageState, } from './helpers/volumeNewImageEventDispatcher';
 import Viewport from './Viewport';
 import vtkSlabCamera from './vtkClasses/vtkSlabCamera';
 import getVolumeViewportScrollInfo from '../utilities/getVolumeViewportScrollInfo';
-import { actorIsA } from '../utilities/actorCheck';
+import { actorIsA, isImageActor } from '../utilities/actorCheck';
 import snapFocalPointToSlice from '../utilities/snapFocalPointToSlice';
 import getVoiFromSigmoidRGBTransferFunction from '../utilities/getVoiFromSigmoidRGBTransferFunction';
 import isEqual, { isEqualAbs, isEqualNegative } from '../utilities/isEqual';
@@ -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) {
@@ -367,6 +368,9 @@ class BaseVolumeViewport extends Viewport {
     static get useCustomRenderingPipeline() {
         return false;
     }
+    isOrientationChangeable() {
+        return true;
+    }
     getSliceViewInfo() {
         throw new Error('Method not implemented.');
     }
@@ -391,7 +395,8 @@ class BaseVolumeViewport extends Viewport {
     initializeVolumeNewImageEventDispatcher() {
         const volumeNewImageHandlerBound = volumeNewImageHandler.bind(this);
         const volumeNewImageCleanUpBound = volumeNewImageCleanUp.bind(this);
-        function volumeNewImageHandler(cameraEvent) {
+        function volumeNewImageHandler(event) {
+            const cameraEvent = event;
             const { viewportId } = cameraEvent.detail;
             if (viewportId !== this.id || this.isDisabled) {
                 return;
@@ -430,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`);
         }
@@ -834,6 +835,21 @@ class BaseVolumeViewport extends Viewport {
     shouldUseCustomRenderPass() {
         return !this.useCPURendering;
     }
+    _restoreVolumeRenderingDefaults(volumeActor, volumeId) {
+        if (!isImageActor(volumeActor)) {
+            return;
+        }
+        const properties = this.getDefaultProperties(volumeId);
+        if (properties?.preset || properties?.colormap) {
+            this.setProperties(properties, volumeId, true);
+        }
+        else {
+            const transferFunction = volumeActor.actor
+                .getProperty()
+                .getRGBTransferFunction(0);
+            setTransferFunctionNodes(transferFunction, this.initialTransferFunctionNodes);
+        }
+    }
     resetToDefaultProperties(volumeId) {
         const properties = this.globalDefaultProperties;
         if (properties.colormap?.name) {
@@ -869,24 +885,21 @@ class BaseVolumeViewport extends Viewport {
             return;
         }
         const { volumeActor } = applicableVolumeActorInfo;
-        let preset = presetNameOrObj;
-        if (typeof preset === 'string') {
-            preset = VIEWPORT_PRESETS.find((preset) => {
-                return preset.name === presetNameOrObj;
-            });
-        }
-        if (!preset) {
+        const viewportPreset = typeof presetNameOrObj === 'string'
+            ? VIEWPORT_PRESETS.find((preset) => preset.name === presetNameOrObj)
+            : presetNameOrObj;
+        if (!viewportPreset) {
             return;
         }
-        applyPreset(volumeActor, preset);
-        this.viewportProperties.preset = preset;
+        applyPreset(volumeActor, viewportPreset);
+        this.viewportProperties.preset = viewportPreset.name;
         this.render();
         if (!suppressEvents) {
             triggerEvent(this.element, Events.PRESET_MODIFIED, {
                 viewportId: this.id,
                 volumeId: applicableVolumeActorInfo.volumeId,
                 actor: volumeActor,
-                presetName: preset.name,
+                presetName: viewportPreset.name,
             });
         }
     }
@@ -1159,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();
@@ -1215,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;
 }