1 files changed, 177 insertions, 0 deletions

diff --git a/subprojects/frontend/src/graph/ZoomCanvas.tsx b/subprojects/frontend/src/graph/ZoomCanvas.tsx
new file mode 100644
index 00000000..eb3e9285
--- /dev/null
+++ b/subprojects/frontend/src/graph/ZoomCanvas.tsx
@@ -0,0 +1,177 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Box from '@mui/material/Box';
+import * as d3 from 'd3';
+import { zoom as d3Zoom } from 'd3-zoom';
+import React, { useCallback, useRef, useState } from 'react';
+
+import ZoomButtons from './ZoomButtons';
+
+declare module 'd3-zoom' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Redeclaring type parameters.
+  interface ZoomBehavior<ZoomRefElement extends Element, Datum> {
+    // `@types/d3-zoom` does not contain the `center` function, because it is
+    // only available as a pull request for `d3-zoom`.
+    center(callback: (event: MouseEvent | Touch) => [number, number]): this;
+
+    // Custom `centroid` method added via patch.
+    centroid(centroid: [number, number]): this;
+  }
+}
+
+interface Transform {
+  x: number;
+  y: number;
+  k: number;
+}
+
+export default function ZoomCanvas({
+  children,
+  fitPadding,
+  transitionTime,
+}: {
+  children?: React.ReactNode;
+  fitPadding?: number;
+  transitionTime?: number;
+}): JSX.Element {
+  const canvasRef = useRef<HTMLDivElement | undefined>();
+  const elementRef = useRef<HTMLDivElement | undefined>();
+  const zoomRef = useRef<
+    d3.ZoomBehavior<HTMLDivElement, unknown> | undefined
+  >();
+  const fitPaddingOrDefault = fitPadding ?? ZoomCanvas.defaultProps.fitPadding;
+  const transitionTimeOrDefault =
+    transitionTime ?? ZoomCanvas.defaultProps.transitionTime;
+
+  const [zoom, setZoom] = useState<Transform>({ x: 0, y: 0, k: 1 });
+
+  const setCanvas = useCallback(
+    (canvas: HTMLDivElement | null) => {
+      canvasRef.current = canvas ?? undefined;
+      if (canvas === null) {
+        return;
+      }
+      const zoomBehavior = d3Zoom<HTMLDivElement, unknown>()
+        .duration(transitionTimeOrDefault)
+        .center((event) => {
+          const { width, height } = canvas.getBoundingClientRect();
+          const [x, y] = d3.pointer(event, canvas);
+          return [x - width / 2, y - height / 2];
+        })
+        .centroid([0, 0]);
+      zoomBehavior.on(
+        'zoom',
+        (event: d3.D3ZoomEvent<HTMLDivElement, unknown>) =>
+          setZoom(event.transform),
+      );
+      d3.select(canvas).call(zoomBehavior);
+      zoomRef.current = zoomBehavior;
+    },
+    [transitionTimeOrDefault],
+  );
+
+  const makeTransition = useCallback(
+    (element: HTMLDivElement) =>
+      d3.select(element).transition().duration(transitionTimeOrDefault),
+    [transitionTimeOrDefault],
+  );
+
+  const changeZoom = useCallback(
+    (event: React.MouseEvent, factor: number) => {
+      if (canvasRef.current === undefined || zoomRef.current === undefined) {
+        return;
+      }
+      const zoomTransition = makeTransition(canvasRef.current);
+      const center: [number, number] = [0, 0];
+      zoomRef.current.scaleBy(zoomTransition, factor, center);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [makeTransition],
+  );
+
+  const fitZoom = useCallback(
+    (event: React.MouseEvent) => {
+      if (
+        canvasRef.current === undefined ||
+        zoomRef.current === undefined ||
+        elementRef.current === undefined
+      ) {
+        return;
+      }
+      const { width: canvasWidth, height: canvasHeight } =
+        canvasRef.current.getBoundingClientRect();
+      const { width: scaledWidth, height: scaledHeight } =
+        elementRef.current.getBoundingClientRect();
+      const currentFactor = d3.zoomTransform(canvasRef.current).k;
+      const width = scaledWidth / currentFactor;
+      const height = scaledHeight / currentFactor;
+      if (width > 0 && height > 0) {
+        const factor = Math.min(
+          1.0,
+          (canvasWidth - fitPaddingOrDefault) / width,
+          (canvasHeight - fitPaddingOrDefault) / height,
+        );
+        const zoomTransition = makeTransition(canvasRef.current);
+        zoomRef.current.transform(
+          zoomTransition,
+          d3.zoomIdentity.scale(factor),
+        );
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [fitPaddingOrDefault, makeTransition],
+  );
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          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={elementRef}
+        >
+          {children}
+        </Box>
+      </Box>
+      <ZoomButtons changeZoom={changeZoom} fitZoom={fitZoom} />
+    </Box>
+  );
+}
+
+ZoomCanvas.defaultProps = {
+  children: undefined,
+  fitPadding: 64,
+  transitionTime: 250,
+};