Fix DraggableChildren and rename it to AppyxComponent

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ### Fixed
 
+- [#586](https://github.com/bumble-tech/appyx/issues/586) – Fix `AppyxComponent` wrongly applying width and height modifier to children composables
 - [#584](https://github.com/bumble-tech/appyx/pull/584) – Fix applying offset twice in `AppyxComponent`
 - [#585](https://github.com/bumble-tech/appyx/pull/585) – Fix drag vs align
 - [#571](https://github.com/bumble-tech/appyx/pull/571) – Avoid `MotionController` recreation

appyx-components/experimental/cards/android/src/main/kotlin/com/bumble/appyx/components/experimental/cards/android/DatingCards.kt

@@ -1,7 +1,6 @@
 package com.bumble.appyx.components.experimental.cards.android
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
@@ -13,7 +12,7 @@ import androidx.compose.ui.unit.dp
 import com.bumble.appyx.components.experimental.cards.Cards
 import com.bumble.appyx.components.experimental.cards.CardsModel
 import com.bumble.appyx.components.experimental.cards.ui.CardsMotionController
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.gesture.GestureValidator.Companion.permissiveValidator
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
 import com.bumble.appyx.interactions.theme.appyx_dark
@@ -39,7 +38,7 @@ fun DatingCards(modifier: Modifier = Modifier) {
 
     AppyxComponentSetup(cards)
 
-    DraggableAppyxComponent(
+    AppyxComponent(
         modifier = modifier
             .fillMaxSize()
             .background(appyx_dark)

appyx-components/experimental/promoter/android/src/main/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt

@@ -25,7 +25,7 @@ import com.bumble.appyx.components.experimental.promoter.Promoter
 import com.bumble.appyx.components.experimental.promoter.PromoterModel
 import com.bumble.appyx.components.experimental.promoter.operation.addFirst
 import com.bumble.appyx.components.experimental.promoter.ui.PromoterMotionController
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.model.transition.Operation.Mode.IMMEDIATE
 import com.bumble.appyx.interactions.core.model.transition.Operation.Mode.KEYFRAME
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
@@ -74,7 +74,7 @@ fun PromoterExperiment(modifier: Modifier = Modifier) {
         val screenWidthPx = (LocalConfiguration.current.screenWidthDp * density.density).roundToInt()
         val screenHeightPx = (LocalConfiguration.current.screenHeightDp * density.density).roundToInt()
 
-        DraggableAppyxComponent(
+        AppyxComponent(
             appyxComponent = promoter,
             modifier = Modifier
                 .weight(0.9f)

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

@@ -30,7 +30,7 @@ import com.bumble.appyx.components.internal.testdrive.operation.next
 import com.bumble.appyx.components.internal.testdrive.ui.rotation.TestDriveRotationMotionController
 import com.bumble.appyx.components.internal.testdrive.ui.rotation.TestDriveRotationMotionController.Companion.toTargetUiState
 import com.bumble.appyx.components.internal.testdrive.ui.simple.TestDriveSimpleMotionController
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.gesture.GestureValidator
 import com.bumble.appyx.interactions.core.gesture.GestureValidator.Companion.defaultValidator
 import com.bumble.appyx.interactions.core.model.transition.Keyframes
@@ -135,7 +135,7 @@ fun <InteractionTarget : Any> TestDriveUi(
                 vertical = 12.dp
             )
     ) {
-        DraggableAppyxComponent(
+        AppyxComponent(
             screenWidthPx = screenWidthPx,
             screenHeightPx = screenHeightPx,
             appyxComponent = testDrive,

appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/DraggableChildren.kt → appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/AppyxComponent.kt

@@ -2,9 +2,7 @@ package com.bumble.appyx.interactions.core
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.width
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -51,7 +49,7 @@ private val defaultExtraTouch = 48f.dp
 
 @Suppress("LongMethod")
 @Composable
-fun <InteractionTarget : Any, ModelState : Any> DraggableAppyxComponent(
+fun <InteractionTarget : Any, ModelState : Any> AppyxComponent(
     appyxComponent: BaseAppyxComponent<InteractionTarget, ModelState>,
     screenWidthPx: Int,
     screenHeightPx: Int,
@@ -129,8 +127,6 @@ fun <InteractionTarget : Any, ModelState : Any> DraggableAppyxComponent(
                                 elementUiModel.copy(
                                     modifier = Modifier
                                         .offset { elementOffset }
-                                        .width(with(density) { elementSize.width.toDp() })
-                                        .height(with(density) { elementSize.height.toDp() })
                                         .pointerInput(appyxComponent) {
                                             detectDragGesturesOrCancellation(
                                                 onDragStart = { position ->

demos/appyx-interactions/android/src/main/kotlin/com/bumble/appyx/interactions/sample/ModalExperiment.kt

@@ -20,7 +20,7 @@ import com.bumble.appyx.components.modal.ModalModel
 import com.bumble.appyx.components.modal.operation.add
 import com.bumble.appyx.components.modal.operation.show
 import com.bumble.appyx.components.modal.ui.ModalMotionController
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.ui.context.UiContext
 import com.bumble.appyx.interactions.core.ui.gesture.GestureSettleConfig
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
@@ -84,7 +84,7 @@ fun <InteractionTarget : Any> ModalUi(
     modifier: Modifier = Modifier,
     color: Color = Color.Unspecified
 ) {
-    DraggableAppyxComponent(
+    AppyxComponent(
         screenWidthPx = (LocalConfiguration.current.screenWidthDp * LocalDensity.current.density).roundToInt(),
         screenHeightPx = (LocalConfiguration.current.screenHeightDp * LocalDensity.current.density).roundToInt(),
         clipToBounds = false,

demos/appyx-interactions/desktop/src/desktopMain/kotlin/com/bumble/appyx/interactions/widgets/Widgets.kt

@@ -19,7 +19,7 @@ import com.bumble.appyx.components.spotlight.operation.next
 import com.bumble.appyx.components.spotlight.operation.previous
 import com.bumble.appyx.components.spotlight.ui.slider.SpotlightSlider
 import com.bumble.appyx.interactions.Events
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.ui.gesture.GestureSettleConfig
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
 import com.bumble.appyx.interactions.core.ui.output.ElementUiModel
@@ -94,7 +94,7 @@ private fun WidgetsUi(
     screenHeightPx: Int,
     modifier: Modifier = Modifier,
 ) {
-    DraggableAppyxComponent(
+    AppyxComponent(
         clipToBounds = false,
         appyxComponent = spotlight,
         modifier = modifier

demos/mkdocs/appyx-components/common/src/commonMain/kotlin/com/bumble/appyx/demos/common/AppyxWebSample.kt

@@ -25,7 +25,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.bumble.appyx.demos.common.InteractionTarget.Element
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.model.BaseAppyxComponent
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
 import com.bumble.appyx.interactions.core.ui.output.ElementUiModel
@@ -85,7 +85,7 @@ fun <InteractionTarget : Any, ModelState : Any> AppyxWebSample(
                     }
                 )
             ) {
-                DraggableAppyxComponent(
+                AppyxComponent(
                     appyxComponent = appyxComponent,
                     screenWidthPx = screenWidthPx,
                     screenHeightPx = screenHeightPx,

demos/mkdocs/appyx-interactions/gestures/dragprediction/web/src/jsMain/kotlin/com/bumble/appyx/demos/dragprediction/DragPrediction.kt

@@ -45,7 +45,7 @@ import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.Eleme
 import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.ElementState.D
 import com.bumble.appyx.demos.dragprediction.DragPredictionMotionController.Companion.toTargetUiState
 import com.bumble.appyx.demos.dragprediction.InteractionTarget.Child1
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.model.transition.Keyframes
 import com.bumble.appyx.interactions.core.model.transition.Update
 import com.bumble.appyx.interactions.core.ui.gesture.GestureSettleConfig
@@ -191,7 +191,7 @@ fun <InteractionTarget : Any> ModelUi(
     model: TestDriveModel<InteractionTarget>,
     modifier: Modifier = Modifier.fillMaxSize()
 ) {
-    DraggableAppyxComponent(
+    AppyxComponent(
         appyxComponent = testDrive,
         screenWidthPx = screenWidthPx,
         screenHeightPx = screenHeightPx,

demos/mkdocs/appyx-interactions/gestures/incompletedrag/web/src/jsMain/kotlin/com/bumble/appyx/demos/incompletedrag/IncompleteDrag.kt

@@ -36,7 +36,7 @@ import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.Eleme
 import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.ElementState.D
 import com.bumble.appyx.components.internal.testdrive.operation.next
 import com.bumble.appyx.demos.incompletedrag.InteractionTarget.Child1
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.model.transition.Operation.Mode.IMMEDIATE
 import com.bumble.appyx.interactions.core.ui.gesture.GestureSettleConfig
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
@@ -141,7 +141,7 @@ fun <InteractionTarget : Any> ModelUi(
         }
     )
 
-    DraggableAppyxComponent(
+    AppyxComponent(
         appyxComponent = testDrive,
         screenWidthPx = screenWidthPx,
         screenHeightPx = screenHeightPx,

demos/mkdocs/appyx-interactions/interactions/sample1/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample1/Sample1.kt

@@ -36,7 +36,7 @@ import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.Eleme
 import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.ElementState.D
 import com.bumble.appyx.components.internal.testdrive.operation.next
 import com.bumble.appyx.demos.sample1.InteractionTarget.Child1
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.model.transition.Operation.Mode.IMMEDIATE
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
 
@@ -139,7 +139,7 @@ fun <InteractionTarget : Any> ModelUi(
         }
     )
 
-    DraggableAppyxComponent(
+    AppyxComponent(
         appyxComponent = testDrive,
         screenWidthPx = screenWidthPx,
         screenHeightPx = screenHeightPx,

demos/mkdocs/appyx-interactions/interactions/sample2/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample2/Sample2.kt

@@ -36,7 +36,7 @@ import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.Eleme
 import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.ElementState.D
 import com.bumble.appyx.components.internal.testdrive.operation.next
 import com.bumble.appyx.demos.sample2.InteractionTarget.Child1
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.model.transition.Operation.Mode.IMMEDIATE
 import com.bumble.appyx.interactions.core.ui.helper.AppyxComponentSetup
 
@@ -139,7 +139,7 @@ fun <InteractionTarget : Any> ModelUi(
         }
     )
 
-    DraggableAppyxComponent(
+    AppyxComponent(
         appyxComponent = testDrive,
         screenWidthPx = screenWidthPx,
         screenHeightPx = screenHeightPx,

demos/mkdocs/appyx-interactions/interactions/sample3/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample3/Sample3.kt

@@ -45,7 +45,7 @@ import com.bumble.appyx.components.internal.testdrive.TestDriveModel.State.Eleme
 import com.bumble.appyx.components.internal.testdrive.operation.next
 import com.bumble.appyx.demos.sample3.InteractionTarget.Child1
 import com.bumble.appyx.demos.sample3.Sample3MotionController.Companion.toTargetUiState
-import com.bumble.appyx.interactions.core.DraggableAppyxComponent
+import com.bumble.appyx.interactions.core.AppyxComponent
 import com.bumble.appyx.interactions.core.model.transition.Keyframes
 import com.bumble.appyx.interactions.core.model.transition.Operation.Mode.IMMEDIATE
 import com.bumble.appyx.interactions.core.model.transition.Operation.Mode.KEYFRAME
@@ -195,7 +195,7 @@ fun <InteractionTarget : Any> ModelUi(
     model: TestDriveModel<InteractionTarget>,
     modifier: Modifier = Modifier.fillMaxSize()
 ) {
-    DraggableAppyxComponent(
+    AppyxComponent(
         appyxComponent = testDrive,
         screenWidthPx = screenWidthPx,
         screenHeightPx = screenHeightPx,

documentation/interactions/usage.md

@@ -85,26 +85,6 @@ fun SomeComposable() {
 }
 ```
 
-You can also make use of the `DraggableAppyxComponent` composable, if you have components that allow gestures to control them:
-
-```kotlin
-@Composable
-fun SomeComposable() {
-    DraggableAppyxComponent(
-        modifier = Modifier,
-        screenWidthPx = (LocalConfiguration.current.screenWidthDp * LocalDensity.current.density).roundToInt(),
-        screenHeightPx = (LocalConfiguration.current.screenHeightDp * LocalDensity.current.density).roundToInt(),
-        appyxComponent = yourComponent,
-        gestureValidator = permissiveValidator,
-    ) { elementUiModel ->
-        YourElementComposable(
-            elementUiModel = elementUiModel,
-            modifier = elementUiModel.modifier
-        )
-    }
-}
-```
-
 ## Interacting with the AppyxComponent
 
 How you use your model will depend on the specific component. However, typically, you will have a high level API to trigger changes, such as: