From 0e0a53bd5a96f40bddbd77ea59cbc51671c9a190 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 30 May 2025 12:19:07 +0530
Subject: [PATCH] refactor: Enhance aisle management by adding selectedAisle
 state and click handling in aisle components

---
 .../aisle/Instances/aisleInstances.tsx        |   4 +-
 .../instance/aisleTypes/arrowsAisle.tsx       |  21 ++-
 .../instance/aisleTypes/dashedAisle.tsx       |  21 ++-
 .../instance/aisleTypes/dottedAisle.tsx       |  21 ++-
 .../instance/aisleTypes/solidAisle.tsx        |  21 ++-
 .../scene/postProcessing/postProcessing.tsx   | 171 ++++++++++--------
 app/src/store/builder/useBuilderStore.ts      |  13 ++
 7 files changed, 190 insertions(+), 82 deletions(-)

diff --git a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx b/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
index efcbf58..6f34726 100644
--- a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
+++ b/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
@@ -11,13 +11,13 @@ function AisleInstances() {
 
     return (
 
-        <>
+        <group name='Aisles-Group'>
 
             {aisles.map((aisle) =>
                 <AisleInstance aisle={aisle} key={aisle.uuid} />
             )}
 
-        </>
+        </group>
     )
 }
 
diff --git a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx
index a0c5c32..28fe74a 100644
--- a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx
+++ b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx
@@ -1,9 +1,15 @@
 import * as THREE from 'three';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { Extrude } from '@react-three/drei';
 import * as Constants from '../../../../../../types/world/worldConstants';
+import { useToolMode } from '../../../../../../store/builder/store';
+import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
 
 function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
+    const aisleRef = useRef<THREE.Group>(null);
+    const { toolMode } = useToolMode();
+    const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
     const arrows = useMemo(() => {
         if (aisle.points.length < 2 || aisle.type.aisleType !== 'arrows-aisle') return [];
 
@@ -46,12 +52,25 @@ function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
         return arrowShapes;
     }, [aisle]);
 
+    const handleClick = () => {
+        if (toolMode === 'move' && !hoveredPoint) {
+            setSelectedAisle(aisleRef.current);
+        }
+    }
+
     if (arrows.length === 0) return null;
 
     return (
         <group
+            name='Arrows-Aisle'
+            ref={aisleRef}
             position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
             rotation={[Math.PI / 2, 0, 0]}
+            userData={aisle}
+            onClick={handleClick}
+            onPointerMissed={() => {
+                setSelectedAisle(null);
+            }}
         >
             {arrows.map(({ shape, position, rotationY }, index) => (
                 <group key={index} position={[position.x, position.z, 0]} rotation={[0, 0, -rotationY]}>
diff --git a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx
index c75b621..5a8c028 100644
--- a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx
+++ b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx
@@ -1,9 +1,15 @@
 import * as THREE from 'three';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { Extrude } from '@react-three/drei';
 import * as Constants from '../../../../../../types/world/worldConstants';
+import { useToolMode } from '../../../../../../store/builder/store';
+import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
 
 function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
+    const aisleRef = useRef<THREE.Group>(null);
+    const { toolMode } = useToolMode();
+    const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
     const shapes = useMemo(() => {
         if (aisle.points.length < 2 || aisle.type.aisleType !== 'dashed-aisle') return [];
 
@@ -44,12 +50,25 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
         return shapes;
     }, [aisle]);
 
+    const handleClick = () => {
+        if (toolMode === 'move' && !hoveredPoint) {
+            setSelectedAisle(aisleRef.current);
+        }
+    }
+
     if (shapes.length === 0) return null;
 
     return (
         <group
+            name='Dashed-Aisle'
+            ref={aisleRef}
             position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
             rotation={[Math.PI / 2, 0, 0]}
+            userData={aisle}
+            onClick={handleClick}
+            onPointerMissed={() => {
+                setSelectedAisle(null);
+            }}
         >
             {shapes.map((shape, index) => (
                 <Extrude
diff --git a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dottedAisle.tsx b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dottedAisle.tsx
index 69b1d6b..15a1728 100644
--- a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dottedAisle.tsx
+++ b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dottedAisle.tsx
@@ -1,9 +1,15 @@
 import * as THREE from 'three';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { Extrude } from '@react-three/drei';
 import * as Constants from '../../../../../../types/world/worldConstants';
+import { useToolMode } from '../../../../../../store/builder/store';
+import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
 
 function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
+    const aisleRef = useRef<THREE.Group>(null);
+    const { toolMode } = useToolMode();
+    const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
     const shapes = useMemo(() => {
         if (aisle.points.length < 2 || aisle.type.aisleType !== 'dotted-aisle') return [];
 
@@ -31,12 +37,25 @@ function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
         return shapes;
     }, [aisle]);
 
+    const handleClick = () => {
+        if (toolMode === 'move' && !hoveredPoint) {
+            setSelectedAisle(aisleRef.current);
+        }
+    }
+
     if (shapes.length === 0) return null;
 
     return (
         <group
+            name='Dotted-Aisle'
+            ref={aisleRef}
             position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
             rotation={[Math.PI / 2, 0, 0]}
+            userData={aisle}
+            onClick={handleClick}
+            onPointerMissed={() => {
+                setSelectedAisle(null);
+            }}
         >
             {shapes.map((shape, index) => (
                 <Extrude
diff --git a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/solidAisle.tsx b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/solidAisle.tsx
index 455364a..af4b772 100644
--- a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/solidAisle.tsx
+++ b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/solidAisle.tsx
@@ -1,9 +1,15 @@
 import * as THREE from 'three';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { Extrude } from '@react-three/drei';
 import * as Constants from '../../../../../../types/world/worldConstants';
+import { useToolMode } from '../../../../../../store/builder/store';
+import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
 
 function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
+    const aisleRef = useRef<THREE.Group>(null);
+    const { toolMode } = useToolMode();
+    const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
     const shape = useMemo(() => {
         if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
 
@@ -29,12 +35,25 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
         return shape;
     }, [aisle]);
 
+    const handleClick = () => {
+        if (toolMode === 'move' && !hoveredPoint) {
+            setSelectedAisle(aisleRef.current);
+        }
+    }
+
     if (!shape) return null;
 
     return (
         <group
+            name='Solid-Aisle'
+            ref={aisleRef}
             position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
             rotation={[Math.PI / 2, 0, 0]}
+            userData={aisle}
+            onClick={handleClick}
+            onPointerMissed={() => {
+                setSelectedAisle(null);
+            }}
         >
             <Extrude
                 args={[shape, { depth: 0.01, bevelEnabled: false }]}
diff --git a/app/src/modules/scene/postProcessing/postProcessing.tsx b/app/src/modules/scene/postProcessing/postProcessing.tsx
index 9a449d6..e1c69f1 100644
--- a/app/src/modules/scene/postProcessing/postProcessing.tsx
+++ b/app/src/modules/scene/postProcessing/postProcessing.tsx
@@ -8,12 +8,14 @@ import {
 import * as CONSTANTS from "../../../types/world/worldConstants";
 import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
 import { useEffect } from "react";
+import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 
 export default function PostProcessing() {
     const { deletableFloorItem } = useDeletableFloorItem();
     const { selectedWallItem } = useSelectedWallItem();
     const { selectedFloorItem } = useSelectedFloorItem();
     const { selectedEventSphere } = useSelectedEventSphere();
+    const { selectedAisle } = useBuilderStore();
 
     function flattenChildren(children: any[]) {
         const allChildren: any[] = [];
@@ -26,87 +28,104 @@ export default function PostProcessing() {
         return allChildren;
     }
 
-    useEffect(()=>{
+    useEffect(() => {
         // console.log('selectedFloorItem: ', selectedFloorItem);
-    },[selectedFloorItem])
+    }, [selectedFloorItem])
 
-    useEffect(()=>{
+    useEffect(() => {
         // console.log('selectedFloorItem: ', deletableFloorItem);
-    },[deletableFloorItem])
+    }, [deletableFloorItem])
+
+    useEffect(() => {
+        console.log('selectedAisle: ', selectedAisle);
+    }, [selectedAisle])
 
     return (
-        <>
-            <EffectComposer autoClear={false}>
-                <N8AO
-                    color="black"
-                    aoRadius={20}
-                    intensity={7}
-                    distanceFalloff={4}
-                    aoSamples={32}
-                    denoiseRadius={6}
-                    denoiseSamples={16}
+        <EffectComposer autoClear={false}>
+            <N8AO
+                color="black"
+                aoRadius={20}
+                intensity={7}
+                distanceFalloff={4}
+                aoSamples={32}
+                denoiseRadius={6}
+                denoiseSamples={16}
+            />
+            {selectedAisle && (
+                <Outline
+                    selection={flattenChildren(selectedAisle.children)}
+                    selectionLayer={10}
+                    width={2000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={5}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    blur={true}
+                    xRay={false}
                 />
-                {deletableFloorItem && (
-                    <Outline
-                        selection={flattenChildren(deletableFloorItem.children)}
-                        selectionLayer={10}
-                        width={3000}
-                        blendFunction={BlendFunction.ALPHA}
-                        edgeStrength={5}
-                        resolutionScale={2}
-                        pulseSpeed={0}
-                        visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
-                        hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
-                        blur={true}
-                        xRay={true}
-                    />
-                )}
-                {selectedWallItem && (
-                    <Outline
-                        selection={flattenChildren(selectedWallItem.children)}
-                        selectionLayer={10}
-                        width={3000}
-                        blendFunction={BlendFunction.ALPHA}
-                        edgeStrength={5}
-                        resolutionScale={2}
-                        pulseSpeed={0}
-                        visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
-                        hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
-                        blur={true}
-                        xRay={true}
-                    />
-                )}
-                {selectedFloorItem && (
-                    <Outline
-                        selection={flattenChildren(selectedFloorItem.children)}
-                        selectionLayer={10}
-                        width={3000}
-                        blendFunction={BlendFunction.ALPHA}
-                        edgeStrength={5}
-                        resolutionScale={2}
-                        pulseSpeed={0}
-                        visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
-                        hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
-                        blur={true}
-                        xRay={true}
-                    />
-                )}
-                {selectedEventSphere && (
-                    <Outline
-                        selection={[selectedEventSphere]}
-                        selectionLayer={10}
-                        width={1000}
-                        blendFunction={BlendFunction.ALPHA}
-                        edgeStrength={10}
-                        resolutionScale={2}
-                        pulseSpeed={0}
-                        visibleEdgeColor={0x6f42c1}
-                        hiddenEdgeColor={0x6f42c1}
-                        blur={true}
-                        xRay={true}
-                    />
-                )}
-            </EffectComposer>
-        </>
+            )}
+            {deletableFloorItem && (
+                <Outline
+                    selection={flattenChildren(deletableFloorItem.children)}
+                    selectionLayer={10}
+                    width={3000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={5}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
+                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
+                    blur={true}
+                    xRay={true}
+                />
+            )}
+            {selectedWallItem && (
+                <Outline
+                    selection={flattenChildren(selectedWallItem.children)}
+                    selectionLayer={10}
+                    width={3000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={5}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    blur={true}
+                    xRay={true}
+                />
+            )}
+            {selectedFloorItem && (
+                <Outline
+                    selection={flattenChildren(selectedFloorItem.children)}
+                    selectionLayer={10}
+                    width={3000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={5}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    blur={true}
+                    xRay={true}
+                />
+            )}
+            {selectedEventSphere && (
+                <Outline
+                    selection={[selectedEventSphere]}
+                    selectionLayer={10}
+                    width={1000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={10}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={0x6f42c1}
+                    hiddenEdgeColor={0x6f42c1}
+                    blur={true}
+                    xRay={true}
+                />
+            )}
+        </EffectComposer>
     );
 }
diff --git a/app/src/store/builder/useBuilderStore.ts b/app/src/store/builder/useBuilderStore.ts
index cbf71dd..f8f52e7 100644
--- a/app/src/store/builder/useBuilderStore.ts
+++ b/app/src/store/builder/useBuilderStore.ts
@@ -1,3 +1,4 @@
+import { Object3D } from 'three';
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 
@@ -6,6 +7,8 @@ interface BuilderState {
 
     hoveredPoint: Point | null;
 
+    selectedAisle: Object3D | null;
+
     aisleType: AisleTypes;
     aisleWidth: number;
     aisleColor: AisleColors;
@@ -24,6 +27,8 @@ interface BuilderState {
 
     setHoveredPoint: (point: Point | null) => void;
 
+    setSelectedAisle: (aisle: Object3D | null) => void;
+
     setAisleType: (type: AisleTypes) => void;
     setAisleWidth: (width: number) => void;
     setAisleColor: (color: AisleColors) => void;
@@ -51,6 +56,8 @@ export const useBuilderStore = create<BuilderState>()(
 
         hoveredPoint: null,
 
+        selectedAisle: null,
+
         aisleType: 'solid-aisle',
         aisleWidth: 0.1,
         aisleColor: 'yellow',
@@ -67,6 +74,12 @@ export const useBuilderStore = create<BuilderState>()(
             });
         },
 
+        setSelectedAisle: (aisle: Object3D | null) => {
+            set((state) => {
+                state.selectedAisle = aisle;
+            });
+        },
+
         setAisleType: (type) => {
             set((state) => {
                 state.aisleType = type;