Add decal management functionality and refactor wall components

app/src/modules/builder/Decal/decalInstance.tsx

@@ -0,0 +1,48 @@
+import * as THREE from 'three';
+import { Decal } from '@react-three/drei'
+import { useLoader } from '@react-three/fiber';
+import { useToggleView } from '../../../store/builder/store';
+import { useBuilderStore } from '../../../store/builder/useBuilderStore';
+
+import defaultMaterial from '../../../assets/textures/floor/wall-tex.png';
+import useModuleStore from '../../../store/useModuleStore';
+
+function DecalInstance({ visible = true, decal }: { visible?: boolean, decal: Decal }) {
+    const { setSelectedWall, selectedDecal, setSelectedDecal } = useBuilderStore();
+    const { togglView } = useToggleView();
+    const { activeModule } = useModuleStore();
+    const material = useLoader(THREE.TextureLoader, defaultMaterial);
+
+    return (
+        <Decal
+            // debug
+            visible={visible}
+            position={decal.decalPosition}
+            rotation={[0, 0, decal.decalRotation]}
+            scale={[decal.decalScale, decal.decalScale, 0.01]}
+            userData={decal}
+            onClick={(e) => {
+                if (visible && !togglView && activeModule === 'builder') {
+                    if (e.object.userData.decalUuid) {
+                        setSelectedDecal(e.object);
+                        setSelectedWall(null);
+                    }
+                }
+            }}
+            onPointerMissed={() => {
+                if (selectedDecal && selectedDecal.userData.decalUuid === decal.decalUuid) {
+                    setSelectedDecal(null);
+                }
+            }}
+        >
+            <meshBasicMaterial
+                map={material}
+                side={THREE.DoubleSide}
+                polygonOffset
+                polygonOffsetFactor={-1}
+            />
+        </Decal>
+    )
+}
+
+export default DecalInstance