IssueTracker

I have been trying to implement zoomable composable in a scrollable layout like LazyColumn. When the zoomable composable is zoomed, user can drag to pan. But once the panning reaches the edge of the content, the subsequent pan will scroll the LazyColumn. Here's my code that was working prior to beta08:

@ExperimentalFoundationApi
@Composable
fun ZoomableComposable(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    val width = remember { mutableStateOf(0f) }
    val height = remember { mutableStateOf(0f) }
    val offsetX = remember { mutableStateOf(0f) }
    val offsetY = remember { mutableStateOf(0f) }
    val scale = remember { mutableStateOf(1f) }
    val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
        scale.value *= zoomChange
        scale.value = maxOf(1f, minOf(3f, scale.value))
        if (scale.value == 1f) {
            offsetX.value = 0f
            offsetY.value = 0f
        }
    }
    Box(
        modifier = modifier
            .clip(RectangleShape)
            .onGloballyPositioned { coordinates ->
                // This will be the size of the Box.
                width.value = coordinates.size.width.toFloat()
                height.value = coordinates.size.height.toFloat()
            }
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    Log.d("detectDragGestures", "scale: ${scale.value}")
                    offsetX.value += dragAmount.x
                    offsetY.value += dragAmount.y

                    var consumeChange = true
                    if (offsetX.value <= width.value * (1f - scale.value) / 2f) {
                        offsetX.value = width.value * (1f - scale.value) / 2f
                        consumeChange = false
                    } else if (offsetX.value >= width.value * (scale.value - 1f) / 2f) {
                        offsetX.value = width.value * (scale.value - 1f) / 2f
                        consumeChange = false
                    }

                    if (offsetY.value <= height.value * (1f - scale.value) / 2f) {
                        offsetY.value = height.value * (1f - scale.value) / 2f
                        consumeChange = false
                    } else if (offsetY.value >= height.value * (scale.value - 1f) / 2f) {
                        offsetY.value = height.value * (scale.value - 1f) / 2f
                        consumeChange = false
                    }

                    if (consumeChange) {
                        change.consumeAllChanges()
                    }
                }
            }
            .graphicsLayer(
                scaleX = scale.value,
                scaleY = scale.value,
                translationX = offsetX.value,
                translationY = offsetY.value
            )
            .transformable(state = state)
    ) {
        content()
    }
}

I would like to know how I can disable auto consume of the changes. Thank you.

There's no way to not to consume pointer input events in the detectDragGestures since beta08. If you need to not to consume changes, you can use lower level blocks such as awaitTouchSlop or drag().

Thank you for your reply. Is there any documentation or sample that I can refer to?

Sure, I think the implementation of detectDragGestures, which is ~25 LOC might be a good start: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/DragGestureDetector.kt;l=195?q=DragGestureDetector