.() -> Unit,
-): Unit = styledDiv {
+): ReactElement = styledDiv {
css {
classes.add("container${size.suffix}")
}
@@ -163,7 +164,7 @@ public inline fun RBuilder.gridColumn(
weight: Int? = null,
maxSize: GridMaxSize = GridMaxSize.NONE,
block: StyledDOMBuilder
.() -> Unit,
-): Unit = styledDiv {
+): ReactElement = styledDiv {
val weightSuffix = weight?.let { "-$it" } ?: ""
css {
classes.add("col${maxSize.suffix}$weightSuffix")
@@ -173,7 +174,7 @@ public inline fun RBuilder.gridColumn(
public inline fun RBuilder.gridRow(
block: StyledDOMBuilder
.() -> Unit,
-): Unit = styledDiv {
+): ReactElement = 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 23b5071b..5ff0d5e8 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,25 +12,25 @@ import space.kscience.visionforge.react.flexColumn
import styled.StyledDOMBuilder
import styled.styledDiv
-public external interface TabProps : PropsWithChildren {
+public external class TabProps : RProps {
public var id: String
public var title: String?
}
@JsExport
-public val Tab: FC = fc { props ->
+public val Tab: FunctionalComponent = functionalComponent { props ->
props.children()
}
-public external interface TabPaneProps : PropsWithChildren {
+public external class TabPaneProps : RProps {
public var activeTab: String?
}
@JsExport
-public val TabPane: FC = fc("TabPane") { props ->
+public val TabPane: FunctionalComponent = functionalComponent("TabPane") { props ->
var activeTab: String? by useState(props.activeTab)
- val children: Array?> = Children.map(props.children) {
+ val children: Array = Children.map(props.children) {
it.asElementOrNull()
} ?: emptyArray()
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 9ab0403c..e8166f35 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,21 +2,18 @@ package space.kscience.visionforge.bootstrap
import kotlinx.css.*
import kotlinx.css.properties.border
-import react.FC
-import react.PropsWithChildren
-import react.RBuilder
+import react.*
import react.dom.h2
-import react.fc
import space.kscience.dataforge.names.Name
import space.kscience.dataforge.names.isEmpty
import space.kscience.visionforge.Vision
+import space.kscience.visionforge.VisionGroup
import space.kscience.visionforge.react.visionTree
-import space.kscience.visionforge.solid.SolidGroup
import space.kscience.visionforge.solid.specifications.Canvas3DOptions
import styled.css
import styled.styledDiv
-public external interface ThreeControlsProps : PropsWithChildren {
+public external interface ThreeControlsProps : RProps {
public var canvasOptions: Canvas3DOptions
public var vision: Vision?
public var selected: Name?
@@ -24,7 +21,7 @@ public external interface ThreeControlsProps : PropsWithChildren {
}
@JsExport
-public val ThreeControls: FC = fc { props ->
+public val ThreeControls: FunctionalComponent = functionalComponent { props ->
tabPane(if (props.selected != null) "Properties" else null) {
tab("Canvas") {
card("Canvas configuration") {
@@ -51,7 +48,7 @@ public val ThreeControls: FC = fc { props ->
val selectedObject: Vision? = when {
selected == null -> null
selected.isEmpty() -> props.vision
- else -> (props.vision as? SolidGroup)?.get(selected)
+ else -> (props.vision as? VisionGroup)?.get(selected)
}
if (selectedObject != null) {
visionPropertyEditor(selectedObject, key = selected)
@@ -70,7 +67,7 @@ public fun RBuilder.threeControls(
selected: Name?,
onSelect: (Name) -> Unit = {},
builder: TabBuilder.() -> Unit = {},
-): Unit = child(ThreeControls) {
+): ReactElement = 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 8e7e1208..7f28473e 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
@@ -2,45 +2,27 @@ package space.kscience.visionforge.bootstrap
import org.w3c.dom.Element
import react.RBuilder
-import space.kscience.dataforge.meta.descriptors.MetaDescriptor
-import space.kscience.dataforge.meta.isEmpty
-import space.kscience.visionforge.Vision
-import space.kscience.visionforge.getStyle
-import space.kscience.visionforge.react.EditorPropertyState
-import space.kscience.visionforge.react.PropertyEditor
+import react.dom.render
+import space.kscience.dataforge.meta.descriptors.NodeDescriptor
+import space.kscience.visionforge.*
import space.kscience.visionforge.react.metaViewer
-import space.kscience.visionforge.react.render
-import space.kscience.visionforge.root
+import space.kscience.visionforge.react.propertyEditor
import space.kscience.visionforge.solid.SolidReference
-import space.kscience.visionforge.styles
public fun RBuilder.visionPropertyEditor(
vision: Vision,
- descriptor: MetaDescriptor? = vision.descriptor,
+ descriptor: NodeDescriptor? = vision.descriptor,
key: Any? = null,
) {
card("Properties") {
- child(PropertyEditor) {
- attrs {
- this.key = key?.toString()
- this.meta = vision.properties.root()
- this.updates = vision.properties.changes
- this.descriptor = descriptor
- this.scope = vision.manager?.context ?: error("Orphan vision could not be observed")
- this.getPropertyState = { name ->
- val ownMeta = vision.properties.own?.getMeta(name)
- if (ownMeta != null && !ownMeta.isEmpty()) {
- EditorPropertyState.Defined
- } else if (vision.properties.root().getValue(name) != null) {
- // TODO differentiate
- EditorPropertyState.Default()
- } else {
- EditorPropertyState.Undefined
- }
- }
- }
- }
+ propertyEditor(
+ ownProperties = vision.ownProperties,
+ allProperties = vision.allProperties(),
+ updateFlow = vision.propertyChanges,
+ descriptor = descriptor,
+ key = key
+ )
}
val styles = if (vision is SolidReference) {
(vision.styles + vision.prototype.styles).distinct()
@@ -65,7 +47,7 @@ public fun RBuilder.visionPropertyEditor(
public fun Element.visionPropertyEditor(
item: Vision,
- descriptor: MetaDescriptor? = item.descriptor,
-): Unit = space.kscience.visionforge.react.createRoot(this).render {
+ descriptor: NodeDescriptor? = item.descriptor,
+): Unit = render(this) {
visionPropertyEditor(item, descriptor = descriptor)
}
\ No newline at end of file
diff --git a/ui/compose/src/jsMain/kotlin/space/kscience/visionforge/compose/ThreeJS.kt b/ui/compose/src/jsMain/kotlin/space/kscience/visionforge/compose/ThreeJS.kt
deleted file mode 100644
index 6033c712..00000000
--- a/ui/compose/src/jsMain/kotlin/space/kscience/visionforge/compose/ThreeJS.kt
+++ /dev/null
@@ -1,11 +0,0 @@
-package space.kscience.visionforge.compose
-
-import androidx.compose.material.Surface
-import androidx.compose.runtime.Composable
-
-@Composable
-public fun ThreeJs(){
- Surface {
-
- }
-}
\ No newline at end of file
diff --git a/ui/react/README.md b/ui/react/README.md
deleted file mode 100644
index 9f862213..00000000
--- a/ui/react/README.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Module react
-
-
-
diff --git a/ui/react/build.gradle.kts b/ui/react/build.gradle.kts
index acbe40cb..40853ca9 100644
--- a/ui/react/build.gradle.kts
+++ b/ui/react/build.gradle.kts
@@ -1,5 +1,5 @@
plugins {
- id("space.kscience.gradle.js")
+ id("ru.mipt.npm.gradle.js")
}
dependencies{
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 d6fff754..a3972612 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
@@ -3,15 +3,17 @@ package space.kscience.visionforge.react
import kotlinx.css.Align
import kotlinx.css.alignItems
import kotlinx.html.js.onClickFunction
-import kotlinx.html.org.w3c.dom.events.Event
+import org.w3c.dom.events.Event
import react.*
import react.dom.a
import react.dom.attrs
import space.kscience.dataforge.meta.Meta
-import space.kscience.dataforge.meta.descriptors.MetaDescriptor
+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.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
@@ -20,7 +22,7 @@ import styled.css
import styled.styledDiv
import styled.styledSpan
-public external interface MetaViewerProps : Props {
+public external interface MetaViewerProps : RProps {
/**
* Root meta
*/
@@ -39,19 +41,18 @@ public external interface MetaViewerProps : Props {
/**
* Root descriptor
*/
- public var descriptor: MetaDescriptor?
+ public var descriptor: NodeDescriptor?
}
-private val MetaViewerItem: FC = fc("MetaViewerItem") { props ->
+private val MetaViewerItem: FunctionalComponent = functionalComponent("MetaViewerItem") { props ->
metaViewerItem(props)
}
private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
var expanded: Boolean by useState { true }
val item = props.root[props.name]
- val descriptorItem: MetaDescriptor? = props.descriptor?.get(props.name)
- val actualValue = item?.value ?: descriptorItem?.defaultValue
- val actualMeta = item ?: descriptorItem?.defaultNode
+ val descriptorItem: ItemDescriptor? = props.descriptor?.get(props.name)
+ val actualItem = item ?: descriptorItem?.defaultValue
val token = props.name.lastOrNull()?.toString() ?: props.rootName ?: ""
@@ -59,86 +60,102 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
expanded = !expanded
}
- flexRow {
- css {
- alignItems = Align.center
- }
- if (actualMeta?.isLeaf == false) {
- styledSpan {
+ when (actualItem) {
+ is MetaItemNode -> {
+ flexRow {
css {
- +TreeStyles.treeCaret
- if (expanded) {
- +TreeStyles.treeCaredDown
- }
+ alignItems = Align.center
}
- attrs {
- onClickFunction = expanderClick
- }
- }
- }
-
- 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 {
+ styledSpan {
css {
- +TreeStyles.treeItem
- }
- child(MetaViewerItem) {
- attrs {
- this.key = props.name.toString()
- this.root = props.root
- this.name = props.name + token
- this.descriptor = props.descriptor
+ +TreeStyles.treeCaret
+ if (expanded) {
+ +TreeStyles.treeCaredDown
}
}
- //configEditor(props.root, props.name + token, props.descriptor, props.default)
+ attrs {
+ onClickFunction = expanderClick
+ }
+ }
+ 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)
+ }
+ }
+ }
+ }
+ }
+ is MetaItemValue -> {
+ flexRow {
+ css {
+ alignItems = Align.center
+ }
+ styledSpan {
+ css {
+ +TreeStyles.treeLabel
+ if (item == null) {
+ +TreeStyles.treeLabelInactive
+ }
+ }
+ +token
+ }
+ styledDiv {
+ a {
+ +actualItem.value.toString()
+ }
}
}
}
}
-
-
}
@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
+public val MetaViewer: FunctionalComponent