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.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 {
|
||||||
|
@ -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
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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 = {}
|
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
|
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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user