GDML UI cleanup

This commit is contained in:
Alexander Nozik 2020-11-19 21:55:54 +03:00
parent d2553d5b40
commit dc805228b4
4 changed files with 48 additions and 66 deletions

View File

@ -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,10 +70,15 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
vision = parsedVision
}
flexRow {
css {
height = 100.vh - 35.px
width = 100.vw - 35.px
//flexWrap = FlexWrap.wrap
}
flexColumn {
css {
height = 100.pct
width = 100.pct
flex(10.0, 10.0, FlexBasis.zero)
}
styledDiv {
css {
@ -83,24 +87,8 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
}
h1 { +"GDML/JSON loader demo" }
}
flexRow {
css {
flex(1.0, 1.0, FlexBasis.auto)
flexWrap = FlexWrap.wrap
}
flexColumn {
css {
flex(1.0, 1.0, FlexBasis.auto)
margin(10.px)
}
nameCrumbs(selected, "World", onSelect)
//canvas
styledDiv {
css {
flex(1.0, 1.0, FlexBasis.auto)
}
child(ThreeCanvasComponent) {
attrs {
this.context = props.context
@ -114,17 +102,15 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
}
}
}
}
}
flexColumn {
css {
minWidth = 500.px
maxHeight = 100.pct
flex(1.0, 1.0, FlexBasis.zero)
margin(left = 4.px, right = 4.px)
height = 100.pct
margin(left = 4.px, right = 4.px, top = 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) {
@ -138,11 +124,9 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
}
}
}
}
canvas?.let {
threeControls(it, selected, onSelect)
}
}
}
}
}

View File

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

View File

@ -1,9 +1,7 @@
package hep.dataforge.vision.bootstrap
import hep.dataforge.vision.react.flexColumn
import kotlinx.css.Overflow
import kotlinx.css.flexGrow
import kotlinx.css.overflowY
import kotlinx.css.*
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()

View File

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