CfW: fix MouseEvent to PointerButton mapping

compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/input/pointer/PointerEvent.web.kt

@@ -18,9 +18,15 @@ package androidx.compose.ui.input.pointer
 
 import org.w3c.dom.events.MouseEvent
 
-internal val MouseEvent.composeButton get() =
+internal val MouseEvent.composeButton get(): PointerButton? {
+    // `MouseEvent.button` property only guarantees to indicate which buttons are pressed during
+    // events caused by pressing or releasing one or multiple buttons
+    when (type) {
+        "mousedown", "mouseup" -> Unit
+        else -> return null
+    }
     // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-    when (button.toInt()) {
+    return when (val buttonIndex = button.toInt()) {
         // Main button pressed, usually the left button or the un-initialized state
         0 -> PointerButton.Primary
         // Auxiliary button pressed, usually the wheel button or the middle button (if present)
@@ -31,8 +37,9 @@ internal val MouseEvent.composeButton get() =
         3 -> PointerButton.Back
         // Fifth button, typically the Browser Forward button
         4 -> PointerButton.Forward
-        else -> PointerButton(-1)
+        else -> PointerButton(buttonIndex)
     }
+}
 
 internal val MouseEvent.composeButtons get() =
     // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

compose/ui/ui/src/webTest/kotlin/CanvasBasedWindowTests.kt → compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/window/CanvasBasedWindowTests.kt

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+package androidx.compose.ui.window
+
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -36,7 +38,6 @@ import androidx.compose.ui.unit.dp
 import kotlin.test.Test
 import kotlinx.browser.document
 import org.w3c.dom.HTMLCanvasElement
-import androidx.compose.ui.window.*
 import kotlin.test.AfterTest
 import kotlin.test.assertEquals
 import kotlin.test.assertTrue

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/window/ComposeWindowLifecycleTest.kt

@@ -17,7 +17,6 @@
 package androidx.compose.ui.window
 
 import androidx.lifecycle.Lifecycle
-import isHeadlessBrowser
 import kotlin.test.AfterTest
 import kotlin.test.Test
 import kotlin.test.assertEquals

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/window/MouseEventsTest.kt

@@ -0,0 +1,167 @@
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.ui.window
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.PointerMatcher
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.onClick
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.PointerButton
+import androidx.compose.ui.input.pointer.PointerEvent
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.pointerInput
+import kotlin.test.AfterTest
+import kotlin.test.Test
+import kotlin.test.assertEquals
+import kotlinx.browser.document
+import kotlinx.coroutines.NonCancellable.isActive
+import org.w3c.dom.HTMLCanvasElement
+import org.w3c.dom.events.MouseEvent
+import org.w3c.dom.events.MouseEventInit
+
+class MouseEventsTest {
+
+    private val canvasId = "canvas1"
+
+    @AfterTest
+    fun cleanup() {
+        document.getElementById(canvasId)?.remove()
+    }
+
+    @Test
+    fun testPointerEvents()  {
+        if (isHeadlessBrowser()) return
+        val canvasElement = document.createElement("canvas") as HTMLCanvasElement
+        canvasElement.setAttribute("id", canvasId)
+        document.body!!.appendChild(canvasElement)
+
+        val pointerEvents = mutableListOf<PointerEvent>()
+
+        CanvasBasedWindow(canvasElementId = canvasId) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .pointerInput(Unit) {
+                        awaitPointerEventScope {
+                            while (isActive) {
+                                pointerEvents.add(awaitPointerEvent())
+                            }
+                        }
+                    }
+            ) {}
+        }
+
+
+        canvasElement.dispatchEvent(MouseEvent("mouseenter", MouseEventInit(100, 100)))
+        canvasElement.dispatchEvent(MouseEvent("mousedown", MouseEventInit(100, 100, button = 0, buttons = 1)))
+        canvasElement.dispatchEvent(MouseEvent("mouseup", MouseEventInit(100, 100, button = 0, buttons = 0)))
+
+        assertEquals(3, pointerEvents.size)
+        assertEquals(PointerEventType.Enter, pointerEvents[0].type)
+
+        // Check for primary button
+        assertEquals(PointerEventType.Press, pointerEvents[1].type)
+        assertEquals(PointerButton.Primary, pointerEvents[1].button)
+        assertEquals(PointerEventType.Release, pointerEvents[2].type)
+        assertEquals(PointerButton.Primary, pointerEvents[2].button)
+
+        canvasElement.dispatchEvent(MouseEvent("mousedown", MouseEventInit(100, 100, button = 2, buttons = 2)))
+        canvasElement.dispatchEvent(MouseEvent("mouseup", MouseEventInit(100, 100, button = 2, buttons = 0)))
+        assertEquals(5, pointerEvents.size)
+
+        // Check for secondary button
+        assertEquals(PointerEventType.Press, pointerEvents[3].type)
+        assertEquals(PointerButton.Secondary, pointerEvents[3].button)
+        assertEquals(PointerEventType.Release, pointerEvents[4].type)
+        assertEquals(PointerButton.Secondary, pointerEvents[4].button)
+    }
+
+    @OptIn(ExperimentalFoundationApi::class)
+    @Test
+    fun testOnClickWithPointerMatchers() {
+        if (isHeadlessBrowser()) return
+        val canvasElement = document.createElement("canvas") as HTMLCanvasElement
+        canvasElement.setAttribute("id", canvasId)
+        document.body!!.appendChild(canvasElement)
+
+        var primaryClickedCounter = 0
+        var secondaryClickedCounter = 0
+
+        CanvasBasedWindow(canvasElementId = canvasId) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .onClick(matcher = PointerMatcher.Primary) { primaryClickedCounter++ }
+                    .onClick(matcher = PointerMatcher.mouse(PointerButton.Secondary)) { secondaryClickedCounter++ }
+            ) {}
+        }
+
+        canvasElement.dispatchEvent(MouseEvent("mouseenter", MouseEventInit(100, 100)))
+        canvasElement.dispatchEvent(MouseEvent("mousedown", MouseEventInit(100, 100, button = 0, buttons = 1)))
+        canvasElement.dispatchEvent(MouseEvent("mouseup", MouseEventInit(100, 100, button = 0, buttons = 0)))
+
+        assertEquals(1, primaryClickedCounter)
+        assertEquals(0, secondaryClickedCounter)
+
+        canvasElement.dispatchEvent(MouseEvent("mousedown", MouseEventInit(100, 100, button = 2, buttons = 2)))
+        canvasElement.dispatchEvent(MouseEvent("mouseup", MouseEventInit(100, 100, button = 2, buttons = 0)))
+
+        assertEquals(1, primaryClickedCounter)
+        assertEquals(1, secondaryClickedCounter)
+    }
+
+    @Test
+    fun testPointerButtonIsNullForNoClickEvents() {
+        if (isHeadlessBrowser()) return
+        val canvasElement = document.createElement("canvas") as HTMLCanvasElement
+        canvasElement.setAttribute("id", canvasId)
+        document.body!!.appendChild(canvasElement)
+
+
+        var event: PointerEvent? = null
+
+        CanvasBasedWindow(canvasElementId = canvasId) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .pointerInput(Unit) {
+                        awaitPointerEventScope {
+                            while (isActive) {
+                                event = awaitPointerEvent()
+                            }
+                        }
+                    }
+            ) {}
+        }
+
+        assertEquals(null, event)
+
+        canvasElement.dispatchEvent(MouseEvent("mouseenter", MouseEventInit(100, 100)))
+        assertEquals(PointerEventType.Enter, event!!.type)
+        assertEquals(null, event!!.button)
+
+        canvasElement.dispatchEvent(MouseEvent("mousemove", MouseEventInit(101, 101, clientX = 101, clientY = 101)))
+        assertEquals(PointerEventType.Move, event!!.type)
+        assertEquals(null, event!!.button)
+
+        canvasElement.dispatchEvent(MouseEvent("mouseleave", MouseEventInit(0, 0, clientX = 0, clientY = 0)))
+        assertEquals(PointerEventType.Exit, event!!.type)
+        assertEquals(null, event!!.button)
+    }
+}