@cornerstonejs/core 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -0,0 +1,6 @@
+import type CanvasActor from '.';
+export default class CanvasMapper {
+    private actor;
+    constructor(actor: CanvasActor);
+    getInputData(): any;
+}

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

@@ -0,0 +1,8 @@
+export default class CanvasMapper {
+    constructor(actor) {
+        this.actor = actor;
+    }
+    getInputData() {
+        return this.actor.getImage();
+    }
+}

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

@@ -0,0 +1,15 @@
+import type CanvasActor from '.';
+export default class CanvasProperties {
+    private actor;
+    private opacity;
+    private outlineOpacity;
+    private transferFunction;
+    constructor(actor: CanvasActor);
+    setRGBTransferFunction(index: any, cfun: any): void;
+    setScalarOpacity(opacity: number): void;
+    setInterpolationTypeToNearest(): void;
+    setUseLabelOutline(): void;
+    setLabelOutlineOpacity(opacity: any): void;
+    setLabelOutlineThickness(): void;
+    getColor(index: number): any[];
+}

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

@@ -0,0 +1,29 @@
+export default class CanvasProperties {
+    constructor(actor) {
+        this.opacity = 0.4;
+        this.outlineOpacity = 0.4;
+        this.transferFunction = [];
+        this.actor = actor;
+    }
+    setRGBTransferFunction(index, cfun) {
+        this.transferFunction[index] = cfun;
+    }
+    setScalarOpacity(opacity) {
+    }
+    setInterpolationTypeToNearest() {
+    }
+    setUseLabelOutline() {
+    }
+    setLabelOutlineOpacity(opacity) {
+        this.outlineOpacity = opacity;
+    }
+    setLabelOutlineThickness() {
+    }
+    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];
+    }
+}

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

@@ -0,0 +1,23 @@
+import type { IViewport } from '../../types/IViewport';
+import type { ICanvasActor } from '../../types/IActor';
+import CanvasProperties from './CanvasProperties';
+import CanvasMapper from './CanvasMapper';
+export default class CanvasActor implements ICanvasActor {
+    private image;
+    private derivedImage;
+    private canvasProperties;
+    private visibility;
+    private mapper;
+    private viewport;
+    protected className: string;
+    protected canvas: any;
+    constructor(viewport: IViewport, derivedImage: any);
+    protected renderRLE(viewport: any, context: any, voxelManager: any): void;
+    render(viewport: IViewport, context: CanvasRenderingContext2D): void;
+    getClassName(): string;
+    getProperty(): CanvasProperties;
+    setVisibility(visibility: boolean): void;
+    getMapper(): CanvasMapper;
+    isA(actorType: any): boolean;
+    getImage(): any;
+}

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

@@ -0,0 +1,157 @@
+import CanvasProperties from './CanvasProperties';
+import CanvasMapper from './CanvasMapper';
+export default class CanvasActor {
+    constructor(viewport, derivedImage) {
+        this.canvasProperties = new CanvasProperties(this);
+        this.visibility = false;
+        this.mapper = new CanvasMapper(this);
+        this.className = 'CanvasActor';
+        this.derivedImage = derivedImage;
+        this.viewport = viewport;
+    }
+    renderRLE(viewport, context, voxelManager) {
+        const { width, height } = this.image;
+        let { canvas } = this;
+        if (!canvas || canvas.width !== width || canvas.height !== height) {
+            this.canvas = canvas = new window.OffscreenCanvas(width, height);
+        }
+        const localContext = canvas.getContext('2d');
+        const imageData = localContext.createImageData(width, height);
+        const { data: imageArray } = imageData;
+        imageArray.fill(0);
+        const { map } = voxelManager;
+        let dirtyX = Infinity;
+        let dirtyY = Infinity;
+        let dirtyX2 = -Infinity;
+        let dirtyY2 = -Infinity;
+        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);
+                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];
+                }
+            }
+        }
+        if (dirtyX > width) {
+            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);
+    }
+    render(viewport, context) {
+        if (!this.visibility) {
+            return;
+        }
+        const image = this.image || this.getImage();
+        const { width, height } = image;
+        const data = image.getScalarData();
+        if (!data) {
+            return;
+        }
+        const { voxelManager } = image;
+        if (voxelManager) {
+            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);
+        }
+        const localContext = canvas.getContext('2d');
+        const imageData = localContext.createImageData(width, height);
+        const { data: imageArray } = imageData;
+        let offset = 0;
+        let destOffset = 0;
+        let dirtyX = Infinity;
+        let dirtyY = Infinity;
+        let dirtyX2 = -Infinity;
+        let dirtyY2 = -Infinity;
+        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;
+                }
+                destOffset += 4;
+            }
+        }
+        if (dirtyX > width) {
+            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);
+    }
+    getClassName() {
+        return this.className;
+    }
+    getProperty() {
+        return this.canvasProperties;
+    }
+    setVisibility(visibility) {
+        this.visibility = visibility;
+    }
+    getMapper() {
+        return this.mapper;
+    }
+    isA(actorType) {
+        return actorType === this.className;
+    }
+    getImage() {
+        if (this.image) {
+            return this.image;
+        }
+        this.image = { ...this.derivedImage };
+        const imageData = this.viewport.getImageData();
+        Object.assign(this.image, {
+            worldToIndex: (worldPos) => imageData.imageData.worldToIndex(worldPos),
+            indexToWorld: (index, destPoint) => imageData.imageData.indexToWorld(index, destPoint),
+            getDimensions: () => imageData.dimensions,
+            getScalarData: () => this.derivedImage?.getPixelData(),
+            getDirection: () => imageData.direction,
+            getSpacing: () => imageData.spacing,
+            setOrigin: () => null,
+            setDerivedImage: (image) => {
+                this.derivedImage = image;
+                this.image = null;
+            },
+            modified: () => null,
+        });
+        return this.image;
+    }
+}

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

@@ -1,12 +1,13 @@
 import type IStackViewport from '../types/IStackViewport';
 import type IRenderingEngine from '../types/IRenderingEngine';
 import type IVolumeViewport from '../types/IVolumeViewport';
+import type { IViewport } from '../types/IViewport';
 import type { PublicViewportInput } from '../types/IViewport';
 declare class RenderingEngine implements IRenderingEngine {
     readonly id: string;
     hasBeenDestroyed: boolean;
     offscreenMultiRenderWindow: any;
-    readonly offScreenCanvasContainer: any;
+    readonly offScreenCanvasContainer: HTMLDivElement;
     private _viewports;
     private _needsRender;
     private _animationFrameSet;
@@ -15,15 +16,16 @@ declare class RenderingEngine implements IRenderingEngine {
     constructor(id?: string);
     enableElement(viewportInputEntry: PublicViewportInput): void;
     disableElement(viewportId: string): void;
-    setViewports(publicViewportInputEntries: Array<PublicViewportInput>): void;
+    setViewports(publicViewportInputEntries: PublicViewportInput[]): void;
     resize(immediate?: boolean, keepCamera?: boolean): void;
-    getViewport(viewportId: string): IStackViewport | IVolumeViewport;
-    getViewports(): Array<IStackViewport | IVolumeViewport>;
-    getStackViewports(): Array<IStackViewport>;
-    getVolumeViewports(): Array<IVolumeViewport>;
+    getViewport(viewportId: string): IViewport;
+    getViewports(): IViewport[];
+    getStackViewport(viewportId: string): IStackViewport;
+    getStackViewports(): IStackViewport[];
+    getVolumeViewports(): IVolumeViewport[];
     render(): void;
     renderFrameOfReference: (FrameOfReferenceUID: string) => void;
-    renderViewports(viewportIds: Array<string>): void;
+    renderViewports(viewportIds: string[]): void;
     renderViewport(viewportId: string): void;
     destroy(): void;
     fillCanvasWithBackgroundColor(canvas: HTMLCanvasElement, backgroundColor: [number, number, number]): void;

package/dist/esm/RenderingEngine/RenderingEngine.js

@@ -10,6 +10,7 @@ import StackViewport from './StackViewport';
 import viewportTypeUsesCustomRenderingPipeline from './helpers/viewportTypeUsesCustomRenderingPipeline';
 import getOrCreateCanvas from './helpers/getOrCreateCanvas';
 import { getShouldUseCPURendering, isCornerstoneInitialized } from '../init';
+import viewportTypeToViewportClass from './helpers/viewportTypeToViewportClass';
 import { OrientationAxis } from '../enums';
 import VolumeViewport3D from './VolumeViewport3D';
 const VIEWPORT_MIN_SIZE = 2;
@@ -25,7 +26,7 @@ class RenderingEngine {
                     return vp.id;
                 }
             });
-            return this.renderViewports(viewportIdsWithSameFrameOfReferenceUID);
+            this.renderViewports(viewportIdsWithSameFrameOfReferenceUID);
         };
         this._renderFlaggedViewports = () => {
             this._throwIfDestroyed();
@@ -79,9 +80,7 @@ class RenderingEngine {
         }
         const viewport = this.getViewport(viewportId);
         if (viewport) {
-            console.log('Viewport already exists, disabling it first');
             this.disableElement(viewportId);
-            console.log(`Viewport ${viewportId} disabled`);
         }
         const { type } = viewportInput;
         const viewportUsesCustomRenderingPipeline = viewportTypeUsesCustomRenderingPipeline(type);
@@ -114,9 +113,6 @@ class RenderingEngine {
         if (!viewports.length) {
             this._clearAnimationFrame();
         }
-        const immediate = true;
-        const keepCamera = true;
-        this.resize(immediate, keepCamera);
     }
     setViewports(publicViewportInputEntries) {
         const viewportInputEntries = this._normalizeViewportInputEntries(publicViewportInputEntries);
@@ -135,6 +131,11 @@ class RenderingEngine {
         });
         this.setVtkjsDrivenViewports(vtkDrivenViewportInputEntries);
         this.setCustomViewports(customRenderingViewportInputEntries);
+        viewportInputEntries.forEach((vp) => {
+            const canvas = getOrCreateCanvas(vp.element);
+            const { background } = vp.defaultOptions;
+            this.fillCanvasWithBackgroundColor(canvas, background);
+        });
     }
     resize(immediate = true, keepCamera = true) {
         this._throwIfDestroyed();
@@ -163,13 +164,21 @@ class RenderingEngine {
         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();
-        const isStackViewport = (viewport) => {
-            return viewport instanceof StackViewport;
-        };
-        return viewports.filter(isStackViewport);
+        return viewports.filter((vp) => vp instanceof StackViewport);
     }
     getVolumeViewports() {
         this._throwIfDestroyed();
@@ -260,29 +269,51 @@ class RenderingEngine {
                 vp.setCamera(prevCamera);
             }
         });
-        if (immediate === true) {
+        if (immediate) {
             this.render();
         }
     }
     _resizeVTKViewports(vtkDrivenViewports, keepCamera = true, immediate = true) {
+        vtkDrivenViewports.forEach((vp) => {
+            getOrCreateCanvas(vp.element);
+        });
         const canvasesDrivenByVtkJs = vtkDrivenViewports.map((vp) => vp.canvas);
         if (canvasesDrivenByVtkJs.length) {
             const { offScreenCanvasWidth, offScreenCanvasHeight } = this._resizeOffScreenCanvas(canvasesDrivenByVtkJs);
             this._resize(vtkDrivenViewports, offScreenCanvasWidth, offScreenCanvasHeight);
         }
         vtkDrivenViewports.forEach((vp) => {
-            const canvas = getOrCreateCanvas(vp.element);
-            const rect = canvas.getBoundingClientRect();
-            const devicePixelRatio = window.devicePixelRatio || 1;
-            canvas.width = rect.width * devicePixelRatio;
-            canvas.height = rect.height * devicePixelRatio;
             const prevCamera = vp.getCamera();
-            vp.resetCamera();
+            const rotation = vp.getRotation();
+            const { flipHorizontal } = prevCamera;
+            const resetPan = true;
+            const resetZoom = true;
+            const resetToCenter = true;
+            const resetRotation = false;
+            const suppressEvents = true;
+            vp.resetCamera({
+                resetPan,
+                resetZoom,
+                resetToCenter,
+                resetRotation,
+                suppressEvents,
+            });
+            const displayArea = vp.getDisplayArea();
             if (keepCamera) {
-                vp.setCamera(prevCamera);
+                if (displayArea) {
+                    if (flipHorizontal) {
+                        vp.setCamera({ flipHorizontal });
+                    }
+                    if (rotation) {
+                        vp.setViewPresentation({ rotation });
+                    }
+                }
+                else {
+                    vp.setCamera(prevCamera);
+                }
             }
         });
-        if (immediate === true) {
+        if (immediate) {
             this.render();
         }
     }
@@ -292,10 +323,6 @@ class RenderingEngine {
         const canvasesDrivenByVtkJs = viewportsDrivenByVtkJs.map((vp) => vp.canvas);
         const canvas = getOrCreateCanvas(viewportInputEntry.element);
         canvasesDrivenByVtkJs.push(canvas);
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        const rect = canvas.getBoundingClientRect();
-        canvas.width = rect.width * devicePixelRatio;
-        canvas.height = rect.height * devicePixelRatio;
         const { offScreenCanvasWidth, offScreenCanvasHeight } = this._resizeOffScreenCanvas(canvasesDrivenByVtkJs);
         const xOffset = this._resize(viewportsDrivenByVtkJs, offScreenCanvasWidth, offScreenCanvasHeight);
         const internalViewportEntry = { ...viewportInputEntry, canvas };
@@ -387,10 +414,8 @@ class RenderingEngine {
             sHeight: clientHeight,
             defaultOptions: defaultOptions || {},
         };
-        if (type !== ViewportType.STACK) {
-            throw new Error('Support for fully custom viewports not yet implemented');
-        }
-        const viewport = new StackViewport(viewportInput);
+        const ViewportType = viewportTypeToViewportClass[type];
+        const viewport = new ViewportType(viewportInput);
         this._viewports.set(viewportId, viewport);
         const eventDetail = {
             element,
@@ -400,7 +425,9 @@ class RenderingEngine {
         triggerEvent(eventTarget, Events.ELEMENT_ENABLED, eventDetail);
     }
     setCustomViewports(viewportInputEntries) {
-        viewportInputEntries.forEach((vpie) => this.addCustomViewport(vpie));
+        viewportInputEntries.forEach((vpie) => {
+            this.addCustomViewport(vpie);
+        });
     }
     setVtkjsDrivenViewports(viewportInputEntries) {
         if (viewportInputEntries.length) {
@@ -431,11 +458,10 @@ class RenderingEngine {
     }
     _resizeOffScreenCanvas(canvasesDrivenByVtkJs) {
         const { offScreenCanvasContainer, offscreenMultiRenderWindow } = this;
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        const offScreenCanvasHeight = Math.max(...canvasesDrivenByVtkJs.map((canvas) => canvas.clientHeight * devicePixelRatio));
+        const offScreenCanvasHeight = Math.max(...canvasesDrivenByVtkJs.map((canvas) => canvas.height));
         let offScreenCanvasWidth = 0;
         canvasesDrivenByVtkJs.forEach((canvas) => {
-            offScreenCanvasWidth += canvas.clientWidth * devicePixelRatio;
+            offScreenCanvasWidth += canvas.width;
         });
         offScreenCanvasContainer.width = offScreenCanvasWidth;
         offScreenCanvasContainer.height = offScreenCanvasHeight;
@@ -444,11 +470,10 @@ class RenderingEngine {
     }
     _resize(viewportsDrivenByVtkJs, offScreenCanvasWidth, offScreenCanvasHeight) {
         let _xOffset = 0;
-        const devicePixelRatio = window.devicePixelRatio || 1;
         for (let i = 0; i < viewportsDrivenByVtkJs.length; i++) {
             const viewport = viewportsDrivenByVtkJs[i];
             const { sxStartDisplayCoords, syStartDisplayCoords, sxEndDisplayCoords, syEndDisplayCoords, sx, sy, sWidth, sHeight, } = this._getViewportCoordsOnOffScreenCanvas(viewport, offScreenCanvasWidth, offScreenCanvasHeight, _xOffset);
-            _xOffset += viewport.canvas.clientWidth * devicePixelRatio;
+            _xOffset += viewport.canvas.width;
             viewport.sx = sx;
             viewport.sy = sy;
             viewport.sWidth = sWidth;
@@ -465,16 +490,11 @@ class RenderingEngine {
     }
     _getViewportCoordsOnOffScreenCanvas(viewport, offScreenCanvasWidth, offScreenCanvasHeight, _xOffset) {
         const { canvas } = viewport;
-        const { clientWidth, clientHeight } = canvas;
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        const height = clientHeight * devicePixelRatio;
-        const width = clientWidth * devicePixelRatio;
+        const { width: sWidth, height: sHeight } = canvas;
         const sx = _xOffset;
         const sy = 0;
-        const sWidth = width;
-        const sHeight = height;
         const sxStartDisplayCoords = sx / offScreenCanvasWidth;
-        const syStartDisplayCoords = sy + (offScreenCanvasHeight - height) / offScreenCanvasHeight;
+        const syStartDisplayCoords = sy + (offScreenCanvasHeight - sHeight) / offScreenCanvasHeight;
         const sWidthDisplayCoords = sWidth / offScreenCanvasWidth;
         const sHeightDisplayCoords = sHeight / offScreenCanvasHeight;
         return {
@@ -498,7 +518,7 @@ class RenderingEngine {
         this._render();
     }
     _render() {
-        if (this._needsRender.size > 0 && this._animationFrameSet === false) {
+        if (this._needsRender.size > 0 && !this._animationFrameSet) {
             this._animationFrameHandle = window.requestAnimationFrame(this._renderFlaggedViewports);
             this._animationFrameSet = true;
         }
@@ -528,7 +548,7 @@ class RenderingEngine {
         let eventDetail;
         if (viewport.sWidth < VIEWPORT_MIN_SIZE ||
             viewport.sHeight < VIEWPORT_MIN_SIZE) {
-            console.log('Viewport is too small', viewport.sWidth, viewport.sHeight);
+            console.warn('Viewport is too small', viewport.sWidth, viewport.sHeight);
             return;
         }
         if (viewportTypeUsesCustomRenderingPipeline(viewport.type) === true) {
@@ -568,6 +588,7 @@ class RenderingEngine {
             viewportId,
             renderingEngineId,
         };
+        viewport.removeWidgets();
         triggerEvent(eventTarget, Events.ELEMENT_DISABLED, eventDetail);
         element.removeAttribute('data-viewport-uid');
         element.removeAttribute('data-rendering-engine-uid');
@@ -628,4 +649,3 @@ function _TEMPDownloadURI(uri) {
     link.click();
     document.body.removeChild(link);
 }
-//# sourceMappingURL=RenderingEngine.js.map