padding

src/elements/div.rs

@@ -13,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_background(width, height);
+        scope.draw_rect(width, height, 0);
     }
 
     fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
@@ -23,6 +23,9 @@ impl Element for Div {
 
         for elem in self.children.lock().unwrap().iter() {
             scope.clear();
+            if let Some(style) = elem.get() {
+                scope.set_style(style);
+            }
             if let Some(t) = elem.get() {
                 scope.set_transform(&t);
             }
@@ -31,14 +34,13 @@ impl Element for Div {
                 scope.set_transform(&t);
             }
             let t = scope.get_transform_mut();
-            transform.width = transform.width.max(t.x + t.width);
+            transform.width = transform.width.max(t.x + t.width + (t.px * 2));
-            transform.height = transform.height.max(t.y + t.height);
+            transform.height = transform.height.max(t.y + t.height + (t.py * 2));
-            t.x += transform.x;
+            t.x += transform.x + transform.px;
-            t.y += transform.y;
+            t.y += transform.y + transform.py;
 
             scope.draw();
             elem.0.lock().unwrap().after_render(scope);
-            scope.clear();
         }
         scope.set_parent_size(w, h);
         self.size = (transform.width, transform.height);

src/elements/flex.rs

@@ -20,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_background(width, height);
+        scope.draw_rect(width, height, 0);
     }
 
     fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
@@ -32,6 +32,9 @@ impl Element for FlexRow {
 
         for elem in self.children.lock().unwrap().iter() {
             scope.clear();
+            if let Some(style) = elem.get() {
+                scope.set_style(style);
+            }
             if let Some(t) = elem.get() {
                 scope.set_transform(&t);
             }
@@ -45,6 +48,8 @@ impl Element for FlexRow {
             t.x += transform.x;
             t.y += transform.y + v;
             v += t.height + self.gap;
+            t.px += transform.px;
+            t.py += transform.py;
 
             scope.draw();
 
@@ -81,7 +86,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_background(width, height);
+        scope.draw_rect(width, height, 0);
     }
 
     fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
@@ -93,6 +98,9 @@ impl Element for FlexCol {
 
         for elem in self.children.lock().unwrap().iter() {
             scope.clear();
+            if let Some(style) = elem.get() {
+                scope.set_style(style);
+            }
             if let Some(t) = elem.get() {
                 scope.set_transform(&t);
             }
@@ -101,11 +109,13 @@ impl Element for FlexCol {
                 scope.set_transform(&t);
             }
             let t = scope.get_transform_mut();
-            transform.width = transform.width.max(v + t.width);
+            transform.width = transform.width.max(v + t.width + (t.px * 2));
-            transform.height = transform.height.max(t.height);
+            transform.height = transform.height.max(t.height + (t.py * 2));
             t.x += transform.x + v;
             t.y += transform.y;
             v += t.width + self.gap;
+            t.px += transform.px;
+            t.py += transform.py;
 
             scope.draw();
 

src/main.rs

@@ -10,8 +10,25 @@ fn main() -> std::io::Result<()> {
 
 fn app() -> Rsx {
     rsx! {
-        @Transform::new();
+        @Transform::new().padding(3, 3);
         @Style { background: Background::RoundedOutline(0xff0000), foreground: None };
-        Div { @Transform::center(); "Hello, World!" }
+        Div {
+            @Transform::new().padding(1, 1);
+            @Style { background: Background::RoundedOutline(0x00ff00), foreground: None };
+            FlexCol {
+                @Transform::new().padding(1, 1);
+                "Hello, World!"
+                @Transform::new().padding(1, 1);
+                "Hello, World!"
+                @Transform::new().padding(1, 1);
+                "Hello, World!"
+                @Transform::new().padding(1, 1);
+                "Hello, World!"
+                @Transform::new().padding(1, 1);
+                "Hello, World!"
+                @Transform::new().padding(1, 1);
+                "Hello, World!"
+            } (2)
+        }
     }
 }

src/render_scope.rs

@@ -39,6 +39,8 @@ impl RenderScope {
     pub fn set_transform(&mut self, transform: &Transform) {
         transform.use_dimensions(self.parent_width, self.parent_height, &mut self.transform);
         transform.use_position(self.parent_width, self.parent_height, &mut self.transform);
+        self.transform.px = transform.px;
+        self.transform.py = transform.py;
     }
 
     pub fn draw_text(&mut self, text: &str) {
@@ -63,56 +65,59 @@ impl RenderScope {
         self.transform.height = self.transform.height.max(height);
     }
 
-    pub fn draw_outline_rounded(&mut self, w: u16, h: u16, color: u32) {
+    pub fn draw(&self) {
-        if w > 1 && h > 1 {
+        let width = self.transform.width;
-            let d = "─".repeat(w as usize - 2);
+        let height = self.transform.height;
-            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::Outline(_c) => {}
             crate::style::Background::RoundedOutline(c) => {
-                self.draw_outline_rounded(width, height, c)
+                let width = width + self.transform.px * 2;
-            }
+                let height = height + self.transform.py * 2;
-            crate::style::Background::Solid(c) => self.draw_rect(width, height, c),
+                if width > 1 && height > 1 {
-        }
+                    let d = "─".repeat(width as usize - 2);
-    }
-
-    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_liner(self.transform.x, self.transform.y, &utils::hex_ansi(*c), t)
-                }
-                RenderMethod::Rectangle(width, height, color) => {
                     utils::print_liner(
                         self.transform.x,
                         self.transform.y,
+                        &utils::hex_ansi(c),
+                        &format!(
+                            "╭{d}╮{}\n╰{d}╯",
+                            format!("\n│{}│", " ".repeat(width as usize - 2))
+                                .repeat(height as usize - 2),
+                        ),
+                    );
+                }
+            }
+            crate::style::Background::Solid(c) => utils::print_liner(
+                self.transform.x,
+                self.transform.y,
+                &hex_ansi_bg(c),
+                &std::iter::repeat(" ".repeat(width as usize))
+                    .take(height as usize)
+                    .collect::<Vec<_>>()
+                    .join("\n"),
+            ),
+        }
+
+        for m in &self.render_stack {
+            match m {
+                RenderMethod::Text(t) => {
+                    utils::print(
+                        self.transform.x + self.transform.px,
+                        self.transform.y + self.transform.py,
+                        t,
+                    );
+                }
+                RenderMethod::TextColored(t, c) => utils::print_liner(
+                    self.transform.x + self.transform.px,
+                    self.transform.y + self.transform.py,
+                    &utils::hex_ansi(*c),
+                    t,
+                ),
+                RenderMethod::Rectangle(width, height, color) => {
+                    utils::print_liner(
+                        self.transform.x + self.transform.px,
+                        self.transform.y + self.transform.py,
                         &hex_ansi_bg(*color),
                         &std::iter::repeat(" ".repeat(*width as usize))
                             .take(*height as usize)
@@ -126,10 +131,8 @@ impl RenderScope {
 
     pub fn clear(&mut self) {
         self.render_stack.clear();
-        self.transform.width = 0;
+        self.transform = RawTransform::new();
-        self.transform.height = 0;
+        self.style = Style::new();
-        self.transform.x = 0;
-        self.transform.y = 0;
     }
 
     pub fn get_size(&self) -> (u16, u16) {

src/style.rs

@@ -6,6 +6,8 @@ pub struct RawTransform {
     pub y: u16,
     pub width: u16,
     pub height: u16,
+    pub px: u16,
+    pub py: u16,
 }
 
 #[derive(Debug, Clone)]
@@ -35,6 +37,8 @@ component!(Transform {
     pub y: Position,
     pub mx: i32,
     pub my: i32,
+    pub px: u16,
+    pub py: u16,
     pub width: Dimension,
     pub height: Dimension,
 });
@@ -60,6 +64,8 @@ impl Transform {
             y: Position::Const(0),
             mx: 0,
             my: 0,
+            px: 0,
+            py: 0,
             width: Dimension::Content,
             height: Dimension::Content,
         }
@@ -71,6 +77,8 @@ impl Transform {
             y: Position::Center,
             mx: 0,
             my: 0,
+            px: 0,
+            py: 0,
             width: Dimension::Content,
             height: Dimension::Content,
         }
@@ -92,6 +100,12 @@ impl Transform {
         self
     }
 
+    pub fn padding(mut self, x: u16, y: u16) -> Self {
+        self.px = x;
+        self.py = y;
+        self
+    }
+
     pub fn dimensions(mut self, width: u16, height: u16) -> Self {
         self.width = Dimension::Const(width);
         self.height = Dimension::Const(height);
@@ -118,6 +132,8 @@ impl RawTransform {
             y: 0,
             width: 0,
             height: 0,
+            px: 0,
+            py: 0,
         }
     }
 }