Add zoom functionality by sliding over zoom buttons (fixes #6716)

Author: Helium314

app/src/androidMain/kotlin/de/westnordost/streetcomplete/screens/main/MainActivity.kt

@@ -235,6 +235,7 @@ class MainActivity :
                     editHistoryViewModel = editHistoryViewModel,
                     onClickZoomIn = ::onClickZoomIn,
                     onClickZoomOut = ::onClickZoomOut,
+                    onZoomDrag = ::onZoomDrag,
                     onClickCompass = ::onClickCompassButton,
                     onClickLocation = ::onClickLocationButton,
                     onClickLocationPointer = ::onClickLocationPointer,
@@ -685,6 +686,10 @@ class MainActivity :
         mapFragment?.updateCameraPosition(300) { zoomBy = +1.0 }
     }
 
+    private fun onZoomDrag(dp: Float) {
+        mapFragment?.updateCameraPosition(300) { zoomBy = dp / 20.0 }
+    }
+
     private fun onClickTracksStop() {
         // hide the track information
         viewModel.isRecordingTracks.value = false

app/src/androidMain/kotlin/de/westnordost/streetcomplete/screens/main/MainScreen.kt

@@ -94,6 +94,7 @@ fun MainScreen(
     editHistoryViewModel: EditHistoryViewModel,
     onClickZoomIn: () -> Unit,
     onClickZoomOut: () -> Unit,
+    onZoomDrag: (Float) -> Unit,
     onClickCompass: () -> Unit,
     onClickLocation: () -> Unit,
     onClickLocationPointer: () -> Unit,
@@ -306,7 +307,8 @@ fun MainScreen(
                         if (showZoomButtons) {
                             ZoomButtons(
                                 onZoomIn = onClickZoomIn,
-                                onZoomOut = onClickZoomOut
+                                onZoomOut = onClickZoomOut,
+                                onZoomDrag = onZoomDrag
                             )
                         }
                         LocationStateButton(

app/src/commonMain/kotlin/de/westnordost/streetcomplete/screens/main/controls/ZoomButtons.kt

@@ -1,6 +1,7 @@
 package de.westnordost.streetcomplete.screens.main.controls
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.gestures.detectVerticalDragGestures
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.width
@@ -13,22 +14,26 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.ui.common.ZoomInIcon
 import de.westnordost.streetcomplete.ui.common.ZoomOutIcon
 import androidx.compose.ui.tooling.preview.Preview
+import de.westnordost.streetcomplete.ui.ktx.pxToDp
 
 /** Combined control for zooming in and out */
 @Composable
 fun ZoomButtons(
     onZoomIn: () -> Unit,
     onZoomOut: () -> Unit,
+    onZoomDrag: (Float) -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     colors: ButtonColors = ButtonDefaults.buttonColors(
         backgroundColor = MaterialTheme.colors.surface,
     ),
 ) {
+    val pxToDp = 1.pxToDp().value
     Surface(
         modifier = modifier,
         shape = CircleShape,
@@ -37,7 +42,15 @@ fun ZoomButtons(
         border = BorderStroke(1.dp, MaterialTheme.colors.onSurface.copy(alpha = 0.12f)),
         elevation = 4.dp
     ) {
-        Column(Modifier.width(IntrinsicSize.Min)) {
+        Column(Modifier
+            .width(IntrinsicSize.Min)
+            .pointerInput(Unit) {
+                detectVerticalDragGestures { change, dragAmount ->
+                    change.consume()
+                    onZoomDrag(-dragAmount * pxToDp) // dragAmount is pixels, we want dp
+                }
+            }
+        ) {
             IconButton(onClick = onZoomIn, enabled = enabled) { ZoomInIcon() }
             Divider()
             IconButton(onClick = onZoomOut, enabled = enabled) { ZoomOutIcon() }
@@ -48,5 +61,5 @@ fun ZoomButtons(
 @Preview
 @Composable
 private fun PreviewZoomButtons() {
-    ZoomButtons(onZoomIn = {}, onZoomOut = {})
+    ZoomButtons(onZoomIn = {}, onZoomOut = {}, onZoomDrag = {})
 }