Zoom is spreading over other composables

[hellosagar]

Applying the zoom modifier to an image in the sample app also affects other composables. For instance, when I added a column below the AsyncImage, the image overlapped over the other composable on zooming. I don't know if this is a bug or intended behavior.

How do you keep the zoom in the image bound itself?

Sample Code App with the Text in Column

/**
 * Sample that shows a zoomable image asynchronously.
 *
 * [Modifier.zoomable] modifies Coil library's [AsyncImage] composable.
 * setContentSize() will be called when the image data is loaded.
 */
@Composable
fun AsyncImageSample(onTap: (Offset) -> Unit) {
    val zoomState = rememberZoomState()
    Column {
        AsyncImage(
            model = "https://github.com/usuiat.png",
            contentDescription = "GitHub icon",
            contentScale = ContentScale.Fit,
            onSuccess = { state ->
                zoomState.setContentSize(state.painter.intrinsicSize)
            },
            modifier = Modifier
                .size(400.dp)
                .zoomable(
                    zoomState = zoomState,
                    onTap = onTap
                ),
        )
        Column(
            modifier = Modifier
                .height(200.dp)
                .fillMaxWidth()
                .background(Color.Red),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center

        ) {
            Text(
                text = "This is zoomable image asynchronously.",
                textAlign = TextAlign.Center,
            )

        }
    }
}

Proof:

https://github.com/usuiat/Zoomable/assets/50016799/ce89c686-49a9-4e1b-974f-848900421796

[hellosagar]

Thanks, @usuiat, for making this library. I would appreciate your response :)

[usuiat]

Hi, @hellosagar Thank you for using zoomable.

You can use Modifier.clipToBounds() with zoomable on AsyncImage.

[hellosagar]

@usuiat I've a requirement where whenever the zoom happens i need a callback, to perform some actions. Can i contribute to the library to make a public callback, which will be triggered whenever the scale changes?

[usuiat]

@hellosagar I agree that some application needs to know the scale changes. I think it is possible with LaunchedEffect, but would a callback function be better?

LaunchedEffect(zoomState.scale) {
    // something to do
}

[hellosagar]

Thank you, that will be enough