GDML UI cleanup

demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GDMLAppComponent.kt

@@ -4,7 +4,6 @@ import hep.dataforge.context.Context
 import hep.dataforge.meta.invoke
 import hep.dataforge.names.Name
 import hep.dataforge.vision.Vision
-import hep.dataforge.vision.bootstrap.card
 import hep.dataforge.vision.bootstrap.nameCrumbs
 import hep.dataforge.vision.bootstrap.threeControls
 import hep.dataforge.vision.gdml.toVision
@@ -71,77 +70,62 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
         vision = parsedVision
     }
 
-    flexColumn {
+    flexRow {
         css {
-            height = 100.pct
+            height = 100.vh - 35.px
-            width = 100.pct
+            width = 100.vw - 35.px
+            //flexWrap = FlexWrap.wrap
         }
-        styledDiv {
+        flexColumn {
             css {
-                +"page-header"
+                flex(10.0, 10.0, FlexBasis.zero)
-                +"justify-content-center"
             }
-            h1 { +"GDML/JSON loader demo" }
+            styledDiv {
+                css {
+                    +"page-header"
+                    +"justify-content-center"
+                }
+                h1 { +"GDML/JSON loader demo" }
+            }
+            nameCrumbs(selected, "World", onSelect)
+            //canvas
+            child(ThreeCanvasComponent) {
+                attrs {
+                    this.context = props.context
+                    this.obj = vision as? Solid
+                    this.selected = selected
+                    this.options = Canvas3DOptions.invoke {
+                        this.onSelect = onSelect
+                    }
+                    this.canvasCallback = {
+                        canvas = it
+                    }
+                }
+            }
+
         }
-        flexRow {
+        flexColumn {
             css {
-                flex(1.0, 1.0, FlexBasis.auto)
+                minWidth = 500.px
-                flexWrap = FlexWrap.wrap
+                height = 100.pct
+                margin(left = 4.px, right = 4.px, top = 4.px)
+                border(1.px, BorderStyle.solid, Color.lightGray)
             }
+            fileDrop("(drag file here)") { files ->
+                val file = files?.get(0)
+                if (file != null) {
 
-            flexColumn {
+                    FileReader().apply {
-                css {
+                        onload = {
-                    flex(1.0, 1.0, FlexBasis.auto)
+                            val string = result as String
-                    margin(10.px)
+                            loadData(file.name, string)
-                }
-                nameCrumbs(selected, "World", onSelect)
-
-                //canvas
-                styledDiv {
-                    css {
-                        flex(1.0, 1.0, FlexBasis.auto)
-                    }
-                    child(ThreeCanvasComponent) {
-                        attrs {
-                            this.context = props.context
-                            this.obj = vision as? Solid
-                            this.selected = selected
-                            this.options = Canvas3DOptions.invoke{
-                                this.onSelect = onSelect
-                            }
-                            this.canvasCallback = {
-                                canvas = it
-                            }
                         }
+                        readAsText(file)
                     }
                 }
             }
-            flexColumn {
+            canvas?.let {
-                css {
+                threeControls(it, selected, onSelect)
-                    minWidth = 500.px
-                    maxHeight = 100.pct
-                    flex(1.0, 1.0, FlexBasis.zero)
-                    margin(left = 4.px, right = 4.px)
-                    border(1.px, BorderStyle.solid, Color.lightGray)
-                }
-                card("Load data") {
-                    fileDrop("(drag file here)") { files ->
-                        val file = files?.get(0)
-                        if (file != null) {
-
-                            FileReader().apply {
-                                onload = {
-                                    val string = result as String
-                                    loadData(file.name, string)
-                                }
-                                readAsText(file)
-                            }
-                        }
-                    }
-                }
-                canvas?.let {
-                    threeControls(it, selected, onSelect)
-                }
             }
         }
     }

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

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

ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/tabComponent.kt

@@ -1,9 +1,7 @@
 package hep.dataforge.vision.bootstrap
 
 import hep.dataforge.vision.react.flexColumn
-import kotlinx.css.Overflow
+import kotlinx.css.*
-import kotlinx.css.flexGrow
-import kotlinx.css.overflowY
 import kotlinx.html.DIV
 import kotlinx.html.classes
 import kotlinx.html.js.onClickFunction
@@ -77,6 +75,7 @@ public class TabBuilder(internal val parentBuilder: RBuilder) {
             }
             styledDiv {
                 css {
+                    height = 100.pct
                     overflowY = Overflow.auto
                 }
                 builder()

ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/threeControls.kt

@@ -36,7 +36,6 @@ public val ThreeControls: FunctionalComponent<ThreeControlsProps> = functionalCo
             h2 { +"Object tree" }
             styledDiv {
                 css {
-                    overflowY = Overflow.auto
                     flex(1.0, 0.0, FlexBasis.auto)
                 }
                 props.canvas.content?.let {