Editors to react

build.gradle.kts

@@ -1,7 +1,7 @@
 import scientifik.fx
 import scientifik.serialization
 
-val dataforgeVersion by extra("0.1.5")
+val dataforgeVersion by extra("0.1.6-dev")
 
 plugins {
     val toolsVersion = "0.4.0"

dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/VisualObject.kt

@@ -3,11 +3,13 @@ package hep.dataforge.vis
 import hep.dataforge.meta.Laminate
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.MetaItem
+import hep.dataforge.meta.descriptors.NodeDescriptor
 import hep.dataforge.meta.scheme.Configurable
 import hep.dataforge.names.Name
 import hep.dataforge.names.asName
 import hep.dataforge.names.toName
 import hep.dataforge.provider.Type
+import hep.dataforge.values.ValueType
 import hep.dataforge.vis.VisualObject.Companion.TYPE
 import kotlinx.serialization.Transient
 
@@ -64,7 +66,7 @@ interface VisualObject : Configurable {
         const val TYPE = "visual"
         val STYLE_KEY = "@style".asName()
 
-        //const val META_KEY = "@meta"
+            //const val META_KEY = "@meta"
         //const val TAGS_KEY = "@tags"
 
     }

dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt

@@ -1,6 +1,5 @@
 package hep.dataforge.vis.editor
 
-import hep.dataforge.js.initState
 import hep.dataforge.meta.*
 import hep.dataforge.meta.descriptors.NodeDescriptor
 import hep.dataforge.meta.descriptors.defaultItem
@@ -14,8 +13,12 @@ import kotlinx.html.classes
 import kotlinx.html.js.onChangeFunction
 import kotlinx.html.js.onClickFunction
 import org.w3c.dom.Element
-import react.*
+import org.w3c.dom.events.Event
+import react.RBuilder
+import react.RComponent
+import react.RProps
 import react.dom.*
+import react.setState
 
 interface ConfigEditorProps : RProps {
     /**
@@ -61,6 +64,13 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
         props.root.removeListener(this)
     }
 
+    private val onClick: (Event) -> Unit = {
+        setState {
+            expanded = !expanded
+        }
+    }
+
+
     override fun RBuilder.render() {
         val item = props.root[props.name]
         val descriptorItem = props.descriptor?.get(props.name)
@@ -81,11 +91,7 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
                             if (state.expanded) {
                                 classes += "rotate"
                             }
-                            onClickFunction = {
+                            onClickFunction = onClick
-                                setState {
-                                    expanded = !expanded
-                                }
-                            }
                         }
                     }
                 }

dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/MetaViewerComponent.kt

@@ -1,14 +1,17 @@
 package hep.dataforge.vis.editor
 
-import hep.dataforge.js.initState
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.MetaItem
 import hep.dataforge.meta.descriptors.NodeDescriptor
 import hep.dataforge.names.NameToken
 import kotlinx.html.classes
 import kotlinx.html.js.onClickFunction
-import react.*
+import org.w3c.dom.events.Event
+import react.RBuilder
+import react.RComponent
+import react.RProps
 import react.dom.*
+import react.setState
 
 interface MetaViewerProps : RProps {
     var name: NameToken
@@ -22,21 +25,21 @@ class MetaViewerComponent : RComponent<MetaViewerProps, TreeState>() {
         expanded = false
     }
 
+    private val onClick: (Event) -> Unit = {
+        setState {
+            expanded = !expanded
+        }
+    }
+
     override fun RBuilder.render() {
         div("d-inline-block text-truncate") {
             if (props.meta.items.isNotEmpty()) {
                 span("objTree-caret") {
                     attrs {
-                        classes = if (state.expanded) {
+                        if (state.expanded) {
-                            setOf("objTree-caret", "objTree-caret-down")
+                            classes += "objTree-caret-down"
-                        } else {
-                            setOf("objTree-caret")
-                        }
-                        onClickFunction = {
-                            setState {
-                                expanded = !expanded
-                            }
                         }
+                        onClickFunction = onClick
                     }
                 }
             }

dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTreeComponent.kt

@@ -8,6 +8,7 @@ import hep.dataforge.vis.isEmpty
 import kotlinx.html.classes
 import kotlinx.html.js.onClickFunction
 import org.w3c.dom.Element
+import org.w3c.dom.events.Event
 import react.*
 import react.dom.*
 
@@ -27,6 +28,12 @@ class ObjectTreeComponent : RComponent<ObjectTreeProps, TreeState>() {
         expanded = false
     }
 
+    private val onClick: (Event) -> Unit = {
+        setState {
+            expanded = !expanded
+        }
+    }
+
     override fun RBuilder.render() {
         val token = props.name.last()?.toString() ?: "World"
         val obj = props.obj
@@ -36,16 +43,10 @@ class ObjectTreeComponent : RComponent<ObjectTreeProps, TreeState>() {
             div("d-inline-block text-truncate") {
                 span("objTree-caret") {
                     attrs {
-                        classes = if (state.expanded) {
+                        if (state.expanded) {
-                            setOf("objTree-caret", "objTree-caret-down")
+                            classes += "objTree-caret-down"
-                        } else {
-                            setOf("objTree-caret")
-                        }
-                        onClickFunction = {
-                            setState {
-                                expanded = !expanded
-                            }
                         }
+                        onClickFunction = onClick
                     }
                 }
                 label("objTree-label") {

dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/propertyEditor.kt

@@ -2,6 +2,7 @@ package hep.dataforge.vis.editor
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.MetaBuilder
+import hep.dataforge.meta.descriptors.NodeDescriptor
 import hep.dataforge.names.Name
 import hep.dataforge.names.isEmpty
 import hep.dataforge.vis.VisualObject
@@ -74,8 +75,10 @@ import kotlin.collections.set
 fun RBuilder.visualPropertyEditor(
     path: Name,
     item: VisualObject,
+    descriptor: NodeDescriptor? = item.descriptor,
+    title: String = "Properties",
     default: MetaBuilder.() -> Unit = {}
-): ReactElement = card("Properties") {
+): ReactElement = card(title) {
     if (!path.isEmpty()) {
         nav {
             attrs {
@@ -90,13 +93,15 @@ fun RBuilder.visualPropertyEditor(
             }
         }
     }
-    configEditor(item.config, item.descriptor, Meta(default))
+    configEditor(item.config, descriptor, Meta(default))
 }
 
 fun Element.visualPropertyEditor(
     path: Name,
     item: VisualObject,
+    descriptor: NodeDescriptor? = item.descriptor,
+    title: String = "Properties",
     default: MetaBuilder.() -> Unit = {}
 ) = render(this) {
-    visualPropertyEditor(path, item, default)
+    visualPropertyEditor(path, item, descriptor, title, default)
 }

dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt

@@ -3,10 +3,13 @@
 package hep.dataforge.vis.spatial
 
 import hep.dataforge.meta.*
+import hep.dataforge.meta.descriptors.NodeDescriptor
+import hep.dataforge.meta.scheme.node
 import hep.dataforge.meta.scheme.setProperty
 import hep.dataforge.names.asName
 import hep.dataforge.names.plus
 import hep.dataforge.output.Renderer
+import hep.dataforge.values.ValueType
 import hep.dataforge.values.asValue
 import hep.dataforge.vis.VisualObject
 import hep.dataforge.vis.spatial.VisualObject3D.Companion.DETAIL_KEY
@@ -26,7 +29,8 @@ interface VisualObject3D : VisualObject {
     companion object {
 
         val VISIBLE_KEY = "visible".asName()
-//        val SELECTED_KEY = "selected".asName()
+
+        //        val SELECTED_KEY = "selected".asName()
         val DETAIL_KEY = "detail".asName()
         val LAYER_KEY = "layer".asName()
         val IGNORE_KEY = "ignore".asName()
@@ -56,6 +60,20 @@ interface VisualObject3D : VisualObject {
         val xScale = scale + x
         val yScale = scale + y
         val zScale = scale + z
+
+        val descriptor = NodeDescriptor {
+            defineValue(VISIBLE_KEY) {
+                type(ValueType.BOOLEAN)
+                default(true)
+            }
+
+            defineItem(Material3D.MATERIAL_KEY, Material3D.descriptor)
+
+//                Material3D.MATERIAL_COLOR_KEY put "#ffffff"
+//                Material3D.MATERIAL_OPACITY_KEY put 1.0
+//                Material3D.MATERIAL_WIREFRAME_KEY put false
+
+        }
     }
 }
 
@@ -106,7 +124,7 @@ var VisualObject.visible: Boolean?
  * Property is not inherited.
  */
 var VisualObject.ignore: Boolean?
-    get() = getProperty(IGNORE_KEY,false).boolean
+    get() = getProperty(IGNORE_KEY, false).boolean
     set(value) = setProperty(IGNORE_KEY, value?.asValue())
 
 //var VisualObject.selected: Boolean?