Fix showcase-js

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

demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vision/solid/demo/demo.kt

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

demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoApp.kt

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

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<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") {
+            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")
     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)
     }
 }
 

demo/spatial-showcase/src/jsMain/resources/index.html

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

demo/spatial-showcase/src/jsMain/resources/styles.css

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

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