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

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];
        getCamera(organization, localStorage.getItem("userId")!,projectId).then((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
            };
            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 />

        </>
    );
}