Is there a way to click Rects that draw use `drawRect` in Canvas? ```Canvas(modifier = Modifier.fill...

# compose

[Yasutaka Kawamoto]

Is there a way to click Rects that draw use drawRect in Canvas?

Canvas(modifier = Modifier.fillMaxSize()) {
    list?.forEach { item ->
        val bounds = item.bounds // Rect
        // I want to click this
        drawRect(
            color = Color.Blue,
            topLeft = Offset(x = bounds.left, y = <http://bounds.top|bounds.top>),
            size = Size(bounds.width(), bounds.height()),
        )
    }
}

[Zach Klippenstein (he/him) [MOD]]

Use Modifier.pointerInput to get touch events, check the coordinates for your rect bounds.

[Yasutaka Kawamoto]

Thank you for your advice! I could get touch events.
However I tried to check the coordinates rect bounds like bellow code, but the list is null under the pointerInput.

@Composable
fun PreviewImage(list: List<Item>?) {

    Canvas(modifier = Modifier
        .fillMaxSize()
        // Added
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = { offset ->
                    val selectedItem = list?.firstOrNull { it.bounds.contains(offset.x, offset.y) }
                    Timber.d("offset = $offset, list = $list, selectedItem=$selectedItem")
                    // offset = Offset(472.0, 451.0), list = null, selectedItem=null
                    // Why the list is null?
                }
            )
        }) {
        // This list is not null.
        list?.forEach { item ->
            val bounds = item.bounds // Rect
            drawRect(
                color = Color.Blue,
                topLeft = Offset(x = bounds.left, y = <http://bounds.top|bounds.top>),
                size = Size(bounds.width(), bounds.height()),
            )
        }
    }
}

Do you have any ideas?

[Yasutaka Kawamoto]

I solved by storing the list to a variable like results of mutableState. Thanks :)

@Composable
fun PreviewImage(list: List<Item>?) {
    var results by remember { mutableStateOf<List<Item>?>(null)}

    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = { offset ->
                    val selectedItem = results?.firstOrNull { it.bounds.contains(offset.x, offset.y) }
                    Timber.d("offset = $offset, list = $results, selectedItem=$selectedItem")
                }
            )
        }) {
        list?.forEach { item ->
            val bounds = item.bounds // Rect
            drawRect(
                color = Color.Blue,
                topLeft = Offset(x = bounds.left, y = <http://bounds.top|bounds.top>),
                size = Size(bounds.width(), bounds.height()),
            )
        }

        results = list
    }
}

[Zach Klippenstein (he/him) [MOD]]

Yep, you can use rememberUpdatedState to do this as well – it’s the same idea but in a single line. https://developer.android.com/jetpack/compose/side-effects#rememberupdatedstate

[Yasutaka Kawamoto]

I did’n know that. It’ simple! Thanks again!

This is my finally code.

@Composable
fun PreviewImage(list: List<Item>?) {
    val results by rememberUpdatedState(newValue = list)
    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = { offset ->
                    val selectedItem = results?.firstOrNull { it.bounds.contains(offset.x, offset.y) }
                    Timber.d("offset = $offset, list = $results, selectedItem=$selectedItem")
                }
            )
        }) {
        results?.forEach { item ->
            val bounds = item.bounds // Rect
            drawRect(
                color = Color.Blue,
                topLeft = Offset(x = bounds.left, y = <http://bounds.top|bounds.top>),
                size = Size(bounds.width(), bounds.height()),
            )
        }
    }
}