Style update

This commit is contained in:
Alexander Nozik 2021-06-13 21:24:02 +03:00
parent 91e7e8573e
commit 9b99df88a5
9 changed files with 66 additions and 41 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>
}

View File

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