Make Configure Asset Panel Reactive [AARD-2074] (#1272)

Co-authored-by: Zach Rutman <[email protected]>

Author: BrandonPacewic

fission/src/mirabuf/MirabufSceneObject.ts

@@ -313,6 +313,8 @@ class MirabufSceneObject extends SceneObject implements ContextSupplier {
         if (this.miraType === MiraType.ROBOT || !cameraControls.focusProvider) {
             cameraControls.focusProvider = this
         }
+
+        MirabufObjectChangeEvent.dispatch(this)
     }
 
     // Centered in xz plane, bottom surface of object
@@ -431,6 +433,7 @@ class MirabufSceneObject extends SceneObject implements ContextSupplier {
         if (this._brain && this._brain instanceof SynthesisBrain) {
             this._brain.clearControls()
         }
+        MirabufObjectChangeEvent.dispatch(null)
     }
 
     public eject() {
@@ -986,3 +989,29 @@ 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/UIProvider.tsx

@@ -1,5 +1,4 @@
 import CloseIcon from "@mui/icons-material/Close"
-import { IconButton } from "./components/StyledComponents"
 import type { SnackbarKey, SnackbarMessage, VariantType } from "notistack"
 import { useSnackbar } from "notistack"
 import type React from "react"
@@ -8,6 +7,7 @@ import { useCallback, useReducer, useState } from "react"
 import { v4 as uuidv4 } from "uuid"
 import type { ModalImplProps } from "./components/Modal"
 import type { PanelImplProps } from "./components/Panel"
+import { IconButton } from "./components/StyledComponents"
 import {
     CloseType,
     type ConfigureScreenFn,

fission/src/ui/components/AnalyticsConsent.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material"
-import { Button } from "./StyledComponents"
 import { AiOutlineClose } from "react-icons/ai"
 import Label from "./Label"
+import { Button } from "./StyledComponents"
 
 interface AnalyticsConsentProps {
     onClose: () => void

fission/src/ui/components/ContextMenu.tsx

@@ -1,10 +1,10 @@
 import { Divider, Stack } from "@mui/material"
-import { Button } from "./StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import { type ContextData, ContextSupplierEvent } from "./ContextMenuData"
 import { globalOpenModal, globalOpenPanel } from "./GlobalUIControls"
 import Label from "./Label"
+import { Button } from "./StyledComponents"
 
 interface ContextMenuStateData {
     data: ContextData

fission/src/ui/components/MainHUD.tsx

@@ -1,5 +1,4 @@
 import { Box, Stack } from "@mui/material"
-import { Button, IconButton } from "./StyledComponents"
 import { motion } from "framer-motion"
 import type React from "react"
 import { useEffect, useState } from "react"
@@ -20,7 +19,7 @@ import DebugPanel from "../panels/DebugPanel"
 import DeveloperToolPanel from "../panels/DeveloperToolPanel"
 import ImportMirabufPanel from "../panels/mirabuf/ImportMirabufPanel"
 import { setAddToast, setOpenModal, setOpenPanel } from "./GlobalUIControls"
-import { SynthesisIcons } from "./StyledComponents"
+import { Button, IconButton, SynthesisIcons } from "./StyledComponents"
 import { TouchControlsEvent, TouchControlsEventKeys } from "./TouchControls"
 import UserIcon from "./UserIcon"
 

fission/src/ui/components/Modal.tsx

@@ -1,8 +1,8 @@
 import { Card, CardActions, CardContent, CardHeader, Modal as MUIModal } from "@mui/material"
-import { Button } from "./StyledComponents"
 import React, { type ReactElement } from "react"
 import type { Modal as ModalType, Panel as PanelType } from "../helpers/UIProviderHelpers"
 import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"
+import { Button } from "./StyledComponents"
 
 export type ModalImplProps<T, P> = Partial<{
     modal: ModalType<T, P>

fission/src/ui/components/Panel.tsx

@@ -1,5 +1,4 @@
 import { Card, CardActions, CardContent, CardHeader } from "@mui/material"
-import { Button } from "./StyledComponents"
 import React, { type ReactElement } from "react"
 import Draggable from "react-draggable"
 import {
@@ -9,6 +8,7 @@ import {
     type Panel as PanelType,
     useUIContext,
 } from "../helpers/UIProviderHelpers"
+import { Button } from "./StyledComponents"
 
 // biome-ignore-start lint/suspicious/noExplicitAny: need to be able to extend
 export type PanelImplProps<T, P> = Partial<{

fission/src/ui/components/SelectButton.tsx

@@ -1,11 +1,10 @@
 import type Jolt from "@azaleacolburn/jolt-physics"
 import { Stack } from "@mui/material"
-import { Button } from "./StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import World from "@/systems/World"
 import { convertThreeVector3ToJoltVec3 } from "@/util/TypeConversions"
-import { LabelWithTooltip } from "./StyledComponents"
+import { Button, LabelWithTooltip } from "./StyledComponents"
 
 // raycasting constants
 const RAY_MAX_LENGTH = 20.0

fission/src/ui/components/SelectMenu.tsx

@@ -1,9 +1,8 @@
 import { Divider, Stack } from "@mui/material"
-import { Button, IconButton } from "./StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import Label from "./Label"
-import { CustomTooltip, Spacer, SynthesisIcons } from "./StyledComponents"
+import { Button, CustomTooltip, IconButton, Spacer, SynthesisIcons } from "./StyledComponents"
 
 /** Extend this to make a type that contains custom data */
 export class SelectMenuOption {

fission/src/ui/components/StyledComponents.tsx

@@ -1,18 +1,17 @@
 import InfoIcon from "@mui/icons-material/Info"
 import {
     Box,
-    Button as MuiButton,
     type ButtonProps,
-    IconButton as MuiIconButton,
     type IconButtonProps,
-    Stack,
-    Tooltip,
+    Button as MuiButton,
+    IconButton as MuiIconButton,
     ToggleButton as MuiToggleButton,
-    type ToggleButtonProps,
     ToggleButtonGroup as MuiToggleButtonGroup,
+    Stack,
     type ToggleButtonGroupProps,
+    type ToggleButtonProps,
+    Tooltip,
 } from "@mui/material"
-import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import { AiFillWarning, AiOutlineDoubleRight, AiOutlineInfoCircle } from "react-icons/ai"
 import { BiRefresh } from "react-icons/bi"
 import { BsCodeSquare } from "react-icons/bs"
@@ -38,6 +37,7 @@ import { GiSteeringWheel } from "react-icons/gi"
 import { GrConnect } from "react-icons/gr"
 import { HiDownload } from "react-icons/hi"
 import { IoCheckmark, IoPencil, IoPeople, IoPlayOutline, IoTrashBin } from "react-icons/io5"
+import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import Label from "./Label"
 
 export class SynthesisIcons {