background

src/elements/div.rs

@@ -6,7 +6,6 @@ use crate::{
 };
 
 pub struct Div {
-    color: u32,
     children: Mutex<Vec<Arc<Widget>>>,
     size: (u16, u16),
 }
@@ -14,7 +13,7 @@ pub struct Div {
 impl Element for Div {
     fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
         let (width, height) = scope.get_size_or(self.size.0, self.size.1);
-        scope.draw_rect(width, height, self.color);
+        scope.draw_background(width, height);
     }
 
     fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
@@ -60,9 +59,8 @@ impl Element for Div {
 }
 
 impl Div {
-    pub fn new(color: u32) -> Self {
+    pub fn new() -> Self {
         Div {
-            color,
             children: Mutex::new(Vec::new()),
             size: (0, 0),
         }

src/elements/flex.rs

@@ -1,16 +1,17 @@
 use std::sync::{Arc, Mutex};
 
-use crate::{widget::{Element, Widget}, NoRender};
+use crate::{
+    widget::{Element, Widget},
+    NoRender,
+};
 
 pub struct FlexRow {
-    color: u32,
     gap: u16,
     children: Mutex<Vec<Arc<Widget>>>,
     size: (u16, u16),
 }
 
 pub struct FlexCol {
-    color: u32,
     gap: u16,
     children: Mutex<Vec<Arc<Widget>>>,
     size: (u16, u16),
@@ -19,7 +20,7 @@ pub struct FlexCol {
 impl Element for FlexRow {
     fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
         let (width, height) = scope.get_size_or(self.size.0, self.size.1);
-        scope.draw_rect(width, height, self.color);
+        scope.draw_background(width, height);
     }
 
     fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
@@ -68,11 +69,10 @@ impl Element for FlexRow {
 }
 
 impl FlexRow {
-    pub fn new(color: u32, gap: u16) -> Self {
+    pub fn new(gap: u16) -> Self {
         Self {
             children: Mutex::new(Vec::new()),
             size: (0, 0),
-            color,
             gap,
         }
     }
@@ -81,7 +81,7 @@ impl FlexRow {
 impl Element for FlexCol {
     fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
         let (width, height) = scope.get_size_or(self.size.0, self.size.1);
-        scope.draw_rect(width, height, self.color);
+        scope.draw_background(width, height);
     }
 
     fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
@@ -130,11 +130,10 @@ impl Element for FlexCol {
 }
 
 impl FlexCol {
-    pub fn new(color: u32, gap: u16) -> Self {
+    pub fn new(gap: u16) -> Self {
         Self {
             children: Mutex::new(Vec::new()),
             size: (0, 0),
-            color,
             gap,
         }
     }

src/lib.rs

@@ -22,7 +22,10 @@ pub mod prelude {
         widget::*, *,
     };
 
-    pub use crate::style::{Dimension::{Full, Content}, Position::{Center, End}};
+    pub use crate::style::{
+        Dimension::{Content, Full},
+        Position::{Center, End},
+    };
 }
 
 pub struct Screen {
@@ -107,6 +110,10 @@ impl Screen {
                 wrapper.call(elem, &RenderWrapperEvent(&mut scope));
             } else {
                 scope.clear();
+
+                if let Some(style) = elem.get() {
+                    scope.set_style(style);
+                }
                 if let Some(t) = elem.get() {
                     scope.set_transform(&t);
                 }

src/main.rs

@@ -10,19 +10,8 @@ fn main() -> std::io::Result<()> {
 
 fn app() -> Rsx {
     rsx! {
-        @transform! {
-            width: Full,
-            height: Full,
-        };
-        Div {
-            @transform! {
-                width: Full,
-                height: Full,
-            };
-            RoundedOutline {}
-
-            @Transform::center();
-            "Welcome To OSUI!"
-        } (0x000000)
+        @Transform::new();
+        @Style { background: Background::RoundedOutline(0xff0000), foreground: None };
+        Div { @Transform::center(); "Hello, World!" }
     }
 }

src/render_scope.rs

@@ -1,7 +1,7 @@
 use std::fmt::Debug;
 
 use crate::{
-    style::{RawTransform, Transform},
+    style::{RawTransform, Style, Transform},
     utils::{self, hex_ansi_bg},
 };
 
@@ -18,6 +18,7 @@ pub struct RenderScope {
     render_stack: Vec<RenderMethod>,
     parent_width: u16,
     parent_height: u16,
+    style: Style,
 }
 
 impl RenderScope {
@@ -27,6 +28,7 @@ impl RenderScope {
             render_stack: Vec::new(),
             parent_width: 0,
             parent_height: 0,
+            style: Style::new(),
         }
     }
 
@@ -61,17 +63,52 @@ impl RenderScope {
         self.transform.height = self.transform.height.max(height);
     }
 
+    pub fn draw_outline_rounded(&mut self, w: u16, h: u16, color: u32) {
+        if w > 1 && h > 1 {
+            let d = "─".repeat(w as usize - 2);
+            self.draw_text_colored(
+                &format!(
+                    "╭{d}╮{}\n╰{d}╯",
+                    format!("\n│{}│", " ".repeat(w as usize - 2)).repeat(h as usize - 2),
+                ),
+                color,
+            );
+        }
+    }
+
+    pub fn draw_outline(&mut self, w: u16, h: u16, color: u32) {
+        if w > 1 && h > 1 {
+            let d = "─".repeat(w as usize - 2);
+            self.draw_text_colored(
+                &format!(
+                    "┌{d}┐{}\n└{d}┘",
+                    format!("\n│{}│", " ".repeat(w as usize - 2)).repeat(h as usize - 2),
+                ),
+                color,
+            );
+        }
+    }
+
+    pub fn draw_background(&mut self, width: u16, height: u16) {
+        match self.style.background {
+            crate::style::Background::NoBackground => {}
+            crate::style::Background::Outline(c) => self.draw_outline(width, height, c),
+            crate::style::Background::RoundedOutline(c) => {
+                self.draw_outline_rounded(width, height, c)
+            }
+            crate::style::Background::Solid(c) => self.draw_rect(width, height, c),
+        }
+    }
+
     pub fn draw(&self) {
         for m in &self.render_stack {
             match m {
                 RenderMethod::Text(t) => {
                     utils::print(self.transform.x, self.transform.y, t);
                 }
-                RenderMethod::TextColored(t, c) => utils::print(
-                    self.transform.x,
-                    self.transform.y,
-                    &(utils::hex_ansi(*c) + t),
-                ),
+                RenderMethod::TextColored(t, c) => {
+                    utils::print_liner(self.transform.x, self.transform.y, &utils::hex_ansi(*c), t)
+                }
                 RenderMethod::Rectangle(width, height, color) => {
                     utils::print_liner(
                         self.transform.x,
@@ -145,6 +182,14 @@ impl RenderScope {
     pub fn get_transform(&self) -> &RawTransform {
         &self.transform
     }
+
+    pub fn set_style(&mut self, style: Style) {
+        self.style = style;
+    }
+
+    pub fn get_style(&mut self) -> &mut Style {
+        &mut self.style
+    }
 }
 
 impl Debug for RenderScope {

src/style.rs

@@ -22,6 +22,14 @@ pub enum Dimension {
     Const(u16),
 }
 
+#[derive(Debug, Clone)]
+pub enum Background {
+    NoBackground,
+    Outline(u32),
+    RoundedOutline(u32),
+    Solid(u32),
+}
+
 component!(Transform {
     pub x: Position,
     pub y: Position,
@@ -31,6 +39,20 @@ component!(Transform {
     pub height: Dimension,
 });
 
+component!(Style {
+    pub background: Background,
+    pub foreground: Option<u32>,
+});
+
+impl Style {
+    pub fn new() -> Self {
+        Self {
+            background: Background::NoBackground,
+            foreground: None,
+        }
+    }
+}
+
 impl Transform {
     pub fn new() -> Transform {
         Transform {