refactor: Enhance Point component with drag functionality and update state management in aisle store

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

@@ -2,11 +2,19 @@ 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 { DragControls } from '@react-three/drei';
+import { useAisleStore } from '../../../store/builder/useAisleStore';
+import { useThree } from '@react-three/fiber';
+import { useBuilderStore } from '../../../store/builder/useBuilderStore';
 
 function Point({ point, userData }: { readonly point: Point, readonly userData: any }) {
     const materialRef = useRef<THREE.ShaderMaterial>(null);
+    const { raycaster, camera, scene, pointer } = useThree();
+    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isHovered, setIsHovered] = useState(false);
     const { toolMode } = useToolMode();
+    const { setPosition } = useAisleStore();
+    const { hoveredPoint, setHoveredPoint } = useBuilderStore();
 
     const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
     const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
@@ -29,31 +37,73 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
         uInnerColor: { value: new THREE.Color(defaultInnerColor) },
     }), [borderColor, defaultInnerColor]);
 
+    const handleDrag = (point: Point) => {
+        if (toolMode === 'move' && isHovered) {
+            raycaster.setFromCamera(pointer, camera);
+            const intersectionPoint = new THREE.Vector3();
+            const position = raycaster.ray.intersectPlane(plane, intersectionPoint);
+            if (userData.pointType === 'Aisle') {
+                if (position) {
+                    setPosition(point.uuid, [position.x, position.y, position.z]);
+                }
+            }
+        }
+    }
+
+    const handleDragEnd = (point: Point) => {
+        console.log('point: ', point);
+    }
+
+    useEffect(() => {
+        if (hoveredPoint && hoveredPoint.uuid !== point.uuid) {
+            setIsHovered(false);
+        }
+    }, [hoveredPoint])
+
     if (!point) {
         return null;
     }
 
     return (
+        <DragControls
+            axisLock='y'
+            autoTransform={false}
+            onDrag={() => { handleDrag(point) }}
+            onDragEnd={() => { handleDragEnd(point) }}
+        >
             <mesh
                 uuid={point.uuid}
                 position={new THREE.Vector3(...point.position)}
-            onPointerOver={() => setIsHovered(true)}
+                onPointerOver={() => {
-            onPointerOut={() => setIsHovered(false)}
+                    if (!hoveredPoint) {
+                        setHoveredPoint(point);
+                        setIsHovered(true)
+                    }
+                }}
+                onPointerOut={() => {
+                    if (hoveredPoint && hoveredPoint.uuid === point.uuid) {
+                        setHoveredPoint(null);
+                    }
+                    setIsHovered(false)
+                }}
                 userData={userData}
             >
                 <boxGeometry args={boxScale} />
                 <shaderMaterial
                     ref={materialRef}
                     uniforms={uniforms}
-                vertexShader={`
+                    vertexShader={
+                        `
                             varying vec2 vUv;
 
                             void main() {
                                 vUv = uv;
                                 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                             }
-                `}
+                        `
-                fragmentShader={`
+                    }
+                    fragmentShader={
+                        `
                             varying vec2 vUv;
                             uniform vec3 uColor;
                             uniform vec3 uInnerColor;
@@ -61,16 +111,17 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
                             void main() {
                                 // Define the size of the white square as a proportion of the face
                                 float borderThickness = 0.2; // Adjust this value for border thickness
-                        if (vUv.x > borderThickness && vUv.x < 1.0 - borderThickness && 
+                                if (vUv.x > borderThickness && vUv.x < 1.0 - borderThickness && vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
-                            vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
                                     gl_FragColor = vec4(uInnerColor, 1.0); // Inner square
                                 } else {
                                         gl_FragColor = vec4(uColor, 1.0); // Border
                                     }
                                 }
-                `}
+                        `
+                    }
                 />
             </mesh>
+        </DragControls>
     );
 }
 

app/src/store/builder/useAisleStore.ts

@@ -63,7 +63,6 @@ export const useAisleStore = create<AisleStore>()(
                 const point = aisle.points.find(p => p.uuid === pointUuid);
                 if (point) {
                     point.position = position;
-                    break;
                 }
             }
         }),
@@ -73,7 +72,6 @@ export const useAisleStore = create<AisleStore>()(
                 const point = aisle.points.find(p => p.uuid === pointUuid);
                 if (point) {
                     point.layer = layer;
-                    break;
                 }
             }
         }),

app/src/store/builder/useBuilderStore.ts

@@ -3,6 +3,9 @@ import { immer } from 'zustand/middleware/immer';
 
 interface BuilderState {
     // Common properties
+
+    hoveredPoint: Point | null;
+
     aisleType: AisleTypes;
     aisleWidth: number;
     aisleColor: AisleColors;
@@ -18,6 +21,9 @@ interface BuilderState {
     aisleLength: number;
 
     // Setters for common properties
+
+    setHoveredPoint: (point: Point | null) => void;
+
     setAisleType: (type: AisleTypes) => void;
     setAisleWidth: (width: number) => void;
     setAisleColor: (color: AisleColors) => void;
@@ -42,6 +48,9 @@ interface BuilderState {
 export const useBuilderStore = create<BuilderState>()(
     immer((set) => ({
         // Default values
+
+        hoveredPoint: null,
+
         aisleType: 'solid-aisle',
         aisleWidth: 0.1,
         aisleColor: 'yellow',
@@ -51,6 +60,13 @@ export const useBuilderStore = create<BuilderState>()(
         aisleLength: 0.6,
 
         // Individual setters
+
+        setHoveredPoint: (point: Point | null) => {
+            set((state) => {
+                state.hoveredPoint = point;
+            });
+        },
+
         setAisleType: (type) => {
             set((state) => {
                 state.aisleType = type;