Refactor aisle API services: remove createAisleApi, update deleteAisleApi to include versionId, and modify wall asset APIs for consistency in endpoint naming. Enhance floor and wall store functionality with new setters and methods for managing floors and walls, including decal handling. Introduce FloorInstance and FloorInstances components for rendering floor data, and implement FloorCreator for interactive floor creation. Add reference floor visualization with snapping capabilities. Update wall API services for improved error handling and response management.

app/src/modules/builder/point/point.tsx

@@ -1,29 +1,36 @@
 import * as THREE from 'three';
 import * as Constants from '../../../types/world/worldConstants';
 import { useRef, useState, useEffect, useMemo } from 'react';
-import { useToolMode } from '../../../store/builder/store';
+import { useSocketStore, useToolMode } from '../../../store/builder/store';
 import { DragControls } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { useBuilderStore } from '../../../store/builder/useBuilderStore';
 import { usePointSnapping } from './helpers/usePointSnapping';
-import { deleteAisleApi } from '../../../services/factoryBuilder/aisle/deleteAisleApi';
 import { useParams } from 'react-router-dom';
-import { createAisleApi } from '../../../services/factoryBuilder/aisle/createAisleApi';
 import { useVersionContext } from '../version/versionContext';
 import { useSceneContext } from '../../scene/sceneContext';
 
+import { upsertAisleApi } from '../../../services/factoryBuilder/aisle/upsertAisleApi';
+import { deleteAisleApi } from '../../../services/factoryBuilder/aisle/deleteAisleApi';
+import { upsertWallApi } from '../../../services/factoryBuilder/wall/upsertWallApi';
+import { deleteWallApi } from '../../../services/factoryBuilder/wall/deleteWallApi';
+import { getUserData } from '../../../functions/getUserData';
+
 function Point({ point }: { readonly point: Point }) {
     const materialRef = useRef<THREE.ShaderMaterial>(null);
     const { raycaster, camera, pointer, gl } = useThree();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isHovered, setIsHovered] = useState(false);
     const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
+    const { socket } = useSocketStore();
     const { toolMode } = useToolMode();
-    const { aisleStore, wallStore } = useSceneContext();
+    const { aisleStore, wallStore, floorStore } = useSceneContext();
     const { setPosition: setAislePosition, removePoint: removeAislePoint, getAislesByPointId } = aisleStore();
-    const { setPosition: setWallPosition, removePoint: removeWallPoint } = wallStore();
+    const { setPosition: setWallPosition, removePoint: removeWallPoint, getWallsByPointId } = wallStore();
+    const { setPosition: setFloorPosition, removePoint: removeFloorPoint } = floorStore();
     const { snapAislePoint, snapAisleAngle, snapWallPoint, snapWallAngle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
     const { hoveredPoint, setHoveredPoint } = useBuilderStore();
+    const { userId, organization } = getUserData();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
     const { projectId } = useParams();
@@ -113,6 +120,10 @@ function Point({ point }: { readonly point: Point }) {
                     const wallSnapped = snapWallAngle(newPosition);
                     const finalSnapped = snapWallPoint(wallSnapped.position);
                     setWallPosition(point.pointUuid, finalSnapped.position);
+                } else if (point.pointType === 'Floor') {
+                    const floorSnapped = snapWallAngle(newPosition);
+                    const finalSnapped = snapWallPoint(floorSnapped.position);
+                    setFloorPosition(point.pointUuid, finalSnapped.position);
                 }
             }
         }
@@ -138,11 +149,34 @@ function Point({ point }: { readonly point: Point }) {
             const updatedAisles = getAislesByPointId(point.pointUuid);
             if (updatedAisles.length > 0 && projectId) {
                 updatedAisles.forEach((updatedAisle) => {
-                    createAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || '')
+                    upsertAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || '')
                 })
             }
         } else if (point.pointType === 'Wall') {
+            const updatedWalls = getWallsByPointId(point.pointUuid);
+            if (updatedWalls && updatedWalls.length > 0 && projectId) {
+                updatedWalls.forEach((updatedWall) => {
+
+                    // API
+
+                    // upsertWallApi(projectId, selectedVersion?.versionId || '', updatedWall);
+
+                    // SOCKET 
+
+                    const data = {
+                        wallData: updatedWall,
+                        projectId: projectId,
+                        versionId: selectedVersion?.versionId || '',
+                        userId: userId,
+                        organization: organization
+                    }
+
+                    socket.emit('v1:model-Wall:add', data);
+                });
+            }
             // console.log('Wall after drag: ', point);
+        } else if (point.pointType === 'Floor') {
+            // console.log('Floor after drag: ', point);
         }
     }
 
@@ -152,16 +186,43 @@ function Point({ point }: { readonly point: Point }) {
                 const removedAisles = removeAislePoint(point.pointUuid);
                 if (removedAisles.length > 0) {
                     removedAisles.forEach(aisle => {
-                        if (projectId)
+                        if (projectId) {
                             deleteAisleApi(aisle.aisleUuid, projectId, selectedVersion?.versionId || '')
+                        }
                     });
                     setHoveredPoint(null);
                 }
             }
             if (point.pointType === 'Wall') {
-                const removedAisles = removeWallPoint(point.pointUuid);
-                if (removedAisles.length > 0) {
+                const removedWalls = removeWallPoint(point.pointUuid);
+                if (removedWalls.length > 0) {
                     setHoveredPoint(null);
+                    removedWalls.forEach(wall => {
+                        if (projectId) {
+
+                            // API
+
+                            // deleteWallApi(projectId, selectedVersion?.versionId || '', wall.wallUuid);
+
+                            // SOCKET
+
+                            const data = {
+                                wallUuid: wall.wallUuid,
+                                projectId: projectId,
+                                versionId: selectedVersion?.versionId || '',
+                                userId: userId,
+                                organization: organization
+                            }
+
+                            socket.emit('v1:model-Wall:delete', data);
+                        }
+                    });
+                }
+            }
+            if (point.pointType === 'Floor') {
+                const removedFloors = removeFloorPoint(point.pointUuid);
+                setHoveredPoint(null);
+                if (removedFloors.length > 0) {
                 }
             }
             gl.domElement.style.cursor = 'default';