Draggable API for annotations in compose. (#2756)

CHANGELOG.md

@@ -9,6 +9,7 @@ Mapbox welcomes participation and contributions from everyone.
 * [compose] Deprecate all `Annotation` and `AnnotationGroup` composables that take `onClick` parameter. Now all annotation interactions could be set with appropriate `AnnotationInteractionsState` or `AnnotationGroupInteractionsState` stored in `AnnotationGroupState`.
 * [compose] Introduce `AnnotationInteractionsState` and `AnnotationGroupInteractionsState` states that allow to set callbacks for annotation interactions via `onClicked()` and `onLongClicked()`.`PointAnnotationGroupInteractionsState` and `CircleAnnotationGroupInteractionsState` also provide ability to set callbacks for interactions with clusters via `onClusterClicked` and `onClusterLongClicked`.
 * [compose] Introduce `remember` (e.g. `rememberPolylineAnnotationGroupInteractionsState` and `rememberPolylineAnnotationInteractionsState`) composable functions to create, init and remember all types of `AnnotationInteractionsState` and `AnnotationGroupInteractionsState`.
+* [compose] Introduce `<AnnotationType>InteractionsState.isDraggable` / `<AnnotationType>GroupInteractionsState.isDraggable` API for all annotation types allowing to drag annotations. Callbacks `onDragStarted()`, `onDragged()`,`onDragFinished()` are added as well.
 
 # 11.7.0 September 26, 2024
 ## Features ✨ and improvements 🏁

compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/annotation/CircleAnnotationActivity.kt

@@ -29,6 +29,7 @@ import com.mapbox.maps.extension.compose.annotation.generated.CircleAnnotationGr
 import com.mapbox.maps.extension.compose.annotation.generated.withCircleColor
 import com.mapbox.maps.extension.style.expressions.dsl.generated.literal
 import com.mapbox.maps.extension.style.expressions.generated.Expression
+import com.mapbox.maps.logD
 import com.mapbox.maps.plugin.annotation.AnnotationConfig
 import com.mapbox.maps.plugin.annotation.AnnotationSourceOptions
 import com.mapbox.maps.plugin.annotation.ClusterOptions
@@ -100,6 +101,12 @@ public class CircleAnnotationActivity : ComponentActivity() {
                   ).show()
                   true
                 }
+                .onDragged {
+                  logD(
+                    this.javaClass.simpleName,
+                    "Dragging single Circle Annotation: $it",
+                  )
+                }
               circleRadius = 20.0
               circleColor = Color.Blue
             }
@@ -134,18 +141,19 @@ public class CircleAnnotationActivity : ComponentActivity() {
               // Apply circle color to the whole CircleAnnotationGroup
               circleColor = groupColor
 
+              interactionsState.isDraggable = true
               interactionsState.onClicked {
                 Toast.makeText(
                   this@CircleAnnotationActivity,
-                  "Clicked on Circle Annotation Cluster item: $it",
+                  "Clicked on Circle Annotation Cluster's item: $it",
                   Toast.LENGTH_SHORT
                 ).show()
                 true
               }
                 .onLongClicked {
                   Toast.makeText(
                     this@CircleAnnotationActivity,
-                    "Long clicked on Circle Annotation Cluster item: $it",
+                    "Long clicked on Circle Annotation Cluster's item: $it",
                     Toast.LENGTH_SHORT
                   ).show()
                   true
@@ -166,6 +174,27 @@ public class CircleAnnotationActivity : ComponentActivity() {
                   ).show()
                   true
                 }
+                .onDragged {
+                  logD(
+                    this.javaClass.simpleName,
+                    "Dragging Circle Annotation Cluster's item: $it"
+                  )
+                }
+                .onDragStarted {
+                  Toast.makeText(
+                    this@CircleAnnotationActivity,
+                    "Dragged Started for Circle Annotation Cluster's item: $it",
+                    Toast.LENGTH_SHORT
+                  ).show()
+                }
+                .onDragFinished {
+                  interactionsState.onDragged {
+                    logD(
+                      this.javaClass.simpleName,
+                      "Updated dragging Circle Annotation Cluster's item: $it"
+                    )
+                  }
+                }
             }
           }
         }

compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/annotation/PointAnnotationActivity.kt

@@ -27,6 +27,7 @@ import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportS
 import com.mapbox.maps.extension.compose.annotation.generated.PointAnnotation
 import com.mapbox.maps.extension.compose.annotation.rememberIconImage
 import com.mapbox.maps.extension.compose.style.MapStyle
+import com.mapbox.maps.logD
 
 /**
  * Example to showcase usage of point annotations with text and icon image.
@@ -82,7 +83,8 @@ public class PointAnnotationActivity : ComponentActivity() {
               MapStyle(style = Style.LIGHT)
             }
           ) {
-            val marker = rememberIconImage(key = markerResourceId, painter = painterResource(markerResourceId))
+            val marker =
+              rememberIconImage(key = markerResourceId, painter = painterResource(markerResourceId))
             PointAnnotation(point = CityLocations.HELSINKI) {
               iconImage = marker
               textField = text
@@ -94,6 +96,12 @@ public class PointAnnotationActivity : ComponentActivity() {
                 }
                 true
               }
+                .onDragged {
+                  logD(
+                    this.javaClass.simpleName,
+                    "onDragged"
+                  )
+                }.also { it.isDraggable = true }
             }
           }
         }

compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/annotation/PointAnnotationClusterActivity.kt

@@ -90,19 +90,20 @@ public class PointAnnotationClusterActivity : ComponentActivity() {
             ) {
               // Apply icon image to the whole annotation group.
               iconImage = IconImage(ICON_FIRE_STATION)
+              interactionsState.isDraggable = true
 
               interactionsState.onClicked {
                 Toast.makeText(
                   this@PointAnnotationClusterActivity,
-                  "Clicked on Point Annotation Cluster: $it",
+                  "Clicked on Point Annotation Cluster's item: $it",
                   Toast.LENGTH_SHORT
                 ).show()
                 true
               }
                 .onLongClicked {
                   Toast.makeText(
                     this@PointAnnotationClusterActivity,
-                    "Long clicked on Circle Annotation Cluster item: $it",
+                    "Long clicked on Circle Annotation Cluster's item: $it",
                     Toast.LENGTH_SHORT
                   ).show()
                   true

compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/annotation/PolygonAnnotationActivity.kt

@@ -64,12 +64,14 @@ public class PolygonAnnotationActivity : ComponentActivity() {
             PolygonAnnotation(
               points = POLYGON_POINTS,
             ) {
+              interactionsState.isDraggable = true
               interactionsState.onClicked {
                 Toast.makeText(
                   this@PolygonAnnotationActivity,
                   "Clicked on Polygon Annotation: $it",
                   Toast.LENGTH_SHORT
                 ).show()
+                interactionsState.isDraggable = false
                 true
               }
                 .onLongClicked {
@@ -78,6 +80,7 @@ public class PolygonAnnotationActivity : ComponentActivity() {
                     "Long Clicked on Polygon Annotation: $it",
                     Toast.LENGTH_SHORT
                   ).show()
+                  interactionsState.isDraggable = true
                   true
                 }
               fillColor = color

compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/annotation/PolylineAnnotationActivity.kt

@@ -17,6 +17,7 @@ import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportS
 import com.mapbox.maps.extension.compose.annotation.generated.PolylineAnnotation
 import com.mapbox.maps.extension.compose.annotation.generated.PolylineAnnotationGroup
 import com.mapbox.maps.extension.compose.annotation.generated.withLineColor
+import com.mapbox.maps.logD
 import com.mapbox.maps.plugin.annotation.AnnotationConfig
 import com.mapbox.maps.plugin.annotation.generated.PolylineAnnotationOptions
 import java.util.Random
@@ -63,6 +64,12 @@ public class PolylineAnnotationActivity : ComponentActivity() {
                   ).show()
                   true
                 }
+                .onDragged {
+                  logD(
+                    this.javaClass.simpleName,
+                    "Dragging Polyline Annotation: $it"
+                  )
+                }.also { it.isDraggable = true }
               lineColor = Color.Red
               lineWidth = 5.0
             }

extension-compose/README.md

@@ -262,19 +262,19 @@ Adding multiple Annotations to the map using `AnnotationGroup` is more efficient
           interactionsState.onClicked {
             Toast.makeText(
               this@CircleAnnotationActivity,
-              "Clicked on Circle Annotation Cluster item: $it",
+              "Clicked on Circle Annotation Cluster's item: $it",
               Toast.LENGTH_SHORT
             ).show()
             true
           }
-          interactionsState.onLongClicked {
-            Toast.makeText(
-              this@CircleAnnotationActivity,
-              "Long clicked on Circle Annotation Cluster item: $it",
-              Toast.LENGTH_SHORT
-            ).show()
-            true
-          }             
+            .onLongClicked {
+              Toast.makeText(
+                this@CircleAnnotationActivity,
+                "Long clicked on Circle Annotation Cluster's item: $it",
+                Toast.LENGTH_SHORT
+              ).show()
+              true
+            }             
         }
       }
     }
@@ -325,7 +325,7 @@ The following example showcases adding multiple `PointAnnotations` with clusteri
             .onLongClicked {
               Toast.makeText(
                 this@PointAnnotationClusterActivity,
-                "Long clicked on Circle Annotation Cluster item: $it",
+                "Long clicked on Circle Annotation Cluster's item: $it",
                 Toast.LENGTH_SHORT
               ).show()
               true