Fix JS config editor for properties without defaults
This commit is contained in:
parent
cae3ab00d9
commit
e01a688664
@ -24,7 +24,7 @@ fun Page<Solid>.demo(name: String, title: String = name, block: SolidGroup.() ->
|
|||||||
}
|
}
|
||||||
|
|
||||||
val canvasOptions = Canvas3DOptions {
|
val canvasOptions = Canvas3DOptions {
|
||||||
minSize = 500
|
minSize = 600
|
||||||
axes {
|
axes {
|
||||||
size = 500.0
|
size = 500.0
|
||||||
visible = true
|
visible = true
|
||||||
|
@ -66,7 +66,7 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
|
|||||||
id = name.toString()
|
id = name.toString()
|
||||||
role = "tabpanel"
|
role = "tabpanel"
|
||||||
attributes["aria-labelledby"] = "tab[$name]"
|
attributes["aria-labelledby"] = "tab[$name]"
|
||||||
div("container w-100 h-100") { id = "output-$name" }.also {element->
|
div("w-100 h-100") { id = "output-$name" }.also {element->
|
||||||
output = three.createCanvas(element, canvasOptions)
|
output = three.createCanvas(element, canvasOptions)
|
||||||
}
|
}
|
||||||
hr()
|
hr()
|
||||||
|
@ -37,9 +37,10 @@ public external interface ConfigEditorItemProps : RProps {
|
|||||||
public var descriptor: NodeDescriptor?
|
public var descriptor: NodeDescriptor?
|
||||||
}
|
}
|
||||||
|
|
||||||
private val ConfigEditorItem: FunctionalComponent<ConfigEditorItemProps> = functionalComponent("ConfigEditorItem") { props ->
|
private val ConfigEditorItem: FunctionalComponent<ConfigEditorItemProps> =
|
||||||
configEditorItem(props)
|
functionalComponent("ConfigEditorItem") { props ->
|
||||||
}
|
configEditorItem(props)
|
||||||
|
}
|
||||||
|
|
||||||
private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
|
private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
|
||||||
var expanded: Boolean by useState { true }
|
var expanded: Boolean by useState { true }
|
||||||
@ -82,26 +83,77 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
|
|||||||
update()
|
update()
|
||||||
}
|
}
|
||||||
|
|
||||||
when (actualItem) {
|
|
||||||
is MetaItem.NodeItem -> {
|
|
||||||
|
if (actualItem is MetaItem.NodeItem) {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+TreeStyles.treeLeaf
|
||||||
|
}
|
||||||
|
styledSpan {
|
||||||
|
css {
|
||||||
|
+TreeStyles.treeCaret
|
||||||
|
if (expanded) {
|
||||||
|
+TreeStyles.treeCaredDown
|
||||||
|
}
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
onClickFunction = expanderClick
|
||||||
|
}
|
||||||
|
}
|
||||||
|
styledSpan {
|
||||||
|
css {
|
||||||
|
+TreeStyles.treeLabel
|
||||||
|
if (item == null) {
|
||||||
|
+TreeStyles.treeLabelInactive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
+token
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (expanded) {
|
||||||
|
styledUl {
|
||||||
|
css {
|
||||||
|
+TreeStyles.tree
|
||||||
|
}
|
||||||
|
val keys = buildSet {
|
||||||
|
(descriptorItem as? NodeDescriptor)?.items?.keys?.forEach {
|
||||||
|
add(NameToken(it))
|
||||||
|
}
|
||||||
|
item?.node?.items?.keys?.let { addAll(it) }
|
||||||
|
defaultItem?.node?.items?.keys?.let { addAll(it) }
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.filter { !it.body.startsWith("@") }.forEach { token ->
|
||||||
|
styledLi {
|
||||||
|
css {
|
||||||
|
+TreeStyles.treeItem
|
||||||
|
}
|
||||||
|
child(ConfigEditorItem) {
|
||||||
|
attrs {
|
||||||
|
this.key = props.name.toString()
|
||||||
|
this.root = props.root
|
||||||
|
this.name = props.name + token
|
||||||
|
this.default = props.default
|
||||||
|
this.descriptor = props.descriptor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//configEditor(props.root, props.name + token, props.descriptor, props.default)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+TreeStyles.treeLeaf
|
||||||
|
}
|
||||||
styledDiv {
|
styledDiv {
|
||||||
css {
|
css {
|
||||||
+TreeStyles.treeLeaf
|
+TreeStyles.treeLabel
|
||||||
}
|
}
|
||||||
styledSpan {
|
styledSpan {
|
||||||
css {
|
css {
|
||||||
+TreeStyles.treeCaret
|
|
||||||
if (expanded) {
|
|
||||||
+TreeStyles.treeCaredDown
|
|
||||||
}
|
|
||||||
}
|
|
||||||
attrs {
|
|
||||||
onClickFunction = expanderClick
|
|
||||||
}
|
|
||||||
}
|
|
||||||
styledSpan {
|
|
||||||
css {
|
|
||||||
+TreeStyles.treeLabel
|
|
||||||
if (item == null) {
|
if (item == null) {
|
||||||
+TreeStyles.treeLabelInactive
|
+TreeStyles.treeLabelInactive
|
||||||
}
|
}
|
||||||
@ -109,83 +161,31 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
|
|||||||
+token
|
+token
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (expanded) {
|
|
||||||
styledUl {
|
|
||||||
css {
|
|
||||||
+TreeStyles.tree
|
|
||||||
}
|
|
||||||
val keys = buildSet {
|
|
||||||
(descriptorItem as? NodeDescriptor)?.items?.keys?.forEach {
|
|
||||||
add(NameToken(it))
|
|
||||||
}
|
|
||||||
item?.node?.items?.keys?.let { addAll(it) }
|
|
||||||
defaultItem?.node?.items?.keys?.let { addAll(it) }
|
|
||||||
}
|
|
||||||
|
|
||||||
keys.filter { !it.body.startsWith("@") }.forEach { token ->
|
|
||||||
styledLi {
|
|
||||||
css {
|
|
||||||
+TreeStyles.treeItem
|
|
||||||
}
|
|
||||||
child(ConfigEditorItem) {
|
|
||||||
attrs {
|
|
||||||
this.key = props.name.toString()
|
|
||||||
this.root = props.root
|
|
||||||
this.name = props.name + token
|
|
||||||
this.default = props.default
|
|
||||||
this.descriptor = props.descriptor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//configEditor(props.root, props.name + token, props.descriptor, props.default)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
is MetaItem.ValueItem -> {
|
|
||||||
styledDiv {
|
styledDiv {
|
||||||
css {
|
css {
|
||||||
+TreeStyles.treeLeaf
|
+TreeStyles.resizeableInput
|
||||||
}
|
}
|
||||||
styledDiv {
|
valueChooser(
|
||||||
css {
|
props.name,
|
||||||
+TreeStyles.treeLabel
|
actualItem,
|
||||||
}
|
descriptorItem as? ValueDescriptor,
|
||||||
styledSpan {
|
valueChanged
|
||||||
css {
|
)
|
||||||
if (item == null) {
|
|
||||||
+TreeStyles.treeLabelInactive
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+token
|
|
||||||
}
|
|
||||||
}
|
|
||||||
styledDiv {
|
|
||||||
css {
|
|
||||||
+TreeStyles.resizeableInput
|
|
||||||
}
|
|
||||||
valueChooser(
|
|
||||||
props.name,
|
|
||||||
actualItem,
|
|
||||||
descriptorItem as? ValueDescriptor,
|
|
||||||
valueChanged
|
|
||||||
)
|
|
||||||
}
|
|
||||||
styledButton {
|
|
||||||
css {
|
|
||||||
+TreeStyles.removeButton
|
|
||||||
}
|
|
||||||
+"\u00D7"
|
|
||||||
attrs {
|
|
||||||
if (item == null) {
|
|
||||||
disabled = true
|
|
||||||
} else {
|
|
||||||
onClickFunction = removeClick
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
styledButton {
|
||||||
|
css {
|
||||||
|
+TreeStyles.removeButton
|
||||||
|
}
|
||||||
|
+"\u00D7"
|
||||||
|
attrs {
|
||||||
|
if (item == null) {
|
||||||
|
disabled = true
|
||||||
|
} else {
|
||||||
|
onClickFunction = removeClick
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -210,7 +210,12 @@ public val ConfigEditor: FunctionalComponent<ConfigEditorProps> = functionalComp
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) {
|
public fun Element.configEditor(
|
||||||
|
config: Config,
|
||||||
|
descriptor: NodeDescriptor? = null,
|
||||||
|
default: Meta? = null,
|
||||||
|
key: Any? = null,
|
||||||
|
) {
|
||||||
render(this) {
|
render(this) {
|
||||||
child(ConfigEditor) {
|
child(ConfigEditor) {
|
||||||
attrs {
|
attrs {
|
||||||
@ -223,7 +228,12 @@ public fun Element.configEditor(config: Config, descriptor: NodeDescriptor? = nu
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public fun RBuilder.configEditor(config: Config, descriptor: NodeDescriptor? = null, default: Meta? = null, key: Any? = null) {
|
public fun RBuilder.configEditor(
|
||||||
|
config: Config,
|
||||||
|
descriptor: NodeDescriptor? = null,
|
||||||
|
default: Meta? = null,
|
||||||
|
key: Any? = null,
|
||||||
|
) {
|
||||||
child(ConfigEditor) {
|
child(ConfigEditor) {
|
||||||
attrs {
|
attrs {
|
||||||
this.key = key?.toString() ?: ""
|
this.key = key?.toString() ?: ""
|
||||||
|
@ -61,6 +61,8 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
|
|||||||
minWidth = 500.px
|
minWidth = 500.px
|
||||||
minHeight = 500.px
|
minHeight = 500.px
|
||||||
display = Display.inherit
|
display = Display.inherit
|
||||||
|
width = 100.pct
|
||||||
|
height = 100.pct
|
||||||
flex(1.0, 1.0, FlexBasis.auto)
|
flex(1.0, 1.0, FlexBasis.auto)
|
||||||
}
|
}
|
||||||
ref = elementRef
|
ref = elementRef
|
||||||
|
@ -117,14 +117,14 @@ public class ThreePlugin : AbstractPlugin(), HtmlVisionBinding<Solid> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public fun createCanvas(
|
public fun createCanvas(
|
||||||
element: HTMLElement,
|
element: Element,
|
||||||
options: Canvas3DOptions = Canvas3DOptions.empty(),
|
options: Canvas3DOptions = Canvas3DOptions.empty(),
|
||||||
): ThreeCanvas = ThreeCanvas(this, options).apply {
|
): ThreeCanvas = ThreeCanvas(this, options).apply {
|
||||||
attach(element)
|
attach(element)
|
||||||
}
|
}
|
||||||
|
|
||||||
override fun bind(element: Element, vision: Solid) {
|
override fun bind(element: Element, vision: Solid) {
|
||||||
TODO("Not yet implemented")
|
createCanvas(element).render(vision)
|
||||||
}
|
}
|
||||||
|
|
||||||
public companion object : PluginFactory<ThreePlugin> {
|
public companion object : PluginFactory<ThreePlugin> {
|
||||||
|
Loading…
Reference in New Issue
Block a user