Box support and 2048 board demo

multiplatform-compose/src/androidMain/kotlin/com/rouge41/kmm/compose/foundation/layout/Arrangement.kt

@@ -1,6 +1,8 @@
 package com.rouge41.kmm.compose.foundation.layout
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.InternalLayoutApi
+import androidx.compose.ui.unit.Dp
 
 @OptIn(InternalLayoutApi::class)
 actual typealias ArrangementVertical = androidx.compose.foundation.layout.Arrangement.Vertical
@@ -18,4 +20,6 @@ actual object Arrangement {
     actual val SpaceEvenly: ArrangementHorizontalOrVertical = androidx.compose.foundation.layout.Arrangement.SpaceEvenly
     actual val SpaceBetween: ArrangementHorizontalOrVertical = androidx.compose.foundation.layout.Arrangement.SpaceBetween
     actual val SpaceAround: ArrangementHorizontalOrVertical = androidx.compose.foundation.layout.Arrangement.SpaceAround
+
+    actual fun spacedBy(space: Dp): ArrangementHorizontalOrVertical = androidx.compose.foundation.layout.Arrangement.spacedBy(space)
 }

multiplatform-compose/src/androidMain/kotlin/com/rouge41/kmm/compose/foundation/layout/Box.kt

@@ -0,0 +1,17 @@
+package com.rouge41.kmm.compose.foundation.layout
+
+import com.rouge41.kmm.compose.runtime.Composable
+import com.rouge41.kmm.compose.ui.Alignment
+import com.rouge41.kmm.compose.ui.AlignmentVerticalAndHorizontal
+import com.rouge41.kmm.compose.ui.Modifier
+import androidx.compose.foundation.layout.Box as _Box
+
+actual typealias BoxScope = androidx.compose.foundation.layout.BoxScope
+
+@Composable
+@Suppress("ACTUAL_FUNCTION_WITH_DEFAULT_ARGUMENTS")
+actual fun Box(
+    modifier: Modifier = Modifier,
+    contentAlignment: AlignmentVerticalAndHorizontal = Alignment.TopStart,
+    content: @Composable BoxScope.() -> Unit
+) = _Box(modifier = modifier, contentAlignment = contentAlignment, content = content)

multiplatform-compose/src/androidMain/kotlin/com/rouge41/kmm/compose/foundation/layout/Row.kt

@@ -6,6 +6,7 @@ import com.rouge41.kmm.compose.ui.AlignmentVertical
 import com.rouge41.kmm.compose.ui.Modifier
 import androidx.compose.foundation.layout.Row as _Row
 
+@Suppress("NO_ACTUAL_CLASS_MEMBER_FOR_EXPECTED_CLASS")
 actual typealias RowScope = androidx.compose.foundation.layout.RowScope
 
 @Suppress("ACTUAL_FUNCTION_WITH_DEFAULT_ARGUMENTS")

multiplatform-compose/src/androidMain/kotlin/com/rouge41/kmm/compose/ui/Modifier.kt

@@ -1,5 +1,6 @@
 package com.rouge41.kmm.compose.ui
 
+import androidx.compose.ui.graphics.Shape
 import com.rouge41.kmm.compose.runtime.Composable
 import com.rouge41.kmm.compose.ui.graphics.Color
 import com.rouge41.kmm.compose.ui.unit.Dp
@@ -14,17 +15,22 @@ import androidx.compose.foundation.layout.preferredWidth as _preferredWidth
 import androidx.compose.foundation.layout.preferredSize as _preferredSize
 import androidx.compose.foundation.layout.width as _width
 import androidx.compose.foundation.clickable as _clickable
+import androidx.compose.ui.draw.clip as _clip
+import androidx.compose.foundation.layout.aspectRatio as _aspectRatio
 
 actual typealias Modifier = androidx.compose.ui.Modifier
 actual fun Modifier.fillMaxSize(): Modifier = _fillMaxSize()
 actual fun Modifier.fillMaxWidth(): Modifier = _fillMaxWidth()
 actual fun Modifier.fillMaxHeight(): Modifier = _fillMaxHeight()
 actual fun Modifier.padding(dp: Dp): Modifier = _padding(dp)
+actual fun Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier = _padding(start, top, end, bottom)
 actual fun Modifier.background(color: Color): Modifier = _background(color)
 actual fun Modifier.width(dp: Dp): Modifier = _width(dp)
 actual fun Modifier.height(dp: Dp): Modifier = _height(dp)
 actual fun Modifier.preferredWidth(dp: Dp): Modifier = _preferredWidth(dp)
 actual fun Modifier.preferredHeight(dp: Dp): Modifier = _preferredHeight(dp)
 actual fun Modifier.preferredSize(dp: Dp): Modifier = _preferredSize(dp)
 @Composable
-actual fun Modifier.clickable(onClick: () -> Unit): Modifier = _clickable(onClick = onClick)
+actual fun Modifier.clickable(onClick: () -> Unit): Modifier = _clickable(onClick = onClick)
+actual fun Modifier.clip(shape: Shape): Modifier = _clip(shape = shape)
+actual fun Modifier.aspectRatio(ratio: Float, matchHeightConstraintsFirst: Boolean): Modifier = _aspectRatio(ratio, matchHeightConstraintsFirst)

multiplatform-compose/src/commonMain/kotlin/com/rouge41/kmm/compose/foundation/layout/Arrangement.kt

@@ -1,5 +1,7 @@
 package com.rouge41.kmm.compose.foundation.layout
 
+import com.rouge41.kmm.compose.ui.unit.Dp
+
 expect interface ArrangementVertical
 expect interface ArrangementHorizontal
 expect interface ArrangementHorizontalOrVertical
@@ -12,4 +14,6 @@ expect object Arrangement {
     val SpaceEvenly: ArrangementHorizontalOrVertical
     val SpaceBetween: ArrangementHorizontalOrVertical
     val SpaceAround: ArrangementHorizontalOrVertical
+
+    fun spacedBy(space: Dp): ArrangementHorizontalOrVertical
 }

multiplatform-compose/src/commonMain/kotlin/com/rouge41/kmm/compose/foundation/layout/Box.kt

@@ -0,0 +1,15 @@
+package com.rouge41.kmm.compose.foundation.layout
+
+import com.rouge41.kmm.compose.runtime.Composable
+import com.rouge41.kmm.compose.ui.Alignment
+import com.rouge41.kmm.compose.ui.AlignmentVerticalAndHorizontal
+import com.rouge41.kmm.compose.ui.Modifier
+
+expect interface BoxScope
+
+@Composable
+expect fun Box(
+    modifier: Modifier = Modifier,
+    contentAlignment: AlignmentVerticalAndHorizontal = Alignment.TopStart,
+    content: @Composable BoxScope.() -> Unit
+)

multiplatform-compose/src/commonMain/kotlin/com/rouge41/kmm/compose/foundation/layout/Row.kt

@@ -5,7 +5,9 @@ import com.rouge41.kmm.compose.ui.Alignment
 import com.rouge41.kmm.compose.ui.AlignmentVertical
 import com.rouge41.kmm.compose.ui.Modifier
 
-expect interface RowScope
+expect interface RowScope {
+        fun Modifier.weight(weight: Float, fill: Boolean = true): Modifier
+}
 
 @Composable
 expect fun Row(

multiplatform-compose/src/commonMain/kotlin/com/rouge41/kmm/compose/ui/Modifier.kt

@@ -2,7 +2,9 @@ package com.rouge41.kmm.compose.ui
 
 import com.rouge41.kmm.compose.runtime.Composable
 import com.rouge41.kmm.compose.ui.graphics.Color
+import com.rouge41.kmm.compose.ui.graphics.Shape
 import com.rouge41.kmm.compose.ui.unit.Dp
+import com.rouge41.kmm.compose.ui.unit.dp
 
 expect interface Modifier {
     companion object : Modifier { }
@@ -11,11 +13,14 @@ expect fun Modifier.fillMaxSize(): Modifier
 expect fun Modifier.fillMaxWidth(): Modifier
 expect fun Modifier.fillMaxHeight(): Modifier
 expect fun Modifier.padding(dp: Dp): Modifier
+expect fun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
 expect fun Modifier.background(color: Color): Modifier
 expect fun Modifier.width(dp: Dp): Modifier
 expect fun Modifier.height(dp: Dp): Modifier
 expect fun Modifier.preferredWidth(dp: Dp): Modifier
 expect fun Modifier.preferredHeight(dp: Dp): Modifier
 expect fun Modifier.preferredSize(dp: Dp): Modifier
 @Composable
-expect fun Modifier.clickable(onClick: () -> Unit): Modifier
+expect fun Modifier.clickable(onClick: () -> Unit): Modifier
+expect fun Modifier.clip(shape: Shape): Modifier
+expect fun Modifier.aspectRatio(ratio: Float, matchHeightConstraintsFirst: Boolean = false): Modifier

multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/foundation/layout/Arrangement.kt

@@ -1,5 +1,7 @@
 package com.rouge41.kmm.compose.foundation.layout
 
+import com.rouge41.kmm.compose.ui.unit.Dp
+
 actual interface ArrangementVertical
 actual interface ArrangementHorizontal
 actual interface ArrangementHorizontalOrVertical : ArrangementHorizontal, ArrangementVertical
@@ -13,22 +15,25 @@ actual object Arrangement {
     actual val SpaceEvenly: ArrangementHorizontalOrVertical = iosArrangement.SpaceEvenly
     actual val SpaceBetween: ArrangementHorizontalOrVertical = iosArrangement.SpaceBetween
     actual val SpaceAround: ArrangementHorizontalOrVertical = iosArrangement.SpaceAround
+
+    actual fun spacedBy(space: Dp): ArrangementHorizontalOrVertical = iosArrangement.spacedBy(space)
 }
 
-enum class iosArrangementHorizontal : ArrangementHorizontal {
-    Start,
-    End,
+sealed class iosArrangementHorizontal : ArrangementHorizontal {
+    object Start: iosArrangementHorizontal()
+    object End: iosArrangementHorizontal()
 }
 
-enum class iosArrangementVertical : ArrangementVertical {
-    Top,
-    Bottom,
+sealed class iosArrangementVertical : ArrangementVertical {
+    object Top: iosArrangementVertical()
+    object Bottom: iosArrangementVertical()
 }
 
-enum class iosArrangement : ArrangementVertical, ArrangementHorizontal,
+sealed class iosArrangement : ArrangementVertical, ArrangementHorizontal,
     ArrangementHorizontalOrVertical {
-    Center,
-    SpaceEvenly,
-    SpaceBetween,
-    SpaceAround,
+    object Center: iosArrangement()
+    object SpaceEvenly: iosArrangement()
+    object SpaceBetween: iosArrangement()
+    object SpaceAround: iosArrangement()
+    data class spacedBy(val space: Dp): iosArrangement()
 }

multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/foundation/layout/Box.kt

@@ -0,0 +1,64 @@
+package com.rouge41.kmm.compose.foundation.layout
+
+import cocoapods.YogaKit.*
+import com.rouge41.kmm.compose.ios.UIComposeView
+import com.rouge41.kmm.compose.ios.addSubview
+import com.rouge41.kmm.compose.runtime.Composable
+import com.rouge41.kmm.compose.ui.AlignmentVerticalAndHorizontal
+import com.rouge41.kmm.compose.ui.Modifier
+import com.rouge41.kmm.compose.ui.iosAlignment
+import com.rouge41.kmm.compose.ui.iosAlignmentVertical
+
+actual interface BoxScope
+class iosBoxScope : BoxScope
+
+@Composable
+actual fun Box(
+    modifier: Modifier,
+    contentAlignment: AlignmentVerticalAndHorizontal,
+    content: @Composable BoxScope.() -> Unit
+) {
+    val view = UIComposeView.createOrReuse("${content::class}")
+    modifier.setup(view)
+    view.configureLayoutWithBlock { layout ->
+        when (contentAlignment) {
+            iosAlignment.TopStart -> {
+                layout?.alignItems = YGAlign.YGAlignFlexStart
+                layout?.justifyContent = YGJustify.YGJustifyFlexStart
+            }
+            iosAlignment.TopCenter -> {
+                layout?.alignItems = YGAlign.YGAlignFlexStart
+                layout?.justifyContent = YGJustify.YGJustifyCenter
+            }
+            iosAlignment.TopEnd -> {
+                layout?.alignItems = YGAlign.YGAlignFlexStart
+                layout?.justifyContent = YGJustify.YGJustifyFlexEnd
+            }
+            iosAlignment.CenterStart -> {
+                layout?.alignItems = YGAlign.YGAlignCenter
+                layout?.justifyContent = YGJustify.YGJustifyFlexStart
+            }
+            iosAlignment.Center -> {
+                layout?.alignItems = YGAlign.YGAlignCenter
+                layout?.justifyContent = YGJustify.YGJustifyCenter
+            }
+            iosAlignment.CenterEnd -> {
+                layout?.alignItems = YGAlign.YGAlignCenter
+                layout?.justifyContent = YGJustify.YGJustifyFlexEnd
+            }
+            iosAlignment.BottomStart -> {
+                layout?.alignItems = YGAlign.YGAlignFlexEnd
+                layout?.justifyContent = YGJustify.YGJustifyFlexStart
+            }
+            iosAlignment.BottomCenter -> {
+                layout?.alignItems = YGAlign.YGAlignFlexEnd
+                layout?.justifyContent = YGJustify.YGJustifyCenter
+            }
+            iosAlignment.BottomEnd -> {
+                layout?.alignItems = YGAlign.YGAlignFlexEnd
+                layout?.justifyContent = YGJustify.YGJustifyFlexEnd
+            }
+        }
+    }
+    addSubview(view) { content.invoke(iosBoxScope()) }
+}

multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/foundation/layout/Column.kt

@@ -7,6 +7,9 @@ import com.rouge41.kmm.compose.ios.addSubview
 import com.rouge41.kmm.compose.runtime.Composable
 import com.rouge41.kmm.compose.ui.AlignmentHorizontal
 import com.rouge41.kmm.compose.ui.iosAlignmentHorizontal
+import com.rouge41.kmm.compose.ui.unit.toCGFloat
+import platform.UIKit.UIView
+import platform.UIKit.subviews
 
 actual interface ColumnScope
 class iosColumnScope : ColumnScope
@@ -37,4 +40,13 @@ actual fun Column(
         }
     }
     addSubview(view) { content.invoke(iosColumnScope()) }
+    if (verticalArrangement is iosArrangement.spacedBy) {
+        for ((index, subview) in view.subviews.withIndex()) {
+            if (subview is UIView && index > 0) {
+                subview.configureLayoutWithBlock { layout ->
+                    layout?.marginTop = YGPointValue(verticalArrangement.space.toCGFloat())
+                }
+            }
+        }
+    }
 }

multiplatform-compose/src/iosX64Main/kotlin/com/rouge41/kmm/compose/foundation/layout/Row.kt

@@ -4,12 +4,25 @@ import cocoapods.YogaKit.*
 import com.rouge41.kmm.compose.ios.UIComposeView
 import com.rouge41.kmm.compose.ios.addSubview
 import com.rouge41.kmm.compose.runtime.Composable
-import com.rouge41.kmm.compose.ui.AlignmentVertical
-import com.rouge41.kmm.compose.ui.Modifier
-import com.rouge41.kmm.compose.ui.iosAlignmentVertical
+import com.rouge41.kmm.compose.ui.*
+import com.rouge41.kmm.compose.ui.unit.toCGFloat
+import platform.UIKit.UIView
+import platform.UIKit.subviews
 
-actual interface RowScope
-class iosRowScope : RowScope
+actual interface RowScope {
+    actual fun Modifier.weight(
+        weight: Float,
+        fill: Boolean
+    ): Modifier
+}
+
+class iosRowScope : RowScope {
+    override fun Modifier.weight(weight: Float, fill: Boolean): Modifier {
+        val modifier = if (this is iosModifier) { this } else { iosModifier() }
+        modifier.changes.add(iosModifier.Layout.weight(weight.toDouble(), fill))
+        return modifier
+    }
+}
 
 @Composable
 actual fun Row(
@@ -37,4 +50,13 @@ actual fun Row(
         }
     }
     addSubview(view) { content.invoke(iosRowScope()) }
+    if (horizontalArrangement is iosArrangement.spacedBy) {
+        for ((index, subview) in view.subviews.withIndex()) {
+            if (subview is UIView && index > 0) {
+                subview.configureLayoutWithBlock { layout ->
+                    layout?.marginLeft = YGPointValue(horizontalArrangement.space.toCGFloat())
+                }
+            }
+        }
+    }
 }