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
-                        key={point.uuid}
-                        position={new THREE.Vector3(...point.position)}
-                    >
-                        <sphereGeometry args={[0.1, 16, 16]} />
-                        <meshBasicMaterial
-                            color={0xffff00}
-                        />
-                    </mesh>
+                    <Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
                 ))}
             </group>