Another style update

This commit is contained in:
Alexander Nozik 2021-06-30 15:44:12 +03:00
parent 7cf819d7ce
commit b0cd80a4e6
12 changed files with 154 additions and 184 deletions

View File

@ -17,11 +17,10 @@ allprojects {
jcenter() jcenter()
maven("https://repo.kotlin.link") maven("https://repo.kotlin.link")
maven("https://maven.jzy3d.org/releases") maven("https://maven.jzy3d.org/releases")
maven("https://maven.pkg.jetbrains.space/mipt-npm/p/mipt-npm/maven")
} }
group = "space.kscience" group = "space.kscience"
version = "0.2.0-dev-20" version = "0.2.0-dev-21"
} }
subprojects { subprojects {

View File

@ -1,5 +1,7 @@
package space.kscience.visionforge.react package space.kscience.visionforge.react
import kotlinx.css.Align
import kotlinx.css.alignItems
import kotlinx.html.js.onClickFunction import kotlinx.html.js.onClickFunction
import org.w3c.dom.events.Event import org.w3c.dom.events.Event
import react.* import react.*
@ -60,9 +62,9 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
when (actualItem) { when (actualItem) {
is MetaItemNode -> { is MetaItemNode -> {
styledDiv { flexRow {
css { css {
+TreeStyles.treeLeaf alignItems = Align.center
} }
styledSpan { styledSpan {
css { css {
@ -117,23 +119,19 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
} }
} }
is MetaItemValue -> { is MetaItemValue -> {
styledDiv { flexRow {
css { css {
+TreeStyles.treeLeaf alignItems = Align.center
}
styledDiv {
css {
+TreeStyles.treeLabel
} }
styledSpan { styledSpan {
css { css {
+TreeStyles.treeLabel
if (item == null) { if (item == null) {
+TreeStyles.treeLabelInactive +TreeStyles.treeLabelInactive
} }
} }
+token +token
} }
}
styledDiv { styledDiv {
a { a {
+actualItem.value.toString() +actualItem.value.toString()

View File

@ -9,6 +9,8 @@ import kotlinx.coroutines.flow.callbackFlow
import kotlinx.coroutines.flow.launchIn import kotlinx.coroutines.flow.launchIn
import kotlinx.coroutines.flow.onEach import kotlinx.coroutines.flow.onEach
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import kotlinx.css.*
import kotlinx.css.properties.TextDecoration
import kotlinx.html.js.onClickFunction import kotlinx.html.js.onClickFunction
import org.w3c.dom.Element import org.w3c.dom.Element
import org.w3c.dom.events.Event import org.w3c.dom.events.Event
@ -129,10 +131,7 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
// Do not show nodes without visible children // Do not show nodes without visible children
if (keys.isEmpty()) return if (keys.isEmpty()) return
styledDiv { flexRow {
css {
+TreeStyles.treeLeaf
}
styledSpan { styledSpan {
css { css {
+TreeStyles.treeCaret +TreeStyles.treeCaret
@ -179,26 +178,25 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
} }
} }
} else { } else {
styledDiv { flexRow {
css { css {
+TreeStyles.treeLeaf alignItems = Align.center
}
styledDiv {
css {
+TreeStyles.treeLabel
} }
styledSpan { styledSpan {
css { css {
+TreeStyles.treeLabel
if (ownProperty == null) { if (ownProperty == null) {
+TreeStyles.treeLabelInactive +TreeStyles.treeLabelInactive
} }
} }
+token +token
} }
}
styledDiv { styledDiv {
css { css {
+TreeStyles.resizeableInput //+TreeStyles.resizeableInput
width = 160.px
margin(1.px, 5.px)
} }
valueChooser( valueChooser(
props.name, props.name,
@ -207,9 +205,23 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
valueChanged valueChanged
) )
} }
styledButton { styledButton {
css { css {
+TreeStyles.removeButton width = 24.px
alignSelf = Align.stretch
margin(1.px, 5.px)
backgroundColor = Color.white
borderStyle = BorderStyle.solid
borderRadius = 2.px
textAlign = TextAlign.center
textDecoration = TextDecoration.none
cursor = Cursor.pointer
disabled {
cursor = Cursor.auto
borderStyle = BorderStyle.dashed
color = Color.lightGray
}
} }
+"\u00D7" +"\u00D7"
attrs { attrs {

View File

@ -1,5 +1,7 @@
package space.kscience.visionforge.react package space.kscience.visionforge.react
import kotlinx.css.pct
import kotlinx.css.width
import kotlinx.html.InputType import kotlinx.html.InputType
import kotlinx.html.js.onChangeFunction import kotlinx.html.js.onChangeFunction
import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLInputElement
@ -12,6 +14,7 @@ import space.kscience.dataforge.meta.double
import space.kscience.dataforge.meta.get import space.kscience.dataforge.meta.get
import space.kscience.dataforge.meta.string import space.kscience.dataforge.meta.string
import space.kscience.dataforge.values.asValue import space.kscience.dataforge.values.asValue
import styled.css
import styled.styledInput import styled.styledInput
@JsExport @JsExport
@ -45,6 +48,9 @@ public val RangeValueChooser: FunctionalComponent<ValueChooserProps> =
} }
styledInput(type = InputType.range) { styledInput(type = InputType.range) {
css{
width = 100.pct
}
attrs { attrs {
disabled = rangeDisabled disabled = rangeDisabled
value = innerValue?.toString() ?: "" value = innerValue?.toString() ?: ""

View File

@ -50,7 +50,7 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
css { css {
maxWidth = 100.vw maxWidth = 100.vw
maxHeight = 100.vh maxHeight = 100.vh
flex(1.0, 1.0, FlexBasis.auto) flex(1.0)
} }
ref = elementRef ref = elementRef
} }

View File

@ -1,7 +1,8 @@
package space.kscience.visionforge.react package space.kscience.visionforge.react
import kotlinx.css.* import kotlinx.css.*
import kotlinx.css.properties.* import kotlinx.css.properties.deg
import kotlinx.css.properties.rotate
import styled.StyleSheet import styled.StyleSheet
public object TreeStyles : StyleSheet("treeStyles", true) { public object TreeStyles : StyleSheet("treeStyles", true) {
@ -48,21 +49,13 @@ public object TreeStyles : StyleSheet("treeStyles", true) {
borderLeftStyle = BorderStyle.dashed borderLeftStyle = BorderStyle.dashed
borderLeftWidth = 1.px borderLeftWidth = 1.px
borderLeftColor = Color.lightGray borderLeftColor = Color.lightGray
borderBottomStyle = BorderStyle.dashed
borderBottomWidth = 1.px
borderBottomColor = Color.lightGray
}
public val treeLeaf:RuleSet by css {
display = Display.flex
flexDirection = FlexDirection.row
flexWrap = FlexWrap.nowrap
//alignItems = Align.center
} }
public val treeLabel:RuleSet by css { public val treeLabel:RuleSet by css {
overflow = Overflow.hidden border = "none"
flex(flexGrow = 1.0, flexShrink = 1.0) padding(left = 4.pt, right = 4.pt, top = 0.pt, bottom = 0.pt)
textAlign = TextAlign.left
flex(1.0)
} }
public val treeLabelInactive: RuleSet by css { public val treeLabelInactive: RuleSet by css {
@ -73,48 +66,4 @@ public object TreeStyles : StyleSheet("treeStyles", true) {
backgroundColor = Color.lightBlue backgroundColor = Color.lightBlue
} }
public val linkButton:RuleSet by css {
backgroundColor = Color.white
border = "none"
padding(left = 4.pt, right = 4.pt, top = 0.pt, bottom = 0.pt)
textAlign = TextAlign.left
fontFamily = "arial,sans-serif"
color = Color("#069")
cursor = Cursor.pointer
hover {
textDecoration(TextDecorationLine.underline)
}
}
public val removeButton:RuleSet by css {
backgroundColor = Color.white
borderStyle = BorderStyle.solid
borderRadius = 2.px
padding(1.px, 5.px)
marginLeft = 4.px
textAlign = TextAlign.center
textDecoration = TextDecoration.none
display = Display.inlineBlock
flexShrink = 1.0
cursor = Cursor.pointer
disabled {
cursor = Cursor.auto
borderStyle = BorderStyle.dashed
color = Color.lightGray
}
}
public val resizeableInput: RuleSet by css {
overflow = Overflow.hidden
maxWidth = 120.pt
flex(flexGrow = 2.0, flexShrink = 2.0, flexBasis = 60.pt)
input {
textAlign = TextAlign.right
width = 100.pct
}
select{
textAlign = TextAlign.right
width = 100.pct
}
}
} }

View File

@ -1,5 +1,11 @@
package space.kscience.visionforge.react package space.kscience.visionforge.react
import kotlinx.css.Color
import kotlinx.css.Cursor
import kotlinx.css.color
import kotlinx.css.cursor
import kotlinx.css.properties.TextDecorationLine
import kotlinx.css.properties.textDecoration
import kotlinx.html.js.onClickFunction import kotlinx.html.js.onClickFunction
import org.w3c.dom.events.Event import org.w3c.dom.events.Event
import react.* import react.*
@ -12,7 +18,6 @@ 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.css import styled.css
import styled.styledButton
import styled.styledDiv import styled.styledDiv
import styled.styledSpan import styled.styledSpan
@ -23,6 +28,27 @@ public external interface ObjectTreeProps : RProps {
public var clickCallback: (Name) -> Unit public var clickCallback: (Name) -> Unit
} }
private val TreeLabel = functionalComponent<ObjectTreeProps> { props ->
val token = useMemo(props.name) { props.name.lastOrNull()?.toString() ?: "World" }
styledSpan {
css {
+TreeStyles.treeLabel
color = Color("#069")
cursor = Cursor.pointer
hover {
textDecoration(TextDecorationLine.underline)
}
if (props.name == props.selected) {
+TreeStyles.treeLabelSelected
}
}
+token
attrs {
onClickFunction = { props.clickCallback(props.name) }
}
}
}
private fun RBuilder.visionTree(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 }
@ -30,32 +56,11 @@ private fun RBuilder.visionTree(props: ObjectTreeProps): Unit {
expanded = !expanded expanded = !expanded
} }
fun RBuilder.treeLabel(text: String) {
styledButton {
css {
//classes = mutableListOf("btn", "btn-link", "align-middle", "text-truncate", "p-0")
+TreeStyles.treeLabel
+TreeStyles.linkButton
if (props.name == props.selected) {
+TreeStyles.treeLabelSelected
}
}
+text
attrs {
onClickFunction = { props.clickCallback(props.name) }
}
}
}
val token = props.name.lastOrNull()?.toString() ?: "World"
val obj = props.obj val obj = props.obj
//display as node if any child is visible //display as node if any child is visible
if (obj is VisionGroup) { if (obj is VisionGroup) {
styledDiv { flexRow {
css {
+TreeStyles.treeLeaf
}
if (obj.children.any { !it.key.body.startsWith("@") }) { if (obj.children.any { !it.key.body.startsWith("@") }) {
styledSpan { styledSpan {
css { css {
@ -69,7 +74,7 @@ private fun RBuilder.visionTree(props: ObjectTreeProps): Unit {
} }
} }
} }
treeLabel(token) child(TreeLabel, props = props)
} }
if (expanded) { if (expanded) {
flexColumn { flexColumn {
@ -97,12 +102,7 @@ private fun RBuilder.visionTree(props: ObjectTreeProps): Unit {
} }
} }
} else { } else {
styledDiv { child(TreeLabel, props = props)
css {
+TreeStyles.treeLeaf
}
treeLabel(token)
}
} }
} }

View File

@ -11,8 +11,9 @@ import styled.StyledDOMBuilder
import styled.css import styled.css
import styled.styledDiv import styled.styledDiv
public inline fun RBuilder.flexColumn(block: StyledDOMBuilder<DIV>.() -> Unit): ReactElement = public inline fun RBuilder.flexColumn(
styledDiv { block: StyledDOMBuilder<DIV>.() -> Unit
): ReactElement = styledDiv {
css { css {
display = Display.flex display = Display.flex
flexDirection = FlexDirection.column flexDirection = FlexDirection.column
@ -20,8 +21,9 @@ public inline fun RBuilder.flexColumn(block: StyledDOMBuilder<DIV>.() -> Unit):
block() block()
} }
public inline fun RBuilder.flexRow(block: StyledDOMBuilder<DIV>.() -> Unit): ReactElement = public inline fun RBuilder.flexRow(
styledDiv { block: StyledDOMBuilder<DIV>.() -> Unit
): ReactElement = styledDiv {
css { css {
display = Display.flex display = Display.flex
flexDirection = FlexDirection.row flexDirection = FlexDirection.row

View File

@ -1,5 +1,9 @@
package space.kscience.visionforge.react package space.kscience.visionforge.react
import kotlinx.css.margin
import kotlinx.css.pct
import kotlinx.css.px
import kotlinx.css.width
import kotlinx.html.InputType import kotlinx.html.InputType
import kotlinx.html.js.onChangeFunction import kotlinx.html.js.onChangeFunction
import kotlinx.html.js.onKeyDownFunction import kotlinx.html.js.onKeyDownFunction
@ -15,13 +19,14 @@ import space.kscience.dataforge.names.Name
import space.kscience.dataforge.values.* import space.kscience.dataforge.values.*
import space.kscience.visionforge.Colors import space.kscience.visionforge.Colors
import space.kscience.visionforge.widgetType import space.kscience.visionforge.widgetType
import styled.css
import styled.styledInput import styled.styledInput
import styled.styledSelect import styled.styledSelect
public external interface ValueChooserProps : RProps { public external interface ValueChooserProps : RProps {
public var item: MetaItem? public var item: MetaItem?
public var descriptor: ValueDescriptor? public var descriptor: ValueDescriptor?
public var nullable: Boolean? //public var nullable: Boolean?
public var valueChanged: ((Value?) -> Unit)? public var valueChanged: ((Value?) -> Unit)?
} }
@ -41,6 +46,9 @@ public val StringValueChooser: FunctionalComponent<ValueChooserProps> =
value = (it.target as HTMLInputElement).value value = (it.target as HTMLInputElement).value
} }
styledInput(type = InputType.text) { styledInput(type = InputType.text) {
css{
width = 100.pct
}
attrs { attrs {
this.value = value this.value = value
onKeyDownFunction = keyDown onKeyDownFunction = keyDown
@ -57,6 +65,9 @@ public val BooleanValueChooser: FunctionalComponent<ValueChooserProps> =
props.valueChanged?.invoke(newValue.asValue()) props.valueChanged?.invoke(newValue.asValue())
} }
styledInput(type = InputType.checkBox) { styledInput(type = InputType.checkBox) {
css{
width = 100.pct
}
attrs { attrs {
//this.attributes["indeterminate"] = (props.item == null).toString() //this.attributes["indeterminate"] = (props.item == null).toString()
defaultChecked = props.item.boolean ?: false defaultChecked = props.item.boolean ?: false
@ -84,6 +95,9 @@ public val NumberValueChooser: FunctionalComponent<ValueChooserProps> =
innerValue = (it.target as HTMLInputElement).value innerValue = (it.target as HTMLInputElement).value
} }
styledInput(type = InputType.number) { styledInput(type = InputType.number) {
css{
width = 100.pct
}
attrs { attrs {
value = innerValue value = innerValue
onKeyDownFunction = keyDown onKeyDownFunction = keyDown
@ -110,6 +124,9 @@ public val ComboValueChooser: FunctionalComponent<ValueChooserProps> =
props.valueChanged?.invoke(selected.asValue()) props.valueChanged?.invoke(selected.asValue())
} }
styledSelect { styledSelect {
css{
width = 100.pct
}
props.descriptor?.allowedValues?.forEach { props.descriptor?.allowedValues?.forEach {
option { option {
+it.string +it.string
@ -137,6 +154,10 @@ public val ColorValueChooser: FunctionalComponent<ValueChooserProps> =
props.valueChanged?.invoke(value.asValue()) props.valueChanged?.invoke(value.asValue())
} }
styledInput(type = InputType.color) { styledInput(type = InputType.color) {
css{
width = 100.pct
margin(0.px)
}
attrs { attrs {
this.value = value this.value = value
onChangeFunction = handleChange onChangeFunction = handleChange

View File

@ -4,6 +4,9 @@ import kotlinx.css.*
import react.* import react.*
import react.dom.div import react.dom.div
import react.dom.span import react.dom.span
import ringui.Island
import ringui.IslandContent
import ringui.IslandHeader
import ringui.Link import ringui.Link
import space.kscience.dataforge.context.Context import space.kscience.dataforge.context.Context
import space.kscience.dataforge.names.Name import space.kscience.dataforge.names.Name
@ -50,7 +53,7 @@ public fun RBuilder.nameCrumbs(name: Name?, link: (Name) -> Unit): ReactElement
name.tokens.forEach { token -> name.tokens.forEach { token ->
tokens.add(token) tokens.add(token)
val fullName = Name(tokens.toList()) val fullName = Name(tokens.toList())
span { +"/" } span { +"." }
Link { Link {
+token.toString() +token.toString()
attrs { attrs {
@ -118,19 +121,18 @@ public val ThreeCanvasWithControls: FunctionalComponent<ThreeCanvasWithControlsP
styledDiv { styledDiv {
css{ css{
position = Position.absolute position = Position.absolute
top = 10.px top = 5.px
right = 10.px right = 5.px
width = 450.px
} }
styledDiv { Island{
css { IslandHeader{
minWidth = 450.px attrs {
backgroundColor = Color.white border = true
borderRadius = 3.px
borderColor = Color.blue
borderWidth = 1.px
borderStyle = BorderStyle.solid
padding(3.px)
} }
nameCrumbs(selected) { selected = it }
}
IslandContent{
propertyEditor( propertyEditor(
ownProperties = vision.ownProperties, ownProperties = vision.ownProperties,
allProperties = vision.allProperties(), allProperties = vision.allProperties(),
@ -140,19 +142,6 @@ public val ThreeCanvasWithControls: FunctionalComponent<ThreeCanvasWithControlsP
) )
} }
} }
styledDiv {
css {
position = Position.absolute
bottom = 10.px
left = 10.px
backgroundColor = Color.white
borderRadius = 3.px
borderColor = Color.blue
borderWidth = 1.px
borderStyle = BorderStyle.solid
padding(3.px)
}
nameCrumbs(selected) { selected = it }
} }
} }
} }
@ -161,9 +150,6 @@ public val ThreeCanvasWithControls: FunctionalComponent<ThreeCanvasWithControlsP
padding(4.px) padding(4.px)
minWidth = 400.px minWidth = 400.px
flex(1.0, 10.0, FlexBasis("300px")) flex(1.0, 10.0, FlexBasis("300px"))
alignItems = Align.stretch
alignContent = Align.stretch
//border(1.px, BorderStyle.solid, Color.lightGray)
} }
ringThreeControls(options, props.solid, selected, onSelect, additionalTabs = props.additionalTabs) ringThreeControls(options, props.solid, selected, onSelect, additionalTabs = props.additionalTabs)
} }

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
@ -22,7 +25,6 @@ import space.kscience.visionforge.react.propertyEditor
import space.kscience.visionforge.react.visionTree 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();
@ -93,17 +95,11 @@ public val ThreeControls: FunctionalComponent<ThreeControlsProps> = functionalCo
SmartTabs("Tree") { SmartTabs("Tree") {
props.vision?.let { props.vision?.let {
Tab("Tree") { Tab("Tree") {
styledDiv {
css {
height = 100.pct
overflowY = Overflow.auto
}
Island("Vision tree") { Island("Vision tree") {
visionTree(it, props.selected, props.onSelect) visionTree(it, props.selected, props.onSelect)
} }
} }
} }
}
Tab("Settings") { Tab("Settings") {
Island("Canvas configuration") { Island("Canvas configuration") {
canvasControls(props.canvasOptions, props.vision) canvasControls(props.canvasOptions, props.vision)

View File

@ -18,9 +18,9 @@ import info.laht.threekt.math.Vector3
import info.laht.threekt.objects.LineSegments import info.laht.threekt.objects.LineSegments
import info.laht.threekt.objects.Mesh import info.laht.threekt.objects.Mesh
import info.laht.threekt.scenes.Scene import info.laht.threekt.scenes.Scene
import kotlinx.browser.window
import org.w3c.dom.Element import org.w3c.dom.Element
import org.w3c.dom.HTMLCanvasElement import org.w3c.dom.HTMLCanvasElement
import org.w3c.dom.HTMLElement
import org.w3c.dom.Node import org.w3c.dom.Node
import org.w3c.dom.events.MouseEvent import org.w3c.dom.events.MouseEvent
import space.kscience.dataforge.context.info import space.kscience.dataforge.context.info
@ -149,7 +149,7 @@ public class ThreeCanvas(
} }
}, false) }, false)
(element as? HTMLElement)?.onresize = { window.onresize = {
updateSize() updateSize()
} }
@ -188,7 +188,8 @@ public class ThreeCanvas(
val absoluteValue = boundingBox.min.z + (boundingBox.max.z - boundingBox.min.z) * it val absoluteValue = boundingBox.min.z + (boundingBox.max.z - boundingBox.min.z) * it
Plane(Vector3(0.0, 0.0, -1.0), absoluteValue) Plane(Vector3(0.0, 0.0, -1.0), absoluteValue)
} }
renderer.clippingPlanes = listOfNotNull(xClippingPlane, yClippingPlane, zClippingPlane).toTypedArray() renderer.clippingPlanes =
listOfNotNull(xClippingPlane, yClippingPlane, zClippingPlane).toTypedArray()
} }
} else { } else {
renderer.localClippingEnabled = false renderer.localClippingEnabled = false