transitions and interaction

sargunv · Nov 25, 2024 · 3e3472b · 3e3472b
1 parent b3e16ee
commit 3e3472b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 29 deletions.
diff --git a/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/DemoApp.kt b/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/DemoApp.kt
@@ -1,5 +1,6 @@
 package dev.sargunv.maplibrecompose.demoapp
 
+import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.rememberScrollState
@@ -25,7 +26,16 @@ import kotlinx.serialization.Serializable
 @Composable
 fun DemoApp(navController: NavHostController = rememberNavController()) {
   MaterialTheme {
-    NavHost(navController = navController, startDestination = StartRoute) {
+    NavHost(
+      navController = navController,
+      startDestination = StartRoute,
+      enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start) },
+      exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start) },
+      popEnterTransition = {
+        slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.End)
+      },
+      popExitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End) },
+    ) {
       composable<EdgeToEdgeRoute> {
         DemoScaffold("Edge-to-edge", alpha = 0.5f, navigateUp = navController::navigateUp) {
           innerPadding ->
@@ -38,18 +48,13 @@ fun DemoApp(navController: NavHostController = rememberNavController()) {
         }
       }
       composable<BasicLayersRoute> {
-        SimpleDemoScaffold("Clustered points", navigateUp = navController::navigateUp) {
+        SimpleDemoScaffold("Clustering and interaction", navigateUp = navController::navigateUp) {
           ClusteredPointsDemo()
         }
       }
       composable<AnimatedPropertiesRoute> {
-        SimpleDemoScaffold("Animated properties", navigateUp = navController::navigateUp) {
-          Text("Animated properties")
-        }
-      }
-      composable<InteractionRoute> {
-        SimpleDemoScaffold("Interaction", navigateUp = navController::navigateUp) {
-          Text("Interaction")
+        SimpleDemoScaffold("Animated layer", navigateUp = navController::navigateUp) {
+          Text("Animated layer")
         }
       }
       composable<CameraStateRoute> {
@@ -80,20 +85,15 @@ fun DemoApp(navController: NavHostController = rememberNavController()) {
               onClick = { navController.navigate(StyleSwitcherRoute) },
             )
             DemoListItem(
-              title = "Clustered points",
+              title = "Clustering and interaction",
               description = "Add points to the map and configure clustering with expressions.",
               onClick = { navController.navigate(BasicLayersRoute) },
             )
             DemoListItem(
-              title = "Animated properties",
+              title = "Animated layer",
               description = "Change layer properties at runtime.",
               onClick = { navController.navigate(AnimatedPropertiesRoute) },
             )
-            DemoListItem(
-              title = "Interaction",
-              description = "Detect taps on the map and the features under them.",
-              onClick = { navController.navigate(InteractionRoute) },
-            )
             DemoListItem(
               title = "Camera state",
               description = "Read camera position as state.",
@@ -138,8 +138,6 @@ fun DemoListItem(title: String, description: String, onClick: () -> Unit) {
 
 @Serializable object AnimatedPropertiesRoute
 
-@Serializable object InteractionRoute
-
 @Serializable object CameraStateRoute
 
 @Serializable object CameraFollowRoute

diff --git a/...pp/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/ClusteredPointsDemo.kt b/...pp/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/ClusteredPointsDemo.kt
@@ -2,12 +2,7 @@ package dev.sargunv.maplibrecompose.demoapp.demos
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.State
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import dev.sargunv.maplibrecompose.compose.MaplibreMap
@@ -23,6 +18,7 @@ import io.github.dellisd.spatialk.geojson.Feature
 import io.github.dellisd.spatialk.geojson.FeatureCollection
 import io.github.dellisd.spatialk.geojson.Point
 import io.github.dellisd.spatialk.geojson.Position
+import kotlinx.coroutines.launch
 import kotlinx.serialization.json.Json
 import kotlinx.serialization.json.JsonNull
 import kotlinx.serialization.json.double
@@ -39,11 +35,11 @@ private val LIME_GREEN = Color(50, 205, 5)
 
 @Composable
 fun ClusteredPointsDemo() = Column {
-  MaplibreMap(
-    modifier = Modifier.weight(1f),
-    styleUrl = DEFAULT_STYLE,
-    cameraState = rememberCameraState(firstPosition = CameraPosition(target = SEATTLE, zoom = 10.0)),
-  ) {
+  val cameraState =
+    rememberCameraState(firstPosition = CameraPosition(target = SEATTLE, zoom = 10.0))
+  val coroutineScope = rememberCoroutineScope()
+
+  MaplibreMap(modifier = Modifier.weight(1f), styleUrl = DEFAULT_STYLE, cameraState = cameraState) {
     val gbfsData by rememberGbfsFeatureState(GBFS_FILE)
 
     val bikeSource =
@@ -69,6 +65,18 @@ fun ClusteredPointsDemo() = Column {
           1000 to const(50),
           5000 to const(60),
         ),
+      onClick = { features ->
+        features.firstOrNull()?.geometry?.let {
+          coroutineScope.launch {
+            cameraState.animateTo(
+              cameraState.position.copy(
+                target = (it as Point).coordinates,
+                zoom = cameraState.position.zoom + 1,
+              )
+            )
+          }
+        }
+      },
     )
 
     SymbolLayer(