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.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")
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -40,10 +40,7 @@ private class ThreeDemoApp : Application {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fun main() {
|
fun main() {
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 -->
|
||||||
|
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 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()
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user