Refactor AppyxComponent and application of draggable modifier

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - [#630](https://github.com/bumble-tech/appyx/pull/630) – Pass initial state into Spotlights visualisations
 - [#643](https://github.com/bumble-tech/appyx/pull/643) – Unify AppyxComponent composable between appyx-navigation and appyx-interactions modules
+- [#644](https://github.com/bumble-tech/appyx/pull/644) – Refactor AppyxComponent and application of draggable modifier 
 
 ### Fixed
 

appyx-components/experimental/cards/android/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()
         )
     }
 }

appyx-components/experimental/cards/common/src/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.gesture.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

appyx-components/experimental/promoter/android/src/main/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 = {
+            child = {
                 Element(
-                    elementUiModel = it,
+                    element = it,
                     modifier = Modifier.size(100.dp)
                 )
             },

appyx-components/experimental/promoter/common/src/commonMain/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.gesture.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

appyx-components/experimental/puzzle15/common/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.AppyxComponent
+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(
+            AppyxComponent(
+                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,
+                        )
                     }
                 }
             }

appyx-components/experimental/puzzle15/common/src/commonMain/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.gesture.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

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

@@ -139,10 +139,11 @@ fun <InteractionTarget : Any> TestDriveUi(
             screenHeightPx = screenHeightPx,
             appyxComponent = testDrive,
             gestureValidator = gestureValidator,
-        ) { elementUiModel ->
+            isGestureBoundingBoxTransformed = true
+        ) {
             Box(
-                modifier = Modifier.size(60.dp)
-                    .then(elementUiModel.modifier)
+                modifier = Modifier
+                    .size(60.dp)
             )
         }
 

appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/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.gesture.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

appyx-components/internal/test-drive/common/src/commonMain/kotlin/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.gesture.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

appyx-components/stable/backstack/common/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.gesture.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

appyx-components/stable/backstack/common/src/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.gesture.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

appyx-components/stable/spotlight/android/src/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
@@ -21,7 +19,6 @@ 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.theme.appyx_dark
-import com.bumble.appyx.utils.multiplatform.AppyxLogger
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 
@@ -77,26 +74,12 @@ fun <InteractionTarget : Any> SpotlightUi(
                 horizontal = 64.dp,
                 vertical = 12.dp
             ),
-        element = { elementUiModel ->
+        child = { 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}"
             )
         }
     )

appyx-components/stable/spotlight/common/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.gesture.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

appyx-interactions/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.AppyxComponent
+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
@@ -22,31 +23,29 @@ fun <InteractionTarget : Any, ModelState : Any> SampleChildren(
     appyxComponent: BaseAppyxComponent<InteractionTarget, ModelState>,
     modifier: Modifier = Modifier,
     clipToBounds: Boolean = false,
-    element: @Composable (ElementUiModel<InteractionTarget>) -> Unit = {
-        SampleElement(colors = colors, elementUiModel = it)
+    child: @Composable BoxScope.(Element<InteractionTarget>) -> Unit = { element ->
+        SampleElement(colors = colors, element = element)
     },
 ) {
-    Children(
+    AppyxComponent(
         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)
-        },
+        child = child
     )
 }
 
 @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,

appyx-interactions/android/src/main/kotlin/com/bumble/appyx/interactions/testing/Utils.kt

@@ -63,14 +63,15 @@ private fun <InteractionTarget : Any, ModelState : Any> TestChildrenUi(
                 ),
             appyxComponent = appyxComponent,
             clipToBounds = clipToBounds,
-        ) {
+        ) { element ->
             Box(
                 modifier = Modifier
                     .fillMaxSize()
             ) {
                 Text(
-                    text = "${it.element.interactionTarget}",
-                    modifier = Modifier.align(Alignment.Center),
+                    text = "${element.interactionTarget}",
+                    modifier = Modifier
+                        .align(Alignment.Center),
                     color = Color.White
                 )
             }