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.serialization
val dataforgeVersion by extra("0.1.5")
val dataforgeVersion by extra("0.1.6-dev")
plugins {
val toolsVersion = "0.4.0"

View File

@ -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"
}

View File

@ -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 = {
setState {
expanded = !expanded
}
}
onClickFunction = onClick
}
}
}

View File

@ -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) {
setOf("objTree-caret", "objTree-caret-down")
} else {
setOf("objTree-caret")
}
onClickFunction = {
setState {
expanded = !expanded
}
if (state.expanded) {
classes += "objTree-caret-down"
}
onClickFunction = onClick
}
}
}

View File

@ -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) {
setOf("objTree-caret", "objTree-caret-down")
} else {
setOf("objTree-caret")
}
onClickFunction = {
setState {
expanded = !expanded
}
if (state.expanded) {
classes += "objTree-caret-down"
}
onClickFunction = onClick
}
}
label("objTree-label") {

View File

@ -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)
}

View File

@ -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?