feat: Implement deletable event sphere management and refactor point instances for better event handling

app/src/modules/scene/postProcessing/postProcessing.tsx

@@ -6,7 +6,7 @@ import {
     useSelectedFloorItem,
 } from "../../../store/builder/store";
 import * as CONSTANTS from "../../../types/world/worldConstants";
-import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useDeletableEventSphere, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
 import { useEffect } from "react";
 import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 
@@ -15,6 +15,7 @@ export default function PostProcessing() {
     const { selectedWallItem } = useSelectedWallItem();
     const { selectedFloorItem } = useSelectedFloorItem();
     const { selectedEventSphere } = useSelectedEventSphere();
+    const { deletableEventSphere } = useDeletableEventSphere();
     const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, deletableWallAsset } = useBuilderStore();
 
     function flattenChildren(children: any[]) {
@@ -56,6 +57,10 @@ export default function PostProcessing() {
         // console.log('deletableWallAsset: ', deletableWallAsset);
     }, [deletableWallAsset])
 
+    useEffect(() => {
+        // console.log('deletableEventSphere: ', deletableEventSphere);
+    }, [deletableEventSphere])
+
     return (
         <EffectComposer autoClear={false}>
             <N8AO
@@ -217,6 +222,21 @@ export default function PostProcessing() {
                     xRay={true}
                 />
             )}
+            {deletableEventSphere && (
+                <Outline
+                    selection={[deletableEventSphere]}
+                    selectionLayer={10}
+                    width={1000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={10}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
+                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
+                    blur={true}
+                    xRay={true}
+                />
+            )}
         </EffectComposer>
     );
 }