Fix showcase-js

This commit is contained in:
Alexander Nozik 2020-11-21 14:47:29 +03:00
parent a44e8091c8
commit 5e340aa179
7 changed files with 47 additions and 55 deletions

View File

@ -5,25 +5,14 @@ import hep.dataforge.js.Application
import hep.dataforge.js.startApplication import hep.dataforge.js.startApplication
import hep.dataforge.vision.gdml.toVision import hep.dataforge.vision.gdml.toVision
import kotlinx.browser.document import kotlinx.browser.document
import kotlinx.css.*
import react.child import react.child
import react.dom.render import react.dom.render
import styled.injectGlobal
private class GDMLDemoApp : Application { private class GDMLDemoApp : Application {
override fun start(state: Map<String, Any>) { override fun start(state: Map<String, Any>) {
injectGlobal {
body {
height = 100.pct
width = 100.pct
margin(0.px)
padding(0.px)
}
}
val context = Global.context("demo") {} 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")

View File

@ -24,7 +24,7 @@ fun Page<Solid>.demo(name: String, title: String = name, block: SolidGroup.() ->
} }
val canvasOptions = Canvas3DOptions { val canvasOptions = Canvas3DOptions {
minSize = 600 minSize = 400
axes { axes {
size = 500.0 size = 500.0
visible = true visible = true

View File

@ -40,10 +40,7 @@ private class ThreeDemoApp : Application {
} }
} }
} }
} }
} }
fun main() { fun main() {

View File

@ -10,18 +10,17 @@ import hep.dataforge.vision.layout.Page
import hep.dataforge.vision.solid.Solid import hep.dataforge.vision.solid.Solid
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.browser.document
import kotlinx.dom.clear import kotlinx.dom.clear
import kotlinx.html.dom.append import kotlinx.html.dom.append
import kotlinx.html.id import kotlinx.html.id
import kotlinx.html.js.* import kotlinx.html.js.*
import kotlinx.html.role import kotlinx.html.style
import org.w3c.dom.Element import org.w3c.dom.Element
import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLDivElement
import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLElement
class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> { class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
private lateinit var navigationElement: HTMLElement private lateinit var navigationElement: HTMLElement
private lateinit var contentElement: HTMLDivElement private lateinit var contentElement: HTMLDivElement
@ -32,48 +31,47 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
init { init {
element.clear() element.clear()
element.append { element.append {
div("container") { nav("navbar navbar-expand-md navbar-dark fixed-top bg-dark") {
navigationElement = ul("nav nav-tabs") { a(classes = "navbar-brand") {
id = "${idPrefix}Tab" href = "#"
role = "tablist" +"Demo grid"
} }
contentElement = div("tab-content") { div("navbar-collapse collapse") {
id = "${idPrefix}TabContent" id = "navbar"
navigationElement = ul("nav navbar-nav")
} }
} }
contentElement = div {
id = "content"
}
} }
} }
@Suppress("UNCHECKED_CAST") @Suppress("UNCHECKED_CAST")
override fun output(name: Name, meta: Meta): Output<Solid> = outputs.getOrPut(name) { override fun output(name: Name, meta: Meta): Output<Solid> = outputs.getOrPut(name) {
lateinit var output: ThreeCanvas
navigationElement.append { navigationElement.append {
li("nav-item") { li("nav-item") {
a(classes = "nav-link") { a(classes = "nav-link") {
id = "tab[$name]"
attributes["data-toggle"] = "tab"
href = "#$name" href = "#$name"
role = "tab"
attributes["aria-controls"] = "$name"
attributes["aria-selected"] = "false"
+name.toString() +name.toString()
} }
} }
} }
contentElement.append { contentElement.append {
div("tab-pane fade col") { div("container") {
id = name.toString() id = name.toString()
role = "tabpanel"
attributes["aria-labelledby"] = "tab[$name]"
div { id = "output-$name" }.also { element ->
output = three.createCanvas(element, canvasOptions)
}
hr() hr()
h2 { +(meta["title"].string ?: name.toString()) } h2 { +(meta["title"].string ?: name.toString()) }
hr()
div {
style = "height: 600px;"
id = "output-$name"
}
} }
} }
output val element = document.getElementById("output-$name") ?: error("Element not found")
three.createCanvas(element, canvasOptions)
} }
} }

View File

@ -2,18 +2,17 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">-->
<title>Three js demo for particle physics</title> <title>Three js demo for particle physics</title>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="spatial-showcase.js"></script> <script type="text/javascript" src="spatial-showcase.js"></script>
</head> </head>
<body class="application"> <body class="application">
<div class="container">
<h1>Demo grid</h1>
</div>
<div class="container" id="demo"></div> <div class="container" id="demo"></div>
<!-- jQuery and JS bundle w/ Popper.js --> <!-- jQuery and JS bundle w/ Popper.js -->

View File

@ -0,0 +1,4 @@
body{
min-height: 75rem;
padding-top: 4.5rem;
}

View File

@ -59,11 +59,22 @@ public class ThreeCanvas(
private var picked: Object3D? = null private var picked: Object3D? = null
private val renderer = WebGLRenderer { antialias = true }.apply { private val renderer = WebGLRenderer {
antialias = true
}.apply {
setClearColor(Colors.skyblue, 1) setClearColor(Colors.skyblue, 1)
} }
public val canvas: HTMLCanvasElement = renderer.domElement as HTMLCanvasElement private val canvas = (renderer.domElement as HTMLCanvasElement).apply {
width = 600
height = 600
style.apply {
width = "100%"
height = "100%"
display = "block"
}
}
/** /**
* Force camera aspect ration and renderer size recalculation * Force camera aspect ration and renderer size recalculation
@ -71,6 +82,12 @@ public class ThreeCanvas(
public fun updateSize() { public fun updateSize() {
val width = canvas.clientWidth val width = canvas.clientWidth
val height = canvas.clientHeight val height = canvas.clientHeight
canvas.style.apply {
minWidth = "${options.minWith.toInt()}px"
maxWidth = "${options.maxWith.toInt()}px"
minHeight = "${options.minHeight.toInt()}px"
maxHeight = "${options.maxHeight.toInt()}px"
}
renderer.setSize(width, height, false) renderer.setSize(width, height, false)
camera.aspect = width.toDouble() / height.toDouble() camera.aspect = width.toDouble() / height.toDouble()
camera.updateProjectionMatrix() camera.updateProjectionMatrix()
@ -94,18 +111,6 @@ public class ThreeCanvas(
} }
}, false) }, false)
canvas.style.apply {
width = "100%"
minWidth = "${options.minWith.toInt()}px"
maxWidth = "${options.maxWith.toInt()}px"
height = "100%"
minHeight = "${options.minHeight.toInt()}px"
maxHeight = "${options.maxHeight.toInt()}px"
display = "block"
}
canvas.onresize = { canvas.onresize = {
updateSize() updateSize()
} }