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/line/line.tsx

@@ -2,10 +2,15 @@ import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 import { useEffect, useMemo, useState } from "react";
 import { DragControls, Tube } from '@react-three/drei';
-import { useToolMode } from '../../../store/builder/store';
+import { useSocketStore, useToolMode } from '../../../store/builder/store';
 import { useBuilderStore } from '../../../store/builder/useBuilderStore';
 import { useSceneContext } from '../../scene/sceneContext';
 import * as Constants from '../../../types/world/worldConstants';
+import { deleteWallApi } from '../../../services/factoryBuilder/wall/deleteWallApi';
+import { useVersionContext } from '../version/versionContext';
+import { useParams } from 'react-router-dom';
+import { upsertWallApi } from '../../../services/factoryBuilder/wall/upsertWallApi';
+import { getUserData } from '../../../functions/getUserData';
 
 interface LineProps {
     points: [Point, Point];
@@ -16,9 +21,15 @@ function Line({ points }: Readonly<LineProps>) {
     const { raycaster, camera, pointer, gl } = useThree();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isDeletable, setIsDeletable] = useState(false);
+    const { socket } = useSocketStore();
     const { toolMode } = useToolMode();
-    const { wallStore } = useSceneContext();
-    const { removeWallByPoints, setPosition } = wallStore();
+    const { wallStore, floorStore } = useSceneContext();
+    const { removeWallByPoints, setPosition: setWallPosition, getWallsByPointId } = wallStore();
+    const { removeFloorByPoints, setPosition: setFloorPosition } = floorStore();
+    const { userId, organization } = getUserData();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { projectId } = useParams();
     const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
     const { hoveredLine, setHoveredLine, hoveredPoint } = useBuilderStore();
 
@@ -79,7 +90,29 @@ function Line({ points }: Readonly<LineProps>) {
     const handlePointClick = (points: [Point, Point]) => {
         if (toolMode === '2D-Delete') {
             if (points[0].pointType === 'Wall' && points[1].pointType === 'Wall') {
-                removeWallByPoints(points);
+                const removedWall = removeWallByPoints(points);
+                if (removedWall && projectId) {
+
+                    // API
+
+                    // deleteWallApi(projectId, selectedVersion?.versionId || '', removedWall.wallUuid);
+
+                    // SOCKET
+
+                    const data = {
+                        wallUuid: removedWall.wallUuid,
+                        projectId: projectId,
+                        versionId: selectedVersion?.versionId || '',
+                        userId: userId,
+                        organization: organization
+                    }
+
+                    socket.emit('v1:model-Wall:delete', data);
+                }
+                setHoveredLine(null);
+            }
+            if (points[0].pointType === 'Floor' && points[1].pointType === 'Floor') {
+                removeFloorByPoints(points);
                 setHoveredLine(null);
             }
             gl.domElement.style.cursor = 'default';
@@ -105,8 +138,14 @@ function Line({ points }: Readonly<LineProps>) {
                 const newStart = new THREE.Vector3().addVectors(start, delta);
                 const newEnd = new THREE.Vector3().addVectors(end, delta);
 
-                setPosition(points[0].pointUuid, [newStart.x, newStart.y, newStart.z]);
-                setPosition(points[1].pointUuid, [newEnd.x, newEnd.y, newEnd.z]);
+                if (points[0].pointType === 'Wall' && points[1].pointType === 'Wall') {
+                    setWallPosition(points[0].pointUuid, [newStart.x, newStart.y, newStart.z]);
+                    setWallPosition(points[1].pointUuid, [newEnd.x, newEnd.y, newEnd.z]);
+                }
+                if (points[0].pointType === 'Floor' && points[1].pointType === 'Floor') {
+                    setFloorPosition(points[0].pointUuid, [newStart.x, newStart.y, newStart.z]);
+                    setFloorPosition(points[1].pointUuid, [newEnd.x, newEnd.y, newEnd.z]);
+                }
             }
         }
     };
@@ -127,11 +166,38 @@ function Line({ points }: Readonly<LineProps>) {
     };
 
     const handleDragEnd = (points: [Point, Point]) => {
+        if (toolMode !== 'move' || !dragOffset) return;
         gl.domElement.style.cursor = 'default';
         setDragOffset(null);
-        if (toolMode !== 'move') return;
         if (points[0].pointType === 'Wall' && points[1].pointType === 'Wall') {
-            // console.log('Wall after drag: ', points);
+            const updatedWalls1 = getWallsByPointId(points[0].pointUuid);
+            const updatedWalls2 = getWallsByPointId(points[1].pointUuid);
+            const updatedWalls = [...updatedWalls1, ...updatedWalls2].filter((wall, index, self) => index === self.findIndex((w) => w.wallUuid === wall.wallUuid));
+
+            if (updatedWalls.length > 0 && projectId) {
+                updatedWalls.forEach(updatedWall => {
+
+                    // API
+
+                    // upsertWallApi(projectId, selectedVersion?.versionId || '', updatedWall).catch((error) => {
+                    //     console.error('Error updating wall:', error);
+                    // });
+
+                    // SOCKET
+
+                    const data = {
+                        wallData: updatedWall,
+                        projectId: projectId,
+                        versionId: selectedVersion?.versionId || '',
+                        userId: userId,
+                        organization: organization
+                    }
+
+                    socket.emit('v1:model-Wall:add', data);
+                })
+            }
+        } else if (points[0].pointType === 'Floor' && points[1].pointType === 'Floor') {
+            // Handle floor update logic here if needed
         }
     }