feat: Integrate active tool management across builder components; add deletableWallAsset state and related functionality

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, selectedWallAsset } = useBuilderStore();
+    const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, deletableWallAsset } = useBuilderStore();
 
     function flattenChildren(children: any[]) {
         const allChildren: any[] = [];
@@ -52,6 +52,10 @@ export default function PostProcessing() {
         // console.log('selectedWallAsset: ', selectedWallAsset);
     }, [selectedWallAsset])
 
+    useEffect(() => {
+        // console.log('deletableWallAsset: ', deletableWallAsset);
+    }, [deletableWallAsset])
+
     return (
         <EffectComposer autoClear={false}>
             <N8AO
@@ -78,6 +82,21 @@ export default function PostProcessing() {
                     xRay={true}
                 />
             )}
+            {deletableWallAsset && (
+                <Outline
+                    selection={flattenChildren(deletableWallAsset.children)}
+                    selectionLayer={10}
+                    width={2000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={5}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
+                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
+                    blur={true}
+                    xRay={true}
+                />
+            )}
             {selectedAisle && (
                 <Outline
                     selection={flattenChildren(selectedAisle.children)}