build.gradle.kts

@@ -1,6 +1,7 @@
 plugins {
     id("ru.mipt.npm.gradle.project")
 //    kotlin("multiplatform") version "1.5.30-RC" apply false
+//    kotlin("js") version "1.5.30-RC" apply false
 }
 
 val dataforgeVersion by extra("0.5.1")
@@ -35,6 +36,4 @@ apiValidation {
     ignoredPackages.add("info.laht.threekt")
 }
 
-rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin::class.java) {
+//workaround for https://youtrack.jetbrains.com/issue/KT-48273
-    rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().versions.webpackDevServer.version = "4.0.0-rc.0"
-}

demo/js-playground/build.gradle.kts

@@ -20,8 +20,9 @@ kotlin{
 
 
 dependencies{
-    implementation(project(":visionforge-gdml"))
+    implementation(projects.visionforge.visionforgeGdml)
-    implementation(project(":visionforge-plotly"))
+    implementation(projects.visionforge.visionforgePlotly)
-    implementation(project(":visionforge-threejs"))
+    implementation(projects.visionforge.visionforgeMarkdown)
-    implementation(project(":ui:ring"))
+    implementation(projects.visionforge.visionforgeThreejs)
+    implementation(projects.ui.ring)
 }

demo/js-playground/src/main/kotlin/JsPlaygroundApp.kt

@@ -1,7 +1,4 @@
 import kotlinx.browser.document
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.isActive
-import kotlinx.coroutines.launch
 import kotlinx.css.*
 import react.child
 import react.dom.render
@@ -20,7 +17,6 @@ import space.kscience.visionforge.solid.*
 import space.kscience.visionforge.startApplication
 import styled.css
 import styled.styledDiv
-import kotlin.math.sqrt
 import kotlin.random.Random
 
 fun Trace.appendXYLatest(x: Number, y: Number, history: Int = 400, xErr: Number? = null, yErr: Number? = null) {
@@ -30,7 +26,6 @@ fun Trace.appendXYLatest(x: Number, y: Number, history: Int = 400, xErr: Number?
     yErr?.let { error_y.array = (error_y.array + yErr).takeLast(history) }
 }
 
-
 private class JsPlaygroundApp : Application {
 
     override fun start(state: Map<String, Any>) {
@@ -43,8 +38,6 @@ private class JsPlaygroundApp : Application {
 
         val element = document.getElementById("playground") ?: error("Element with id 'playground' not found on page")
 
-        val bouncingSphereTrace = Trace()
-
         render(element) {
             styledDiv {
                 css {
@@ -55,57 +48,9 @@ private class JsPlaygroundApp : Application {
                 }
                 SmartTabs("gravity") {
                     Tab("gravity") {
-                        styledDiv {
+                        GravityDemo{
-                            css {
+                            attrs {
-                                height = 50.vh
+                                this.context = playgroundContext
-                            }
-                            child(ThreeCanvasWithControls) {
-                                attrs {
-                                    context = playgroundContext
-                                    solid {
-                                        sphere(5.0, "ball") {
-                                            detail = 16
-                                            color("red")
-                                            val h = 100.0
-                                            y = h
-                                            launch {
-                                                val g = 10.0
-                                                val dt = 0.1
-                                                var time = 0.0
-                                                var velocity = 0.0
-                                                while (isActive) {
-                                                    delay(20)
-                                                    time += dt
-                                                    velocity -= g * dt
-                                                    y = y.toDouble() + velocity * dt
-                                                    bouncingSphereTrace.appendXYLatest(time, y)
-                                                    if (y.toDouble() <= 2.5) {
-                                                        //conservation of energy
-                                                        velocity = sqrt(2 * g * h)
-                                                    }
-                                                }
-                                            }
-                                        }
-
-                                        box(200, 5, 200, name = "floor") {
-                                            y = -2.5
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                        styledDiv {
-                            css {
-                                height = 40.vh
-                            }
-
-                            Plotly {
-                                attrs {
-                                    context = playgroundContext
-                                    plot = space.kscience.plotly.Plotly.plot {
-                                        traces(bouncingSphereTrace)
-                                    }
-                                }
                             }
                         }
                     }
@@ -121,7 +66,7 @@ private class JsPlaygroundApp : Application {
                     Tab("spheres") {
                         styledDiv {
                             css {
-                                height = 90.vh
+                                height = 100.vh - 50.pt
                             }
                             child(ThreeCanvasWithControls) {
                                 val random = Random(112233)
@@ -147,7 +92,6 @@ private class JsPlaygroundApp : Application {
                     Tab("plotly") {
                         Plotly {
                             attrs {
-                                context = playgroundContext
                                 plot = space.kscience.plotly.Plotly.plot {
                                     scatter {
                                         x(1, 2, 3)

demo/js-playground/src/main/kotlin/gravityDemo.kt

@@ -0,0 +1,103 @@
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+import kotlinx.coroutines.launch
+import kotlinx.css.*
+import react.RProps
+import react.child
+import react.functionalComponent
+import space.kscience.dataforge.context.Context
+import space.kscience.plotly.models.Trace
+import space.kscience.visionforge.markup.VisionOfMarkup
+import space.kscience.visionforge.react.flexRow
+import space.kscience.visionforge.ring.ThreeCanvasWithControls
+import space.kscience.visionforge.ring.solid
+import space.kscience.visionforge.solid.*
+import styled.css
+import styled.styledDiv
+import kotlin.math.sqrt
+
+external interface DemoProps : RProps {
+    var context: Context
+}
+
+val GravityDemo = functionalComponent<DemoProps> { props ->
+    val velocityTrace = Trace{
+        name = "velocity"
+    }
+    val energyTrace = Trace{
+        name = "energy"
+    }
+    val markup = VisionOfMarkup()
+
+    styledDiv {
+        css {
+            height = 100.vh - 50.pt
+        }
+        styledDiv {
+            css {
+                height = 50.vh
+            }
+            child(ThreeCanvasWithControls) {
+                attrs {
+                    context = props.context
+                    solid {
+                        sphere(5.0, "ball") {
+                            detail = 16
+                            color("red")
+                            val h = 100.0
+                            y = h
+                            context.launch {
+                                val g = 10.0
+                                val dt = 0.1
+                                var time = 0.0
+                                var velocity = 0.0
+                                while (isActive) {
+                                    delay(20)
+                                    time += dt
+                                    velocity -= g * dt
+                                    val energy = g * y.toDouble() + velocity * velocity / 2
+                                    y = y.toDouble() + velocity * dt
+
+                                    velocityTrace.appendXYLatest(time, y)
+                                    energyTrace.appendXYLatest(time, energy)
+
+                                    if (y.toDouble() <= 2.5) {
+                                        //conservation of energy
+                                        velocity = sqrt(2 * g * h)
+                                    }
+
+                                    markup.content = """
+                                        ## Bouncing sphere parameters
+                                        
+                                        **velocity** = $velocity
+                                        
+                                        **energy** = $energy
+                                    """.trimIndent()
+                                }
+                            }
+                        }
+
+                        box(200, 5, 200, name = "floor") {
+                            y = -2.5
+                        }
+                    }
+                }
+            }
+        }
+        flexRow {
+            css {
+                alignContent = Align.stretch
+                alignItems = Align.stretch
+                height = 50.vh - 50.pt
+            }
+            plotly {
+                traces(velocityTrace)
+            }
+            Markup {
+                attrs {
+                    this.markup = markup
+                }
+            }
+        }
+    }
+}

demo/js-playground/src/main/kotlin/markupComponent.kt

@@ -0,0 +1,56 @@
+import kotlinx.css.*
+import kotlinx.css.properties.border
+import kotlinx.dom.clear
+import kotlinx.html.dom.append
+import org.intellij.markdown.flavours.commonmark.CommonMarkFlavourDescriptor
+import org.intellij.markdown.flavours.gfm.GFMFlavourDescriptor
+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.visionforge.markup.VisionOfMarkup
+import space.kscience.visionforge.markup.markdown
+import space.kscience.visionforge.useProperty
+import styled.css
+import styled.styledDiv
+
+external interface MarkupProps : RProps {
+    var markup: VisionOfMarkup?
+}
+
+val Markup = functionalComponent<MarkupProps>("Markup") { props ->
+    val elementRef = useRef<Element>(null)
+
+    useEffect(props.markup, elementRef) {
+        val element = elementRef.current as? HTMLElement ?: error("Markup element not found")
+        props.markup?.let { vision ->
+            val flavour = when (vision.format) {
+                VisionOfMarkup.COMMONMARK_FORMAT -> CommonMarkFlavourDescriptor()
+                VisionOfMarkup.GFM_FORMAT -> GFMFlavourDescriptor()
+                //TODO add new formats via plugins
+                else -> error("Format ${vision.format} not recognized")
+            }
+            vision.useProperty(VisionOfMarkup::content) { content ->
+                element.clear()
+                element.append {
+                    markdown(flavour) { content ?: "" }
+                }
+            }
+        }
+    }
+
+    styledDiv {
+        css {
+            width = 100.pct
+            height = 100.pct
+            border(2.pt, BorderStyle.solid, Color.blue)
+            padding(left = 8.pt)
+            backgroundColor = Color.white
+            flex(1.0)
+            zIndex = 10000
+        }
+        ref = elementRef
+    }
+}

demo/js-playground/src/main/kotlin/plotlyComponent.kt

@@ -1,34 +1,44 @@
-import kotlinx.css.flex
+import kotlinx.css.*
+import kotlinx.css.properties.border
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
-import react.RProps
+import react.*
-import react.functionalComponent
-import react.useEffect
-import react.useRef
-import space.kscience.dataforge.context.Context
 import space.kscience.plotly.Plot
+import space.kscience.plotly.PlotlyConfig
 import space.kscience.plotly.plot
 import styled.css
 import styled.styledDiv
 
-external interface PlotlyProps: RProps{
+external interface PlotlyProps : RProps {
-    var context: Context
     var plot: Plot?
 }
 
 
-val Plotly = functionalComponent<PlotlyProps>("Plotly"){props ->
+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)}
+        props.plot?.let {
+            element.plot(it, PlotlyConfig {
+                responsive = true
+            })
+        }
     }
 
     styledDiv {
         css {
+            width = 100.pct
+            height = 100.pct
+            border(2.pt, BorderStyle.solid, Color.blue)
             flex(1.0)
         }
         ref = elementRef
     }
 }
+
+fun RBuilder.plotly(plotbuilder: Plot.() -> Unit) = Plotly {
+    attrs {
+        this.plot = Plot().apply(plotbuilder)
+    }
+}

demo/playground/build.gradle.kts

@@ -51,24 +51,24 @@ kotlin {
     sourceSets {
         val commonMain by getting {
             dependencies {
-                api(project(":visionforge-solid"))
+                implementation(project(":visionforge-solid"))
-                api(project(":visionforge-gdml"))
+                implementation(project(":visionforge-gdml"))
-                api(project(":visionforge-plotly"))
+                implementation(project(":visionforge-plotly"))
+                implementation(projects.visionforge.visionforgeMarkdown)
             }
         }
 
         val jsMain by getting{
             dependencies {
                 implementation(project(":ui:ring"))
-                api(project(":visionforge-threejs"))
+                implementation(project(":visionforge-threejs"))
             }
         }
 
         val jvmMain by getting{
             dependencies {
-                api(project(":visionforge-server"))
+                implementation(project(":visionforge-server"))
-                api(project(":visionforge-markdown"))
+                implementation("ch.qos.logback:logback-classic:1.2.3")
-                api("ch.qos.logback:logback-classic:1.2.3")
                 implementation("com.github.Ricky12Awesome:json-schema-serialization:0.6.6")
             }
         }

demo/playground/src/jsMain/kotlin/playgroundMain.kt

@@ -1,10 +1,12 @@
 import space.kscience.dataforge.misc.DFExperimental
+import space.kscience.visionforge.markup.MarkupPlugin
 import space.kscience.visionforge.plotly.PlotlyPlugin
 import space.kscience.visionforge.ring.ThreeWithControlsPlugin
 import space.kscience.visionforge.runVisionClient
 
 @DFExperimental
 fun main() = runVisionClient {
-    plugin(PlotlyPlugin)
     plugin(ThreeWithControlsPlugin)
+    plugin(PlotlyPlugin)
+    plugin(MarkupPlugin)
 }

docs/inheritance.md

@@ -65,4 +65,6 @@ Properties, which can or cannot be inherited, are these:
   ![](../docs/images/inheritance-2-2-5.png)
 
 * `rotation` - rotation of an element. Here, it is set by `x` value. It is inheritable and unable to be changed in `children` elements.
-* `position` - position of an element, cannot be inherited.
+
+* `position` — position of an element, cannot be inherited.
+

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

settings.gradle.kts

@@ -18,6 +18,7 @@ pluginManagement {
 
 rootProject.name = "visionforge"
 
+enableFeaturePreview("TYPESAFE_PROJECT_ACCESSORS")
 
 include(
 //    ":ui",

ui/react/src/main/kotlin/space/kscience/visionforge/react/ThreeCanvasComponent.kt

@@ -50,7 +50,8 @@ public val ThreeCanvasComponent: FunctionComponent<ThreeCanvasProps> = functiona
         css {
             maxWidth = 100.vw
             maxHeight = 100.vh
-            flex(1.0)
+            width = 100.pct
+            height = 100.pct
         }
         ref = elementRef
     }

ui/ring/build.gradle.kts

@@ -17,13 +17,8 @@ kotlin{
 
 dependencies{
     api(project(":ui:react"))
-    //api("ru.mipt.npm:ring-ui:0.1.0")
     api("org.jetbrains.kotlin-wrappers:kotlin-ring-ui")
 
-    implementation(npm("@jetbrains/icons", "3.14.1"))
-    implementation(npm("@jetbrains/ring-ui", "4.0.7"))
     implementation(npm("core-js","3.12.1"))
     implementation(npm("file-saver", "2.0.2"))
-//    compileOnly(npm("url-loader","4.1.1"))
-//    compileOnly(npm("postcss-loader","5.2.0"))
 }

ui/ring/src/main/kotlin/space.kscience.visionforge.ring/ThreeViewWithControls.kt

@@ -112,7 +112,7 @@ public val ThreeCanvasWithControls: FunctionComponent<ThreeCanvasWithControlsPro
         flexRow {
             css {
                 height = 100.pct
-                flex(1.0, 1.0, FlexBasis.auto)
+                width = 100.pct
                 flexWrap = FlexWrap.wrap
                 alignItems = Align.stretch
                 alignContent = Align.stretch
@@ -120,6 +120,7 @@ public val ThreeCanvasWithControls: FunctionComponent<ThreeCanvasWithControlsPro
 
             flexColumn {
                 css {
+                    height = 100.pct
                     minWidth = 600.px
                     flex(10.0, 1.0, FlexBasis("600px"))
                     position = Position.relative

visionforge-fx/build.gradle.kts

@@ -11,15 +11,11 @@ kscience{
 
 dependencies {
     api(project(":visionforge-solid"))
-
     api("no.tornado:tornadofx:1.7.20")
-
     api("org.fxyz3d:fxyz3d:0.5.4") {
         exclude(module = "slf4j-simple")
     }
-
     api("org.jetbrains.kotlinx:kotlinx-coroutines-javafx:${ru.mipt.npm.gradle.KScienceVersions.coroutinesVersion}")
-
     implementation("eu.mihosoft.vrl.jcsg:jcsg:0.5.7") {
         exclude(module = "slf4j-simple")
     }

visionforge-markdown/src/commonMain/kotlin/space/kscience/visionforge/markup/VisionOfMarkup.kt

@@ -32,6 +32,11 @@ public class VisionOfMarkup(
     }
 }
 
+//language = markdown
+public fun VisionOfMarkup.content(text: () -> String) {
+    content = text()
+}
+
 internal val markupSerializersModule = SerializersModule {
     polymorphic(Vision::class) {
         subclass(VisionOfMarkup.serializer())

visionforge-markdown/src/jsMain/kotlin/space/kscience/visionforge/markup/MarkupPlugin.kt

@@ -39,7 +39,6 @@ public class MarkupPlugin : VisionPlugin(), ElementVisionRenderer {
             div.clear()
             div.append {
                 markdown(flavour) { vision.content ?: "" }
-
             }
         }
         element.append(div)

visionforge-threejs/src/main/kotlin/space/kscience/visionforge/solid/three/ThreeCanvas.kt

@@ -2,7 +2,6 @@ package space.kscience.visionforge.solid.three
 
 import info.laht.threekt.WebGLRenderer
 import info.laht.threekt.cameras.PerspectiveCamera
-import info.laht.threekt.core.BufferGeometry
 import info.laht.threekt.core.Object3D
 import info.laht.threekt.core.Raycaster
 import info.laht.threekt.external.controls.OrbitControls
@@ -276,7 +275,7 @@ public class ThreeCanvas(
         if (this is Mesh) {
             if (highlight) {
                 val edges = LineSegments(
-                    EdgesGeometry(geometry as BufferGeometry),
+                    EdgesGeometry(geometry),
                     material
                 ).apply {
                     name = edgesName