fix(WidgetManager): use renderer pixel ratio for ScaleInPixels

Author: PaulHax

Sources/Widgets/Core/WidgetManager/index.js

@@ -121,7 +121,7 @@ function vtkWidgetManager(publicAPI, model) {
     const [cwidth, cheight] = model._apiSpecificRenderWindow.getViewportSize(
       model._renderer
     );
-    const ratio = window.devicePixelRatio || 1;
+    const ratio = model._apiSpecificRenderWindow.getComputedDevicePixelRatio();
     const bwidth = String(cwidth / ratio);
     const bheight = String(cheight / ratio);
     const viewBox = `0 0 ${cwidth} ${cheight}`;
@@ -224,7 +224,11 @@ function vtkWidgetManager(publicAPI, model) {
     if (_renderer && _apiSpecificRenderWindow && _camera) {
       const [rwW, rwH] = _apiSpecificRenderWindow.getSize();
       const [vxmin, vymin, vxmax, vymax] = _renderer.getViewport();
-      const rendererPixelDims = [rwW * (vxmax - vxmin), rwH * (vymax - vymin)];
+      const pixelRatio = _apiSpecificRenderWindow.getComputedDevicePixelRatio();
+      const rendererPixelDims = [
+        (rwW * (vxmax - vxmin)) / pixelRatio,
+        (rwH * (vymax - vymin)) / pixelRatio,
+      ];
 
       const cameraPosition = _camera.getPosition();
       const cameraDir = _camera.getDirectionOfProjection();

Sources/Widgets/Core/WidgetManager/test/testWidgetManager.js

@@ -34,6 +34,10 @@ test.onlyIfWebGL('Test getPixelWorldHeightAtCoord', (t) => {
 
   const container = document.querySelector('body');
   const rwContainer = gc.registerDOMElement(document.createElement('div'));
+  // maintain consistent container size across browsers
+  rwContainer.style.width = '300px';
+  rwContainer.style.height = '300px';
+
   container.appendChild(rwContainer);
 
   const grw = vtkGenericRenderWindow.newInstance({ listenWindowResize: false });

Sources/Widgets/Widgets3D/ResliceCursorWidget/example/index.js

@@ -48,8 +48,8 @@ const widget = vtkResliceCursorWidget.newInstance();
 const widgetState = widget.getWidgetState();
 widgetState.setKeepOrthogonality(true);
 widgetState.setOpacity(0.6);
-// Use devicePixelRatio in order to have the same display handle size on all devices
-widgetState.setSphereRadius(10 * window.devicePixelRatio);
+// Set size in CSS pixel space because scaleInPixels defaults to true
+widgetState.setSphereRadius(10);
 widgetState.setLineThickness(5);
 
 const showDebugActors = true;