Fix showcase-js
This commit is contained in:
parent
a44e8091c8
commit
5e340aa179
@ -5,25 +5,14 @@ import hep.dataforge.js.Application
|
||||
import hep.dataforge.js.startApplication
|
||||
import hep.dataforge.vision.gdml.toVision
|
||||
import kotlinx.browser.document
|
||||
import kotlinx.css.*
|
||||
import react.child
|
||||
import react.dom.render
|
||||
import styled.injectGlobal
|
||||
|
||||
|
||||
private class GDMLDemoApp : Application {
|
||||
|
||||
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 element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
|
||||
|
||||
|
@ -24,7 +24,7 @@ fun Page<Solid>.demo(name: String, title: String = name, block: SolidGroup.() ->
|
||||
}
|
||||
|
||||
val canvasOptions = Canvas3DOptions {
|
||||
minSize = 600
|
||||
minSize = 400
|
||||
axes {
|
||||
size = 500.0
|
||||
visible = true
|
||||
|
@ -40,10 +40,7 @@ private class ThreeDemoApp : Application {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
fun main() {
|
||||
|
@ -10,18 +10,17 @@ import hep.dataforge.vision.layout.Page
|
||||
import hep.dataforge.vision.solid.Solid
|
||||
import hep.dataforge.vision.solid.three.ThreeCanvas
|
||||
import hep.dataforge.vision.solid.three.ThreePlugin
|
||||
import kotlinx.browser.document
|
||||
import kotlinx.dom.clear
|
||||
import kotlinx.html.dom.append
|
||||
import kotlinx.html.id
|
||||
import kotlinx.html.js.*
|
||||
import kotlinx.html.role
|
||||
import kotlinx.html.style
|
||||
import org.w3c.dom.Element
|
||||
import org.w3c.dom.HTMLDivElement
|
||||
import org.w3c.dom.HTMLElement
|
||||
|
||||
class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
|
||||
|
||||
|
||||
private lateinit var navigationElement: HTMLElement
|
||||
private lateinit var contentElement: HTMLDivElement
|
||||
|
||||
@ -32,48 +31,47 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
|
||||
init {
|
||||
element.clear()
|
||||
element.append {
|
||||
div("container") {
|
||||
navigationElement = ul("nav nav-tabs") {
|
||||
id = "${idPrefix}Tab"
|
||||
role = "tablist"
|
||||
nav("navbar navbar-expand-md navbar-dark fixed-top bg-dark") {
|
||||
a(classes = "navbar-brand") {
|
||||
href = "#"
|
||||
+"Demo grid"
|
||||
}
|
||||
contentElement = div("tab-content") {
|
||||
id = "${idPrefix}TabContent"
|
||||
div("navbar-collapse collapse") {
|
||||
id = "navbar"
|
||||
navigationElement = ul("nav navbar-nav")
|
||||
}
|
||||
}
|
||||
contentElement = div {
|
||||
id = "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Suppress("UNCHECKED_CAST")
|
||||
override fun output(name: Name, meta: Meta): Output<Solid> = outputs.getOrPut(name) {
|
||||
lateinit var output: ThreeCanvas
|
||||
navigationElement.append {
|
||||
li("nav-item") {
|
||||
a(classes = "nav-link") {
|
||||
id = "tab[$name]"
|
||||
attributes["data-toggle"] = "tab"
|
||||
href = "#$name"
|
||||
role = "tab"
|
||||
attributes["aria-controls"] = "$name"
|
||||
attributes["aria-selected"] = "false"
|
||||
+name.toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
contentElement.append {
|
||||
div("tab-pane fade col") {
|
||||
div("container") {
|
||||
id = name.toString()
|
||||
role = "tabpanel"
|
||||
attributes["aria-labelledby"] = "tab[$name]"
|
||||
div { id = "output-$name" }.also { element ->
|
||||
output = three.createCanvas(element, canvasOptions)
|
||||
}
|
||||
hr()
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2,18 +2,17 @@
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
<!-- 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">
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script type="text/javascript" src="spatial-showcase.js"></script>
|
||||
</head>
|
||||
<body class="application">
|
||||
<div class="container">
|
||||
<h1>Demo grid</h1>
|
||||
</div>
|
||||
<div class="container" id="demo"></div>
|
||||
|
||||
<!-- jQuery and JS bundle w/ Popper.js -->
|
||||
|
4
demo/spatial-showcase/src/jsMain/resources/styles.css
Normal file
4
demo/spatial-showcase/src/jsMain/resources/styles.css
Normal file
@ -0,0 +1,4 @@
|
||||
body{
|
||||
min-height: 75rem;
|
||||
padding-top: 4.5rem;
|
||||
}
|
@ -59,11 +59,22 @@ public class ThreeCanvas(
|
||||
|
||||
private var picked: Object3D? = null
|
||||
|
||||
private val renderer = WebGLRenderer { antialias = true }.apply {
|
||||
private val renderer = WebGLRenderer {
|
||||
antialias = true
|
||||
}.apply {
|
||||
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
|
||||
@ -71,6 +82,12 @@ public class ThreeCanvas(
|
||||
public fun updateSize() {
|
||||
val width = canvas.clientWidth
|
||||
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)
|
||||
camera.aspect = width.toDouble() / height.toDouble()
|
||||
camera.updateProjectionMatrix()
|
||||
@ -94,18 +111,6 @@ public class ThreeCanvas(
|
||||
}
|
||||
}, 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 = {
|
||||
updateSize()
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user