some refreactoring

Cargo.toml

@@ -5,6 +5,8 @@ edition = "2021"
 license = "Apache-2.0"
 description = "A rsx TUI library"
 repository = "https://github.com/osui-rs/osui"
+homepage = "https://osui.netlify.app"
+documentation = "https://osui.netlify.app/docs/" 
 
 [lib]
 name = "osui"
@@ -24,4 +26,4 @@ lazy_static = "1.4"
 paste = "1.0.15"
 dyn-clone = "1.0.17"
 flume = "=0.10.12"
-osui-element = "0.1.11"
+osui-element = "0.1.13"

src/css.rs

@@ -236,6 +236,7 @@ macro_rules! css {
     (
         $($inner:tt)*
     ) => {{
+        #[allow(unused_mut)]
         let mut hm: $crate::ui::Css = std::collections::HashMap::new();
         $crate::_css!(hm, $($inner)*);
         hm

src/examples.rs

@@ -19,18 +19,38 @@ pub fn examples() -> Element {
     }
 }
 
-pub fn styling() -> Css {
+pub fn todo_app() -> Element {
-    css! {
+    rsx! {
-        "btn" {
+        styling: Some(styling()),
-            outline: true,
+        class: "root",
-            x: Center,
+        div {
-            y: Center,
+            class: "first",
-            width: Auto,
+            text { class: "title", "not started" }
-            color: Red,
+        }
+        div {
+            class: "second",
+            text { class: "title", "completed" }
+        }
+    }
 }
 
-        "btn": clicked {
+pub fn styling() -> Css {
-            color: Blue,
+    css! {
+        "first" {
+            x: Auto,
+            y: 0 px,
+            width: 50%,
+        }
+        "second" {
+            x: Auto,
+            y: 0 px,
+            width: 50%,
+        }
+        "root" {
+            width: 100%,
+        }
+        "title" {
+            x: Center
         }
     }
 }

src/lib.rs

@@ -25,6 +25,8 @@ use std::{
     sync::{Arc, Mutex},
 };
 
+use ui::Style;
+
 pub mod css;
 pub mod examples;
 pub mod macros;
@@ -38,7 +40,7 @@ pub mod prelude {
     pub use crate::ui::Number::*;
     pub use crate::{self as osui, css, ersx, launch, rsx, ui::*, Handler};
     pub use crate::{call, Children, Element, ElementCore, ElementWidget};
-    pub use crate::{style, Document, RenderResult, RenderWriter};
+    pub use crate::{style, Document};
     pub use crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind};
     pub fn sleep(ms: u64) {
         std::thread::sleep(std::time::Duration::from_millis(ms));
@@ -59,10 +61,11 @@ pub trait ElementCore {
     fn get_element_by_id(&mut self, id: &str) -> Option<&mut Element>;
     fn set_styling(&mut self, styling: &HashMap<crate::ui::StyleName, crate::ui::Style>);
     fn get_id(&self) -> String;
+    fn get_style(&self) -> &Style;
 }
 
-pub trait ElementWidget: ElementCore + std::fmt::Debug + Send + Sync {
+pub trait ElementWidget: ElementCore + std::fmt::Debug {
-    fn render(&self, focused: bool, width: usize, height: usize) -> RenderResult;
+    fn render(&self, writer: &mut Writer);
     fn event(&mut self, event: crossterm::event::Event, document: &Document) {
         _ = (event, document)
     }
@@ -72,23 +75,18 @@ pub trait ElementWidget: ElementCore + std::fmt::Debug + Send + Sync {
 /// Structs
 //////////////////////////////////////////////////////////////////////////////////////////////////
 
-pub struct Handler<T>(
+pub struct Handler<T>(pub Arc<Mutex<dyn FnMut(&mut T, crossterm::event::Event, &Document)>>);
-    pub Arc<Mutex<dyn FnMut(&mut T, crossterm::event::Event, &Document) + Send + Sync>>,
-);
 
 pub struct Document {
     element: *mut Element,
     running: *mut Option<bool>,
 }
 
-/// ```
+pub struct Writer {
-/// RenderResult(output, (x, y))
+    text: String,
-/// ```
+    style: Style,
-pub struct RenderResult(String, ui::StyleElement);
-pub struct RenderWriter {
-    w: String,
-    style: ui::Style,
     focused: bool,
+    size: (u16, u16),
 }
 
 //////////////////////////////////////////////////////////////////////////////////////////////////
@@ -143,7 +141,7 @@ impl Document {
     }
     pub fn render(&self) {
         if !self.running.is_null() {
-            let (width, height) = utils::get_term_size();
+            let (width, height) = crossterm::terminal::size().unwrap();
             let mut frame = utils::Frame::new(width, height);
             frame.render(true, unsafe { &*self.element });
             utils::clear();
@@ -154,9 +152,11 @@ impl Document {
     pub fn draw(&mut self, element: &mut Element) {
         self.element = element;
     }
-
     pub fn use_state<T>(&self, name: &str) -> &mut T {
-        &mut self.get_element_by_id::<crate::ui::DataHolder<T>>(name).unwrap().data
+        &mut self
+            .get_element_by_id::<crate::ui::DataHolder<T>>(name)
+            .unwrap()
+            .data
     }
 }
 
@@ -220,32 +220,32 @@ impl Children {
 impl<T> Handler<T> {
     pub fn new<F>(handler_fn: F) -> Handler<T>
     where
-        F: FnMut(&mut T, crossterm::event::Event, &Document) + 'static + Send + Sync,
+        F: FnMut(&mut T, crossterm::event::Event, &Document) + 'static,
     {
         Handler(Arc::new(Mutex::new(handler_fn)))
     }
 }
 
-impl RenderWriter {
+impl Writer {
-    pub fn new(focused: bool, style: ui::Style) -> RenderWriter {
+    pub fn new(focused: bool, style: ui::Style, size: (u16, u16)) -> Writer {
-        RenderWriter {
+        Writer {
-            w: String::new(),
+            text: String::new(),
             style,
             focused,
+            size,
         }
     }
 
     pub fn write(&mut self, s: &str) {
-        self.w += self.style.get(self.focused).write(s).as_str();
+        self.text += self.style.get(self.focused).write(s).as_str();
     }
 
-    pub fn result(&self) -> RenderResult {
+    pub fn get_size(&self) -> (u16, u16) {
-        RenderResult(self.w.clone(), self.style.get(self.focused).clone())
+        self.size
     }
 
-    pub fn hidden(&mut self) -> RenderResult {
+    pub fn get_focused(&self) -> bool {
-        self.style.0.visible = false;
+        self.focused
-        RenderResult(self.w.clone(), self.style.get(self.focused).clone())
     }
 }
 
@@ -268,11 +268,8 @@ pub fn run(element: &mut Element) -> bool {
         element: element,
         running: &mut None,
     };
-    let (width, height) = crate::utils::get_term_size();
+
-    element.event(
+    // Send initial event
-        crossterm::event::Event::Resize(width as u16, height as u16),
-        &document,
-    );
     element.event(crossterm::event::Event::FocusGained, &document);
 
     utils::hide_cursor();

src/main.rs

@@ -1,5 +1,5 @@
-use osui::{examples::examples, prelude::*};
+use osui::{examples::todo_app, prelude::*};
 
 fn main() {
-    launch!(examples());
+    launch!(todo_app())
 }

src/ui/mod.rs

@@ -17,14 +17,10 @@ pub struct Text {
 }
 
 impl ElementWidget for Text<'_> {
-    fn render(&self, focused: bool, _: usize, _: usize) -> RenderResult {
+    fn render(&self, writer: &mut crate::Writer) {
-        let mut writer = RenderWriter::new(focused, self.style.clone());
-
         if let Children::Text(text) = &self.children {
             writer.write(&text);
         }
-
-        writer.result()
     }
     fn event(&mut self, event: Event, document: &Document) {
         call!(self.on_event(event, document));
@@ -39,18 +35,17 @@ pub struct Div {
 }
 
 impl ElementWidget for Div<'_> {
-    fn render(&self, focused: bool, width: usize, height: usize) -> RenderResult {
+    fn render(&self, writer: &mut crate::Writer) {
-        let mut writer = RenderWriter::new(focused, self.style.clone());
+        let (width, height) = writer.get_size();
         let mut frame = crate::utils::Frame::new(width, height);
 
         if let Children::Children(children, child) = &self.children {
             for (i, elem) in children.iter().enumerate() {
-                frame.render(focused && i == *child, elem);
+                frame.render(writer.get_focused() && i == *child, elem);
             }
         }
-        writer.write(&frame.output());
 
-        writer.result()
+        writer.write(&frame.output());
     }
 
     fn event(&mut self, event: Event, document: &Document) {
@@ -73,10 +68,8 @@ pub struct Button {
 }
 
 impl ElementWidget for Button<'_> {
-    fn render(&self, focused: bool, _: usize, _: usize) -> RenderResult {
+    fn render(&self, writer: &mut crate::Writer) {
-        let mut writer = RenderWriter::new(focused, self.style.clone());
         writer.write(&self.children.get_text());
-        writer.result()
     }
 
     fn event(&mut self, event: Event, document: &Document) {
@@ -113,7 +106,5 @@ pub fn data_holder<'a, T: std::default::Default>() -> Box<DataHolder<'a, T>> {
 }
 
 impl<'a, T: std::fmt::Debug + Send + Sync> ElementWidget for DataHolder<'a, T> {
-    fn render(&self, focused: bool, _: usize, _: usize) -> RenderResult {
+    fn render(&self, _writer: &mut crate::Writer) {}
-        RenderWriter::new(focused, self.style.clone()).hidden()
-    }
 }

src/ui/styles.rs

@@ -53,8 +53,8 @@ pub enum Color {
 
 #[derive(Debug, Clone, PartialEq, Eq, Hash)]
 pub enum Number {
-    Px(usize),
+    Px(u16),
-    Pe(usize),
+    Pe(u16),
     Center,
     Auto,
     Default,
@@ -305,11 +305,38 @@ impl StyleCore for Vec<Font> {
 }
 
 impl Number {
-    pub fn as_size(&self) -> Option<&usize> {
+    pub fn as_size(&self, text_size: u16, frame_size: u16) -> u16 {
         match self {
-            Number::Px(s) => return Some(s),
+            Number::Px(s) => *s,
-            _ => {}
+            Number::Pe(pe) => (frame_size * pe) / 100,
+            Number::Default => frame_size,
+            crate::ui::Number::Auto => text_size,
+            _ => 0,
         }
-        None
+    }
+    pub fn as_position_y(&self, used: &Vec<u16>, content_size: u16, frame_size: u16) -> u16 {
+        match self {
+            crate::ui::Number::Px(px) => *px,
+            crate::ui::Number::Pe(pe) => (frame_size * pe) / 100,
+            crate::ui::Number::Center => (frame_size - content_size) / 2,
+            crate::ui::Number::Auto | crate::ui::Number::Default => {
+                let mut x = 0;
+                for (i, n) in used.iter().enumerate() {
+                    if *n == 0 {
+                        x = i as u16;
+                        break;
+                    }
+                }
+                x
+            }
+        }
+    }
+    pub fn as_position_x(&self, used: &u16, content_size: u16, frame_size: u16) -> u16 {
+        match self {
+            crate::ui::Number::Px(px) => *px,
+            crate::ui::Number::Pe(pe) => (frame_size * pe) / 100,
+            crate::ui::Number::Center => (frame_size - content_size) / 2,
+            crate::ui::Number::Auto | crate::ui::Number::Default => *used,
+        }
     }
 }

src/utils.rs

@@ -48,11 +48,7 @@ pub fn compress_string(input: &str, re: &Regex) -> (String, HashMap<usize, Strin
 }
 
 /// Merges a frame withe a line by x
-fn merge_line(
+fn merge_line(frame_: &str, (mut line_, lm): (String, HashMap<usize, String>), x: usize) -> String {
-    frame_: &str,
-    (mut line_, lm): (String, HashMap<usize, String>),
-    x: usize,
-) -> (String, String) {
     let (frame_, fm) = compress_string(frame_, &ANSI);
 
     if let Some(_) = lm.get(&line_.len()) {
@@ -84,131 +80,59 @@ fn merge_line(
         }
     }
 
-    (res, line_)
+    res
 }
 
 pub struct Frame {
     frame: Vec<String>,
-    width: usize,
+    width: u16,
-    used: Vec<usize>,
+    used: Vec<u16>,
 }
 
 impl Frame {
-    pub fn new(width: usize, height: usize) -> Self {
+    pub fn new(width: u16, height: u16) -> Self {
         Self {
-            frame: vec![" ".repeat(width); height],
+            frame: vec![" ".repeat(width.into()); height.into()],
             width,
-            used: vec![0; height],
+            used: vec![0; height.into()],
         }
     }
     pub fn render(&mut self, focused: bool, element: &crate::Element) {
-        let output = element.render(focused, self.width, self.frame.len());
+        let mut writer = crate::Writer::new(
-        if output.1.visible {
+            focused,
-            let x;
+            element.get_style().clone(),
-            let mut y = 0;
+            (self.width, self.frame.len() as u16),
-            let mut width = 0_usize;
+        );
-            match output.1.y {
+        let style = writer.style.get(focused);
-                crate::ui::Number::Px(_y) => {
+        element.render(&mut writer);
-                    y = _y;
+        if style.visible {
-                }
+            let frame_height = self.frame.len() as u16;
-                crate::ui::Number::Pe(p) => y = (self.frame.len() * p) / 100,
+            let width = style.width.as_size(writer.text.len() as u16, self.width);
-                crate::ui::Number::Center => {
+            let height = style.height.as_size(0, frame_height);
-                    let content_height = output.0.lines().count();
+            let y = style.y.as_position_y(&self.used, height, frame_height) as usize;
-                    y = (self.frame.len() - content_height) / 2;
+            let x = style
-                }
+                .x
-                crate::ui::Number::Auto => {
+                .as_position_x(self.used.get(y).unwrap(), width, self.width)
-                    for (i, n) in self.used.iter().enumerate() {
+                as usize;
-                        if *n == 0 {
-                            y = i;
-                            break;
-                        }
-                    }
-                }
-                crate::ui::Number::Default => {
-                    for (i, n) in self.used.iter().enumerate() {
-                        if *n == 0 {
-                            y = i;
-                            break;
-                        }
-                    }
-                }
-            }
-            match output.1.x {
-                crate::ui::Number::Px(_x) => {
-                    x = _x;
-                }
-                crate::ui::Number::Pe(p) => x = (self.width * p) / 100,
-                crate::ui::Number::Center => {
-                    x = (self.width
-                        - ANSI
-                            .replace_all(&output.0.lines().next().unwrap_or(""), "")
-                            .len())
-                        / 2;
-                }
-                crate::ui::Number::Auto => {
-                    x = *self.used.get(y).unwrap();
-                }
-                crate::ui::Number::Default => {
-                    x = 0;
-                }
-            }
 
-            let mut svec: Vec<(String, HashMap<usize, String>)> = Vec::new();
+            for (i, line) in writer.text.lines().enumerate() {
-
+                if frame_height > (y + i) as u16 {
-            match output.1.width {
-                crate::ui::Number::Auto | crate::ui::Number::Default => {
-                    for line in output.0.split('\n') {
-                        let (line, lm) = compress_string(line, &ANSI);
-                        if line.len() > width {
-                            width = line.len();
-                        }
-                        svec.push((line, lm));
-                    }
-                }
-                crate::ui::Number::Px(p) => {
-                    width = p;
-                    for line in output.0.split('\n') {
-                        svec.push(compress_string(line, &ANSI));
-                    }
-                }
-                _ => {}
-            }
-
-            if output.1.outline {
-                let frame_line = self.frame.get_mut(y).unwrap();
-                *frame_line = merge_line(&frame_line, ("_".repeat(width), HashMap::new()), x + 1).0;
-                y += 1;
-            }
-
-            for (i, (line, lm)) in svec.iter().enumerate() {
-                if self.frame.len() > y + i {
                     let frame_line = self.frame.get_mut(y + i).unwrap();
-                    let merged = if output.1.outline {
+                    let (line_, lm) = compress_string(line, &ANSI);
-                        merge_line(
+                    let formatted = format_string(&line_, width as usize);
-                            &frame_line,
+                    *frame_line =
-                            (
+                        merge_line(&frame_line, (formatted.clone(), lm.clone()), x as usize);
-                                format!("|{}|", format_string(line, width)),
+                    *self.used.get_mut(y + i).unwrap() += (x + formatted.len()) as u16;
-                                lm.into_iter().map(|(k, v)| (k + 1, v.clone())).collect(),
-                            ),
-                            x,
-                        )
-                    } else {
-                        merge_line(&frame_line, (format_string(line, width), lm.clone()), x)
-                    };
-                    *frame_line = merged.0;
-                    *self.used.get_mut(y + i).unwrap() += merged.1.len() - 1;
-                }
-            }
-
-            if output.1.outline {
-                let frame_line = self.frame.get_mut(y + svec.len()).unwrap();
-                *frame_line = merge_line(&frame_line, ("¯".repeat(width), HashMap::new()), x + 1).0;
                 }
             }
         }
+    }
+    /// Gets the frame output on a single string, rows separated by newlines
     pub fn output(&self) -> String {
         self.frame.join("\n")
     }
+
+    /// Gets the frame output on a single string with no newlines
     pub fn output_nnl(&self) -> String {
         self.frame.join("")
     }
@@ -241,8 +165,3 @@ pub fn show_cursor() {
 pub fn flush() {
     stdout().flush().unwrap();
 }
-
-pub fn get_term_size() -> (usize, usize) {
-    let (width, height) = crossterm::terminal::size().unwrap();
-    (width as usize, height as usize)
-}