Fix ScrollConfig in web target (#569) (#628)

* Fix ScrollConfig for web apps Now it makes the tests pass while looking fine in UI. * Enable isSmoothScrollingEnabled for web ScrollConfig * Update compose/foundation/foundation/src/jsWasmMain/kotlin/androidx/compose/foundation/gestures/JsScrollable.js.kt * remove redundant imports * Simplify the fun calculateMouseWheelScroll body --------- Co-authored-by: Ivan Matkov <ivan.matkov@jetbrains.com>
JetBrains · Jul 11, 2023 · b5d45f2 · b5d45f2
1 parent 35f5c7c
commit b5d45f2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/.../foundation/src/jsWasmMain/kotlin/androidx/compose/foundation/gestures/JsScrollable.js.kt b/.../foundation/src/jsWasmMain/kotlin/androidx/compose/foundation/gestures/JsScrollable.js.kt
@@ -18,24 +18,35 @@
 
 package androidx.compose.foundation.gestures
 
+import androidx.compose.foundation.fastFold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.input.pointer.PointerEvent
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.IntSize
-import org.jetbrains.skiko.SkikoPointerEvent
-import org.jetbrains.skiko.SkikoPointerEventKind
 
 @Composable
 internal actual fun platformScrollConfig(): ScrollConfig = JsConfig
 
 private object JsConfig : ScrollConfig {
-    override fun Density.calculateMouseWheelScroll(event: PointerEvent, bounds: IntSize): Offset =
-        (event.nativeEvent as SkikoPointerEvent).takeIf { it.kind == SkikoPointerEventKind.SCROLL }?.let {
-            Offset(-it.deltaX.toFloat(), -it.deltaY.toFloat()) / 2f
-        } ?: Offset.Zero
+
+    override val isSmoothScrollingEnabled: Boolean
+        get() = true
+
+    override fun Density.calculateMouseWheelScroll(event: PointerEvent, bounds: IntSize): Offset {
+        // Note: The returned offset value here is not strictly accurate.
+        // However, it serves two primary purposes:
+        // 1. Ensures all related tests pass successfully.
+        // 2. Provides satisfactory UI behavior
+        // In future iterations, this value could be refined to enhance UI behavior.
+        // However, keep in mind that any modifications would also necessitate adjustments to the corresponding tests.
+        return event.totalScrollDelta * -1f
+    }
 }
 
+private val PointerEvent.totalScrollDelta
+    get() = this.changes.fastFold(Offset.Zero) { acc, c -> acc + c.scrollDelta }
+
 
 /*
 import androidx.compose.ui.input.mouse.MouseScrollOrientation

diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/LazyLayouts.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/LazyLayouts.kt
@@ -26,6 +26,7 @@ import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
@@ -53,7 +54,9 @@ private fun ExampleLazyColumn() {
     }
     LazyColumn(Modifier.fillMaxSize(), state = state) {
         items(100) {
-            Box(Modifier.size(100.dp).background(remember { Color(Random.nextInt()) }))
+            Box(Modifier.size(100.dp).background(remember { Color(Random.nextInt()) })) {
+                Text("I = $it")
+            }
         }
     }
 }

diff --git a/compose/ui/ui/src/jsNativeMain/kotlin/androidx/compose/ui/native/ComposeLayer.jsNative.kt b/compose/ui/ui/src/jsNativeMain/kotlin/androidx/compose/ui/native/ComposeLayer.jsNative.kt
@@ -21,7 +21,6 @@ import androidx.compose.ui.ComposeScene
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.input.key.KeyEvent as ComposeKeyEvent
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.focus.focusRect
 import androidx.compose.ui.input.key.KeyEvent
 import androidx.compose.ui.input.pointer.PointerId
 import androidx.compose.ui.input.pointer.PointerType
@@ -30,16 +29,11 @@ import androidx.compose.ui.platform.Platform
 import androidx.compose.ui.unit.Density
 import kotlinx.coroutines.CoroutineDispatcher
 import org.jetbrains.skia.Canvas
-import org.jetbrains.skiko.SkiaLayer
-import org.jetbrains.skiko.SkikoView
-import org.jetbrains.skiko.SkikoKeyboardEvent
-import org.jetbrains.skiko.SkikoPointerEvent
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.DpRect
 import androidx.compose.ui.unit.toDpRect
 import org.jetbrains.skia.Point
-import org.jetbrains.skiko.SkikoInput
-import org.jetbrains.skiko.currentNanoTime
+import org.jetbrains.skiko.*
 
 internal class ComposeLayer(
     internal val layer: SkiaLayer,
@@ -101,6 +95,7 @@ internal class ComposeLayer(
             val scale = density.density
             scene.sendPointerEvent(
                 eventType = event.kind.toCompose(),
+                scrollDelta = event.getScrollDelta(),
                 position = Offset(
                     x = event.x.toFloat() * scale,
                     y = event.y.toFloat() * scale
@@ -190,3 +185,11 @@ private fun currentMillis() = (currentNanoTime() / 1E6).toLong()
 
 
 internal expect val supportsMultitouch: Boolean
+
+internal fun SkikoPointerEvent.getScrollDelta(): Offset {
+    return this.takeIf {
+        it.kind == SkikoPointerEventKind.SCROLL
+    }?.let {
+        Offset(it.deltaX.toFloat(), it.deltaY.toFloat())
+    } ?: Offset.Zero
+}