diff --git a/src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt b/src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt new file mode 100644 index 0000000000..4d9ea55178 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/src/jsMain/kotlin/baaahs/app/ui/Styles.kt b/src/jsMain/kotlin/baaahs/app/ui/Styles.kt index af11e1df4c..38381e6563 100644 --- a/src/jsMain/kotlin/baaahs/app/ui/Styles.kt +++ b/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, diff --git a/src/jsMain/kotlin/baaahs/sim/ui/SimulatorAppView.kt b/src/jsMain/kotlin/baaahs/sim/ui/SimulatorAppView.kt index be62ce9e21..0286044fde 100644 --- a/src/jsMain/kotlin/baaahs/sim/ui/SimulatorAppView.kt +++ b/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("SimulatorApp") { props -> - val theme = createTheme(jso {}) + val theme = Themes.Light val simulatorStyles = ThemedSimulatorStyles(theme) injectGlobal(simulatorStyles.global) val uiComponentStyles = UiComponentStyles(theme) diff --git a/src/jsMain/kotlin/baaahs/sim/ui/SimulatorStyles.kt b/src/jsMain/kotlin/baaahs/sim/ui/SimulatorStyles.kt index 030d398df8..aad97a9da2 100644 --- a/src/jsMain/kotlin/baaahs/sim/ui/SimulatorStyles.kt +++ b/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) { diff --git a/src/jsMain/kotlin/baaahs/sim/ui/StatusPanel.kt b/src/jsMain/kotlin/baaahs/sim/ui/StatusPanel.kt index 2010917bf1..621091dc87 100644 --- a/src/jsMain/kotlin/baaahs/sim/ui/StatusPanel.kt +++ b/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("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 { + this.allStyles = allStyles + } + } val handleIsConsoleOpenChange by eventHandler { isConsoleOpen = !isConsoleOpen } val handleIsGlslPaletteOpenChange by eventHandler { isGlslPaletteOpen = !isGlslPaletteOpen } @@ -46,8 +54,15 @@ val StatusPanelView = xComponent("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 + } + } } } }