feat: Enhance wall and wall asset interactions; integrate pointer event handling for wall asset updates and improve wall asset visibility logic

app/src/modules/builder/wall/Instances/instance/wall.tsx

@@ -16,8 +16,10 @@ import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
 import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
 
 function Wall({ wall }: { readonly wall: Wall }) {
-    const { wallStore } = useSceneContext();
+    const { wallStore, wallAssetStore } = useSceneContext();
     const { walls, addDecal } = wallStore();
+    const { getAssetsByWall } = wallAssetStore();
+    const assets = getAssetsByWall(wall.wallUuid);
     const { selectedWall, setSelectedWall, setSelectedDecal } = useBuilderStore();
     const { togglView } = useToggleView();
     const { activeModule } = useModuleStore();
@@ -105,19 +107,35 @@ function Wall({ wall }: { readonly wall: Wall }) {
             key={wall.wallUuid}
             userData={wall}
         >
-            <Base
+            {(assets.length > 0 || walls[0].wallUuid === wall.wallUuid) ?
-                castShadow
+                <Base
-                receiveShadow
+                    castShadow
-                ref={meshRef}
+                    receiveShadow
-                geometry={geometry}
+                    ref={meshRef}
-                position={[centerX, centerY, centerZ]}
+                    geometry={geometry}
-                rotation={[0, -angle, 0]}
+                    position={[centerX, centerY, centerZ]}
-                userData={wall}
+                    rotation={[0, -angle, 0]}
-            >
+                    userData={wall}
-                {materials.map((material, index) => (
+                >
-                    <primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
+                    {materials.map((material, index) => (
-                ))}
+                        <primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
-            </Base>
+                    ))}
+                </Base>
+                :
+                <mesh
+                    castShadow
+                    receiveShadow
+                    ref={meshRef}
+                    geometry={geometry}
+                    position={[centerX, centerY, centerZ]}
+                    rotation={[0, -angle, 0]}
+                    userData={wall}
+                >
+                    {materials.map((material, index) => (
+                        <primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
+                    ))}
+                </mesh>
+            }
             <mesh
                 castShadow
                 receiveShadow

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

@@ -114,11 +114,56 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
     useEffect(() => {
         const canvasElement = gl.domElement;
 
-        const onPointerUp = () => {
+        const onPointerUp = (e: PointerEvent) => {
             draggingRef.current = false;
             if (controls) {
                 (controls as any).enabled = true;
             }
+
+            if (selectedWallAsset) {
+                pointer.x = (e.clientX / window.innerWidth) * 2 - 1;
+                pointer.y = -(e.clientY / window.innerHeight) * 2 + 1;
+
+                raycaster.setFromCamera(pointer, camera);
+                const intersects = raycaster.intersectObjects(scene.children, true);
+                const intersect = intersects.find((i: any) => i.object.name.includes('WallReference'));
+
+                if (intersect && intersect.object.userData.wallUuid && selectedWallAsset.userData.modelUuid === wallAsset.modelUuid) {
+                    const newPoint = closestPointOnLineSegment(
+                        new THREE.Vector3(intersect.point.x, 0, intersect.point.z),
+                        new THREE.Vector3(...intersect.object.userData.points[0].position),
+                        new THREE.Vector3(...intersect.object.userData.points[1].position)
+                    );
+
+                    const wallRotation = intersect.object.rotation.clone();
+
+                    const updatedWallAsset = updateWallAsset(wallAsset.modelUuid, {
+                        wallUuid: intersect.object.userData.wallUuid,
+                        position: [newPoint.x, wallAsset.wallAssetType === 'fixed-move' ? 0 : intersect.point.y, newPoint.z],
+                        rotation: [wallRotation.x, wallRotation.y, wallRotation.z],
+                    });
+
+                    if (projectId && updatedWallAsset) {
+
+                        // API
+
+                        // upsertWallAssetApi(projectId, selectedVersion?.versionId || '', updatedWallAsset);
+
+                        // SOCKET
+
+                        const data = {
+                            wallAssetData: updatedWallAsset,
+                            projectId: projectId,
+                            versionId: selectedVersion?.versionId || '',
+                            userId: userId,
+                            organization: organization
+                        }
+
+                        socket.emit('v1:wall-asset:add', data);
+
+                    }
+                }
+            }
         };
 
         const onPointerMove = (e: any) => {
@@ -142,31 +187,11 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
 
                 const wallRotation = intersect.object.rotation.clone();
 
-                const updatedWallAsset = updateWallAsset(wallAsset.modelUuid, {
+                updateWallAsset(wallAsset.modelUuid, {
                     wallUuid: intersect.object.userData.wallUuid,
                     position: [newPoint.x, wallAsset.wallAssetType === 'fixed-move' ? 0 : intersect.point.y, newPoint.z],
                     rotation: [wallRotation.x, wallRotation.y, wallRotation.z],
                 });
-
-                if (projectId && updatedWallAsset) {
-
-                    // API
-
-                    // upsertWallAssetApi(projectId, selectedVersion?.versionId || '', updatedWallAsset);
-
-                    // SOCKET
-
-                    const data = {
-                        wallAssetData: updatedWallAsset,
-                        projectId: projectId,
-                        versionId: selectedVersion?.versionId || '',
-                        userId: userId,
-                        organization: organization
-                    }
-
-                    socket.emit('v1:wall-asset:add', data);
-
-                }
             }
         };
 
@@ -225,7 +250,7 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
         }
     }, [activeTool, deletableWallAsset]);
 
-    if (!gltfScene || !boundingBox || !wall) { return null }
+    if (!gltfScene || !boundingBox) { return null }
     const size = new THREE.Vector3();
     boundingBox.getSize(size);
     const center = new THREE.Vector3();
@@ -242,7 +267,7 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
                 visible={wallAsset.isVisible}
                 userData={wallAsset}
             >
-                <Subtraction position={[center.x, center.y, 0]} scale={[size.x, size.y, wall.wallThickness + 0.05]}>
+                <Subtraction position={[center.x, center.y, 0]} scale={[size.x, size.y, (wall?.wallThickness ?? 0) + 0.05]}>
                     <Geometry>
                         <Base geometry={new THREE.BoxGeometry()} />
                     </Geometry>