Make Configure Asset Panel Reactive [AARD-2074]

fission/src/mirabuf/MirabufSceneObject.ts

@@ -316,6 +316,8 @@ class MirabufSceneObject extends SceneObject implements ContextSupplier {
         if (this.miraType === MiraType.ROBOT || !cameraControls.focusProvider) {
             cameraControls.focusProvider = this
         }
+
+        MirabufObjectChangeEvent.dispatch(this)
     }
 
     public update(): void {
@@ -367,6 +369,7 @@ class MirabufSceneObject extends SceneObject implements ContextSupplier {
         if (this._brain && this._brain instanceof SynthesisBrain) {
             this._brain.clearControls()
         }
+        MirabufObjectChangeEvent.dispatch(null)
     }
 
     public eject() {
@@ -949,3 +952,28 @@ export class RigidNodeAssociate extends BodyAssociate {
 }
 
 export default MirabufSceneObject
+
+export class MirabufObjectChangeEvent extends Event {
+    private static _eventKey = "MirabufObjectChange"
+    private _obj: MirabufSceneObject | null
+
+    private constructor(obj: MirabufSceneObject | null) {
+        super(MirabufObjectChangeEvent._eventKey)
+        this._obj = obj
+    }
+    public static addEventListener(cb: (object: MirabufSceneObject | null) => void): () => void {
+        const listener = (event: Event) => {
+            if (event instanceof MirabufObjectChangeEvent) {
+                cb(event._obj)
+            } else {
+                cb(null)
+            }
+        }
+        window.addEventListener(this._eventKey, listener)
+        return () => window.removeEventListener(this._eventKey, listener)
+    }
+
+    public static dispatch(obj: MirabufSceneObject | null) {
+        window.dispatchEvent(new MirabufObjectChangeEvent(obj))
+    }
+}

fission/src/ui/panels/configuring/assembly-config/configure/AssemblySelection.tsx

@@ -1,8 +1,10 @@
 import type React from "react"
-import { useMemo, useReducer } from "react"
+import { useCallback, useEffect, useState } from "react"
+import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent.ts"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
-import InputSystem from "@/systems/input/InputSystem"
-import type SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
+import { MirabufObjectChangeEvent } from "@/mirabuf/MirabufSceneObject"
+import InputSystem from "@/systems/input/InputSystem.ts"
+import type SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain.ts"
 import World from "@/systems/World.ts"
 import type { PanelImplProps } from "@/ui/components/Panel"
 import SelectMenu, { SelectMenuOption } from "@/ui/components/SelectMenu"
@@ -29,7 +31,7 @@ export class AssemblySelectionOption extends SelectMenuOption {
 }
 
 function makeSelectionOption(configurationType: ConfigurationType, assembly: MirabufSceneObject) {
-    console.log("MAKING SELECTION OPTION FOR", configurationType)
+    // console.log("MAKING SELECTION OPTION FOR", configurationType)
     return new AssemblySelectionOption(
         `${configurationType === "ROBOTS" ? `[${InputSystem.brainIndexSchemeMap.get((assembly.brain as SynthesisBrain).brainIndex)?.schemeName ?? "-"}] ` : ""}${assembly.assemblyName}`,
         assembly
@@ -44,26 +46,37 @@ const AssemblySelection: React.FC<AssemblySelectionProps & PanelImplProps<void,
     onStageDelete,
     pendingDeletes,
 }) => {
-    const [u, update] = useReducer(x => !x, false)
     const { openPanel, closePanel } = useUIContext()
+    const [options, setOptions] = useState<AssemblySelectionOption[]>([])
 
-    const robots = useMemo(() => {
-        return World.sceneRenderer.mirabufSceneObjects.getRobots().filter(x => !pendingDeletes.includes(x.id))
-    }, [u, pendingDeletes])
-
-    const fields = useMemo(() => {
+    const getRobots = useCallback(
+        () => World.sceneRenderer.mirabufSceneObjects.getRobots().filter(x => !pendingDeletes.includes(x.id)),
+        [pendingDeletes]
+    )
+    const getFields = useCallback(() => {
         const field = World.sceneRenderer.mirabufSceneObjects.getField()
         return !field || pendingDeletes.includes(field.id) ? [] : [field]
-    }, [u, pendingDeletes])
-
-    console.log(robots[0], fields[0])
+    }, [pendingDeletes])
 
-    const options = useMemo(() => {
-        const list = configurationType === "ROBOTS" ? robots : fields
-        return list
-            .filter((assembly): assembly is MirabufSceneObject => assembly != null)
+    const update = useCallback(() => {
+        const items: MirabufSceneObject[] = configurationType === "ROBOTS" ? getRobots() : getFields()
+        const newOptions = items
+            .filter(assembly => assembly != null)
             .map(assembly => makeSelectionOption(configurationType, assembly))
-    }, [configurationType, robots, fields])
+        setOptions(newOptions)
+    }, [getRobots, getFields, configurationType])
+
+    MirabufObjectChangeEvent.addEventListener(() => {
+        update()
+    })
+
+    ConfigurationSavedEvent.listen(() => {
+        update()
+    })
+
+    useEffect(() => {
+        update()
+    }, [update])
 
     return (
         <SelectMenu

fission/src/ui/panels/configuring/initial-config/InitialConfigPanel.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Stack } from "@mui/material"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useState } from "react"
+import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent.ts"
 import { MiraType } from "@/mirabuf/MirabufLoader"
 import { getSpotlightAssembly } from "@/mirabuf/MirabufSceneObject"
 import InputSchemeManager from "@/systems/input/InputSchemeManager"
@@ -58,6 +59,7 @@ const InitialConfigPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) =>
                 setSelectedScheme(scheme)
             }
         }
+        new ConfigurationSavedEvent()
     }, [closePanel, panel, targetAssembly])
 
     const closeDelete = useCallback(() => {