Create new example for all mouse events

This commit is contained in:
Reinis Mazeiks 2022-06-28 23:36:06 +03:00
parent bfcfe2ca5f
commit 6a6a028afc

61
examples/all_events.rs Normal file
View file

@ -0,0 +1,61 @@
use dioxus::prelude::*;
use dioxus_core::UiEvent;
use dioxus_html::on::MouseData;
use std::sync::Arc;
fn main() {
dioxus::desktop::launch(app);
}
#[derive(Debug)]
enum Event {
MouseMove(Arc<MouseData>),
MouseClick(Arc<MouseData>),
MouseDoubleClick(Arc<MouseData>),
MouseDown(Arc<MouseData>),
MouseUp(Arc<MouseData>),
}
const MAX_EVENTS: usize = 4;
fn app(cx: Scope) -> Element {
let container_style = r#"
display: flex;
flex-direction: column;
align-items: center;
"#;
let rect_style = r#"
background: deepskyblue;
height: 50vh;
width: 50vw;
"#;
let events = use_ref(&cx, || Vec::new());
let events_lock = events.read();
let first_index = events_lock.len().saturating_sub(MAX_EVENTS);
let events_rendered = events_lock[first_index..]
.iter()
.map(|event| cx.render(rsx!(div{"{event:?}"})));
let log_event = move |event: Event| {
events.write().push(event);
};
cx.render(rsx! (
div {
style: "{container_style}",
"Hover over to display coordinates:",
div {
style: "{rect_style}",
onmousemove: move |event| log_event(Event::MouseMove(event.data)),
onclick: move |event| log_event(Event::MouseClick(event.data)),
ondblclick: move |event| log_event(Event::MouseDoubleClick(event.data)),
onmousedown: move |event| log_event(Event::MouseDown(event.data)),
onmouseup: move |event| log_event(Event::MouseUp(event.data)),
prevent_default: "mousedown",
}
},
events_rendered,
))
}