refactor(frontend): crisper zoom in WebKitGTK

Use the non-standard zoom: property whenever available,
because it gives a crisper result than transform: scale() in WebKitGTK.

See https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

1 files changed, 22 insertions, 7 deletions

diff --git a/subprojects/frontend/src/graph/ZoomCanvas.tsx b/subprojects/frontend/src/graph/ZoomCanvas.tsx
index 0254bc59..8f4f1776 100644
--- a/subprojects/frontend/src/graph/ZoomCanvas.tsx
+++ b/subprojects/frontend/src/graph/ZoomCanvas.tsx
@@ -40,6 +40,8 @@ export type FitZoomCallback = ((newSize?: {
 }) => void) &
   ((newSize: boolean) => void);
 
+const useZoom = 'zoom' in document.body.style;
+
 export default function ZoomCanvas({
   children,
   fitPadding,
@@ -83,8 +85,12 @@ export default function ZoomCanvas({
       if (newSize === undefined || typeof newSize === 'boolean') {
         const elementRect = elementRef.current.getBoundingClientRect();
         const currentFactor = d3.zoomTransform(canvasRef.current).k;
-        width = elementRect.width / currentFactor;
-        height = elementRect.height / currentFactor;
+        if (useZoom) {
+          ({ width, height } = elementRect);
+        } else {
+          width = elementRect.width / currentFactor;
+          height = elementRect.height / currentFactor;
+        }
       } else {
         ({ width, height } = newSize);
       }
@@ -194,11 +200,20 @@ export default function ZoomCanvas({
             position: 'absolute',
             top: '50%',
             left: '50%',
-            transform: `
-              translate(${zoom.x}px, ${zoom.y}px)
-              scale(${zoom.k})
-              translate(-50%, -50%)
-            `,
+            ...(useZoom
+              ? {
+                  transform: `
+                    translate(calc(${zoom.x / zoom.k}px - 50%), calc(${zoom.y / zoom.k}px - 50%))
+                  `,
+                  zoom: zoom.k,
+                }
+              : {
+                  transform: `
+                    translate(${zoom.x}px, ${zoom.y}px)
+                    scale(${zoom.k})
+                    translate(-50%, -50%)
+                  `,
+                }),
             transformOrigin: '0 0',
           }}
           ref={elementRef}