Make the demos fit better in the screen with navigation, and add an imitateAndroidxLayout JS DOM modifier and replace sizeFitContent with it in the layouts

ShreckYe · ShreckYe · commit 1fe305a2c5dc · 2024-10-22T23:14:53.000+08:00
Resolve #29, resolve #38 Extract more common functions for the CSS `stretch` value BTW. There is a new UI issue that the scrollable padding is not at the right place.
diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt
@@ -17,6 +17,9 @@ expect class ScrollState
 It seems `state` has to be achieved with `DisposableEffect` on JS which can not be set with the Kobweb `Modifier` yet.
 See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop.
  */
+/**
+ * Note that if the component is a layout, it applies to the target as a whole on `androidx` targets, but applies to its content on JS DOM.
+ */
 expect fun Modifier.verticalScroll(
     state: ScrollState
     /*
@@ -27,3 +30,8 @@ expect fun Modifier.verticalScroll(
 ): Modifier
 
 expect fun Modifier.horizontalScroll(state: ScrollState): Modifier
+
+/*
+@Composable
+expect fun VerticalScrollBox(content : @Composable () ->Unit)
+*/
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt
@@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable
 import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
-import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent
+import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout
 import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker
 import com.varabyte.kobweb.compose.foundation.layout.Box as PlatformBox
 import com.varabyte.kobweb.compose.foundation.layout.BoxScope as PlatformBoxScope
@@ -19,14 +19,14 @@ actual fun Box(
 ) {
     AddKobwebComposeStyleSheet()
     PlatformBox(
-        PlatformModifier.sizeFitContent().then(modifier.platformModifier),
+        PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier),
         contentAlignment.platformValue,
     ) { BoxScope.Impl(this).content() }
 }
 
 @Composable
 actual fun Box(modifier: Modifier) =
-    PlatformBox(PlatformModifier.sizeFitContent().then(modifier.platformModifier))
+    PlatformBox(PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier))
 
 @LayoutScopeMarker
 @Immutable
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt
@@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable
 import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
-import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent
+import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout
 import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker
 
 @Composable
@@ -19,7 +19,7 @@ actual fun Column(
     AddKobwebComposeStyleSheet()
     com.varabyte.kobweb.compose.foundation.layout.Column(
         PlatformModifier
-            .sizeFitContent() // "fit-content" is added to make it consistent with the `androidx` one
+            .imitateAndroidxLayout() // "fit-content" is added to make it consistent with the `androidx` one
             .stylesFrom(verticalArrangement)
             .then(modifier.platformModifier),
         verticalArrangement.platformValue,
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt
@@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable
 import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
-import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent
+import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout
 import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker
 
 @Composable
@@ -19,7 +19,7 @@ actual fun Row(
     AddKobwebComposeStyleSheet()
     com.varabyte.kobweb.compose.foundation.layout.Row(
         PlatformModifier
-            .sizeFitContent()
+            .imitateAndroidxLayout()
             .stylesFrom(horizontalArrangement)
             .then(modifier.platformModifier),
         horizontalArrangement.platformValue,
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt
@@ -7,28 +7,44 @@ import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.web.css.height
 import com.huanshankeji.compose.web.css.width
 import com.varabyte.kobweb.compose.ui.styleModifier
+import org.jetbrains.compose.web.css.StyleScope
 
 private const val CSS_STRETCH_VALUE = "stretch" // This does not work on Chrome.
-private val cssStretchValueBrowserDependent =
+private const val CSS_WEBKIT_STRETCH_VALUE = "-webkit-fill-available"
+private const val CSS_MOZ_STRETCH_VALUE = "-moz-available"
+val cssWidthStretchValueBrowserDependent =
     when (browser) {
-        Browser.Webkit -> "-webkit-fill-available"
-        Browser.Mozilla -> "-moz-available"
+        Browser.Webkit -> CSS_WEBKIT_STRETCH_VALUE
+        Browser.Mozilla -> CSS_MOZ_STRETCH_VALUE
         null -> ""
     }
 
+val cssHeightStretchValueBrowserDependent =
+    when (browser) {
+        Browser.Webkit -> CSS_WEBKIT_STRETCH_VALUE
+        Browser.Mozilla -> "100%" // Setting `CSS_MOZ_STRETCH_VALUE` for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility.
+        null -> ""
+    }
+
+fun StyleScope.widthStretch() =
+    width(cssWidthStretchValueBrowserDependent)
+
+fun StyleScope.heightStretch() =
+    height(cssHeightStretchValueBrowserDependent)
+
 @Stable
 actual fun Modifier.fillMaxWidthStretch(): Modifier =
-    platformModify { styleModifier { width(cssStretchValueBrowserDependent) } }
+    platformModify { styleModifier { widthStretch() } }
 
 @Stable
 actual fun Modifier.fillMaxHeightStretch(): Modifier =
-    platformModify { styleModifier { height(cssStretchValueBrowserDependent) } } // Setting this for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility.
+    platformModify { styleModifier { heightStretch() } }
 
 @Stable
 actual fun Modifier.fillMaxSizeStretch(): Modifier =
     platformModify {
         styleModifier {
-            width(cssStretchValueBrowserDependent)
-            height(cssStretchValueBrowserDependent) // Setting this for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility.
+            widthStretch()
+            heightStretch()
         }
     }
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt
@@ -0,0 +1,28 @@
+package com.huanshankeji.kobweb.compose.ui.modifiers
+
+import com.huanshankeji.compose.foundation.layout.ext.cssHeightStretchValueBrowserDependent
+import com.huanshankeji.compose.foundation.layout.ext.cssWidthStretchValueBrowserDependent
+import com.varabyte.kobweb.compose.css.Height
+import com.varabyte.kobweb.compose.css.Width
+import com.varabyte.kobweb.compose.css.height
+import com.varabyte.kobweb.compose.css.width
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.styleModifier
+import org.jetbrains.compose.web.css.maxHeight
+import org.jetbrains.compose.web.css.maxWidth
+
+
+/**
+ * A modifier for layouts to make them more consistent with the `androidx.compose` behavior,
+ * by adding the parent sizes as max constrains for the children.
+ * Doing this prevents the children to push the parent out of the parent's parent,
+ * and make the `overflow-*` CSS property / the `*Scroll` modifier work better on JS DOM.
+ * See https://developer.android.com/develop/ui/compose/layouts/constraints-modifiers for more details.
+ */
+fun Modifier.imitateAndroidxLayout() =
+    styleModifier {
+        width(Width.FitContent)
+        height(Height.FitContent)
+        maxWidth(cssWidthStretchValueBrowserDependent)
+        maxHeight(cssHeightStretchValueBrowserDependent)
+    }
diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt
@@ -14,5 +14,8 @@ fun Modifier.size(width: Width, height: Height): Modifier =
     }
 
 //TODO consider removing and inlining this
+/**
+ * Consider using [Modifier.imitateAndroidxLayout] instead when adding this for a layout.
+ */
 fun Modifier.sizeFitContent() =
     size(Width.FitContent, Height.FitContent)
diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Card.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Card.js.kt
@@ -3,10 +3,10 @@ package com.huanshankeji.compose.material2
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
-import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent
+import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout
 import com.varabyte.kobweb.compose.ui.toAttrs
 import dev.petuska.kmdc.card.MDCCard
 
 @Composable
 actual fun Card(modifier: Modifier, content: @Composable () -> Unit) =
-    MDCCard(attrs = PlatformModifier.sizeFitContent().then(modifier.platformModifier).toAttrs()) { content() }
+    MDCCard(attrs = PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier).toAttrs()) { content() }
diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts
@@ -48,6 +48,7 @@ kotlin {
                 implementation(compose.runtime)
                 implementation(project(":compose-multiplatform-material2"))
                 implementation(project(":compose-multiplatform-material3"))
+                implementation(project(":compose-multiplatform-navigation"))
                 /*
                 see https://github.com/JetBrains/compose-multiplatform-core/blob/476d43b99a27696d12ef087e8028d90789645ba7/compose/ui/ui/build.gradle#L54
                 and https://github.com/JetBrains/compose-multiplatform-core/blob/381796b5e682653aa1fa53e6bcf0441d06b873f8/compose/runtime/runtime/build.gradle#L124
diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt
@@ -2,11 +2,14 @@ package com.huanshankeji.compose.material.demo
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.dp
-import com.huanshankeji.compose.foundation.layout.Box
-import com.huanshankeji.compose.foundation.layout.Row
-import com.huanshankeji.compose.foundation.layout.padding
-import com.huanshankeji.compose.foundation.rememberScrollState
-import com.huanshankeji.compose.foundation.verticalScroll
+import androidx.navigation.NavHostController
+import com.huanshankeji.androidx.navigation.compose.NavHost
+import com.huanshankeji.androidx.navigation.compose.composable
+import com.huanshankeji.androidx.navigation.compose.rememberNavController
+import com.huanshankeji.compose.foundation.layout.*
+import com.huanshankeji.compose.material3.Button
+import com.huanshankeji.compose.material3.ext.TaglessText
+import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
 
 internal enum class Selection {
@@ -18,18 +21,35 @@ val listSize = 160.dp
 fun Modifier.contentPadding() = padding(16.dp)
 val contentPaddingModifier = Modifier.contentPadding()
 
+enum class Screen {
+    Home, Common, Material2, Material3
+}
+
 @Composable
 fun App() {
-    Row {
-        @Composable
-        fun subDemoModifier() =
-            Modifier.weight(1f).verticalScroll(rememberScrollState())
+    val navController = rememberNavController()
+    NavHost(navController, Screen.Home.name) {
+        composable(Screen.Home.name) { Home(navController) }
+        //fun subDemoModifier()
+        composable(Screen.Common.name) { Common() }
+        composable(Screen.Material2.name) { Material2() }
+        composable(Screen.Material3.name) { Material3() }
+    }
+}
 
-        Common(subDemoModifier())
-        // Putting the scroll modifier in the `Box` causes `java.lang.IllegalArgumentException: Can't represent a size of 2147483577 in Constraints`.
-        Box(Modifier.weight(1f)) {
-            Material2(Modifier.verticalScroll(rememberScrollState()))
+@Composable
+fun Home(navController: NavHostController) {
+    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+            Button({ navController.navigate(Screen.Common.name) }) {
+                TaglessText("Common")
+            }
+            Button({ navController.navigate(Screen.Material2.name) }) {
+                TaglessText("Material 2")
+            }
+            Button({ navController.navigate(Screen.Material3.name) }) {
+                TaglessText("Material 3")
+            }
         }
-        Material3(subDemoModifier())
     }
 }
diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt
@@ -7,6 +7,7 @@ import com.huanshankeji.compose.foundation.ext.outerBorder
 import com.huanshankeji.compose.foundation.ext.roundedCornerBackgroundAndOuterBorder
 import com.huanshankeji.compose.foundation.ext.roundedCornerOuterBorder
 import com.huanshankeji.compose.foundation.layout.*
+import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch
 import com.huanshankeji.compose.foundation.lazy.LazyColumn
 import com.huanshankeji.compose.foundation.lazy.LazyListScope
 import com.huanshankeji.compose.foundation.lazy.LazyRow
@@ -16,8 +17,11 @@ import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.graphics.Color
 
 @Composable
-fun Common(modifier: Modifier) {
-    Column(modifier, Arrangement.spacedBy(16.dp)) {
+fun Common(modifier: Modifier = Modifier) {
+    Column(
+        modifier.fillMaxWidthStretch().verticalScroll(rememberScrollState()).contentPadding(),
+        Arrangement.spacedBy(16.dp)
+    ) {
         BasicText("basic text 1")
         BasicText("basic text 2")
 
diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt
@@ -4,11 +4,13 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.unit.dp
 import com.huanshankeji.compose.foundation.background
 import com.huanshankeji.compose.foundation.layout.*
+import com.huanshankeji.compose.foundation.rememberScrollState
 import com.huanshankeji.compose.foundation.text.KeyboardActions
 import com.huanshankeji.compose.foundation.text.KeyboardOptions
 import com.huanshankeji.compose.foundation.text.input.ImeAction
 import com.huanshankeji.compose.foundation.text.input.KeyboardCapitalization
 import com.huanshankeji.compose.foundation.text.input.KeyboardType
+import com.huanshankeji.compose.foundation.verticalScroll
 import com.huanshankeji.compose.material.icons.Icons
 import com.huanshankeji.compose.material.icons.filled.Add
 import com.huanshankeji.compose.material.icons.filled.Done
@@ -26,7 +28,7 @@ import kotlinx.coroutines.launch
 import com.huanshankeji.compose.material2.ext.Button as ExtButton
 
 @Composable
-fun Material2(modifier: Modifier) {
+fun Material2(modifier: Modifier = Modifier) {
     val snackbarHostState = remember { SnackbarHostState() }
     // It seems the modifier can't be set on `TopAppBarScaffold` or a box wrapping it
     TopAppBarScaffold({
@@ -39,7 +41,7 @@ fun Material2(modifier: Modifier) {
     }, snackbarHost = {
         SnackbarHost(snackbarHostState)
     }) {
-        Card(modifier.contentPadding()) {
+        Card(modifier.verticalScroll(rememberScrollState()).contentPadding()) {
             Column(contentPaddingModifier.background(Color(0xF8, 0xF8, 0xF8, 0xFF)), Arrangement.spacedBy(16.dp)) {
                 Text("Material text")
 
diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt
@@ -4,11 +4,14 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.unit.dp
 import com.huanshankeji.compose.ExtRecommendedApi
 import com.huanshankeji.compose.foundation.layout.*
+import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch
+import com.huanshankeji.compose.foundation.rememberScrollState
 import com.huanshankeji.compose.foundation.text.KeyboardActions
 import com.huanshankeji.compose.foundation.text.KeyboardOptions
 import com.huanshankeji.compose.foundation.text.input.ImeAction
 import com.huanshankeji.compose.foundation.text.input.KeyboardCapitalization
 import com.huanshankeji.compose.foundation.text.input.KeyboardType
+import com.huanshankeji.compose.foundation.verticalScroll
 import com.huanshankeji.compose.material.icons.Icons
 import com.huanshankeji.compose.material.icons.filled.Add
 import com.huanshankeji.compose.material.icons.filled.ArrowDropDown
@@ -25,8 +28,11 @@ import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.material3.Button as RowScopeButton
 
 @Composable
-fun Material3(modifier: Modifier) {
-    Column(modifier, Arrangement.spacedBy(16.dp)) {
+fun Material3(modifier: Modifier = Modifier) {
+    Column(
+        modifier.fillMaxWidthStretch().verticalScroll(rememberScrollState()).contentPadding(),
+        Arrangement.spacedBy(16.dp)
+    ) {
         var count by remember { mutableStateOf(0) }
         val onClick: () -> Unit = { count++ }
         val buttonContent: @Composable () -> Unit = {
diff --git a/demo/src/jsMain/resources/index.html b/demo/src/jsMain/resources/index.html
@@ -5,9 +5,11 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="UTF-8">
     <title>Compose Multiplatform Material demo</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
     <style>
         body {
             margin: 0;
+            height: 100vh;
         }
     </style>
 </head>

Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,8 @@ fun Modifier.size(width: Width, height: Height): Modifier =`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`//TODO consider removing and inlining this`
	`17`	`+/**`
	`18`	`+ * Consider using [Modifier.imitateAndroidxLayout] instead when adding this for a layout.`
	`19`	`+ */`
`17`	`20`	`fun Modifier.sizeFitContent() =`
`18`	`21`	`size(Width.FitContent, Height.FitContent)`