From e01a688664ed2eb298284d07a77f889a37464654 Mon Sep 17 00:00:00 2001 From: Alexander Nozik Date: Thu, 19 Nov 2020 15:22:42 +0300 Subject: [PATCH] Fix JS config editor for properties without defaults --- .../hep/dataforge/vision/solid/demo/demo.kt | 2 +- .../vision/solid/demo/ThreeDemoGrid.kt | 2 +- .../dataforge/vision/react/ConfigEditor.kt | 196 +++++++++--------- .../vision/react/ThreeCanvasComponent.kt | 2 + .../vision/solid/three/ThreePlugin.kt | 4 +- 5 files changed, 109 insertions(+), 97 deletions(-) diff --git a/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt b/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt index 1e962957..f1618b8b 100644 --- a/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt +++ b/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt @@ -24,7 +24,7 @@ fun Page.demo(name: String, title: String = name, block: SolidGroup.() -> } val canvasOptions = Canvas3DOptions { - minSize = 500 + minSize = 600 axes { size = 500.0 visible = true diff --git a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt index a12355a4..a8d31a2d 100644 --- a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt +++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt @@ -66,7 +66,7 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page { id = name.toString() role = "tabpanel" attributes["aria-labelledby"] = "tab[$name]" - div("container w-100 h-100") { id = "output-$name" }.also {element-> + div("w-100 h-100") { id = "output-$name" }.also {element-> output = three.createCanvas(element, canvasOptions) } hr() diff --git a/ui/react/src/main/kotlin/hep/dataforge/vision/react/ConfigEditor.kt b/ui/react/src/main/kotlin/hep/dataforge/vision/react/ConfigEditor.kt index 56bb24a6..a4ecce5e 100644 --- a/ui/react/src/main/kotlin/hep/dataforge/vision/react/ConfigEditor.kt +++ b/ui/react/src/main/kotlin/hep/dataforge/vision/react/ConfigEditor.kt @@ -37,9 +37,10 @@ public external interface ConfigEditorItemProps : RProps { public var descriptor: NodeDescriptor? } -private val ConfigEditorItem: FunctionalComponent = functionalComponent("ConfigEditorItem") { props -> - configEditorItem(props) -} +private val ConfigEditorItem: FunctionalComponent = + functionalComponent("ConfigEditorItem") { props -> + configEditorItem(props) + } private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) { var expanded: Boolean by useState { true } @@ -82,26 +83,77 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) { update() } - when (actualItem) { - is MetaItem.NodeItem -> { + + + if (actualItem is MetaItem.NodeItem) { + styledDiv { + css { + +TreeStyles.treeLeaf + } + styledSpan { + css { + +TreeStyles.treeCaret + if (expanded) { + +TreeStyles.treeCaredDown + } + } + attrs { + onClickFunction = expanderClick + } + } + styledSpan { + css { + +TreeStyles.treeLabel + if (item == null) { + +TreeStyles.treeLabelInactive + } + } + +token + } + } + if (expanded) { + styledUl { + css { + +TreeStyles.tree + } + val keys = buildSet { + (descriptorItem as? NodeDescriptor)?.items?.keys?.forEach { + add(NameToken(it)) + } + item?.node?.items?.keys?.let { addAll(it) } + defaultItem?.node?.items?.keys?.let { addAll(it) } + } + + keys.filter { !it.body.startsWith("@") }.forEach { token -> + styledLi { + css { + +TreeStyles.treeItem + } + child(ConfigEditorItem) { + attrs { + this.key = props.name.toString() + this.root = props.root + this.name = props.name + token + this.default = props.default + this.descriptor = props.descriptor + } + } + //configEditor(props.root, props.name + token, props.descriptor, props.default) + } + } + } + } + } else { + styledDiv { + css { + +TreeStyles.treeLeaf + } styledDiv { css { - +TreeStyles.treeLeaf + +TreeStyles.treeLabel } styledSpan { css { - +TreeStyles.treeCaret - if (expanded) { - +TreeStyles.treeCaredDown - } - } - attrs { - onClickFunction = expanderClick - } - } - styledSpan { - css { - +TreeStyles.treeLabel if (item == null) { +TreeStyles.treeLabelInactive } @@ -109,83 +161,31 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) { +token } } - if (expanded) { - styledUl { - css { - +TreeStyles.tree - } - val keys = buildSet { - (descriptorItem as? NodeDescriptor)?.items?.keys?.forEach { - add(NameToken(it)) - } - item?.node?.items?.keys?.let { addAll(it) } - defaultItem?.node?.items?.keys?.let { addAll(it) } - } - - keys.filter { !it.body.startsWith("@") }.forEach { token -> - styledLi { - css { - +TreeStyles.treeItem - } - child(ConfigEditorItem) { - attrs { - this.key = props.name.toString() - this.root = props.root - this.name = props.name + token - this.default = props.default - this.descriptor = props.descriptor - } - } - //configEditor(props.root, props.name + token, props.descriptor, props.default) - } - } - } - } - } - is MetaItem.ValueItem -> { styledDiv { css { - +TreeStyles.treeLeaf + +TreeStyles.resizeableInput } - styledDiv { - css { - +TreeStyles.treeLabel - } - styledSpan { - css { - if (item == null) { - +TreeStyles.treeLabelInactive - } - } - +token - } - } - styledDiv { - css { - +TreeStyles.resizeableInput - } - valueChooser( - props.name, - actualItem, - descriptorItem as? ValueDescriptor, - valueChanged - ) - } - styledButton { - css { - +TreeStyles.removeButton - } - +"\u00D7" - attrs { - if (item == null) { - disabled = true - } else { - onClickFunction = removeClick - } - } - } - + valueChooser( + props.name, + actualItem, + descriptorItem as? ValueDescriptor, + valueChanged + ) } + styledButton { + css { + +TreeStyles.removeButton + } + +"\u00D7" + attrs { + if (item == null) { + disabled = true + } else { + onClickFunction = removeClick + } + } + } + } } } @@ -210,7 +210,12 @@ public val ConfigEditor: FunctionalComponent = functionalComp } } -public fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) { +public fun Element.configEditor( + config: Config, + descriptor: NodeDescriptor? = null, + default: Meta? = null, + key: Any? = null, +) { render(this) { child(ConfigEditor) { attrs { @@ -223,7 +228,12 @@ public fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = nu } } -public fun RBuilder.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) { +public fun RBuilder.configEditor( + config: Config, + descriptor: NodeDescriptor? = null, + default: Meta? = null, + key: Any? = null, +) { child(ConfigEditor) { attrs { this.key = key?.toString() ?: "" diff --git a/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt b/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt index bd0c8797..b9f81c4b 100644 --- a/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt +++ b/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt @@ -61,6 +61,8 @@ public val ThreeCanvasComponent: FunctionalComponent = functio minWidth = 500.px minHeight = 500.px display = Display.inherit + width = 100.pct + height = 100.pct flex(1.0, 1.0, FlexBasis.auto) } ref = elementRef diff --git a/visionforge-solid/src/jsMain/kotlin/hep/dataforge/vision/solid/three/ThreePlugin.kt b/visionforge-solid/src/jsMain/kotlin/hep/dataforge/vision/solid/three/ThreePlugin.kt index 628f7804..cbe62240 100644 --- a/visionforge-solid/src/jsMain/kotlin/hep/dataforge/vision/solid/three/ThreePlugin.kt +++ b/visionforge-solid/src/jsMain/kotlin/hep/dataforge/vision/solid/three/ThreePlugin.kt @@ -117,14 +117,14 @@ public class ThreePlugin : AbstractPlugin(), HtmlVisionBinding { } public fun createCanvas( - element: HTMLElement, + element: Element, options: Canvas3DOptions = Canvas3DOptions.empty(), ): ThreeCanvas = ThreeCanvas(this, options).apply { attach(element) } override fun bind(element: Element, vision: Solid) { - TODO("Not yet implemented") + createCanvas(element).render(vision) } public companion object : PluginFactory {