diff --git a/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/NameCrumbs.kt b/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/NameCrumbs.kt index 2becdbb6..29be7aca 100644 --- a/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/NameCrumbs.kt +++ b/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/NameCrumbs.kt @@ -11,9 +11,15 @@ import space.kscience.dataforge.names.length @Composable public fun NameCrumbs(name: Name?, link: (Name) -> Unit): Unit = Nav({ - attr("aria-label","breadcrumb") + attr("aria-label", "breadcrumb") }) { - Ol({classes("breadcrumb")}) { + Ol({ + classes("breadcrumb") + style { + property("--bs-breadcrumb-divider", "'.'") + property("--bs-breadcrumb-item-padding-x",".2rem") + } + }) { Li({ classes("breadcrumb-item") onClick { @@ -28,10 +34,9 @@ public fun NameCrumbs(name: Name?, link: (Name) -> Unit): Unit = Nav({ name.tokens.forEach { token -> tokens.add(token) val fullName = Name(tokens.toList()) - Text(".") Li({ classes("breadcrumb-item") - if(tokens.size == name.length) classes("active") + if (tokens.size == name.length) classes("active") onClick { link(fullName) } diff --git a/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/TreeStyles.kt b/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/TreeStyles.kt index ab6b843a..c97bdae2 100644 --- a/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/TreeStyles.kt +++ b/visionforge-compose-html/src/jsMain/kotlin/space/kscience/visionforge/compose/TreeStyles.kt @@ -22,7 +22,7 @@ public object TreeStyles : StyleSheet(VisionForgeStyles) { cursor("pointer") userSelect(UserSelect.none) /* Create the caret/arrow with a unicode, and style it */ - before { + (self + before) { content("\u25B6") color(Color.black) display(DisplayStyle.InlineBlock) @@ -34,7 +34,7 @@ public object TreeStyles : StyleSheet(VisionForgeStyles) { * Rotate the caret/arrow icon when clicked on (using JavaScript) */ public val treeCaretDown: String by style { - before { + (self + before) { content("\u25B6") color(Color.black) display(DisplayStyle.InlineBlock) @@ -80,7 +80,7 @@ public object TreeStyles : StyleSheet(VisionForgeStyles) { textAlign("center") textDecoration("none") cursor("pointer") - disabled { + (self + disabled) { cursor("auto") border { style(LineStyle.Dashed) diff --git a/visionforge-threejs/src/jsMain/kotlin/space/kscience/visionforge/solid/three/compose/ThreeView.kt b/visionforge-threejs/src/jsMain/kotlin/space/kscience/visionforge/solid/three/compose/ThreeView.kt index acd4882d..245953e0 100644 --- a/visionforge-threejs/src/jsMain/kotlin/space/kscience/visionforge/solid/three/compose/ThreeView.kt +++ b/visionforge-threejs/src/jsMain/kotlin/space/kscience/visionforge/solid/three/compose/ThreeView.kt @@ -33,8 +33,6 @@ private fun SimpleThreeView( selected: Name?, ) { - val three: ThreePlugin by derivedStateOf { context.request(ThreePlugin) } - Div({ style { maxWidth(100.vw) @@ -43,9 +41,9 @@ private fun SimpleThreeView( height(100.percent) } }) { - var canvas: ThreeCanvas? = null + var canvas: ThreeCanvas? by remember { mutableStateOf(null) } DisposableEffect(options) { - canvas = ThreeCanvas(three, scopeElement, options ?: Canvas3DOptions()) + canvas = ThreeCanvas(context.request(ThreePlugin), scopeElement, options ?: Canvas3DOptions()) onDispose { scopeElement.clear() canvas = null @@ -75,7 +73,7 @@ public fun ThreeView( ) { var selected: Name? by remember { mutableStateOf(initialSelected) } - val optionsSnapshot = remember(options) { + val optionsSnapshot by derivedStateOf { (options ?: Canvas3DOptions()).apply { this.onSelect = { selected = it @@ -83,7 +81,7 @@ public fun ThreeView( } } - val selectedVision: Vision? = remember(solid, selected) { + val selectedVision: Vision? by derivedStateOf { selected?.let { when { it.isEmpty() -> solid