Merge pull request #107 from what3words/task/MT-7339-Recall-button-animation

QuocNguyen-w3w · web-flow · commit fa200212dd2c · 2025-03-07T12:13:08.000+07:00
Mimic recall button animation from main app
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/W3WMapManager.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/W3WMapManager.kt
@@ -320,7 +320,7 @@ class W3WMapManager(
     fun setLanguage(language: W3WRFC5646Language) {
         this.language = language
     }
-    
+
     /**
      * Retrieves the current language setting for What3Words addresses.
      *
@@ -1613,7 +1613,8 @@ class W3WMapManager(
     private suspend fun handleRecallButton() {
         updateSelectedScreenLocation()
 
-        val buttonState = buttonState.value
+        val buttonState = _buttonState.value
+        val cameraState = _mapState.value.cameraState
         val selectedScreenLocation = buttonState.selectedScreenLocation
         val recallButtonViewport = buttonState.recallButtonViewPort
         val mapProjection = buttonState.mapProjection
@@ -1631,6 +1632,7 @@ class W3WMapManager(
             it.copy(
                 recallRotationDegree = rotationDegree,
                 isRecallButtonVisible = shouldShowRecallButton,
+                isCameraMoving = cameraState?.isCameraMoving == true
             )
         }
     }
@@ -1677,7 +1679,8 @@ class W3WMapManager(
 
     companion object {
         const val LIST_DEFAULT_ID = "LIST_DEFAULT_ID"
-        private val HEADER_MAP_COMPONENT = mapOf("X-W3W-AS-Component" to ("what3words-Map-Android/" + BuildConfig.LIBRARY_VERSION))
+        private val HEADER_MAP_COMPONENT =
+            mapOf("X-W3W-AS-Component" to ("what3words-Map-Android/" + BuildConfig.LIBRARY_VERSION))
 
         /**
          * The default saver implementation for [W3WMapManager].
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/buttons/MapButtons.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/buttons/MapButtons.kt
@@ -57,14 +57,17 @@ internal fun MapButtons(
         verticalArrangement = Arrangement.spacedBy(20.dp),
         horizontalAlignment = Alignment.End
     ) {
-        if (buttonConfig.isRecallButtonAvailable && buttonState.isRecallButtonVisible) {
+        if (buttonConfig.isRecallButtonAvailable) {
             RecallButton(
                 layoutConfig = layoutConfig.recallButtonLayoutConfig,
                 onRecallClicked = onRecallClicked,
                 onRecallButtonPositionProvided = onRecallButtonPositionProvided,
                 rotation = ceil(buttonState.recallRotationDegree),
                 recallButtonColor = recallButtonColor,
                 contentDescription = contentDescription,
+                isVisible = buttonState.isRecallButtonVisible,
+                isCameraMoving = buttonState.isCameraMoving,
+                selectedPosition = buttonState.selectedScreenLocation ?: PointF(),
             )
         }
         if (buttonConfig.isMyLocationButtonAvailable) {
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/buttons/RecallButton.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/buttons/RecallButton.kt
@@ -1,13 +1,20 @@
 package com.what3words.components.compose.maps.buttons
 
 import android.graphics.PointF
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideIn
+import androidx.compose.animation.slideOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -18,9 +25,10 @@ import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.layout.positionInWindow
+import androidx.compose.ui.layout.positionInRoot
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import com.what3words.components.compose.maps.buttons.W3WMapButtonsDefault.defaultRecallButtonColor
 import com.what3words.components.compose.maps.buttons.W3WMapButtonsDefault.defaultRecallButtonLayoutConfig
@@ -36,6 +44,9 @@ import com.what3words.map.components.compose.R
  * @param contentDescription The content description for the button.
  * @param onRecallClicked The callback when the button is clicked.
  * @param onRecallButtonPositionProvided The callback providing the button's position as a PointF.
+ * @param selectedPosition The position used for calculating the offset for animation, defaults to PointF().
+ * @param isVisible Determines whether the button should be visible.
+ * @param isCameraMoving Indicates if the camera is currently moving, affecting button visibility.
  */
 @Composable
 internal fun RecallButton(
@@ -46,39 +57,87 @@ internal fun RecallButton(
     contentDescription: W3WMapButtonsDefault.ContentDescription = W3WMapButtonsDefault.defaultContentDescription(),
     onRecallClicked: () -> Unit,
     onRecallButtonPositionProvided: (PointF) -> Unit,
+    selectedPosition: PointF = PointF(),
+    isVisible: Boolean = false,
+    isCameraMoving: Boolean = false
 ) {
 
-    var position: Offset by remember { mutableStateOf(Offset.Zero) }
+    // Track previous isVisible state to detect changes
+    var prevIsVisible by remember { mutableStateOf(isVisible) }
+    var shouldBeVisible by remember { mutableStateOf(isVisible) }
+
     val positionCallback = rememberUpdatedState(onRecallButtonPositionProvided)
+    var buttonPosition: Offset by remember { mutableStateOf(Offset.Unspecified) }
 
-    IconButton(
-        onClick = { onRecallClicked() },
-        modifier = modifier
-            .onGloballyPositioned { coordinate ->
-                // Only trigger one time when the button is initialized
-                // The coordinate is affected by the rotation
-                if (position == Offset.Zero) {
-                    position = coordinate.positionInWindow()
-                    val point = PointF(position.x, position.y)
-                    positionCallback.value(point)
-                }
+    LaunchedEffect(isVisible, isCameraMoving) {
+        // Show the button when isVisible is true,
+        // OR  prevIsVisible was true AND we're currently moving the camera (isCameraMoving is true)
+        shouldBeVisible = isVisible || (prevIsVisible && isCameraMoving)
+        prevIsVisible = isVisible
+    }
+
+    AnimatedVisibility(
+        visible = shouldBeVisible,
+        enter = fadeIn(
+            initialAlpha = 0f,
+            animationSpec = tween(400)
+        ) + slideIn(
+            animationSpec = tween(400),
+            initialOffset = { size ->
+                IntOffset(
+                    x = (selectedPosition.x - buttonPosition.x).toInt(),
+                    y = (selectedPosition.y - buttonPosition.y).toInt()
+                )
             }
-            .padding(layoutConfig.buttonPadding)
-            .graphicsLayer {
-                rotationZ = rotation
+        ),
+        exit = fadeOut(
+            targetAlpha = 0f,
+            animationSpec = tween(durationMillis = 400, delayMillis = 200)
+        ) + slideOut(
+            animationSpec = tween(durationMillis = 400, delayMillis = 200),
+            targetOffset = { size ->
+                IntOffset(
+                    x = (selectedPosition.x - buttonPosition.x).toInt(),
+                    y = (selectedPosition.y - buttonPosition.y).toInt()
+                )
             }
-            .shadow(elevation = 3.dp, shape = CircleShape)
-            .size(layoutConfig.buttonSize)
-            .background(recallButtonColor.recallBackgroundColor)
-    ) {
-        Icon(
-            modifier = Modifier
-                .size(layoutConfig.imageSize)
-                .padding(layoutConfig.imagePadding),
-            painter = painterResource(R.drawable.ic_arrow_back),
-            contentDescription = contentDescription.recallButtonDescription,
-            tint = recallButtonColor.recallArrowColor
         )
+    ) {
+        IconButton(
+            onClick = { onRecallClicked() },
+            modifier = modifier
+                .onGloballyPositioned { coordinate ->
+                    // Get the center position of the recall button
+                    // Only trigger one time when the button is initialized
+                    // NOTE: onGloballyPositioned is called AFTER a composition,
+                    // so the first appear time the button can't perform the animation fully because lack of position info.
+                    if (!buttonPosition.isValid()) {
+                        val size = coordinate.size
+                        val position = coordinate.positionInRoot()
+                        val centerX = position.x + size.width / 2
+                        val centerY = position.y + size.height / 2
+                        val centerPoint = PointF(centerX, centerY)
+                        buttonPosition = Offset(centerX, centerY)
+                        positionCallback.value(centerPoint)
+                    }
+                }
+                .padding(layoutConfig.buttonPadding)
+                .shadow(elevation = 3.dp, shape = CircleShape)
+                .size(layoutConfig.buttonSize)
+                .background(recallButtonColor.recallBackgroundColor)
+        ) {
+            Icon(
+                modifier = Modifier
+                    .size(layoutConfig.imageSize)
+                    .padding(layoutConfig.imagePadding)
+                    .graphicsLayer {
+                        rotationZ = rotation
+                    },
+                painter = painterResource(R.drawable.ic_arrow_back),
+                contentDescription = contentDescription.recallButtonDescription,
+                tint = recallButtonColor.recallArrowColor
+            )
+        }
     }
 }
 
@@ -88,6 +147,8 @@ private fun A1() {
     RecallButton(
         modifier = Modifier,
         rotation = 0f,
+        isVisible = true,
+        isCameraMoving = false,
         onRecallClicked = {},
         onRecallButtonPositionProvided = {}
     )
@@ -99,6 +160,8 @@ private fun A2() {
     RecallButton(
         modifier = Modifier,
         rotation = 45f,
+        isVisible = true,
+        isCameraMoving = false,
         onRecallClicked = {},
         onRecallButtonPositionProvided = {}
     )
@@ -110,6 +173,8 @@ private fun A3() {
     RecallButton(
         modifier = Modifier,
         rotation = 90f,
+        isVisible = true,
+        isCameraMoving = false,
         onRecallClicked = {},
         onRecallButtonPositionProvided = {}
     )
@@ -121,6 +186,8 @@ private fun A4() {
     RecallButton(
         modifier = Modifier,
         rotation = 135f,
+        isVisible = true,
+        isCameraMoving = false,
         onRecallClicked = {},
         onRecallButtonPositionProvided = {}
     )
@@ -132,6 +199,8 @@ private fun A5() {
     RecallButton(
         modifier = Modifier,
         rotation = 180f,
+        isVisible = true,
+        isCameraMoving = false,
         onRecallClicked = {},
         onRecallButtonPositionProvided = {}
     )
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/providers/googlemap/W3WGoogleMap.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/providers/googlemap/W3WGoogleMap.kt
@@ -101,12 +101,16 @@ fun W3WGoogleMap(
                         state.cameraState.gridBound = gridBound
                         state.cameraState.visibleBound = visibleBound
                         onCameraUpdated(state.cameraState)
-
                     }
                 }
             }.launchIn(this)
     }
 
+    LaunchedEffect(cameraPositionState.isMoving) {
+        state.cameraState.isCameraMoving = cameraPositionState.isMoving
+        onCameraUpdated(state.cameraState)
+    }
+
     GoogleMap(
         modifier = modifier,
         cameraPositionState = cameraPositionState,
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/providers/mapbox/W3WMapBox.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/providers/mapbox/W3WMapBox.kt
@@ -12,8 +12,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
 import com.mapbox.common.toValue
 import com.mapbox.maps.CameraBoundsOptions
+import com.mapbox.maps.CameraChanged
+import com.mapbox.maps.CameraChangedCallback
 import com.mapbox.maps.CameraOptions
 import com.mapbox.maps.EdgeInsets
+import com.mapbox.maps.MapIdle
+import com.mapbox.maps.MapIdleCallback
 import com.mapbox.maps.MapView
 import com.mapbox.maps.MapboxMap
 import com.mapbox.maps.extension.compose.MapEffect
@@ -43,6 +47,7 @@ import kotlinx.coroutines.flow.onEach
 
 private const val MAPBOX_MIN_ZOOM_LEVEL = 3.0
 private const val MAPBOX_MAX_ZOOM_PITCH = 60.0
+private const val MAPBOX_DEFAULT_CAMERA_PADDING = 10.0
 
 /**
  * A composable function that displays a What3Words (W3W) map using the Mapbox Maps SDK for Android.
@@ -76,9 +81,15 @@ fun W3WMapBox(
     val mapViewportState = (state.cameraState as W3WMapboxCameraState).cameraState
 
     var lastProcessedCameraState by remember { mutableStateOf(mapViewportState.cameraState) }
+
     val density = LocalDensity.current.density
     val cameraForCoordinatesPadding = remember(density) {
-        EdgeInsets(0.0,10.0 * density,0.0,10.0 * density)
+        EdgeInsets(
+            0.0,
+            MAPBOX_DEFAULT_CAMERA_PADDING * density,
+            0.0,
+            MAPBOX_DEFAULT_CAMERA_PADDING * density
+        )
     }
 
     LaunchedEffect(mapViewportState.cameraState) {
@@ -152,8 +163,7 @@ fun W3WMapBox(
         modifier = modifier,
         mapState = mapState,
         mapViewportState = mapViewportState,
-        logo =
-        {
+        logo = {
             Logo(
                 modifier = Modifier.padding(layoutConfig.contentPadding)
             )
@@ -211,6 +221,24 @@ fun W3WMapBox(
                 it.mapboxMap.setBounds(cameraBounds)
             }
 
+            it.mapboxMap.subscribeMapIdle(object : MapIdleCallback {
+                override fun run(mapIdle: MapIdle) {
+                    if (state.cameraState.isCameraMoving == true) {
+                        state.cameraState.isCameraMoving = false
+                        onCameraUpdated(state.cameraState)
+                    }
+                }
+            })
+
+            it.mapboxMap.subscribeCameraChanged(object : CameraChangedCallback {
+                override fun run(cameraChanged: CameraChanged) {
+                    if (state.cameraState.isCameraMoving == false) {
+                        state.cameraState.isCameraMoving = true
+                        onCameraUpdated(state.cameraState)
+                    }
+                }
+            })
+
             if (mapConfig.buttonConfig.isRecallButtonAvailable) {
                 mapView?.mapboxMap?.let { map ->
                     onMapProjectionUpdated(W3WMapBoxMapProjection(map))
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/state/W3WButtonsState.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/state/W3WButtonsState.kt
@@ -18,6 +18,7 @@ data class W3WButtonsState(
     val recallRotationDegree: Float = 0F,
     val recallButtonPosition: PointF = PointF(0F, 0F),
 
+    val isCameraMoving: Boolean = true,
     val mapProjection: W3WMapProjection? = null,
     val mapViewPort: W3WGridScreenCell? = null,
     val recallButtonViewPort: W3WGridScreenCell? = null,
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/state/camera/W3WCameraState.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/state/camera/W3WCameraState.kt
@@ -22,6 +22,8 @@ interface W3WCameraState<T> {
 
     var visibleBound: W3WRectangle?
 
+    var isCameraMoving: Boolean
+
     /**
      *  Adjust camera bearing to 0
      */
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/state/camera/W3WGoogleCameraState.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/state/camera/W3WGoogleCameraState.kt
@@ -28,6 +28,8 @@ class W3WGoogleCameraState(initialCameraState: CameraPositionState) :
 
     override var visibleBound: W3WRectangle? by mutableStateOf(null)
 
+    override var isCameraMoving: Boolean by mutableStateOf(true)
+
     override suspend fun orientCamera() {
         updateCameraPosition(
             CameraPosition(
diff --git a/lib-compose/src/main/java/com/what3words/components/compose/maps/state/camera/W3WMapboxCameraState.kt b/lib-compose/src/main/java/com/what3words/components/compose/maps/state/camera/W3WMapboxCameraState.kt
@@ -24,6 +24,8 @@ class W3WMapboxCameraState(initialCameraState: MapViewportState) :
 
     override var visibleBound: W3WRectangle? by mutableStateOf(null)
 
+    override var isCameraMoving: Boolean by mutableStateOf(true)
+
     //TODO: This is work around for the function cameraForCoordinates not support in compose
     var cameraForCoordinates: MutableList<Point>? = mutableListOf()
 

Original file line number	Diff line number	Diff line change
`@@ -101,12 +101,16 @@ fun W3WGoogleMap(`
`101`	`101`	`state.cameraState.gridBound = gridBound`
`102`	`102`	`state.cameraState.visibleBound = visibleBound`
`103`	`103`	`onCameraUpdated(state.cameraState)`
`104`		`-`
`105`	`104`	`}`
`106`	`105`	`}`
`107`	`106`	`}.launchIn(this)`
`108`	`107`	`}`
`109`	`108`
	`109`	`+ LaunchedEffect(cameraPositionState.isMoving) {`
	`110`	`+ state.cameraState.isCameraMoving = cameraPositionState.isMoving`
	`111`	`+ onCameraUpdated(state.cameraState)`
	`112`	`+ }`
	`113`	`+`
`110`	`114`	`GoogleMap(`
`111`	`115`	`modifier = modifier,`
`112`	`116`	`cameraPositionState = cameraPositionState,`