forked from kscience/visionforge
Another style update
This commit is contained in:
parent
7cf819d7ce
commit
b0cd80a4e6
@ -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 {
|
||||||
|
@ -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,22 +119,18 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
is MetaItemValue -> {
|
is MetaItemValue -> {
|
||||||
styledDiv {
|
flexRow {
|
||||||
css {
|
css {
|
||||||
+TreeStyles.treeLeaf
|
alignItems = Align.center
|
||||||
}
|
}
|
||||||
styledDiv {
|
styledSpan {
|
||||||
css {
|
css {
|
||||||
+TreeStyles.treeLabel
|
+TreeStyles.treeLabel
|
||||||
}
|
if (item == null) {
|
||||||
styledSpan {
|
+TreeStyles.treeLabelInactive
|
||||||
css {
|
|
||||||
if (item == null) {
|
|
||||||
+TreeStyles.treeLabelInactive
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
+token
|
|
||||||
}
|
}
|
||||||
|
+token
|
||||||
}
|
}
|
||||||
styledDiv {
|
styledDiv {
|
||||||
a {
|
a {
|
||||||
|
@ -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 {
|
styledSpan {
|
||||||
css {
|
css {
|
||||||
+TreeStyles.treeLabel
|
+TreeStyles.treeLabel
|
||||||
}
|
if (ownProperty == null) {
|
||||||
styledSpan {
|
+TreeStyles.treeLabelInactive
|
||||||
css {
|
|
||||||
if (ownProperty == null) {
|
|
||||||
+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 {
|
||||||
|
@ -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() ?: ""
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
@ -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)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,20 +11,22 @@ 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
|
||||||
css {
|
): ReactElement = styledDiv {
|
||||||
display = Display.flex
|
css {
|
||||||
flexDirection = FlexDirection.column
|
display = Display.flex
|
||||||
}
|
flexDirection = FlexDirection.column
|
||||||
block()
|
|
||||||
}
|
}
|
||||||
|
block()
|
||||||
|
}
|
||||||
|
|
||||||
public inline fun RBuilder.flexRow(block: StyledDOMBuilder<DIV>.() -> Unit): ReactElement =
|
public inline fun RBuilder.flexRow(
|
||||||
styledDiv {
|
block: StyledDOMBuilder<DIV>.() -> Unit
|
||||||
css {
|
): ReactElement = styledDiv {
|
||||||
display = Display.flex
|
css {
|
||||||
flexDirection = FlexDirection.row
|
display = Display.flex
|
||||||
}
|
flexDirection = FlexDirection.row
|
||||||
block()
|
}
|
||||||
}
|
block()
|
||||||
|
}
|
@ -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
|
||||||
|
@ -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 {
|
||||||
@ -116,44 +119,30 @@ public val ThreeCanvasWithControls: FunctionalComponent<ThreeCanvasWithControlsP
|
|||||||
|
|
||||||
selectedVision?.let { vision ->
|
selectedVision?.let { vision ->
|
||||||
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
|
nameCrumbs(selected) { selected = it }
|
||||||
borderWidth = 1.px
|
}
|
||||||
borderStyle = BorderStyle.solid
|
IslandContent{
|
||||||
padding(3.px)
|
propertyEditor(
|
||||||
|
ownProperties = vision.ownProperties,
|
||||||
|
allProperties = vision.allProperties(),
|
||||||
|
updateFlow = vision.propertyChanges,
|
||||||
|
descriptor = vision.descriptor,
|
||||||
|
key = selected
|
||||||
|
)
|
||||||
}
|
}
|
||||||
propertyEditor(
|
|
||||||
ownProperties = vision.ownProperties,
|
|
||||||
allProperties = vision.allProperties(),
|
|
||||||
updateFlow = vision.propertyChanges,
|
|
||||||
descriptor = vision.descriptor,
|
|
||||||
key = selected
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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 }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
flexColumn {
|
flexColumn {
|
||||||
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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,14 +95,8 @@ public val ThreeControls: FunctionalComponent<ThreeControlsProps> = functionalCo
|
|||||||
SmartTabs("Tree") {
|
SmartTabs("Tree") {
|
||||||
props.vision?.let {
|
props.vision?.let {
|
||||||
Tab("Tree") {
|
Tab("Tree") {
|
||||||
styledDiv {
|
Island("Vision tree") {
|
||||||
css {
|
visionTree(it, props.selected, props.onSelect)
|
||||||
height = 100.pct
|
|
||||||
overflowY = Overflow.auto
|
|
||||||
}
|
|
||||||
Island("Vision tree") {
|
|
||||||
visionTree(it, props.selected, props.onSelect)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user