feat: enhance aisle management with new properties and types

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

@@ -7,10 +7,12 @@ import { Extrude } from '@react-three/drei';
 
 interface ReferenceAisleProps {
     tempPoints: Point[];
-    aisleType: 'solid-aisle' | 'dashed-aisle' | 'stripped-aisle' | 'dotted-aisle' | 'arrow-aisle' | 'arrows-aisle' | 'arc-aisle' | 'circle-aisle' | 'junction-aisle';
+    aisleType: AisleTypes;
+    aisleWidth: number;
+    aisleColor: AisleColors;
 }
 
-function ReferenceAisle({ tempPoints, aisleType }: Readonly<ReferenceAisleProps>) {
+function ReferenceAisle({ tempPoints, aisleType, aisleWidth, aisleColor }: Readonly<ReferenceAisleProps>) {
     const { pointer, raycaster, camera } = useThree();
     const { toolMode } = useToolMode();
     const { toggleView } = useToggleView();
@@ -41,10 +43,9 @@ function ReferenceAisle({ tempPoints, aisleType }: Readonly<ReferenceAisleProps>
                     ],
                     type: {
                         typeName: 'Aisle',
-                        material: 'default',
                         aisleType: aisleType,
-                        color: Constants.aisleConfig.defaultColor,
-                        width: Constants.aisleConfig.width
+                        aisleColor: aisleColor,
+                        aisleWidth: aisleWidth
                     }
                 });
             }
@@ -55,7 +56,7 @@ function ReferenceAisle({ tempPoints, aisleType }: Readonly<ReferenceAisleProps>
 
     useEffect(() => {
         setTempAisle(null);
-    }, [toolMode, toggleView, tempPoints.length, aisleType]);
+    }, [toolMode, toggleView, tempPoints.length, aisleType, aisleWidth, aisleColor]);
 
     if (!tempAisle) return null;
 
@@ -65,6 +66,8 @@ function ReferenceAisle({ tempPoints, aisleType }: Readonly<ReferenceAisleProps>
                 return <SolidAisle aisle={tempAisle} />;
             case 'dashed-aisle':
                 return <DashedAisle aisle={tempAisle} />;
+            case 'dotted-aisle':
+                return <DottedAisle aisle={tempAisle} />;
             default:
                 return null;
         }
@@ -79,14 +82,13 @@ function ReferenceAisle({ tempPoints, aisleType }: Readonly<ReferenceAisleProps>
 
 export default ReferenceAisle;
 
-
 function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
     const shape = useMemo(() => {
         if (aisle.points.length < 2) return null;
 
         const start = new THREE.Vector3(...aisle.points[0].position);
         const end = new THREE.Vector3(...aisle.points[1].position);
-        const width = aisle.type.width || 0.1;
+        const width = aisle.type.aisleWidth || 0.1;
 
         const direction = new THREE.Vector3().subVectors(end, start).normalize();
         const perp = new THREE.Vector3(-direction.z, 0, direction.x).normalize();
@@ -119,7 +121,7 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
                 castShadow
             >
                 <meshStandardMaterial
-                    color={aisle.type.color || '#ffffff'}
+                    color={aisle.type.aisleColor || '#ffffff'}
                     side={THREE.DoubleSide}
                 />
             </Extrude>
@@ -133,7 +135,7 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
 
         const start = new THREE.Vector3(...aisle.points[0].position);
         const end = new THREE.Vector3(...aisle.points[1].position);
-        const width = aisle.type.width || 0.1;
+        const width = aisle.type.aisleWidth || 0.1;
         const dashLength = 0.5;
         const gapLength = 0.3;
 
@@ -183,7 +185,7 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
                     castShadow
                 >
                     <meshStandardMaterial
-                        color={aisle.type.color || '#ffffff'}
+                        color={aisle.type.aisleColor || '#ffffff'}
                         side={THREE.DoubleSide}
                     />
                 </Extrude>
@@ -191,3 +193,55 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
         </group>
     );
 }
+
+function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
+    const shapes = useMemo(() => {
+        if (aisle.points.length < 2) return [];
+
+        const start = new THREE.Vector3(...aisle.points[0].position);
+        const end = new THREE.Vector3(...aisle.points[1].position);
+        const width = aisle.type.aisleWidth || 0.1;
+        const dotSpacing = 0.5;
+        const dotRadius = width * 0.4;
+
+        const totalLength = new THREE.Vector3().subVectors(end, start).length();
+        const dotCount = Math.floor(totalLength / dotSpacing);
+
+        const shapes = [];
+        const directionNormalized = new THREE.Vector3().subVectors(end, start).normalize();
+
+        for (let i = 0; i < dotCount; i++) {
+            const dotCenter = new THREE.Vector3().copy(start).addScaledVector(directionNormalized, i * dotSpacing + dotSpacing / 2);
+
+            const shape = new THREE.Shape();
+            shape.absarc(dotCenter.x, dotCenter.z, dotRadius, 0, Math.PI * 2, false);
+
+            shapes.push(shape);
+        }
+
+        return shapes;
+    }, [aisle]);
+
+    if (shapes.length === 0) return null;
+
+    return (
+        <group
+            position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
+            rotation={[Math.PI / 2, 0, 0]}
+        >
+            {shapes.map((shape, index) => (
+                <Extrude
+                    key={index}
+                    args={[shape, { depth: 0.01, bevelEnabled: false }]}
+                    receiveShadow
+                    castShadow
+                >
+                    <meshStandardMaterial
+                        color={aisle.type.aisleColor || '#ffffff'}
+                        side={THREE.DoubleSide}
+                    />
+                </Extrude>
+            ))}
+        </group>
+    );
+}