Fix sim diagnostics

src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt

@@ -0,0 +1,43 @@
+package baaahs.app.ui
+
+import baaahs.app.ui.document.FileUploadStyles
+import baaahs.app.ui.editor.ShaderEditorStyles
+import baaahs.app.ui.editor.ShaderHelpStyles
+import baaahs.app.ui.editor.ThemedEditableStyles
+import baaahs.app.ui.editor.layout.LayoutEditorStyles
+import baaahs.app.ui.gadgets.color.ColorWheelStyles
+import baaahs.app.ui.gadgets.slider.ThemedStyles
+import baaahs.app.ui.layout.LayoutStyles
+import baaahs.app.ui.model.ModelEditorStyles
+import baaahs.mapper.ControllerEditorStyles
+import baaahs.mapper.MapperStyles
+import baaahs.ui.components.UiComponentStyles
+import baaahs.ui.diagnostics.DiagnosticsStyles
+import mui.material.styles.Theme
+import styled.injectGlobal
+
+class AllStyles(val theme: Theme) {
+    val appUi by lazy { ThemeStyles(theme) }
+    val editor by lazy { baaahs.ui.editor.Styles(theme) }
+    val controls by lazy { baaahs.app.ui.controls.ThemeStyles(theme) }
+    val gadgetsSlider by lazy { ThemedStyles(theme) }
+    val editableManager by lazy { ThemedEditableStyles(theme) }
+    val layout by lazy { LayoutStyles(theme) }
+    val layoutEditor by lazy { LayoutEditorStyles(theme) }
+    val controllerEditor by lazy { ControllerEditorStyles(theme) }
+    val modelEditor by lazy { ModelEditorStyles(theme) }
+    val mapper by lazy { MapperStyles(theme) }
+    val shaderEditor by lazy { ShaderEditorStyles(theme) }
+    val shaderHelp by lazy { ShaderHelpStyles(theme) }
+    val uiComponents by lazy { UiComponentStyles(theme) }
+    val fileUploadStyles by lazy { FileUploadStyles(theme) }
+    val diagnosticsStyles by lazy { DiagnosticsStyles(theme) }
+
+    fun injectGlobals() {
+        injectGlobal(Styles.global)
+        injectGlobal(appUi.global)
+        injectGlobal(baaahs.app.ui.controls.Styles.global)
+        injectGlobal(ColorWheelStyles.global)
+        injectGlobal(layout.global)
+    }
+}

src/jsMain/kotlin/baaahs/app/ui/Styles.kt

@@ -1,55 +1,14 @@
 package baaahs.app.ui
 
-import baaahs.app.ui.document.FileUploadStyles
-import baaahs.app.ui.editor.ShaderEditorStyles
-import baaahs.app.ui.editor.ShaderHelpStyles
-import baaahs.app.ui.editor.ThemedEditableStyles
-import baaahs.app.ui.editor.layout.LayoutEditorStyles
-import baaahs.app.ui.gadgets.color.ColorWheelStyles
-import baaahs.app.ui.gadgets.slider.ThemedStyles
-import baaahs.app.ui.layout.LayoutStyles
-import baaahs.app.ui.model.ModelEditorStyles
-import baaahs.mapper.ControllerEditorStyles
-import baaahs.mapper.MapperStyles
 import baaahs.ui.*
-import baaahs.ui.components.UiComponentStyles
-import baaahs.ui.diagnostics.DiagnosticsStyles
 import kotlinx.css.*
 import kotlinx.css.properties.*
 import kotlinx.js.Object
 import mui.material.styles.Theme
 import mui.system.Breakpoint
 import styled.StyleSheet
-import styled.injectGlobal
 import baaahs.app.ui.controls.Styles as ControlsStyles
 
-class AllStyles(val theme: Theme) {
-    val themeStyles = ThemeStyles(theme)
-    val appUi by lazy { themeStyles }
-    val editor by lazy { baaahs.ui.editor.Styles(theme) }
-    val controls by lazy { baaahs.app.ui.controls.ThemeStyles(theme) }
-    val gadgetsSlider by lazy { ThemedStyles(theme) }
-    val editableManager by lazy { ThemedEditableStyles(theme) }
-    val layout by lazy { LayoutStyles(theme) }
-    val layoutEditor by lazy { LayoutEditorStyles(theme) }
-    val controllerEditor by lazy { ControllerEditorStyles(theme) }
-    val modelEditor by lazy { ModelEditorStyles(theme) }
-    val mapper by lazy { MapperStyles(theme) }
-    val shaderEditor by lazy { ShaderEditorStyles(theme) }
-    val shaderHelp by lazy { ShaderHelpStyles(theme) }
-    val uiComponents by lazy { UiComponentStyles(theme) }
-    val fileUploadStyles by lazy { FileUploadStyles(theme) }
-    val diagnosticsStyles by lazy { DiagnosticsStyles(theme) }
-
-    fun injectGlobals() {
-        injectGlobal(Styles.global)
-        injectGlobal(appUi.global)
-        injectGlobal(ControlsStyles.global)
-        injectGlobal(ColorWheelStyles.global)
-        injectGlobal(layout.global)
-    }
-}
-
 fun linearRepeating(
     color1: Color,
     color2: Color,

src/jsMain/kotlin/baaahs/sim/ui/SimulatorAppView.kt

@@ -1,6 +1,7 @@
 package baaahs.sim.ui
 
 import baaahs.SheepSimulator
+import baaahs.app.ui.Themes
 import baaahs.document
 import baaahs.sim.HostedWebApp
 import baaahs.ui.components.UiComponentStyles
@@ -12,7 +13,6 @@ import external.mosaic.MosaicWindow
 import external.mosaic.MosaicWindowProps
 import external.mosaic.mosaic
 import kotlinx.js.jso
-import mui.material.styles.createTheme
 import mui.system.Breakpoint
 import react.*
 import react.dom.div
@@ -33,7 +33,7 @@ external interface SimulatorContext {
 }
 
 val SimulatorAppView = xComponent<SimulatorAppProps>("SimulatorApp") { props ->
-    val theme = createTheme(jso {})
+    val theme = Themes.Light
     val simulatorStyles = ThemedSimulatorStyles(theme)
     injectGlobal(simulatorStyles.global)
     val uiComponentStyles = UiComponentStyles(theme)

src/jsMain/kotlin/baaahs/sim/ui/SimulatorStyles.kt

@@ -4,8 +4,8 @@ import baaahs.ui.important
 import kotlinx.css.*
 import kotlinx.css.properties.border
 import kotlinx.css.properties.boxShadow
+import mui.material.styles.Theme
 import mui.system.Breakpoint
-import mui.system.Theme
 import styled.StyleSheet
 
 class ThemedSimulatorStyles(val theme: Theme) : StyleSheet("sim-ui-themed", isStatic = true) {

src/jsMain/kotlin/baaahs/sim/ui/StatusPanel.kt

@@ -1,23 +1,31 @@
 package baaahs.sim.ui
 
 import baaahs.SheepSimulator
+import baaahs.app.ui.AllStyles
+import baaahs.app.ui.AppContext
+import baaahs.app.ui.appContext
 import baaahs.ui.asTextNode
 import baaahs.ui.diagnostics.patchDiagnostics
 import baaahs.ui.unaryPlus
 import baaahs.ui.withTChangeEvent
 import baaahs.ui.xComponent
+import kotlinx.js.jso
 import mui.material.FormControlLabel
 import mui.material.Switch
-import react.Props
-import react.RBuilder
-import react.RHandler
-import react.buildElement
+import react.*
 import react.dom.div
 
 val StatusPanelView = xComponent<StatusPanelProps>("StatusPanel") { props ->
     var isConsoleOpen by state { false }
     var isGlslPaletteOpen by state { false }
     val simulator = props.simulator
+    val simulatorContext = useContext(simulatorContext)
+    val stubAppContext = memo(simulatorContext) {
+        val allStyles = AllStyles(simulatorContext.styles.theme)
+        jso<AppContext> {
+            this.allStyles = allStyles
+        }
+    }
 
     val handleIsConsoleOpenChange by eventHandler { isConsoleOpen = !isConsoleOpen }
     val handleIsGlslPaletteOpenChange by eventHandler { isGlslPaletteOpen = !isGlslPaletteOpen }
@@ -46,8 +54,15 @@ val StatusPanelView = xComponent<StatusPanelProps>("StatusPanel") { props ->
         }
 
         if (isConsoleOpen) console { attrs.simulator = simulator }
-        if (isGlslPaletteOpen) patchDiagnostics {
-            attrs.renderPlanMonitor = simulator.pinky.fixtureManager.renderPlanMonitor
+        if (isGlslPaletteOpen) {
+            appContext.Provider {
+                attrs.value = stubAppContext
+
+                patchDiagnostics {
+                    attrs.renderPlanMonitor = simulator.pinky.fixtureManager.renderPlanMonitor
+                    attrs.onClose = handleIsGlslPaletteOpenChange as () -> Unit
+                }
+            }
         }
     }
 }