@cornerstonejs/core 4.0.3 → 4.1.0

package/dist/esm/RenderingEngine/ContextPoolRenderingEngine.js

@@ -60,8 +60,13 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
             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);
-        const { context: offscreenMultiRenderWindow } = contextData;
+        const { context: offscreenMultiRenderWindow, container } = contextData;
+        const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
+        container.width = maxSize.width;
+        container.height = maxSize.height;
+        offscreenMultiRenderWindow.resize();
         offscreenMultiRenderWindow.addRenderer({
             viewport: [0, 0, 1, 1],
             id: viewportId,
@@ -195,9 +200,15 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
             });
         }
         const renderWindow = offscreenMultiRenderWindow.getRenderWindow();
-        this._resizeOffScreenCanvasForViewport(viewport.canvas, offScreenCanvasContainer, offscreenMultiRenderWindow);
+        this._resizeOffScreenCanvasForViewport(viewport, offScreenCanvasContainer, offscreenMultiRenderWindow);
         const renderer = offscreenMultiRenderWindow.getRenderer(viewport.id);
-        renderer.setViewport(0, 0, 1, 1);
+        const contextIndex = this.contextPool.getContextIndexForViewport(viewport.id);
+        const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
+        const viewportWidth = viewport.canvas.width;
+        const viewportHeight = viewport.canvas.height;
+        const xEnd = Math.min(1, viewportWidth / maxSize.width);
+        const yEnd = Math.min(1, viewportHeight / maxSize.height);
+        renderer.setViewport(0, 0, xEnd, yEnd);
         const allRenderers = offscreenMultiRenderWindow.getRenderers();
         allRenderers.forEach(({ renderer: r, id }) => {
             r.setDraw(id === viewport.id);
@@ -220,22 +231,32 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
     _renderViewportFromVtkCanvasToOnscreenCanvas(viewport, offScreenCanvas) {
         return this._copyToOnscreenCanvas(viewport, offScreenCanvas);
     }
-    _resizeOffScreenCanvasForViewport(viewportCanvas, offScreenCanvasContainer, offscreenMultiRenderWindow) {
-        const offScreenCanvasWidth = viewportCanvas.width;
-        const offScreenCanvasHeight = viewportCanvas.height;
-        if (offScreenCanvasContainer.height === offScreenCanvasHeight &&
-            offScreenCanvasContainer.width === offScreenCanvasWidth) {
+    _resizeOffScreenCanvasForViewport(viewport, offScreenCanvasContainer, offscreenMultiRenderWindow) {
+        const contextIndex = this.contextPool.getContextIndexForViewport(viewport.id);
+        if (contextIndex === undefined) {
+            return;
+        }
+        const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.canvas.width, viewport.canvas.height);
+        if (!maxSizeChanged) {
+            return;
+        }
+        const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
+        if (offScreenCanvasContainer.width === maxSize.width &&
+            offScreenCanvasContainer.height === maxSize.height) {
             return;
         }
-        offScreenCanvasContainer.width = offScreenCanvasWidth;
-        offScreenCanvasContainer.height = offScreenCanvasHeight;
+        offScreenCanvasContainer.width = maxSize.width;
+        offScreenCanvasContainer.height = maxSize.height;
         offscreenMultiRenderWindow.resize();
     }
     _copyToOnscreenCanvas(viewport, offScreenCanvas) {
         const { element, canvas, id: viewportId, renderingEngineId, suppressEvents, } = viewport;
         const { width: dWidth, height: dHeight } = canvas;
         const onScreenContext = canvas.getContext('2d');
-        onScreenContext.drawImage(offScreenCanvas, 0, 0, dWidth, dHeight, 0, 0, dWidth, dHeight);
+        const contextIndex = this.contextPool.getContextIndexForViewport(viewportId);
+        const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
+        const sourceY = maxSize.height - dHeight;
+        onScreenContext.drawImage(offScreenCanvas, 0, sourceY, dWidth, dHeight, 0, 0, dWidth, dHeight);
         return {
             element,
             suppressEvents,
@@ -245,17 +266,35 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         };
     }
     _resize(viewportsDrivenByVtkJs) {
+        const contextsToResize = new Set();
         for (const viewport of viewportsDrivenByVtkJs) {
             viewport.sx = 0;
             viewport.sy = 0;
             viewport.sWidth = viewport.canvas.width;
             viewport.sHeight = viewport.canvas.height;
             const contextIndex = this.contextPool.getContextIndexForViewport(viewport.id);
+            const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.canvas.width, viewport.canvas.height);
+            if (maxSizeChanged) {
+                contextsToResize.add(contextIndex);
+            }
             const contextData = this.contextPool.getContextByIndex(contextIndex);
             const { context: offscreenMultiRenderWindow } = contextData;
             const renderer = offscreenMultiRenderWindow.getRenderer(viewport.id);
-            renderer.setViewport(0, 0, 1, 1);
+            const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
+            const xEnd = Math.min(1, viewport.canvas.width / maxSize.width);
+            const yEnd = Math.min(1, viewport.canvas.height / maxSize.height);
+            renderer.setViewport(0, 0, xEnd, yEnd);
         }
+        contextsToResize.forEach((contextIndex) => {
+            const contextData = this.contextPool.getContextByIndex(contextIndex);
+            if (contextData) {
+                const { context: offscreenMultiRenderWindow, container } = contextData;
+                const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
+                container.width = maxSize.width;
+                container.height = maxSize.height;
+                offscreenMultiRenderWindow.resize();
+            }
+        });
     }
     getWidgetRenderers() {
         const allViewports = this._getViewportsAsArray();
@@ -293,6 +332,7 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
                     offscreenMultiRenderWindow.removeRenderer(viewportId);
                 }
             }
+            this.contextPool.removeViewport(viewportId);
         }
     }
     destroy() {

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

@@ -3,6 +3,8 @@ declare class WebGLContextPool {
     private contexts;
     private offScreenCanvasContainers;
     private viewportToContext;
+    private viewportSizes;
+    private contextMaxSizes;
     constructor(count: number);
     getContextByIndex(index: number): {
         context: VtkOffscreenMultiRenderWindow;
@@ -12,6 +14,13 @@ declare class WebGLContextPool {
     getContextIndexForViewport(viewportId: string): number | undefined;
     getAllContexts(): VtkOffscreenMultiRenderWindow[];
     getContextCount(): number;
+    updateViewportSize(viewportId: string, width: number, height: number): boolean;
+    getMaxSizeForContext(contextIndex: number): {
+        width: number;
+        height: number;
+    };
+    private calculateMaxSizeForContext;
+    removeViewport(viewportId: string): void;
     destroy(): void;
 }
 export default WebGLContextPool;

package/dist/esm/RenderingEngine/WebGLContextPool.js

@@ -4,6 +4,8 @@ class WebGLContextPool {
         this.contexts = [];
         this.offScreenCanvasContainers = [];
         this.viewportToContext = new Map();
+        this.viewportSizes = new Map();
+        this.contextMaxSizes = new Map();
         for (let i = 0; i < count; i++) {
             const offscreenMultiRenderWindow = vtkOffscreenMultiRenderWindow.newInstance();
             const container = document.createElement('div');
@@ -33,6 +35,48 @@ class WebGLContextPool {
     getContextCount() {
         return this.contexts.length;
     }
+    updateViewportSize(viewportId, width, height) {
+        const contextIndex = this.viewportToContext.get(viewportId);
+        if (contextIndex === undefined) {
+            return false;
+        }
+        this.viewportSizes.set(viewportId, { width, height });
+        const previousMax = this.contextMaxSizes.get(contextIndex);
+        const newMax = this.calculateMaxSizeForContext(contextIndex);
+        this.contextMaxSizes.set(contextIndex, newMax);
+        return (!previousMax ||
+            previousMax.width !== newMax.width ||
+            previousMax.height !== newMax.height);
+    }
+    getMaxSizeForContext(contextIndex) {
+        return this.contextMaxSizes.get(contextIndex);
+    }
+    calculateMaxSizeForContext(contextIndex) {
+        let maxWidth = 0;
+        let maxHeight = 0;
+        this.viewportToContext.forEach((assignedContext, viewportId) => {
+            if (assignedContext === contextIndex) {
+                const size = this.viewportSizes.get(viewportId);
+                if (size) {
+                    maxWidth = Math.max(maxWidth, size.width);
+                    maxHeight = Math.max(maxHeight, size.height);
+                }
+            }
+        });
+        return {
+            width: maxWidth,
+            height: maxHeight,
+        };
+    }
+    removeViewport(viewportId) {
+        const contextIndex = this.viewportToContext.get(viewportId);
+        this.viewportToContext.delete(viewportId);
+        this.viewportSizes.delete(viewportId);
+        if (contextIndex !== undefined) {
+            const newMax = this.calculateMaxSizeForContext(contextIndex);
+            this.contextMaxSizes.set(contextIndex, newMax);
+        }
+    }
     destroy() {
         this.contexts.forEach((context) => {
             context.delete();
@@ -40,6 +84,8 @@ class WebGLContextPool {
         this.contexts = [];
         this.offScreenCanvasContainers = [];
         this.viewportToContext.clear();
+        this.viewportSizes.clear();
+        this.contextMaxSizes.clear();
     }
 }
 export default WebGLContextPool;

package/dist/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.0.3";
+export declare const version = "4.1.0";

package/dist/esm/version.js

@@ -1 +1 @@
-export const version = '4.0.3';
+export const version = '4.1.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "Cornerstone3D Core",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
@@ -97,5 +97,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "7ca9f53565f6bbcda2b5f2e45dca1a6c3bef78dd"
+  "gitHead": "4e968a54ceabef12c2649ff9857067c73acbbc07"
 }