diff --git a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GdmlJsDemoApp.kt b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GdmlJsDemoApp.kt index cfb23cd5..67df999f 100644 --- a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GdmlJsDemoApp.kt +++ b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GdmlJsDemoApp.kt @@ -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) { - 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") diff --git a/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt b/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt index f1618b8b..07f18e4d 100644 --- a/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt +++ b/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt @@ -24,7 +24,7 @@ fun Page.demo(name: String, title: String = name, block: SolidGroup.() -> } val canvasOptions = Canvas3DOptions { - minSize = 600 + minSize = 400 axes { size = 500.0 visible = true diff --git a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoApp.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoApp.kt index 206dbb2b..ba76b024 100644 --- a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoApp.kt +++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoApp.kt @@ -40,10 +40,7 @@ private class ThreeDemoApp : Application { } } } - - } - } fun main() { diff --git a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt index 10dde984..a53a4529 100644 --- a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt +++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt @@ -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 { - - private lateinit var navigationElement: HTMLElement private lateinit var contentElement: HTMLDivElement @@ -32,48 +31,47 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page { 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 = 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) } } diff --git a/demo/spatial-showcase/src/jsMain/resources/index.html b/demo/spatial-showcase/src/jsMain/resources/index.html index f3f04915..fbdb962d 100644 --- a/demo/spatial-showcase/src/jsMain/resources/index.html +++ b/demo/spatial-showcase/src/jsMain/resources/index.html @@ -2,18 +2,17 @@ - + Three js demo for particle physics + + -
-

Demo grid

-
diff --git a/demo/spatial-showcase/src/jsMain/resources/styles.css b/demo/spatial-showcase/src/jsMain/resources/styles.css new file mode 100644 index 00000000..84f60dba --- /dev/null +++ b/demo/spatial-showcase/src/jsMain/resources/styles.css @@ -0,0 +1,4 @@ +body{ + min-height: 75rem; + padding-top: 4.5rem; +} \ No newline at end of file diff --git a/visionforge-threejs/src/main/kotlin/hep/dataforge/vision/solid/three/ThreeCanvas.kt b/visionforge-threejs/src/main/kotlin/hep/dataforge/vision/solid/three/ThreeCanvas.kt index ebdf950a..11fffe88 100644 --- a/visionforge-threejs/src/main/kotlin/hep/dataforge/vision/solid/three/ThreeCanvas.kt +++ b/visionforge-threejs/src/main/kotlin/hep/dataforge/vision/solid/three/ThreeCanvas.kt @@ -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() }