first of many performance improvements: no unnecessary TextSVG re-renders - more to follow

src/App/TopPanel/ZoomButtons.tsx

@@ -0,0 +1,47 @@
+import { ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from "@/VisualEditor/parameters";
+import { Dispatch, memo, SetStateAction, useEffect } from "react";
+import { KeyInfoHidden, KeyInfoVisible } from "../KeyInfo";
+
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+
+export const ZoomButtons = memo(function ZoomButtons({showKeys, zoom, setZoom}: {showKeys: boolean, zoom: number, setZoom: Dispatch<SetStateAction<number>>}) {
+
+  const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden;
+
+  function onZoomIn() {
+    setZoom(zoom => Math.min(zoom * ZOOM_STEP, ZOOM_MAX));
+  }
+  function onZoomOut() {
+    setZoom(zoom => Math.max(zoom / ZOOM_STEP, ZOOM_MIN));
+  }
+  
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey) {
+          if (e.key === "+") {
+          e.preventDefault();
+          onZoomIn();
+        }
+        if (e.key === "-") {
+          e.preventDefault();
+          onZoomOut();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
+  return <>
+    <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>-</kbd></>}>
+      <button title="zoom out" onClick={onZoomOut} disabled={zoom <= ZOOM_MIN}><ZoomOutIcon fontSize="small"/></button>
+    </KeyInfo>
+    <input title="current zoom level" value={zoom.toFixed(3)} style={{width:40}} readOnly/>
+    <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>+</kbd></>}>
+      <button title="zoom in" onClick={onZoomIn} disabled={zoom >= ZOOM_MAX}><ZoomInIcon fontSize="small"/></button>
+    </KeyInfo>
+  </>;
+});