Refactor floor management components and APIs: enhance FloorInstance for shape creation, update FloorInstances to handle floor rendering and UUID tracking, and improve FloorCreator with project and version context. Modify floor store methods for better floor management and integrate API calls for floor upsert and deletion. Adjust wall and point components to support new floor functionalities.

2025-06-27 10:48:48 +05:30
parent 5003dc3504
commit 04c302ea4c
10 changed files with 287 additions and 53 deletions
--- a/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx
+++ b/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx
@@ -1,10 +1,33 @@
-import React from 'react'
+import { useMemo } from 'react'
+import { Shape, Vector2, DoubleSide } from 'three';
+import { useLoader } from '@react-three/fiber';
+import { Extrude } from '@react-three/drei';
+import * as Constants from '../../../../../types/world/worldConstants';

 function FloorInstance({ floor }: { floor: Floor }) {
+
+    const shape = useMemo(() => {
+        const shape = new Shape();
+        const points = floor.points.map(p => new Vector2(p.position[0], p.position[2]));
+        if (points.length < 3) return null;
+        shape.moveTo(points[0].x, points[0].y);
+        points.forEach((pt) => { shape.lineTo(pt.x, pt.y); });
+        return shape;
+    }, [floor]);
+
+    if (!shape) return null;
+
    return (
-        <>
-        </>
-    )
+        <group name="Floor" rotation={[Math.PI / 2, 0, 0]}>
+            <Extrude
+                args={[shape, { depth: floor.floorDepth, bevelEnabled: floor.isBeveled, bevelThickness: floor.bevelStrength }]}
+                position={[0, 0, 0]}
+                receiveShadow
+            >
+                <meshStandardMaterial color={Constants.floorConfig.defaultColor} side={DoubleSide} />
+            </Extrude>
+        </group>
+    );
 }

 export default FloorInstance
--- a/app/src/modules/builder/floor/Instances/floorInstances.tsx
+++ b/app/src/modules/builder/floor/Instances/floorInstances.tsx
@@ -34,6 +34,7 @@ function FloorInstances() {

    const allLines = useMemo(() => {
        const lines: { start: Point; end: Point; key: string }[] = [];
+        const seenUuids = new Set<string>();

        floors.forEach((floor) => {
            const points = floor.points;
@@ -42,11 +43,13 @@ function FloorInstances() {
            for (let i = 0; i < points.length; i++) {
                const current = points[i];
                const next = points[(i + 1) % points.length];
-                if (current.pointUuid !== next.pointUuid) {
+                const lineKey = `${current.pointUuid}-${next.pointUuid}`;
+                if (current.pointUuid !== next.pointUuid && !seenUuids.has(lineKey)) {
+                    seenUuids.add(lineKey);
                    lines.push({
                        start: current,
                        end: next,
-                        key: `${current.pointUuid}-${next.pointUuid}`
+                        key: lineKey
                    });
                }
            }
@@ -58,7 +61,7 @@ function FloorInstances() {
    return (
        <>

-            {!toggleView && floors.length > 1 && (
+            {!toggleView && floors.length > 0 && (
                <mesh name='Floors-Group'>
                    {floors.map((floor) => (
                        <FloorInstance key={floor.floorUuid} floor={floor} />
--- a/app/src/modules/builder/floor/floorCreator/floorCreator.tsx
+++ b/app/src/modules/builder/floor/floorCreator/floorCreator.tsx
@@ -4,9 +4,14 @@ import { useThree } from '@react-three/fiber';
 import { useActiveLayer, useSocketStore, useToggleView, useToolMode } from '../../../../store/builder/store';
 import { useSceneContext } from '../../../scene/sceneContext';
 import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
+import { useParams } from 'react-router-dom';
+import { useVersionContext } from '../../version/versionContext';
+import { getUserData } from '../../../../functions/getUserData';
 import ReferencePoint from '../../point/reference/referencePoint';
 import ReferenceFloor from './referenceFloor';

+// import { upsertFloorApi } from '../../../../services/factoryBuilder/floor/upsertFloorApi';
+
 function FloorCreator() {
    const { scene, camera, raycaster, gl, pointer } = useThree();
    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
@@ -15,9 +20,13 @@ function FloorCreator() {
    const { activeLayer } = useActiveLayer();
    const { socket } = useSocketStore();
    const { floorStore } = useSceneContext();
-    const { addFloor, removeDecal, getFloorPointById, getFloorByPoints } = floorStore();
+    const { addFloor, getFloorPointById, getFloorByPoints } = floorStore();
    const drag = useRef(false);
    const isLeftMouseDown = useRef(false);
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { userId, organization } = getUserData();
+    const { projectId } = useParams();

    const [tempPoints, setTempPoints] = useState<Point[]>([]);
    const [isCreating, setIsCreating] = useState(false);
@@ -94,14 +103,33 @@ function FloorCreator() {
                    };

                    addFloor(floor);
+                    if (projectId) {
+
+                        // API
+
+                        // upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
+
+                        // SOCKET
+
+                        const data = {
+                            floorData: floor,
+                            projectId: projectId,
+                            versionId: selectedVersion?.versionId || '',
+                            userId: userId,
+                            organization: organization
+                        }
+
+                        socket.emit('v1:model-Floor:add', data);
+
+                    }
                    setTempPoints([]);
                    setIsCreating(false);
-                } else if (tempPoints.length === 0) {
+                } else if (tempPoints.length === 0 || (tempPoints.length > 1 && pointIntersects.object.uuid !== tempPoints[tempPoints.length - 2].pointUuid)) {
                    tempPoints.push(pointIntersects.object.userData as Point);
                    setIsCreating(true);
                } else {
-                    setTempPoints([]);
-                    setIsCreating(false);
+                    tempPoints.push(pointIntersects.object.userData as Point);
+                    setIsCreating(true);
                }
            } else {
                setTempPoints(prev => [...prev, newPoint]);
@@ -126,6 +154,25 @@ function FloorCreator() {
                    };

                    addFloor(floor);
+                    if (projectId) {
+
+                        // API
+
+                        // upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
+
+                        // SOCKET
+
+                        const data = {
+                            floorData: floor,
+                            projectId: projectId,
+                            versionId: selectedVersion?.versionId || '',
+                            userId: userId,
+                            organization: organization
+                        }
+
+                        socket.emit('v1:model-Floor:add', data);
+
+                    }
                }
                setTempPoints([]);
                setIsCreating(false);
@@ -155,7 +202,7 @@ function FloorCreator() {
            canvasElement.removeEventListener("click", onMouseClick);
            canvasElement.removeEventListener("contextmenu", onContext);
        };
-    }, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addFloor, removeDecal, getFloorPointById, getFloorByPoints, floorDepth, isBeveled, bevelStrength, sideMaterial, topMaterial, snappedPosition, snappedPoint]);
+    }, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addFloor, getFloorPointById, getFloorByPoints, floorDepth, isBeveled, bevelStrength, sideMaterial, topMaterial, snappedPosition, snappedPoint]);

    return (
        <>
--- a/app/src/modules/builder/floor/floorGroup.tsx
+++ b/app/src/modules/builder/floor/floorGroup.tsx
@@ -1,14 +1,23 @@
 import { useEffect } from 'react';
 import { useToggleView } from '../../../store/builder/store'
 import { useBuilderStore } from '../../../store/builder/useBuilderStore';
+import { useVersionContext } from '../version/versionContext';
+import { useSceneContext } from '../../scene/sceneContext';
+import { useParams } from 'react-router-dom';
+import useModuleStore from '../../../store/useModuleStore';
 import FloorCreator from './floorCreator/floorCreator';
 import FloorInstances from './Instances/floorInstances';
-import useModuleStore from '../../../store/useModuleStore';
+import { getFloorsApi } from '../../../services/factoryBuilder/floor/getFloorsApi';

 function FloorGroup() {
    const { togglView } = useToggleView();
    const { setSelectedFloor, setSelectedDecal } = useBuilderStore();
    const { activeModule } = useModuleStore();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { floorStore } = useSceneContext();
+    const { setFloors } = floorStore();
+    const { projectId } = useParams();

    useEffect(() => {
        if (togglView || activeModule !== 'builder') {
@@ -17,6 +26,21 @@ function FloorGroup() {
        }
    }, [togglView, activeModule])

+    useEffect(() => {
+        if (projectId && selectedVersion) {
+            getFloorsApi(projectId, selectedVersion?.versionId || '').then((floors) => {
+                console.log('floors: ', floors);
+                if (floors && floors.length > 0) {
+                    setFloors(floors);
+                } else {
+                    setFloors([]);
+                }
+            }).catch((err) => {
+                console.log(err);
+            })
+        }
+    }, [projectId, selectedVersion?.versionId])
+
    return (
        <>