library: Use material3-window-size-class to get current window size

YuKongA · YuKongA · commit ee58ec8d642b · 2024-10-11T13:51:04.000+08:00
diff --git a/composeApp/src/commonMain/kotlin/SecondPage.kt b/composeApp/src/commonMain/kotlin/SecondPage.kt
@@ -5,9 +5,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import top.yukonga.miuix.kmp.basic.LazyColumn
 import top.yukonga.miuix.kmp.basic.ScrollBehavior
 import top.yukonga.miuix.kmp.extra.SuperDropdown
-import top.yukonga.miuix.kmp.basic.LazyColumn
 
 @Composable
 fun SecondPage(
@@ -28,6 +29,7 @@ fun SecondPage(
                 items = dropdownOptions,
                 selectedIndex = dropdownSelectedOption.value,
                 onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption },
+                horizontalPadding = 12.dp
             )
         }
         item {
diff --git a/composeApp/src/commonMain/kotlin/ThirdPage.kt b/composeApp/src/commonMain/kotlin/ThirdPage.kt
@@ -5,10 +5,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import top.yukonga.miuix.kmp.basic.LazyColumn
 import top.yukonga.miuix.kmp.basic.ScrollBehavior
 import top.yukonga.miuix.kmp.extra.SuperDropdown
 import top.yukonga.miuix.kmp.extra.SuperSwitch
-import top.yukonga.miuix.kmp.basic.LazyColumn
 import top.yukonga.miuix.kmp.utils.Platform
 import top.yukonga.miuix.kmp.utils.getWindowSize
 import top.yukonga.miuix.kmp.utils.platform
@@ -65,7 +65,8 @@ fun ThirdPage(
                 title = "Color Mode",
                 items = listOf("System", "Light", "Dark"),
                 selectedIndex = colorMode.value,
-                onSelectedIndexChange = { colorMode.value = it }
+                onSelectedIndexChange = { colorMode.value = it },
+                horizontalPadding = 12.dp
             )
         }
         item {
diff --git a/composeApp/src/desktopMain/kotlin/main.kt b/composeApp/src/desktopMain/kotlin/main.kt
@@ -5,7 +5,6 @@ import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.rememberWindowState
-import top.yukonga.miuix.kmp.utils.WindowProvider
 
 fun main() = application {
     val state = rememberWindowState(
@@ -17,7 +16,6 @@ fun main() = application {
         onCloseRequest = ::exitApplication,
         title = "Miuix",
     ) {
-        WindowProvider.init(window)
         App()
     }
 }
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -12,6 +12,7 @@ kotlin = "2.0.20"
 [libraries]
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity-compose" }
 androidx-window = { group = "androidx.window", name = "window", version.ref = "androidx-window" }
+jetbrains-compose-window-size = { module = "org.jetbrains.compose.material3:material3-window-size-class", version.ref = "compose-plugin" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }
diff --git a/miuix/build.gradle.kts b/miuix/build.gradle.kts
@@ -50,6 +50,16 @@ kotlin {
         }
         desktopMain.dependencies {
             implementation(compose.desktop.currentOs)
+            implementation(libs.jetbrains.compose.window.size)
+        }
+        jsMain.dependencies {
+            implementation(libs.jetbrains.compose.window.size)
+        }
+        macosMain.dependencies {
+            implementation(libs.jetbrains.compose.window.size)
+        }
+        wasmJsMain.dependencies {
+            implementation(libs.jetbrains.compose.window.size)
         }
     }
 }
diff --git a/miuix/src/androidMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.android.kt b/miuix/src/androidMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.android.kt
@@ -16,10 +16,8 @@ import androidx.window.layout.WindowMetricsCalculator
 actual fun getWindowSize(): WindowSize {
     val context = LocalContext.current
     val windowMetrics: WindowMetrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(context)
-
     val widthPx = windowMetrics.bounds.width()
     val heightPx = windowMetrics.bounds.height()
-
     return WindowSize(widthPx, heightPx)
 }
 
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt
@@ -71,11 +71,12 @@ fun SuperDialog(
 ) {
     val density = LocalDensity.current
     val getWindowSize by rememberUpdatedState(getWindowSize())
-    println(getWindowSize.width.dp / density.density)
+    val windowWidth = getWindowSize.width.dp / density.density
+    val windowHeight = getWindowSize.height.dp / density.density
     val paddingModifier = remember(outsideMargin) { Modifier.padding(horizontal = outsideMargin.width).padding(bottom = outsideMargin.height) }
     val roundedCorner by rememberUpdatedState(getRoundedCorner())
     val bottomCornerRadius by remember { derivedStateOf { if (roundedCorner != 0.dp) roundedCorner - outsideMargin.width else 32.dp } }
-    val contentAlignment by remember { derivedStateOf { if (getWindowSize.width > getWindowSize.height && getWindowSize.width.dp / density.density > 1200.dp) Alignment.Center else Alignment.BottomCenter } }
+    val contentAlignment by rememberUpdatedState { derivedStateOf { if (windowHeight >= 480.dp && windowWidth >= 840.dp) Alignment.Center else Alignment.BottomCenter } }
 
     if (!dialogStates.contains(show)) dialogStates.add(show)
     LaunchedEffect(show.value) {
@@ -114,7 +115,7 @@ fun SuperDialog(
                 .pointerInput(Unit) {
                     detectTapGestures { /* Do nothing to consume the click */ }
                 }
-                .align(contentAlignment)
+                .align(contentAlignment.invoke().value)
                 .graphicsLayer(
                     shape = SquircleShape(bottomCornerRadius),
                     clip = false
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt
@@ -1,7 +1,6 @@
 package top.yukonga.miuix.kmp.extra
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
@@ -79,6 +78,7 @@ import kotlin.math.roundToInt
  * @param summary The summary of the [SuperDropdown].
  * @param summaryColor The color of the summary.
  * @param items The options of the [SuperDropdown].
+ * @param horizontalPadding The horizontal padding of the [SuperDropdown].
  * @param alwaysRight Whether the popup is always show on the right side.
  * @param insideMargin The margin inside the [SuperDropdown].
  * @param defaultWindowInsetsPadding Whether to apply default window insets padding to the [SuperDropdown].
@@ -95,6 +95,7 @@ fun SuperDropdown(
     summaryColor: Color = MiuixTheme.colorScheme.onSurfaceVariantSummary,
     items: List<String>,
     alwaysRight: Boolean = false,
+    horizontalPadding: Dp = 0.dp,
     insideMargin: DpSize = DpSize(16.dp, 16.dp),
     defaultWindowInsetsPadding: Boolean = true,
     selectedIndex: Int,
@@ -207,7 +208,7 @@ fun SuperDropdown(
                     LazyColumn(
                         modifier = Modifier
                             .padding(
-                                horizontal = (windowWeightPx.dp - componentWidthPx.dp) / 2 / density.density - if (defaultWindowInsetsPadding)
+                                horizontal = horizontalPadding + (windowWeightPx.dp - componentWidthPx.dp) / 2 / density.density - if (defaultWindowInsetsPadding)
                                     (WindowInsets.displayCutout.asPaddingValues(density).calculateLeftPadding(LayoutDirection.Ltr) +
                                             WindowInsets.displayCutout.asPaddingValues(density).calculateRightPadding(LayoutDirection.Ltr)) / 2 else 0.dp
                             )
@@ -295,10 +296,7 @@ fun DropdownImpl(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween,
         modifier = Modifier
-            .clickable(
-                interactionSource = dropdownInteractionSource,
-                indication = LocalIndication.current,
-            ) {
+            .clickable {
                 onSelectedIndexChange(index)
             }
             .background(backgroundColor)
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.kt
@@ -3,6 +3,17 @@ package top.yukonga.miuix.kmp.utils
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.Dp
 
+/**
+ * Window size data class.
+ */
+data class WindowSize(val width: Int, val height: Int)
+
+/**
+ * Returns the current window size.
+ */
+@Composable
+expect fun getWindowSize(): WindowSize
+
 /**
  * Platform enum class.
  */
@@ -20,17 +31,6 @@ enum class Platform {
  */
 expect fun platform(): Platform
 
-/**
- * Window size data class.
- */
-data class WindowSize(val width: Int, val height: Int)
-
-/**
- * Returns the current window size.
- */
-@Composable
-expect fun getWindowSize(): WindowSize
-
 /**
  * Returns the rounded corner of the current device.
  */
diff --git a/miuix/src/desktopMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.desktop.kt b/miuix/src/desktopMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.desktop.kt
@@ -1,38 +1,20 @@
 package top.yukonga.miuix.kmp.utils
 
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.awt.ComposeWindow
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.platform.LocalWindowInfo
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import java.awt.KeyboardFocusManager
 import java.awt.event.KeyEvent
-import kotlin.math.roundToInt
-
-object WindowProvider {
-    private var composeWindow: ComposeWindow? = null
-
-    fun init(window: ComposeWindow) {
-        composeWindow = window
-    }
-
-    fun getWindowSize(): WindowSize {
-        return composeWindow?.let { window ->
-            WindowSize(
-                width = window.bounds.width - window.insets.left - window.insets.right,
-                height = window.bounds.height - window.insets.top
-            )
-        } ?: WindowSize(0, 0)
-    }
-}
 
 @Composable
+@OptIn(ExperimentalComposeUiApi::class)
 actual fun getWindowSize(): WindowSize {
-    val density = LocalDensity.current.density
-    val windowSize = WindowProvider.getWindowSize()
+    val window = LocalWindowInfo.current
     return WindowSize(
-        width = (windowSize.width * density).roundToInt(),
-        height = (windowSize.height * density).roundToInt()
+        width = window.containerSize.width,
+        height = window.containerSize.height
     )
 }
 
diff --git a/miuix/src/jsMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.js.kt b/miuix/src/jsMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.js.kt
@@ -1,20 +1,21 @@
 package top.yukonga.miuix.kmp.utils
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.platform.LocalWindowInfo
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import kotlinx.browser.window
-import kotlin.math.roundToInt
 
 @Composable
+@OptIn(ExperimentalComposeUiApi::class)
 actual fun getWindowSize(): WindowSize {
-    val density = LocalDensity.current.density
-    val width = window.innerWidth * density
-    val height = window.innerHeight * density
-    return WindowSize(width.roundToInt(), height.roundToInt())
+    val window = LocalWindowInfo.current
+    return WindowSize(
+        width = window.containerSize.width,
+        height = window.containerSize.height
+    )
 }
 
 actual fun platform(): Platform = Platform.Js
diff --git a/miuix/src/macosMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.macos.kt b/miuix/src/macosMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.macos.kt
@@ -2,30 +2,25 @@ package top.yukonga.miuix.kmp.utils
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.platform.LocalWindowInfo
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import kotlinx.cinterop.ExperimentalForeignApi
-import kotlinx.cinterop.useContents
-import platform.AppKit.NSApplication
 import platform.AppKit.NSEvent
 import platform.AppKit.NSEventMaskKeyDown
-import platform.AppKit.NSWindow
-import kotlin.math.roundToInt
 
-actual fun platform(): Platform = Platform.MacOS
-
-@OptIn(ExperimentalForeignApi::class)
 @Composable
+@OptIn(ExperimentalComposeUiApi::class)
 actual fun getWindowSize(): WindowSize {
-    val window: NSWindow? = NSApplication.sharedApplication.mainWindow
-    val contentLayoutRect = window?.contentLayoutRect ?: return WindowSize(0, 0)
-    val density = LocalDensity.current.density
-    val width = contentLayoutRect.useContents { size.width } * density
-    val height = contentLayoutRect.useContents { size.height } * density
-    return WindowSize(width.roundToInt(), height.roundToInt())
+    val window = LocalWindowInfo.current
+    return WindowSize(
+        width = window.containerSize.width,
+        height = window.containerSize.height
+    )
 }
 
+actual fun platform(): Platform = Platform.MacOS
+
 @Composable
 actual fun getRoundedCorner(): Dp = 0.dp
 
diff --git a/miuix/src/wasmJsMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.wasmJs.kt b/miuix/src/wasmJsMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.wasmJs.kt
@@ -2,19 +2,21 @@ package top.yukonga.miuix.kmp.utils
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.platform.LocalWindowInfo
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import kotlinx.browser.window
 import org.w3c.dom.events.KeyboardEvent
-import kotlin.math.roundToInt
 
 @Composable
+@OptIn(ExperimentalComposeUiApi::class)
 actual fun getWindowSize(): WindowSize {
-    val density = LocalDensity.current.density
-    val width = window.innerWidth * density
-    val height = window.innerHeight * density
-    return WindowSize(width.roundToInt(), height.roundToInt())
+    val window = LocalWindowInfo.current
+    return WindowSize(
+        width = window.containerSize.width,
+        height = window.containerSize.height
+    )
 }
 
 actual fun platform(): Platform = Platform.WasmJs

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@ import androidx.compose.ui.window.Window`
`5`	`5`	`import androidx.compose.ui.window.WindowPosition`
`6`	`6`	`import androidx.compose.ui.window.application`
`7`	`7`	`import androidx.compose.ui.window.rememberWindowState`
`8`		`-import top.yukonga.miuix.kmp.utils.WindowProvider`
`9`	`8`
`10`	`9`	`fun main() = application {`
`11`	`10`	`val state = rememberWindowState(`
`@@ -17,7 +16,6 @@ fun main() = application {`
`17`	`16`	`onCloseRequest = ::exitApplication,`
`18`	`17`	`title = "Miuix",`
`19`	`18`	`) {`
`20`		`- WindowProvider.init(window)`
`21`	`19`	`App()`
`22`	`20`	`}`
`23`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,16 @@ kotlin {`
`50`	`50`	`}`
`51`	`51`	`desktopMain.dependencies {`
`52`	`52`	`implementation(compose.desktop.currentOs)`
	`53`	`+ implementation(libs.jetbrains.compose.window.size)`
	`54`	`+ }`
	`55`	`+ jsMain.dependencies {`
	`56`	`+ implementation(libs.jetbrains.compose.window.size)`
	`57`	`+ }`
	`58`	`+ macosMain.dependencies {`
	`59`	`+ implementation(libs.jetbrains.compose.window.size)`
	`60`	`+ }`
	`61`	`+ wasmJsMain.dependencies {`
	`62`	`+ implementation(libs.jetbrains.compose.window.size)`
`53`	`63`	`}`
`54`	`64`	`}`
`55`	`65`	`}`