Navigation sample app

appyx-components/stable/spotlight/common/src/commonMain/kotlin/com/bumble/appyx/components/spotlight/ui/slider/SpotlightSlider.kt

@@ -18,6 +18,7 @@ import com.bumble.appyx.interactions.core.ui.gesture.dragHorizontalDirection
 import com.bumble.appyx.interactions.core.ui.gesture.dragVerticalDirection
 import com.bumble.appyx.interactions.core.ui.property.impl.Alpha
 import com.bumble.appyx.interactions.core.ui.property.impl.GenericFloatProperty
+import com.bumble.appyx.interactions.core.ui.property.impl.GenericFloatProperty.Target
 import com.bumble.appyx.interactions.core.ui.property.impl.Scale
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment.OutsideAlignment.Companion.InContainer
 import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment.OutsideAlignment.Companion.OutsideBottom
@@ -33,10 +34,7 @@ class SpotlightSlider<InteractionTarget : Any>(
 ) : BaseVisualisation<InteractionTarget, State<InteractionTarget>, MutableUiState, TargetUiState>(
     uiContext = uiContext
 ) {
-    private val scrollX = GenericFloatProperty(
-        uiContext.coroutineScope,
-        GenericFloatProperty.Target(0f)
-    ) // TODO sync this with the model's initial value rather than assuming 0
+    private val scrollX = GenericFloatProperty(uiContext.coroutineScope, Target(0f))
     override val viewpointDimensions: List<Pair<(State<InteractionTarget>) -> Float, GenericFloatProperty>> =
         listOf(
             { state: State<InteractionTarget> -> state.activeIndex } to scrollX

appyx-components/stable/spotlight/common/src/commonMain/kotlin/com/bumble/appyx/components/spotlight/ui/sliderrotation/SpotlightSliderRotation.kt

@@ -25,10 +25,7 @@ class SpotlightSliderRotation<InteractionTarget : Any>(
 ) : BaseVisualisation<InteractionTarget, State<InteractionTarget>, MutableUiState, TargetUiState>(
     uiContext = uiContext
 ) {
-    private val scrollX = GenericFloatProperty(
-        uiContext.coroutineScope,
-        Target(0f)
-    ) // TODO sync this with the model's initial value rather than assuming 0
+    private val scrollX = GenericFloatProperty(uiContext.coroutineScope, Target(0f))
     override val viewpointDimensions: List<Pair<(State<InteractionTarget>) -> Float, GenericFloatProperty>> =
         listOf(
             { state: State<InteractionTarget> -> state.activeIndex } to scrollX

appyx-components/stable/spotlight/common/src/commonMain/kotlin/com/bumble/appyx/components/spotlight/ui/sliderscale/SpotlightSliderScale.kt

@@ -24,7 +24,7 @@ class SpotlightSliderScale<InteractionTarget : Any>(
     uiContext = uiContext
 ) {
     @Suppress("MaxLineLength")
-    private val scrollX = GenericFloatProperty(uiContext.coroutineScope, Target(0f)) // TODO sync this with the model's initial value rather than assuming 0
+    private val scrollX = GenericFloatProperty(uiContext.coroutineScope, Target(0f))
     override val viewpointDimensions: List<Pair<(State<InteractionTarget>) -> Float, GenericFloatProperty>> =
         listOf(
             { state: State<InteractionTarget> -> state.activeIndex } to scrollX

appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/model/BaseAppyxComponent.kt

@@ -185,7 +185,7 @@ open class BaseAppyxComponent<InteractionTarget : Any, ModelState : Any>(
         }
     }
 
-    private fun onVisualisationReady(visualisation: Visualisation<InteractionTarget, ModelState>) {
+    protected open fun onVisualisationReady(visualisation: Visualisation<InteractionTarget, ModelState>) {
         visualisation.updateBounds(transitionBounds)
         observeAnimationChanges(visualisation)
         observeVisualisation(visualisation)

appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/ui/property/impl/AspectRatio.kt

@@ -0,0 +1,53 @@
+package com.bumble.appyx.interactions.core.ui.property.impl
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationVector1D
+import androidx.compose.animation.core.Easing
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import com.bumble.appyx.interactions.core.ui.math.lerpFloat
+import com.bumble.appyx.interactions.core.ui.property.Interpolatable
+import com.bumble.appyx.interactions.core.ui.property.MotionProperty
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+
+class AspectRatio(
+    coroutineScope: CoroutineScope,
+    target: Target,
+    visibilityThreshold: Float = 0.001f,
+    displacement: StateFlow<Float> = MutableStateFlow(0f),
+) : MotionProperty<Float, AnimationVector1D>(
+    coroutineScope = coroutineScope,
+    animatable = Animatable(target.value),
+    visibilityThreshold = visibilityThreshold,
+    displacement = displacement
+), Interpolatable<AspectRatio.Target> {
+
+    class Target(
+        val value: Float,
+        val easing: Easing? = null,
+    ) :  MotionProperty.Target
+
+    override fun calculateRenderValue(base: Float, displacement: Float): Float =
+        base - displacement
+
+    override val modifier: Modifier
+        get() = Modifier.composed {
+            val value = renderValueFlow.collectAsState().value
+            this.aspectRatio(value)
+        }
+
+
+    override suspend fun lerpTo(start: Target, end: Target, fraction: Float) {
+        snapTo(
+            lerpFloat(
+                start = start.value,
+                end = end.value,
+                progress = easingTransform(end.easing, fraction)
+            )
+        )
+    }
+}

appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/ui/property/impl/GenericFloatProperty.kt

@@ -3,7 +3,6 @@ package com.bumble.appyx.interactions.core.ui.property.impl
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.AnimationVector1D
 import androidx.compose.ui.Modifier
-import com.bumble.appyx.interactions.core.ui.context.UiContext
 import com.bumble.appyx.interactions.core.ui.math.lerpFloat
 import com.bumble.appyx.interactions.core.ui.property.Interpolatable
 import com.bumble.appyx.interactions.core.ui.property.MotionProperty
@@ -12,7 +11,7 @@ import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlin.jvm.JvmInline
 
-class GenericFloatProperty(
+open class GenericFloatProperty(
     coroutineScope: CoroutineScope,
     target: Target,
     displacement: StateFlow<Float> = MutableStateFlow(0f),

appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/ui/property/impl/RoundedCorners.kt

@@ -18,6 +18,7 @@ import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 
+@Suppress("MagicNumber")
 class RoundedCorners(
     coroutineScope: CoroutineScope,
     target: Target,
@@ -42,7 +43,7 @@ class RoundedCorners(
     override val modifier: Modifier
         get() = Modifier.composed {
             val value by renderValueFlow.collectAsState()
-            this.clip(RoundedCornerShape(value))
+            this.clip(RoundedCornerShape(value.coerceIn(0, 100)))
         }
 
     override suspend fun lerpTo(start: Target, end: Target, fraction: Float) {

appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/interactions/core/ui/property/impl/position/BiasAlignment.kt

@@ -32,31 +32,31 @@ sealed class BiasAlignment(
         companion object {
 
             @Stable
-            val InContainer = OutsideAlignment(0f, 0f)
+            val OutsideTopLeft = OutsideAlignment(-1f, -1f)
 
             @Stable
-            val OutsideLeft = OutsideAlignment(-1f, 0f)
+            val OutsideTop = OutsideAlignment(0f, -1f)
 
             @Stable
-            val OutsideTopLeft = OutsideAlignment(-1f, -1f)
+            val OutsideTopRight = OutsideAlignment(1f, -1f)
 
             @Stable
-            val OutsideBottomLeft = OutsideAlignment(-1f, 1f)
+            val OutsideLeft = OutsideAlignment(-1f, 0f)
 
             @Stable
-            val OutsideRight = OutsideAlignment(1f, 0f)
+            val InContainer = OutsideAlignment(0f, 0f)
 
             @Stable
-            val OutsideBottomRight = OutsideAlignment(1f, 1f)
+            val OutsideRight = OutsideAlignment(1f, 0f)
 
             @Stable
-            val OutsideTopRight = OutsideAlignment(1f, -1f)
+            val OutsideBottomLeft = OutsideAlignment(-1f, 1f)
 
             @Stable
             val OutsideBottom = OutsideAlignment(0f, 1f)
 
             @Stable
-            val OutsideTop = OutsideAlignment(0f, -1f)
+            val OutsideBottomRight = OutsideAlignment(1f, 1f)
         }
 
         override fun align(

appyx-interactions/common/src/commonMain/kotlin/com/bumble/appyx/transitionmodel/BaseVisualisation.kt

@@ -97,8 +97,9 @@ abstract class BaseVisualisation<InteractionTarget : Any, ModelState, MutableUiS
 
         cleanUpCacheForDestroyedElements(matchedTargetUiStates)
 
+        val isRecreating = mutableUiStateCache.isEmpty()
         coroutineScope.launch {
-            updateViewpoint(update)
+            updateViewpoint(update, isRecreating)
         }
 
 
@@ -118,7 +119,7 @@ abstract class BaseVisualisation<InteractionTarget : Any, ModelState, MutableUiS
                     ObserveElementAnimationChanges(mutableUiState, t1)
                     ManageAnimations(mutableUiState, t1, update)
                 },
-                motionProperties = mutableUiState.motionProperties,
+                motionProperties = mutableUiState.motionProperties + viewpointDimensions.map { it.second },
                 modifier = mutableUiState.modifier,
                 progress = MutableStateFlow(1f),
             )
@@ -193,17 +194,24 @@ abstract class BaseVisualisation<InteractionTarget : Any, ModelState, MutableUiS
         }
     }
 
-    private suspend fun updateViewpoint(update: Update<ModelState>) {
+    private suspend fun updateViewpoint(
+        update: Update<ModelState>,
+        isRecreating: Boolean
+    ) {
         viewpointDimensions.forEach { (fieldOfState, viewpointDimension) ->
             val targetValue = fieldOfState(update.currentTargetState)
-            viewpointDimension.animateTo(
-                targetValue,
-                spring(
-                    stiffness = currentSpringSpec.stiffness,
-                    dampingRatio = currentSpringSpec.dampingRatio
-                )
-            ) {
-                AppyxLogger.d(TAG, "Viewpoint animateTo (Update) – $targetValue")
+            if (isRecreating) {
+                viewpointDimension.snapTo(targetValue)
+            } else {
+                viewpointDimension.animateTo(
+                    targetValue,
+                    spring(
+                        stiffness = currentSpringSpec.stiffness,
+                        dampingRatio = currentSpringSpec.dampingRatio
+                    )
+                ) {
+                    AppyxLogger.d(TAG, "Viewpoint animateTo (Update) – $targetValue")
+                }
             }
         }
     }
@@ -245,7 +253,7 @@ abstract class BaseVisualisation<InteractionTarget : Any, ModelState, MutableUiS
                     Box(modifier = mutableUiState.visibilityModifier)
                     InterpolateUiState(segmentProgress, mutableUiState, t0, t1, initialProgress)
                 },
-                motionProperties = mutableUiState.motionProperties,
+                motionProperties = mutableUiState.motionProperties + viewpointDimensions.map { it.second },
                 modifier = mutableUiState.modifier,
                 progress = segmentProgress,
             )

appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/collections/ImmutableMap.kt

@@ -0,0 +1,9 @@
+package com.bumble.appyx.navigation.collections
+
+import androidx.compose.runtime.Immutable
+
+@Immutable
+data class ImmutableMap<K, out V>(private val map: Map<K, V>) : Map<K, V> by map
+
+fun <K, V> Map<K, V>.toImmutableMap(): ImmutableMap<K, V> =
+    ImmutableMap(this)

appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/composable/AppyxComponent.kt

@@ -33,6 +33,7 @@ import androidx.compose.ui.unit.round
 import com.bumble.appyx.interactions.core.gesture.GestureValidator
 import com.bumble.appyx.interactions.core.gesture.detectDragGesturesOrCancellation
 import com.bumble.appyx.interactions.core.model.BaseAppyxComponent
+import com.bumble.appyx.interactions.core.model.progress.Draggable
 import com.bumble.appyx.interactions.core.model.removedElements
 import com.bumble.appyx.interactions.core.modifiers.onPointerEvent
 import com.bumble.appyx.interactions.core.ui.LocalBoxScope
@@ -42,6 +43,8 @@ import com.bumble.appyx.interactions.core.ui.context.UiContext
 import com.bumble.appyx.interactions.core.ui.output.ElementUiModel
 import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.property.motionPropertyRenderValue
+import com.bumble.appyx.navigation.collections.ImmutableList
+import com.bumble.appyx.navigation.collections.immutableListOf
 import com.bumble.appyx.navigation.integration.LocalScreenSize
 import com.bumble.appyx.navigation.node.ParentNode
 import kotlin.math.roundToInt
@@ -53,6 +56,7 @@ internal val defaultExtraTouch = 48.dp
 fun <InteractionTarget : Any, ModelState : Any> ParentNode<InteractionTarget>.AppyxComponent(
     appyxComponent: BaseAppyxComponent<InteractionTarget, ModelState>,
     modifier: Modifier = Modifier,
+    draggables: ImmutableList<Draggable> = immutableListOf(appyxComponent),
     clipToBounds: Boolean = false,
     gestureValidator: GestureValidator = GestureValidator.defaultValidator,
     gestureExtraTouchArea: Dp = defaultExtraTouch,
@@ -102,7 +106,13 @@ fun <InteractionTarget : Any, ModelState : Any> ParentNode<InteractionTarget>.Ap
     ) {
         CompositionLocalProvider(LocalBoxScope provides this@Box) {
             childrenBlock(
-                ChildrenTransitionScope(containerSize, appyxComponent, gestureExtraTouchArea, gestureValidator)
+                ChildrenTransitionScope(
+                    containerSize = containerSize,
+                    appyxComponent = appyxComponent,
+                    draggables = draggables,
+                    gestureExtraTouchArea = gestureExtraTouchArea,
+                    gestureValidator = gestureValidator
+                )
             )
         }
     }
@@ -111,6 +121,7 @@ fun <InteractionTarget : Any, ModelState : Any> ParentNode<InteractionTarget>.Ap
 class ChildrenTransitionScope<InteractionTarget : Any, NavState : Any>(
     private val containerSize: IntSize,
     private val appyxComponent: BaseAppyxComponent<InteractionTarget, NavState>,
+    private val draggables: List<Draggable>,
     private val gestureExtraTouchArea: Dp,
     private val gestureValidator: GestureValidator
 ) {
@@ -163,7 +174,9 @@ class ChildrenTransitionScope<InteractionTarget : Any, NavState : Any>(
                                         .pointerInput(appyxComponent) {
                                             detectDragGesturesOrCancellation(
                                                 onDragStart = { position ->
-                                                    appyxComponent.onStartDrag(position)
+                                                    draggables.forEach {
+                                                        it.onStartDrag(position)
+                                                    }
                                                 },
                                                 onDrag = { change, dragAmount ->
                                                     if (gestureValidator.isGestureValid(
@@ -172,15 +185,21 @@ class ChildrenTransitionScope<InteractionTarget : Any, NavState : Any>(
                                                         )
                                                     ) {
                                                         change.consume()
-                                                        appyxComponent.onDrag(dragAmount, density)
+                                                        draggables.forEach {
+                                                            it.onDrag(dragAmount, density)
+                                                        }
                                                         true
                                                     } else {
-                                                        appyxComponent.onDragEnd()
+                                                        draggables.forEach {
+                                                            it.onDragEnd()
+                                                        }
                                                         false
                                                     }
                                                 },
                                                 onDragEnd = {
-                                                    appyxComponent.onDragEnd()
+                                                    draggables.forEach {
+                                                        it.onDragEnd()
+                                                    }
                                                 },
                                             )
                                         }

appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/Node.kt

@@ -96,7 +96,7 @@ open class Node internal constructor(
     }
 
     protected suspend inline fun <reified T : Node> executeAction(
-        crossinline action: () -> Unit
+        crossinline action: suspend () -> Unit
     ): T = withContext(lifecycleScope.coroutineContext) {
         action()
         this@Node as T

appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/plugin/Plugins.kt

@@ -12,8 +12,8 @@ interface NodeAware<N : Node> : NodeReadyObserver<N> {
     val node: N
 }
 
-interface NodeReadyObserver<N : Node> : Plugin {
-    fun init(node: N) {}
+fun interface NodeReadyObserver<N : Node> : Plugin {
+    fun init(node: N)
 }
 
 interface NodeLifecycleAware : Plugin {

demos/appyx-interactions/android/src/main/kotlin/com/bumble/appyx/interactions/bottomnav/MainNavItem.kt

@@ -2,9 +2,10 @@ package com.bumble.appyx.interactions.bottomnav
 
 import androidx.compose.material.icons.Icons.Filled
 import androidx.compose.material.icons.Icons.Outlined
+import androidx.compose.material.icons.filled.Cake
 import androidx.compose.material.icons.filled.Extension
-import androidx.compose.material.icons.filled.Style
 import androidx.compose.material.icons.filled.ViewCarousel
+import androidx.compose.material.icons.outlined.Cake
 import androidx.compose.material.icons.outlined.Extension
 import androidx.compose.material.icons.outlined.GridView
 import androidx.compose.material.icons.outlined.Style
@@ -30,9 +31,9 @@ enum class MainNavItem : Parcelable {
             when (navBarItem) {
                 CARDS -> AppyxNavItem(
                     text = "Cards",
-                    unselectedIcon = Outlined.Style,
-                    selectedIcon = Filled.Style,
-                    iconModifier = Modifier.rotate(180f),
+                    unselectedIcon = Outlined.Cake,
+                    selectedIcon = Filled.Cake,
+                    modifier = Modifier.rotate(180f),
                     node = { node(it) { DatingCards() } }
                 )