Web: deliver both scroll axes in wheel events (fix diagonal scroll) (JetBrains#3147)

Web: deliver both scroll axes in wheel events (fix diagonal scroll)

Fixes https://youtrack.jetbrains.com/issue/CMP-10361

## Testing
Added a new test to validate diagonal scroll behavior.

## Release Notes
### Fixes - Web
- Deliver both scroll axes in wheel events (fix diagonal scroll)

Author: terrakok

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/ComposeWindowInternal.web.kt

@@ -88,7 +88,6 @@ import androidx.compose.ui.viewinterop.TrackInteropPlacementContainer
 import androidx.compose.ui.viewinterop.WebInteropContainer
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.enableSavedStateHandles
-import kotlin.math.absoluteValue
 import kotlinx.browser.document
 import kotlinx.browser.window
 import kotlinx.coroutines.Dispatchers
@@ -746,14 +745,18 @@ internal class ComposeWindow(
     ) {
         keyboardModeState = KeyboardModeState.Hardware
 
-        val horizontalScroll = when {
-            event.deltaX.absoluteValue >= event.deltaY.absoluteValue -> event.deltaX
-            event.shiftKey -> event.deltaY
-            else -> 0f
+        // Shift + mouse wheel means horizontal scroll. Some browsers swap the axes
+        // for us (report deltaX instead of deltaY), some don't.
+        val horizontalScroll: Double
+        val verticalScroll: Double
+        if (event.shiftKey && event.deltaX == 0.0) {
+            horizontalScroll = event.deltaY
+            verticalScroll = 0.0
+        } else {
+            horizontalScroll = event.deltaX
+            verticalScroll = event.deltaY
         }
 
-        val verticalScroll = if (horizontalScroll == 0f) event.deltaY else 0f
-
         // wheels event own buttons property is unreliable in Safari and Firefox
         // see CMP-9900 [web] Wheel event resolves buttons state incorrectly in Safari and Firefox
         val buttons = actualActivePointerButtons ?: event.composeButtons

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

@@ -29,6 +29,9 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.InternalComposeApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.OnCanvasTests
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
@@ -234,6 +237,34 @@ class WheelEventTests : OnCanvasTests {
     }
 
 
+    @Test
+    fun diagonalScroll() = runTest {
+        var totalScrollDelta = Offset.Zero
+        createComposeWindow {
+            Box(
+                modifier = Modifier.size(100.dp).pointerInput(Unit) {
+                    awaitPointerEventScope {
+                        while (true) {
+                            val event = awaitPointerEvent()
+                            if (event.type != PointerEventType.Scroll) continue
+                            event.changes.forEach {
+                                totalScrollDelta += it.scrollDelta
+                                it.consume()
+                            }
+                        }
+                    }
+                }
+            )
+        }
+
+        assertEquals(Offset.Zero, totalScrollDelta)
+
+        getCanvas().dispatchEvent(WheelEvent("wheel", WheelEventInit(deltaX = 5.0, deltaY = 7.0)))
+
+        assertEquals(5f, totalScrollDelta.x, "deltaX was expected to be delivered")
+        assertEquals(7f, totalScrollDelta.y, "deltaY was expected to be delivered")
+    }
+
     @Test
     fun horizontalScrollWithShift() = runTest {
         val horizontalScrollState = ScrollState(initial = 0)