Merge pull request #9 from JetBrains/mouse_move

Mouse move tutorial

tutorials/Getting_Started/main.md

@@ -2,7 +2,7 @@
 
 ## What is covered
 
-In this tutorial we will see how to create and deploy simple desktop UI application
+In this tutorial we will see how to create simple desktop UI application
 using Compose UI framework.
 
 ## Prerequisites
@@ -96,6 +96,8 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
 }
 
 ```
+## Running the project
+
 Open `build.gradle.kts` as a project in IDEA.
 
 ![New project](screen1.png)

tutorials/Mouse_Events/main.md

@@ -0,0 +1,135 @@
+# Getting Started with Compose for Desktop
+
+## What is covered
+
+In this tutorial we will see how to install mouse events listeners on components
+in Compose for Desktop.
+
+## Mouse event listeners
+
+### Click listeners
+
+Click listeners are available in both Compose on Android and Compose for Desktop,
+so code like that will work on both platforms:
+
+```kotlin
+import androidx.compose.desktop.Window
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.sp
+
+fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
+    var count = 0
+    Box(alignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) {
+        var text = remember { mutableStateOf("Click me!") }
+        Text(
+                text = text.value,
+                fontSize = 50.sp,
+                modifier = Modifier
+                        .clickable(
+                            onClick = {
+                                text.value = "Click! ${count++}"
+                            },
+                            onDoubleClick = {
+                                text.value = "Double click! ${count++}"
+                            },
+                            onLongClick = {
+                                text.value = "Long click! ${count++}"
+                            }
+                        )
+                        .align(Alignment.Center)
+        )
+    }
+}
+```
+
+![Application running](mouse_click.gif)
+
+### Mouse move listeners
+
+As typically mouse or other positional pointers are available on a desktop platforms only,
+following code will only work with Compose for Desktop.
+Let's create a text, and install pointer move filter on it, changing the background
+color per mouse pointer position:
+```kotlin
+import androidx.compose.desktop.Window
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerMoveFilter
+import androidx.compose.ui.unit.IntSize
+
+fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
+    var color = remember { mutableStateOf(Color(0, 0, 0)) }
+    Box(
+            modifier = Modifier
+                    .wrapContentSize(Alignment.Center)
+                    .fillMaxSize()
+                    .background(color = color.value)
+                    .pointerMoveFilter(
+                            onMove = {
+                                color.value = Color(it.x.toInt() % 256, it.y.toInt() % 256, 0)
+                                false
+                            }
+                    )
+    )
+}
+```
+
+![Application running](mouse_move.gif)
+
+### Mouse enter listeners
+
+Compose for Desktop also supports pointer enter and exit handlers, like this:
+```kotlin
+import androidx.compose.desktop.Window
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerMoveFilter
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
+    Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
+        repeat(10) { index ->
+            var active = remember { mutableStateOf(false) }
+            Text(
+                    modifier = Modifier
+                            .fillMaxWidth()
+                            .background(color = if (active.value) Color.Green else Color.White)
+                            .pointerMoveFilter(
+                                    onEnter = {
+                                        active.value = true
+                                        false
+                                    },
+                                    onExit = {
+                                        active.value = false
+                                        false
+                                    }
+                            ),
+                    fontSize = 30.sp,
+                    fontStyle = if (active.value) FontStyle.Italic else FontStyle.Normal,
+                    text = "Item $index"
+                )
+        }
+    }
+}
+```
+![Application running](mouse_enter.gif)