Enhance builder functionality by implementing drag-and-drop for lines and points, adding hover effects, and improving wall distance display in the UI.

app/src/store/builder/useBuilderStore.ts

@@ -9,6 +9,8 @@ interface BuilderState {
     snappedPoint: Point | null;
     snappedPosition: [number, number, number] | null;
 
+    hoveredLine: [Point, Point] | null;
+
     // Wall
 
     wallThickness: number;
@@ -47,6 +49,8 @@ interface BuilderState {
     setSnappedPoint: (point: Point | null) => void;
     setSnappedPosition: (position: [number, number, number] | null) => void;
 
+    setHoveredLine: (line: [Point, Point] | null) => void;
+
     setSelectedAisle: (aisle: Object3D | null) => void;
 
     setAisleType: (type: AisleTypes) => void;
@@ -81,6 +85,8 @@ export const useBuilderStore = create<BuilderState>()(
         snappedPoint: null,
         snappedPosition: null,
 
+        hoveredLine: null,
+
         // Wall
 
         wallThickness: 0.5,
@@ -128,6 +134,12 @@ export const useBuilderStore = create<BuilderState>()(
             });
         },
 
+        setHoveredLine: (line: [Point, Point] | null) => {
+            set((state) => {
+                state.hoveredLine = line;
+            })
+        },
+
         setSnappedPoint: (point: Point | null) => {
             set((state) => {
                 state.snappedPoint = point;

app/src/store/builder/useWallStore.tsx

@@ -7,6 +7,7 @@ interface WallStore {
     addWall: (wall: Wall) => void;
     updateWall: (uuid: string, updated: Partial<Wall>) => void;
     removeWall: (uuid: string) => void;
+    removeWallByPoints: (Points: [Point, Point]) => Wall | undefined;
     addDecal: (wallUuid: string, decal: Decal) => void;
     updateDecal: (decalUuid: string, decal: Decal) => void;
     removeDecal: (decalUuid: string) => void;
@@ -48,6 +49,26 @@ export const useWallStore = create<WallStore>()(
             state.walls = state.walls.filter(w => w.wallUuid !== uuid);
         }),
 
+        removeWallByPoints: (points) => {
+            let removedWall: Wall | undefined;
+            const [pointA, pointB] = points;
+
+            set((state) => {
+                state.walls = state.walls.filter(wall => {
+                    const wallPoints = wall.points.map(p => p.pointUuid);
+                    const hasBothPoints = wallPoints.includes(pointA.pointUuid) && wallPoints.includes(pointB.pointUuid);
+
+                    if (hasBothPoints) {
+                        removedWall = JSON.parse(JSON.stringify(wall));
+                        return false;
+                    }
+                    return true;
+                });
+            });
+
+            return removedWall;
+        },
+
         addDecal: (wallUuid, decal) => set((state) => {
             const wallToUpdate = state.walls.find(w => w.wallUuid === wallUuid);
             if (wallToUpdate) {