mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 06:34:20 +00:00
Cleanup random tui example
This commit is contained in:
parent
337c04557b
commit
673caec79f
1 changed files with 34 additions and 45 deletions
|
@ -1,47 +1,17 @@
|
|||
use dioxus::prelude::*;
|
||||
use dioxus_html::{FocusData, KeyboardData, MouseData, WheelData};
|
||||
use std::rc::Rc;
|
||||
use std::{fmt::Debug, rc::Rc};
|
||||
|
||||
fn main() {
|
||||
dioxus_tui::launch(app);
|
||||
}
|
||||
|
||||
#[derive(Debug)]
|
||||
enum Event {
|
||||
MouseMove(Rc<MouseData>),
|
||||
MouseClick(Rc<MouseData>),
|
||||
MouseDoubleClick(Rc<MouseData>),
|
||||
MouseDown(Rc<MouseData>),
|
||||
MouseUp(Rc<MouseData>),
|
||||
|
||||
Wheel(Rc<WheelData>),
|
||||
|
||||
KeyDown(Rc<KeyboardData>),
|
||||
KeyUp(Rc<KeyboardData>),
|
||||
KeyPress(Rc<KeyboardData>),
|
||||
|
||||
FocusIn(Rc<FocusData>),
|
||||
FocusOut(Rc<FocusData>),
|
||||
}
|
||||
|
||||
const MAX_EVENTS: usize = 8;
|
||||
|
||||
fn app() -> Element {
|
||||
let mut events = use_signal(Vec::new);
|
||||
let mut events = use_signal(|| Vec::new() as Vec<Rc<dyn Debug>>);
|
||||
|
||||
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| {
|
||||
// TUI panics if text overflows (https://github.com/DioxusLabs/dioxus/issues/371)
|
||||
// temporary hack: just trim the strings (and make sure viewport is big enough)
|
||||
// todo: remove
|
||||
let mut trimmed = format!("{event:?}");
|
||||
trimmed.truncate(200);
|
||||
rsx!( p { "{trimmed}" } )
|
||||
});
|
||||
|
||||
let mut log_event = move |event: Event| events.write().push(event);
|
||||
let mut log_event = move |event: Rc<dyn Debug>| events.write().push(event);
|
||||
|
||||
rsx! {
|
||||
div { width: "100%", height: "100%", flex_direction: "column",
|
||||
|
@ -53,24 +23,43 @@ fn app() -> Element {
|
|||
align_items: "center",
|
||||
background_color: "hsl(248, 53%, 58%)",
|
||||
|
||||
onmousemove: move |event| log_event(Event::MouseMove(event.inner().clone())),
|
||||
onclick: move |event| log_event(Event::MouseClick(event.inner().clone())),
|
||||
ondoubleclick: move |event| log_event(Event::MouseDoubleClick(event.inner().clone())),
|
||||
onmousedown: move |event| log_event(Event::MouseDown(event.inner().clone())),
|
||||
onmouseup: move |event| log_event(Event::MouseUp(event.inner().clone())),
|
||||
// Mosue
|
||||
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::Wheel(event.inner().clone())),
|
||||
// Scroll
|
||||
onwheel: move |event| log_event(event.inner().clone()),
|
||||
|
||||
onkeydown: move |event| log_event(Event::KeyDown(event.inner().clone())),
|
||||
onkeyup: move |event| log_event(Event::KeyUp(event.inner().clone())),
|
||||
onkeypress: move |event| log_event(Event::KeyPress(event.inner().clone())),
|
||||
// Keyboard
|
||||
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::FocusIn(event.inner().clone())),
|
||||
onfocusout: move |event| log_event(Event::FocusOut(event.inner().clone())),
|
||||
// Focus
|
||||
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"
|
||||
}
|
||||
div { width: "80%", height: "50%", flex_direction: "column", {events_rendered} }
|
||||
div { width: "80%", height: "50%", flex_direction: "column",
|
||||
// A trailing iterator of the last MAX_EVENTS events
|
||||
// The index actually is a fine key here, since events are append-only and therefore stable
|
||||
for (index, event) in events.read().iter().enumerate().rev().take(MAX_EVENTS).rev() {
|
||||
p { key: "{index}",
|
||||
{
|
||||
// TUI panics if text overflows (https://github.com/DioxusLabs/dioxus/issues/371)
|
||||
// temporary hack: just trim the strings (and make sure viewport is big enough)
|
||||
// todo: remove
|
||||
let mut trimmed = format!("{event:?}");
|
||||
trimmed.truncate(200);
|
||||
trimmed
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue