feat: Add selectedWallAsset and selectedFloorAsset state management; implement corresponding setters in useBuilderStore

app/src/modules/builder/wallAsset/Instances/Instances/wallAssetInstance.tsx

@@ -4,17 +4,21 @@ import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { Base, Geometry, Subtraction } from '@react-three/csg';
-import { useFrame } from '@react-three/fiber';
+import useModuleStore from '../../../../../store/useModuleStore';
 import { useSceneContext } from '../../../../scene/sceneContext';
+import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
+import { useToggleView } from '../../../../../store/builder/store';
 
 function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
     const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
     const { wallStore } = useSceneContext();
     const { walls, getWallById } = wallStore();
+    const { togglView } = useToggleView();
+    const { activeModule } = useModuleStore();
+    const { selectedWallAsset, setSelectedWallAsset } = useBuilderStore();
     const [gltfScene, setGltfScene] = useState<GLTF["scene"] | null>(null);
     const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
     const groupRef = useRef<THREE.Group>(null);
-    const csgRef = useRef<any>(null);
     const wall = useMemo(() => getWallById(wallAsset.wallUuid), [getWallById, wallAsset.wallUuid, walls]);
 
     useEffect(() => {
@@ -90,12 +94,6 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
 
     }, []);
 
-    useFrame(() => {
-        if (csgRef.current) {
-            csgRef.current.update();
-        }
-    })
-
     if (!gltfScene || !boundingBox || !wall) { return null }
     const size = new THREE.Vector3();
     boundingBox.getSize(size);
@@ -114,17 +112,35 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
                 userData={wallAsset}
             >
                 <Subtraction position={[center.x, center.y, center.z]} scale={[size.x, size.y, wall.wallThickness + 0.05]}>
-                    <Geometry ref={csgRef}>
+                    <Geometry>
                         <Base geometry={new THREE.BoxGeometry()} />
                     </Geometry>
                 </Subtraction>
                 {gltfScene && (
                     <mesh
-                        onClick={() => {
+                        onClick={(e) => {
-                            console.log(wallAsset);
+                            if (!togglView && activeModule === 'builder') {
+                                if (e.object) {
+                                    e.stopPropagation();
+                                    let currentObject = e.object as THREE.Object3D;
+                                    while (currentObject) {
+                                        if (currentObject.name === "Scene") {
+                                            break;
+                                        }
+                                        currentObject = currentObject.parent as THREE.Object3D;
+                                    }
+                                    setSelectedWallAsset(currentObject);
+                                }
+                            }
                         }}
+                        onPointerMissed={() => {
+                            if (selectedWallAsset && selectedWallAsset.userData.modelUuid === wallAsset.modelUuid) {
+                                setSelectedWallAsset(null);
+                            }
+                        }}
+                        userData={wallAsset}
                     >
-                        <primitive object={gltfScene} />
+                        <primitive userData={wallAsset} object={gltfScene} />
                     </mesh>
                 )}
             </group>

app/src/modules/builder/wallAsset/wallAssetGroup.tsx

@@ -1,7 +1,28 @@
+import { useEffect } from 'react';
+import { useToggleView } from '../../../store/builder/store';
+import { useBuilderStore } from '../../../store/builder/useBuilderStore';
+import { useVersionContext } from '../version/versionContext';
+import { useSceneContext } from '../../scene/sceneContext';
+import { useParams } from 'react-router-dom';
+import useModuleStore from '../../../store/useModuleStore';
 import WallAssetCreator from './wallAssetCreator'
 import WallAssetInstances from './Instances/wallAssetInstances'
 
 function WallAssetGroup() {
+    const { togglView } = useToggleView();
+    const { setSelectedFloorAsset } = useBuilderStore();
+    const { activeModule } = useModuleStore();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { wallAssetStore } = useSceneContext();
+    const { setWallAssets } = wallAssetStore();
+    const { projectId } = useParams();
+
+    useEffect(() => {
+        if (togglView || activeModule !== 'builder') {
+            setSelectedFloorAsset(null);
+        }
+    }, [togglView, activeModule])
 
     return (
         <>

app/src/modules/scene/postProcessing/postProcessing.tsx

@@ -15,7 +15,7 @@ export default function PostProcessing() {
     const { selectedWallItem } = useSelectedWallItem();
     const { selectedFloorItem } = useSelectedFloorItem();
     const { selectedEventSphere } = useSelectedEventSphere();
-    const { selectedAisle, selectedWall, selectedDecal, selectedFloor } = useBuilderStore();
+    const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset } = useBuilderStore();
 
     function flattenChildren(children: any[]) {
         const allChildren: any[] = [];
@@ -48,6 +48,10 @@ export default function PostProcessing() {
         // console.log('selectedFloor: ', selectedFloor);
     }, [selectedFloor])
 
+    useEffect(() => {
+        // console.log('selectedWallAsset: ', selectedWallAsset);
+    }, [selectedWallAsset])
+
     return (
         <EffectComposer autoClear={false}>
             <N8AO
@@ -59,6 +63,21 @@ export default function PostProcessing() {
                 denoiseRadius={6}
                 denoiseSamples={16}
             />
+            {selectedWallAsset && (
+                <Outline
+                    selection={flattenChildren(selectedWallAsset.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={true}
+                />
+            )}
             {selectedAisle && (
                 <Outline
                     selection={flattenChildren(selectedAisle.children)}

app/src/store/builder/useBuilderStore.ts

@@ -9,6 +9,12 @@ interface BuilderState {
     snappedPosition: [number, number, number] | null;
     hoveredLine: [Point, Point] | null;
 
+    // Wall Asset
+    selectedWallAsset: Object3D | null;
+
+    // Floor Asset
+    selectedFloorAsset: Object3D | null;
+
     // Wall Settings
     selectedWall: Object3D | null;
     wallThickness: number;
@@ -51,6 +57,12 @@ interface BuilderState {
     setSnappedPosition: (position: [number, number, number] | null) => void;
     setHoveredLine: (line: [Point, Point] | null) => void;
 
+    // Setters - Wall Asset
+    setSelectedWallAsset: (asset: Object3D | null) => void;
+
+    // Setters - Floor Asset
+    setSelectedFloorAsset: (asset: Object3D | null) => void;
+
     // Setters - Wall
     setSelectedWall: (wall: Object3D | null) => void;
     setWallThickness: (thickness: number) => void;
@@ -100,6 +112,10 @@ export const useBuilderStore = create<BuilderState>()(
         snappedPosition: null,
         hoveredLine: null,
 
+        selectedWallAsset: null,
+
+        selectedFloorAsset: null,
+
         selectedWall: null,
         wallThickness: 0.5,
         wallHeight: 7,
@@ -156,6 +172,22 @@ export const useBuilderStore = create<BuilderState>()(
             })
         },
 
+        // === Setters: Wall Asset ===
+
+        setSelectedWallAsset(asset: Object3D | null) {
+            set((state) => {
+                state.selectedWallAsset = asset;
+            });
+        },
+
+        // === Setters: Floor Asset ===
+
+        setSelectedFloorAsset(asset: Object3D | null) {
+            set((state) => {
+                state.selectedFloorAsset = asset;
+            });
+        },
+
         // === Setters: Wall ===
 
         setSelectedWall: (wall: Object3D | null) => {