@cornerstonejs/core 4.17.2 → 4.17.4

package/dist/esm/RenderingEngine/ContextPoolRenderingEngine.js

@@ -131,15 +131,39 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         }
     }
     _resizeVTKViewports(vtkDrivenViewports, keepCamera = true, immediate = true) {
-        const canvasesDrivenByVtkJs = vtkDrivenViewports.map((vp) => {
-            return getOrCreateCanvas(vp.element);
-        });
-        canvasesDrivenByVtkJs.forEach((canvas) => {
-            const devicePixelRatio = window.devicePixelRatio || 1;
-            canvas.width = canvas.clientWidth * devicePixelRatio;
-            canvas.height = canvas.clientHeight * devicePixelRatio;
-        });
-        if (canvasesDrivenByVtkJs.length) {
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        const viewportsNeedingResize = [];
+        for (const vp of vtkDrivenViewports) {
+            const canvas = getOrCreateCanvas(vp.element);
+            const displayedWidth = Math.round(canvas.clientWidth * devicePixelRatio);
+            const displayedHeight = Math.round(canvas.clientHeight * devicePixelRatio);
+            if (displayedWidth === 0 || displayedHeight === 0) {
+                continue;
+            }
+            const renderedWidth = canvas.width;
+            const renderedHeight = canvas.height;
+            if (displayedWidth === renderedWidth &&
+                displayedHeight === renderedHeight) {
+                continue;
+            }
+            viewportsNeedingResize.push(vp);
+        }
+        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);
+            const displayedHeight = Math.round(canvas.clientHeight * devicePixelRatio);
+            const targetWidth = Math.max(VIEWPORT_MIN_SIZE, displayedWidth);
+            const targetHeight = Math.max(VIEWPORT_MIN_SIZE, displayedHeight);
+            vp.sWidth = targetWidth;
+            vp.sHeight = targetHeight;
+        }
+        if (vtkDrivenViewports.length) {
             this._resize(vtkDrivenViewports);
         }
         vtkDrivenViewports.forEach((vp) => {
@@ -181,6 +205,10 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         return eventDetail;
     }
     _renderViewportWithContext(viewport, offscreenMultiRenderWindow, offScreenCanvasContainer) {
+        if (viewport.canvas.clientWidth === 0 ||
+            viewport.canvas.clientHeight === 0) {
+            return;
+        }
         if (viewport.sWidth < VIEWPORT_MIN_SIZE ||
             viewport.sHeight < VIEWPORT_MIN_SIZE) {
             console.warn('Viewport is too small', viewport.sWidth, viewport.sHeight);
@@ -210,8 +238,8 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         const renderer = offscreenMultiRenderWindow.getRenderer(viewport.id);
         const contextIndex = this.contextPool.getContextIndexForViewport(viewport.id);
         const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
-        const viewportWidth = viewport.canvas.width;
-        const viewportHeight = viewport.canvas.height;
+        const viewportWidth = viewport.sWidth;
+        const viewportHeight = viewport.sHeight;
         const xEnd = Math.min(1, viewportWidth / maxSize.width);
         const yEnd = Math.min(1, viewportHeight / maxSize.height);
         renderer.setViewport(0, 0, xEnd, yEnd);
@@ -245,7 +273,7 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         if (contextIndex === undefined) {
             return;
         }
-        const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.canvas.width, viewport.canvas.height);
+        const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.sWidth, viewport.sHeight);
         if (!maxSizeChanged) {
             return;
         }
@@ -260,7 +288,14 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
     }
     _copyToOnscreenCanvas(viewport, offScreenCanvas) {
         const { element, canvas, id: viewportId, renderingEngineId, suppressEvents, } = viewport;
-        const { width: dWidth, height: dHeight } = canvas;
+        const dWidth = viewport.sWidth;
+        const dHeight = viewport.sHeight;
+        if (canvas.width !== dWidth ||
+            (canvas.height !== dHeight && dWidth >= 1 && dHeight >= 1)) {
+            canvas.width = dWidth;
+            canvas.height = dHeight;
+            canvas.style.aspectRatio = `${dWidth} / ${dHeight}`;
+        }
         const onScreenContext = canvas.getContext('2d');
         const contextIndex = this.contextPool.getContextIndexForViewport(viewportId);
         const maxSize = this.contextPool.getMaxSizeForContext(contextIndex);
@@ -279,10 +314,8 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
         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);
+            const maxSizeChanged = this.contextPool.updateViewportSize(viewport.id, viewport.sWidth, viewport.sHeight);
             if (maxSizeChanged) {
                 contextsToResize.add(contextIndex);
             }
@@ -290,8 +323,8 @@ class ContextPoolRenderingEngine extends BaseRenderingEngine {
             const { context: offscreenMultiRenderWindow } = contextData;
             const renderer = offscreenMultiRenderWindow.getRenderer(viewport.id);
             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);
+            const xEnd = Math.min(1, viewport.sWidth / maxSize.width);
+            const yEnd = Math.min(1, viewport.sHeight / maxSize.height);
             renderer.setViewport(0, 0, xEnd, yEnd);
         }
         contextsToResize.forEach((contextIndex) => {

package/dist/esm/RenderingEngine/helpers/getOrCreateCanvas.js

@@ -43,8 +43,11 @@ export function getOrCreateCanvas(element) {
     const devicePixelRatio = window.devicePixelRatio || 1;
     const width = Math.ceil(rect.width * devicePixelRatio);
     const height = Math.ceil(rect.height * devicePixelRatio);
-    canvas.width = width;
-    canvas.height = height;
+    if (width > 0 && height > 0) {
+        canvas.width = width;
+        canvas.height = height;
+        canvas.style.aspectRatio = `${width} / ${height}`;
+    }
     return canvas;
 }
 export default getOrCreateCanvas;

package/dist/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.17.2";
+export declare const version = "4.17.4";

package/dist/esm/version.js

@@ -1 +1 @@
-export const version = '4.17.2';
+export const version = '4.17.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "4.17.2",
+  "version": "4.17.4",
   "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": "1bf66a49411068a5351010e818f5a4ea3916434a"
+  "gitHead": "3664bf4622c54d790aa3684f42967448a1bddea3"
 }