diff --git a/src/demos/mod.rs b/src/demos/mod.rs index 410cde4..75ef0bc 100644 --- a/src/demos/mod.rs +++ b/src/demos/mod.rs @@ -16,12 +16,21 @@ pub fn app(screen: Arc) -> Rsx { rsx! { @Handler::new({ let screen = screen.clone(); - move |_, _: &crossterm::event::Event| { - screen.close(); - }}); - FlexRow, gap: 1, { - FlexCol, gap: 3, { + move |_, e: &crossterm::event::Event| { + if let crossterm::event::Event::Key(crossterm::event::KeyEvent { code, .. }) = e { + if *code == crossterm::event::KeyCode::Char('q') { + screen.close(); + } + } + }}); + Paginator { + FlexRow { Heading, smooth: false, { "OSUI" } + "Welcome to the OSUI demo!" + "Press tab to switch to the next page or shift+tab to the previous page" + } + + FlexCol, gap: 3, { @Transform::new().padding(2, 2); @Style { foreground: None, background: Background::RoundedOutline(0x00ff00) }; Div { @@ -37,11 +46,16 @@ pub fn app(screen: Arc) -> Rsx { // TODO: div with width full } - FlexCol { + FlexCol, gap: 2, { + @transform!{ y: Center }; static Div { // static only affects the element, not children %count "This will increment every second: {count}" } + + @Transform::new().padding(1, 1).dimensions(40, 1); + @Style { foreground: Some(0xffffff), background: Background::RoundedOutline(0xff0000) }; + Input { } } } } diff --git a/src/elements/div.rs b/src/elements/div.rs index 5960d18..0779a92 100644 --- a/src/elements/div.rs +++ b/src/elements/div.rs @@ -1,4 +1,4 @@ -use std::sync::{Arc, Mutex}; +use std::sync::Arc; use crate::{ widget::{Element, Widget}, @@ -6,14 +6,14 @@ use crate::{ }; pub struct Div { - children: Mutex>>, + children: Vec>, size: (u16, u16), } impl Div { pub fn new() -> Self { Div { - children: Mutex::new(Vec::new()), + children: Vec::new(), size: (0, 0), } } @@ -30,7 +30,7 @@ impl Element for Div { let (w, h) = scope.get_parent_size(); scope.set_parent_size(transform.width, transform.height); - for elem in self.children.lock().unwrap().iter() { + for elem in &self.children { scope.clear(); if let Some(style) = elem.get() { scope.set_style(style); @@ -55,8 +55,8 @@ impl Element for Div { self.size = (transform.width, transform.height); } - fn draw_child(&self, element: &Arc) { - self.children.lock().unwrap().push(element.clone()); + fn draw_child(&mut self, element: &Arc) { + self.children.push(element.clone()); element.inject(|w| w.component(NoRender)); } diff --git a/src/elements/flex.rs b/src/elements/flex.rs index 71849a1..a34bc9d 100644 --- a/src/elements/flex.rs +++ b/src/elements/flex.rs @@ -1,4 +1,4 @@ -use std::sync::{Arc, Mutex}; +use std::sync::Arc; use crate::{ widget::{Element, Widget}, @@ -7,20 +7,20 @@ use crate::{ pub struct FlexRow { pub gap: u16, - children: Mutex>>, + children: Vec>, size: (u16, u16), } pub struct FlexCol { pub gap: u16, - children: Mutex>>, + children: Vec>, size: (u16, u16), } impl FlexRow { pub fn new() -> Self { Self { - children: Mutex::new(Vec::new()), + children: Vec::new(), size: (0, 0), gap: 0, } @@ -30,7 +30,7 @@ impl FlexRow { impl FlexCol { pub fn new() -> Self { Self { - children: Mutex::new(Vec::new()), + children: Vec::new(), size: (0, 0), gap: 0, } @@ -50,7 +50,7 @@ impl Element for FlexRow { let mut v = 0; - for elem in self.children.lock().unwrap().iter() { + for elem in &self.children { scope.clear(); if let Some(style) = elem.get() { scope.set_style(style); @@ -79,8 +79,8 @@ impl Element for FlexRow { self.size = (transform.width, transform.height); } - fn draw_child(&self, element: &Arc) { - self.children.lock().unwrap().push(element.clone()); + fn draw_child(&mut self, element: &Arc) { + self.children.push(element.clone()); element.inject(|w| w.component(NoRender)); } @@ -106,7 +106,7 @@ impl Element for FlexCol { let mut v = 0; - for elem in self.children.lock().unwrap().iter() { + for elem in &self.children { scope.clear(); if let Some(style) = elem.get() { scope.set_style(style); @@ -135,8 +135,8 @@ impl Element for FlexCol { self.size = (transform.width, transform.height); } - fn draw_child(&self, element: &Arc) { - self.children.lock().unwrap().push(element.clone()); + fn draw_child(&mut self, element: &Arc) { + self.children.push(element.clone()); element.inject(|w| w.component(NoRender)); } diff --git a/src/elements/heading.rs b/src/elements/heading.rs index cafffa8..5a0166e 100644 --- a/src/elements/heading.rs +++ b/src/elements/heading.rs @@ -1,4 +1,4 @@ -use std::sync::{Arc, Mutex}; +use std::sync::Arc; use figlet_rs::FIGfont; @@ -10,7 +10,7 @@ use crate::{ pub struct Heading { pub font: FIGfont, pub smooth: bool, - children: Mutex>>, + children: Vec>, } impl Heading { @@ -18,7 +18,7 @@ impl Heading { Heading { font: FIGfont::standard().unwrap(), smooth: false, - children: Mutex::new(Vec::new()), + children: Vec::new(), } } } @@ -26,23 +26,27 @@ impl Heading { impl Element for Heading { fn render(&mut self, scope: &mut crate::prelude::RenderScope) { let mut s = String::new(); - for element in self.children.lock().unwrap().iter() { + for element in &self.children { if let Some(e) = element.get_elem().as_any().downcast_ref::() { s += e; } } if let Some(t) = self.font.convert(&s) { - scope.draw_text(&if self.smooth { - format!("{t}").replace("-", "─").replace("|", "│") - } else { - format!("{t}") - }); + scope.draw_text( + 0, + 0, + &if self.smooth { + format!("{t}").replace("-", "─").replace("|", "│") + } else { + format!("{t}") + }, + ); } } - fn draw_child(&self, element: &Arc) { + fn draw_child(&mut self, element: &Arc) { element.inject(|w| w.component(NoRender)); - self.children.lock().unwrap().push(element.clone()); + self.children.push(element.clone()); } fn as_any(&self) -> &dyn std::any::Any { diff --git a/src/elements/input.rs b/src/elements/input.rs new file mode 100644 index 0000000..f89efc5 --- /dev/null +++ b/src/elements/input.rs @@ -0,0 +1,73 @@ +use crossterm::event::{KeyCode, KeyEvent}; + +use crate::{ + state::{use_state, State}, + widget::Element, +}; + +pub struct Input { + pub state: State, + cursor: usize, +} + +impl Element for Input { + fn render(&mut self, scope: &mut crate::prelude::RenderScope) { + let s = self.state.get(); + scope.draw_text(0, 0, &s); + if let Some(c) = s.chars().nth(self.cursor) { + scope.draw_text_inverted(self.cursor as u16, 0, &c.to_string()); + } else { + scope.draw_text_inverted(s.len() as u16, 0, " "); + } + } + + fn event(&mut self, event: &dyn crate::prelude::Event) { + if let Some(crossterm::event::Event::Key(KeyEvent { code, .. })) = event.get() { + match code { + KeyCode::Char(c) => { + self.state.get().insert(self.cursor, *c); + self.cursor += 1; + } + KeyCode::Backspace => { + if self.cursor > 0 { + self.state.get().remove(self.cursor - 1); + self.cursor -= 1; + } + } + KeyCode::Delete => { + if self.cursor > 0 && self.state.get().len() > self.cursor { + self.state.get().remove(self.cursor); + } + } + KeyCode::Left => { + if self.cursor > 0 { + self.cursor -= 1; + } + } + KeyCode::Right => { + if self.cursor < self.state.get().len() { + self.cursor += 1; + } + } + _ => {} + } + } + } + + fn as_any(&self) -> &dyn std::any::Any { + self + } + + fn as_any_mut(&mut self) -> &mut dyn std::any::Any { + self + } +} + +impl Input { + pub fn new() -> Self { + Self { + state: use_state(String::new()), + cursor: 0, + } + } +} diff --git a/src/elements/mod.rs b/src/elements/mod.rs index 38732e3..68ec01e 100644 --- a/src/elements/mod.rs +++ b/src/elements/mod.rs @@ -1,16 +1,20 @@ pub mod div; pub mod flex; pub mod heading; +pub mod input; +pub mod paginator; pub use div::*; pub use flex::*; pub use heading::*; +pub use input::*; +pub use paginator::*; use crate::Element; impl Element for String { fn render(&mut self, scope: &mut crate::render_scope::RenderScope) { - scope.draw_text(self); + scope.draw_text(0, 0, self); } fn as_any(&self) -> &dyn std::any::Any { @@ -24,7 +28,7 @@ impl Element for String { impl Element for (String, u32) { fn render(&mut self, scope: &mut crate::render_scope::RenderScope) { - scope.draw_text_colored(&self.0, self.1); + scope.draw_text_colored(0, 0, &self.0, self.1); } fn as_any(&self) -> &dyn std::any::Any { diff --git a/src/elements/paginator.rs b/src/elements/paginator.rs new file mode 100644 index 0000000..950857b --- /dev/null +++ b/src/elements/paginator.rs @@ -0,0 +1,98 @@ +use std::sync::Arc; + +use crossterm::event::{KeyCode, KeyEvent}; + +use crate::{ + widget::{Element, Widget}, + NoRender, +}; + +pub struct Paginator { + children: Vec>, + size: (u16, u16), + index: usize, +} + +impl Paginator { + pub fn new() -> Self { + Self { + children: Vec::new(), + size: (0, 0), + index: 0, + } + } +} + +impl Element for Paginator { + fn render(&mut self, scope: &mut crate::render_scope::RenderScope) { + let (width, height) = scope.get_size_or(self.size.0, self.size.1); + scope.use_area(width, height); + } + + fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) { + if let Some(elem) = self.children.get(self.index) { + let mut transform = scope.get_transform().clone(); + let (w, h) = scope.get_parent_size(); + scope.set_parent_size(transform.width, transform.height); + scope.clear(); + + if let Some(style) = elem.get() { + scope.set_style(style); + } + if let Some(t) = elem.get() { + scope.set_transform(&t); + } + elem.get_elem().render(scope); + if let Some(t) = elem.get() { + scope.set_transform(&t); + } + let t = scope.get_transform_mut(); + transform.width = transform.width.max(t.x + t.width + (t.px * 2)); + transform.height = transform.height.max(t.y + t.height + (t.py * 2)); + t.x += transform.x + transform.px; + t.y += transform.y + transform.py; + + scope.draw(); + elem.get_elem().after_render(scope); + + scope.set_parent_size(w, h); + self.size = (transform.width, transform.height); + } + } + + fn event(&mut self, event: &dyn crate::prelude::Event) { + if let Some(crossterm::event::Event::Key(KeyEvent { code, .. })) = event.get() { + let cl = self.children.len(); + match code { + KeyCode::Tab => { + if self.index + 1 < cl { + self.index += 1; + } else { + self.index = 0; + } + } + KeyCode::BackTab => { + if self.index > 0 { + self.index -= 1; + } else if cl > 0 { + self.index = cl - 1; + } + } + _ => {} + } + } + } + + fn draw_child(&mut self, element: &Arc) { + self.children.push(element.clone()); + element.inject(|w| w.component(NoRender)); + } + + fn as_any(&self) -> &dyn std::any::Any { + self + } + + fn as_any_mut(&mut self) -> &mut dyn std::any::Any { + self + } +} diff --git a/src/extensions/input_handling.rs b/src/extensions/input_handling.rs index 399bc0f..227d526 100644 --- a/src/extensions/input_handling.rs +++ b/src/extensions/input_handling.rs @@ -1,4 +1,4 @@ -use crate::{extensions::Extension, prelude::Handler}; +use crate::extensions::Extension; pub struct InputExtension; @@ -8,9 +8,7 @@ impl Extension for InputExtension { std::thread::spawn(move || loop { if let Ok(e) = crossterm::event::read() { for widget in screen.widgets.lock().unwrap().iter() { - if let Some(h) = widget.get::>() { - h.call(widget, &e); - } + widget.event(&e); } } }); diff --git a/src/extensions/mod.rs b/src/extensions/mod.rs index a2d98f6..d027629 100644 --- a/src/extensions/mod.rs +++ b/src/extensions/mod.rs @@ -58,3 +58,9 @@ impl Debug for Handler { write!(f, "Handler({})", type_name::()) } } + +impl<'a> dyn Event + 'a { + pub fn get(&self) -> Option<&T> { + self.as_any().downcast_ref() + } +} diff --git a/src/extensions/tick.rs b/src/extensions/tick.rs index 6334015..354814d 100644 --- a/src/extensions/tick.rs +++ b/src/extensions/tick.rs @@ -1,7 +1,6 @@ use std::{fmt::Debug, sync::Arc}; use crate::extensions::Extension; -use crate::extensions::Handler; use crate::{event, Screen}; pub struct TickExtension(pub u16); @@ -16,9 +15,7 @@ impl Extension for TickExtension { let mut tick = 0; loop { for w in screen.widgets.lock().unwrap().iter() { - if let Some(on_tick) = w.get::>() { - on_tick.call(&w, &TickEvent(tick)) - } + w.event(&TickEvent(tick)); } tick += 1; std::thread::sleep(std::time::Duration::from_millis(rate_dur)); diff --git a/src/render_scope.rs b/src/render_scope.rs index 113624c..7f8c6f5 100644 --- a/src/render_scope.rs +++ b/src/render_scope.rs @@ -19,11 +19,13 @@ use crate::{ #[derive(Clone)] enum RenderMethod { /// Plain text rendering at current transform. - Text(String), + Text(u16, u16, String), + /// Plain text rendering at current transform with the bg and fg swapped. + TextInverted(u16, u16, String), /// Text rendered with a specific 24-bit color. - TextColored(String, u32), + TextColored(u16, u16, String, u32), /// A filled rectangle of a given size and background color. - Rectangle(u16, u16, u32), + Rectangle(u16, u16, u16, u16, u32), } /// Stores renderable state and transformation data for a single UI widget. @@ -65,26 +67,36 @@ impl RenderScope { } /// Adds a text draw instruction. - pub fn draw_text(&mut self, text: &str) { - self.render_stack.push(RenderMethod::Text(text.to_string())); + pub fn draw_text(&mut self, x: u16, y: u16, text: &str) { + self.render_stack + .push(RenderMethod::Text(x, y, text.to_string())); + let (w, h) = utils::str_size(text); + self.transform.width = self.transform.width.max(w); + self.transform.height = self.transform.height.max(h); + } + + /// Adds a text draw instruction. + pub fn draw_text_inverted(&mut self, x: u16, y: u16, text: &str) { + self.render_stack + .push(RenderMethod::TextInverted(x, y, text.to_string())); let (w, h) = utils::str_size(text); self.transform.width = self.transform.width.max(w); self.transform.height = self.transform.height.max(h); } /// Adds a colored text draw instruction. - pub fn draw_text_colored(&mut self, text: &str, color: u32) { + pub fn draw_text_colored(&mut self, x: u16, y: u16, text: &str, color: u32) { self.render_stack - .push(RenderMethod::TextColored(text.to_string(), color)); + .push(RenderMethod::TextColored(x, y, text.to_string(), color)); let (w, h) = utils::str_size(text); self.transform.width = self.transform.width.max(w); self.transform.height = self.transform.height.max(h); } /// Adds a background rectangle draw instruction. - pub fn draw_rect(&mut self, width: u16, height: u16, color: u32) { + pub fn draw_rect(&mut self, x: u16, y: u16, width: u16, height: u16, color: u32) { self.render_stack - .push(RenderMethod::Rectangle(width, height, color)); + .push(RenderMethod::Rectangle(x, y, width, height, color)); self.transform.width = self.transform.width.max(width); self.transform.height = self.transform.height.max(height); } @@ -152,11 +164,11 @@ impl RenderScope { for m in &self.render_stack { match m { - RenderMethod::Text(t) => { + RenderMethod::Text(x, y, t) => { if let Some(c) = self.style.foreground { utils::print_liner( - self.transform.x + self.transform.px, - self.transform.y + self.transform.py, + self.transform.x + self.transform.px + x, + self.transform.y + self.transform.py + y, &utils::hex_ansi(c), t, ); @@ -168,16 +180,32 @@ impl RenderScope { ); } } - RenderMethod::TextColored(t, c) => utils::print_liner( - self.transform.x + self.transform.px, - self.transform.y + self.transform.py, + RenderMethod::TextInverted(x, y, t) => { + if let Some(c) = self.style.foreground { + utils::print_liner( + self.transform.x + self.transform.px + x, + self.transform.y + self.transform.py + y, + &utils::hex_ansi_bg(c), + t, + ); + } else { + utils::print( + self.transform.x + self.transform.px, + self.transform.y + self.transform.py, + t, + ); + } + } + RenderMethod::TextColored(x, y, t, c) => utils::print_liner( + self.transform.x + self.transform.px + x, + self.transform.y + self.transform.py + y, &utils::hex_ansi(*c), t, ), - RenderMethod::Rectangle(width, height, color) => { + RenderMethod::Rectangle(x, y, width, height, color) => { utils::print_liner( - self.transform.x + self.transform.px, - self.transform.y + self.transform.py, + self.transform.x + self.transform.px + x, + self.transform.y + self.transform.py + y, &hex_ansi_bg(*color), &std::iter::repeat(" ".repeat(*width as usize)) .take(*height as usize) diff --git a/src/widget.rs b/src/widget.rs index 8b12285..4d4cd20 100644 --- a/src/widget.rs +++ b/src/widget.rs @@ -12,7 +12,11 @@ use std::{ sync::{Arc, Mutex, MutexGuard}, }; -use crate::{render_scope::RenderScope, state::DependencyHandler}; +use crate::{ + prelude::{Event, Handler}, + render_scope::RenderScope, + state::DependencyHandler, +}; /// A trait object for any renderable UI element. pub type BoxedElement = Box; @@ -35,7 +39,10 @@ pub trait Element: Send + Sync { /// Called to draw child widgets, if any. #[allow(unused)] - fn draw_child(&self, element: &Arc) {} + fn draw_child(&mut self, element: &Arc) {} + + #[allow(unused)] + fn event(&mut self, event: &dyn Event) {} /// Returns a type-erased reference to this object. fn as_any(&self) -> &dyn Any; @@ -223,6 +230,21 @@ impl Widget { } self } + + pub fn event(self: &Arc, e: &E) { + if let Some(wrapper) = self.get::>() { + wrapper.call(self, e); + } + + match &**self { + Widget::Dynamic(w) => { + w.get_elem().event(e); + } + Widget::Static(w) => { + w.get_elem().event(e); + } + } + } } impl StaticWidget {