Dwinzo_dev/app/src/modules/builder/groups/floorGroup.tsx

import { useFrame, useThree } from "@react-three/fiber";
import { useAddAction, useDeleteModels, useRoofVisibility, useToggleView, useWallVisibility, useUpdateScene } from "../../../store/store";
import hideRoof from "../geomentries/roofs/hideRoof";
import hideWalls from "../geomentries/walls/hideWalls";
import addAndUpdateReferencePillar from "../geomentries/pillars/addAndUpdateReferencePillar";
import { useEffect } from "react";
import addPillar from "../geomentries/pillars/addPillar";
import DeletePillar from "../geomentries/pillars/deletePillar";
import DeletableHoveredPillar from "../geomentries/pillars/deletableHoveredPillar";
import loadFloor from "../geomentries/floors/loadFloor";

const FloorGroup = ({ floorGroup, lines, referencePole, hoveredDeletablePillar }: any) => {
    const state = useThree();
    const { roofVisibility, setRoofVisibility } = useRoofVisibility();
    const { wallVisibility, setWallVisibility } = useWallVisibility();
    const { toggleView, setToggleView } = useToggleView();
    const { scene, camera, pointer, raycaster, gl } = useThree();
    const { addAction, setAddAction } = useAddAction();
    const { deleteModels, setDeleteModels } = useDeleteModels();
    const { updateScene, setUpdateScene } = useUpdateScene();

    useEffect(() => {
        if (updateScene) {
            loadFloor(lines, floorGroup);
            setUpdateScene(false);
        }
    }, [updateScene])

    useEffect(() => {
        if (!addAction) {
            if (referencePole.current) {
                (referencePole.current as any).material.dispose();
                (referencePole.current.geometry as any).dispose();
                floorGroup.current.remove(referencePole.current);
                referencePole.current = undefined;
            }
        }
    }, [addAction]);

    useEffect(() => {
        const canvasElement = gl.domElement;
        let drag = false;
        let isLeftMouseDown = false;

        const onMouseDown = (evt: any) => {
            if (evt.button === 0) {
                isLeftMouseDown = true;
                drag = false;
            }
        };

        const onMouseUp = (evt: any) => {
            if (evt.button === 0) {
                isLeftMouseDown = false;
                if (!drag) {
                    if (addAction === "pillar") {
                        addPillar(referencePole, floorGroup);
                    }
                    if (deleteModels) {
                        DeletePillar(hoveredDeletablePillar, floorGroup);
                    }
                }
            }
        };

        const onMouseMove = () => {
            if (isLeftMouseDown) {
                drag = true;
            }
        };

        canvasElement.addEventListener("mousedown", onMouseDown);
        canvasElement.addEventListener("mouseup", onMouseUp);
        canvasElement.addEventListener("mousemove", onMouseMove);

        return () => {
            canvasElement.removeEventListener("mousedown", onMouseDown);
            canvasElement.removeEventListener("mouseup", onMouseUp);
            canvasElement.removeEventListener("mousemove", onMouseMove);
        };
    }, [deleteModels, addAction])

    useFrame(() => {
        hideRoof(roofVisibility, floorGroup, camera);
        hideWalls(wallVisibility, scene, camera);

        if (addAction === "pillar") {
            addAndUpdateReferencePillar(raycaster, floorGroup, referencePole);
        }
        if (deleteModels) {
            DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar);
        }
    })

    return (
        <group ref={floorGroup} visible={!toggleView} name="floorGroup">
        </group>
    )
}

export default FloorGroup;