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 {
|
||||
minSize = 500
|
||||
minSize = 600
|
||||
axes {
|
||||
size = 500.0
|
||||
visible = true
|
||||
|
@ -66,7 +66,7 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
|
||||
id = name.toString()
|
||||
role = "tabpanel"
|
||||
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)
|
||||
}
|
||||
hr()
|
||||
|
@ -37,9 +37,10 @@ public external interface ConfigEditorItemProps : RProps {
|
||||
public var descriptor: NodeDescriptor?
|
||||
}
|
||||
|
||||
private val ConfigEditorItem: FunctionalComponent<ConfigEditorItemProps> = functionalComponent("ConfigEditorItem") { props ->
|
||||
configEditorItem(props)
|
||||
}
|
||||
private val ConfigEditorItem: FunctionalComponent<ConfigEditorItemProps> =
|
||||
functionalComponent("ConfigEditorItem") { props ->
|
||||
configEditorItem(props)
|
||||
}
|
||||
|
||||
private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
|
||||
var expanded: Boolean by useState { true }
|
||||
@ -82,26 +83,77 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
|
||||
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 {
|
||||
css {
|
||||
+TreeStyles.treeLeaf
|
||||
+TreeStyles.treeLabel
|
||||
}
|
||||
styledSpan {
|
||||
css {
|
||||
+TreeStyles.treeCaret
|
||||
if (expanded) {
|
||||
+TreeStyles.treeCaredDown
|
||||
}
|
||||
}
|
||||
attrs {
|
||||
onClickFunction = expanderClick
|
||||
}
|
||||
}
|
||||
styledSpan {
|
||||
css {
|
||||
+TreeStyles.treeLabel
|
||||
if (item == null) {
|
||||
+TreeStyles.treeLabelInactive
|
||||
}
|
||||
@ -109,83 +161,31 @@ private fun RBuilder.configEditorItem(props: ConfigEditorItemProps) {
|
||||
+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 {
|
||||
css {
|
||||
+TreeStyles.treeLeaf
|
||||
+TreeStyles.resizeableInput
|
||||
}
|
||||
styledDiv {
|
||||
css {
|
||||
+TreeStyles.treeLabel
|
||||
}
|
||||
styledSpan {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
valueChooser(
|
||||
props.name,
|
||||
actualItem,
|
||||
descriptorItem as? ValueDescriptor,
|
||||
valueChanged
|
||||
)
|
||||
}
|
||||
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) {
|
||||
child(ConfigEditor) {
|
||||
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) {
|
||||
attrs {
|
||||
this.key = key?.toString() ?: ""
|
||||
|
@ -61,6 +61,8 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
|
||||
minWidth = 500.px
|
||||
minHeight = 500.px
|
||||
display = Display.inherit
|
||||
width = 100.pct
|
||||
height = 100.pct
|
||||
flex(1.0, 1.0, FlexBasis.auto)
|
||||
}
|
||||
ref = elementRef
|
||||
|
@ -117,14 +117,14 @@ public class ThreePlugin : AbstractPlugin(), HtmlVisionBinding<Solid> {
|
||||
}
|
||||
|
||||
public fun createCanvas(
|
||||
element: HTMLElement,
|
||||
element: Element,
|
||||
options: Canvas3DOptions = Canvas3DOptions.empty(),
|
||||
): ThreeCanvas = ThreeCanvas(this, options).apply {
|
||||
attach(element)
|
||||
}
|
||||
|
||||
override fun bind(element: Element, vision: Solid) {
|
||||
TODO("Not yet implemented")
|
||||
createCanvas(element).render(vision)
|
||||
}
|
||||
|
||||
public companion object : PluginFactory<ThreePlugin> {
|
||||
|
Loading…
Reference in New Issue
Block a user