fix: relocate camera on window resize (#1160)

Co-authored-by: Mario <[email protected]>

client/src/features/visualizer-threejs/CameraControls.tsx

@@ -3,34 +3,56 @@ import { getCameraAngles } from "./utils";
 import React, { useEffect } from "react";
 import { useThree } from "@react-three/fiber";
 import { CanvasElement } from "./enums";
-import { useTangleStore } from "./store";
 import { VISUALIZER_PADDINGS } from "./constants";
 
+const CAMERA_ANGLES = getCameraAngles();
+
 const CameraControls = () => {
-    const [shouldLockZoom, setShouldLockZoom] = React.useState<boolean>(false);
     const controls = React.useRef<DreiCameraControls>(null);
 
-    const CAMERA_ANGLES = getCameraAngles();
+    const scene = useThree((state) => state.scene);
+    const mesh = scene.getObjectByName(CanvasElement.TangleWrapperMesh) as THREE.Mesh | undefined;
 
-    const zoom = useTangleStore((s) => s.zoom);
-    const get = useThree((state) => state.get);
-    const mesh = get().scene.getObjectByName(CanvasElement.TangleWrapperMesh);
+    /**
+     * Locks the camera zoom to the current zoom value.
+     */
+    function lockCameraZoom(controls: DreiCameraControls) {
+        const zoom = controls.camera.zoom;
+        controls.maxZoom = zoom;
+        controls.minZoom = zoom;
+    }
 
-    // Set fixed zoom
-    useEffect(() => {
-        if (controls.current && shouldLockZoom) {
-            controls.current.maxZoom = zoom;
-            controls.current.minZoom = zoom;
+    /**
+     * Unlocks the camera zoom for free movement.
+     */
+    function unlockCameraZoom(controls: DreiCameraControls) {
+        controls.maxZoom = Infinity;
+        controls.minZoom = 0.01;
+    }
+
+    /**
+     * Fits the camera to the TangleMesh.
+     */
+    function fitCameraToTangle(controls: DreiCameraControls | null, mesh?: THREE.Mesh) {
+        if (controls && mesh) {
+            unlockCameraZoom(controls);
+            controls.fitToBox(mesh, false, { ...VISUALIZER_PADDINGS });
+            controls.setOrbitPoint(0, 0, 0);
+            lockCameraZoom(controls);
         }
-    }, [controls, zoom, shouldLockZoom]);
+    }
 
-    // Fix to TangleMesh
+    /**
+     * Fit camera to TangleMesh on mount and on window resize.
+     */
     useEffect(() => {
-        if (controls.current && mesh) {
-            controls.current.fitToBox(mesh, false, { ...VISUALIZER_PADDINGS });
-            controls.current.setOrbitPoint(0, 0, 0);
-            setShouldLockZoom(true);
-        }
+        const adjustCamera = () => fitCameraToTangle(controls.current, mesh);
+        adjustCamera();
+
+        window.addEventListener("resize", adjustCamera);
+        return () => {
+            window.removeEventListener("resize", adjustCamera);
+        };
     }, [controls, mesh]);
 
     return <DreiCameraControls ref={controls} makeDefault {...CAMERA_ANGLES} />;