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

@@ -1,4 +1,8 @@
 import kotlinx.browser.document
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+import kotlinx.coroutines.launch
 import kotlinx.css.*
 import react.child
 import react.dom.render
@@ -17,6 +21,7 @@ import space.kscience.visionforge.solid.*
 import space.kscience.visionforge.startApplication
 import styled.css
 import styled.styledDiv
+import kotlin.math.sqrt
 import kotlin.random.Random
 
 private class JsPlaygroundApp : Application {
@@ -31,9 +36,38 @@ private class JsPlaygroundApp : Application {
 
         val element = document.getElementById("playground") ?: error("Element with id 'playground' not found on page")
 
+        val bouncingSphere = SolidGroup {
+            sphere(5.0, "ball") {
+                detail = 16
+                color("red")
+                val h = 100.0
+                y = h
+                GlobalScope.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
+                        if (y.toDouble() <= 2.5){
+                            velocity = sqrt(2*g*h)
+                        }
+                    }
+                }
+            }
+
+            box(200, 5, 200, name = "floor"){
+                y = -2.5
+            }
+        }
+
         val visionOfD0 = GdmlShowCase.babyIaxo().toVision()
 
         val random = Random(112233)
+
         val visionOfSpheres = SolidGroup {
             repeat(100) {
                 sphere(5, name = "sphere[$it]") {
@@ -56,7 +90,16 @@ private class JsPlaygroundApp : Application {
                     height = 100.vh
                     width = 100.vw
                 }
-                SmartTabs("D0") {
+                SmartTabs("gravity") {
+                    Tab("gravity") {
+                        child(ThreeCanvasWithControls) {
+                            attrs {
+                                context = playgroundContext
+                                solid = bouncingSphere
+                            }
+                        }
+                    }
+
                     Tab("D0") {
                         child(ThreeCanvasWithControls) {
                             attrs {

ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/outputConfig.kt

@@ -66,7 +66,7 @@ public val CanvasControls: FunctionComponent<CanvasControlsProps> = functionalCo
             }
         }
         propertyEditor(
-            ownProperties = props.canvasOptions,
+            ownProperties = props.canvasOptions.meta,
             allProperties = props.canvasOptions.meta.withDefault(Canvas3DOptions.descriptor.defaultNode),
             descriptor = Canvas3DOptions.descriptor,
             expanded = false

ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/visionPropertyEditor.kt

@@ -4,10 +4,13 @@ import org.w3c.dom.Element
 import react.RBuilder
 import react.dom.render
 import space.kscience.dataforge.meta.descriptors.MetaDescriptor
-import space.kscience.visionforge.*
+import space.kscience.visionforge.Vision
+import space.kscience.visionforge.computeProperties
+import space.kscience.visionforge.getStyle
 import space.kscience.visionforge.react.metaViewer
 import space.kscience.visionforge.react.propertyEditor
 import space.kscience.visionforge.solid.SolidReference
+import space.kscience.visionforge.styles
 
 public fun RBuilder.visionPropertyEditor(
     vision: Vision,
@@ -19,7 +22,6 @@ public fun RBuilder.visionPropertyEditor(
         propertyEditor(
             ownProperties = vision.meta,
             allProperties = vision.computeProperties(),
-            updateFlow = vision.propertyChanges,
             descriptor = descriptor,
             key = key
         )

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

@@ -10,7 +10,6 @@ import react.dom.attrs
 import react.dom.option
 import react.dom.select
 import react.functionalComponent
-import react.useState
 import space.kscience.dataforge.meta.descriptors.allowedValues
 import space.kscience.dataforge.values.asValue
 import space.kscience.dataforge.values.string
@@ -18,19 +17,16 @@ import space.kscience.dataforge.values.string
 @JsExport
 public val MultiSelectChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("MultiSelectChooser") { props ->
-        var selectedItems by useState { props.item?.value?.list ?: emptyList() }
-
         val onChange: (Event) -> Unit = { event: Event ->
             val newSelected = (event.target as HTMLSelectElement).selectedOptions.asList()
                 .map { (it as HTMLOptionElement).value.asValue() }
-            props.valueChanged?.invoke(newSelected.asValue())
+            props.meta.value = newSelected.asValue()
-            selectedItems = newSelected
         }
 
         select {
             attrs {
                 multiple = true
-                values = selectedItems.mapTo(HashSet()) { it.string }
+                values = (props.actual.value?.list ?: emptyList()).mapTo(HashSet()) { it.string }
                 onChangeFunction = onChange
             }
             props.descriptor?.allowedValues?.forEach { optionValue ->

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

@@ -1,14 +1,5 @@
 package space.kscience.visionforge.react
 
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.ExperimentalCoroutinesApi
-import kotlinx.coroutines.GlobalScope
-import kotlinx.coroutines.channels.awaitClose
-import kotlinx.coroutines.flow.Flow
-import kotlinx.coroutines.flow.callbackFlow
-import kotlinx.coroutines.flow.launchIn
-import kotlinx.coroutines.flow.onEach
-import kotlinx.coroutines.launch
 import kotlinx.css.*
 import kotlinx.css.properties.TextDecoration
 import kotlinx.html.js.onClickFunction
@@ -22,7 +13,6 @@ import space.kscience.dataforge.meta.descriptors.MetaDescriptor
 import space.kscience.dataforge.meta.descriptors.ValueRequirement
 import space.kscience.dataforge.meta.descriptors.get
 import space.kscience.dataforge.names.*
-import space.kscience.dataforge.values.Value
 import space.kscience.visionforge.hidden
 import styled.css
 import styled.styledButton
@@ -32,17 +22,17 @@ import styled.styledSpan
 public external interface PropertyEditorProps : RProps {
 
     /**
-     * Root config object - always non null
+     * Root config object - always non-null
      */
-    public var ownProperties: MutableMetaProvider
+    public var meta: ObservableMutableMeta
 
     /**
      * Provide default item (greyed out if used)
      */
-    public var allProperties: MetaProvider?
+    public var withDefault: MetaProvider
 
     /**
-     * Full path to the displayed node in [ownProperties]. Could be empty
+     * Full path to the displayed node in [meta]. Could be empty
      */
     public var name: Name
 
@@ -51,16 +41,6 @@ public external interface PropertyEditorProps : RProps {
      */
     public var descriptor: MetaDescriptor?
 
-    /**
-     * A coroutine scope for updates
-     */
-    public var scope: CoroutineScope?
-
-    /**
-     * Flow names of updated properties
-     */
-    public var updateFlow: Flow<Name>?
-
     /**
      * Initial expanded state
      */
@@ -68,54 +48,17 @@ public external interface PropertyEditorProps : RProps {
 }
 
 private val PropertyEditorItem: FunctionComponent<PropertyEditorProps> =
-    functionalComponent("ConfigEditorItem") { props ->
+    functionalComponent("PropertyEditorItem") { props ->
         propertyEditorItem(props)
     }
 
 private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
     var expanded: Boolean by useState { props.expanded ?: true }
-    val descriptor: MetaDescriptor? = props.descriptor?.get(props.name)
+    val descriptor: MetaDescriptor? = useMemo(props.descriptor, props.name) { props.descriptor?.get(props.name) }
-    var ownProperty: Meta? by useState { props.ownProperties.getMeta(props.name) }
+    var ownProperty: ObservableMutableMeta by useState { props.meta.getOrCreate(props.name) }
-    val actualMeta = props.allProperties?.getMeta(props.name)
 
-    val token = props.name.lastOrNull()?.toString() ?: "Properties"
+    val keys = useMemo(descriptor) {
-
+        buildSet {
-    fun update() {
-        ownProperty = props.ownProperties.getMeta(props.name)
-    }
-
-    if (props.updateFlow != null) {
-        useEffect(props.ownProperties, props.updateFlow) {
-            val updateJob = props.updateFlow!!.onEach { updatedName ->
-                if (updatedName == props.name) {
-                    update()
-                }
-            }.launchIn(props.scope ?: GlobalScope)
-            cleanup {
-                updateJob.cancel()
-            }
-        }
-    }
-
-    val expanderClick: (Event) -> Unit = {
-        expanded = !expanded
-    }
-
-    val valueChanged: (Value?) -> Unit = {
-        if (it == null) {
-            props.ownProperties.remove(props.name)
-        } else {
-            props.ownProperties.setValue(props.name, it)
-        }
-        update()
-    }
-
-    val removeClick: (Event) -> Unit = {
-        props.ownProperties.remove(props.name)
-        update()
-    }
-
-    val keys = buildSet {
             descriptor?.children?.filterNot {
                 it.key.startsWith("@") || it.value.hidden
             }?.forEach {
@@ -123,6 +66,35 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
             }
             //ownProperty?.items?.keys?.filterNot { it.body.startsWith("@") }?.let { addAll(it) }
         }
+    }
+
+    val token = props.name.lastOrNull()?.toString() ?: "Properties"
+
+    fun update() {
+        ownProperty = props.meta.getOrCreate(props.name)
+    }
+
+    useEffect(props.meta) {
+        props.meta.onChange(props) { updatedName ->
+            if (updatedName == props.name) {
+                update()
+            }
+        }
+        cleanup {
+            props.meta.removeListener(props)
+        }
+    }
+
+    val expanderClick: (Event) -> Unit = {
+        expanded = !expanded
+    }
+
+    val removeClick: (Event) -> Unit = {
+        props.meta.remove(props.name)
+        update()
+    }
+
+
 
     flexRow {
         css {
@@ -144,7 +116,7 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
         styledSpan {
             css {
                 +TreeStyles.treeLabel
-                if (ownProperty == null) {
+                if (ownProperty.isEmpty()) {
                     +TreeStyles.treeLabelInactive
                 }
             }
@@ -157,12 +129,13 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
                     width = 160.px
                     margin(1.px, 5.px)
                 }
-                valueChooser(
+                ValueChooser{
-                    props.name,
+                    attrs {
-                    actualMeta,
+                        this.descriptor = descriptor
-                    descriptor,
+                        this.meta = ownProperty
-                    valueChanged
+                        this.actual = props.withDefault.getMeta(props.name) ?: ownProperty
-                )
+                    }
+                }
             }
 
             styledButton {
@@ -184,7 +157,7 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
                 }
                 +"\u00D7"
                 attrs {
-                    if (ownProperty == null) {
+                    if (ownProperty.isEmpty()) {
                         disabled = true
                     } else {
                         onClickFunction = removeClick
@@ -206,8 +179,8 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
                     child(PropertyEditorItem) {
                         attrs {
                             this.key = props.name.toString()
-                            this.ownProperties = props.ownProperties
+                            this.meta = props.meta
-                            this.allProperties = props.allProperties
+                            this.withDefault = props.withDefault
                             this.name = props.name + token
                             this.descriptor = props.descriptor
                         }
@@ -217,74 +190,52 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
             }
         }
     }
-
 }
 
-
 @JsExport
 public val PropertyEditor: FunctionComponent<PropertyEditorProps> = functionalComponent("PropertyEditor") { props ->
     child(PropertyEditorItem) {
         attrs {
             this.key = ""
-            this.ownProperties = props.ownProperties
+            this.meta = props.meta
-            this.allProperties = props.allProperties
+            this.withDefault = props.withDefault
             this.name = Name.EMPTY
             this.descriptor = props.descriptor
-            this.scope = props.scope
             this.expanded = props.expanded
         }
     }
 }
 
 public fun RBuilder.propertyEditor(
-    ownProperties: MutableMetaProvider,
+    ownProperties: ObservableMutableMeta,
-    allProperties: MetaProvider? = ownProperties,
+    allProperties: MetaProvider = ownProperties,
-    updateFlow: Flow<Name>? = null,
     descriptor: MetaDescriptor? = null,
-    scope: CoroutineScope? = null,
     key: Any? = null,
     expanded: Boolean? = null
 ) {
     child(PropertyEditor) {
         attrs {
-            this.ownProperties = ownProperties
+            this.meta = ownProperties
-            this.allProperties = allProperties
+            this.withDefault = allProperties
-            this.updateFlow = updateFlow
             this.descriptor = descriptor
             this.key = key?.toString() ?: ""
-            this.scope = scope
             this.expanded = expanded
         }
     }
 }
 
-@OptIn(ExperimentalCoroutinesApi::class)
-private fun ObservableMutableMeta.flowUpdates(): Flow<Name> = callbackFlow {
-    onChange(this) { name ->
-        launch {
-            send(name)
-        }
-    }
-    awaitClose {
-        removeListener(this)
-    }
-}
-
-
 public fun RBuilder.configEditor(
     config: ObservableMutableMeta,
-    default: MetaProvider? = null,
+    default: MetaProvider = config,
     descriptor: MetaDescriptor? = null,
     key: Any? = null,
-    scope: CoroutineScope? = null,
+): Unit = propertyEditor(config, default, descriptor, key = key)
-): Unit = propertyEditor(config, default, config.flowUpdates(), descriptor, scope, key = key)
 
 public fun Element.configEditor(
     config: ObservableMutableMeta,
+    default: Meta = config,
     descriptor: MetaDescriptor? = null,
-    default: Meta? = null,
     key: Any? = null,
-    scope: CoroutineScope? = null,
 ): Unit = render(this) {
-    configEditor(config, default, descriptor, key, scope)
+    configEditor(config, default, descriptor, key = key)
 }

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

@@ -10,6 +10,7 @@ import react.FunctionComponent
 import react.dom.attrs
 import react.functionalComponent
 import react.useState
+import space.kscience.dataforge.meta.descriptors.ValueRequirement
 import space.kscience.dataforge.meta.double
 import space.kscience.dataforge.meta.get
 import space.kscience.dataforge.meta.string
@@ -20,32 +21,34 @@ import styled.styledInput
 @JsExport
 public val RangeValueChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("RangeValueChooser") { props ->
-        var innerValue by useState(props.item.double)
+        var innerValue by useState(props.actual.double)
-        var rangeDisabled: Boolean by useState(props.item == null)
+        var rangeDisabled: Boolean by useState(props.meta.value == null)
 
         val handleDisable: (Event) -> Unit = {
             val checkBoxValue = (it.target as HTMLInputElement).checked
             rangeDisabled = !checkBoxValue
-            if(!checkBoxValue) {
+            props.meta.value = if(!checkBoxValue) {
-                props.valueChanged?.invoke(null)
+                null
             } else {
-                props.valueChanged?.invoke(innerValue?.asValue())
+                innerValue?.asValue()
             }
         }
 
         val handleChange: (Event) -> Unit = {
             val newValue = (it.target as HTMLInputElement).value
-            props.valueChanged?.invoke(newValue.toDoubleOrNull()?.asValue())
+            props.meta.value = newValue.toDoubleOrNull()?.asValue()
             innerValue = newValue.toDoubleOrNull()
         }
 
         flexRow {
+            if(props.descriptor?.valueRequirement != ValueRequirement.REQUIRED) {
                 styledInput(type = InputType.checkBox) {
                     attrs {
                         defaultChecked = rangeDisabled.not()
                         onChangeFunction = handleDisable
                     }
                 }
+            }
 
             styledInput(type = InputType.range) {
                 css{
@@ -55,6 +58,7 @@ public val RangeValueChooser: FunctionComponent<ValueChooserProps> =
                     disabled = rangeDisabled
                     value = innerValue?.toString() ?: ""
                     onChangeFunction = handleChange
+                    consumer.onTagEvent(this, "input", handleChange)
                     val minValue = props.descriptor?.attributes?.get("min").string
                     minValue?.let {
                         min = it

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

@@ -13,14 +13,13 @@ import org.w3c.dom.events.Event
 import react.*
 import react.dom.attrs
 import react.dom.option
-import space.kscience.dataforge.meta.Meta
+import space.kscience.dataforge.meta.*
-import space.kscience.dataforge.meta.boolean
 import space.kscience.dataforge.meta.descriptors.MetaDescriptor
 import space.kscience.dataforge.meta.descriptors.allowedValues
-import space.kscience.dataforge.meta.get
+import space.kscience.dataforge.values.ValueType
-import space.kscience.dataforge.meta.string
+import space.kscience.dataforge.values.asValue
-import space.kscience.dataforge.names.Name
+import space.kscience.dataforge.values.int
-import space.kscience.dataforge.values.*
+import space.kscience.dataforge.values.string
 import space.kscience.visionforge.Colors
 import space.kscience.visionforge.widgetType
 import styled.css
@@ -28,23 +27,19 @@ import styled.styledInput
 import styled.styledSelect
 
 public external interface ValueChooserProps : RProps {
-    public var item: Meta?
     public var descriptor: MetaDescriptor?
-
+    public var meta: ObservableMutableMeta
-    //public var nullable: Boolean?
+    public var actual: Meta
-    public var valueChanged: ((Value?) -> Unit)?
 }
 
 @JsExport
 public val StringValueChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("StringValueChooser") { props ->
-        var value by useState(props.item.string ?: "")
+        var value by useState(props.actual.string ?: "")
         val keyDown: (Event) -> Unit = { event ->
             if (event.type == "keydown" && event.asDynamic().key == "Enter") {
                 value = (event.target as HTMLInputElement).value
-                if (value != props.item.string) {
+                props.meta.value = value.asValue()
-                    props.valueChanged?.invoke(value.asValue())
-                }
             }
         }
         val handleChange: (Event) -> Unit = {
@@ -67,7 +62,7 @@ public val BooleanValueChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("BooleanValueChooser") { props ->
         val handleChange: (Event) -> Unit = {
             val newValue = (it.target as HTMLInputElement).checked
-            props.valueChanged?.invoke(newValue.asValue())
+            props.meta.value = newValue.asValue()
         }
         styledInput(type = InputType.checkBox) {
             css {
@@ -75,7 +70,7 @@ public val BooleanValueChooser: FunctionComponent<ValueChooserProps> =
             }
             attrs {
                 //this.attributes["indeterminate"] = (props.item == null).toString()
-                defaultChecked = props.item.boolean ?: false
+                defaultChecked = props.actual.boolean ?: false
                 onChangeFunction = handleChange
             }
         }
@@ -84,7 +79,7 @@ public val BooleanValueChooser: FunctionComponent<ValueChooserProps> =
 @JsExport
 public val NumberValueChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("NumberValueChooser") { props ->
-        var innerValue by useState(props.item.string ?: "")
+        var innerValue by useState(props.actual.string ?: "")
         val keyDown: (Event) -> Unit = { event ->
             if (event.type == "keydown" && event.asDynamic().key == "Enter") {
                 innerValue = (event.target as HTMLInputElement).value
@@ -92,7 +87,7 @@ public val NumberValueChooser: FunctionComponent<ValueChooserProps> =
                 if (number == null) {
                     console.error("The input value $innerValue is not a number")
                 } else {
-                    props.valueChanged?.invoke(number.asValue())
+                    props.meta.value = number.asValue()
                 }
             }
         }
@@ -123,10 +118,10 @@ public val NumberValueChooser: FunctionComponent<ValueChooserProps> =
 @JsExport
 public val ComboValueChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("ComboValueChooser") { props ->
-        var selected by useState(props.item.string ?: "")
+        var selected by useState(props.actual.string ?: "")
         val handleChange: (Event) -> Unit = {
             selected = (it.target as HTMLSelectElement).value
-            props.valueChanged?.invoke(selected.asValue())
+            props.meta.value = selected.asValue()
         }
         styledSelect {
             css {
@@ -138,7 +133,7 @@ public val ComboValueChooser: FunctionComponent<ValueChooserProps> =
                 }
             }
             attrs {
-                this.value = props.item?.string ?: ""
+                this.value = props.actual.string ?: ""
                 multiple = false
                 onChangeFunction = handleChange
             }
@@ -149,14 +144,14 @@ public val ComboValueChooser: FunctionComponent<ValueChooserProps> =
 public val ColorValueChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("ColorValueChooser") { props ->
         var value by useState(
-            props.item?.value?.let { value ->
+            props.actual.value?.let { value ->
                 if (value.type == ValueType.NUMBER) Colors.rgbToString(value.int)
                 else value.string
             } ?: "#000000"
         )
         val handleChange: (Event) -> Unit = {
             value = (it.target as HTMLInputElement).value
-            props.valueChanged?.invoke(value.asValue())
+            props.meta.value = value.asValue()
         }
         styledInput(type = InputType.color) {
             css {
@@ -189,19 +184,3 @@ public val ValueChooser: FunctionComponent<ValueChooserProps> = functionalCompon
         else -> child(StringValueChooser, props)
     }
 }
-
-internal fun RBuilder.valueChooser(
-    name: Name,
-    item: Meta?,
-    descriptor: MetaDescriptor? = null,
-    callback: (Value?) -> Unit,
-) {
-    child(ValueChooser) {
-        attrs {
-            key = name.toString()
-            this.item = item
-            this.descriptor = descriptor
-            this.valueChanged = callback
-        }
-    }
-}

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

@@ -15,7 +15,6 @@ import space.kscience.dataforge.names.isEmpty
 import space.kscience.dataforge.names.length
 import space.kscience.visionforge.VisionGroup
 import space.kscience.visionforge.computeProperties
-import space.kscience.visionforge.propertyChanges
 import space.kscience.visionforge.react.ThreeCanvasComponent
 import space.kscience.visionforge.react.flexColumn
 import space.kscience.visionforge.react.flexRow
@@ -137,7 +136,6 @@ public val ThreeCanvasWithControls: FunctionComponent<ThreeCanvasWithControlsPro
                                 propertyEditor(
                                     ownProperties = vision.meta,
                                     allProperties = vision.computeProperties(),
-                                    updateFlow = vision.propertyChanges,
                                     descriptor = vision.descriptor,
                                     key = selected
                                 )

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

@@ -8,11 +8,14 @@ import ringui.Island
 import ringui.SmartTabs
 import ringui.Tab
 import space.kscience.dataforge.meta.descriptors.MetaDescriptor
-import space.kscience.visionforge.*
+import space.kscience.visionforge.Vision
+import space.kscience.visionforge.computeProperties
+import space.kscience.visionforge.getStyle
 import space.kscience.visionforge.react.flexColumn
 import space.kscience.visionforge.react.metaViewer
 import space.kscience.visionforge.react.propertyEditor
 import space.kscience.visionforge.solid.SolidReference
+import space.kscience.visionforge.styles
 
 public fun RBuilder.ringPropertyEditor(
     vision: Vision,
@@ -30,7 +33,6 @@ public fun RBuilder.ringPropertyEditor(
             propertyEditor(
                 ownProperties = vision.meta,
                 allProperties = vision.computeProperties(),
-                updateFlow = vision.propertyChanges,
                 descriptor = descriptor,
                 key = key
             )

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

@@ -72,7 +72,7 @@ internal val CanvasControls: FunctionComponent<CanvasControlsProps> = functional
             }
         }
         propertyEditor(
-            ownProperties = props.options,
+            ownProperties = props.options.meta,
             allProperties = props.options.meta.withDefault(Canvas3DOptions.descriptor.defaultNode),
             descriptor = Canvas3DOptions.descriptor,
             expanded = false

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

@@ -12,10 +12,12 @@ import space.kscience.dataforge.misc.DFExperimental
 import space.kscience.dataforge.misc.Type
 import space.kscience.dataforge.names.Name
 import space.kscience.dataforge.names.asName
+import space.kscience.dataforge.names.startsWith
 import space.kscience.dataforge.values.Value
 import space.kscience.dataforge.values.asValue
 import space.kscience.dataforge.values.boolean
 import space.kscience.visionforge.Vision.Companion.TYPE
+import kotlin.reflect.KProperty1
 
 /**
  * A root type for display hierarchy
@@ -129,3 +131,17 @@ public var Vision.visible: Boolean?
     get() = getPropertyValue(Vision.VISIBLE_KEY)?.boolean
     set(value) = meta.setValue(Vision.VISIBLE_KEY, value?.asValue())
 
+
+public fun <V : Vision, T> V.useProperty(
+    property: KProperty1<V, T>,
+    owner: Any? = null,
+    callBack: V.(T) -> Unit,
+) {
+    //Pass initial value.
+    callBack(property.get(this))
+    meta.onChange(owner) { name ->
+        if (name.startsWith(property.name.asName())) {
+            callBack(property.get(this@useProperty))
+        }
+    }
+}

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

@@ -44,7 +44,7 @@ public open class VisionBase(
     }
 
     @Transient
-    private val listeners = HashSet<MetaListener>()
+    private val listeners: MutableList<MetaListener> = mutableListOf()
 
     private inner class VisionProperties(val pathName: Name) : ObservableMutableMeta {
 

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

@@ -11,7 +11,6 @@ import space.kscience.dataforge.names.Name
 import space.kscience.dataforge.names.asName
 import space.kscience.visionforge.Vision
 import space.kscience.visionforge.VisionBase
-import space.kscience.visionforge.setProperty
 
 @Serializable
 @SerialName("vision.markup")
@@ -20,15 +19,11 @@ public class VisionOfMarkup(
 ) : VisionBase() {
 
     //FIXME to be removed after https://github.com/Kotlin/kotlinx.serialization/issues/1602 fix
-    override var properties: MutableMeta? = null
+    protected override var properties: MutableMeta? = null
 
     //TODO add templates
 
-    public var content: String?
+    public var content: String? by meta.string(CONTENT_PROPERTY_KEY)
-        get() = meta.getMeta(CONTENT_PROPERTY_KEY).string
-        set(value) {
-            setProperty(CONTENT_PROPERTY_KEY, value)
-        }
 
     public companion object {
         public val CONTENT_PROPERTY_KEY: Name = "content".asName()

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

@@ -1,16 +1,19 @@
 package space.kscience.visionforge.markup
 
 import kotlinx.browser.document
+import kotlinx.dom.clear
+import kotlinx.html.dom.append
 import kotlinx.serialization.modules.SerializersModule
+import org.intellij.markdown.flavours.commonmark.CommonMarkFlavourDescriptor
+import org.intellij.markdown.flavours.gfm.GFMFlavourDescriptor
 import org.w3c.dom.Element
 import space.kscience.dataforge.context.Context
 import space.kscience.dataforge.context.PluginFactory
 import space.kscience.dataforge.context.PluginTag
 import space.kscience.dataforge.meta.Meta
-import space.kscience.visionforge.ElementVisionRenderer
+import space.kscience.visionforge.*
-import space.kscience.visionforge.Vision
+import space.kscience.visionforge.markup.VisionOfMarkup.Companion.COMMONMARK_FORMAT
-import space.kscience.visionforge.VisionClient
+import space.kscience.visionforge.markup.VisionOfMarkup.Companion.GFM_FORMAT
-import space.kscience.visionforge.VisionPlugin
 import kotlin.reflect.KClass
 
 public class MarkupPlugin : VisionPlugin(), ElementVisionRenderer {
@@ -26,8 +29,20 @@ public class MarkupPlugin : VisionPlugin(), ElementVisionRenderer {
     override fun render(element: Element, vision: Vision, meta: Meta) {
         require(vision is VisionOfMarkup) { "The vision is not a markup vision" }
         val div = document.createElement("div")
+        val flavour = when (vision.format) {
+            COMMONMARK_FORMAT -> CommonMarkFlavourDescriptor()
+            GFM_FORMAT -> GFMFlavourDescriptor()
+            //TODO add new formats via plugins
+            else-> error("Format ${vision.format} not recognized")
+        }
+        vision.useProperty(VisionOfMarkup::content) {
+            div.clear()
+            div.append {
+                markdown(flavour) { vision.content ?: "" }
+
+            }
+        }
         element.append(div)
-        TODO()
     }
 
     public companion object : PluginFactory<MarkupPlugin> {

visionforge-solid/src/commonMain/kotlin/space/kscience/visionforge/solid/specifications/Canvas3DOptions.kt

@@ -5,7 +5,6 @@ import space.kscience.dataforge.meta.descriptors.MetaDescriptor
 import space.kscience.dataforge.meta.descriptors.scheme
 import space.kscience.dataforge.meta.descriptors.value
 import space.kscience.dataforge.names.Name
-import space.kscience.dataforge.values.ValueType
 import space.kscience.visionforge.hide
 import space.kscience.visionforge.widgetType
 
@@ -21,20 +20,21 @@ public class Clipping : Scheme() {
                 attributes["min"] = 0.0
                 attributes["max"] = 1.0
                 attributes["step"] = 0.01
+                default(1.0)
             }
             value(Clipping::y) {
                 widgetType = "range"
                 attributes["min"] = 0.0
                 attributes["max"] = 1.0
                 attributes["step"] = 0.01
-
+                default(1.0)
             }
             value(Clipping::z) {
                 widgetType = "range"
                 attributes["min"] = 0.0
                 attributes["max"] = 1.0
                 attributes["step"] = 0.01
-
+                default(1.0)
             }
         }
     }

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

@@ -168,16 +168,13 @@ public class ThreeCanvas(
         }
 
         //Clipping planes
-        options.meta.onChange(this@ThreeCanvas) { name->
+        options.useProperty(Canvas3DOptions::clipping){clipping ->
-            if (name.startsWith(Canvas3DOptions::clipping.name.asName())) {
-                val clipping = options.clipping
             if (!clipping.meta.isEmpty()) {
                 renderer.localClippingEnabled = true
                 boundingBox?.let { boundingBox ->
                     val xClippingPlane = clipping.x?.let {
                         val absoluteValue = boundingBox.min.x + (boundingBox.max.x - boundingBox.min.x) * it
                         Plane(Vector3(-1.0, 0.0, 0.0), absoluteValue)
-
                     }
                     val yClippingPlane = clipping.y?.let {
                         val absoluteValue = boundingBox.min.y + (boundingBox.max.y - boundingBox.min.y) * it
@@ -194,7 +191,9 @@ public class ThreeCanvas(
             } else {
                 renderer.localClippingEnabled = false
             }
-            } else if (name.startsWith(Canvas3DOptions::size.name.asName())) {
+        }
+
+        options.useProperty(Canvas3DOptions::size){
             canvas.style.apply {
                 minWidth = "${options.size.minWith.toInt()}px"
                 maxWidth = "${options.size.maxWith.toInt()}px"
@@ -204,7 +203,6 @@ public class ThreeCanvas(
         }
 
     }
-    }
 
     /**
      * Resolve full name of the object relative to the global root