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,48 +37,91 @@ 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 (
-        <mesh
+        <DragControls
-            uuid={point.uuid}
+            axisLock='y'
-            position={new THREE.Vector3(...point.position)}
+            autoTransform={false}
-            onPointerOver={() => setIsHovered(true)}
+            onDrag={() => { handleDrag(point) }}
-            onPointerOut={() => setIsHovered(false)}
+            onDragEnd={() => { handleDragEnd(point) }}
-            userData={userData}
         >
-            <boxGeometry args={boxScale} />
+            <mesh
-            <shaderMaterial
+                uuid={point.uuid}
-                ref={materialRef}
+                position={new THREE.Vector3(...point.position)}
-                uniforms={uniforms}
+                onPointerOver={() => {
-                vertexShader={`
+                    if (!hoveredPoint) {
-                    varying vec2 vUv;
+                        setHoveredPoint(point);
-                
+                        setIsHovered(true)
-                    void main() {
-                        vUv = uv;
-                        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                     }
-                `}
+                }}
-                fragmentShader={`
+                onPointerOut={() => {
-                    varying vec2 vUv;
+                    if (hoveredPoint && hoveredPoint.uuid === point.uuid) {
-                    uniform vec3 uColor;
+                        setHoveredPoint(null);
-                    uniform vec3 uInnerColor;
-                
-                    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 && 
-                            vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
-                            gl_FragColor = vec4(uInnerColor, 1.0); // Inner square
-                        } else {
-                            gl_FragColor = vec4(uColor, 1.0); // Border
-                        }
                     }
-                `}
+                    setIsHovered(false)
-            />
+                }}
-        </mesh>
+                userData={userData}
+            >
+                <boxGeometry args={boxScale} />
+                <shaderMaterial
+                    ref={materialRef}
+                    uniforms={uniforms}
+                    vertexShader={
+                        `
+                            varying vec2 vUv;
+
+                            void main() {
+                                vUv = uv;
+                                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                            }
+                        `
+                    }
+                    fragmentShader={
+                        `
+                            varying vec2 vUv;
+                            uniform vec3 uColor;
+                            uniform vec3 uInnerColor;
+                            
+                            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 && 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;