Skip to content

Commit 405c23e

Browse files
flasher297flasher297
authored
Draggable API for annotations in compose. (#2756)
1 parent 5284618 commit 405c23e

31 files changed

+1036
-335
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Mapbox welcomes participation and contributions from everyone.
99
* [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`.
1010
* [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`.
1111
* [compose] Introduce `remember` (e.g. `rememberPolylineAnnotationGroupInteractionsState` and `rememberPolylineAnnotationInteractionsState`) composable functions to create, init and remember all types of `AnnotationInteractionsState` and `AnnotationGroupInteractionsState`.
12+
* [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.
1213

1314
# 11.7.0 September 26, 2024
1415
## Features ✨ and improvements 🏁

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import com.mapbox.maps.extension.compose.annotation.generated.CircleAnnotationGr
2929
import com.mapbox.maps.extension.compose.annotation.generated.withCircleColor
3030
import com.mapbox.maps.extension.style.expressions.dsl.generated.literal
3131
import com.mapbox.maps.extension.style.expressions.generated.Expression
32+
import com.mapbox.maps.logD
3233
import com.mapbox.maps.plugin.annotation.AnnotationConfig
3334
import com.mapbox.maps.plugin.annotation.AnnotationSourceOptions
3435
import com.mapbox.maps.plugin.annotation.ClusterOptions
@@ -100,6 +101,12 @@ public class CircleAnnotationActivity : ComponentActivity() {
100101
).show()
101102
true
102103
}
104+
.onDragged {
105+
logD(
106+
this.javaClass.simpleName,
107+
"Dragging single Circle Annotation: $it",
108+
)
109+
}
103110
circleRadius = 20.0
104111
circleColor = Color.Blue
105112
}
@@ -134,18 +141,19 @@ public class CircleAnnotationActivity : ComponentActivity() {
134141
// Apply circle color to the whole CircleAnnotationGroup
135142
circleColor = groupColor
136143

144+
interactionsState.isDraggable = true
137145
interactionsState.onClicked {
138146
Toast.makeText(
139147
this@CircleAnnotationActivity,
140-
"Clicked on Circle Annotation Cluster item: $it",
148+
"Clicked on Circle Annotation Cluster's item: $it",
141149
Toast.LENGTH_SHORT
142150
).show()
143151
true
144152
}
145153
.onLongClicked {
146154
Toast.makeText(
147155
this@CircleAnnotationActivity,
148-
"Long clicked on Circle Annotation Cluster item: $it",
156+
"Long clicked on Circle Annotation Cluster's item: $it",
149157
Toast.LENGTH_SHORT
150158
).show()
151159
true
@@ -166,6 +174,27 @@ public class CircleAnnotationActivity : ComponentActivity() {
166174
).show()
167175
true
168176
}
177+
.onDragged {
178+
logD(
179+
this.javaClass.simpleName,
180+
"Dragging Circle Annotation Cluster's item: $it"
181+
)
182+
}
183+
.onDragStarted {
184+
Toast.makeText(
185+
this@CircleAnnotationActivity,
186+
"Dragged Started for Circle Annotation Cluster's item: $it",
187+
Toast.LENGTH_SHORT
188+
).show()
189+
}
190+
.onDragFinished {
191+
interactionsState.onDragged {
192+
logD(
193+
this.javaClass.simpleName,
194+
"Updated dragging Circle Annotation Cluster's item: $it"
195+
)
196+
}
197+
}
169198
}
170199
}
171200
}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportS
2727
import com.mapbox.maps.extension.compose.annotation.generated.PointAnnotation
2828
import com.mapbox.maps.extension.compose.annotation.rememberIconImage
2929
import com.mapbox.maps.extension.compose.style.MapStyle
30+
import com.mapbox.maps.logD
3031

3132
/**
3233
* Example to showcase usage of point annotations with text and icon image.
@@ -82,7 +83,8 @@ public class PointAnnotationActivity : ComponentActivity() {
8283
MapStyle(style = Style.LIGHT)
8384
}
8485
) {
85-
val marker = rememberIconImage(key = markerResourceId, painter = painterResource(markerResourceId))
86+
val marker =
87+
rememberIconImage(key = markerResourceId, painter = painterResource(markerResourceId))
8688
PointAnnotation(point = CityLocations.HELSINKI) {
8789
iconImage = marker
8890
textField = text
@@ -94,6 +96,12 @@ public class PointAnnotationActivity : ComponentActivity() {
9496
}
9597
true
9698
}
99+
.onDragged {
100+
logD(
101+
this.javaClass.simpleName,
102+
"onDragged"
103+
)
104+
}.also { it.isDraggable = true }
97105
}
98106
}
99107
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,19 +90,20 @@ public class PointAnnotationClusterActivity : ComponentActivity() {
9090
) {
9191
// Apply icon image to the whole annotation group.
9292
iconImage = IconImage(ICON_FIRE_STATION)
93+
interactionsState.isDraggable = true
9394

9495
interactionsState.onClicked {
9596
Toast.makeText(
9697
this@PointAnnotationClusterActivity,
97-
"Clicked on Point Annotation Cluster: $it",
98+
"Clicked on Point Annotation Cluster's item: $it",
9899
Toast.LENGTH_SHORT
99100
).show()
100101
true
101102
}
102103
.onLongClicked {
103104
Toast.makeText(
104105
this@PointAnnotationClusterActivity,
105-
"Long clicked on Circle Annotation Cluster item: $it",
106+
"Long clicked on Circle Annotation Cluster's item: $it",
106107
Toast.LENGTH_SHORT
107108
).show()
108109
true

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,14 @@ public class PolygonAnnotationActivity : ComponentActivity() {
6464
PolygonAnnotation(
6565
points = POLYGON_POINTS,
6666
) {
67+
interactionsState.isDraggable = true
6768
interactionsState.onClicked {
6869
Toast.makeText(
6970
this@PolygonAnnotationActivity,
7071
"Clicked on Polygon Annotation: $it",
7172
Toast.LENGTH_SHORT
7273
).show()
74+
interactionsState.isDraggable = false
7375
true
7476
}
7577
.onLongClicked {
@@ -78,6 +80,7 @@ public class PolygonAnnotationActivity : ComponentActivity() {
7880
"Long Clicked on Polygon Annotation: $it",
7981
Toast.LENGTH_SHORT
8082
).show()
83+
interactionsState.isDraggable = true
8184
true
8285
}
8386
fillColor = color

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportS
1717
import com.mapbox.maps.extension.compose.annotation.generated.PolylineAnnotation
1818
import com.mapbox.maps.extension.compose.annotation.generated.PolylineAnnotationGroup
1919
import com.mapbox.maps.extension.compose.annotation.generated.withLineColor
20+
import com.mapbox.maps.logD
2021
import com.mapbox.maps.plugin.annotation.AnnotationConfig
2122
import com.mapbox.maps.plugin.annotation.generated.PolylineAnnotationOptions
2223
import java.util.Random
@@ -63,6 +64,12 @@ public class PolylineAnnotationActivity : ComponentActivity() {
6364
).show()
6465
true
6566
}
67+
.onDragged {
68+
logD(
69+
this.javaClass.simpleName,
70+
"Dragging Polyline Annotation: $it"
71+
)
72+
}.also { it.isDraggable = true }
6673
lineColor = Color.Red
6774
lineWidth = 5.0
6875
}

‎extension-compose/README.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -262,19 +262,19 @@ Adding multiple Annotations to the map using `AnnotationGroup` is more efficient
262262
interactionsState.onClicked {
263263
Toast.makeText(
264264
this@CircleAnnotationActivity,
265-
"Clicked on Circle Annotation Cluster item: $it",
265+
"Clicked on Circle Annotation Cluster's item: $it",
266266
Toast.LENGTH_SHORT
267267
).show()
268268
true
269269
}
270-
interactionsState.onLongClicked {
271-
Toast.makeText(
272-
this@CircleAnnotationActivity,
273-
"Long clicked on Circle Annotation Cluster item: $it",
274-
Toast.LENGTH_SHORT
275-
).show()
276-
true
277-
}
270+
.onLongClicked {
271+
Toast.makeText(
272+
this@CircleAnnotationActivity,
273+
"Long clicked on Circle Annotation Cluster's item: $it",
274+
Toast.LENGTH_SHORT
275+
).show()
276+
true
277+
}
278278
}
279279
}
280280
}
@@ -325,7 +325,7 @@ The following example showcases adding multiple `PointAnnotations` with clusteri
325325
.onLongClicked {
326326
Toast.makeText(
327327
this@PointAnnotationClusterActivity,
328-
"Long clicked on Circle Annotation Cluster item: $it",
328+
"Long clicked on Circle Annotation Cluster's item: $it",
329329
Toast.LENGTH_SHORT
330330
).show()
331331
true

0 commit comments

Comments
 (0)