demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt

@@ -9,10 +9,10 @@ import hep.dataforge.vision.Vision
 import hep.dataforge.vision.bootstrap.canvasControls
 import hep.dataforge.vision.bootstrap.card
 import hep.dataforge.vision.bootstrap.gridRow
+import hep.dataforge.vision.bootstrap.visionPropertyEditor
 import hep.dataforge.vision.react.ThreeCanvasComponent
 import hep.dataforge.vision.react.flexColumn
 import hep.dataforge.vision.react.objectTree
-import hep.dataforge.vision.react.propertyEditor
 import hep.dataforge.vision.solid.specifications.Camera
 import hep.dataforge.vision.solid.specifications.Canvas3DOptions
 import hep.dataforge.vision.solid.three.ThreeCanvas
@@ -57,7 +57,7 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
 
     val root = props.model.root
 
-    gridRow{
+    gridRow {
         flexColumn {
             css {
                 +"col-lg-3"
@@ -109,8 +109,8 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                 height = 100.vh
             }
             styledDiv {
-                css{
+                css {
-                    flex(0.0,1.0, FlexBasis.zero)
+                    flex(0.0, 1.0, FlexBasis.zero)
                 }
                 //settings
                 canvas?.let {
@@ -140,8 +140,8 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                     }
                 }
             }
-            styledDiv{
+            styledDiv {
-                css{
+                css {
                     padding(0.px)
                 }
                 nav {
@@ -180,8 +180,8 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                     }
                 }
             }
-           styledDiv{
+            styledDiv {
-               css{
+                css {
                     overflowY = Overflow.auto
                 }
                 //properties
@@ -193,12 +193,7 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                             else -> root[selected]
                         }
                         if (selectedObject != null) {
-                            propertyEditor(
+                            visionPropertyEditor(selectedObject, key = selected)
-                                selectedObject.config,
-                                selectedObject.descriptor,
-                                default = selectedObject.allProperties,
-                                key = selected
-                            )
                         }
                     }
                 }

ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/threeControls.kt

@@ -4,7 +4,6 @@ import hep.dataforge.names.Name
 import hep.dataforge.names.isEmpty
 import hep.dataforge.vision.Vision
 import hep.dataforge.vision.VisionGroup
-import hep.dataforge.vision.describedProperties
 import hep.dataforge.vision.react.objectTree
 import hep.dataforge.vision.solid.three.ThreeCanvas
 import kotlinx.css.*
@@ -52,11 +51,7 @@ public val ThreeControls: FunctionalComponent<ThreeControlsProps> = functionalCo
                     else -> (vision as? VisionGroup)?.get(selected)
                 }
                 if (selectedObject != null) {
-                    visionPropertyEditor(
+                    visionPropertyEditor(selectedObject, key = selected)
-                        selectedObject,
-                        default = selectedObject.describedProperties,
-                        key = selected
-                    )
                 }
             }
         }
@@ -70,7 +65,7 @@ public fun RBuilder.threeControls(
     canvas: ThreeCanvas,
     selected: Name?,
     onSelect: (Name) -> Unit = {},
-    builder: TabBuilder.() -> Unit = {}
+    builder: TabBuilder.() -> Unit = {},
 ): ReactElement = child(ThreeControls) {
     attrs {
         this.canvas = canvas

ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/visionPropertyEditor.kt

@@ -5,8 +5,8 @@ import hep.dataforge.meta.descriptors.NodeDescriptor
 import hep.dataforge.vision.Vision
 import hep.dataforge.vision.allProperties
 import hep.dataforge.vision.getStyle
-import hep.dataforge.vision.react.configEditor
 import hep.dataforge.vision.react.metaViewer
+import hep.dataforge.vision.react.propertyEditor
 import hep.dataforge.vision.styles
 import org.w3c.dom.Element
 import react.RBuilder
@@ -15,11 +15,14 @@ import react.dom.render
 public fun RBuilder.visionPropertyEditor(
     vision: Vision,
     descriptor: NodeDescriptor? = vision.descriptor,
-    default: Meta? = null,
     key: Any? = null,
 ) {
     card("Properties") {
-        configEditor(vision.allProperties(), descriptor, default, key)
+        propertyEditor(
+            vision.allProperties(),
+            updateFlow = vision.propertyNameFlow,
+            descriptor = descriptor,
+            key = key)
     }
     val styles = vision.styles
     if (styles.isNotEmpty()) {

visionforge-core/src/commonMain/kotlin/hep/dataforge/vision/Vision.kt

@@ -82,15 +82,16 @@ public interface Vision : Described {
  */
 public fun Vision.allProperties(
     inherit: Boolean? = null,
-    includeStyles: Boolean = true,
+    includeStyles: Boolean? = null,
     includeDefaults: Boolean = true,
 ): MutableItemProvider = object : MutableItemProvider {
     override fun getItem(name: Name): MetaItem<*>? {
         val actualInherit = inherit ?: descriptor?.get(name)?.inherited ?: false
+        val actualUseStyles = includeStyles ?: descriptor?.get(name)?.usesStyles ?: true
         return getProperty(
             name,
             inherit = actualInherit,
-            includeStyles = includeStyles,
+            includeStyles = actualUseStyles,
             includeDefaults = includeDefaults
         )
     }

visionforge-core/src/commonMain/kotlin/hep/dataforge/vision/visionDescriptor.kt

@@ -8,6 +8,7 @@ import hep.dataforge.meta.get
 import hep.dataforge.meta.set
 
 private const val INHERITED_DESCRIPTOR_ATTRIBUTE = "inherited"
+private const val STYLE_DESCRIPTOR_ATTRIBUTE = "useStyles"
 
 public var ItemDescriptor.inherited: Boolean
     get() = attributes[INHERITED_DESCRIPTOR_ATTRIBUTE].boolean ?: false
@@ -15,6 +16,12 @@ public var ItemDescriptor.inherited: Boolean
         set(INHERITED_DESCRIPTOR_ATTRIBUTE, value)
     }
 
+public var ItemDescriptor.usesStyles: Boolean
+    get() = attributes[STYLE_DESCRIPTOR_ATTRIBUTE].boolean ?: true
+    set(value) = attributes {
+        set(STYLE_DESCRIPTOR_ATTRIBUTE, value)
+    }
+
 
 public val Vision.describedProperties: Meta
     get() = Meta {

visionforge-core/src/commonTest/kotlin/hep/dataforge/vision/html/HtmlTagTest.kt

@@ -34,7 +34,7 @@ class HtmlTagTest {
         div {
             h2 { +"Properties" }
             ul {
-                (vision as? VisionBase)?.ownProperties?.items?.forEach {
+                (vision as? VisionBase)?.properties?.items?.forEach {
                     li {
                         a { +it.key.toString() }
                         p { +it.value.toString() }