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
This commit is contained in:
Alexander Nozik 2023-12-25 21:31:56 +03:00
commit 72ead21ef0
14 changed files with 629 additions and 82 deletions

View File

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

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

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

View File

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

View File

@ -10,10 +10,17 @@ import space.kscience.visionforge.VisionChildren.Companion.STATIC_TOKEN_BODY
@DslMarker @DslMarker
public annotation class VisionBuilder 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 interface VisionContainer<out V : Vision> {
public fun getChild(name: Name): V? public fun getChild(name: Name): V?
} }
/**
* A container interface with write/replace/delete access to its content.
*/
public interface MutableVisionContainer<in V : Vision> { public interface MutableVisionContainer<in V : Vision> {
//TODO add documentation //TODO add documentation
public fun setChild(name: Name?, child: V?) 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)!!) } 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 interface MutableVisionChildren : VisionChildren, MutableVisionContainer<Vision> {
public override val parent: MutableVisionGroup public override val parent: MutableVisionGroup
public operator fun set(token: NameToken, value: Vision?) 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?) { override fun setChild(name: Name?, child: Vision?) {
when { when {
name == null -> { name == null -> {

View File

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

View File

@ -1,15 +1,15 @@
package space.kscience.visionforge.html package space.kscience.visionforge.html
import kotlinx.html.FORM import kotlinx.coroutines.CoroutineScope
import kotlinx.html.TagConsumer import kotlinx.coroutines.Job
import kotlinx.html.form import kotlinx.html.*
import kotlinx.html.id
import kotlinx.serialization.SerialName import kotlinx.serialization.SerialName
import kotlinx.serialization.Serializable import kotlinx.serialization.Serializable
import space.kscience.dataforge.meta.Meta import space.kscience.dataforge.meta.Meta
import space.kscience.dataforge.meta.node import space.kscience.dataforge.meta.node
import space.kscience.dataforge.meta.string import space.kscience.dataforge.meta.string
import space.kscience.visionforge.ClickControl 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 * @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") @SerialName("html.form")
public class VisionOfHtmlForm( public class VisionOfHtmlForm(
public val formId: String, public val formId: String,
) : VisionOfHtmlControl() { ) : VisionOfHtmlControl(), ClickControl {
public var values: Meta? by properties.node() public var values: Meta? by properties.node()
} }
public fun <R> TagConsumer<R>.bindForm(
visionOfForm: VisionOfHtmlForm, /**
builder: FORM.() -> Unit, * Create a [VisionOfHtmlForm] and bind this form to the id
): R = form { */
this.id = visionOfForm.formId @HtmlTagMarker
builder() 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 @Serializable
@SerialName("html.button") @SerialName("html.button")
public class VisionOfHtmlButton : VisionOfHtmlControl(), ClickControl { public class VisionOfHtmlButton : VisionOfHtmlControl(), ClickControl {

View File

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

View File

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

View File

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

View File

@ -17,6 +17,9 @@ import kotlin.collections.set
import kotlin.reflect.KClass import kotlin.reflect.KClass
import three.objects.Group as ThreeGroup import three.objects.Group as ThreeGroup
/**
* A plugin that handles Three Object3D representation of Visions.
*/
public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer { public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
override val tag: PluginTag get() = Companion.tag override val tag: PluginTag get() = Companion.tag
@ -49,6 +52,13 @@ public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
as ThreeFactory<Solid>? 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) { public suspend fun buildObject3D(vision: Solid, observe: Boolean = true): Object3D = when (vision) {
is ThreeJsVision -> vision.render(this) is ThreeJsVision -> vision.render(this)
is SolidReference -> ThreeReferenceFactory.build(this, vision, observe) 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> { override fun content(target: String): Map<Name, Any> {
return when (target) { return when (target) {
ElementVisionRenderer.TYPE -> mapOf("three".asName() to this) ElementVisionRenderer.TYPE -> mapOf("three".asName() to this)
@ -134,6 +163,27 @@ public class ThreePlugin : AbstractPlugin(), ElementVisionRenderer {
override fun rateVision(vision: Vision): Int = override fun rateVision(vision: Vision): Int =
if (vision is Solid) ElementVisionRenderer.DEFAULT_RATING else ElementVisionRenderer.ZERO_RATING 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) { override fun render(element: Element, client: VisionClient, name: Name, vision: Vision, meta: Meta) {
require(vision is Solid) { "Expected Solid but found ${vision::class}" } require(vision is Solid) { "Expected Solid but found ${vision::class}" }
renderComposable(element) { 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) { internal operator fun Object3D.set(token: NameToken, object3D: Object3D) {
object3D.name = token.toString() object3D.name = token.toString()
add(object3D) 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() } name.length == 1 -> this.children.find { it.name == name.tokens.first().toString() }
else -> findChild(name.tokens.first().asName())?.findChild(name.cutFirst()) else -> findChild(name.tokens.first().asName())?.findChild(name.cutFirst())
} }
} }