From dc805228b4e38b56984d07f76bb3dc713a88eb6b Mon Sep 17 00:00:00 2001 From: Alexander Nozik Date: Thu, 19 Nov 2020 21:55:54 +0300 Subject: [PATCH] GDML UI cleanup --- .../vision/gdml/demo/GDMLAppComponent.kt | 104 ++++++++---------- .../vision/solid/demo/ThreeDemoGrid.kt | 4 +- .../vision/bootstrap/tabComponent.kt | 5 +- .../vision/bootstrap/threeControls.kt | 1 - 4 files changed, 48 insertions(+), 66 deletions(-) diff --git a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GDMLAppComponent.kt b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GDMLAppComponent.kt index 3df7d3ca..fd9beb97 100644 --- a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GDMLAppComponent.kt +++ b/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("GDMLApp") { props -> vision = parsedVision } - flexColumn { + flexRow { css { - height = 100.pct - width = 100.pct + height = 100.vh - 35.px + width = 100.vw - 35.px + //flexWrap = FlexWrap.wrap } - styledDiv { + flexColumn { css { - +"page-header" - +"justify-content-center" + flex(10.0, 10.0, FlexBasis.zero) } - 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) - flexWrap = FlexWrap.wrap + minWidth = 500.px + 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 { - 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 - this.obj = vision as? Solid - this.selected = selected - this.options = Canvas3DOptions.invoke{ - this.onSelect = onSelect - } - this.canvasCallback = { - canvas = it - } + FileReader().apply { + onload = { + val string = result as String + loadData(file.name, string) } + readAsText(file) } } } - flexColumn { - css { - 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) - } + canvas?.let { + threeControls(it, selected, onSelect) } } } diff --git a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt index a8d31a2d..10dde984 100644 --- a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt +++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt @@ -62,11 +62,11 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page { } } 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() diff --git a/ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/tabComponent.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/tabComponent.kt index 5580b923..1b37644d 100644 --- a/ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/tabComponent.kt +++ b/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.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() diff --git a/ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/threeControls.kt b/ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/threeControls.kt index 839c35d3..a7d67d63 100644 --- a/ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/threeControls.kt +++ b/ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/threeControls.kt @@ -36,7 +36,6 @@ public val ThreeControls: FunctionalComponent = functionalCo h2 { +"Object tree" } styledDiv { css { - overflowY = Overflow.auto flex(1.0, 0.0, FlexBasis.auto) } props.canvas.content?.let {