first commit

app/src/modules/scene/controls/controls.tsx

@@ -0,0 +1,155 @@
+import { CameraControls } from "@react-three/drei";
+import { useRef, useEffect } from "react";
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import * as CONSTANTS from '../../../types/world/worldConstants';
+
+import { useSocketStore, useToggleView, useResetCamera } from "../../../store/builder/store";
+import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
+import updateCamPosition from "../camera/updateCameraPosition";
+import CamMode from "../camera/camMode";
+import SwitchView from "../camera/switchView";
+import SelectionControls from "./selectionControls/selectionControls";
+import TransformControl from "./transformControls/transformControls";
+import { useParams } from "react-router-dom";
+
+export default function Controls() {
+    const controlsRef = useRef<CameraControls>(null);
+
+    const { toggleView } = useToggleView();
+    const { resetCamera, setResetCamera } = useResetCamera();
+    const { socket } = useSocketStore();
+    const state = useThree();
+    const { projectId } = useParams();
+
+
+    useEffect(() => {
+        if (controlsRef.current) {
+            (controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
+            (controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
+        }
+        const email = localStorage.getItem("email");
+        const organization = email!.split("@")[1].split(".")[0];
+        const userId = localStorage.getItem("userId")!;
+
+        getCamera(organization, userId, projectId).then((data) => {
+            // console.log('data: ', data);
+            if (data && data.position && data.target) {
+                controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
+                controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
+            } else {
+                controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
+                controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
+            }
+        })
+            .catch((error) => console.error("Failed to fetch camera data:", error));
+    }, []);
+
+    useEffect(() => {
+        if (resetCamera) {
+            controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
+            controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
+            controlsRef.current?.rotateAzimuthTo(CONSTANTS.threeDimension.defaultAzimuth);
+
+            localStorage.setItem("cameraPosition", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition)));
+            localStorage.setItem("controlTarget", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget)));
+
+            const email = localStorage.getItem('email')
+            const organization = (email!.split("@")[1]).split(".")[0];
+            const userId = localStorage.getItem("userId");
+
+            const camData = {
+                organization: organization,
+                userId: userId,
+                position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
+                target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
+                rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation),
+                socketId: socket.id,
+                projectId
+            };
+            // console.log('CameracamData: ', camData);
+            socket.emit('v1:Camera:set', camData)
+
+            setResetCamera(false);
+        }
+    }, [resetCamera]);
+
+    useEffect(() => {
+        controlsRef.current?.setBoundary(new THREE.Box3(new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom), new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)));
+        // state.scene.add(new THREE.Box3Helper(new THREE.Box3(new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom), new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)), 0xffff00));
+        let hasInteracted = false;
+        let intervalId: NodeJS.Timeout | null = null;
+
+        const handleRest = () => {
+            if (hasInteracted && controlsRef.current && state.camera.position && !toggleView) {
+                const position = state.camera.position;
+                if (position.x === 0 && position.y === 0 && position.z === 0) return;
+                updateCamPosition(controlsRef, socket, position, state.camera.rotation, projectId);
+                stopInterval();
+            }
+        };
+
+        const startInterval = () => {
+            hasInteracted = true;
+            if (!intervalId) {
+                intervalId = setInterval(() => {
+                    if (controlsRef.current && !toggleView) {
+                        handleRest();
+                    }
+                }, CONSTANTS.camPositionUpdateInterval);
+            }
+        };
+
+        const stopInterval = () => {
+            if (intervalId) {
+                clearInterval(intervalId);
+                intervalId = null;
+            }
+        };
+
+        const controls = controlsRef.current;
+        if (controls) {
+            controls.addEventListener("sleep", handleRest);
+            controls.addEventListener("control", startInterval);
+            controls.addEventListener("controlend", stopInterval);
+        }
+
+        return () => {
+            if (controls) {
+                controls.removeEventListener("sleep", handleRest);
+                controls.removeEventListener("control", startInterval);
+                controls.removeEventListener("controlend", stopInterval);
+            }
+            stopInterval();
+        };
+    }, [toggleView, state, socket]);
+
+    return (
+        <>
+            <CameraControls
+                makeDefault
+                ref={controlsRef}
+                minDistance={toggleView ? CONSTANTS.twoDimension.minDistance : CONSTANTS.threeDimension.minDistance}
+                maxDistance={CONSTANTS.thirdPersonControls.maxDistance}
+                minZoom={CONSTANTS.thirdPersonControls.minZoom}
+                maxZoom={CONSTANTS.thirdPersonControls.maxZoom}
+                maxPolarAngle={CONSTANTS.thirdPersonControls.maxPolarAngle}
+                camera={state.camera}
+                verticalDragToForward={true}
+                boundaryEnclosesCamera={true}
+                dollyToCursor={toggleView}
+            >
+
+                <SwitchView />
+
+                <CamMode />
+
+            </CameraControls>
+
+            <SelectionControls />
+
+            <TransformControl />
+
+        </>
+    );
+}