Merge pull request #740 from att55/zoom_floor_map

Pinch and zoom for floor map
DroidKaigi · Sep 25, 2022 · b1f06ba · b1f06ba
2 parents 10545c5 + af19471
commit b1f06ba
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/feature/map/src/main/java/io/github/droidkaigi/confsched2022/feature/map/Map.kt b/feature/map/src/main/java/io/github/droidkaigi/confsched2022/feature/map/Map.kt
@@ -2,14 +2,22 @@ package io.github.droidkaigi.confsched2022.feature.map
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.rememberTransformableState
+import androidx.compose.foundation.gestures.transformable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import dev.icerock.moko.resources.compose.stringResource
@@ -55,10 +63,27 @@ fun Map(
                 .padding(innerPadding),
             contentAlignment = Alignment.Center
         ) {
+            val minScale = 1f
+            val maxScale = 3f
+            var scale by remember { mutableStateOf(minScale) }
+            var offset by remember { mutableStateOf(Offset.Zero) }
+            val state = rememberTransformableState { zoomChange, offsetChange, _ ->
+                scale *= zoomChange
+                offset += offsetChange
+            }
             Image(
                 painter = painterResource(id = R.drawable.map),
                 contentDescription = "Floor map",
-                modifier = Modifier.padding(16.dp)
+                modifier = Modifier
+                    .transformable(state = state)
+                    .graphicsLayer(
+                        scaleX = scale.coerceIn(minScale, maxScale),
+                        scaleY = scale.coerceIn(minScale, maxScale),
+                        translationX = offset.x,
+                        translationY = offset.y,
+                    )
+                    .fillMaxSize()
+                    .padding(16.dp)
             )
         }
     }