.() -> 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..987dbc0e 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: FunctionComponent = 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: FunctionComponent = 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..95219db1 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: FunctionComponent = 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..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
@@ -2,15 +2,13 @@ package space.kscience.visionforge.bootstrap
import org.w3c.dom.Element
import react.RBuilder
+import react.dom.render
import space.kscience.dataforge.meta.descriptors.MetaDescriptor
-import space.kscience.dataforge.meta.isEmpty
import space.kscience.visionforge.Vision
+import space.kscience.visionforge.computeProperties
import space.kscience.visionforge.getStyle
-import space.kscience.visionforge.react.EditorPropertyState
-import space.kscience.visionforge.react.PropertyEditor
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
@@ -21,26 +19,12 @@ public fun RBuilder.visionPropertyEditor(
) {
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.meta,
+ allProperties = vision.computeProperties(),
+ descriptor = descriptor,
+ key = key
+ )
}
val styles = if (vision is SolidReference) {
(vision.styles + vision.prototype.styles).distinct()
@@ -66,6 +50,6 @@ public fun RBuilder.visionPropertyEditor(
public fun Element.visionPropertyEditor(
item: Vision,
descriptor: MetaDescriptor? = item.descriptor,
-): Unit = space.kscience.visionforge.react.createRoot(this).render {
+): 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..69683bc5 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,7 +3,7 @@ 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
@@ -20,7 +20,7 @@ import styled.css
import styled.styledDiv
import styled.styledSpan
-public external interface MetaViewerProps : Props {
+public external interface MetaViewerProps : RProps {
/**
* Root meta
*/
@@ -42,7 +42,7 @@ public external interface MetaViewerProps : Props {
public var descriptor: MetaDescriptor?
}
-private val MetaViewerItem: FC = fc("MetaViewerItem") { props ->
+private val MetaViewerItem: FunctionComponent = functionalComponent("MetaViewerItem") { props ->
metaViewerItem(props)
}
@@ -127,16 +127,17 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
}
@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: FunctionComponent =
+ functionalComponent