fully working h and v grid

src/elements/grid.rs

@@ -12,6 +12,11 @@ pub struct VGrid {
     color: u32,
     gap: u16,
 }
+pub struct HGrid {
+    transform: Mutex<RawTransform>,
+    color: u32,
+    gap: u16,
+}
 
 impl Element for Arc<VGrid> {
     fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
@@ -33,9 +38,29 @@ impl Element for Arc<VGrid> {
     }
 }
 
+impl Element for Arc<HGrid> {
+    fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
+        let transform = self.transform.lock().unwrap();
+        let (w, h) = scope.get_size_or(transform.width, transform.height);
+        scope.draw_rect(w, h, self.color);
+    }
+
+    fn after_render(&mut self, scope: &crate::render_scope::RenderScope) {
+        *self.transform.lock().unwrap() = scope.get_transform().clone();
+    }
+
+    fn as_any(&self) -> &dyn std::any::Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn std::any::Any {
+        self
+    }
+}
+
 impl VGrid {
     pub fn new(color: u32, gap: u16) -> Arc<Self> {
-        Arc::new(VGrid {
+        Arc::new(Self {
             transform: Mutex::new(RawTransform::new()),
             color,
             gap,
@@ -77,3 +102,48 @@ impl VGrid {
         r
     }
 }
+
+impl HGrid {
+    pub fn new(color: u32, gap: u16) -> Arc<Self> {
+        Arc::new(Self {
+            transform: Mutex::new(RawTransform::new()),
+            color,
+            gap,
+        })
+    }
+
+    pub fn draw(self: &Arc<Self>, element: &Arc<Widget>) -> Arc<Self> {
+        let r2 = self.clone();
+        let r = self.clone();
+        element.component(Handler::new(move |elem, e: &RenderWrapperEvent| {
+            let scope = e.get_scope();
+            scope.clear();
+
+            let mut transform = r2.transform.lock().unwrap();
+
+            let (w, h) = scope.get_parent_size();
+            scope.set_parent_size(transform.width, transform.height);
+
+            if let Some(t) = elem.get() {
+                scope.set_transform(&t);
+            }
+
+            elem.0.lock().unwrap().render(scope);
+
+            if let Some(t) = elem.get() {
+                scope.set_transform(&t);
+            }
+
+            let elem_transform = scope.get_transform_mut();
+            elem_transform.x = transform.x;
+            elem_transform.y += transform.y;
+            transform.x += elem_transform.width + r2.gap;
+
+            scope.draw();
+            elem.0.lock().unwrap().after_render(&scope);
+
+            scope.set_parent_size(w, h);
+        }));
+        r
+    }
+}

src/elements/mod.rs

@@ -16,3 +16,17 @@ impl Element for String {
         self
     }
 }
+
+impl Element for (String, u32) {
+    fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
+        scope.draw_text_colored(&self.0, self.1);
+    }
+
+    fn as_any(&self) -> &dyn std::any::Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn std::any::Any {
+        self
+    }
+}

src/main.rs

@@ -1,5 +1,5 @@
 use osui::{
-    elements::grid::VGrid,
+    elements::grid::{HGrid, VGrid},
     extensions::{id::IdExtension, tick::TickExtension},
     style::Transform,
     Screen,
@@ -11,19 +11,29 @@ fn main() {
     screen.extension(document.clone());
     screen.extension(TickExtension(10));
 
-    let my_div = VGrid::new(0xff0000, 1);
+    let vgrid = VGrid::new(0xff0000, 1);
 
     screen
-        .draw(my_div.clone())
+        .draw(vgrid.clone())
-        .component(Transform::center().dimensions(16, 9));
+        .component(Transform::center().dimensions(34, 9));
+
+    for _ in 1..6 {
+        let row = HGrid::new(0x000000, 1);
+
+        vgrid.draw(
+            screen
+                .draw(row.clone())
+                .component(Transform::new().dimensions(5, 1)),
+        );
 
         for i in 1..6 {
-        my_div.draw(
+            row.draw(
                 screen
-                .draw(format!("Item {i}"))
+                    .draw((format!("Item {i}"), 0xff0000))
-                .component(Transform::center()),
+                    .component(Transform::new()),
             );
         }
+    }
 
     screen.run().unwrap();
 }

src/render_scope.rs

@@ -8,6 +8,7 @@ use crate::{
 #[derive(Clone)]
 enum RenderMethod {
     Text(String),
+    TextColored(String, u32),
     Rectangle(u16, u16, u32),
 }
 
@@ -41,6 +42,14 @@ impl RenderScope {
         self.transform.height = self.transform.height.max(h);
     }
 
+    pub fn draw_text_colored(&mut self, text: &str, color: u32) {
+        self.render_stack
+            .push(RenderMethod::TextColored(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);
+    }
+
     pub fn draw_rect(&mut self, width: u16, height: u16, color: u32) {
         self.render_stack
             .push(RenderMethod::Rectangle(width, height, color));
@@ -54,6 +63,11 @@ impl RenderScope {
                 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::Rectangle(width, height, color) => {
                     utils::print_liner(
                         self.transform.x,