Set limits for pan in jetpack compose

Question

I am having hard times while trying to implement pan gesture with jetpack compose. My requirement is pan gesture to not move loaded image out of its original boundaries. Is that possible?

@Composable
fun ZoomableImage() {
    val bitmapBytes = viewModel.page.observeAsState()
    val bitmap = bitmapBytes.value?.let {
        BitmapFactory.decodeByteArray(
            bitmapBytes.value, 0,
            it.size
        )
    }
    if (bitmap != null) {

        var scale by remember { mutableStateOf(1f) }
        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }

        Image(
            modifier = Modifier
                .scale(maxOf(1f, scale))
                .absoluteOffset {
                    IntOffset(offsetX.roundToInt(), offsetY.roundToInt())
                }
                .pointerInput(Unit) {
                    detectTransformGestures(
                        onGesture = { _, pan, gestureZoom, _ ->
                            scale *= gestureZoom
                            offsetX += pan.x
                            offsetY += pan.y
                        }
                    )
                }
                .fillMaxSize(),
            bitmap = bitmap.asImageBitmap(),
            contentDescription = null
        )
    }
}

Answer 1

I found the answer. If anybody has same question as me, feel free to use https://github.com/Tlaster/Zoomable.

In case you need the underlying code, these two classes do the job:

https://github.com/Tlaster/Zoomable/blob/master/zoomable/src/main/java/moe/tlaster/zoomable/Zoomable.kt

https://github.com/Tlaster/Zoomable/blob/master/zoomable/src/main/java/moe/tlaster/zoomable/ZoomableState.kt