kscience/visionforge
8
1
Fork 1
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

UI cleanup

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

3
demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GdmlJsDemoApp.kt
View File

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

7
demo/gdml/src/jsMain/resources/index.html
View File

@ -8,10 +8,11 @@
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fileDrop.css"> <link rel="stylesheet" href="css/fileDrop.css">
<script type="text/javascript" src="gdml.js"></script> <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> </head>
<body class="application"> <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> </body>
</html> </html>

25
demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt
View File

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

3
demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt
View File

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

7
demo/muon-monitor/src/jsMain/resources/index.html
View File

@ -7,10 +7,11 @@
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="muon-monitor.js"></script> <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> </head>
<body class="application"> <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> </body>
</html> </html>

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

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

1
visionforge-threejs/src/main/kotlin/hep/dataforge/vision/solid/three/ThreePlugin.kt
View File

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

39
visionforge-threejs/src/main/kotlin/hep/dataforge/vision/solid/three/csg.kt
View File

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

7
visionforge-threejs/src/main/kotlin/hep/dataforge/vision/solid/three/three.kt
View File

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