first commit

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

@@ -0,0 +1,127 @@
+import { useFrame, useThree } from "@react-three/fiber";
+import {
+  useAddAction,
+  useDeleteTool,
+  useRoofVisibility,
+  useToggleView,
+  useWallVisibility,
+  useUpdateScene,
+  useRenameModeStore,
+} 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 { deleteTool } = useDeleteTool();
+  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 (deleteTool) {
+            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);
+    };
+  }, [deleteTool, addAction, isRenameMode]);
+
+  useFrame(() => {
+    hideRoof(roofVisibility, floorGroup, camera);
+    hideWalls(wallVisibility, scene, camera);
+
+    if (addAction === "pillar") {
+      addAndUpdateReferencePillar(raycaster, floorGroup, referencePole);
+    }
+    if (deleteTool) {
+      DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar);
+    }
+  });
+
+  return (
+    <group ref={floorGroup} visible={!toggleView} name="floorGroup"></group>
+  );
+};
+
+export default FloorGroup;