Update js examples

This commit is contained in:
Alexander Nozik 2021-08-14 14:17:54 +03:00
parent d916dde6a7
commit 60cec91ab8
4 changed files with 91 additions and 7 deletions

View File

@ -1,5 +1,6 @@
plugins { plugins {
id("ru.mipt.npm.gradle.project") id("ru.mipt.npm.gradle.project")
kotlin("multiplatform") version "1.5.30-RC" apply false
} }
val dataforgeVersion by extra("0.5.0") val dataforgeVersion by extra("0.5.0")

View File

@ -2,16 +2,22 @@ import kotlinx.browser.document
import kotlinx.css.* import kotlinx.css.*
import react.child import react.child
import react.dom.render import react.dom.render
import ringui.SmartTabs
import ringui.Tab
import space.kscience.dataforge.context.Context import space.kscience.dataforge.context.Context
import space.kscience.gdml.GdmlShowCase import space.kscience.gdml.GdmlShowCase
import space.kscience.plotly.scatter
import space.kscience.visionforge.Application import space.kscience.visionforge.Application
import space.kscience.visionforge.VisionClient import space.kscience.visionforge.VisionClient
import space.kscience.visionforge.gdml.toVision import space.kscience.visionforge.gdml.toVision
import space.kscience.visionforge.plotly.PlotlyPlugin
import space.kscience.visionforge.ring.ThreeCanvasWithControls import space.kscience.visionforge.ring.ThreeCanvasWithControls
import space.kscience.visionforge.ring.ThreeWithControlsPlugin import space.kscience.visionforge.ring.ThreeWithControlsPlugin
import space.kscience.visionforge.solid.*
import space.kscience.visionforge.startApplication import space.kscience.visionforge.startApplication
import styled.css import styled.css
import styled.styledDiv import styled.styledDiv
import kotlin.random.Random
private class JsPlaygroundApp : Application { private class JsPlaygroundApp : Application {
@ -20,12 +26,28 @@ private class JsPlaygroundApp : Application {
val playgroundContext = Context { val playgroundContext = Context {
plugin(ThreeWithControlsPlugin) plugin(ThreeWithControlsPlugin)
plugin(VisionClient) plugin(VisionClient)
plugin(PlotlyPlugin)
} }
val element = document.getElementById("playground") ?: error("Element with id 'playground' not found on page") val element = document.getElementById("playground") ?: error("Element with id 'playground' not found on page")
val visionOfD0 = GdmlShowCase.babyIaxo().toVision() val visionOfD0 = GdmlShowCase.babyIaxo().toVision()
val random = Random(112233)
val visionOfSpheres = SolidGroup {
repeat(100) {
sphere(5, name = "sphere[$it]") {
x = random.nextDouble(-300.0, 300.0)
y = random.nextDouble(-300.0, 300.0)
z = random.nextDouble(-300.0, 300.0)
material {
color(random.nextInt())
}
detail = 16
}
}
}
render(element) { render(element) {
styledDiv { styledDiv {
css { css {
@ -34,6 +56,8 @@ private class JsPlaygroundApp : Application {
height = 100.vh height = 100.vh
width = 100.vw width = 100.vw
} }
SmartTabs("D0") {
Tab("D0") {
child(ThreeCanvasWithControls) { child(ThreeCanvasWithControls) {
attrs { attrs {
context = playgroundContext context = playgroundContext
@ -41,6 +65,29 @@ private class JsPlaygroundApp : Application {
} }
} }
} }
Tab("spheres") {
child(ThreeCanvasWithControls) {
attrs {
context = playgroundContext
solid = visionOfSpheres
}
}
}
Tab("plotly"){
Plotly{
attrs {
context = playgroundContext
plot = space.kscience.plotly.Plotly.plot {
scatter {
x(1, 2, 3)
y(5, 8, 7)
}
}
}
}
}
}
}
} }
} }
} }

View File

@ -0,0 +1,36 @@
import kotlinx.css.*
import org.w3c.dom.Element
import org.w3c.dom.HTMLElement
import react.RProps
import react.functionalComponent
import react.useEffect
import react.useRef
import space.kscience.dataforge.context.Context
import space.kscience.plotly.Plot
import space.kscience.plotly.plot
import styled.css
import styled.styledDiv
external interface PlotlyProps: RProps{
var context: Context
var plot: Plot?
}
val Plotly = functionalComponent<PlotlyProps>("Plotly"){props ->
val elementRef = useRef<Element>(null)
useEffect(props.plot, elementRef) {
val element = elementRef.current as? HTMLElement ?: error("Plotly element not found")
props.plot?.let { element.plot(it)}
}
styledDiv {
css {
maxWidth = 100.vw
maxHeight = 100.vh
flex(1.0)
}
ref = elementRef
}
}

View File

@ -31,8 +31,8 @@ public actual class PlotlyPlugin : VisionPlugin(), ElementVisionRenderer {
override fun render(element: Element, vision: Vision, meta: Meta) { override fun render(element: Element, vision: Vision, meta: Meta) {
val plot = (vision as? VisionOfPlotly)?.plot ?: error("VisionOfPlotly expected but ${vision::class} found") val plot = (vision as? VisionOfPlotly)?.plot ?: error("VisionOfPlotly expected but ${vision::class} found")
val config = PlotlyConfig.read(meta) val config = PlotlyConfig.read(meta)
println(plot.meta) // println(plot.meta)
println(plot.data[0].toMeta()) // println(plot.data[0].toMeta())
element.plot(plot, config) element.plot(plot, config)
} }