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={() => {
-                            console.log(wallAsset);
+                        onClick={(e) => {
+                            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,8 +1,29 @@
+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 (
         <>