updated cam base

src/components/CameraOverview/SnapshotContainer.tsx

@@ -15,11 +15,34 @@ export const SnapshotContainer = ({
   if (isError) return <>An error occurred</>;
   if (isPending) return <>Loading...</>;
 
+  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;
+    console.log({
+      left,
+      top,
+      x,
+      y,
+      px,
+      py,
+    });
+  };
+
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
       <div className="w-full">
         <canvas
+          onClick={handleZoomClick}
           ref={canvasRef}
           className="absolute inset-0 object-contain min-h-[100%] z-20"
         />