.() -> Unit,
-): ReactElement = styledDiv {
+): Unit = styledDiv {
css {
classes.add("container${size.suffix}")
}
@@ -164,7 +163,7 @@ public inline fun RBuilder.gridColumn(
weight: Int? = null,
maxSize: GridMaxSize = GridMaxSize.NONE,
block: StyledDOMBuilder
.() -> Unit,
-): ReactElement = styledDiv {
+): Unit = styledDiv {
val weightSuffix = weight?.let { "-$it" } ?: ""
css {
classes.add("col${maxSize.suffix}$weightSuffix")
@@ -174,7 +173,7 @@ public inline fun RBuilder.gridColumn(
public inline fun RBuilder.gridRow(
block: StyledDOMBuilder
.() -> Unit,
-): ReactElement = styledDiv {
+): Unit = styledDiv {
css {
classes.add("row")
}
diff --git a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/tabComponent.kt b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/tabComponent.kt
index 5ff0d5e8..07bd9b55 100644
--- a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/tabComponent.kt
+++ b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/tabComponent.kt
@@ -12,22 +12,22 @@ import space.kscience.visionforge.react.flexColumn
import styled.StyledDOMBuilder
import styled.styledDiv
-public external class TabProps : RProps {
+public external interface TabProps : PropsWithChildren {
public var id: String
public var title: String?
}
@JsExport
-public val Tab: FunctionalComponent
= functionalComponent { props ->
+public val Tab: FC = fc { props ->
props.children()
}
-public external class TabPaneProps : RProps {
+public external interface TabPaneProps : PropsWithChildren {
public var activeTab: String?
}
@JsExport
-public val TabPane: FunctionalComponent = functionalComponent("TabPane") { props ->
+public val TabPane: FC = fc("TabPane") { props ->
var activeTab: String? by useState(props.activeTab)
val children: Array = Children.map(props.children) {
diff --git a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt
index e8166f35..e7602b0e 100644
--- a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt
+++ b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt
@@ -2,8 +2,11 @@ package space.kscience.visionforge.bootstrap
import kotlinx.css.*
import kotlinx.css.properties.border
-import react.*
+import react.FC
+import react.PropsWithChildren
+import react.RBuilder
import react.dom.h2
+import react.fc
import space.kscience.dataforge.names.Name
import space.kscience.dataforge.names.isEmpty
import space.kscience.visionforge.Vision
@@ -13,7 +16,7 @@ import space.kscience.visionforge.solid.specifications.Canvas3DOptions
import styled.css
import styled.styledDiv
-public external interface ThreeControlsProps : RProps {
+public external interface ThreeControlsProps : PropsWithChildren {
public var canvasOptions: Canvas3DOptions
public var vision: Vision?
public var selected: Name?
@@ -21,7 +24,7 @@ public external interface ThreeControlsProps : RProps {
}
@JsExport
-public val ThreeControls: FunctionalComponent = functionalComponent { props ->
+public val ThreeControls: FC = fc { props ->
tabPane(if (props.selected != null) "Properties" else null) {
tab("Canvas") {
card("Canvas configuration") {
@@ -67,7 +70,7 @@ public fun RBuilder.threeControls(
selected: Name?,
onSelect: (Name) -> Unit = {},
builder: TabBuilder.() -> Unit = {},
-): ReactElement = child(ThreeControls) {
+): Unit = child(ThreeControls) {
attrs {
this.canvasOptions = canvasOptions
this.vision = vision
diff --git a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/visionPropertyEditor.kt b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/visionPropertyEditor.kt
index 7f28473e..a65c1f42 100644
--- a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/visionPropertyEditor.kt
+++ b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/visionPropertyEditor.kt
@@ -3,23 +3,25 @@ package space.kscience.visionforge.bootstrap
import org.w3c.dom.Element
import react.RBuilder
import react.dom.render
-import space.kscience.dataforge.meta.descriptors.NodeDescriptor
-import space.kscience.visionforge.*
+import space.kscience.dataforge.meta.descriptors.MetaDescriptor
+import space.kscience.visionforge.Vision
+import space.kscience.visionforge.computeProperties
+import space.kscience.visionforge.getStyle
import space.kscience.visionforge.react.metaViewer
import space.kscience.visionforge.react.propertyEditor
import space.kscience.visionforge.solid.SolidReference
+import space.kscience.visionforge.styles
public fun RBuilder.visionPropertyEditor(
vision: Vision,
- descriptor: NodeDescriptor? = vision.descriptor,
+ descriptor: MetaDescriptor? = vision.descriptor,
key: Any? = null,
) {
card("Properties") {
propertyEditor(
- ownProperties = vision.ownProperties,
- allProperties = vision.allProperties(),
- updateFlow = vision.propertyChanges,
+ ownProperties = vision.meta,
+ allProperties = vision.computeProperties(),
descriptor = descriptor,
key = key
)
@@ -47,7 +49,7 @@ public fun RBuilder.visionPropertyEditor(
public fun Element.visionPropertyEditor(
item: Vision,
- descriptor: NodeDescriptor? = item.descriptor,
+ descriptor: MetaDescriptor? = item.descriptor,
): Unit = render(this) {
visionPropertyEditor(item, descriptor = descriptor)
}
\ No newline at end of file
diff --git a/ui/react/README.md b/ui/react/README.md
new file mode 100644
index 00000000..9f862213
--- /dev/null
+++ b/ui/react/README.md
@@ -0,0 +1,4 @@
+# Module react
+
+
+
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt
index a3972612..651c9d31 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt
@@ -8,12 +8,10 @@ import react.*
import react.dom.a
import react.dom.attrs
import space.kscience.dataforge.meta.Meta
-import space.kscience.dataforge.meta.MetaItemNode
-import space.kscience.dataforge.meta.MetaItemValue
-import space.kscience.dataforge.meta.descriptors.ItemDescriptor
-import space.kscience.dataforge.meta.descriptors.NodeDescriptor
+import space.kscience.dataforge.meta.descriptors.MetaDescriptor
import space.kscience.dataforge.meta.descriptors.get
import space.kscience.dataforge.meta.get
+import space.kscience.dataforge.meta.isLeaf
import space.kscience.dataforge.names.Name
import space.kscience.dataforge.names.NameToken
import space.kscience.dataforge.names.lastOrNull
@@ -22,7 +20,7 @@ import styled.css
import styled.styledDiv
import styled.styledSpan
-public external interface MetaViewerProps : RProps {
+public external interface MetaViewerProps : Props {
/**
* Root meta
*/
@@ -41,18 +39,19 @@ public external interface MetaViewerProps : RProps {
/**
* Root descriptor
*/
- public var descriptor: NodeDescriptor?
+ public var descriptor: MetaDescriptor?
}
-private val MetaViewerItem: FunctionalComponent = functionalComponent("MetaViewerItem") { props ->
+private val MetaViewerItem: FC = fc("MetaViewerItem") { props ->
metaViewerItem(props)
}
private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
var expanded: Boolean by useState { true }
val item = props.root[props.name]
- val descriptorItem: ItemDescriptor? = props.descriptor?.get(props.name)
- val actualItem = item ?: descriptorItem?.defaultValue
+ val descriptorItem: MetaDescriptor? = props.descriptor?.get(props.name)
+ val actualValue = item?.value ?: descriptorItem?.defaultValue
+ val actualMeta = item ?: descriptorItem?.defaultNode
val token = props.name.lastOrNull()?.toString() ?: props.rootName ?: ""
@@ -60,102 +59,86 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
expanded = !expanded
}
- when (actualItem) {
- is MetaItemNode -> {
- flexRow {
+ flexRow {
+ css {
+ alignItems = Align.center
+ }
+ if (actualMeta?.isLeaf == false) {
+ styledSpan {
css {
- alignItems = Align.center
- }
- styledSpan {
- css {
- +TreeStyles.treeCaret
- if (expanded) {
- +TreeStyles.treeCaredDown
- }
- }
- attrs {
- onClickFunction = expanderClick
+ +TreeStyles.treeCaret
+ if (expanded) {
+ +TreeStyles.treeCaredDown
}
}
- styledSpan {
- css {
- +TreeStyles.treeLabel
- if (item == null) {
- +TreeStyles.treeLabelInactive
- }
- }
- +token
- }
- }
- if (expanded) {
- flexColumn {
- css {
- +TreeStyles.tree
- }
- val keys = buildSet {
- (descriptorItem as? NodeDescriptor)?.items?.keys?.forEach {
- add(NameToken(it))
- }
- actualItem.node.items.keys.let { addAll(it) }
- }
-
- keys.filter { !it.body.startsWith("@") }.forEach { token ->
- styledDiv {
- css {
- +TreeStyles.treeItem
- }
- child(MetaViewerItem) {
- attrs {
- this.key = props.name.toString()
- this.root = props.root
- this.name = props.name + token
- this.descriptor = props.descriptor
- }
- }
- //configEditor(props.root, props.name + token, props.descriptor, props.default)
- }
- }
+ attrs {
+ onClickFunction = expanderClick
}
}
}
- is MetaItemValue -> {
- flexRow {
- css {
- alignItems = Align.center
- }
- styledSpan {
- css {
- +TreeStyles.treeLabel
- if (item == null) {
- +TreeStyles.treeLabelInactive
- }
- }
- +token
- }
- styledDiv {
- a {
- +actualItem.value.toString()
- }
+
+ styledSpan {
+ css {
+ +TreeStyles.treeLabel
+ if (item == null) {
+ +TreeStyles.treeLabelInactive
}
}
+ +token
+ }
+ styledDiv {
+ a {
+ +actualValue.toString()
+ }
+ }
+ }
+ if (expanded) {
+ flexColumn {
+ css {
+ +TreeStyles.tree
+ }
+ val keys = buildSet {
+ descriptorItem?.children?.keys?.forEach {
+ add(NameToken(it))
+ }
+ actualMeta!!.items.keys.let { addAll(it) }
+ }
+
+ keys.filter { !it.body.startsWith("@") }.forEach { token ->
+ styledDiv {
+ css {
+ +TreeStyles.treeItem
+ }
+ child(MetaViewerItem) {
+ attrs {
+ this.key = props.name.toString()
+ this.root = props.root
+ this.name = props.name + token
+ this.descriptor = props.descriptor
+ }
+ }
+ //configEditor(props.root, props.name + token, props.descriptor, props.default)
+ }
+ }
+ }
+ }
+
+
+}
+
+@JsExport
+public val MetaViewer: FC = fc("MetaViewer") { props ->
+ child(MetaViewerItem) {
+ attrs {
+ this.key = ""
+ this.root = props.root
+ this.name = Name.EMPTY
+ this.descriptor = props.descriptor
}
}
}
-@JsExport
-public val MetaViewer: FunctionalComponent =
- functionalComponent("MetaViewer") { props ->
- child(MetaViewerItem) {
- attrs {
- this.key = ""
- this.root = props.root
- this.name = Name.EMPTY
- this.descriptor = props.descriptor
- }
- }
- }
-
-public fun RBuilder.metaViewer(meta: Meta, descriptor: NodeDescriptor? = null, key: Any? = null) {
+public fun RBuilder.metaViewer(meta: Meta, descriptor: MetaDescriptor? = null, key: Any? = null) {
child(MetaViewer) {
attrs {
this.key = key?.toString() ?: ""
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/MultiSelectChooser.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/MultiSelectChooser.kt
index a363fcd5..f3c81a57 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/MultiSelectChooser.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/MultiSelectChooser.kt
@@ -5,39 +5,34 @@ import org.w3c.dom.HTMLOptionElement
import org.w3c.dom.HTMLSelectElement
import org.w3c.dom.asList
import org.w3c.dom.events.Event
-import react.FunctionalComponent
+import react.FC
import react.dom.attrs
import react.dom.option
import react.dom.select
-import react.functionalComponent
-import react.useState
-import space.kscience.dataforge.meta.value
+import react.fc
+import space.kscience.dataforge.meta.descriptors.allowedValues
import space.kscience.dataforge.values.asValue
import space.kscience.dataforge.values.string
@JsExport
-public val MultiSelectChooser: FunctionalComponent =
- functionalComponent("MultiSelectChooser") { props ->
- var selectedItems by useState { props.item.value?.list ?: emptyList() }
+public val MultiSelectChooser: FC = fc("MultiSelectChooser") { props ->
+ val onChange: (Event) -> Unit = { event: Event ->
+ val newSelected = (event.target as HTMLSelectElement).selectedOptions.asList()
+ .map { (it as HTMLOptionElement).value.asValue() }
+ props.meta.value = newSelected.asValue()
+ }
- val onChange: (Event) -> Unit = { event: Event ->
- val newSelected= (event.target as HTMLSelectElement).selectedOptions.asList()
- .map { (it as HTMLOptionElement).value.asValue() }
- props.valueChanged?.invoke(newSelected.asValue())
- selectedItems = newSelected
+ select {
+ attrs {
+ multiple = true
+ values = (props.actual.value?.list ?: emptyList()).mapTo(HashSet()) { it.string }
+ onChangeFunction = onChange
+ }
+ props.descriptor?.allowedValues?.forEach { optionValue ->
+ option {
+ +optionValue.string
+ }
}
- select {
- attrs {
- multiple = true
- values = selectedItems.mapTo(HashSet()) { it.string }
- onChangeFunction = onChange
- }
- props.descriptor?.allowedValues?.forEach { optionValue ->
- option {
- +optionValue.string
- }
- }
-
- }
- }
\ No newline at end of file
+ }
+}
\ No newline at end of file
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt
index 6e41555b..6c677e2e 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt
@@ -1,14 +1,5 @@
package space.kscience.visionforge.react
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.ExperimentalCoroutinesApi
-import kotlinx.coroutines.GlobalScope
-import kotlinx.coroutines.channels.awaitClose
-import kotlinx.coroutines.flow.Flow
-import kotlinx.coroutines.flow.callbackFlow
-import kotlinx.coroutines.flow.launchIn
-import kotlinx.coroutines.flow.onEach
-import kotlinx.coroutines.launch
import kotlinx.css.*
import kotlinx.css.properties.TextDecoration
import kotlinx.html.js.onClickFunction
@@ -18,52 +9,37 @@ import react.*
import react.dom.attrs
import react.dom.render
import space.kscience.dataforge.meta.*
-import space.kscience.dataforge.meta.descriptors.ItemDescriptor
-import space.kscience.dataforge.meta.descriptors.NodeDescriptor
-import space.kscience.dataforge.meta.descriptors.ValueDescriptor
+import space.kscience.dataforge.meta.descriptors.MetaDescriptor
+import space.kscience.dataforge.meta.descriptors.ValueRequirement
import space.kscience.dataforge.meta.descriptors.get
-import space.kscience.dataforge.names.Name
-import space.kscience.dataforge.names.NameToken
-import space.kscience.dataforge.names.lastOrNull
-import space.kscience.dataforge.names.plus
-import space.kscience.dataforge.values.Value
+import space.kscience.dataforge.names.*
import space.kscience.visionforge.hidden
import styled.css
import styled.styledButton
import styled.styledDiv
import styled.styledSpan
-public external interface PropertyEditorProps : RProps {
+public external interface PropertyEditorProps : Props {
/**
- * Root config object - always non null
+ * Root config object - always non-null
*/
- public var ownProperties: MutableItemProvider
+ public var meta: ObservableMutableMeta
/**
* Provide default item (greyed out if used)
*/
- public var allProperties: ItemProvider?
+ public var withDefault: MetaProvider
/**
- * Full path to the displayed node in [ownProperties]. Could be empty
+ * Full path to the displayed node in [meta]. Could be empty
*/
public var name: Name
/**
* Root descriptor
*/
- public var descriptor: NodeDescriptor?
-
- /**
- * A coroutine scope for updates
- */
- public var scope: CoroutineScope?
-
- /**
- * Flow names of updated properties
- */
- public var updateFlow: Flow?
+ public var descriptor: MetaDescriptor?
/**
* Initial expanded state
@@ -71,67 +47,59 @@ public external interface PropertyEditorProps : RProps {
public var expanded: Boolean?
}
-private val PropertyEditorItem: FunctionalComponent =
- functionalComponent("ConfigEditorItem") { props ->
- propertyEditorItem(props)
- }
+private val PropertyEditorItem: FC = fc("PropertyEditorItem") { props ->
+ propertyEditorItem(props)
+}
private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
var expanded: Boolean by useState { props.expanded ?: true }
- val descriptorItem: ItemDescriptor? = props.descriptor?.get(props.name)
- var ownProperty: MetaItem? by useState { props.ownProperties.getItem(props.name) }
- val actualItem: MetaItem? = props.allProperties?.getItem(props.name)
+ val descriptor: MetaDescriptor? = useMemo(props.descriptor, props.name) { props.descriptor?.get(props.name) }
+ var ownProperty: ObservableMutableMeta by useState { props.meta.getOrCreate(props.name) }
+
+ val keys = useMemo(descriptor) {
+ buildSet {
+ descriptor?.children?.filterNot {
+ it.key.startsWith("@") || it.value.hidden
+ }?.forEach {
+ add(NameToken(it.key))
+ }
+ //ownProperty?.items?.keys?.filterNot { it.body.startsWith("@") }?.let { addAll(it) }
+ }
+ }
val token = props.name.lastOrNull()?.toString() ?: "Properties"
fun update() {
- ownProperty = props.ownProperties.getItem(props.name)
+ ownProperty = props.meta.getOrCreate(props.name)
}
- if (props.updateFlow != null) {
- useEffect(props.ownProperties, props.updateFlow) {
- val updateJob = props.updateFlow!!.onEach { updatedName ->
- if (updatedName == props.name) {
- update()
- }
- }.launchIn(props.scope ?: GlobalScope)
- cleanup {
- updateJob.cancel()
+ useEffect(props.meta) {
+ props.meta.onChange(props) { updatedName ->
+ if (updatedName == props.name) {
+ update()
}
}
+ cleanup {
+ props.meta.removeListener(props)
+ }
}
val expanderClick: (Event) -> Unit = {
expanded = !expanded
}
- val valueChanged: (Value?) -> Unit = {
- if (it == null) {
- props.ownProperties.remove(props.name)
- } else {
- props.ownProperties[props.name] = it
- }
- update()
- }
-
val removeClick: (Event) -> Unit = {
- props.ownProperties.remove(props.name)
+ props.meta.remove(props.name)
update()
}
- if (actualItem is MetaItemNode) {
- val keys = buildSet {
- (descriptorItem as? NodeDescriptor)?.items?.filterNot {
- it.key.startsWith("@") || it.value.hidden
- }?.forEach {
- add(NameToken(it.key))
- }
- ownProperty?.node?.items?.keys?.filterNot { it.body.startsWith("@") }?.let { addAll(it) }
- }
- // Do not show nodes without visible children
- if (keys.isEmpty()) return
- flexRow {
+
+ flexRow {
+ css {
+ alignItems = Align.center
+ }
+ if (keys.isNotEmpty()) {
styledSpan {
css {
+TreeStyles.treeCaret
@@ -143,67 +111,30 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
onClickFunction = expanderClick
}
}
- styledSpan {
- css {
- +TreeStyles.treeLabel
- if (ownProperty == null) {
- +TreeStyles.treeLabelInactive
- }
- }
- +token
- }
}
- if (expanded) {
- flexColumn {
- css {
- +TreeStyles.tree
- }
- keys.forEach { token ->
- styledDiv {
- css {
- +TreeStyles.treeItem
- }
- child(PropertyEditorItem) {
- attrs {
- this.key = props.name.toString()
- this.ownProperties = props.ownProperties
- this.allProperties = props.allProperties
- this.name = props.name + token
- this.descriptor = props.descriptor
- }
- }
- //configEditor(props.root, props.name + token, props.descriptor, props.default)
- }
- }
- }
- }
- } else {
- flexRow {
+ styledSpan {
css {
- alignItems = Align.center
- }
- styledSpan {
- css {
- +TreeStyles.treeLabel
- if (ownProperty == null) {
- +TreeStyles.treeLabelInactive
- }
+ +TreeStyles.treeLabel
+ if (ownProperty.isEmpty()) {
+ +TreeStyles.treeLabelInactive
}
- +token
}
-
+ +token
+ }
+ if (!props.name.isEmpty() && descriptor?.valueRequirement != ValueRequirement.ABSENT) {
styledDiv {
css {
//+TreeStyles.resizeableInput
width = 160.px
margin(1.px, 5.px)
}
- valueChooser(
- props.name,
- actualItem,
- descriptorItem as? ValueDescriptor,
- valueChanged
- )
+ ValueChooser {
+ attrs {
+ this.descriptor = descriptor
+ this.meta = ownProperty
+ this.actual = props.withDefault.getMeta(props.name) ?: ownProperty
+ }
+ }
}
styledButton {
@@ -225,83 +156,85 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
}
+"\u00D7"
attrs {
- if (ownProperty == null) {
+ if (ownProperty.isEmpty()) {
disabled = true
} else {
onClickFunction = removeClick
}
}
}
-
+ }
+ }
+ if (expanded) {
+ flexColumn {
+ css {
+ +TreeStyles.tree
+ }
+ keys.forEach { token ->
+ styledDiv {
+ css {
+ +TreeStyles.treeItem
+ }
+ child(PropertyEditorItem) {
+ attrs {
+ this.key = props.name.toString()
+ this.meta = props.meta
+ this.withDefault = props.withDefault
+ this.name = props.name + token
+ this.descriptor = props.descriptor
+ }
+ }
+ //configEditor(props.root, props.name + token, props.descriptor, props.default)
+ }
+ }
}
}
}
-
@JsExport
-public val PropertyEditor: FunctionalComponent = functionalComponent("PropertyEditor") { props ->
+public val PropertyEditor: FC = fc("PropertyEditor") { props ->
child(PropertyEditorItem) {
attrs {
this.key = ""
- this.ownProperties = props.ownProperties
- this.allProperties = props.allProperties
+ this.meta = props.meta
+ this.withDefault = props.withDefault
this.name = Name.EMPTY
this.descriptor = props.descriptor
- this.scope = props.scope
this.expanded = props.expanded
}
}
}
public fun RBuilder.propertyEditor(
- ownProperties: MutableItemProvider,
- allProperties: ItemProvider? = ownProperties,
- updateFlow: Flow? = null,
- descriptor: NodeDescriptor? = null,
- scope: CoroutineScope? = null,
+ ownProperties: ObservableMutableMeta,
+ allProperties: MetaProvider = ownProperties,
+ descriptor: MetaDescriptor? = null,
key: Any? = null,
- expanded: Boolean? = null
+ expanded: Boolean? = null,
) {
child(PropertyEditor) {
attrs {
- this.ownProperties = ownProperties
- this.allProperties = allProperties
- this.updateFlow = updateFlow
+ this.meta = ownProperties
+ this.withDefault = allProperties
this.descriptor = descriptor
this.key = key?.toString() ?: ""
- this.scope = scope
this.expanded = expanded
}
}
}
-@OptIn(ExperimentalCoroutinesApi::class)
-private fun Config.flowUpdates(): Flow = callbackFlow {
- onChange(this) { name, _, _ ->
- launch {
- send(name)
- }
- }
- awaitClose {
- removeListener(this)
- }
-}
-
-
public fun RBuilder.configEditor(
- config: Config,
- default: ItemProvider? = null,
- descriptor: NodeDescriptor? = null,
+ config: ObservableMutableMeta,
+ default: MetaProvider = config,
+ descriptor: MetaDescriptor? = null,
key: Any? = null,
- scope: CoroutineScope? = null,
-): Unit = propertyEditor(config, default, config.flowUpdates(), descriptor, scope, key = key)
+): Unit = propertyEditor(config, default, descriptor, key = key)
public fun Element.configEditor(
- config: Config,
- descriptor: NodeDescriptor? = null,
- default: Meta? = null,
+ config: ObservableMutableMeta,
+ default: Meta = config,
+ descriptor: MetaDescriptor? = null,
key: Any? = null,
- scope: CoroutineScope? = null,
): Unit = render(this) {
- configEditor(config, default, descriptor, key, scope)
+ configEditor(config, default, descriptor, key = key)
}
\ No newline at end of file
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/RangeValueChooser.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/RangeValueChooser.kt
index 2b11143b..8ccedc01 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/RangeValueChooser.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/RangeValueChooser.kt
@@ -6,10 +6,11 @@ import kotlinx.html.InputType
import kotlinx.html.js.onChangeFunction
import org.w3c.dom.HTMLInputElement
import org.w3c.dom.events.Event
-import react.FunctionalComponent
+import react.FC
import react.dom.attrs
-import react.functionalComponent
+import react.fc
import react.useState
+import space.kscience.dataforge.meta.descriptors.ValueRequirement
import space.kscience.dataforge.meta.double
import space.kscience.dataforge.meta.get
import space.kscience.dataforge.meta.string
@@ -18,55 +19,57 @@ import styled.css
import styled.styledInput
@JsExport
-public val RangeValueChooser: FunctionalComponent =
- functionalComponent("RangeValueChooser") { props ->
- var innerValue by useState(props.item.double)
- var rangeDisabled: Boolean by useState(props.item == null)
+public val RangeValueChooser: FC = fc("RangeValueChooser") { props ->
+ var innerValue by useState(props.actual.double)
+ var rangeDisabled: Boolean by useState(props.meta.value == null)
- val handleDisable: (Event) -> Unit = {
- val checkBoxValue = (it.target as HTMLInputElement).checked
- rangeDisabled = !checkBoxValue
- if(!checkBoxValue) {
- props.valueChanged?.invoke(null)
- } else {
- props.valueChanged?.invoke(innerValue?.asValue())
- }
+ val handleDisable: (Event) -> Unit = {
+ val checkBoxValue = (it.target as HTMLInputElement).checked
+ rangeDisabled = !checkBoxValue
+ props.meta.value = if (!checkBoxValue) {
+ null
+ } else {
+ innerValue?.asValue()
}
+ }
- val handleChange: (Event) -> Unit = {
- val newValue = (it.target as HTMLInputElement).value
- props.valueChanged?.invoke(newValue.toDoubleOrNull()?.asValue())
- innerValue = newValue.toDoubleOrNull()
- }
+ val handleChange: (Event) -> Unit = {
+ val newValue = (it.target as HTMLInputElement).value
+ props.meta.value = newValue.toDoubleOrNull()?.asValue()
+ innerValue = newValue.toDoubleOrNull()
+ }
- flexRow {
+ flexRow {
+ if (props.descriptor?.valueRequirement != ValueRequirement.REQUIRED) {
styledInput(type = InputType.checkBox) {
attrs {
defaultChecked = rangeDisabled.not()
onChangeFunction = handleDisable
}
}
+ }
- styledInput(type = InputType.range) {
- css{
- width = 100.pct
+ styledInput(type = InputType.range) {
+ css {
+ width = 100.pct
+ }
+ attrs {
+ disabled = rangeDisabled
+ value = innerValue?.toString() ?: ""
+ onChangeFunction = handleChange
+ consumer.onTagEvent(this, "input", handleChange)
+ val minValue = props.descriptor?.attributes?.get("min").string
+ minValue?.let {
+ min = it
}
- attrs {
- disabled = rangeDisabled
- value = innerValue?.toString() ?: ""
- onChangeFunction = handleChange
- val minValue = props.descriptor?.attributes?.get("min").string
- minValue?.let {
- min = it
- }
- val maxValue = props.descriptor?.attributes?.get("max").string
- maxValue?.let {
- max = it
- }
- props.descriptor?.attributes?.get("step").string?.let {
- step = it
- }
+ val maxValue = props.descriptor?.attributes?.get("max").string
+ maxValue?.let {
+ max = it
+ }
+ props.descriptor?.attributes?.get("step").string?.let {
+ step = it
}
}
}
- }
\ No newline at end of file
+ }
+}
\ No newline at end of file
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/ThreeCanvasComponent.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/ThreeCanvasComponent.kt
index 6dd563de..4683f579 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/ThreeCanvasComponent.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/ThreeCanvasComponent.kt
@@ -14,20 +14,18 @@ import space.kscience.visionforge.solid.three.ThreePlugin
import styled.css
import styled.styledDiv
-public external interface ThreeCanvasProps : RProps {
+public external interface ThreeCanvasProps : Props {
public var context: Context
public var options: Canvas3DOptions?
public var solid: Solid?
public var selected: Name?
}
-public val ThreeCanvasComponent: FunctionalComponent = functionalComponent(
- "ThreeCanvasComponent"
-) { props ->
+public val ThreeCanvasComponent: FC = fc("ThreeCanvasComponent") { props ->
val elementRef = useRef(null)
var canvas by useState(null)
- val three: ThreePlugin = useMemo(props.context){ props.context.fetch(ThreePlugin) }
+ val three: ThreePlugin = useMemo(props.context) { props.context.fetch(ThreePlugin) }
useEffect(props.solid, props.options, elementRef) {
if (canvas == null) {
@@ -50,7 +48,8 @@ public val ThreeCanvasComponent: FunctionalComponent = functio
css {
maxWidth = 100.vw
maxHeight = 100.vh
- flex(1.0)
+ width = 100.pct
+ height = 100.pct
}
ref = elementRef
}
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt
index bcb7e84a..54fc8ec4 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt
@@ -21,14 +21,14 @@ import styled.css
import styled.styledDiv
import styled.styledSpan
-public external interface ObjectTreeProps : RProps {
+public external interface ObjectTreeProps : Props {
public var name: Name
public var selected: Name?
public var obj: Vision
public var clickCallback: (Name) -> Unit
}
-private val TreeLabel = functionalComponent { props ->
+private val TreeLabel = fc { props ->
val token = useMemo(props.name) { props.name.lastOrNull()?.toString() ?: "World" }
styledSpan {
css {
@@ -83,7 +83,7 @@ private fun RBuilder.visionTree(props: ObjectTreeProps): Unit {
}
obj.children.entries
.filter { !it.key.toString().startsWith("@") } // ignore statics and other hidden children
- .sortedBy { (it.value as? VisionGroup)?.isEmpty ?: true } // ignore empty groups
+ .sortedBy { (it.value as? VisionGroup)?.isEmpty() ?: true } // ignore empty groups
.forEach { (childToken, child) ->
styledDiv {
css {
@@ -107,14 +107,14 @@ private fun RBuilder.visionTree(props: ObjectTreeProps): Unit {
}
@JsExport
-public val ObjectTree: FunctionalComponent = functionalComponent("ObjectTree") { props ->
+public val ObjectTree: FC = fc("ObjectTree") { props ->
visionTree(props)
}
public fun RBuilder.visionTree(
vision: Vision,
selected: Name? = null,
- clickCallback: (Name) -> Unit = {}
+ clickCallback: (Name) -> Unit = {},
) {
child(ObjectTree) {
attrs {
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/layout.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/layout.kt
index e8d928f5..11a13561 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/layout.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/layout.kt
@@ -6,14 +6,13 @@ import kotlinx.css.display
import kotlinx.css.flexDirection
import kotlinx.html.DIV
import react.RBuilder
-import react.ReactElement
import styled.StyledDOMBuilder
import styled.css
import styled.styledDiv
public inline fun RBuilder.flexColumn(
block: StyledDOMBuilder.() -> Unit
-): ReactElement = styledDiv {
+): Unit = styledDiv {
css {
display = Display.flex
flexDirection = FlexDirection.column
@@ -23,7 +22,7 @@ public inline fun RBuilder.flexColumn(
public inline fun RBuilder.flexRow(
block: StyledDOMBuilder
.() -> Unit
-): ReactElement = styledDiv {
+): Unit = styledDiv {
css {
display = Display.flex
flexDirection = FlexDirection.row
diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/valueChooser.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/valueChooser.kt
index 2147b191..03996c04 100644
--- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/valueChooser.kt
+++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/valueChooser.kt
@@ -10,167 +10,161 @@ import kotlinx.html.js.onKeyDownFunction
import org.w3c.dom.HTMLInputElement
import org.w3c.dom.HTMLSelectElement
import org.w3c.dom.events.Event
-import react.*
+import react.FC
+import react.Props
import react.dom.attrs
import react.dom.option
+import react.fc
+import react.useState
import space.kscience.dataforge.meta.*
-import space.kscience.dataforge.meta.descriptors.ValueDescriptor
-import space.kscience.dataforge.names.Name
-import space.kscience.dataforge.values.*
+import space.kscience.dataforge.meta.descriptors.MetaDescriptor
+import space.kscience.dataforge.meta.descriptors.allowedValues
+import space.kscience.dataforge.values.ValueType
+import space.kscience.dataforge.values.asValue
+import space.kscience.dataforge.values.int
+import space.kscience.dataforge.values.string
import space.kscience.visionforge.Colors
import space.kscience.visionforge.widgetType
import styled.css
import styled.styledInput
import styled.styledSelect
-public external interface ValueChooserProps : RProps {
- public var item: MetaItem?
- public var descriptor: ValueDescriptor?
- //public var nullable: Boolean?
- public var valueChanged: ((Value?) -> Unit)?
+public external interface ValueChooserProps : Props {
+ public var descriptor: MetaDescriptor?
+ public var meta: ObservableMutableMeta
+ public var actual: Meta
}
@JsExport
-public val StringValueChooser: FunctionalComponent =
- functionalComponent("StringValueChooser") { props ->
- var value by useState(props.item.string ?: "")
- val keyDown: (Event) -> Unit = { event ->
- if (event.type == "keydown" && event.asDynamic().key == "Enter") {
- value = (event.target as HTMLInputElement).value
- if (value != props.item.string) {
- props.valueChanged?.invoke(value.asValue())
- }
- }
+public val StringValueChooser: FC = fc("StringValueChooser") { props ->
+ var value by useState(props.actual.string ?: "")
+ val keyDown: (Event) -> Unit = { event ->
+ if (event.type == "keydown" && event.asDynamic().key == "Enter") {
+ value = (event.target as HTMLInputElement).value
+ props.meta.value = value.asValue()
}
- val handleChange: (Event) -> Unit = {
- value = (it.target as HTMLInputElement).value
+ }
+ val handleChange: (Event) -> Unit = {
+ value = (it.target as HTMLInputElement).value
+ }
+ styledInput(type = InputType.text) {
+ css {
+ width = 100.pct
}
- styledInput(type = InputType.text) {
- css{
- width = 100.pct
- }
- attrs {
- this.value = value
- onKeyDownFunction = keyDown
- onChangeFunction = handleChange
+ attrs {
+ this.value = value
+ onKeyDownFunction = keyDown
+ onChangeFunction = handleChange
+ }
+ }
+}
+
+@JsExport
+public val BooleanValueChooser: FC = fc("BooleanValueChooser") { props ->
+ val handleChange: (Event) -> Unit = {
+ val newValue = (it.target as HTMLInputElement).checked
+ props.meta.value = newValue.asValue()
+ }
+ styledInput(type = InputType.checkBox) {
+ css {
+ width = 100.pct
+ }
+ attrs {
+ //this.attributes["indeterminate"] = (props.item == null).toString()
+ checked = props.actual.boolean ?: false
+ onChangeFunction = handleChange
+ }
+ }
+}
+
+@JsExport
+public val NumberValueChooser: FC = fc("NumberValueChooser") { props ->
+ var innerValue by useState(props.actual.string ?: "")
+ val keyDown: (Event) -> Unit = { event ->
+ if (event.type == "keydown" && event.asDynamic().key == "Enter") {
+ innerValue = (event.target as HTMLInputElement).value
+ val number = innerValue.toDoubleOrNull()
+ if (number == null) {
+ console.error("The input value $innerValue is not a number")
+ } else {
+ props.meta.value = number.asValue()
}
}
}
-
-@JsExport
-public val BooleanValueChooser: FunctionalComponent