Skip to content

Commit 478ac87

Browse files
merge-when-green[bot]merge-when-green[bot]
authored
Merge pull request #497 from baaahs/patch-editor-cleanup
Rearrange patch editor
2 parents 64f8568 + 76a72dd commit 478ac87

18 files changed

+317
-129
lines changed

‎src/jsMain/kotlin/baaahs/JsMain.kt

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package baaahs
22

3+
import baaahs.app.ui.PatchEditorApp
34
import baaahs.client.WebClient
45
import baaahs.di.*
56
import baaahs.monitor.MonitorUi
@@ -81,6 +82,11 @@ private fun launchUi(appName: String?) {
8182
koin.createScope<WebClient>().get<WebClient>()
8283
}
8384

85+
"PatchEditor" -> {
86+
koin.loadModules(listOf(JsUiWebClientModule().getModule()))
87+
koin.createScope<WebClient>().get<PatchEditorApp>()
88+
}
89+
8490
else -> throw UnsupportedOperationException("unknown mode $appName")
8591
}
8692

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

-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import styled.injectGlobal
1919

2020
class AllStyles(val theme: Theme) {
2121
val appUi by lazy { ThemeStyles(theme) }
22-
val editor by lazy { baaahs.ui.editor.Styles(theme) }
2322
val controls by lazy { baaahs.app.ui.controls.ThemeStyles(theme) }
2423
val gadgetsSlider by lazy { ThemedStyles(theme) }
2524
val editableManager by lazy { ThemedEditableStyles(theme) }

‎src/jsMain/kotlin/baaahs/app/ui/AppContext.kt

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import baaahs.client.document.SceneManager
1212
import baaahs.client.document.ShowManager
1313
import baaahs.gl.Toolchain
1414
import baaahs.plugin.Plugins
15+
import baaahs.scene.SceneProvider
1516
import baaahs.ui.KeyboardShortcutHandler
1617
import baaahs.ui.Prompt
1718
import baaahs.ui.ReactBeautifulDragNDrop
@@ -39,6 +40,7 @@ external interface AppContext {
3940
var clock: Clock
4041
var showManager: ShowManager.Facade
4142
var sceneManager: SceneManager.Facade
43+
var sceneProvider: SceneProvider
4244
var fileDialog: FileDialog
4345
var notifier: Notifier.Facade
4446
var gridLayoutContext: GridLayoutContext

‎src/jsMain/kotlin/baaahs/app/ui/AppIndex.kt

+1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ val AppIndex = xComponent<AppIndexProps>("AppIndex") { props ->
8383
this.clock = JsClock
8484
this.showManager = props.showManager
8585
this.sceneManager = props.sceneManager
86+
this.sceneProvider = webClient.sceneProvider
8687
this.fileDialog = webClient.fileDialog
8788
this.notifier = webClient.notifier
8889
this.gridLayoutContext = gridLayoutContext

‎src/jsMain/kotlin/baaahs/app/ui/PatchEditorAppIndexView.kt

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
package baaahs.app.ui
2+
3+
import baaahs.app.ui.editor.ControlEditIntent
4+
import baaahs.app.ui.editor.ShowEditableManager
5+
import baaahs.app.ui.editor.editableManagerUi
6+
import baaahs.client.WebClient
7+
import baaahs.client.document.ShowManager
8+
import baaahs.gl.Toolchain
9+
import baaahs.gl.withCache
10+
import baaahs.model.Model
11+
import baaahs.plugin.Plugins
12+
import baaahs.scene.OpenScene
13+
import baaahs.scene.SceneMonitor
14+
import baaahs.show.SampleData
15+
import baaahs.sim.HostedWebApp
16+
import baaahs.ui.xComponent
17+
import baaahs.util.JsClock
18+
import kotlinx.js.jso
19+
import mui.material.CssBaseline
20+
import mui.material.Paper
21+
import mui.material.styles.ThemeProvider
22+
import react.*
23+
import react.dom.div
24+
25+
class PatchEditorApp(
26+
private val plugins: Plugins,
27+
private val toolchain: Toolchain,
28+
private val showManager: ShowManager,
29+
) : HostedWebApp {
30+
override fun render(): ReactElement<*> {
31+
return createElement(PatchEditorAppIndexView, jso {
32+
this.plugins = this@PatchEditorApp.plugins
33+
this.toolchain = this@PatchEditorApp.toolchain
34+
this.showManager = this@PatchEditorApp.showManager.facade
35+
})
36+
}
37+
38+
override fun onClose() {
39+
}
40+
41+
}
42+
43+
val PatchEditorAppIndexView = xComponent<PatchEditorAppIndexProps>("PatchEditorAppIndex") { props ->
44+
val showManager = props.showManager
45+
observe(showManager)
46+
47+
val darkMode = true
48+
val theme = if (darkMode) Themes.Dark else Themes.Light
49+
val allStyles = memo(theme) { AllStyles(theme) }
50+
51+
val show = memo { SampleData.sampleShow }
52+
val editableManager by state {
53+
ShowEditableManager { newShow -> showManager.onEdit(newShow) }
54+
.also {
55+
var controlId = "none"
56+
show.controls.forEach { (k, v) ->
57+
if (v.title == "Wobble") controlId = k
58+
}
59+
it.openEditor(show, ControlEditIntent(controlId), props.toolchain)
60+
}
61+
}
62+
val sceneMonitor = memo {
63+
SceneMonitor(OpenScene(Model("Empty model", emptyList())))
64+
}
65+
66+
val myAppContext = memo(allStyles) {
67+
jso<AppContext> {
68+
this.plugins = props.plugins
69+
this.toolchain = props.toolchain
70+
this.allStyles = allStyles
71+
this.clock = JsClock
72+
this.showManager = showManager
73+
this.sceneProvider = sceneMonitor
74+
75+
this.openEditor = { editIntent ->
76+
editableManager.openEditor(
77+
show, editIntent, props.toolchain.withCache("Edit Session")
78+
)
79+
}
80+
}
81+
}
82+
83+
val myAppGlContext = memo { jso<AppGlContext> { this.sharedGlContext = null } }
84+
85+
appContext.Provider {
86+
attrs.value = myAppContext
87+
88+
appGlContext.Provider {
89+
attrs.value = myAppGlContext
90+
91+
ThemeProvider {
92+
attrs.theme = theme
93+
CssBaseline {}
94+
95+
Paper {
96+
div {
97+
editableManagerUi {
98+
attrs.editableManager = editableManager
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}
106+
107+
external interface PatchEditorAppIndexProps : Props {
108+
var webClient: WebClient.Facade
109+
var plugins: Plugins
110+
var toolchain: Toolchain
111+
var showManager: ShowManager.Facade
112+
}
113+
114+
fun RBuilder.patchEditorAppIndex(handler: RHandler<PatchEditorAppIndexProps>) =
115+
child(PatchEditorAppIndexView, handler = handler)

‎src/jsMain/kotlin/baaahs/app/ui/ShaderPreview.kt

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ val ShaderPreview = xComponent<ShaderPreviewProps>("ShaderPreview") { props ->
4949
bootstrapper.createHelper(sharedGlContext)
5050
}
5151
val previewContainer = helper.container
52-
val sceneManager = appContext.sceneManager
53-
observe(sceneManager)
54-
val model = sceneManager.openScene?.model
52+
val sceneProvider = appContext.sceneProvider
53+
observe(sceneProvider)
54+
val model = sceneProvider.openScene?.model
5555
// var model by state { sceneManager.openScene?.model }
5656
// onMount {
5757
// val listener = sceneManager.addSceneChangeListener { newScene ->

‎src/jsMain/kotlin/baaahs/app/ui/editor/LinkSourceEditorView.kt

+2
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ private val LinkSourceEditor = xComponent<LinkSourceEditorProps>("LinkSourceEdit
5151

5252
FormControl {
5353
Select<SelectProps<LinkOption>> {
54+
attrs.margin = InputBaseMargin.dense
55+
attrs.size = Size.small
5456
attrs.value = selected
5557
if (selected == null) {
5658
this@xComponent.logger.warn { "Huh? None of the LinkOptions are active for ${props.inputPort.id}?" }

‎src/jsMain/kotlin/baaahs/app/ui/editor/LinksEditorView.kt

+5
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import baaahs.app.ui.Colors
44
import baaahs.gl.shader.InputPort
55
import baaahs.show.mutable.EditingShader
66
import baaahs.ui.*
7+
import csstype.px
78
import kotlinx.js.jso
89
import materialui.icon
910
import mui.material.*
11+
import mui.system.sx
1012
import react.Props
1113
import react.RBuilder
1214
import react.RHandler
@@ -26,6 +28,9 @@ private val LinksEditor = xComponent<LinksEditorProps>("LinksEditor") { props ->
2628
typographyH6 { +"Analyzing Shader…" }
2729
} else Table {
2830
attrs.size = Size.small
31+
attrs.padding = TablePadding.none
32+
attrs.stickyHeader = true
33+
attrs.sx { borderSpacing = 3.px }
2934

3035
TableHead {
3136
TableRow {

‎src/jsMain/kotlin/baaahs/app/ui/editor/PatchEditorView.kt

+33-27
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ import baaahs.ui.addObserver
1313
import baaahs.ui.unaryMinus
1414
import baaahs.ui.unaryPlus
1515
import baaahs.ui.xComponent
16+
import csstype.Auto
1617
import kotlinx.html.js.onClickFunction
18+
import kotlinx.html.org.w3c.dom.events.Event
1719
import kotlinx.js.jso
1820
import materialui.icon
1921
import mui.material.*
22+
import mui.system.sx
2023
import org.w3c.dom.Element
21-
import kotlinx.html.org.w3c.dom.events.Event
2224
import react.*
2325
import react.dom.div
2426

@@ -51,7 +53,7 @@ private val PatchEditorView = xComponent<PatchEditorProps>("PatchEditor") { prop
5153
props.mutablePatch,
5254
toolchain
5355
) { shader ->
54-
PreviewShaderBuilder(shader, toolchain, appContext.webClient.sceneProvider)
56+
PreviewShaderBuilder(shader, toolchain, appContext.sceneProvider)
5557
}
5658

5759
val observer = newEditingShader.addObserver {
@@ -88,18 +90,45 @@ private val PatchEditorView = xComponent<PatchEditorProps>("PatchEditor") { prop
8890
settingsMenuAnchor = null
8991
}
9092

91-
div(+shaderEditorStyles.propsAndPreview) {
93+
div(+shaderEditorStyles.container) {
94+
div(+shaderEditorStyles.shaderEditor) {
95+
shaderEditor {
96+
attrs.editingShader = editingShader
97+
}
98+
}
99+
100+
div(+shaderEditorStyles.previewContainer) {
101+
shaderPreview {
102+
attrs.shader = editingShader.shaderBuilder.shader
103+
attrs.previewShaderBuilder = editingShader.shaderBuilder
104+
attrs.width = ShaderEditorStyles.previewWidth
105+
attrs.height = ShaderEditorStyles.previewHeight
106+
attrs.adjustGadgets = if (autoAdjustGadgets) {
107+
if (fullRange) GadgetAdjuster.Mode.FULL_RANGE else GadgetAdjuster.Mode.INCREMENTAL
108+
} else null
109+
attrs.toolchain = toolchain
110+
}
111+
112+
div(+shaderEditorStyles.settingsMenuAffordance) {
113+
attrs.onClickFunction = showSettingsMenu
114+
115+
icon(mui.icons.material.Settings)
116+
}
117+
}
118+
92119
div(+shaderEditorStyles.propsTabsAndPanels) {
93120
Tabs {
94121
attrs.classes = jso { this.flexContainer = -shaderEditorStyles.tabsContainer }
95122
attrs.value = selectedTab
96123
attrs.onChange = handleChangeTab.asDynamic()
97-
attrs.orientation = Orientation.vertical
124+
attrs.orientation = Orientation.horizontal
125+
attrs.variant = TabsVariant.scrollable
98126
PageTabs.values().forEach { tab ->
99127
Tab {
100128
attrs.classes = jso { this.root = -shaderEditorStyles.tab }
101129
attrs.label = buildElement { +tab.name }
102130
attrs.value = tab.asDynamic()
131+
attrs.sx { minWidth = Auto.auto }
103132
}
104133
}
105134
}
@@ -123,29 +152,6 @@ private val PatchEditorView = xComponent<PatchEditorProps>("PatchEditor") { prop
123152
}
124153
}
125154
}
126-
127-
div(+shaderEditorStyles.previewContainer) {
128-
shaderPreview {
129-
attrs.shader = editingShader.shaderBuilder.shader
130-
attrs.previewShaderBuilder = editingShader.shaderBuilder
131-
attrs.width = ShaderEditorStyles.previewWidth
132-
attrs.height = ShaderEditorStyles.previewHeight
133-
attrs.adjustGadgets = if (autoAdjustGadgets) {
134-
if (fullRange) GadgetAdjuster.Mode.FULL_RANGE else GadgetAdjuster.Mode.INCREMENTAL
135-
} else null
136-
attrs.toolchain = toolchain
137-
}
138-
139-
div(+shaderEditorStyles.settingsMenuAffordance) {
140-
attrs.onClickFunction = showSettingsMenu
141-
142-
icon(mui.icons.material.Settings)
143-
}
144-
}
145-
}
146-
147-
shaderEditor {
148-
attrs.editingShader = editingShader
149155
}
150156

151157
Menu {

0 commit comments

Comments
 (0)