diff --git a/CHANGELOG.md b/CHANGELOG.md index fefc20911..f5134ae50 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/appyx-components/experimental/cards/android/src/main/kotlin/com/bumble/appyx/components/experimental/cards/android/DatingCards.kt b/appyx-components/experimental/cards/android/src/main/kotlin/com/bumble/appyx/components/experimental/cards/android/DatingCards.kt index 600b25846..55447a581 100644 --- a/appyx-components/experimental/cards/android/src/main/kotlin/com/bumble/appyx/components/experimental/cards/android/DatingCards.kt +++ b/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) diff --git a/appyx-components/experimental/promoter/android/src/main/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt b/appyx-components/experimental/promoter/android/src/main/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt index 04aafee22..e36db90aa 100644 --- a/appyx-components/experimental/promoter/android/src/main/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt +++ b/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) diff --git a/appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/TestDriveExperiment.kt b/appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/TestDriveExperiment.kt index c588b2d26..2aa95c0a4 100644 --- a/appyx-components/internal/test-drive/common/src/commonMain/kotlin/com/bumble/appyx/components/internal/testdrive/TestDriveExperiment.kt +++ b/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 TestDriveUi( vertical = 12.dp ) ) { - DraggableAppyxComponent( + AppyxComponent( screenWidthPx = screenWidthPx, screenHeightPx = screenHeightPx, appyxComponent = testDrive, diff --git a/appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/DraggableChildren.kt b/appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/AppyxComponent.kt similarity index 96% rename from appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/DraggableChildren.kt rename to appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/AppyxComponent.kt index 4e4617724..d02cff261 100644 --- a/appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/DraggableChildren.kt +++ b/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 DraggableAppyxComponent( +fun AppyxComponent( appyxComponent: BaseAppyxComponent, screenWidthPx: Int, screenHeightPx: Int, @@ -129,8 +127,6 @@ fun DraggableAppyxComponent( elementUiModel.copy( modifier = Modifier .offset { elementOffset } - .width(with(density) { elementSize.width.toDp() }) - .height(with(density) { elementSize.height.toDp() }) .pointerInput(appyxComponent) { detectDragGesturesOrCancellation( onDragStart = { position -> diff --git a/demos/appyx-interactions/android/src/main/kotlin/com/bumble/appyx/interactions/sample/ModalExperiment.kt b/demos/appyx-interactions/android/src/main/kotlin/com/bumble/appyx/interactions/sample/ModalExperiment.kt index 09de95313..f460b7aa5 100644 --- a/demos/appyx-interactions/android/src/main/kotlin/com/bumble/appyx/interactions/sample/ModalExperiment.kt +++ b/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 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, diff --git a/demos/appyx-interactions/desktop/src/desktopMain/kotlin/com/bumble/appyx/interactions/widgets/Widgets.kt b/demos/appyx-interactions/desktop/src/desktopMain/kotlin/com/bumble/appyx/interactions/widgets/Widgets.kt index 36be76678..822a0534a 100644 --- a/demos/appyx-interactions/desktop/src/desktopMain/kotlin/com/bumble/appyx/interactions/widgets/Widgets.kt +++ b/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 diff --git a/demos/mkdocs/appyx-components/common/src/commonMain/kotlin/com/bumble/appyx/demos/common/AppyxWebSample.kt b/demos/mkdocs/appyx-components/common/src/commonMain/kotlin/com/bumble/appyx/demos/common/AppyxWebSample.kt index 8a16357df..fb9d3ff20 100644 --- a/demos/mkdocs/appyx-components/common/src/commonMain/kotlin/com/bumble/appyx/demos/common/AppyxWebSample.kt +++ b/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 AppyxWebSample( } ) ) { - DraggableAppyxComponent( + AppyxComponent( appyxComponent = appyxComponent, screenWidthPx = screenWidthPx, screenHeightPx = screenHeightPx, diff --git a/demos/mkdocs/appyx-interactions/gestures/dragprediction/web/src/jsMain/kotlin/com/bumble/appyx/demos/dragprediction/DragPrediction.kt b/demos/mkdocs/appyx-interactions/gestures/dragprediction/web/src/jsMain/kotlin/com/bumble/appyx/demos/dragprediction/DragPrediction.kt index c34c0a6fc..576d92e85 100644 --- a/demos/mkdocs/appyx-interactions/gestures/dragprediction/web/src/jsMain/kotlin/com/bumble/appyx/demos/dragprediction/DragPrediction.kt +++ b/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 ModelUi( model: TestDriveModel, modifier: Modifier = Modifier.fillMaxSize() ) { - DraggableAppyxComponent( + AppyxComponent( appyxComponent = testDrive, screenWidthPx = screenWidthPx, screenHeightPx = screenHeightPx, diff --git a/demos/mkdocs/appyx-interactions/gestures/incompletedrag/web/src/jsMain/kotlin/com/bumble/appyx/demos/incompletedrag/IncompleteDrag.kt b/demos/mkdocs/appyx-interactions/gestures/incompletedrag/web/src/jsMain/kotlin/com/bumble/appyx/demos/incompletedrag/IncompleteDrag.kt index d0f68677a..4540600f7 100644 --- a/demos/mkdocs/appyx-interactions/gestures/incompletedrag/web/src/jsMain/kotlin/com/bumble/appyx/demos/incompletedrag/IncompleteDrag.kt +++ b/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 ModelUi( } ) - DraggableAppyxComponent( + AppyxComponent( appyxComponent = testDrive, screenWidthPx = screenWidthPx, screenHeightPx = screenHeightPx, diff --git a/demos/mkdocs/appyx-interactions/interactions/sample1/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample1/Sample1.kt b/demos/mkdocs/appyx-interactions/interactions/sample1/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample1/Sample1.kt index 8e72cd2da..ba0a25106 100644 --- a/demos/mkdocs/appyx-interactions/interactions/sample1/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample1/Sample1.kt +++ b/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 ModelUi( } ) - DraggableAppyxComponent( + AppyxComponent( appyxComponent = testDrive, screenWidthPx = screenWidthPx, screenHeightPx = screenHeightPx, diff --git a/demos/mkdocs/appyx-interactions/interactions/sample2/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample2/Sample2.kt b/demos/mkdocs/appyx-interactions/interactions/sample2/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample2/Sample2.kt index 478b48cda..442d4a5f4 100644 --- a/demos/mkdocs/appyx-interactions/interactions/sample2/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample2/Sample2.kt +++ b/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 ModelUi( } ) - DraggableAppyxComponent( + AppyxComponent( appyxComponent = testDrive, screenWidthPx = screenWidthPx, screenHeightPx = screenHeightPx, diff --git a/demos/mkdocs/appyx-interactions/interactions/sample3/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample3/Sample3.kt b/demos/mkdocs/appyx-interactions/interactions/sample3/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample3/Sample3.kt index 8448f842e..f835e0355 100644 --- a/demos/mkdocs/appyx-interactions/interactions/sample3/web/src/jsMain/kotlin/com/bumble/appyx/demos/sample3/Sample3.kt +++ b/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 ModelUi( model: TestDriveModel, modifier: Modifier = Modifier.fillMaxSize() ) { - DraggableAppyxComponent( + AppyxComponent( appyxComponent = testDrive, screenWidthPx = screenWidthPx, screenHeightPx = screenHeightPx, diff --git a/documentation/interactions/usage.md b/documentation/interactions/usage.md index dd55f53ee..5dcc8e77f 100644 --- a/documentation/interactions/usage.md +++ b/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: