From 6a6a028afca781a613eaf5e29b7bc2fee5ea9c46 Mon Sep 17 00:00:00 2001 From: Reinis Mazeiks Date: Tue, 28 Jun 2022 23:36:06 +0300 Subject: [PATCH] Create new example for all mouse events --- examples/all_events.rs | 61 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 examples/all_events.rs diff --git a/examples/all_events.rs b/examples/all_events.rs new file mode 100644 index 000000000..9a5a585ca --- /dev/null +++ b/examples/all_events.rs @@ -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), + MouseClick(Arc), + MouseDoubleClick(Arc), + MouseDown(Arc), + MouseUp(Arc), +} + +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, + )) +}