128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
import { useFrame, useThree } from "@react-three/fiber";
|
|
import {
|
|
useAddAction,
|
|
useRoofVisibility,
|
|
useToggleView,
|
|
useWallVisibility,
|
|
useUpdateScene,
|
|
useRenameModeStore,
|
|
useToolMode,
|
|
} from "../../../store/builder/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";
|
|
import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
|
|
|
|
const FloorGroup = ({
|
|
floorGroup,
|
|
lines,
|
|
referencePole,
|
|
hoveredDeletablePillar,
|
|
}: any) => {
|
|
const state = useThree();
|
|
const { roofVisibility } = useRoofVisibility();
|
|
const { wallVisibility } = useWallVisibility();
|
|
const { toggleView } = useToggleView();
|
|
const { scene, camera, raycaster, gl } = useThree();
|
|
const { addAction } = useAddAction();
|
|
const { toolMode } = useToolMode();
|
|
const { updateScene, setUpdateScene } = useUpdateScene();
|
|
const { setTop } = useTopData();
|
|
const { setLeft } = useLeftData();
|
|
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
|
|
|
|
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) => {
|
|
setIsRenameMode(false);
|
|
if (evt.button === 0) {
|
|
isLeftMouseDown = false;
|
|
if (!drag) {
|
|
if (addAction === "pillar") {
|
|
addPillar(referencePole, floorGroup);
|
|
}
|
|
if (toolMode === '3D-Delete') {
|
|
DeletePillar(hoveredDeletablePillar, floorGroup);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const onMouseMove = (evt: any) => {
|
|
if (!canvasElement) return;
|
|
const canvasRect = canvasElement.getBoundingClientRect();
|
|
const relativeX = evt.clientX - canvasRect.left;
|
|
const relativeY = evt.clientY - canvasRect.top;
|
|
if (!isRenameMode) {
|
|
setTop(relativeY);
|
|
setLeft(relativeX);
|
|
}
|
|
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);
|
|
};
|
|
}, [toolMode, addAction, isRenameMode]);
|
|
|
|
useFrame(() => {
|
|
hideRoof(roofVisibility, floorGroup, camera);
|
|
hideWalls(wallVisibility, scene, camera);
|
|
|
|
if (addAction === "pillar") {
|
|
addAndUpdateReferencePillar(raycaster, floorGroup, referencePole);
|
|
}
|
|
if (toolMode === '3D-Delete') {
|
|
DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<group ref={floorGroup} visible={!toggleView} name="floorGroup"></group>
|
|
);
|
|
};
|
|
|
|
export default FloorGroup;
|