forked from kscience/visionforge
Style update
This commit is contained in:
parent
91e7e8573e
commit
9b99df88a5
@ -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 {
|
||||
|
@ -27,7 +27,9 @@ fun VisionLayout<Solid>.demo(name: String, title: String = name, block: SolidGro
|
||||
}
|
||||
|
||||
val canvasOptions = Canvas3DOptions {
|
||||
size{
|
||||
minSize = 400
|
||||
}
|
||||
axes {
|
||||
size = 500.0
|
||||
visible = true
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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 = {}
|
27
ui/ring/src/main/kotlin/ringui/datalist/Selection.kt
Normal file
27
ui/ring/src/main/kotlin/ringui/datalist/Selection.kt
Normal 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>
|
||||
}
|
@ -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") {
|
||||
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 {
|
||||
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,
|
||||
vision: Vision?,
|
||||
selected: Name?,
|
||||
onSelect: (Name) -> Unit = {},
|
||||
onSelect: (Name?) -> Unit = {},
|
||||
builder: RBuilder.() -> Unit = {},
|
||||
): ReactElement = child(ThreeControls) {
|
||||
attrs {
|
||||
|
Loading…
Reference in New Issue
Block a user