Add decal management functionality and refactor wall components

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

@@ -13,12 +13,13 @@ import { useWallClassification } from './helpers/useWallClassification';
 import { useToggleView, useWallVisibility } from '../../../../../store/builder/store';
 import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
 import * as Constants from '../../../../../types/world/worldConstants';
+import DecalInstance from '../../../Decal/decalInstance';
 
 function Wall({ wall }: { readonly wall: Wall }) {
     const { wallStore } = useSceneContext();
-    const { walls } = wallStore();
+    const { walls, addDecal } = wallStore();
+    const { selectedWall, setSelectedWall, setSelectedDecal } = useBuilderStore();
     const { togglView } = useToggleView();
-    const { setSelectedWall } = useBuilderStore();
     const { activeModule } = useModuleStore();
     const { camera } = useThree();
     const { wallVisibility } = useWallVisibility();
@@ -112,25 +113,6 @@ function Wall({ wall }: { readonly wall: Wall }) {
                 {materials.map((material, index) => (
                     <primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
                 ))}
-
-                {wall.decals.map((decal) => {
-                    return (
-                        <Decal
-                            // debug
-                            position={[decal.decalPosition[0], decal.decalPosition[1], wall.wallThickness / 2]}
-                            rotation={[0, 0, decal.decalRotation]}
-                            scale={[decal.decalScale, decal.decalScale, 0.001]}
-                            userData={decal}
-                        >
-                            <meshBasicMaterial
-                                map={material1WallTexture}
-                                side={THREE.DoubleSide}
-                                polygonOffset
-                                polygonOffsetFactor={-1}
-                            />
-                        </Decal>
-                    )
-                })}
             </Base>
             <mesh
                 castShadow
@@ -138,15 +120,39 @@ function Wall({ wall }: { readonly wall: Wall }) {
                 position={[centerX, centerY, centerZ]}
                 rotation={[0, -angle, 0]}
                 userData={wall}
-                name={`WallRaycastReference_${wall.wallUuid}`}
+                name={`WallReference_${wall.wallUuid}`}
                 onClick={(e) => {
                     if (visible && !togglView && activeModule === 'builder') {
-                        setSelectedWall(e.object)
+                        if (e.object.userData.wallUuid) {
+                            setSelectedWall(e.object);
+                            setSelectedDecal(null);
+
+                            if (wall.decals.length > 0) return;
+                            const decal: Decal = {
+                                decalUuid: THREE.MathUtils.generateUUID(),
+                                decalName: 'Decal',
+                                decalId: 'Default Decal',
+                                decalPosition: [0, 0, wall.wallThickness / 2 + 0.001],
+                                decalRotation: 0,
+                                decalScale: 1,
+                                decalType: { type: 'Wall', wallUuid: wall.wallUuid }
+                            }
+                            addDecal(wall.wallUuid, decal);
+
+                        }
+                    }
+                }}
+                onPointerMissed={() => {
+                    if (selectedWall && selectedWall.userData.wallUuid === wall.wallUuid) {
+                        setSelectedWall(null);
                     }
                 }}
-                onPointerMissed={() => { setSelectedWall(null) }}
             >
                 <MeshDiscardMaterial />
+
+                {wall.decals.map((decal) => (
+                    <DecalInstance visible={visible} key={decal.decalUuid} decal={decal} />
+                ))}
             </mesh>
         </mesh>
     );