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