Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-26 22:20:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add coordinates to tui_hover example

Browse source
This commit is contained in:
Reinis Mazeiks 2022-05-07 15:32:19 +03:00
parent 8e3a7e9ed8
commit 285a6d080b
2 changed files with 49 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
examples/tui_hover.rs
View file

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

25
packages/tui/src/hooks.rs
View file

@ -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();
data.offset_x = data.client_x - layout.location.x as i32;
data.offset_y = data.client_y - layout.location.y as i32;
data
let Point { x, y } = layout.location;
let node_origin = ClientPoint::new(x.into(), y.into());
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 {