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;