Switch zoom controls to MUI

src/components/GraphViewport.tsx

@@ -1,9 +1,14 @@
 import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
 import { Component, createRef } from 'react';
 
 import { renderSvg } from '../graph/svg-renderer';
 import { TypeGraph } from '../graph/type-graph';
 import { Viewport } from '../graph/viewport';
+import ZoomInIcon from './icons/zoom-in.svg';
+import ZoomOutIcon from './icons/zoom-out.svg';
+import ZoomResetIcon from './icons/zoom-reset.svg';
 import LoadingAnimation from './utils/LoadingAnimation';
 
 interface GraphViewportProps {
@@ -119,6 +124,7 @@ export default class GraphViewport extends Component<
 
   render() {
     const isLoading = this.state.svgViewport == null;
+    const { svgViewport } = this.state;
     return (
       <Box
         sx={(theme) => ({
@@ -145,6 +151,41 @@ export default class GraphViewport extends Component<
             },
           }}
         />
+        {!isLoading && (
+          <Stack
+            alignItems="center"
+            spacing={0.8}
+            padding={1}
+            position="absolute"
+            bottom={0}
+            right={0}
+          >
+            <IconButton
+              aria-label="Zoom in"
+              color="secondary"
+              sx={{ width: 18 }}
+              onClick={() => svgViewport?.zoomIn()}
+            >
+              <ZoomInIcon />
+            </IconButton>
+            <IconButton
+              aria-label="Reset zoom"
+              color="secondary"
+              sx={{ width: 55 }}
+              onClick={() => svgViewport?.reset()}
+            >
+              <ZoomResetIcon />
+            </IconButton>
+            <IconButton
+              aria-label="Zoom out"
+              color="secondary"
+              sx={{ width: 18 }}
+              onClick={() => svgViewport?.zoomOut()}
+            >
+              <ZoomOutIcon />
+            </IconButton>
+          </Stack>
+        )}
         {isLoading && <LoadingAnimation />}
       </Box>
     );

src/components/viewport.css

@@ -4,13 +4,6 @@ g.graph > polygon {
   fill: transparent;
 }
 
-#svg-pan-zoom-controls {
-  & path {
-    fill-opacity: 0.75;
-    fill: var(--field-name-color);
-  }
-}
-
 /* Nodes Styling */
 .node {
   pointer-events: bounding-box;

src/graph/viewport.ts

@@ -12,6 +12,9 @@ interface Point {
 interface Instance {
   resize(): Instance;
   zoom(scale: number): void;
+  zoomIn(): void;
+  zoomOut(): void;
+  reset(): void;
   getPan(): Point;
   getZoom(): number;
   pan(point: Point): Instance;
@@ -73,7 +76,6 @@ export class Viewport {
       zoomScaleSensitivity: 0.25,
       minZoom: 0.95,
       maxZoom: this.maxZoom,
-      controlIconsEnabled: true,
     });
     this.zoomer.zoom(0.95);
   }
@@ -220,6 +222,18 @@ export class Viewport {
     });
   }
 
+  zoomIn() {
+    this.zoomer.zoomIn();
+  }
+
+  zoomOut() {
+    this.zoomer.zoomOut();
+  }
+
+  reset() {
+    this.zoomer.reset();
+  }
+
   destroy() {
     this.resizeObserver.disconnect();
     try {