Merge pull request #644 from KovalevAndrey/2.x-do-not-apply-if-no-ges…

…tures Refactor AppyxComponent and application of draggable modifier
bumble-tech · Jan 23, 2024 · e097de6 · e097de6
2 parents dfd4362 + 1eec5c3
commit e097de6
Show file tree

Hide file tree

Showing 45 changed files with 351 additions and 496 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ Please refer to [2.0.0-alpha10 – Migration guide](2.0.0-alpha10.md)
 - [#652](https://github.com/bumble-tech/appyx/pull/652) - KSP processor renamed from `mutable-ui-processor` to `appyx-processor`
 - [#654](https://github.com/bumble-tech/appyx/pull/654) - Renamings 
 - [#657](https://github.com/bumble-tech/appyx/pull/657) - Rename ParentNode & Node to Node and LeafNode 
+- [#644](https://github.com/bumble-tech/appyx/pull/644) – Refactor AppyxComponent and application of draggable modifier 
 
 ### Fixed
 

diff --git a/...oid/src/main/kotlin/com/bumble/appyx/components/experimental/cards/android/DatingCards.kt b/...oid/src/main/kotlin/com/bumble/appyx/components/experimental/cards/android/DatingCards.kt
@@ -47,10 +47,11 @@ fun DatingCards(modifier: Modifier = Modifier) {
         screenHeightPx = (LocalConfiguration.current.screenHeightDp * LocalDensity.current.density).roundToInt(),
         appyxComponent = cards,
         gestureValidator = permissiveValidator,
-    ) { elementUiModel ->
+    ) { element ->
         ProfileCard(
-            profile = elementUiModel.element.interactionTarget.profile,
-            modifier = Modifier.fillMaxSize().then(elementUiModel.modifier)
+            profile = element.interactionTarget.profile,
+            modifier = Modifier
+                .fillMaxSize()
         )
     }
 }

diff --git a/...commonMain/kotlin/com/bumble/appyx/components/experimental/cards/ui/CardsVisualisation.kt b/...commonMain/kotlin/com/bumble/appyx/components/experimental/cards/ui/CardsVisualisation.kt
@@ -13,7 +13,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.Drag
 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.dragHorizontalDirection
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.DefaultAnimationSpec
 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

diff --git a/...in/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt b/...in/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt
@@ -82,9 +82,9 @@ fun PromoterExperiment(modifier: Modifier = Modifier) {
                     horizontal = 64.dp,
                     vertical = 12.dp
                 ),
-            element = {
+            elementUi = {
                 Element(
-                    elementUiModel = it,
+                    element = it,
                     modifier = Modifier.size(100.dp)
                 )
             },

diff --git a/...Main/kotlin/com/bumble/appyx/components/experimental/promoter/ui/PromoterVisualisation.kt b/...Main/kotlin/com/bumble/appyx/components/experimental/promoter/ui/PromoterVisualisation.kt
@@ -9,7 +9,7 @@ import com.bumble.appyx.components.experimental.promoter.PromoterModel
 import com.bumble.appyx.components.experimental.promoter.PromoterModel.State.ElementState
 import com.bumble.appyx.interactions.core.ui.context.TransitionBounds
 import com.bumble.appyx.interactions.core.ui.context.UiContext
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.DefaultAnimationSpec
 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

diff --git a/.../src/commonMain/kotlin/com/bumble/appyx/components/experimental/puzzle15/ui/Puzzle15Ui.kt b/.../src/commonMain/kotlin/com/bumble/appyx/components/experimental/puzzle15/ui/Puzzle15Ui.kt
@@ -2,7 +2,6 @@ package com.bumble.appyx.components.experimental.puzzle15.ui
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.gestures.detectDragGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -28,7 +27,6 @@ import androidx.compose.ui.input.key.KeyEventType
 import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.input.key.type
-import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.bumble.appyx.components.experimental.puzzle15.Puzzle15
@@ -39,8 +37,9 @@ import com.bumble.appyx.components.experimental.puzzle15.operation.Swap.Directio
 import com.bumble.appyx.components.experimental.puzzle15.operation.Swap.Direction.LEFT
 import com.bumble.appyx.components.experimental.puzzle15.operation.Swap.Direction.RIGHT
 import com.bumble.appyx.components.experimental.puzzle15.operation.Swap.Direction.UP
+import com.bumble.appyx.interactions.core.AppyxInteractionsContainer
+import com.bumble.appyx.interactions.core.gesture.GestureValidator
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
-import com.bumble.appyx.interactions.sample.Children
 
 @Suppress("MagicNumber", "LongMethod")
 @Composable
@@ -83,74 +82,31 @@ fun Puzzle15Ui(
                 .size(240.dp)
                 .border(4.dp, accentColor)
         ) {
-            Children(
+            AppyxInteractionsContainer(
+                gestureValidator = GestureValidator.permissiveValidator,
                 screenWidthPx = screenWidthPx,
                 screenHeightPx = screenHeightPx,
                 appyxComponent = puzzle15,
-            ) { elementUiModel ->
-                if (elementUiModel.element.interactionTarget == Puzzle15Model.Tile.EmptyTile) {
+            ) { element ->
+                if (element.interactionTarget == Puzzle15Model.Tile.EmptyTile) {
                     Box(
-                        modifier = Modifier.size(60.dp)
-                            .then(
-                                elementUiModel.modifier
-                                    .background(color = Color.Transparent)
-                            )
+                        modifier = Modifier
+                            .size(60.dp)
+                            .background(color = Color.Transparent)
+
                     )
                 } else {
-                    val state = model.output.value
-                    val element =
-                        state.currentTargetState.items.find { it.id == elementUiModel.element.id }
-                    val index = state.currentTargetState.items.indexOf(element)
-                    val emptyTileIndex = state.currentTargetState.emptyTileIndex
-
-                    @Suppress("ComplexCondition")
-                    if (index == emptyTileIndex - 1 ||
-                        index == emptyTileIndex + 1 ||
-                        index == emptyTileIndex - 4 ||
-                        index == emptyTileIndex + 4
+                    Box(
+                        modifier = Modifier
+                            .size(60.dp)
+                            .background(color = Color.White)
                     ) {
-                        Box(
-                            modifier = Modifier.size(60.dp)
-                                .then(
-                                    elementUiModel
-                                        .modifier
-                                        .background(color = Color.White)
-                                )
-                                .pointerInput(elementUiModel.element.id) {
-                                    this.interceptOutOfBoundsChildEvents = true
-                                    detectDragGestures(
-                                        onDrag = { change, dragAmount ->
-                                            change.consume()
-                                            puzzle15.onDrag(dragAmount, this)
-                                        },
-                                        onDragEnd = {
-                                            puzzle15.onDragEnd()
-                                        }
-                                    )
-                                }
-                        ) {
-                            Text(
-                                color = Color.Black,
-                                text = elementUiModel.element.interactionTarget.textValue(),
-                                modifier = Modifier.align(Alignment.Center),
-                                fontSize = 24.sp,
-                            )
-                        }
-                    } else {
-                        Box(
-                            modifier = Modifier.size(60.dp)
-                                .then(
-                                    elementUiModel.modifier
-                                        .background(color = Color.White)
-                                )
-                        ) {
-                            Text(
-                                color = Color.Black,
-                                text = elementUiModel.element.interactionTarget.textValue(),
-                                modifier = Modifier.align(Alignment.Center),
-                                fontSize = 24.sp,
-                            )
-                        }
+                        Text(
+                            color = Color.Black,
+                            text = element.interactionTarget.textValue(),
+                            modifier = Modifier.align(Alignment.Center),
+                            fontSize = 24.sp,
+                        )
                     }
                 }
             }

diff --git a/...Main/kotlin/com/bumble/appyx/components/experimental/puzzle15/ui/Puzzle15Visualisation.kt b/...Main/kotlin/com/bumble/appyx/components/experimental/puzzle15/ui/Puzzle15Visualisation.kt
@@ -13,7 +13,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.Drag
 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.dragDirection4
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.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.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState

diff --git a/...c/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/TestDriveExperiment.kt b/...c/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/TestDriveExperiment.kt
@@ -138,11 +138,11 @@ fun <InteractionTarget : Any> TestDriveUi(
             screenWidthPx = screenWidthPx,
             screenHeightPx = screenHeightPx,
             appyxComponent = testDrive,
-            gestureValidator = gestureValidator,
-        ) { elementUiModel ->
+            gestureValidator = gestureValidator
+        ) {
             Box(
-                modifier = Modifier.size(60.dp)
-                    .then(elementUiModel.modifier)
+                modifier = Modifier
+                    .size(60.dp)
             )
         }
 

diff --git a/.../bumble/appyx/components/internal/testdrive/ui/rotation/TestDriveRotationVisualisation.kt b/.../bumble/appyx/components/internal/testdrive/ui/rotation/TestDriveRotationVisualisation.kt
@@ -11,7 +11,7 @@ import com.bumble.appyx.components.internal.testdrive.ui.md_light_green_500
 import com.bumble.appyx.components.internal.testdrive.ui.md_red_500
 import com.bumble.appyx.components.internal.testdrive.ui.md_yellow_500
 import com.bumble.appyx.interactions.core.ui.context.UiContext
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.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

diff --git a/.../com/bumble/appyx/components/internal/testdrive/ui/simple/TestDriveSimpleVisualisation.kt b/.../com/bumble/appyx/components/internal/testdrive/ui/simple/TestDriveSimpleVisualisation.kt
@@ -26,7 +26,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.Drag.Direction8.UPRIGHT
 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.dragDirection8
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.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.PositionAlignment

diff --git a/...on/src/commonMain/kotlin/com/bumble/appyx/components/backstack/ui/fader/BackStackFader.kt b/...on/src/commonMain/kotlin/com/bumble/appyx/components/backstack/ui/fader/BackStackFader.kt
@@ -3,7 +3,7 @@ package com.bumble.appyx.components.backstack.ui.fader
 import androidx.compose.animation.core.SpringSpec
 import com.bumble.appyx.components.backstack.BackStackModel
 import com.bumble.appyx.interactions.core.ui.context.UiContext
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.DefaultAnimationSpec
 import com.bumble.appyx.interactions.core.ui.property.impl.Alpha
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation

diff --git a/.../commonMain/kotlin/com/bumble/appyx/components/backstack/ui/parallax/BackStackParallax.kt b/.../commonMain/kotlin/com/bumble/appyx/components/backstack/ui/parallax/BackStackParallax.kt
@@ -12,7 +12,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.Drag
 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.dragHorizontalDirection
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.DefaultAnimationSpec
 import com.bumble.appyx.interactions.core.ui.property.impl.Alpha
 import com.bumble.appyx.interactions.core.ui.property.impl.ColorOverlay
 import com.bumble.appyx.interactions.core.ui.property.impl.Shadow

diff --git a/.../androidTest/kotlin/com/bumble/appyx/components/spotlight/android/utils/SpotlightUtils.kt b/.../androidTest/kotlin/com/bumble/appyx/components/spotlight/android/utils/SpotlightUtils.kt
@@ -3,14 +3,12 @@ package com.bumble.appyx.components.spotlight.android.utils
 import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.tween
-import androidx.compose.foundation.gestures.detectDragGestures
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.test.junit4.ComposeContentTestRule
 import androidx.compose.ui.unit.dp
 import com.bumble.appyx.components.spotlight.Spotlight
@@ -19,9 +17,8 @@ import com.bumble.appyx.components.spotlight.ui.slider.SpotlightSlider
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
 import com.bumble.appyx.interactions.sample.InteractionTarget
 import com.bumble.appyx.interactions.sample.android.Element
-import com.bumble.appyx.interactions.sample.android.SampleChildren
+import com.bumble.appyx.interactions.sample.android.SampleAppyxContainer
 import com.bumble.appyx.interactions.theme.appyx_dark
-import com.bumble.appyx.utils.multiplatform.AppyxLogger
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 
@@ -70,33 +67,19 @@ fun <InteractionTarget : Any> SpotlightUi(
     modifier: Modifier = Modifier,
     color: Color = Color.Unspecified
 ) {
-    SampleChildren(
+    SampleAppyxContainer(
         appyxComponent = spotlight,
         modifier = modifier
             .padding(
                 horizontal = 64.dp,
                 vertical = 12.dp
             ),
-        element = { elementUiModel ->
+        elementUi = { element ->
             Element(
                 color = color,
-                elementUiModel = elementUiModel,
+                element = element,
                 contentDescription =
-                "${SPOTLIGHT_EXPERIMENT_TEST_HELPER}_${elementUiModel.element.id}",
-                modifier = Modifier
-                    .fillMaxSize()
-                    .pointerInput(elementUiModel.element.id) {
-                        detectDragGestures(
-                            onDrag = { change, dragAmount ->
-                                change.consume()
-                                spotlight.onDrag(dragAmount, this)
-                            },
-                            onDragEnd = {
-                                AppyxLogger.d("drag", "end")
-                                spotlight.onDragEnd()
-                            }
-                        )
-                    }
+                "${SPOTLIGHT_EXPERIMENT_TEST_HELPER}_${element.id}"
             )
         }
     )

diff --git a/...on/src/commonMain/kotlin/com/bumble/appyx/components/spotlight/ui/fader/SpotlightFader.kt b/...on/src/commonMain/kotlin/com/bumble/appyx/components/spotlight/ui/fader/SpotlightFader.kt
@@ -6,7 +6,7 @@ import com.bumble.appyx.components.spotlight.SpotlightModel.State.ElementState.C
 import com.bumble.appyx.components.spotlight.SpotlightModel.State.ElementState.DESTROYED
 import com.bumble.appyx.components.spotlight.SpotlightModel.State.ElementState.STANDARD
 import com.bumble.appyx.interactions.core.ui.context.UiContext
-import com.bumble.appyx.interactions.core.ui.helper.DefaultAnimationSpec
+import com.bumble.appyx.interactions.core.ui.DefaultAnimationSpec
 import com.bumble.appyx.interactions.core.ui.property.impl.Alpha
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation

diff --git a/...ns/android/src/main/kotlin/com/bumble/appyx/interactions/sample/android/SampleChildren.kt b/...ns/android/src/main/kotlin/com/bumble/appyx/interactions/sample/android/SampleChildren.kt
@@ -1,13 +1,14 @@
 package com.bumble.appyx.interactions.sample.android
 
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
+import com.bumble.appyx.interactions.core.AppyxInteractionsContainer
+import com.bumble.appyx.interactions.core.Element
 import com.bumble.appyx.interactions.core.model.BaseAppyxComponent
-import com.bumble.appyx.interactions.core.ui.output.ElementUiModel
-import com.bumble.appyx.interactions.sample.Children
 import com.bumble.appyx.interactions.sample.SampleElement
 import com.bumble.appyx.interactions.sample.colors
 import kotlin.math.roundToInt
@@ -18,35 +19,33 @@ import kotlin.math.roundToInt
  * For real-life use-cases use the [Children] wrapper directly.
  */
 @Composable
-fun <InteractionTarget : Any, ModelState : Any> SampleChildren(
+fun <InteractionTarget : Any, ModelState : Any> SampleAppyxContainer(
     appyxComponent: BaseAppyxComponent<InteractionTarget, ModelState>,
     modifier: Modifier = Modifier,
     clipToBounds: Boolean = false,
-    element: @Composable (ElementUiModel<InteractionTarget>) -> Unit = {
-        SampleElement(colors = colors, elementUiModel = it)
+    elementUi: @Composable BoxScope.(Element<InteractionTarget>) -> Unit = { element ->
+        SampleElement(colors = colors, element = element)
     },
 ) {
-    Children(
+    AppyxInteractionsContainer(
         appyxComponent = appyxComponent,
         screenWidthPx = (LocalConfiguration.current.screenWidthDp * LocalDensity.current.density).roundToInt(),
         screenHeightPx = (LocalConfiguration.current.screenHeightDp * LocalDensity.current.density).roundToInt(),
         modifier = modifier,
         clipToBounds = clipToBounds,
-        childWrapper = { elementUiModel ->
-            element(elementUiModel)
-        },
+        elementUi = elementUi
     )
 }
 
 @Composable
 fun Element(
-    elementUiModel: ElementUiModel<*>,
+    element: Element<*>,
     modifier: Modifier = Modifier,
     color: Color? = Color.Unspecified,
     contentDescription: String? = null
 ) {
     SampleElement(
-        elementUiModel = elementUiModel,
+        element = element,
         modifier = modifier,
         colors = colors,
         color = color,