Update js examples
This commit is contained in:
parent
d916dde6a7
commit
60cec91ab8
@ -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")
|
||||||
|
@ -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,24 +26,65 @@ 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 {
|
||||||
padding(0.pt)
|
padding(0.pt)
|
||||||
margin(0.pt)
|
margin(0.pt)
|
||||||
height = 100.vh
|
height = 100.vh
|
||||||
width = 100.vw
|
width = 100.vw
|
||||||
}
|
}
|
||||||
child(ThreeCanvasWithControls) {
|
SmartTabs("D0") {
|
||||||
attrs {
|
Tab("D0") {
|
||||||
context = playgroundContext
|
child(ThreeCanvasWithControls) {
|
||||||
solid = visionOfD0
|
attrs {
|
||||||
|
context = playgroundContext
|
||||||
|
solid = visionOfD0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
36
demo/js-playground/src/main/kotlin/plotlyComponent.kt
Normal file
36
demo/js-playground/src/main/kotlin/plotlyComponent.kt
Normal 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
|
||||||
|
}
|
||||||
|
}
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user