Fix JS config editor listeners

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

@@ -1,20 +1,19 @@
 package hep.dataforge.vis.editor
 
 import hep.dataforge.meta.*
-import hep.dataforge.meta.descriptors.ItemDescriptor
+import hep.dataforge.meta.descriptors.*
-import hep.dataforge.meta.descriptors.NodeDescriptor
-import hep.dataforge.meta.descriptors.defaultItem
-import hep.dataforge.meta.descriptors.get
 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,11 +51,9 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
     }
 
     override fun componentDidMount() {
-        if (props.listen) {
+        props.root.onChange(this) { name, _, _ ->
-            props.root.onChange(this) { name, _, _ ->
+            if (name == props.name) {
-                if (name == props.name) {
+                forceUpdate()
-                    forceUpdate()
-                }
             }
         }
     }
@@ -73,17 +69,66 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
     }
 
     private val onValueChange: (Event) -> Unit = {
-        val value = (it.target as HTMLInputElement).value
+        val value = when (val t = it.target) {
-        try {
+            // (it.target as HTMLInputElement).value
-            if (value.isEmpty()) {
+            is HTMLInputElement -> if (t.type == "checkbox") {
-                props.root.remove(props.name)
+                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") {
+                            valueChooser(actualItem.value, descriptorItem as? ValueDescriptor)
-                                attrs {
-                                    defaultValue = actualItem.value.string
-                                    onChangeFunction = onValueChange
-                                }
-                            }
                             //+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
         }
     }
 }

dataforge-vis-common/src/jsMain/resources/css/main.css

@@ -36,7 +36,5 @@ ul, .tree {
 }
 
 .tree-label-inactive {
-    background-color: lightgrey;
     color: gray;
-    display: inline-block;
 }

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

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

demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/saveToJson.kt

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