[JVM] graphicsLayer modifier causes problems with pointer input on Desktop

[wakaztahir]

This behavior is inconsistent with Android Platform

If you apply graphicsLayer modifier to a parent Box composable with some translation and scale , on Android when you tap on a child composable with onClick modifier the onClick is fired correctly but on Desktop the onClick is fired wrong , what I mean is , I tap somewhere else and it detects the click somewhere else

This is a big problem as we use zoomable and zoom state to allow user to zoom in on images and apply graphicsLayer on top of the composable but onClicks don't work properly for children

This happens on Jvm Desktop but Android Works fine , With Compose Version 1.4.0

[alexzhirkevich]

Same in Compose native. I guess only scale causes the issue. Translation works fine. Pointer input gestures try to interact with non-scaled content. And for example detectTransformGestures will adjust non scaled pan. Not the case on Android

[alexzhirkevich]

‼️Regression!

It worked well in Compose 1.3.0. Bug appears in 1.4.0-alpha01-dev977

Repro:

@Composable
fun App() {
    var containerScale by remember {
        mutableStateOf(1f)
    }

    var offset by remember {
        mutableStateOf(Offset.Zero)
    }


    val source = remember {
        MutableInteractionSource()
    }

    val hovered by source.collectIsHoveredAsState()

    val size = 100.dp

    BoxWithConstraints(
        Modifier.background(Color.White)
    ) {
        Slider(
            value = containerScale,
            valueRange = 0f..3f,
            onValueChange = {
                containerScale = it
            }
        )

        Box(modifier = Modifier
            .fillMaxSize()
            .graphicsLayer {
                scaleY = containerScale
                scaleX = containerScale
            }
            .border(1.dp, Color.Black)
        ) {
            Box(modifier = Modifier
                .offset {
                    offset.round()
                }
                .hoverable(source)
                .size(size)
                .background(if (hovered) Color.Red else Color.Red.copy(alpha = .5f))
                .pointerInput(0) {
                    detectTransformGestures { _, pan, _, _ ->
                        offset += pan

                    }
                }
            ) {
                Text("Move me")
            }
        }


        Box(modifier = Modifier
            .size(size)
            .offset {
                val x = offset.x - (constraints.maxWidth / 2f - offset.x - size.toPx()/2) *
                        (1 - containerScale) / (containerScale)
                val y = offset.y - (constraints.maxHeight / 2f - offset.y - size.toPx()/2) *
                        (1 - containerScale) / (containerScale)
                Offset(x,y).round()
            }
            .scale(1/containerScale)
            .border(3.dp, Color.Green),
            contentAlignment = Alignment.BottomStart
        ) {
            Text("Actual bounds")
        }
    }
}

Android (works as expected):

Screen.Recording.2023-06-04.at.14.37.37.mov

Other platforms:

Screen.Recording.2023-06-04.at.14.40.04.mov

[eymar]

The change after which this bug became visible is - JetBrains/compose-multiplatform-core#422

But the actual issue is much older: #1718

We'll look into it.

---

Also: reproduible in web (canvas) too.

[MatkovIvan]

I've fixed it in JetBrains/compose-multiplatform-core#598. It will be included in the next patch

cc @alexzhirkevich

[alexzhirkevich]

Thanks <3

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.