Merge pull request #617 from zsoltk/unify-position-alignment

Unify inside & outside position alignment

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### API breaking changes
 
 - [#612](https://github.com/bumble-tech/appyx/pull/612) – Rename MotionController to Visualisation
+- [#617](https://github.com/bumble-tech/appyx/pull/617) – Unify inside & outside position alignment
 
 ### Changed
 

appyx-components/experimental/cards/common/src/commonMain/kotlin/com/bumble/appyx/components/experimental/cards/ui/CardsVisualisation.kt

@@ -18,7 +18,7 @@ import com.bumble.appyx.interactions.core.ui.property.impl.RotationZ
 import com.bumble.appyx.interactions.core.ui.property.impl.Scale
 import com.bumble.appyx.interactions.core.ui.property.impl.ZIndex
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOutside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation
 import com.bumble.appyx.utils.multiplatform.AppyxLogger
@@ -45,7 +45,7 @@ class CardsVisualisation<InteractionTarget : Any>(
     )
 
     private val votePass = TargetUiState(
-        position = PositionOutside.Target(
+        positionAlignment = PositionAlignment.Target(
             BiasAlignment.OutsideAlignment(-voteCardPositionMultiplier, 0)
         ),
         scale = Scale.Target(1f),
@@ -54,7 +54,7 @@ class CardsVisualisation<InteractionTarget : Any>(
     )
 
     private val voteLike = TargetUiState(
-        position = PositionOutside.Target(
+        positionAlignment = PositionAlignment.Target(
             BiasAlignment.OutsideAlignment(voteCardPositionMultiplier, 0)
         ),
         scale = Scale.Target(1f),

appyx-components/experimental/cards/common/src/commonMain/kotlin/com/bumble/appyx/components/experimental/cards/ui/TargetUiState.kt

@@ -1,17 +1,16 @@
 package com.bumble.appyx.components.experimental.cards.ui
 
-import androidx.compose.ui.unit.DpOffset
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationZ
 import com.bumble.appyx.interactions.core.ui.property.impl.Scale
 import com.bumble.appyx.interactions.core.ui.property.impl.ZIndex
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOutside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MutableUiStateSpecs
 
 @Suppress("unused")
 @MutableUiStateSpecs
 class TargetUiState(
     val scale: Scale.Target = Scale.Target(1f),
-    val position: PositionOutside.Target = PositionOutside.Target(DpOffset.Zero),
+    val positionAlignment: PositionAlignment.Target = PositionAlignment.Target(),
     val rotationZ: RotationZ.Target = RotationZ.Target(0f),
     val zIndex: ZIndex.Target = ZIndex.Target(0f),
 )

appyx-components/experimental/modal/common/src/commonMain/kotlin/com/bumble/appyx/components/modal/ui/ModalVisualisation.kt

@@ -13,7 +13,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.Gesture
 import com.bumble.appyx.interactions.core.ui.gesture.GestureFactory
 import com.bumble.appyx.interactions.core.ui.gesture.dragVerticalDirection
 import com.bumble.appyx.interactions.core.ui.property.impl.Height
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOutside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.property.impl.RoundedCorners
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment.OutsideAlignment
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment.OutsideAlignment.Companion.InContainer
@@ -30,27 +30,27 @@ class ModalVisualisation<InteractionTarget : Any>(
     private val createdState: TargetUiState =
         TargetUiState(
             height = Height.Target(0f),
-            position = PositionOutside.Target(InContainer),
+            positionAlignment = PositionAlignment.Target(InContainer),
             corner = RoundedCorners.Target(8),
         )
     private val modalState: TargetUiState =
         TargetUiState(
             height = Height.Target(0.5f),
-            position = PositionOutside.Target(OutsideAlignment(0f, 0.5f)),
+            positionAlignment = PositionAlignment.Target(OutsideAlignment(0f, 0.5f)),
             corner = RoundedCorners.Target(8),
         )
 
     private val fullScreenState: TargetUiState =
         TargetUiState(
             height = Height.Target(1f),
-            position = PositionOutside.Target(InContainer),
+            positionAlignment = PositionAlignment.Target(InContainer),
             corner = RoundedCorners.Target(0),
         )
 
     private val destroyedState: TargetUiState =
         TargetUiState(
             height = Height.Target(1f),
-            position = PositionOutside.Target(OutsideAlignment(0f, 1.5f)),
+            positionAlignment = PositionAlignment.Target(OutsideAlignment(0f, 1.5f)),
             corner = RoundedCorners.Target(0),
         )
 

appyx-components/experimental/modal/common/src/commonMain/kotlin/com/bumble/appyx/components/modal/ui/TargetUiState.kt

@@ -2,14 +2,14 @@ package com.bumble.appyx.components.modal.ui
 
 import com.bumble.appyx.interactions.core.ui.context.UiContext
 import com.bumble.appyx.interactions.core.ui.property.impl.Height
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOutside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.property.impl.RoundedCorners
 import com.bumble.appyx.interactions.core.ui.state.MutableUiStateSpecs
 
 @MutableUiStateSpecs
 class TargetUiState(
     val height: Height.Target,
-    val position: PositionOutside.Target,
+    val positionAlignment: PositionAlignment.Target,
     val corner: RoundedCorners.Target,
 ) {
 
@@ -19,7 +19,7 @@ class TargetUiState(
         MutableUiState(
             uiContext = uiContext,
             height = Height(uiContext.coroutineScope, height),
-            position = PositionOutside(uiContext.coroutineScope, position),
+            positionAlignment = PositionAlignment(uiContext.coroutineScope, positionAlignment),
             corner = RoundedCorners(uiContext.coroutineScope, corner),
         )
 }

appyx-components/experimental/promoter/common/src/commonMain/kotlin/com/bumble/appyx/components/experimental/promoter/ui/PromoterVisualisation.kt

@@ -15,7 +15,8 @@ import com.bumble.appyx.interactions.core.ui.property.impl.RotationY
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationZ
 import com.bumble.appyx.interactions.core.ui.property.impl.Scale
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment.InsideAlignment.Companion.Center
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOffset
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation
 import kotlin.math.min
@@ -72,7 +73,8 @@ class PromoterVisualisation<InteractionTarget : Any>(
     @Suppress("LongMethod")
     private fun createTargetUiStates(radius: Float) {
         created = TargetUiState(
-            position = PositionInside.Target(alignment = Center),
+            positionAlignment = PositionAlignment.Target(insideAlignment = Center),
+            positionOffset = PositionOffset.Target(),
             angularPosition = AngularPosition.Target(
                 AngularPosition.Value(
                     radius = radius,
@@ -85,7 +87,8 @@ class PromoterVisualisation<InteractionTarget : Any>(
         )
 
         stage1 = TargetUiState(
-            position = PositionInside.Target(alignment = Center),
+            positionAlignment = PositionAlignment.Target(insideAlignment = Center),
+            positionOffset = PositionOffset.Target(),
             angularPosition = AngularPosition.Target(
                 AngularPosition.Value(
                     radius = radius,
@@ -98,7 +101,8 @@ class PromoterVisualisation<InteractionTarget : Any>(
         )
 
         stage2 = TargetUiState(
-            position = PositionInside.Target(alignment = Center),
+            positionAlignment = PositionAlignment.Target(insideAlignment = Center),
+            positionOffset = PositionOffset.Target(),
             angularPosition = AngularPosition.Target(
                 AngularPosition.Value(
                     radius = radius,
@@ -111,7 +115,8 @@ class PromoterVisualisation<InteractionTarget : Any>(
         )
 
         stage3 = TargetUiState(
-            position = PositionInside.Target(alignment = Center),
+            positionAlignment = PositionAlignment.Target(insideAlignment = Center),
+            positionOffset = PositionOffset.Target(),
             angularPosition = AngularPosition.Target(
                 AngularPosition.Value(
                     radius = radius,
@@ -124,7 +129,8 @@ class PromoterVisualisation<InteractionTarget : Any>(
         )
 
         stage4 = TargetUiState(
-            position = PositionInside.Target(alignment = Center),
+            positionAlignment = PositionAlignment.Target(insideAlignment = Center),
+            positionOffset = PositionOffset.Target(),
             angularPosition = AngularPosition.Target(
                 AngularPosition.Value(
                     radius = radius,
@@ -137,7 +143,8 @@ class PromoterVisualisation<InteractionTarget : Any>(
         )
 
         stage5 = TargetUiState(
-            position = PositionInside.Target(alignment = Center),
+            positionAlignment = PositionAlignment.Target(insideAlignment = Center),
+            positionOffset = PositionOffset.Target(),
             angularPosition = AngularPosition.Target(
                 AngularPosition.Value(
                     radius = 0f,
@@ -150,8 +157,10 @@ class PromoterVisualisation<InteractionTarget : Any>(
         )
 
         destroyed = TargetUiState(
-            position = PositionInside.Target(
-                alignment = Center,
+            positionAlignment = PositionAlignment.Target(
+                insideAlignment = Center
+            ),
+            positionOffset = PositionOffset.Target(
                 offset = DpOffset(500.dp, (-200).dp)
             ),
             angularPosition = AngularPosition.Target(

appyx-components/experimental/promoter/common/src/commonMain/kotlin/com/bumble/appyx/components/experimental/promoter/ui/TargetUiState.kt

@@ -4,12 +4,14 @@ import com.bumble.appyx.interactions.core.ui.property.impl.AngularPosition
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationY
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationZ
 import com.bumble.appyx.interactions.core.ui.property.impl.Scale
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOffset
 import com.bumble.appyx.interactions.core.ui.state.MutableUiStateSpecs
 
 @MutableUiStateSpecs
 class TargetUiState(
-    val position: PositionInside.Target,
+    val positionAlignment: PositionAlignment.Target,
+    val positionOffset: PositionOffset.Target,
     val angularPosition: AngularPosition.Target,
     val scale: Scale.Target,
     val rotationY: RotationY.Target,

appyx-components/experimental/puzzle15/common/src/commonMain/kotlin/com/bumble/appyx/components/experimental/puzzle15/ui/Puzzle15Visualisation.kt

@@ -15,7 +15,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.GestureFactory
 import com.bumble.appyx.interactions.core.ui.gesture.dragDirection4
 import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment.InsideAlignment.Companion.fractionAlignment
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation
 
@@ -35,8 +35,8 @@ class Puzzle15Visualisation(
             MatchedTargetUiState(
                 element = tileElements,
                 targetUiState = TargetUiState(
-                    position = PositionInside.Target(
-                        alignment = fractionAlignment(
+                    positionAlignment = PositionAlignment.Target(
+                        insideAlignment = fractionAlignment(
                             horizontalBiasFraction = (index % CELLS_COUNT).toFloat() / (CELLS_COUNT - 1),
                             verticalBiasFraction = (index / CELLS_COUNT).toFloat() / (CELLS_COUNT - 1)
                         )

appyx-components/experimental/puzzle15/common/src/commonMain/kotlin/com/bumble/appyx/components/experimental/puzzle15/ui/TargetUiState.kt

@@ -1,9 +1,9 @@
 package com.bumble.appyx.components.experimental.puzzle15.ui
 
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MutableUiStateSpecs
 
 @MutableUiStateSpecs
 class TargetUiState(
-    val position: PositionInside.Target = PositionInside.Target()
+    val positionAlignment: PositionAlignment.Target = PositionAlignment.Target()
 )

appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/TestDriveExperiment.kt

@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Button
@@ -161,11 +160,7 @@ fun <InteractionTarget : Any> TestDriveUi(
             Box(
                 modifier = Modifier
                     .size(60.dp)
-                    .align(targetUiState.position.value.alignment)
-                    .offset(
-                        targetUiState.position.value.offset.x,
-                        targetUiState.position.value.offset.y
-                    )
+                    .align(targetUiState.positionAlignment.value)
                     .border(2.dp, targetUiState.backgroundColor.value)
                     .semantics {
                         contentDescription = TEST_DRIVE_EXPERIMENT_TEST_HELPER

appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/ui/rotation/TargetUiState.kt

@@ -2,13 +2,13 @@ package com.bumble.appyx.components.internal.testdrive.ui.rotation
 
 import com.bumble.appyx.interactions.core.ui.property.impl.BackgroundColor
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationZ
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MutableUiStateSpecs
 
 @Suppress("unused")
 @MutableUiStateSpecs
 class TargetUiState(
-    val position: PositionInside.Target,
+    val positionAlignment: PositionAlignment.Target,
     val rotationZ: RotationZ.Target,
     val backgroundColor: BackgroundColor.Target,
 )

appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/ui/rotation/TestDriveRotationVisualisation.kt

@@ -15,7 +15,7 @@ import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
 import com.bumble.appyx.interactions.core.ui.property.impl.BackgroundColor
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationZ
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment.InsideAlignment
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation
 import com.bumble.appyx.utils.multiplatform.AppyxLogger
@@ -46,25 +46,25 @@ class TestDriveRotationVisualisation<InteractionTarget : Any>(
             }
 
         private val topLeftCorner = TargetUiState(
-            position = PositionInside.Target(InsideAlignment.TopStart),
+            positionAlignment = PositionAlignment.Target(InsideAlignment.TopStart),
             rotationZ = RotationZ.Target(0f),
             backgroundColor = BackgroundColor.Target(md_red_500)
         )
 
         private val topRightCorner = TargetUiState(
-            position = PositionInside.Target(InsideAlignment.TopEnd),
+            positionAlignment = PositionAlignment.Target(InsideAlignment.TopEnd),
             rotationZ = RotationZ.Target(180f),
             backgroundColor = BackgroundColor.Target(md_light_green_500)
         )
 
         private val bottomRightCorner = TargetUiState(
-            position = PositionInside.Target(InsideAlignment.CenterEnd),
+            positionAlignment = PositionAlignment.Target(InsideAlignment.CenterEnd),
             rotationZ = RotationZ.Target(270f),
             backgroundColor = BackgroundColor.Target(md_yellow_500)
         )
 
         private val bottomLeftCorner = TargetUiState(
-            position = PositionInside.Target(InsideAlignment.CenterStart),
+            positionAlignment = PositionAlignment.Target(InsideAlignment.CenterStart),
             rotationZ = RotationZ.Target(540f),
             backgroundColor = BackgroundColor.Target(md_light_blue_500)
         )

appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/ui/simple/TargetUiState.kt

@@ -1,12 +1,12 @@
 package com.bumble.appyx.components.internal.testdrive.ui.simple
 
 import com.bumble.appyx.interactions.core.ui.property.impl.BackgroundColor
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MutableUiStateSpecs
 
 @Suppress("unused")
 @MutableUiStateSpecs
 class TargetUiState(
-    val position: PositionInside.Target,
+    val positionAlignment: PositionAlignment.Target,
     val backgroundColor: BackgroundColor.Target,
 )

appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/ui/simple/TestDriveSimpleVisualisation.kt

@@ -29,7 +29,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.dragDirection8
 import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
 import com.bumble.appyx.interactions.core.ui.property.impl.BackgroundColor
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionInside
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation
 import com.bumble.appyx.utils.multiplatform.AppyxLogger
@@ -60,22 +60,22 @@ class TestDriveSimpleVisualisation<InteractionTarget : Any>(
             }
 
         private val topLeftCorner = TargetUiState(
-            position = PositionInside.Target(BiasAlignment.InsideAlignment.TopStart),
+            positionAlignment = PositionAlignment.Target(BiasAlignment.InsideAlignment.TopStart),
             backgroundColor = BackgroundColor.Target(md_red_500)
         )
 
         private val topRightCorner = TargetUiState(
-            position = PositionInside.Target(BiasAlignment.InsideAlignment.TopEnd),
+            positionAlignment = PositionAlignment.Target(BiasAlignment.InsideAlignment.TopEnd),
             backgroundColor = BackgroundColor.Target(md_light_green_500)
         )
 
         private val bottomRightCorner = TargetUiState(
-            position = PositionInside.Target(BiasAlignment.InsideAlignment.CenterEnd),
+            positionAlignment = PositionAlignment.Target(BiasAlignment.InsideAlignment.CenterEnd),
             backgroundColor = BackgroundColor.Target(md_yellow_500)
         )
 
         private val bottomLeftCorner = TargetUiState(
-            position = PositionInside.Target(BiasAlignment.InsideAlignment.CenterStart),
+            positionAlignment = PositionAlignment.Target(BiasAlignment.InsideAlignment.CenterStart),
             backgroundColor = BackgroundColor.Target(md_light_blue_500)
         )
     }