Add coordinates to tui_hover example

examples/tui_hover.rs

@@ -1,6 +1,7 @@
 use std::{convert::TryInto, sync::Arc};
 
 use dioxus::{events::MouseData, prelude::*};
+use dioxus_core::UiEvent;
 
 fn main() {
     dioxus::tui::launch(app);
@@ -26,6 +27,24 @@ fn app(cx: Scope) -> Element {
     let q3_color_str = to_str(q3_color);
     let q4_color_str = to_str(q4_color);
 
+    let page_coordinates = use_state(&cx, || "".to_string());
+    let element_coordinates = use_state(&cx, || "".to_string());
+    let buttons = use_state(&cx, || "".to_string());
+    let modifiers = use_state(&cx, || "".to_string());
+
+    let update_data = move |event: UiEvent<MouseData>| {
+        let mouse_data = event.data;
+
+        page_coordinates.set(format!("{:?}", mouse_data.page_coordinates()));
+        element_coordinates.set(format!("{:?}", mouse_data.element_coordinates()));
+
+        // Note: client coordinates are also available, but they would be the same as the page coordinates in this example, because there is no scrolling.
+        // There are also screen coordinates, but they are currently the same as client coordinates due to technical limitations
+
+        buttons.set(format!("{:?}", mouse_data.held_buttons()));
+        modifiers.set(format!("{:?}", mouse_data.modifiers()));
+    };
+
     cx.render(rsx! {
         div {
             width: "100%",
@@ -48,6 +67,7 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
                     onwheel: move |w| q1_color.set([q1_color[0] + (10.0*w.delta_y) as i32, 0, 0]),
                     onmouseleave: move |_| q1_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
                 div {
@@ -61,6 +81,7 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q2_color.set([get_brightness(m.data); 3]),
                     onwheel: move |w| q2_color.set([q2_color[0] + (10.0*w.delta_y) as i32;3]),
                     onmouseleave: move |_| q2_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
             }
@@ -80,6 +101,7 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q3_color.set([0, get_brightness(m.data), 0]),
                     onwheel: move |w| q3_color.set([0, q3_color[1] + (10.0*w.delta_y) as i32, 0]),
                     onmouseleave: move |_| q3_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
                 div {
@@ -93,9 +115,14 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
                     onwheel: move |w| q4_color.set([0, 0, q4_color[2] + (10.0*w.delta_y) as i32]),
                     onmouseleave: move |_| q4_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
-            }
+            },
+            div {"Page coordinates: {page_coordinates}"},
+            div {"Element coordinates: {element_coordinates}"},
+            div {"Buttons: {buttons}"},
+            div {"Modifiers: {modifiers}"},
         }
     })
 }