refactor: Introduce Point and ReferencePoint components for better point management in AisleCreator

app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx

@@ -5,6 +5,8 @@ import { useActiveLayer, useSocketStore, useToggleView, useToolMode } from '../.
 import { useAisleStore } from '../../../../store/builder/useAisleStore';
 import ReferenceAisle from './referenceAisle';
 import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
+import ReferencePoint from '../../point/referencePoint';
+import Point from '../../point/point';
 
 function AisleCreator() {
     const { scene, camera, raycaster, gl, pointer } = useThree();
@@ -40,16 +42,8 @@ function AisleCreator() {
             });
         });
 
-        // Add temporary points
-        tempPoints.forEach(point => {
-            if (!seenUuids.has(point.uuid)) {
-                seenUuids.add(point.uuid);
-                points.push(point);
-            }
-        });
-
         return points;
-    }, [aisles, tempPoints]);
+    }, [aisles]);
 
 
     useEffect(() => {
@@ -252,17 +246,15 @@ function AisleCreator() {
 
     return (
         <>
+            <group >
+                {tempPoints.map((point) => (
+                    <ReferencePoint key={point.uuid} point={point} />
+                ))}
+            </group>
+
             <group >
                 {allPoints.map((point) => (
-                    <mesh
+                    <Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
-                        key={point.uuid}
-                        position={new THREE.Vector3(...point.position)}
-                    >
-                        <sphereGeometry args={[0.1, 16, 16]} />
-                        <meshBasicMaterial
-                            color={0xffff00}
-                        />
-                    </mesh>
                 ))}
             </group>
 

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

@@ -0,0 +1,77 @@
+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';
+
+function Point({ point, userData }: { readonly point: Point, readonly userData: any }) {
+    const materialRef = useRef<THREE.ShaderMaterial>(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const { toolMode } = useToolMode();
+
+    const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
+    const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
+    const borderColor = Constants.pointConfig.aisleOuterColor;
+
+    useEffect(() => {
+        if (materialRef.current && toolMode === 'move') {
+            materialRef.current.uniforms.uInnerColor.value.set(
+                isHovered ? borderColor : defaultInnerColor
+            );
+            materialRef.current.uniformsNeedUpdate = true;
+        } else if (materialRef.current && toolMode !== 'move') {
+            materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor);
+            materialRef.current.uniformsNeedUpdate = true;
+        }
+    }, [isHovered, borderColor, defaultInnerColor, toolMode]);
+
+    const uniforms = useMemo(() => ({
+        uColor: { value: new THREE.Color(borderColor) },
+        uInnerColor: { value: new THREE.Color(defaultInnerColor) },
+    }), [borderColor, defaultInnerColor]);
+
+    if (!point) {
+        return null;
+    }
+
+    return (
+        <mesh
+            uuid={point.uuid}
+            position={new THREE.Vector3(...point.position)}
+            onPointerOver={() => setIsHovered(true)}
+            onPointerOut={() => setIsHovered(false)}
+            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>
+    );
+}
+
+export default Point;

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

@@ -0,0 +1,75 @@
+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';
+
+function ReferencePoint({ point }: { readonly point: Point }) {
+    const materialRef = useRef<THREE.ShaderMaterial>(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const { toolMode } = useToolMode();
+
+    const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
+    const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
+    const borderColor = Constants.pointConfig.aisleOuterColor;
+
+    useEffect(() => {
+        if (materialRef.current && toolMode === 'move') {
+            materialRef.current.uniforms.uInnerColor.value.set(
+                isHovered ? borderColor : defaultInnerColor
+            );
+            materialRef.current.uniformsNeedUpdate = true;
+        } else if (materialRef.current && toolMode !== 'move') {
+            materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor);
+            materialRef.current.uniformsNeedUpdate = true;
+        }
+    }, [isHovered, borderColor, defaultInnerColor, toolMode]);
+
+    const uniforms = useMemo(() => ({
+        uColor: { value: new THREE.Color(borderColor) },
+        uInnerColor: { value: new THREE.Color(defaultInnerColor) },
+    }), [borderColor, defaultInnerColor]);
+
+    if (!point) {
+        return null;
+    }
+
+    return (
+        <mesh
+            position={new THREE.Vector3(...point.position)}
+            onPointerOver={() => setIsHovered(true)}
+            onPointerOut={() => setIsHovered(false)}
+        >
+            <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>
+    );
+}
+
+export default ReferencePoint;