UI cleanup

This commit is contained in:
Alexander Nozik 2020-11-21 20:30:42 +03:00
parent 5e340aa179
commit 2be4576495
10 changed files with 57 additions and 71 deletions

View File

@ -3,19 +3,18 @@ package hep.dataforge.vision.gdml.demo
import hep.dataforge.context.Context
import hep.dataforge.names.Name
import hep.dataforge.vision.Vision
import hep.dataforge.vision.bootstrap.gridRow
import hep.dataforge.vision.bootstrap.nameCrumbs
import hep.dataforge.vision.bootstrap.threeControls
import hep.dataforge.vision.gdml.toVision
import hep.dataforge.vision.react.ThreeCanvasComponent
import hep.dataforge.vision.react.flexColumn
import hep.dataforge.vision.react.flexRow
import hep.dataforge.vision.solid.Solid
import hep.dataforge.vision.solid.SolidManager
import hep.dataforge.vision.solid.specifications.Canvas3DOptions
import hep.dataforge.vision.solid.three.ThreeCanvas
import kotlinx.browser.window
import kotlinx.css.*
import kotlinx.css.properties.border
import kscience.gdml.GDML
import kscience.gdml.decodeFromString
import org.w3c.files.FileReader
@ -69,25 +68,22 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
vision = parsedVision
}
flexRow {
css {
height = 100.vh - 35.px
width = 100.vw - 35.px
//flexWrap = FlexWrap.wrap
}
gridRow {
flexColumn {
css{
flex(1.0, 1.0, FlexBasis.auto)
+"col-lg-9"
height = 100.vh
}
styledDiv {
css {
+"mx-auto"
+"page-header"
+"justify-content-center"
}
h1 { +"GDML/JSON loader demo" }
}
nameCrumbs(selected, "World", onSelect)
//canvas
child(ThreeCanvasComponent) {
attrs {
this.context = props.context
@ -105,11 +101,11 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
}
flexColumn {
css {
minWidth = 400.px
height = 100.pct
margin(left = 4.px, right = 4.px, top = 4.px)
border(1.px, BorderStyle.solid, Color.lightGray)
flex(0.0,1.0, FlexBasis.zero)
+"col-lg-3"
padding(top = 4.px)
//border(1.px, BorderStyle.solid, Color.lightGray)
height = 100.vh
overflowY = Overflow.auto
}
fileDrop("(drag file here)") { files ->
val file = files?.get(0)

View File

@ -12,10 +12,9 @@ import react.dom.render
private class GDMLDemoApp : Application {
override fun start(state: Map<String, Any>) {
val context = Global.context("demo") {}
val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
val context = Global.context("demo") {}
render(element) {
child(GDMLApp) {
attrs {

View File

@ -8,10 +8,11 @@
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fileDrop.css">
<script type="text/javascript" src="gdml.js"></script>
<script type="text/javascript" src ="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
</head>
<body class="application">
<div class="container-fluid" id = "app"> </div>
<div class="container-fluid max-vh-100" id = "app"> </div>
<script type="text/javascript" src ="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@ -8,8 +8,10 @@ import hep.dataforge.names.length
import hep.dataforge.vision.Vision
import hep.dataforge.vision.bootstrap.canvasControls
import hep.dataforge.vision.bootstrap.card
import hep.dataforge.vision.bootstrap.gridRow
import hep.dataforge.vision.react.ThreeCanvasComponent
import hep.dataforge.vision.react.configEditor
import hep.dataforge.vision.react.flexColumn
import hep.dataforge.vision.react.objectTree
import hep.dataforge.vision.solid.specifications.Camera
import hep.dataforge.vision.solid.specifications.Canvas3DOptions
@ -55,14 +57,14 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
val root = props.model.root
div("row") {
styledDiv {
gridRow{
flexColumn {
css {
+"col-lg-3"
+"order-lg-1"
+"order-2"
padding(0.px)
overflowY = Overflow.auto
display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
}
//tree
@ -73,14 +75,14 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
objectTree(root, selected, onSelect)
}
}
styledDiv {
flexColumn {
css {
+"col-lg-6"
display = Display.flex
flexDirection = FlexDirection.column
+"order-lg-2"
+"order-1"
height = 100.vh
}
h1("mx-auto") {
h1("mx-auto page-header") {
+"Muon monitor demo"
}
//canvas
@ -89,22 +91,21 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
attrs {
this.context = props.context
this.obj = root
this.selected = selected
this.options = canvasConfig.apply {
this.onSelect = onSelect
}
this.selected = selected
this.canvasCallback = {
canvas = it
}
}
}
}
styledDiv {
flexColumn {
css {
+"col-lg-3"
+"order-3"
padding(0.px)
display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
}
styledDiv {

View File

@ -21,10 +21,9 @@ private class MMDemoApp : Application {
}
override fun start(state: Map<String, Any>) {
val context = Global.context("demo") {}
val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
val context = Global.context("demo") {}
render(element) {
child(MMApp) {
attrs {

View File

@ -7,10 +7,11 @@
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="muon-monitor.js"></script>
<script type="text/javascript" src ="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
</head>
<body class="application">
<div class="container-fluid min-vh-100" id = "app"> </div>
<div class="container-fluid max-vh-100" id = "app"> </div>
<script type="text/javascript" src ="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@ -6,7 +6,8 @@ import hep.dataforge.vision.solid.Solid
import hep.dataforge.vision.solid.specifications.Canvas3DOptions
import hep.dataforge.vision.solid.three.ThreeCanvas
import hep.dataforge.vision.solid.three.ThreePlugin
import kotlinx.css.*
import kotlinx.css.Display
import kotlinx.css.display
import org.w3c.dom.Element
import org.w3c.dom.HTMLElement
import react.*
@ -57,10 +58,7 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
styledDiv {
css {
display = Display.inherit
width = 100.pct
height = 100.pct
flex(1.0, 1.0, FlexBasis.auto)
display = Display.contents
}
ref = elementRef
}

View File

@ -54,6 +54,7 @@ public class ThreePlugin : AbstractPlugin(), HtmlVisionBinding<Solid> {
group[token] = object3D
} catch (ex: Throwable) {
logger.error(ex) { "Failed to render $child" }
ex.printStackTrace()
}
}
}

View File

@ -1,26 +1,17 @@
@file:JsModule("three-csg-ts")
@file:JsNonModule
@file:Suppress(
"INTERFACE_WITH_SUPERCLASS",
@file:Suppress("INTERFACE_WITH_SUPERCLASS",
"OVERRIDING_FINAL_MEMBER",
"RETURN_TYPE_MISMATCH_ON_OVERRIDE",
"CONFLICTING_OVERLOADS",
"EXTERNAL_DELEGATION",
"NESTED_CLASS_IN_EXTERNAL_INTERFACE"
)
package hep.dataforge.vision.solid.three
"EXTERNAL_DELEGATION")
@file:JsModule("three-csg-ts")
@file:JsNonModule
import info.laht.threekt.math.Matrix4
import info.laht.threekt.math.Vector3
import info.laht.threekt.objects.Mesh
/**
* Constructive Solid Geometry
*/
open external class CSG {
open var polygons: Array<Polygon>
external open class CSG {
open fun clone(): CSG
open fun toPolygons(): Array<Polygon>
open fun union(csg: CSG): CSG
@ -33,7 +24,7 @@ open external class CSG {
fun fromGeometry(geom: Any): CSG
fun fromMesh(mesh: Mesh): CSG
fun toMesh(csg: CSG, toMatrix: Matrix4): Mesh
fun iEval(tokens: Mesh, index: Number? = definedExternally /* null */): Unit
fun iEval(tokens: Mesh, index: Number? = definedExternally)
fun eval(tokens: Mesh, doRemove: Boolean): Mesh
var _tmpm3: Any
var doRemove: Any
@ -44,7 +35,7 @@ open external class CSG {
}
}
open external class Vector(x: Number, y: Number, z: Number): Vector3 {
external open class Vector(x: Number, y: Number, z: Number) : Vector3 {
open fun negated(): Vector
open fun plus(a: Vector): Vector
open fun minus(a: Vector): Vector
@ -61,27 +52,27 @@ external interface IVector {
var z: Number
}
open external class Vertex(pos: IVector, normal: IVector, uv: IVector) {
external open class Vertex(pos: IVector, normal: IVector, uv: IVector? = definedExternally) {
open var pos: Vector
open var normal: Vector
open var uv: Vector
open fun clone(): Vertex
open fun flip(): Unit
open fun flip()
open fun interpolate(other: Vertex, t: Number): Vertex
}
open external class Plane(normal: Vector, w: Number) {
external open class Plane(normal: Vector, w: Number) {
open var normal: Vector
open var w: Number
open fun clone(): Plane
open fun flip(): Unit
open fun flip()
open fun splitPolygon(
polygon: Polygon,
coplanarFront: Array<Polygon>,
coplanarBack: Array<Polygon>,
front: Array<Polygon>,
back: Array<Polygon>
): Unit
back: Array<Polygon>,
)
companion object {
fun fromPoints(a: Vector, b: Vector, c: Vector): Plane
@ -89,10 +80,10 @@ open external class Plane(normal: Vector, w: Number) {
}
}
open external class Polygon(vertices: Array<Vertex>, shared: Any? = definedExternally /* null */) {
external open class Polygon(vertices: Array<Vertex>, shared: Any? = definedExternally) {
open var plane: Plane
open var vertices: Array<Vertex>
open var shared: Any
open fun clone(): Polygon
open fun flip(): Unit
open fun flip()
}

View File

@ -1,5 +1,6 @@
package hep.dataforge.vision.solid.three
import CSG
import hep.dataforge.meta.MetaItem
import hep.dataforge.meta.float
import hep.dataforge.meta.get
@ -22,15 +23,13 @@ public fun Geometry.toBufferGeometry(): BufferGeometry = BufferGeometry().apply
internal fun Double.toRadians() = this * PI / 180
internal val ZERO = Vector3(0,0,0)
public fun CSG.toGeometry(): Geometry {
val geom = Geometry()
val vertices = ArrayList<Vector3>()
val faces = ArrayList<Face3>()
for (polygon in polygons) {
for (polygon in toPolygons()) {
val v0 = vertices.size
val pvs = polygon.vertices
@ -39,7 +38,7 @@ public fun CSG.toGeometry(): Geometry {
}
for (j in 3..polygon.vertices.size) {
val fc = Face3(v0, v0 + j - 2, v0 + j - 1, ZERO)
val fc = Face3(v0, v0 + j - 2, v0 + j - 1, Vector3())
fc.vertexNormals = arrayOf(
Vector3().copy(pvs[0].normal),
Vector3().copy(pvs[j - 2].normal),