Fix Modifier.pointerHoverIcon for browser apps (#565) (#629)

JetBrains · Jul 11, 2023 · 0fc0682 · 0fc0682
1 parent b5d45f2
commit 0fc0682
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/Example1.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/Example1.kt
@@ -27,6 +27,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.withFrameNanos
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.PointerIcon
+import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalUriHandler
@@ -64,7 +66,7 @@ fun Example1() {
                 .width(100.dp).height(100.dp)
                 .clickable {
                     println("Red box: clicked")
-                }
+                }.pointerHoverIcon(PointerIcon.Text)
         ) {
             Box(
                 modifier = Modifier
@@ -73,7 +75,7 @@ fun Example1() {
                     .width(20.dp).height(20.dp)
                     .clickable {
                         println("Small box: clicked")
-                    }
+                    }.pointerHoverIcon(PointerIcon.Hand)
             )
         }
         Spacer(

diff --git a/compose/ui/ui/src/jsWasmMain/kotlin/androidx/compose/ui/input/pointer/PointerIcon.js.kt b/compose/ui/ui/src/jsWasmMain/kotlin/androidx/compose/ui/input/pointer/PointerIcon.js.kt
@@ -18,7 +18,9 @@ package androidx.compose.ui.input.pointer
 
 object DummyPointerIcon : PointerIcon
 
-internal actual val pointerIconDefault: PointerIcon = DummyPointerIcon
-internal actual val pointerIconCrosshair: PointerIcon = DummyPointerIcon
-internal actual val pointerIconText: PointerIcon = DummyPointerIcon
-internal actual val pointerIconHand: PointerIcon = DummyPointerIcon
+internal data class BrowserCursor(val id: String): PointerIcon
+
+internal actual val pointerIconDefault: PointerIcon = BrowserCursor("default")
+internal actual val pointerIconCrosshair: PointerIcon = BrowserCursor("crosshair")
+internal actual val pointerIconText: PointerIcon = BrowserCursor("text")
+internal actual val pointerIconHand: PointerIcon = BrowserCursor("pointer")
diff --git a/compose/ui/ui/src/jsWasmMain/kotlin/androidx/compose/ui/window/ComposeWindow.js.kt b/compose/ui/ui/src/jsWasmMain/kotlin/androidx/compose/ui/window/ComposeWindow.js.kt
@@ -21,6 +21,8 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.createSkiaLayer
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.pointer.BrowserCursor
+import androidx.compose.ui.input.pointer.PointerIcon
 import androidx.compose.ui.native.ComposeLayer
 import androidx.compose.ui.platform.JSTextInputService
 import androidx.compose.ui.platform.Platform
@@ -54,6 +56,12 @@ internal actual class ComposeWindow(val canvasId: String)  {
             override val doubleTapMinTimeMillis: Long = 40
             override val touchSlop: Float get() = with(density) { 18.dp.toPx() }
         }
+
+        override fun setPointerIcon(pointerIcon: PointerIcon) {
+            if (pointerIcon is BrowserCursor) {
+                setCursor(canvasId, pointerIcon.id)
+            }
+        }
     }
     private val layer = ComposeLayer(
         layer = createSkiaLayer(),
@@ -159,4 +167,7 @@ fun CanvasBasedWindow(
             }
         }
     }
-}
+}
+
+private fun setCursor(elementId: String, value: String): Unit =
+    js("document.getElementById(elementId).style.cursor = value")