|
@@ -1,78 +1,60 @@
|
|
|
+use std::{collections::VecDeque, fmt::Debug, rc::Rc};
|
|
|
+
|
|
|
use dioxus::{events::*, html::MouseEvent, prelude::*};
|
|
|
|
|
|
fn main() {
|
|
|
launch(app);
|
|
|
}
|
|
|
|
|
|
-#[derive(Debug)]
|
|
|
-enum Event {
|
|
|
- MouseMove(MouseEvent),
|
|
|
- MouseClick(MouseEvent),
|
|
|
- MouseDoubleClick(MouseEvent),
|
|
|
- MouseDown(MouseEvent),
|
|
|
- MouseUp(MouseEvent),
|
|
|
-
|
|
|
- Wheel(WheelEvent),
|
|
|
-
|
|
|
- KeyDown(KeyboardEvent),
|
|
|
- KeyUp(KeyboardEvent),
|
|
|
- KeyPress(KeyboardEvent),
|
|
|
-
|
|
|
- FocusIn(FocusEvent),
|
|
|
- FocusOut(FocusEvent),
|
|
|
-}
|
|
|
-
|
|
|
const MAX_EVENTS: usize = 8;
|
|
|
|
|
|
const CONTAINER_STYLE: &str = r#"
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- "#;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+"#;
|
|
|
|
|
|
const RECT_STYLE: &str = r#"
|
|
|
- background: deepskyblue;
|
|
|
- height: 50vh;
|
|
|
- width: 50vw;
|
|
|
- color: white;
|
|
|
- padding: 20px;
|
|
|
- margin: 20px;
|
|
|
- text-aligh: center;
|
|
|
- "#;
|
|
|
+ background: deepskyblue;
|
|
|
+ height: 50vh;
|
|
|
+ width: 50vw;
|
|
|
+ color: white;
|
|
|
+ padding: 20px;
|
|
|
+ margin: 20px;
|
|
|
+ text-aligh: center;
|
|
|
+"#;
|
|
|
|
|
|
fn app() -> Element {
|
|
|
- let mut events = use_signal(std::collections::VecDeque::new);
|
|
|
+ let mut events = use_signal(|| std::collections::VecDeque::new() as VecDeque<Rc<dyn Debug>>);
|
|
|
|
|
|
- let mut log_event = move |event: Event| {
|
|
|
+ let mut log_event = move |event: Rc<dyn Debug>| {
|
|
|
let mut events = events.write();
|
|
|
|
|
|
if events.len() >= MAX_EVENTS {
|
|
|
events.pop_front();
|
|
|
}
|
|
|
+
|
|
|
events.push_back(event);
|
|
|
};
|
|
|
|
|
|
rsx! {
|
|
|
div { style: "{CONTAINER_STYLE}",
|
|
|
- div {
|
|
|
- style: "{RECT_STYLE}",
|
|
|
- // focusing is necessary to catch keyboard events
|
|
|
- tabindex: "0",
|
|
|
-
|
|
|
- onmousemove: move |event| log_event(Event::MouseMove(event)),
|
|
|
- onclick: move |event| log_event(Event::MouseClick(event)),
|
|
|
- ondoubleclick: move |event| log_event(Event::MouseDoubleClick(event)),
|
|
|
- onmousedown: move |event| log_event(Event::MouseDown(event)),
|
|
|
- onmouseup: move |event| log_event(Event::MouseUp(event)),
|
|
|
-
|
|
|
- onwheel: move |event| log_event(Event::Wheel(event)),
|
|
|
-
|
|
|
- onkeydown: move |event| log_event(Event::KeyDown(event)),
|
|
|
- onkeyup: move |event| log_event(Event::KeyUp(event)),
|
|
|
- onkeypress: move |event| log_event(Event::KeyPress(event)),
|
|
|
-
|
|
|
- onfocusin: move |event| log_event(Event::FocusIn(event)),
|
|
|
- onfocusout: move |event| log_event(Event::FocusOut(event)),
|
|
|
+ // focusing is necessary to catch keyboard events
|
|
|
+ div { style: "{RECT_STYLE}", tabindex: "0",
|
|
|
+ onmousemove: move |event| log_event(event.inner().clone()),
|
|
|
+ onclick: move |event| log_event(event.inner().clone()),
|
|
|
+ ondoubleclick: move |event| log_event(event.inner().clone()),
|
|
|
+ onmousedown: move |event| log_event(event.inner().clone()),
|
|
|
+ onmouseup: move |event| log_event(event.inner().clone()),
|
|
|
+
|
|
|
+ onwheel: move |event| log_event(event.inner().clone()),
|
|
|
+
|
|
|
+ onkeydown: move |event| log_event(event.inner().clone()),
|
|
|
+ onkeyup: move |event| log_event(event.inner().clone()),
|
|
|
+ onkeypress: move |event| log_event(event.inner().clone()),
|
|
|
+
|
|
|
+ onfocusin: move |event| log_event(event.inner().clone()),
|
|
|
+ onfocusout: move |event| log_event(event.inner().clone()),
|
|
|
|
|
|
"Hover, click, type or scroll to see the info down below"
|
|
|
}
|