dioxus/examples/mouse_event.rs

57 lines
1.9 KiB
Rust
Raw Normal View History

use dioxus::prelude::*;
use dioxus_core::UiEvent;
use dioxus_html::on::MouseData;
fn main() {
dioxus::desktop::launch(app);
}
fn app(cx: Scope) -> Element {
2022-05-04 17:15:55 +00:00
let page_coordinates = use_state(&cx, || "".to_string());
let screen_coordinates = use_state(&cx, || "".to_string());
2022-05-06 20:54:07 +00:00
let element_coordinates = use_state(&cx, || "".to_string());
let buttons = use_state(&cx, || "".to_string());
let modifiers = use_state(&cx, || "".to_string());
let container_style = r#"
display: flex;
flex-direction: column;
align-items: center;
"#;
let rect_style = r#"
background: deepskyblue;
height: 50vh;
width: 50vw;
"#;
let update_mouse_position = move |event: UiEvent<MouseData>| {
let mouse_data = event.data;
2022-05-06 20:54:07 +00:00
page_coordinates.set(format!("{:?}", mouse_data.page_coordinates()));
screen_coordinates.set(format!("{:?}", mouse_data.screen_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.
buttons.set(format!("{:?}", mouse_data.held_buttons()));
modifiers.set(format!("{:?}", mouse_data.modifiers()));
};
cx.render(rsx! (
div {
style: "{container_style}",
"Hover over to display coordinates:",
div {
style: "{rect_style}",
onmousemove: update_mouse_position,
prevent_default: "mousedown",
}
div {"Page coordinates: {page_coordinates}"},
div {"Screen coordinates: {screen_coordinates}"},
2022-05-06 20:54:07 +00:00
div {"Element coordinates: {element_coordinates}"},
2022-05-07 07:12:08 +00:00
div {"Buttons: {buttons}"},
div {"Modifiers: {modifiers}"},
}
))
}