Style update

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

@@ -20,7 +20,7 @@ import space.kscience.visionforge.bootstrap.gridRow
 import space.kscience.visionforge.bootstrap.visionPropertyEditor
 import space.kscience.visionforge.react.ThreeCanvasComponent
 import space.kscience.visionforge.react.flexColumn
-import space.kscience.visionforge.react.objectTree
+import space.kscience.visionforge.react.visionTree
 import space.kscience.visionforge.solid.specifications.Camera
 import space.kscience.visionforge.solid.specifications.Canvas3DOptions
 import styled.css
@@ -70,7 +70,7 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                 css {
                     flex(1.0, 1.0, FlexBasis.auto)
                 }
-                objectTree(root, selected, onSelect)
+                visionTree(root, selected, onSelect)
             }
         }
         flexColumn {

demo/solid-showcase/src/commonMain/kotlin/space/kscience/visionforge/solid/demo/demo.kt

@@ -27,7 +27,9 @@ fun VisionLayout<Solid>.demo(name: String, title: String = name, block: SolidGro
 }
 
 val canvasOptions = Canvas3DOptions {
-    minSize = 400
+    size{
+        minSize = 400
+    }
     axes {
         size = 500.0
         visible = true

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

@@ -8,7 +8,7 @@ import space.kscience.dataforge.names.Name
 import space.kscience.dataforge.names.isEmpty
 import space.kscience.visionforge.Vision
 import space.kscience.visionforge.VisionGroup
-import space.kscience.visionforge.react.objectTree
+import space.kscience.visionforge.react.visionTree
 import space.kscience.visionforge.solid.specifications.Canvas3DOptions
 import styled.css
 import styled.styledDiv
@@ -39,7 +39,7 @@ public val ThreeControls: FunctionalComponent<ThreeControlsProps> = functionalCo
                     flex(1.0, 1.0, FlexBasis.inherit)
                 }
                 props.vision?.let {
-                    objectTree(it, props.selected, props.onSelect)
+                    visionTree(it, props.selected, props.onSelect)
                 }
             }
         }

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

@@ -16,7 +16,9 @@ import space.kscience.dataforge.names.Name
 import space.kscience.dataforge.names.NameToken
 import space.kscience.dataforge.names.lastOrNull
 import space.kscience.dataforge.names.plus
-import styled.*
+import styled.css
+import styled.styledDiv
+import styled.styledSpan
 
 public external interface MetaViewerProps : RProps {
     /**
@@ -84,7 +86,7 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
                 }
             }
             if (expanded) {
-                styledUl {
+                flexColumn {
                     css {
                         +TreeStyles.tree
                     }
@@ -96,7 +98,7 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
                     }
 
                     keys.filter { !it.body.startsWith("@") }.forEach { token ->
-                        styledLi {
+                        styledDiv {
                             css {
                                 +TreeStyles.treeItem
                             }

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

@@ -26,7 +26,10 @@ import space.kscience.dataforge.names.lastOrNull
 import space.kscience.dataforge.names.plus
 import space.kscience.dataforge.values.Value
 import space.kscience.visionforge.hidden
-import styled.*
+import styled.css
+import styled.styledButton
+import styled.styledDiv
+import styled.styledSpan
 
 public external interface PropertyEditorProps : RProps {
 
@@ -150,12 +153,12 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
             }
         }
         if (expanded) {
-            styledUl {
+            flexColumn {
                 css {
                     +TreeStyles.tree
                 }
                 keys.forEach { token ->
-                    styledLi {
+                    styledDiv {
                         css {
                             +TreeStyles.treeItem
                         }

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

@@ -9,7 +9,7 @@ public object TreeStyles : StyleSheet("treeStyles", true) {
      * Remove default bullets
      */
     public val tree: RuleSet by css {
-        paddingLeft = 8.px
+        paddingLeft = 5.px
         marginLeft = 0.px
         listStyleType = ListStyleType.none
     }

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

@@ -11,7 +11,10 @@ import space.kscience.dataforge.names.startsWith
 import space.kscience.visionforge.Vision
 import space.kscience.visionforge.VisionGroup
 import space.kscience.visionforge.isEmpty
-import styled.*
+import styled.css
+import styled.styledButton
+import styled.styledDiv
+import styled.styledSpan
 
 public external interface ObjectTreeProps : RProps {
     public var name: Name
@@ -20,7 +23,7 @@ public external interface ObjectTreeProps : RProps {
     public var clickCallback: (Name) -> Unit
 }
 
-private fun RBuilder.objectTree(props: ObjectTreeProps): Unit {
+private fun RBuilder.visionTree(props: ObjectTreeProps): Unit {
     var expanded: Boolean by useState { props.selected?.startsWith(props.name) ?: false }
 
     val onClick: (Event) -> Unit = {
@@ -69,7 +72,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit {
             treeLabel(token)
         }
         if (expanded) {
-            styledUl {
+            flexColumn {
                 css {
                     +TreeStyles.tree
                 }
@@ -77,7 +80,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit {
                     .filter { !it.key.toString().startsWith("@") } // ignore statics and other hidden children
                     .sortedBy { (it.value as? VisionGroup)?.isEmpty ?: true } // ignore empty groups
                     .forEach { (childToken, child) ->
-                        styledLi {
+                        styledDiv {
                             css {
                                 +TreeStyles.treeItem
                             }
@@ -105,10 +108,10 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit {
 
 @JsExport
 public val ObjectTree: FunctionalComponent<ObjectTreeProps> = functionalComponent("ObjectTree") { props ->
-    objectTree(props)
+    visionTree(props)
 }
 
-public fun RBuilder.objectTree(
+public fun RBuilder.visionTree(
     vision: Vision,
     selected: Name? = null,
     clickCallback: (Name) -> Unit = {}

ui/ring/src/main/kotlin/ringui/datalist/Selection.kt

@@ -0,0 +1,27 @@
+@file:JsModule("@jetbrains/ring-ui/components/data-list/selection")
+package ringui.datalist
+
+public external interface SelectionProperties<T> {
+    public var data: Array<dynamic>
+    public var selected: Set<T>
+    public var focused: T?
+    public var getKey: (T) -> dynamic
+    public var getChildren: (T) -> Array<T>
+    public var isItemSelectable: (T) -> Boolean
+}
+
+@JsName("default")
+public external class Selection<T>(args: SelectionProperties<T> = definedExternally) {
+    public fun select(item: T = definedExternally)
+    public fun deselect(item: T = definedExternally)
+    public fun toggleSelection(item: T = definedExternally)
+    public fun selectAll()
+    public fun resetFocus()
+    public fun resetSelection()
+    public fun reset()
+    public fun isFocused(value: T): Boolean
+    public fun isSelected(value: T): Boolean
+    public fun getFocused(): T
+    public fun getSelected(): Set<T>
+    public fun getActive(): Set<T>
+}

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

@@ -1,7 +1,10 @@
 package space.kscience.visionforge.ring
 
-import kotlinx.css.*
+import kotlinx.css.BorderStyle
+import kotlinx.css.Color
+import kotlinx.css.padding
 import kotlinx.css.properties.border
+import kotlinx.css.px
 import kotlinx.html.js.onClickFunction
 import org.w3c.dom.events.Event
 import org.w3c.files.Blob
@@ -9,7 +12,6 @@ import org.w3c.files.BlobPropertyBag
 import react.*
 import react.dom.attrs
 import react.dom.button
-import react.dom.h2
 import ringui.island.ringIsland
 import ringui.tabs.ringSmartTabs
 import ringui.tabs.ringTab
@@ -21,11 +23,10 @@ import space.kscience.visionforge.VisionGroup
 import space.kscience.visionforge.encodeToString
 import space.kscience.visionforge.react.flexColumn
 import space.kscience.visionforge.react.flexRow
-import space.kscience.visionforge.react.objectTree
 import space.kscience.visionforge.react.propertyEditor
+import space.kscience.visionforge.react.visionTree
 import space.kscience.visionforge.solid.specifications.Canvas3DOptions
 import styled.css
-import styled.styledDiv
 
 internal fun saveData(event: Event, fileName: String, mimeType: String = "text/plain", dataBuilder: () -> String) {
     event.stopPropagation();
@@ -87,7 +88,7 @@ public external interface ThreeControlsProps : RProps {
     public var canvasOptions: Canvas3DOptions
     public var vision: Vision?
     public var selected: Name?
-    public var onSelect: (Name) -> Unit
+    public var onSelect: (Name?) -> Unit
 }
 
 @JsExport
@@ -98,23 +99,10 @@ public val ThreeControls: FunctionalComponent<ThreeControlsProps> = functionalCo
                 canvasControls(props.canvasOptions, props.vision)
             }
         }
-        ringTab("Tree") {
+        props.vision?.let {
-            flexColumn {
+            ringTab("Tree") {
-                css {
+                ringIsland("Vision tree") {
-                    border(1.px, BorderStyle.solid, Color.lightGray)
+                    visionTree(it, props.selected, props.onSelect)
-                    padding(10.px)
-                    flexGrow = 1.0
-                    flexWrap = FlexWrap.wrap
-                }
-                h2 { +"Object tree" }
-                styledDiv {
-                    css {
-                        overflowY = Overflow.auto
-                        flexGrow = 1.0
-                    }
-                    props.vision?.let {
-                        objectTree(it, props.selected, props.onSelect)
-                    }
                 }
             }
         }
@@ -140,7 +128,7 @@ public fun RBuilder.ringThreeControls(
     canvasOptions: Canvas3DOptions,
     vision: Vision?,
     selected: Name?,
-    onSelect: (Name) -> Unit = {},
+    onSelect: (Name?) -> Unit = {},
     builder: RBuilder.() -> Unit = {},
 ): ReactElement = child(ThreeControls) {
     attrs {