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}"},
         }
     })
 }

packages/tui/src/hooks.rs

@@ -16,6 +16,7 @@ use std::{
     sync::Arc,
     time::{Duration, Instant},
 };
+use stretch2::geometry::Point;
 use stretch2::{prelude::Layout, Stretch};
 
 use crate::{Dom, Node};
@@ -225,10 +226,26 @@ impl InnerInputState {
         }
 
         fn prepare_mouse_data(mouse_data: &MouseData, layout: &Layout) -> MouseData {
-            let mut data = mouse_data.clone();
+            let Point { x, y } = layout.location;
-            data.offset_x = data.client_x - layout.location.x as i32;
+            let node_origin = ClientPoint::new(x.into(), y.into());
-            data.offset_y = data.client_y - layout.location.y as i32;
+
-            data
+            let new_client_coordinates = (mouse_data.client_coordinates() - node_origin)
+                .to_point()
+                .cast_unit();
+
+            let coordinates = Coordinates::new(
+                mouse_data.screen_coordinates(),
+                mouse_data.client_coordinates(),
+                new_client_coordinates,
+                mouse_data.page_coordinates(),
+            );
+
+            MouseData::new(
+                coordinates,
+                mouse_data.trigger_button(),
+                mouse_data.held_buttons(),
+                mouse_data.modifiers(),
+            )
         }
 
         if let Some(mouse) = &self.mouse {