Editors to react

This commit is contained in:
Alexander Nozik 2020-03-25 08:52:09 +03:00
parent 67082c9cd3
commit a8f6fa9dc6
7 changed files with 69 additions and 34 deletions

View File

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

View File

@ -3,11 +3,13 @@ package hep.dataforge.vis
import hep.dataforge.meta.Laminate import hep.dataforge.meta.Laminate
import hep.dataforge.meta.Meta import hep.dataforge.meta.Meta
import hep.dataforge.meta.MetaItem import hep.dataforge.meta.MetaItem
import hep.dataforge.meta.descriptors.NodeDescriptor
import hep.dataforge.meta.scheme.Configurable import hep.dataforge.meta.scheme.Configurable
import hep.dataforge.names.Name import hep.dataforge.names.Name
import hep.dataforge.names.asName import hep.dataforge.names.asName
import hep.dataforge.names.toName import hep.dataforge.names.toName
import hep.dataforge.provider.Type import hep.dataforge.provider.Type
import hep.dataforge.values.ValueType
import hep.dataforge.vis.VisualObject.Companion.TYPE import hep.dataforge.vis.VisualObject.Companion.TYPE
import kotlinx.serialization.Transient import kotlinx.serialization.Transient

View File

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

View File

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

View File

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

View File

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

View File

@ -3,10 +3,13 @@
package hep.dataforge.vis.spatial package hep.dataforge.vis.spatial
import hep.dataforge.meta.* 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.meta.scheme.setProperty
import hep.dataforge.names.asName import hep.dataforge.names.asName
import hep.dataforge.names.plus import hep.dataforge.names.plus
import hep.dataforge.output.Renderer import hep.dataforge.output.Renderer
import hep.dataforge.values.ValueType
import hep.dataforge.values.asValue import hep.dataforge.values.asValue
import hep.dataforge.vis.VisualObject import hep.dataforge.vis.VisualObject
import hep.dataforge.vis.spatial.VisualObject3D.Companion.DETAIL_KEY import hep.dataforge.vis.spatial.VisualObject3D.Companion.DETAIL_KEY
@ -26,7 +29,8 @@ interface VisualObject3D : VisualObject {
companion object { companion object {
val VISIBLE_KEY = "visible".asName() val VISIBLE_KEY = "visible".asName()
// val SELECTED_KEY = "selected".asName()
// val SELECTED_KEY = "selected".asName()
val DETAIL_KEY = "detail".asName() val DETAIL_KEY = "detail".asName()
val LAYER_KEY = "layer".asName() val LAYER_KEY = "layer".asName()
val IGNORE_KEY = "ignore".asName() val IGNORE_KEY = "ignore".asName()
@ -56,6 +60,20 @@ interface VisualObject3D : VisualObject {
val xScale = scale + x val xScale = scale + x
val yScale = scale + y val yScale = scale + y
val zScale = scale + z 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. * Property is not inherited.
*/ */
var VisualObject.ignore: Boolean? var VisualObject.ignore: Boolean?
get() = getProperty(IGNORE_KEY,false).boolean get() = getProperty(IGNORE_KEY, false).boolean
set(value) = setProperty(IGNORE_KEY, value?.asValue()) set(value) = setProperty(IGNORE_KEY, value?.asValue())
//var VisualObject.selected: Boolean? //var VisualObject.selected: Boolean?