5 files changed, 247 insertions, 95 deletions

diff --git a/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch b/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch
new file mode 100644
index 00000000..88d32c72
--- /dev/null
+++ b/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch
@@ -0,0 +1,134 @@
+diff --git a/src/zoom.js b/src/zoom.js
+index d56438823b2882856f156b0915ccbac038d6923e..50936066a3597c46ad65f690e9c8417e9d3375f8 100644
+--- a/src/zoom.js
++++ b/src/zoom.js
+@@ -14,6 +14,10 @@ function defaultFilter(event) {
+   return (!event.ctrlKey || event.type === 'wheel') && !event.button;
+ }
+ 
++function defaultCenter(event) {
++  return pointer(event, this);
++}
++
+ function defaultExtent() {
+   var e = this;
+   if (e instanceof SVGElement) {
+@@ -27,6 +31,10 @@ function defaultExtent() {
+   return [[0, 0], [e.clientWidth, e.clientHeight]];
+ }
+ 
++function defaultCentroid(extent) {
++  return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2];
++}
++
+ function defaultTransform() {
+   return this.__zoom || identity;
+ }
+@@ -52,7 +60,9 @@ function defaultConstrain(transform, extent, translateExtent) {
+ 
+ export default function() {
+   var filter = defaultFilter,
++      center = defaultCenter,
+       extent = defaultExtent,
++      centroid = defaultCentroid,
+       constrain = defaultConstrain,
+       wheelDelta = defaultWheelDelta,
+       touchable = defaultTouchable,
+@@ -148,9 +158,6 @@ export default function() {
+     return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y);
+   }
+ 
+-  function centroid(extent) {
+-    return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2];
+-  }
+ 
+   function schedule(transition, transform, point, event) {
+     transition
+@@ -243,6 +250,7 @@ export default function() {
+     if (g.wheel) {
+       if (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) {
+         g.mouse[1] = t.invert(g.mouse[0] = p);
++        g.mouse[2] = center.apply(this, arguments);
+       }
+       clearTimeout(g.wheel);
+     }
+@@ -252,14 +260,14 @@ export default function() {
+ 
+     // Otherwise, capture the mouse point and location at the start.
+     else {
+-      g.mouse = [p, t.invert(p)];
++      g.mouse = [p, t.invert(p), center.apply(this, arguments)];
+       interrupt(this);
+       g.start();
+     }
+ 
+     noevent(event);
+     g.wheel = setTimeout(wheelidled, wheelDelay);
+-    g.zoom("mouse", constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
++    g.zoom("mouse", constrain(translate(scale(t, k), g.mouse[2], t.invert(g.mouse[2])), g.extent, translateExtent));
+ 
+     function wheelidled() {
+       g.wheel = null;
+@@ -278,7 +286,7 @@ export default function() {
+ 
+     dragDisable(event.view);
+     nopropagation(event);
+-    g.mouse = [p, this.__zoom.invert(p)];
++    g.prev = p;
+     interrupt(this);
+     g.start();
+ 
+@@ -288,8 +296,10 @@ export default function() {
+         var dx = event.clientX - x0, dy = event.clientY - y0;
+         g.moved = dx * dx + dy * dy > clickDistance2;
+       }
++      var p = pointer(event, currentTarget);
+       g.event(event)
+-       .zoom("mouse", constrain(translate(g.that.__zoom, g.mouse[0] = pointer(event, currentTarget), g.mouse[1]), g.extent, translateExtent));
++       .zoom("mouse", constrain(translate(g.that.__zoom, p, g.that.__zoom.invert(g.prev)), g.extent, translateExtent));
++      g.prev = p;
+     }
+ 
+     function mouseupped(event) {
+@@ -303,7 +313,7 @@ export default function() {
+   function dblclicked(event, ...args) {
+     if (!filter.apply(this, arguments)) return;
+     var t0 = this.__zoom,
+-        p0 = pointer(event.changedTouches ? event.changedTouches[0] : event, this),
++        p0 = center.call(this, event.changedTouches ? event.changedTouches[0] : event),
+         p1 = t0.invert(p0),
+         k1 = t0.k * (event.shiftKey ? 0.5 : 2),
+         t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
+@@ -322,7 +332,7 @@ export default function() {
+ 
+     nopropagation(event);
+     for (i = 0; i < n; ++i) {
+-      t = touches[i], p = pointer(t, this);
++      t = touches[i], p = center.call(this, t);
+       p = [p, this.__zoom.invert(p), t.identifier];
+       if (!g.touch0) g.touch0 = p, started = true, g.taps = 1 + !!touchstarting;
+       else if (!g.touch1 && g.touch0[2] !== p[2]) g.touch1 = p, g.taps = 0;
+@@ -345,7 +355,7 @@ export default function() {
+ 
+     noevent(event);
+     for (i = 0; i < n; ++i) {
+-      t = touches[i], p = pointer(t, this);
++      t = touches[i], p = center.call(this, t);
+       if (g.touch0 && g.touch0[2] === t.identifier) g.touch0[0] = p;
+       else if (g.touch1 && g.touch1[2] === t.identifier) g.touch1[0] = p;
+     }
+@@ -406,6 +416,14 @@ export default function() {
+     return arguments.length ? (touchable = typeof _ === "function" ? _ : constant(!!_), zoom) : touchable;
+   };
+ 
++  zoom.center = function(_) {
++    return arguments.length ? (center = typeof _ === "function" ? _ : constant([+_[0], +_[1]]), zoom) : center;
++  };
++
++  zoom.centroid = function(_) {
++    return arguments.length ? (centroid = typeof _ === "function" ? _ : constant([+_[0], +_[1]]), zoom) : centroid;
++  };
++
+   zoom.extent = function(_) {
+     return arguments.length ? (extent = typeof _ === "function" ? _ : constant([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
+   };
diff --git a/package.json b/package.json
index bdac68a6..d527c291 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "typescript": "5.1.6"
   },
   "resolutions": {
-    "d3-zoom@npm:^3.0.0": "git@github.com:d3/d3-zoom.git#commit=3afbe2ae2dfb3129231c5567db56dafb2d6a56a6"
+    "d3-zoom@npm:^3.0.0": "patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch",
+    "d3-zoom@npm:3": "patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch"
   }
 }
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 9df8d85f..97f6baf6 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -51,7 +51,7 @@
     "d3": "^7.8.5",
     "d3-graphviz": "patch:d3-graphviz@npm%3A5.1.0#~/.yarn/patches/d3-graphviz-npm-5.1.0-ba6bed3fec.patch",
     "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0",
+    "d3-zoom": "patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch",
     "escape-string-regexp": "^5.0.0",
     "json-stringify-pretty-compact": "^4.0.0",
     "lodash-es": "^4.17.21",
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index aec5d1c6..6ca3bc87 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -11,6 +11,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
+import { CSSProperties } from '@mui/material/styles/createTypography';
 import * as d3 from 'd3';
 import { type Graphviz, graphviz } from 'd3-graphviz';
 import type { BaseType, Selection } from 'd3-selection';
@@ -109,15 +110,21 @@ export default function GraphArea(): JSX.Element {
       zoomBehavior as unknown as {
         center(callback: (event: MouseEvent) => [number, number]): unknown;
       }
-    ).center((event: MouseEvent) => {
+    ).center((event: MouseEvent | Touch) => {
       const { width, height } = element.getBoundingClientRect();
       const [x, y] = d3.pointer(event, element);
       return [x - width / 2, y - height / 2];
     });
+    // Custom `centroid` method added via patch.
+    (
+      zoomBehavior as unknown as {
+        centroid(centroid: [number, number]): unknown;
+      }
+    ).centroid([0, 0]);
     zoomBehavior.on('zoom', (event: d3.D3ZoomEvent<HTMLDivElement, unknown>) =>
       setZoom(event.transform),
     );
-    d3.select(element).call(zoomBehavior).on('dblclick.zoom', null);
+    d3.select(element).call(zoomBehavior);
     zoomRef.current = zoomBehavior;
   }, []);
 
@@ -213,25 +220,17 @@ export default function GraphArea(): JSX.Element {
     [editorStore],
   );
 
-  const {
-    transitions: {
-      duration: { short: zoomDuration },
-    },
-  } = theme;
-  const changeZoom = useCallback(
-    (event: React.MouseEvent, factor: number) => {
-      if (canvasRef.current === undefined || zoomRef.current === undefined) {
-        return;
-      }
-      const selection = d3.select(canvasRef.current);
-      const zoomTransition = selection.transition().duration(zoomDuration);
-      const center: [number, number] = [0, 0];
-      zoomRef.current.scaleBy(zoomTransition, factor, center);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [zoomDuration],
-  );
+  const changeZoom = useCallback((event: React.MouseEvent, factor: number) => {
+    if (canvasRef.current === undefined || zoomRef.current === undefined) {
+      return;
+    }
+    const selection = d3.select(canvasRef.current);
+    const zoomTransition = selection.transition().duration(250);
+    const center: [number, number] = [0, 0];
+    zoomRef.current.scaleBy(zoomTransition, factor, center);
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
 
   const fitZoom = useCallback((event: React.MouseEvent) => {
     if (
@@ -255,7 +254,8 @@ export default function GraphArea(): JSX.Element {
         (canvasHeight - 64) / height,
       );
       const selection = d3.select(canvasRef.current);
-      zoomRef.current.transform(selection, d3.zoomIdentity.scale(factor));
+      const zoomTransition = selection.transition().duration(250);
+      zoomRef.current.transform(zoomTransition, d3.zoomIdentity.scale(factor));
     }
     event.preventDefault();
     event.stopPropagation();
@@ -268,79 +268,96 @@ export default function GraphArea(): JSX.Element {
         height: '100%',
         position: 'relative',
         overflow: 'hidden',
-        '& svg': {
-          userSelect: 'none',
-          '& .node': {
-            '& text': {
-              ...theme.typography.body2,
-              fill: theme.palette.text.primary,
-            },
-            '& [stroke="black"]': {
-              stroke: theme.palette.text.primary,
-            },
-            '& [fill="green"]': {
-              fill:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primary.dark
-                  : theme.palette.primary.light,
-            },
-            '& [fill="white"]': {
-              fill: theme.palette.background.default,
-              stroke: theme.palette.background.default,
-            },
-          },
-          '& .edge': {
-            '& text': {
-              ...theme.typography.caption,
-              fill: theme.palette.text.primary,
-            },
-            '& [stroke="black"]': {
-              stroke: theme.palette.text.primary,
-            },
-            '& [fill="black"]': {
-              fill: theme.palette.text.primary,
-            },
-          },
-          '& .edge-UNKNOWN': {
-            '& text': {
-              fill: theme.palette.text.secondary,
-            },
-            '& [stroke="black"]': {
-              stroke: theme.palette.text.secondary,
-            },
-            '& [fill="black"]': {
-              fill: theme.palette.text.secondary,
-            },
-          },
-          '& .edge-ERROR': {
-            '& text': {
-              fill: theme.palette.error.main,
-            },
-            '& [stroke="black"]': {
-              stroke: theme.palette.error.main,
-            },
-            '& [fill="black"]': {
-              fill: theme.palette.error.main,
-            },
-          },
-        },
       }}
-      ref={setCanvas}
     >
       <Box
         sx={{
           position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: `
+          overflow: 'hidden',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+        ref={setCanvas}
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: `
               translate(${zoom.x}px, ${zoom.y}px)
               scale(${zoom.k})
               translate(-50%, -50%)
             `,
-          transformOrigin: '0 0',
-        }}
-        ref={setElement}
-      />
+            transformOrigin: '0 0',
+            '& svg': {
+              userSelect: 'none',
+              '& .node': {
+                '& text': {
+                  ...(theme.typography.body2 as Omit<
+                    CSSProperties,
+                    '@font-face'
+                  >),
+                  fill: theme.palette.text.primary,
+                },
+                '& [stroke="black"]': {
+                  stroke: theme.palette.text.primary,
+                },
+                '& [fill="green"]': {
+                  fill:
+                    theme.palette.mode === 'dark'
+                      ? theme.palette.primary.dark
+                      : theme.palette.primary.light,
+                },
+                '& [fill="white"]': {
+                  fill: theme.palette.background.default,
+                  stroke: theme.palette.background.default,
+                },
+              },
+              '& .edge': {
+                '& text': {
+                  ...(theme.typography.caption as Omit<
+                    CSSProperties,
+                    '@font-face'
+                  >),
+                  fill: theme.palette.text.primary,
+                },
+                '& [stroke="black"]': {
+                  stroke: theme.palette.text.primary,
+                },
+                '& [fill="black"]': {
+                  fill: theme.palette.text.primary,
+                },
+              },
+              '& .edge-UNKNOWN': {
+                '& text': {
+                  fill: theme.palette.text.secondary,
+                },
+                '& [stroke="black"]': {
+                  stroke: theme.palette.text.secondary,
+                },
+                '& [fill="black"]': {
+                  fill: theme.palette.text.secondary,
+                },
+              },
+              '& .edge-ERROR': {
+                '& text': {
+                  fill: theme.palette.error.main,
+                },
+                '& [stroke="black"]': {
+                  stroke: theme.palette.error.main,
+                },
+                '& [fill="black"]': {
+                  fill: theme.palette.error.main,
+                },
+              },
+            },
+          }}
+          ref={setElement}
+        />
+      </Box>
       <Stack
         direction="column"
         p={1}
diff --git a/yarn.lock b/yarn.lock
index 2101a994..ca10e7c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2151,7 +2151,7 @@ __metadata:
     d3: "npm:^7.8.5"
     d3-graphviz: "patch:d3-graphviz@npm%3A5.1.0#~/.yarn/patches/d3-graphviz-npm-5.1.0-ba6bed3fec.patch"
     d3-selection: "npm:^3.0.0"
-    d3-zoom: "npm:^3.0.0"
+    d3-zoom: "patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch"
     escape-string-regexp: "npm:^5.0.0"
     eslint: "npm:^8.47.0"
     eslint-config-airbnb: "npm:^19.0.4"
@@ -4144,29 +4144,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-zoom@git@github.com:d3/d3-zoom.git#commit=3afbe2ae2dfb3129231c5567db56dafb2d6a56a6":
+"d3-zoom@npm:3.0.0":
   version: 3.0.0
-  resolution: "d3-zoom@git@github.com:d3/d3-zoom.git#commit=3afbe2ae2dfb3129231c5567db56dafb2d6a56a6"
+  resolution: "d3-zoom@npm:3.0.0"
   dependencies:
     d3-dispatch: "npm:1 - 3"
     d3-drag: "npm:2 - 3"
     d3-interpolate: "npm:1 - 3"
     d3-selection: "npm:2 - 3"
     d3-transition: "npm:2 - 3"
-  checksum: 0cca9382fd9cf7383ecd89ae2f4a828b5088e7801eb89da0656c1d3512cda03bfade727db936721b8004a3142dbbf955a408c99cf370539e3a985da9161c6d54
+  checksum: ee2036479049e70d8c783d594c444fe00e398246048e3f11a59755cd0e21de62ece3126181b0d7a31bf37bcf32fd726f83ae7dea4495ff86ec7736ce5ad36fd3
   languageName: node
   linkType: hard
 
-"d3-zoom@npm:3":
+"d3-zoom@patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch":
   version: 3.0.0
-  resolution: "d3-zoom@npm:3.0.0"
+  resolution: "d3-zoom@patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch::version=3.0.0&hash=135f1c"
   dependencies:
     d3-dispatch: "npm:1 - 3"
     d3-drag: "npm:2 - 3"
     d3-interpolate: "npm:1 - 3"
     d3-selection: "npm:2 - 3"
     d3-transition: "npm:2 - 3"
-  checksum: ee2036479049e70d8c783d594c444fe00e398246048e3f11a59755cd0e21de62ece3126181b0d7a31bf37bcf32fd726f83ae7dea4495ff86ec7736ce5ad36fd3
+  checksum: fc56f5be9f492b7d7bba91b166f4b93e1761599a23496b0f2890e295476971a8db040b0c2069b670897984ed28c4f0d151caf1d51e305fe635e80cdb94f2c2af
   languageName: node
   linkType: hard