kscience/visionforge
8
1
Fork 1
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Style update

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

15
ui/react/src/main/kotlin/space/kscience/visionforge/react/ObjectTree.kt → ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt
View File

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

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

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