Make Configure Asset Panel Reactive [AARD-2074]

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 {

fission/src/ui/components/TransformGizmoControl.tsx

@@ -1,11 +1,10 @@
-import { Button, ToggleButton, ToggleButtonGroup } from "./StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import * as THREE from "three"
 import InputSystem from "@/systems/input/InputSystem"
 import GizmoSceneObject, { type GizmoMode } from "@/systems/scene/GizmoSceneObject"
-
 import World from "@/systems/World"
+import { Button, ToggleButton, ToggleButtonGroup } from "./StyledComponents"
 import type TransformGizmoControlProps from "./TransformGizmoControlProps"
 
 /**

fission/src/ui/components/simulation/FlowControls.tsx

@@ -1,8 +1,8 @@
-import { Button } from "../StyledComponents"
 import { Panel as FlowPanel, useReactFlow } from "@xyflow/react"
 import { FaPlus } from "react-icons/fa6"
 import { MdFitScreen, MdZoomInMap, MdZoomOutMap } from "react-icons/md"
 import type { FlowControlsProps } from "@/systems/simulation/SimConfigShared"
+import { Button } from "../StyledComponents"
 
 function FlowControls({ onCreateJunction }: FlowControlsProps) {
     const { zoomIn, zoomOut, fitView } = useReactFlow()

fission/src/ui/modals/MainMenuModal.tsx

@@ -1,10 +1,10 @@
 import { Stack } from "@mui/material"
-import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useLayoutEffect } from "react"
 import { globalAddToast } from "@/components/GlobalUIControls.ts"
 import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
 import type { ModalImplProps } from "../components/Modal"
+import { Button } from "../components/StyledComponents"
 import { useStateContext } from "../helpers/StateProviderHelpers"
 import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"
 import { spawnCachedMira } from "../panels/mirabuf/ImportMirabufPanel"

fission/src/ui/modals/MatchResultsModal.tsx

@@ -1,11 +1,11 @@
 import { Stack, styled, Typography } from "@mui/material"
-import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect } from "react"
 import MatchMode from "@/systems/match_mode/MatchMode"
 import SimulationSystem from "@/systems/simulation/SimulationSystem"
 import Label from "../components/Label"
 import type { ModalImplProps } from "../components/Modal"
+import { Button } from "../components/StyledComponents"
 import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"
 
 type Entry = {

fission/src/ui/modals/common/ConfirmModal.tsx

@@ -1,8 +1,8 @@
 import { Stack, Typography } from "@mui/material"
 import type React from "react"
 import { useEffect } from "react"
-import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import type { ModalImplProps } from "@/ui/components/Modal"
+import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 
 export type ConfirmModalCustomProps = {
     message: string

fission/src/ui/modals/configuring/RoboRIOModal.tsx

@@ -1,8 +1,8 @@
 import { FormControlLabel } from "@mui/material"
-import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect } from "react"
 import type { ModalImplProps } from "@/ui/components/Modal"
+import { Button } from "@/ui/components/StyledComponents"
 import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import RCCreateDeviceModal from "./rio-config/RCCreateDeviceModal"
 

fission/src/ui/modals/configuring/SettingsModal.tsx

@@ -1,5 +1,4 @@
 import { Box, Stack, Tab, Tabs, TextField } from "@mui/material"
-import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useReducer, useState } from "react"
 import { GiPerspectiveDiceSixFacesOne } from "react-icons/gi"
@@ -12,7 +11,7 @@ import Checkbox from "@/ui/components/Checkbox"
 import Label from "@/ui/components/Label"
 import type { ModalImplProps } from "@/ui/components/Modal"
 import StatefulSlider from "@/ui/components/StatefulSlider"
-import { Spacer } from "@/ui/components/StyledComponents"
+import { Button, Spacer } from "@/ui/components/StyledComponents"
 import { useThemeContext } from "@/ui/helpers/ThemeProviderHelpers"
 import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import { randomColor } from "@/util/Random"

fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx

@@ -1,13 +1,12 @@
 import { Stack, styled } from "@mui/material"
-import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import { type ChangeEvent, useEffect, useState } from "react"
 import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
 import { createMirabuf } from "@/mirabuf/MirabufSceneObject"
 import { PAUSE_REF_ASSEMBLY_SPAWNING } from "@/systems/physics/PhysicsTypes"
-
 import World from "@/systems/World"
 import Label from "@/ui/components/Label"
 import type { ModalImplProps } from "@/ui/components/Modal"
+import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import { CloseType, useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import type { ConfigurationType } from "@/ui/panels/configuring/assembly-config/ConfigTypes"
 import InitialConfigPanel from "@/ui/panels/configuring/initial-config/InitialConfigPanel"

fission/src/ui/panels/DebugPanel.tsx

@@ -1,5 +1,4 @@
 import { Box, Stack } from "@mui/material"
-import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect } from "react"
 import APS from "@/aps/APS"
@@ -10,14 +9,15 @@ import MirabufCachingService, {
 } from "@/mirabuf/MirabufLoader"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import World from "@/systems/World"
+import ConfirmModal from "@/ui/modals/common/ConfirmModal"
 import { random } from "@/util/Random"
 import { globalAddToast } from "../components/GlobalUIControls"
 import Label from "../components/Label"
 import type { PanelImplProps } from "../components/Panel"
+import { Button } from "../components/StyledComponents"
 import { useUIContext } from "../helpers/UIProviderHelpers"
 import PokerPanel from "./PokerPanel"
 import WsViewPanel from "./WsViewPanel"
-import ConfirmModal from "@/ui/modals/common/ConfirmModal"
 
 function toggleDragMode() {
     const dragSystem = World.dragModeSystem

fission/src/ui/panels/DeveloperToolPanel.tsx

@@ -1,5 +1,4 @@
 import { Stack } from "@mui/material"
-import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
 import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
@@ -10,7 +9,7 @@ import World from "@/systems/World"
 import FieldMiraEditor, { type DevtoolKey, devtoolHandlers, devtoolKeys } from "../../mirabuf/FieldMiraEditor"
 import { globalAddToast } from "../components/GlobalUIControls"
 import type { PanelImplProps } from "../components/Panel"
-import { LabelWithTooltip } from "../components/StyledComponents"
+import { Button, LabelWithTooltip } from "../components/StyledComponents"
 import { useUIContext } from "../helpers/UIProviderHelpers"
 
 const DeveloperToolPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {

fission/src/ui/panels/RobotSwitchPanel.tsx

@@ -1,10 +1,10 @@
 import { Stack } from "@mui/material"
-import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import Checkbox from "@/components/Checkbox.tsx"
 import Label from "../components/Label"
 import type { PanelImplProps } from "../components/Panel"
+import { Button } from "../components/StyledComponents"
 import { useUIContext } from "../helpers/UIProviderHelpers"
 
 const RobotSwitchPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {

fission/src/ui/panels/configuring/CameraSelectionPanel.tsx

@@ -1,4 +1,3 @@
-import { ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useState } from "react"
 import buttonPressSound from "@/assets/sound-files/ButtonPress.mp3"
@@ -7,6 +6,7 @@ import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import World from "@/systems/World"
 import Checkbox from "@/ui/components/Checkbox"
 import type { PanelImplProps } from "@/ui/components/Panel"
+import { ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 
 interface OrbitSettingsProps {

fission/src/ui/panels/configuring/CreateNewMatchModeConfigPanel.tsx

@@ -1,10 +1,10 @@
+import { Box, Button, Divider, FormControlLabel, Stack, TextField, Typography } from "@mui/material"
+import { useCallback, useEffect, useState } from "react"
+import DefaultMatchModeConfigs from "@/systems/match_mode/DefaultMatchModeConfigs"
+import Checkbox from "@/ui/components/Checkbox"
 import type { PanelImplProps } from "@/ui/components/Panel"
 import { CloseType, useUIContext } from "@/ui/helpers/UIProviderHelpers"
-import { Box, TextField, FormControlLabel, Stack, Divider, Button, Typography } from "@mui/material"
-import Checkbox from "@/ui/components/Checkbox"
-import { useEffect, useState, useCallback } from "react"
 import type { MatchModeConfig } from "./MatchModeConfigPanel"
-import DefaultMatchModeConfigs from "@/systems/match_mode/DefaultMatchModeConfigs"
 import { validateAndNormalizeMatchModeConfig } from "./MatchModeConfigPanel"
 
 interface ValidationRule {

fission/src/ui/panels/configuring/MatchModeConfigPanel.tsx

@@ -1,5 +1,4 @@
 import { Box, Divider } from "@mui/material"
-import { Button } from "@/ui/components/StyledComponents"
 import { Stack } from "@mui/system"
 import type React from "react"
 import { type ChangeEvent, useEffect, useMemo, useRef, useState } from "react"
@@ -11,7 +10,7 @@ import Checkbox from "@/ui/components/Checkbox"
 import { globalAddToast } from "@/ui/components/GlobalUIControls"
 import Label from "@/ui/components/Label"
 import type { PanelImplProps } from "@/ui/components/Panel"
-import { NegativeButton, PositiveButton, SynthesisIcons } from "@/ui/components/StyledComponents"
+import { Button, NegativeButton, PositiveButton, SynthesisIcons } from "@/ui/components/StyledComponents"
 import { CloseType, useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import CreateNewMatchModeConfigPanel from "./CreateNewMatchModeConfigPanel"
 

fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx

@@ -1,4 +1,3 @@
-import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"
@@ -13,6 +12,7 @@ import type SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisB
 import World from "@/systems/World"
 import Label from "@/ui/components/Label"
 import type { PanelImplProps } from "@/ui/components/Panel"
+import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import TransformGizmoControl from "@/ui/components/TransformGizmoControl"
 import { CloseType, type UIScreen, useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import ChooseInputSchemePanel from "../ChooseInputSchemePanel"