ImageViewer

Author: Wavesonics

app/build.gradle.kts

@@ -87,7 +87,6 @@ dependencies {
 	implementation(libs.koin.androidx.compose)
 	implementation(libs.koin.androidx.compose.navigation)
 	implementation(libs.koin.core.coroutines)
-	implementation(libs.imageviewer)
 	implementation(libs.androidx.material.icons.extended)
 	implementation(platform(libs.cryptography.bom))
 	implementation(libs.cryptography.core)

app/src/main/kotlin/com/darkrockstudios/app/securecamera/viewphoto/ImageViewer.kt

@@ -0,0 +1,92 @@
+package com.darkrockstudios.app.securecamera.viewphoto
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.gestures.detectTransformGestures
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.ContentScale
+
+@Stable
+class ImageViewerState internal constructor(
+    scale: Float = 1f,
+    offset: Offset = Offset.Zero,
+    val minScale: Float = 1f,
+    val maxScale: Float = 5f,
+) {
+    var scale by mutableStateOf(scale)
+    var offset by mutableStateOf(offset)
+
+    fun reset() {
+        scale = 1f
+        offset = Offset.Zero
+    }
+}
+
+/**
+ * Call this from your Composable to keep the state across recompositions.
+ */
+@Composable
+fun rememberImageViewerState(
+    initialScale: Float = 1f,
+    initialOffset: Offset = Offset.Zero,
+    minScale: Float = 1f,
+    maxScale: Float = 5f,
+): ImageViewerState = remember {
+    ImageViewerState(
+        scale = initialScale,
+        offset = initialOffset,
+        minScale = minScale,
+        maxScale = maxScale,
+    )
+}
+
+/**
+ * A zoomable / pannable image-viewer composable.
+ *
+ * @param bitmap	The photo to display.
+ * @param state		State returned from [rememberImageViewerState].
+ * @param modifier	Extra modifiers (size, background, etc.).
+ */
+@Composable
+fun ImageViewer(
+    bitmap: ImageBitmap,
+    state: ImageViewerState,
+    modifier: Modifier = Modifier,
+) {
+    Image(
+        bitmap = bitmap,
+        contentDescription = null,
+        contentScale = ContentScale.Fit,
+        modifier = modifier
+            .clipToBounds()
+            .pointerInput(state) {
+                detectTransformGestures { _, pan, zoom, _ ->
+                    // ----- Zoom -----
+                    val newScale = (state.scale * zoom).coerceIn(state.minScale, state.maxScale)
+
+                    // ----- Pan (don’t forget current scale) -----
+                    val newOffset = state.offset + pan
+
+                    state.scale = newScale
+                    state.offset = newOffset
+                }
+            }
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onDoubleTap = { state.reset() }
+                )
+            }
+            .graphicsLayer {
+                scaleX = state.scale
+                scaleY = state.scale
+                translationX = state.offset.x
+                translationY = state.offset.y
+            }
+    )
+}

app/src/main/kotlin/com/darkrockstudios/app/securecamera/viewphoto/ViewPhotoContent.kt

@@ -1,6 +1,5 @@
 package com.darkrockstudios.app.securecamera.viewphoto
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -16,7 +15,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.navigation.NavController
@@ -26,8 +24,6 @@ import com.darkrockstudios.app.securecamera.camera.PhotoDef
 import com.darkrockstudios.app.securecamera.camera.SecureImageManager
 import com.darkrockstudios.app.securecamera.preferences.AppPreferencesManager
 import com.darkrockstudios.app.securecamera.sharePhotoData
-import com.zhangke.imageviewer.ImageViewer
-import com.zhangke.imageviewer.rememberImageViewerState
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
@@ -145,28 +141,25 @@ fun ViewPhotoContent(
 			contentAlignment = Alignment.Center
 		) {
 			if (photo.photoFile.exists()) {
-				val state = rememberImageViewerState {
-					navController.navigateUp()
-				}
-				ImageViewer(
-					state = state,
-					modifier = Modifier
-						.fillMaxSize()
-						.clipToBounds()
-				) {
-					imageBitmap?.let {
-						Image(
-							bitmap = it,
-							contentDescription = stringResource(id = R.string.photo_content_description),
-							contentScale = ContentScale.Fit,
+				val state = rememberImageViewerState(
+//					onDismiss = {
+//						navController.navigateUp()
+//					}
+				)
+				imageBitmap?.let {
+					ImageViewer(
+						bitmap = it,
+						state = state,
+						modifier = Modifier
+							.fillMaxSize()
+							.clipToBounds()
+					)
+				} ?: run {
+					Box(modifier = Modifier.fillMaxSize()) {
+						Text(
+							text = stringResource(R.string.photo_content_loading),
+							modifier = Modifier.align(Alignment.Center)
 						)
-					} ?: run {
-						Box(modifier = Modifier.fillMaxSize()) {
-							Text(
-								text = stringResource(R.string.photo_content_loading),
-								modifier = Modifier.align(Alignment.Center)
-							)
-						}
 					}
 				}
 			} else {