Fix JS config editor listeners
This commit is contained in:
parent
656c6f931b
commit
e6879fee15
@ -1,20 +1,19 @@
|
||||
package hep.dataforge.vis.editor
|
||||
|
||||
import hep.dataforge.meta.*
|
||||
import hep.dataforge.meta.descriptors.ItemDescriptor
|
||||
import hep.dataforge.meta.descriptors.NodeDescriptor
|
||||
import hep.dataforge.meta.descriptors.defaultItem
|
||||
import hep.dataforge.meta.descriptors.get
|
||||
import hep.dataforge.meta.descriptors.*
|
||||
import hep.dataforge.names.Name
|
||||
import hep.dataforge.names.NameToken
|
||||
import hep.dataforge.names.plus
|
||||
import hep.dataforge.values.asValue
|
||||
import hep.dataforge.values.*
|
||||
import hep.dataforge.vis.widgetType
|
||||
import kotlinx.html.InputType
|
||||
import kotlinx.html.classes
|
||||
import kotlinx.html.js.onChangeFunction
|
||||
import kotlinx.html.js.onClickFunction
|
||||
import org.w3c.dom.Element
|
||||
import org.w3c.dom.HTMLInputElement
|
||||
import org.w3c.dom.HTMLSelectElement
|
||||
import org.w3c.dom.events.Event
|
||||
import react.RBuilder
|
||||
import react.RComponent
|
||||
@ -43,7 +42,6 @@ interface ConfigEditorProps : RProps {
|
||||
*/
|
||||
var descriptor: NodeDescriptor?
|
||||
|
||||
var listen: Boolean
|
||||
}
|
||||
|
||||
class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
||||
@ -53,14 +51,12 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
||||
}
|
||||
|
||||
override fun componentDidMount() {
|
||||
if (props.listen) {
|
||||
props.root.onChange(this) { name, _, _ ->
|
||||
if (name == props.name) {
|
||||
forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
override fun componentWillUnmount() {
|
||||
props.root.removeListener(this)
|
||||
@ -73,17 +69,66 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
||||
}
|
||||
|
||||
private val onValueChange: (Event) -> Unit = {
|
||||
val value = (it.target as HTMLInputElement).value
|
||||
try {
|
||||
if (value.isEmpty()) {
|
||||
props.root.remove(props.name)
|
||||
val value = when (val t = it.target) {
|
||||
// (it.target as HTMLInputElement).value
|
||||
is HTMLInputElement -> if (t.type == "checkbox") {
|
||||
if (t.checked) True else False
|
||||
} else {
|
||||
t.value.asValue()
|
||||
}
|
||||
props.root.setValue(props.name, value.asValue())
|
||||
is HTMLSelectElement -> t.value.asValue()
|
||||
else -> error("Unknown event target: $t")
|
||||
}
|
||||
try {
|
||||
props.root.setValue(props.name, value)
|
||||
} catch (ex: Exception) {
|
||||
console.error("Can't set config property ${props.name} to $value")
|
||||
}
|
||||
}
|
||||
|
||||
//TODO replace by separate components
|
||||
private fun RBuilder.valueChooser(value: Value, descriptor: ValueDescriptor?) {
|
||||
val type = descriptor?.type?.firstOrNull()
|
||||
when {
|
||||
type == ValueType.BOOLEAN -> input(type = InputType.checkBox, classes = "float-right") {
|
||||
attrs {
|
||||
defaultChecked = value.boolean
|
||||
onChangeFunction = onValueChange
|
||||
}
|
||||
}
|
||||
type == ValueType.NUMBER -> input(type = InputType.number, classes = "float-right") {
|
||||
attrs {
|
||||
defaultValue = value.string
|
||||
onChangeFunction = onValueChange
|
||||
}
|
||||
}
|
||||
descriptor?.allowedValues?.isNotEmpty() ?: false -> select("float-right") {
|
||||
descriptor!!.allowedValues.forEach {
|
||||
option {
|
||||
+it.string
|
||||
}
|
||||
}
|
||||
attrs {
|
||||
multiple = false
|
||||
onChangeFunction = onValueChange
|
||||
}
|
||||
}
|
||||
descriptor?.widgetType == "color" -> input(type = InputType.color, classes = "float-right") {
|
||||
attrs {
|
||||
defaultValue = value.string
|
||||
onChangeFunction = onValueChange
|
||||
}
|
||||
}
|
||||
else -> input(type = InputType.text, classes = "float-right") {
|
||||
attrs {
|
||||
defaultValue = value.string
|
||||
onChangeFunction = onValueChange
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
override fun RBuilder.render() {
|
||||
val item = props.root[props.name]
|
||||
@ -130,7 +175,6 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
||||
name = props.name + token
|
||||
this.default = props.default
|
||||
this.descriptor = props.descriptor
|
||||
listen = false
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -152,12 +196,7 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
||||
}
|
||||
}
|
||||
div("col") {
|
||||
input(type = InputType.text, classes = "float-right") {
|
||||
attrs {
|
||||
defaultValue = actualItem.value.string
|
||||
onChangeFunction = onValueChange
|
||||
}
|
||||
}
|
||||
valueChooser(actualItem.value, descriptorItem as? ValueDescriptor)
|
||||
//+actualItem.value.toString()
|
||||
}
|
||||
}
|
||||
@ -165,7 +204,6 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null) {
|
||||
@ -176,7 +214,6 @@ fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, def
|
||||
name = Name.EMPTY
|
||||
this.descriptor = descriptor
|
||||
this.default = default
|
||||
listen = true
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -189,7 +226,6 @@ fun RBuilder.configEditor(config: Config, descriptor: NodeDescriptor? = null, de
|
||||
name = Name.EMPTY
|
||||
this.descriptor = descriptor
|
||||
this.default = default
|
||||
listen = true
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -201,7 +237,6 @@ fun RBuilder.configEditor(obj: Configurable, descriptor: NodeDescriptor? = obj.d
|
||||
name = Name.EMPTY
|
||||
this.descriptor = descriptor
|
||||
this.default = default
|
||||
listen = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
7
dataforge-vis-common/src/jsMain/resources/css/bootstrap.min.css
vendored
Normal file
7
dataforge-vis-common/src/jsMain/resources/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -36,7 +36,5 @@ ul, .tree {
|
||||
}
|
||||
|
||||
.tree-label-inactive {
|
||||
background-color: lightgrey;
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
}
|
@ -10,6 +10,7 @@ import hep.dataforge.vis.Colors
|
||||
import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_COLOR_KEY
|
||||
import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_KEY
|
||||
import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_OPACITY_KEY
|
||||
import hep.dataforge.vis.widgetType
|
||||
|
||||
class Material3D : Scheme() {
|
||||
|
||||
@ -50,6 +51,7 @@ class Material3D : Scheme() {
|
||||
defineValue(COLOR_KEY) {
|
||||
type(ValueType.STRING, ValueType.NUMBER)
|
||||
default("#ffffff")
|
||||
widgetType = "color"
|
||||
}
|
||||
defineValue(OPACITY_KEY) {
|
||||
type(ValueType.NUMBER)
|
||||
|
@ -11,7 +11,7 @@ import java.nio.file.Paths
|
||||
fun main(args: Array<String>) {
|
||||
require(args.isNotEmpty()){"At least one argument is required"}
|
||||
val inputFileName = args[0]
|
||||
require(inputFileName.endsWith(".gdml")){"GDML requires"}
|
||||
require(inputFileName.endsWith(".gdml")){"GDML required"}
|
||||
val outputFileName = args.getOrNull(1)?:inputFileName.replace(".gdml",".json")
|
||||
|
||||
val gdml = GDML.readFile(Paths.get(inputFileName))
|
||||
|
Loading…
Reference in New Issue
Block a user