ui-spacetimechart: handle devicePixelRatio changes

ui-spacetimechart/src/hooks/useCanvas.ts

@@ -2,6 +2,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 
 import { isEqual } from 'lodash';
 
+import { useDevicePixelRatio } from './useDevicePixelRatio';
 import { useSize } from './useSize';
 import { CanvasContext } from '../lib/context';
 import {
@@ -58,6 +59,8 @@ export function useCanvas(
     sizeRef.current = size;
   }, [size]);
 
+  const devicePixelRatio = useDevicePixelRatio();
+
   /**
    * This function renders all picking layers:
    */
@@ -223,27 +226,25 @@ export function useCanvas(
 
   // Handle resizing:
   useEffect(() => {
-    const scale = window.devicePixelRatio || 1;
-
     for (const id in canvasesRef.current) {
       const canvas = canvasesRef.current[id];
       const ctx = contextsRef.current[id];
 
       if (canvas) {
         canvas.style.width = size.width + 'px';
         canvas.style.height = size.height + 'px';
-        canvas.setAttribute('width', size.width * scale + 'px');
-        canvas.setAttribute('height', size.height * scale + 'px');
+        canvas.setAttribute('width', size.width * devicePixelRatio + 'px');
+        canvas.setAttribute('height', size.height * devicePixelRatio + 'px');
 
         // Reset the transform to identity, then apply the new scale
         ctx.setTransform(1, 0, 0, 1, 0, 0);
-        ctx.scale(scale, scale);
+        ctx.scale(devicePixelRatio, devicePixelRatio);
       }
     }
 
     draw();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [size]);
+  }, [size, devicePixelRatio]);
 
   // Read picking layer on position change:
   useEffect(() => {

ui-spacetimechart/src/hooks/useDevicePixelRatio.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export function useDevicePixelRatio() {
+  const [ratio, setRatio] = useState(window.devicePixelRatio || 1);
+
+  useEffect(() => {
+    if (!window.matchMedia || !window.devicePixelRatio) {
+      return undefined;
+    }
+
+    const handleChange = () => {
+      setRatio(window.devicePixelRatio);
+    };
+
+    const mediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [ratio]);
+
+  return ratio;
+}