Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-23 12:43:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

Cleanup random tui example

Browse source
This commit is contained in:
Jonathan Kelley 2024-01-19 15:16:14 -08:00
parent 337c04557b
commit 673caec79f
No known key found for this signature in database
GPG key ID: 1FBB50F7EB0A08BE
1 changed files with 34 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
packages/dioxus-tui/examples/all_terminal_events.rs
View file

@ -1,47 +1,17 @@
use dioxus::prelude::*; use dioxus::prelude::*;
use dioxus_html::{FocusData, KeyboardData, MouseData, WheelData}; use dioxus_html::{FocusData, KeyboardData, MouseData, WheelData};
use std::rc::Rc; use std::{fmt::Debug, rc::Rc};
fn main() { fn main() {
dioxus_tui::launch(app); 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; const MAX_EVENTS: usize = 8;
fn app() -> Element { 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 mut log_event = move |event: Rc<dyn Debug>| events.write().push(event);
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);
rsx! { rsx! {
div { width: "100%", height: "100%", flex_direction: "column", div { width: "100%", height: "100%", flex_direction: "column",
@ -53,24 +23,43 @@ fn app() -> Element {
align_items: "center", align_items: "center",
background_color: "hsl(248, 53%, 58%)", background_color: "hsl(248, 53%, 58%)",
onmousemove: move |event| log_event(Event::MouseMove(event.inner().clone())), // Mosue
onclick: move |event| log_event(Event::MouseClick(event.inner().clone())), onmousemove: move |event| log_event(event.inner().clone()),
ondoubleclick: move |event| log_event(Event::MouseDoubleClick(event.inner().clone())), onclick: move |event| log_event(event.inner().clone()),
onmousedown: move |event| log_event(Event::MouseDown(event.inner().clone())), ondoubleclick: move |event| log_event(event.inner().clone()),
onmouseup: move |event| log_event(Event::MouseUp(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())), // Keyboard
onkeyup: move |event| log_event(Event::KeyUp(event.inner().clone())), onkeydown: move |event| log_event(event.inner().clone()),
onkeypress: move |event| log_event(Event::KeyPress(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())), // Focus
onfocusout: move |event| log_event(Event::FocusOut(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" "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
}
}
}
}
} }
} }
} }