Merge branch 'dev' into feature/compose

# Conflicts:
#	build.gradle.kts
#	demo/js-playground/src/jsMain/kotlin/JsPlaygroundApp.kt
#	demo/js-playground/src/jsMain/kotlin/gravityDemo.kt
#	demo/js-playground/src/jsMain/kotlin/markupComponent.kt
#	visionforge-core/api/visionforge-core.api
#	visionforge-threejs/src/jsMain/kotlin/space/kscience/visionforge/solid/three/ThreePlugin.kt

CHANGELOG.md

@@ -1,13 +1,32 @@
 # Changelog
 
-## [Unreleased]
+## Unreleased
+
 ### Added
+
+### Changed
+- **Breaking API** Move vision cache to upper level for renderers to avoid re-creating visions for page reload.
+- **Breaking API** Forms refactor
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+### Security
+
+## 0.3.0 - 2023-12-23
+
+### Added
+
 - Context receivers flag
 - MeshLine for thick lines
 - Custom client-side events and thier processing in VisionServer
 - Control/input visions
 
 ### Changed
+
 - Color accessor property is now `colorProperty`. Color uses non-nullable `invoke` instead of `set`. 
 - API update for server and pages
 - Edges moved to solids module for easier construction
@@ -18,17 +37,14 @@
 - Naming of Canvas3D options.
 - Lights are added to the scene instead of 3D options.
 
-### Deprecated
-
-### Removed
-
 ### Fixed
+
 - Jupyter integration for IDEA and Jupyter lab.
 
-### Security
+## 0.2.0
 
-## [0.2.0]
 ### Added
+
 - Server module
 - Change collector
 - Customizable accessors for colors
@@ -39,8 +55,8 @@
 - Markdown module
 - Tables module
 
-
 ### Changed
+
 - Vision does not implement ItemProvider anymore. Property changes are done via `getProperty`/`setProperty` and `property` delegate.
 - Point3D and Point2D are made separate classes instead of expect/actual (to split up different engines.
 - JavaFX support moved to a separate module
@@ -55,16 +71,10 @@
 - Property listeners are not triggered if there are no changes.
 - Feedback websocket connection in the client.
 
-
-### Deprecated
-
 ### Removed
+
 - Primary modules dependencies on UI
 
-
 ### Fixed
+
 - Version conflicts
-
-
-### Security
-

demo/playground/src/jvmMain/kotlin/formServer.kt

@@ -10,7 +10,7 @@ import space.kscience.dataforge.context.request
 import space.kscience.visionforge.VisionManager
 import space.kscience.visionforge.html.VisionOfHtmlForm
 import space.kscience.visionforge.html.VisionPage
-import space.kscience.visionforge.html.bindForm
+import space.kscience.visionforge.html.visionOfForm
 import space.kscience.visionforge.onPropertyChange
 import space.kscience.visionforge.server.close
 import space.kscience.visionforge.server.openInBrowser
@@ -36,7 +36,7 @@ fun main() {
             visionManager,
             VisionPage.scriptHeader("js/visionforge-playground.js"),
         ) {
-            bindForm(form) {
+            visionOfForm(form) {
                 label {
                     htmlFor = "fname"
                     +"First name:"
@@ -67,8 +67,8 @@ fun main() {
                     value = "Submit"
                 }
             }
-            println(form.values)
             vision(form)
+            println(form.values)
         }
 
     }.start(false)

demo/sat-demo/build.gradle.kts

@@ -12,7 +12,9 @@ kscience {
 //    useSerialization {
 //        json()
 //    }
-    jvm()
+    jvm{
+        withJava()
+    }
     jvmMain{
         implementation("io.ktor:ktor-server-cio")
         implementation(projects.visionforgeThreejs.visionforgeThreejsServer)

docs/tutorials/tutorial-event-display.md

@@ -0,0 +1,416 @@
+# Event Display Tutorial
+
+In this tutorial, we will explore properties of Visions and build a simple front-end application. You may find a complete project [here](https://git.sciprog.center/teldufalsari/visionforge-event-display-demo).
+
+__NOTE:__ You will need Kotlin Multiplatform 1.9.0 or higher to complete this tutorial!
+
+### Starting the Project
+
+We will use Idea's default project template for Kotlin Multiplatform. To initialize the project, go to *File -> New -> Project...*, Then choose *Full-Stack Web Application* project template and
+*Kotlin Gradle* build system. Then select *Next -> Finish*. You will end up with a project with some sample code.
+
+To check that everything is working correctly, run *application -> run* Gradle target. You should see a greeting page when you open `http://localhost:8080` in a web browser.
+
+We will use Kotlin React as our main UI library and Ktor Netty both as a web server. Our event display frontend and server will reside in `jsMain` and `jvmMain` directories respectively.
+Before we start, we have to load necessary dependencies:
+
+* Add SciProgCentre maven repo in `build.gradle.kts` file:
+```kotlin
+repositories {
+    mavenCentral()
+    maven("https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven")
+
+    // Add either the line below:
+    maven("https://repo.kotlin.link")
+
+    // Or this line:
+    maven("https://maven.sciprog.center/kscience")
+
+}
+```
+
+* Add `visionforge-threejs-server` into the list of JS dependencies of your project:
+```kotlin
+kotlin {
+    sourceSets {
+        val jsMain by getting {
+            dependencies {
+                implementation("space.kscience:visionforge-threejs-server:0.3.0-dev-14")
+            }
+        }
+    }
+}
+```
+
+Refresh build model in the Idea to make sure the dependencies are successfully resolved.
+
+__NOTE:__ In previous versions of VisionForge, some imports may be broken. If these dependencies fail to resolve, replace `space.kscience:visionforge-threejs-server:0.3.0-dev-14` with `space.kscience:visionforge-threejs:0.3.0-dev-14`. The resulting bundle will lack a React component used in the tutorial (see "Managing Visions"). You may copy and paste it directly from either [VisionForge](https://git.sciprog.center/kscience/visionforge/src/branch/master/ui/react/src/main/kotlin/space/kscience/visionforge/react/ThreeCanvasComponent.kt) or the [tutorial repo](https://git.sciprog.center/teldufalsari/visionforge-event-display-demo/src/branch/main/src/jsMain/kotlin/canvas/ThreeCanvasComponent.kt), or even come up with a better implementation if your own.
+
+### Setting up Page Markup
+
+We need to create a page layout and set up Netty to serve our page to clients. There is nothing special related to VisionForge, so feel free to copy and paste the code below.
+
+File: `src/jvmMain/.../Server.kt`
+```kotlin
+// ... imports go here
+
+fun HTML.index() {
+    head {
+        // Compatibility headers
+        meta { charset = "UTF-8" }
+        meta {
+            name = "viewport"
+            content = "width=device-width, initial-scale=1.0"
+        }
+        meta  {
+            httpEquiv = "X-UA-Compatible"
+            content = "IE=edge"
+        }
+        title("VF Demo")
+    }
+    // Link to our react script
+    body {
+        script(src = "/static/vf-demo.js") {}
+    }
+}
+
+fun main() {
+    // Seting up Netty
+    embeddedServer(Netty, port = 8080, host = "127.0.0.1") {
+        routing {
+            get("/") {
+                call.respondHtml(HttpStatusCode.OK, HTML::index)
+            }
+            static("/static") {
+                resources()
+            }
+        }
+    }.start(wait = true)
+}
+```
+
+File: `src/jsMain/.../Client.kt`
+```kotlin
+
+fun main() {
+    val container = document.createElement("div")
+    document.body!!.appendChild(container)
+
+    val eventDisplay = EventDisplay.create {}
+    createRoot(container).render(eventDisplay)
+}
+```
+
+File: `src/jsMain/.../Display.kt`
+```kotlin
+// All markup goes here:
+val EventDisplay = FC<Props> {
+    // Global CSS rules
+    Global {
+        styles {
+            "html,\n" +
+            "body" {
+                height = 100.vh
+                width = 100.vw
+                margin = 0.px
+            }
+            "body > div" {
+                height = 100.vh
+                width = 100.vw
+                display = Display.flex
+                flexDirection = FlexDirection.column
+                justifyContent = JustifyContent.start
+                alignItems = AlignItems.center
+            }
+            "*,\n" +
+            "*:before,\n" +
+            "*:after" {
+                boxSizing = BoxSizing.borderBox
+            }
+        }
+    }
+
+    div {
+        css {
+            height = 100.pct
+            width = 100.pct
+            display = Display.flex
+            flexDirection = FlexDirection.column
+            alignItems = AlignItems.center
+        }
+        div {
+            css {
+                width = 100.pct
+                display = Display.flex
+                flexDirection = FlexDirection.row
+                alignItems = AlignItems.center
+                justifyContent = JustifyContent.center
+
+            }
+            input {
+                css {
+                    margin = 5.px
+                    padding = 5.px
+                }
+                type = InputType.button
+                value = "Update Events"
+            }
+            input {
+                css {
+                    margin = 5.px
+                    padding = 5.px
+                }
+                type = InputType.button
+                value = "Update Geometry"
+            }
+        }
+        div {
+            css {
+                width = 98.pct
+                height = 1.pct
+                margin = 5.px
+                display = Display.flex
+                flexGrow = number(1.0)
+                justifyContent = JustifyContent.center
+                alignItems = AlignItems.center
+                backgroundColor = Color("#b3b3b3")
+            }
+
+        }
+    }
+}
+```
+
+After setting everything up, you should see a gray rectangle with two buttons above it when opening `localhost:8080`.
+
+### Managing Visions
+
+We are approaching the main part of the tutorial - the place where we will create a working demo. In particle accelerator experiments, event displays are employed to visualise particle collision events. Essentially, it requires drawing a detector setup and visual interpretation of events: tracks, detector hits etc. Usually, a number of events share a common detector setup (e.g. if these events occured in a single experiment run). It makes sense to update and re-render only event information, while keeping detector geometry constant between updates.
+
+Visions (namely, the `SolidGroup` class) allow us to create an object tree for our displayed event. `SolidGroup` can hold other Visions as its child nodes, access these nodes by names and update/delete them. We will use this property to update our event display efficiently.
+
+To display Visions as actual 3D object, we will use `ThreePlugin` that renders Visions using *three.js* library. The plugin allows us to create a Three.js representation of a vision that will observe changes of its correspondent Vision. This way we can update only Visions without diving deep into three.js stuff. Using observable Visions is also efficient: Three.js representations are not generated from scratch after each Vision update but are modified too.
+
+First, let's simulate data load operations:
+* Add state variables to our `EventDisplay` React component. These variables will be treated as data loaded from a remote server. In real life, these may be JSON string with event data:
+```kotlin
+val EventDisplay = FC<Props> {
+    // ...
+
+    var eventData: kotlin.Float? by useState(null)
+    var geometryData: kotlin.Float? by useState(null)
+
+    // ...
+}
+```
+* Write two simple functions that will convert data to a Vision. In this case, we will simply parameters of solids like color of size; in real life, these functions will usually take raw data and convert it into Visions.
+```kotlin
+fun generateEvents(radius: Float): SolidGroup {
+    val count = Random.nextInt(10, 20)
+    return SolidGroup {
+        repeat(count) {
+            sphere(radius) {
+                x = 5.0 * (Random.nextFloat() - 0.5)
+                y = 2.0 * (Random.nextFloat() - 0.5)
+                z = 2.0 * (Random.nextFloat() - 0.5)
+                color(Colors.red)
+            }
+        }
+    }
+}
+
+fun generateGeometry(distance: Float): SolidGroup {
+    return SolidGroup {
+        box(10, 3, 3) {
+            x = 0.0
+            y = -distance
+            z = 0.0
+            color(Colors.gray)
+        }
+        box(10, 3, 3) {
+            x = 0.0
+            y = distance
+            z = 0.0
+            color(Colors.gray)
+        }
+    }
+}
+```
+* Then, let's create our main Vision and add a static light source:
+```kotlin
+val EventDisplay = FC<Props> {
+    // ...
+
+    val containedVision: SolidGroup by useState(SolidGroup {
+        ambientLight {
+            color(Colors.white)
+        }
+    })
+
+    // ...
+}
+```
+
+* A `Context` object is required to hold plugins like `ThreePlugin`. It is also necessary to make Visions observable: we have to root our main Vision in the context. Declare a global `Context` in the same file with `EventDisplay` component:
+```kotlin
+val viewContext = Context {
+    plugin(Solids)
+    plugin(ThreePlugin)
+}
+
+```
+
+* Import `ThreeCanvasComponent` from VisionForge. This is a React component that handles all display work. It creates three.js canvas, attaches it to its own parent element and creates and draws `Object3D` on the canvas. We will attach this component to a
+separate React component. Note order for Visions to update their Three.js representations, these Visions need to be rooted in a `Context`. This way Visions will be observed for changes, and any such change will trigger an update of the corresponding Three.js object.
+```kotlin
+external interface EventViewProps: Props {
+    var displayedVision: Solid?
+    var context: Context
+}
+
+val EventView = FC<EventViewProps> { props ->
+    ThreeCanvasComponent {
+        solid = props.displayedVision
+        context = props.context
+    }
+    // Make displayedVision observed:
+    useEffect(props.displayedVision) {
+        props.displayedVision?.setAsRoot(props.context.visionManager)
+    }
+}
+```
+
+__NOTE:__ If you had problems with dependency resolution, `ThreeCanvasComponent` may missing from your import scope. You may find a compatible implementation [here](https://git.sciprog.center/teldufalsari/visionforge-event-display-demo/src/branch/main/src/jsMain/kotlin/canvas/ThreeCanvasComponent.kt).
+
+* Finally, we need to attach EventView to our main component and connect raw data updates to Vision updates using React hooks:
+```kotlin
+// ...
+
+// Names used as keys to access and update Visions
+// Refer to DataForge documentation for more details
+val EVENTS_NAME = "DEMO_EVENTS".parseAsName(false)
+val GEOMETRY_NAME = "DEMO_GEOMETRY".parseAsName(false)
+
+// ...
+
+val EventDisplay = FC<Props> {
+    // ...
+
+    useEffect(eventData) {
+        eventData?.let {
+            containedVision.setChild(EVENTS_NAME, generateEvents(it))
+        }
+    }
+    useEffect(geometryData) {
+        geometryData?.let {
+            containedVision.setChild(GEOMETRY_NAME, generateGeometry(it))
+        }
+    }
+    // ...
+
+    div {
+        // ...
+
+        div {
+            css {
+                width = 98.pct
+                height = 1.pct
+                flexGrow = number(1.0)
+                margin = 5.px
+                display = Display.flex
+                justifyContent = JustifyContent.center
+                alignItems = AlignItems.center
+            }
+            // Replace the gray rectangle with an EventView:
+            EventView {
+                displayedVision = containedVision
+                context = viewContext
+            }
+        }
+    }
+// ...
+}
+```
+
+When we press either of the buttons, corresponding raw data changes. This update triggers `UseEffect` hook, which generates new event or geometry data and replaces the old data in the main Vision. Three.js representation is then updated to match our new Vision, so that changes are visible on the canvas.
+
+Recompile the project and go on `http://localhost:8080`. See how the displayed scene changes with each click: for example, when you update geometry, only the distance between "magnets" varies, but spheres remain intact.
+
+### Clearing the Scene
+
+We can erase children Visions from the scene completely. To do so, we cat pass `null` to the function `setChild` as `child` argument. Add these lines to the hooks that update Visions to remove the corresponding Vision from our diplayed `SolidGroup` when raw data changes to `null`:
+```kotlin
+useEffect(eventData) {
+    // ...
+
+    if (eventData == null) {
+        containedVision.setChild(EVENT_NAME, null)
+    }
+}
+useEffect(geometryData) {
+    // ...
+
+    if (geometryData == null) {
+        containedVision.setChild(GEOMETRY_NAME, null)
+    }
+}
+```
+To test how this works, let's create an erase button that will completely clear the scene:
+```kotlin
+val EventDisplay = FC<Props> {
+    // ...
+
+    div {
+        // ...
+
+        input {
+            css {
+                margin = 5.px
+                padding = 5.px
+                backgroundColor = NamedColor.lightcoral
+                color = NamedColor.white
+            }
+            type = InputType.button
+            value = "Clear Scene"
+            onClick = {
+                geometryData = null
+                eventData = null
+            }
+        }
+    }
+
+    // ...
+}
+```
+![Picture of an event display with a red button with a caption "Clear Scene" added to the two previous buttons](../images/event-display-final.png "Scene clearing function")
+
+### Making Selection Fine-Grained
+
+You may feel annoyed by how selection works in our demo. That's right, selecting the whole detector or the entire event array is not that useful. This is due to the fact that VisionForge selects object based on names. We used names to distinguish SolidGroups, but in fact not only groups but every single Vision can have a name. But when we were randomly generating Vision, we did not use any names, did we? Right, Vision can be nameless, in which case they are treated as a monolithic object together with their parent. So it should be clear now that when we were selecting a single rectangle, we were in fact selecting the whole pair of rectangles and the other one went lit up as well.
+
+Fortunately, every `Solid` constructor takes a `name` parameter after essential parameters, so it should be easy to fix it. Go to the generator functions and add the change construction invocations to the following:
+```kotlin
+fun generateGeometry(distance: Float): SolidGroup {
+    return SolidGroup {
+        box(10, 3, 3, "Magnet1") {
+            // ...
+        }
+        box(10, 3, 3, "Magnet2") {
+            // ...
+        }
+    }
+}
+```
+For the events part, we will use the index in a loop as a name:
+```kotlin
+fun generateEvents(radius: Float): SolidGroup {
+    // ...
+    repeat(count) {
+        sphere(radius, it.toString()) {
+            // ...
+}
+```
+
+After you update the build, it should be possible to select only one sphere or rectangle:
+
+![Picture of an event display with only one sphere between the magnets selected](../images/event-display-selection.png "Selection demonstration")

visionforge-core/src/commonMain/kotlin/space/kscience/visionforge/ControlVision.kt

@@ -39,7 +39,8 @@ public interface ControlVision : Vision {
 @Serializable
 @SerialName("control.click")
 public class VisionClickEvent(override val meta: Meta) : VisionControlEvent() {
-    public val payload: Meta? by meta.node()
+    public val payload: Meta get() = meta[::payload.name] ?: Meta.EMPTY
+
     public val name: Name? get() = meta["name"].string?.parseAsName()
 
     override fun toString(): String = meta.toString()

visionforge-core/src/commonMain/kotlin/space/kscience/visionforge/VisionContainer.kt

@@ -10,10 +10,17 @@ import space.kscience.visionforge.VisionChildren.Companion.STATIC_TOKEN_BODY
 @DslMarker
 public annotation class VisionBuilder
 
+/**
+ * A container interface with read access to its content
+ * using DataForge [Name] objects as keys.
+ */
 public interface VisionContainer<out V : Vision> {
     public fun getChild(name: Name): V?
 }
 
+/**
+ * A container interface with write/replace/delete access to its content.
+ */
 public interface MutableVisionContainer<in V : Vision> {
     //TODO add documentation
     public fun setChild(name: Name?, child: V?)
@@ -61,12 +68,22 @@ public inline fun VisionChildren.forEach(block: (NameToken, Vision) -> Unit) {
     keys.forEach { block(it, get(it)!!) }
 }
 
+/**
+ * A serializable representation of [Vision] children container
+ * with the ability to modify the container content.
+ */
 public interface MutableVisionChildren : VisionChildren, MutableVisionContainer<Vision> {
 
     public override val parent: MutableVisionGroup
 
     public operator fun set(token: NameToken, value: Vision?)
 
+    /**
+     * Set child [Vision] by name.
+     * @param name child name. Pass null to add a static child. Note that static children cannot
+     *  be removed, replaced or accessed by name by other means.
+     * @param child new child value. Pass null to delete the child.
+     */
     override fun setChild(name: Name?, child: Vision?) {
         when {
             name == null -> {

visionforge-core/src/commonMain/kotlin/space/kscience/visionforge/html/HtmlVisionRenderer.kt

@@ -8,19 +8,23 @@ import space.kscience.dataforge.names.asName
 import space.kscience.visionforge.Vision
 import space.kscience.visionforge.VisionManager
 
-public fun interface HtmlVisionFragment{
+public fun interface HtmlVisionFragment {
     public fun VisionTagConsumer<*>.append()
 }
 
 public fun HtmlVisionFragment.appendTo(consumer: VisionTagConsumer<*>): Unit = consumer.append()
 
+public data class VisionDisplay(val visionManager: VisionManager, val vision: Vision, val meta: Meta)
+
 /**
  * Render a fragment in the given consumer and return a map of extracted visions
- * @param context a context used to create a vision fragment
+ * @param visionManager a context plugin used to create a vision fragment
  * @param embedData embed Vision initial state in the HTML
  * @param fetchDataUrl fetch data after first render from given url
  * @param updatesUrl receive push updates from the server at given url
  * @param idPrefix a prefix to be used before vision ids
+ * @param displayCache external cache for Vision displays. It is required to avoid re-creating visions on page update
+ * @param fragment the fragment to render
  */
 public fun TagConsumer<*>.visionFragment(
     visionManager: VisionManager,
@@ -28,39 +32,31 @@ public fun TagConsumer<*>.visionFragment(
     fetchDataUrl: String? = null,
     updatesUrl: String? = null,
     idPrefix: String? = null,
-    onVisionRendered: (Name, Vision) -> Unit = { _, _ -> },
+    displayCache: MutableMap<Name, VisionDisplay> = mutableMapOf(),
     fragment: HtmlVisionFragment,
 ) {
 
-    val collector: MutableMap<Name, Pair<VisionOutput, Vision>> = mutableMapOf()
-
     val consumer = object : VisionTagConsumer<Any?>(this@visionFragment, visionManager, idPrefix) {
 
         override fun <T> TagConsumer<T>.vision(name: Name?, buildOutput: VisionOutput.() -> Vision): T {
             //Avoid re-creating cached visions
             val actualName = name ?: NameToken(
                 DEFAULT_VISION_NAME,
-                buildOutput.hashCode().toUInt().toString()
+                buildOutput.hashCode().toString(16)
             ).asName()
 
-            val (output, vision) = collector.getOrPut(actualName) {
+            val display = displayCache.getOrPut(actualName) {
                 val output = VisionOutput(context, actualName)
                 val vision = output.buildOutput()
-                onVisionRendered(actualName, vision)
-                output to vision
+                VisionDisplay(output.visionManager, vision, output.meta)
             }
 
-            return addVision(actualName, output.visionManager, vision, output.meta)
+            return addVision(actualName, display.visionManager, display.vision, display.meta)
         }
 
         override fun DIV.renderVision(manager: VisionManager, name: Name, vision: Vision, outputMeta: Meta) {
 
-            val (_, actualVision) = collector.getOrPut(name) {
-                val output = VisionOutput(context, name)
-                onVisionRendered(name, vision)
-                output to vision
-            }
-
+            displayCache[name] = VisionDisplay(manager, vision, outputMeta)
 
             // Toggle update mode
             updatesUrl?.let {
@@ -76,7 +72,7 @@ public fun TagConsumer<*>.visionFragment(
                     type = "text/json"
                     attributes["class"] = OUTPUT_DATA_CLASS
                     unsafe {
-                        +"\n${manager.encodeToString(actualVision)}\n"
+                        +"\n${manager.encodeToString(vision)}\n"
                     }
                 }
             }
@@ -91,8 +87,8 @@ public fun FlowContent.visionFragment(
     embedData: Boolean = true,
     fetchDataUrl: String? = null,
     updatesUrl: String? = null,
-    onVisionRendered: (Name, Vision) -> Unit = { _, _ -> },
     idPrefix: String? = null,
+    displayCache: MutableMap<Name, VisionDisplay> = mutableMapOf(),
     fragment: HtmlVisionFragment,
 ): Unit = consumer.visionFragment(
     visionManager = visionManager,
@@ -100,6 +96,6 @@ public fun FlowContent.visionFragment(
     fetchDataUrl = fetchDataUrl,
     updatesUrl = updatesUrl,
     idPrefix = idPrefix,
-    onVisionRendered = onVisionRendered,
+    displayCache = displayCache,
     fragment = fragment
 )

visionforge-core/src/commonMain/kotlin/space/kscience/visionforge/html/VisionOfHtmlForm.kt

@@ -1,15 +1,15 @@
 package space.kscience.visionforge.html
 
-import kotlinx.html.FORM
-import kotlinx.html.TagConsumer
-import kotlinx.html.form
-import kotlinx.html.id
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Job
+import kotlinx.html.*
 import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
 import space.kscience.dataforge.meta.Meta
 import space.kscience.dataforge.meta.node
 import space.kscience.dataforge.meta.string
 import space.kscience.visionforge.ClickControl
+import space.kscience.visionforge.onClick
 
 /**
  * @param formId an id of the element in rendered DOM, this form is bound to
@@ -18,19 +18,31 @@ import space.kscience.visionforge.ClickControl
 @SerialName("html.form")
 public class VisionOfHtmlForm(
     public val formId: String,
-) : VisionOfHtmlControl() {
+) : VisionOfHtmlControl(), ClickControl {
     public var values: Meta? by properties.node()
 }
 
-public fun <R> TagConsumer<R>.bindForm(
-    visionOfForm: VisionOfHtmlForm,
-    builder: FORM.() -> Unit,
-): R = form {
-    this.id = visionOfForm.formId
-    builder()
+
+/**
+ * Create a [VisionOfHtmlForm] and bind this form to the id
+ */
+@HtmlTagMarker
+public inline fun <T, C : TagConsumer<T>> C.visionOfForm(
+    vision: VisionOfHtmlForm,
+    action: String? = null,
+    encType: FormEncType? = null,
+    method: FormMethod? = null,
+    classes: String? = null,
+    crossinline block: FORM.() -> Unit = {},
+) : T  = form(action, encType, method, classes){
+    this.id = vision.formId
+    block()
 }
 
 
+public fun VisionOfHtmlForm.onSubmit(scope: CoroutineScope, block: (Meta?) -> Unit): Job = onClick(scope) { block(payload) }
+
+
 @Serializable
 @SerialName("html.button")
 public class VisionOfHtmlButton : VisionOfHtmlControl(), ClickControl {

visionforge-core/src/jsMain/kotlin/space/kscience/visionforge/formRenderers.kt

@@ -15,8 +15,10 @@ import space.kscience.dataforge.names.Name
 import space.kscience.visionforge.html.VisionOfHtmlButton
 import space.kscience.visionforge.html.VisionOfHtmlForm
 
-
-internal fun FormData.toMeta(): Meta {
+/**
+ * Convert form data to Meta
+ */
+public fun FormData.toMeta(): Meta {
     @Suppress("UNUSED_VARIABLE") val formData = this
     //val res = js("Object.fromEntries(formData);")
     val `object` = js("{}")
@@ -67,8 +69,10 @@ internal val formVisionRenderer: ElementVisionRenderer =
         form.onsubmit = { event ->
             event.preventDefault()
             val formData = FormData(form).toMeta()
-            client.sendMetaEvent(name, formData)
-            console.info("Sent: ${formData.toMap()}")
+            client.context.launch {
+                client.sendEvent(name, VisionClickEvent(name = name, payload = formData))
+            }
+            console.info("Sent form data: ${formData.toMap()}")
             false
         }
     }

visionforge-jupyter/src/jvmMain/kotlin/VisionForge.kt

@@ -17,9 +17,9 @@ import space.kscience.dataforge.context.info
 import space.kscience.dataforge.context.logger
 import space.kscience.dataforge.meta.*
 import space.kscience.dataforge.names.Name
-import space.kscience.visionforge.Vision
 import space.kscience.visionforge.VisionManager
 import space.kscience.visionforge.html.HtmlVisionFragment
+import space.kscience.visionforge.html.VisionDisplay
 import space.kscience.visionforge.html.visionFragment
 import space.kscience.visionforge.server.VisionRoute
 import space.kscience.visionforge.server.serveVisionData
@@ -142,7 +142,7 @@ public class VisionForge(
                     //server.serveVisionsFromFragment(consumer, "content-${counter++}", fragment)
                     val cellRoute = "content-${counter++}"
 
-                    val collector: MutableMap<Name, Vision> = mutableMapOf()
+                    val cache: MutableMap<Name, VisionDisplay> = mutableMapOf()
 
                     val url = engine.environment.connectors.first().let {
                         url {
@@ -153,13 +153,13 @@ public class VisionForge(
                         }
                     }
 
-                    engine.application.serveVisionData(VisionRoute(cellRoute, visionManager), collector)
+                    engine.application.serveVisionData(VisionRoute(cellRoute, visionManager), cache)
 
                     visionFragment(
                         visionManager,
                         embedData = true,
                         updatesUrl = url,
-                        onVisionRendered = { name, vision -> collector[name] = vision },
+                        displayCache = cache,
                         fragment = fragment
                     )
                 } else {

visionforge-server/src/jvmMain/kotlin/space/kscience/visionforge/server/VisionServer.kt

@@ -1,31 +1,50 @@
 package space.kscience.visionforge.server
 
-import io.ktor.http.*
-import io.ktor.server.application.*
-import io.ktor.server.engine.*
-import io.ktor.server.html.*
-import io.ktor.server.http.content.*
-import io.ktor.server.plugins.*
-import io.ktor.server.plugins.cors.routing.*
-import io.ktor.server.request.*
-import io.ktor.server.response.*
+import io.ktor.http.ContentType
+import io.ktor.http.HttpStatusCode
+import io.ktor.http.URLProtocol
+import io.ktor.http.path
+import io.ktor.server.application.Application
+import io.ktor.server.application.call
+import io.ktor.server.application.install
+import io.ktor.server.application.log
+import io.ktor.server.engine.EngineConnectorConfig
+import io.ktor.server.html.respondHtml
+import io.ktor.server.plugins.cors.routing.CORS
+import io.ktor.server.request.header
+import io.ktor.server.request.host
+import io.ktor.server.request.port
+import io.ktor.server.response.header
+import io.ktor.server.response.respond
+import io.ktor.server.response.respondText
 import io.ktor.server.routing.*
-import io.ktor.server.util.*
-import io.ktor.server.websocket.*
-import io.ktor.util.pipeline.*
-import io.ktor.websocket.*
+import io.ktor.server.util.getOrFail
+import io.ktor.server.util.url
+import io.ktor.server.websocket.WebSockets
+import io.ktor.server.websocket.application
+import io.ktor.server.websocket.webSocket
+import io.ktor.websocket.Frame
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.collect
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
-import kotlinx.html.*
+import kotlinx.html.body
+import kotlinx.html.head
+import kotlinx.html.header
+import kotlinx.html.meta
 import kotlinx.serialization.encodeToString
 import space.kscience.dataforge.context.Context
 import space.kscience.dataforge.context.ContextAware
-import space.kscience.dataforge.meta.*
+import space.kscience.dataforge.meta.Configurable
+import space.kscience.dataforge.meta.ObservableMutableMeta
+import space.kscience.dataforge.meta.enum
+import space.kscience.dataforge.meta.long
 import space.kscience.dataforge.names.Name
-import space.kscience.visionforge.*
+import space.kscience.visionforge.Vision
+import space.kscience.visionforge.VisionEvent
+import space.kscience.visionforge.VisionManager
+import space.kscience.visionforge.flowChanges
 import space.kscience.visionforge.html.*
 import kotlin.time.Duration.Companion.milliseconds
 
@@ -72,7 +91,6 @@ public class VisionRoute(
 
 /**
  * Serve visions in a given [route] without providing a page template.
- * [visions] could be changed during the service.
  *
  * @return a [Flow] of backward events, including vision change events
  */
@@ -137,8 +155,8 @@ public fun Application.serveVisionData(
 
 public fun Application.serveVisionData(
     configuration: VisionRoute,
-    data: Map<Name, Vision>,
-): Unit = serveVisionData(configuration) { data[it] }
+    data: Map<Name, VisionDisplay>,
+): Unit = serveVisionData(configuration) { data[it]?.vision }
 
 /**
  * Serve a page, potentially containing any number of visions at a given [route] with given [header].
@@ -154,10 +172,10 @@ public fun Application.visionPage(
 ) {
     require(WebSockets)
 
-    val collector: MutableMap<Name, Vision> = mutableMapOf()
+    val cache: MutableMap<Name, VisionDisplay> = mutableMapOf()
 
     //serve data
-    serveVisionData(configuration, collector)
+    serveVisionData(configuration, cache)
 
     //filled pages
     routing {
@@ -193,7 +211,7 @@ public fun Application.visionPage(
                                 path(route, "ws")
                             }
                         } else null,
-                        onVisionRendered = { name, vision -> collector[name] = vision },
+                        displayCache =  cache,
                         fragment = visionFragment
                     )
                 }

visionforge-threejs/src/jsMain/kotlin/space/kscience/visionforge/solid/three/ThreePlugin.kt

@@ -17,6 +17,9 @@ import kotlin.collections.set
 import kotlin.reflect.KClass
 import three.objects.Group as ThreeGroup
 
+/**
+ * A plugin that handles Three Object3D representation of Visions.
+ */
 public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
     override val tag: PluginTag get() = Companion.tag
 
@@ -49,6 +52,13 @@ public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
                 as ThreeFactory<Solid>?
     }
 
+    /**
+     * Build an Object3D representation of the given [Solid].
+     *
+     * @param vision [Solid] object to build a representation of;
+     * @param observe whether the constructed Object3D should be changed when the
+     *  original [Vision] changes.
+     */
     public suspend fun buildObject3D(vision: Solid, observe: Boolean = true): Object3D = when (vision) {
         is ThreeJsVision -> vision.render(this)
         is SolidReference -> ThreeReferenceFactory.build(this, vision, observe)
@@ -124,6 +134,25 @@ public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
         }
     }
 
+    private val canvasCache = HashMap<Element, ThreeCanvas>()
+
+    /**
+     * Return a [ThreeCanvas] object attached to the given [Element].
+     * If there is no canvas bound, a new canvas object is created
+     * and returned.
+     *
+     * @param element HTML element to which the canvas is
+     *  (or should be if it is created by this call) attached;
+     * @param options canvas options that are applied to a newly
+     *  created [ThreeCanvas] in case it does not exist.
+     */
+    public fun getOrCreateCanvas(
+        element: Element,
+        options: Canvas3DOptions,
+    ): ThreeCanvas = canvasCache.getOrPut(element) {
+        ThreeCanvas(this, element, options)
+    }
+
     override fun content(target: String): Map<Name, Any> {
         return when (target) {
             ElementVisionRenderer.TYPE -> mapOf("three".asName() to this)
@@ -134,6 +163,27 @@ public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
     override fun rateVision(vision: Vision): Int =
         if (vision is Solid) ElementVisionRenderer.DEFAULT_RATING else ElementVisionRenderer.ZERO_RATING
 
+    /**
+     * Render the given [Solid] Vision in a [ThreeCanvas] attached
+     * to the [element]. Canvas objects are cached, so subsequent calls
+     * with the same [element] value do not create new canvas objects,
+     * but they replace existing content, so multiple Visions cannot be
+     * displayed in a single [ThreeCanvas].
+     *
+     * @param element HTML element [ThreeCanvas] should be
+     *  attached to;
+     *  @param vision Vision to render;
+     *  @param options options that are applied to a canvas
+     *    in case it is not in the cache and should be created.
+     */
+    internal fun renderSolid(
+        element: Element,
+        vision: Solid,
+        options: Canvas3DOptions,
+    ): ThreeCanvas = getOrCreateCanvas(element, options).apply {
+        render(vision)
+    }
+
     override fun render(element: Element, client: VisionClient, name: Name, vision: Vision, meta: Meta) {
         require(vision is Solid) { "Expected Solid but found ${vision::class}" }
         renderComposable(element) {
@@ -148,6 +198,27 @@ public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
     }
 }
 
+/**
+ * Render the given [Solid] Vision in a [ThreeCanvas] attached
+ * to the [element]. Canvas objects are cached, so subsequent calls
+ * with the same [element] value do not create new canvas objects,
+ * but they replace existing content, so multiple Visions cannot be
+ * displayed in a single [ThreeCanvas].
+ *
+ * @param element HTML element [ThreeCanvas] should be
+ *  attached to;
+ *  @param obj Vision to render;
+ *  @param optionsBuilder option builder that is applied to a canvas
+ *    in case it is not in the cache and should be created.
+ */
+public fun ThreePlugin.render(
+    element: HTMLElement,
+    obj: Solid,
+    optionsBuilder: Canvas3DOptions.() -> Unit = {},
+): ThreeCanvas = renderSolid(element, obj, Canvas3DOptions(optionsBuilder)).apply {
+    options.apply(optionsBuilder)
+}
+
 internal operator fun Object3D.set(token: NameToken, object3D: Object3D) {
     object3D.name = token.toString()
     add(object3D)
@@ -182,4 +253,4 @@ internal fun Object3D.findChild(name: Name): Object3D? {
         name.length == 1 -> this.children.find { it.name == name.tokens.first().toString() }
         else -> findChild(name.tokens.first().asName())?.findChild(name.cutFirst())
     }
-}
+}