Fix JS config editor for properties without defaults

demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt

@@ -24,7 +24,7 @@ fun Page<Solid>.demo(name: String, title: String = name, block: SolidGroup.() ->
 }
 
 val canvasOptions = Canvas3DOptions {
-    minSize = 500
+    minSize = 600
     axes {
         size = 500.0
         visible = true

demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt

@@ -66,7 +66,7 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
                 id = name.toString()
                 role = "tabpanel"
                 attributes["aria-labelledby"] = "tab[$name]"
-                div("container w-100 h-100") { id = "output-$name" }.also {element->
+                div("w-100 h-100") { id = "output-$name" }.also {element->
                     output = three.createCanvas(element, canvasOptions)
                 }
                 hr()

ui/react/src/main/kotlin/hep/dataforge/vision/react/ConfigEditor.kt

@@ -37,9 +37,10 @@ public external interface ConfigEditorItemProps : RProps {
     public var descriptor: NodeDescriptor?
 }
 
-private val ConfigEditorItem: FunctionalComponent<ConfigEditorItemProps> = functionalComponent("ConfigEditorItem") { props ->
+private val ConfigEditorItem: FunctionalComponent<ConfigEditorItemProps> =
-    configEditorItem(props)
+    functionalComponent("ConfigEditorItem") { props ->
-}
+        configEditorItem(props)
+    }
 
 private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
     var expanded: Boolean by useState { true }
@@ -82,26 +83,77 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
         update()
     }
 
-    when (actualItem) {
+
-        is MetaItem.NodeItem -> {
+
+    if (actualItem is MetaItem.NodeItem) {
+        styledDiv {
+            css {
+                +TreeStyles.treeLeaf
+            }
+            styledSpan {
+                css {
+                    +TreeStyles.treeCaret
+                    if (expanded) {
+                        +TreeStyles.treeCaredDown
+                    }
+                }
+                attrs {
+                    onClickFunction = expanderClick
+                }
+            }
+            styledSpan {
+                css {
+                    +TreeStyles.treeLabel
+                    if (item == null) {
+                        +TreeStyles.treeLabelInactive
+                    }
+                }
+                +token
+            }
+        }
+        if (expanded) {
+            styledUl {
+                css {
+                    +TreeStyles.tree
+                }
+                val keys = buildSet {
+                    (descriptorItem as? NodeDescriptor)?.items?.keys?.forEach {
+                        add(NameToken(it))
+                    }
+                    item?.node?.items?.keys?.let { addAll(it) }
+                    defaultItem?.node?.items?.keys?.let { addAll(it) }
+                }
+
+                keys.filter { !it.body.startsWith("@") }.forEach { token ->
+                    styledLi {
+                        css {
+                            +TreeStyles.treeItem
+                        }
+                        child(ConfigEditorItem) {
+                            attrs {
+                                this.key = props.name.toString()
+                                this.root = props.root
+                                this.name = props.name + token
+                                this.default = props.default
+                                this.descriptor = props.descriptor
+                            }
+                        }
+                        //configEditor(props.root, props.name + token, props.descriptor, props.default)
+                    }
+                }
+            }
+        }
+    } else {
+        styledDiv {
+            css {
+                +TreeStyles.treeLeaf
+            }
             styledDiv {
                 css {
-                    +TreeStyles.treeLeaf
+                    +TreeStyles.treeLabel
                 }
                 styledSpan {
                     css {
-                        +TreeStyles.treeCaret
-                        if (expanded) {
-                            +TreeStyles.treeCaredDown
-                        }
-                    }
-                    attrs {
-                        onClickFunction = expanderClick
-                    }
-                }
-                styledSpan {
-                    css {
-                        +TreeStyles.treeLabel
                         if (item == null) {
                             +TreeStyles.treeLabelInactive
                         }
@@ -109,83 +161,31 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
                     +token
                 }
             }
-            if (expanded) {
-                styledUl {
-                    css {
-                        +TreeStyles.tree
-                    }
-                    val keys = buildSet {
-                        (descriptorItem as? NodeDescriptor)?.items?.keys?.forEach {
-                            add(NameToken(it))
-                        }
-                        item?.node?.items?.keys?.let { addAll(it) }
-                        defaultItem?.node?.items?.keys?.let { addAll(it) }
-                    }
-
-                    keys.filter { !it.body.startsWith("@") }.forEach { token ->
-                        styledLi {
-                            css {
-                                +TreeStyles.treeItem
-                            }
-                            child(ConfigEditorItem) {
-                                attrs {
-                                    this.key = props.name.toString()
-                                    this.root = props.root
-                                    this.name = props.name + token
-                                    this.default = props.default
-                                    this.descriptor = props.descriptor
-                                }
-                            }
-                            //configEditor(props.root, props.name + token, props.descriptor, props.default)
-                        }
-                    }
-                }
-            }
-        }
-        is MetaItem.ValueItem -> {
             styledDiv {
                 css {
-                    +TreeStyles.treeLeaf
+                    +TreeStyles.resizeableInput
                 }
-                styledDiv {
+                valueChooser(
-                    css {
+                    props.name,
-                        +TreeStyles.treeLabel
+                    actualItem,
-                    }
+                    descriptorItem as? ValueDescriptor,
-                    styledSpan {
+                    valueChanged
-                        css {
+                )
-                            if (item == null) {
-                                +TreeStyles.treeLabelInactive
-                            }
-                        }
-                        +token
-                    }
-                }
-                styledDiv {
-                    css {
-                        +TreeStyles.resizeableInput
-                    }
-                    valueChooser(
-                        props.name,
-                        actualItem,
-                        descriptorItem as? ValueDescriptor,
-                        valueChanged
-                    )
-                }
-                styledButton {
-                    css {
-                        +TreeStyles.removeButton
-                    }
-                    +"\u00D7"
-                    attrs {
-                        if (item == null) {
-                            disabled = true
-                        } else {
-                            onClickFunction = removeClick
-                        }
-                    }
-                }
-
             }
+            styledButton {
+                css {
+                    +TreeStyles.removeButton
+                }
+                +"\u00D7"
+                attrs {
+                    if (item == null) {
+                        disabled = true
+                    } else {
+                        onClickFunction = removeClick
+                    }
+                }
+            }
+
         }
     }
 }
@@ -210,7 +210,12 @@ public val ConfigEditor: FunctionalComponent<ConfigEditorProps> = functionalComp
     }
 }
 
-public fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) {
+public fun Element.configEditor(
+    config: Config,
+    descriptor: NodeDescriptor? = null,
+    default: Meta? = null,
+    key: Any? = null,
+) {
     render(this) {
         child(ConfigEditor) {
             attrs {
@@ -223,7 +228,12 @@ public fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = nu
     }
 }
 
-public fun RBuilder.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) {
+public fun RBuilder.configEditor(
+    config: Config,
+    descriptor: NodeDescriptor? = null,
+    default: Meta? = null,
+    key: Any? = null,
+) {
     child(ConfigEditor) {
         attrs {
             this.key = key?.toString() ?: ""

ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt

@@ -61,6 +61,8 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
             minWidth = 500.px
             minHeight = 500.px
             display = Display.inherit
+            width = 100.pct
+            height = 100.pct
             flex(1.0, 1.0, FlexBasis.auto)
         }
         ref = elementRef

visionforge-solid/src/jsMain/kotlin/hep/dataforge/vision/solid/three/ThreePlugin.kt

@@ -117,14 +117,14 @@ public class ThreePlugin : AbstractPlugin(), HtmlVisionBinding<Solid> {
     }
 
     public fun createCanvas(
-        element: HTMLElement,
+        element: Element,
         options: Canvas3DOptions = Canvas3DOptions.empty(),
     ): ThreeCanvas = ThreeCanvas(this, options).apply {
         attach(element)
     }
 
     override fun bind(element: Element, vision: Solid) {
-        TODO("Not yet implemented")
+        createCanvas(element).render(vision)
     }
 
     public companion object : PluginFactory<ThreePlugin> {