Merge pull request #24 from osui-rs/more-elements

More elements

src/demos/mod.rs

@@ -16,12 +16,21 @@ pub fn app(screen: Arc<Screen>) -> 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<Screen>) -> 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 { }
             }
         }
     }

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<Vec<Arc<Widget>>>,
+    children: Vec<Arc<Widget>>,
     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<Widget>) {
-        self.children.lock().unwrap().push(element.clone());
+    fn draw_child(&mut self, element: &Arc<Widget>) {
+        self.children.push(element.clone());
         element.inject(|w| w.component(NoRender));
     }
 

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<Vec<Arc<Widget>>>,
+    children: Vec<Arc<Widget>>,
     size: (u16, u16),
 }
 
 pub struct FlexCol {
     pub gap: u16,
-    children: Mutex<Vec<Arc<Widget>>>,
+    children: Vec<Arc<Widget>>,
     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<Widget>) {
-        self.children.lock().unwrap().push(element.clone());
+    fn draw_child(&mut self, element: &Arc<Widget>) {
+        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<Widget>) {
-        self.children.lock().unwrap().push(element.clone());
+    fn draw_child(&mut self, element: &Arc<Widget>) {
+        self.children.push(element.clone());
         element.inject(|w| w.component(NoRender));
     }
 

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<Vec<Arc<Widget>>>,
+    children: Vec<Arc<Widget>>,
 }
 
 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::<String>() {
                 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<Widget>) {
+    fn draw_child(&mut self, element: &Arc<Widget>) {
         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 {

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<String>,
+    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,
+        }
+    }
+}

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 {

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<Arc<Widget>>,
+    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<Widget>) {
+        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
+    }
+}

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::<Handler<crossterm::event::Event>>() {
-                        h.call(widget, &e);
-                    }
+                    widget.event(&e);
                 }
             }
         });

src/extensions/mod.rs

@@ -58,3 +58,9 @@ impl<E: Event> Debug for Handler<E> {
         write!(f, "Handler({})", type_name::<E>())
     }
 }
+
+impl<'a> dyn Event + 'a {
+    pub fn get<T: Event + 'static>(&self) -> Option<&T> {
+        self.as_any().downcast_ref()
+    }
+}

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::<Handler<TickEvent>>() {
-                            on_tick.call(&w, &TickEvent(tick))
-                        }
+                        w.event(&TickEvent(tick));
                     }
                     tick += 1;
                     std::thread::sleep(std::time::Duration::from_millis(rate_dur));

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)

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<dyn Element + Send + Sync>;
@@ -35,7 +39,10 @@ pub trait Element: Send + Sync {
 
     /// Called to draw child widgets, if any.
     #[allow(unused)]
-    fn draw_child(&self, element: &Arc<Widget>) {}
+    fn draw_child(&mut self, element: &Arc<Widget>) {}
+
+    #[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<E: Event + Clone + 'static>(self: &Arc<Self>, e: &E) {
+        if let Some(wrapper) = self.get::<Handler<E>>() {
+            wrapper.call(self, e);
+        }
+
+        match &**self {
+            Widget::Dynamic(w) => {
+                w.get_elem().event(e);
+            }
+            Widget::Static(w) => {
+                w.get_elem().event(e);
+            }
+        }
+    }
 }
 
 impl StaticWidget {