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.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")

View File

@ -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

View File

@ -40,10 +40,7 @@ private class ThreeDemoApp : Application {
}
}
}
}
}
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.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)
}
}

View File

@ -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 -->

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 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()
}