refactor: Update color uniform naming across multiple components for consistency

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

@@ -7,6 +7,7 @@ import ReferenceAisle from './referenceAisle';
 import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
 import ReferencePoint from '../../point/referencePoint';
 import Point from '../../point/point';
+import { intersect } from '@turf/turf';
 
 function AisleCreator() {
     const { scene, camera, raycaster, gl, pointer } = useThree();
@@ -15,7 +16,7 @@ function AisleCreator() {
     const { toolMode } = useToolMode();
     const { activeLayer } = useActiveLayer();
     const { socket } = useSocketStore();
-    const { aisles, addAisle } = useAisleStore();
+    const { aisles, addAisle, getAislePointById } = useAisleStore();
 
     const [tempPoints, setTempPoints] = useState<Point[]>([]);
     const [isCreating, setIsCreating] = useState(false);
@@ -76,16 +77,27 @@ function AisleCreator() {
 
             raycaster.setFromCamera(pointer, camera);
             const intersectionPoint = new THREE.Vector3();
-            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+            const position = raycaster.ray.intersectPlane(plane, intersectionPoint);
+            if (!position) return;
 
-            if (!point) return;
+            const intersects = raycaster.intersectObjects(scene.children).find((intersect) => intersect.object.name === 'Aisle-Point');
+
+            const newPoint: Point = {
+                uuid: THREE.MathUtils.generateUUID(),
+                position: [position.x, position.y, position.z],
+                layer: activeLayer
+            };
+
+            if (intersects) {
+                const point = getAislePointById(intersects.object.uuid);
+                if (point) {
+                    newPoint.uuid = point.uuid;
+                    newPoint.position = point.position;
+                    newPoint.layer = point.layer;
+                }
+            }
 
             if (aisleType === 'solid-aisle') {
-                const newPoint: Point = {
-                    uuid: THREE.MathUtils.generateUUID(),
-                    position: [point.x, point.y, point.z],
-                    layer: activeLayer
-                };
 
                 if (tempPoints.length === 0) {
                     setTempPoints([newPoint]);
@@ -105,11 +117,6 @@ function AisleCreator() {
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'dashed-aisle') {
-                const newPoint: Point = {
-                    uuid: THREE.MathUtils.generateUUID(),
-                    position: [point.x, point.y, point.z],
-                    layer: activeLayer
-                };
 
                 if (tempPoints.length === 0) {
                     setTempPoints([newPoint]);
@@ -131,11 +138,6 @@ function AisleCreator() {
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'stripped-aisle') {
-                const newPoint: Point = {
-                    uuid: THREE.MathUtils.generateUUID(),
-                    position: [point.x, point.y, point.z],
-                    layer: activeLayer
-                };
 
                 if (tempPoints.length === 0) {
                     setTempPoints([newPoint]);
@@ -155,11 +157,6 @@ function AisleCreator() {
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'dotted-aisle') {
-                const newPoint: Point = {
-                    uuid: THREE.MathUtils.generateUUID(),
-                    position: [point.x, point.y, point.z],
-                    layer: activeLayer
-                };
 
                 if (tempPoints.length === 0) {
                     setTempPoints([newPoint]);
@@ -182,11 +179,6 @@ function AisleCreator() {
             } else if (aisleType === 'arrow-aisle') {
                 console.log('Creating arrow-aisle');
             } else if (aisleType === 'arrows-aisle') {
-                const newPoint: Point = {
-                    uuid: THREE.MathUtils.generateUUID(),
-                    position: [point.x, point.y, point.z],
-                    layer: activeLayer
-                };
 
                 if (tempPoints.length === 0) {
                     setTempPoints([newPoint]);
@@ -246,19 +238,23 @@ function AisleCreator() {
 
     return (
         <>
-            <group >
-                {tempPoints.map((point) => (
-                    <ReferencePoint key={point.uuid} point={point} />
-                ))}
-            </group>
+            {toggleView &&
+                <>
+                    <group name='Aisle-Reference-Points-Group'>
+                        {tempPoints.map((point) => (
+                            <ReferencePoint key={point.uuid} point={point} />
+                        ))}
+                    </group>
 
-            <group >
-                {allPoints.map((point) => (
-                    <Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
-                ))}
-            </group>
+                    <group name='Aisle-Points-Group'>
+                        {allPoints.map((point) => (
+                            <Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
+                        ))}
+                    </group>
 
-            <ReferenceAisle tempPoints={tempPoints} />
+                    <ReferenceAisle tempPoints={tempPoints} />
+                </>
+            }
         </>
     );
 }

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

@@ -144,7 +144,7 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
     };
 
     return (
-        <group>
+        <group name='Aisle-Reference-Group'>
             {renderAisle()}
         </group>
     );