camera zoom handling across components; unify zoom level type and improve state management

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,5 +1,5 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomInOptions, ZoomLevel } from "../../types/types";
+import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
 import { useCameraZoom } from "../../hooks/useCameraZoom";
 import { useEffect } from "react";
@@ -7,8 +7,8 @@ import { useEffect } from "react";
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
-  zoomLevel?: ZoomLevel;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number) => void;
 };
 
 export const SnapshotContainer = ({
@@ -18,50 +18,29 @@ export const SnapshotContainer = ({
   onZoomLevelChange,
 }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  const { mutation } = useCameraZoom();
   const cameraControllerSide =
     side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { mutation } = useCameraZoom({ camera: cameraControllerSide });
 
-  const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
-    const bounds = canvasRef.current?.getBoundingClientRect();
-    if (!bounds) return;
-    const left = bounds.left;
-    const top = bounds.top;
-    const x = event.pageX;
-    const y = event.pageY;
-    const cw = canvasRef.current?.clientWidth;
-    const ch = canvasRef.current?.clientHeight;
-    if (!cw || !ch) return;
-    const px = x / cw;
-    const py = y / ch;
-
-    const baseLevel = zoomLevel?.level ?? 1;
+  const handleZoomClick = () => {
+    const baseLevel = zoomLevel ?? 1;
     const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
 
-    if (onZoomLevelChange)
-      onZoomLevelChange({
-        left,
-        top,
-        x,
-        y,
-        px,
-        py,
-        level: newLevel,
-      });
+    if (onZoomLevelChange) onZoomLevelChange(newLevel);
 
-    if (!zoomLevel?.level) return;
+    if (!zoomLevel) return;
   };
 
   useEffect(() => {
-    if (zoomLevel?.level) {
+    if (zoomLevel) {
       const zoomInOptions: ZoomInOptions = {
         camera: cameraControllerSide,
-        multiplier: zoomLevel.level,
+        multiplier: zoomLevel,
       };
       mutation.mutate(zoomInOptions);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zoomLevel?.level]);
+  }, [zoomLevel]);
 
   if (isError) return <p className="h-100">An error occurred</p>;
   if (isPending) return <p className="h-100">Loading...</p>;