refactored div

src/elements/div.rs

@@ -1,67 +1,47 @@
 use std::sync::{Arc, Mutex};
 
-use crate::{
+use crate::widget::{Element, Widget};
-    extensions::Handler,
-    widget::{Element, Widget},
-    RenderWrapperEvent,
-};
 
 pub struct Div {
     color: u32,
-    children: Mutex<usize>,
+    children: Mutex<Vec<Arc<Widget>>>,
-    rendered: Mutex<usize>,
 }
 
 impl Element for Arc<Div> {
     fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
-        let (w, h) = scope.get_size_or_parent();
+        let (width, height) = scope.get_size_or_parent();
-        scope.draw_rect(w, h, self.color);
+        scope.draw_rect(width, height, self.color);
     }
 
-    fn draw_child(&self, element: &Arc<Widget>) {
+    fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
-        *self.children.lock().unwrap() += 1;
-        let r = self.clone();
-        element.inject(move |w| {
-            let r = r.clone();
-            w.component(Handler::new(move |elem, e: &RenderWrapperEvent| {
-                let scope = e.get_scope();
         let transform = scope.get_transform().clone();
 
-                scope.clear();
+        scope.draw();
         let (w, h) = scope.get_parent_size();
         scope.set_parent_size(transform.width, transform.height);
 
+        for elem in self.children.lock().unwrap().iter() {
+            scope.clear();
             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 t = scope.get_transform_mut();
-                let elem_transform = scope.get_transform_mut();
+            t.x += transform.x;
-                elem_transform.x += transform.x;
+            t.y += transform.y;
-                elem_transform.y += transform.y;
 
             scope.draw();
-                elem.0.lock().unwrap().after_render(&scope);
+            elem.0.lock().unwrap().after_render(scope);
-
+            scope.clear();
+        }
         scope.set_parent_size(w, h);
+    }
 
-                {
+    fn draw_child(&self, element: &Arc<Widget>) {
-                    let mut rendered = r.rendered.lock().unwrap();
+        self.children.lock().unwrap().push(element.clone());
-                    let children = r.children.lock().unwrap();
-                    *rendered += 1;
-                    if *rendered < *children {
-                        scope.set_transform_raw(transform);
-                    } else {
-                        *rendered = 0;
-                    }
-                }
-            }))
-        })
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
@@ -77,8 +57,7 @@ impl Div {
     pub fn new(color: u32) -> Arc<Self> {
         Arc::new(Div {
             color,
-            children: Mutex::new(0),
+            children: Mutex::new(Vec::new()),
-            rendered: Mutex::new(0),
         })
     }
 }

src/elements/flex.rs

@@ -8,9 +8,9 @@ use crate::{
 };
 
 pub struct FlexRow {
-    transform: Mutex<RawTransform>,
     color: u32,
     gap: u16,
+    children: Mutex<Vec<Arc<Widget>>>,
 }
 pub struct FlexCol {
     transform: Mutex<RawTransform>,
@@ -20,65 +20,84 @@ pub struct FlexCol {
 
 impl Element for Arc<FlexRow> {
     fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
-        let transform = self.transform.lock().unwrap();
+        let (width, height) = scope.get_size_or_parent();
-        let (w, h) = scope.get_size_or(transform.width, transform.height);
+        scope.draw_rect(width, height, self.color);
-        scope.draw_rect(w, h, self.color);
     }
 
-    fn after_render(&mut self, scope: &crate::render_scope::RenderScope) {
+    fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
-        let mut t = self.transform.lock().unwrap();
+        let transform = scope.get_transform().clone();
-        let st = scope.get_transform();
-
-        t.x = st.x;
-        t.y = st.y;
-
-        t.width = 0;
-        t.height = 0;
-    }
-
-    fn draw_child(&self, element: &Arc<Widget>) {
-        let r = self.clone();
-        element.inject(move |w| {
-            let r = r.clone();
-            w.component(Handler::new(move |elem, e: &RenderWrapperEvent| {
-                let scope = e.get_scope();
-                scope.clear();
-
-                let mut transform = r.transform.lock().unwrap();
 
+        scope.draw();
         let (w, h) = scope.get_parent_size();
         scope.set_parent_size(transform.width, transform.height);
 
+        for elem in self.children.lock().unwrap().iter() {
+            scope.clear();
             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 t = scope.get_transform_mut();
-                let elem_transform = scope.get_transform_mut();
+            t.x += transform.x;
-
+            t.y += transform.y;
-                transform.height += if transform.height == 0 {
-                    elem_transform.height
-                } else {
-                    elem_transform.height + r.gap
-                };
-                transform.width = transform.width.max(elem_transform.width);
-
-                elem_transform.x = transform.x;
-                elem_transform.y = transform.y;
-                transform.y += elem_transform.height + r.gap;
 
             scope.draw();
-                elem.0.lock().unwrap().after_render(&scope);
+            elem.0.lock().unwrap().after_render(scope);
-
+            scope.clear();
-                scope.set_parent_size(w, h);
-            }))
-        })
         }
+        scope.set_parent_size(w, h);
+    }
+
+    fn draw_child(&self, element: &Arc<Widget>) {
+        self.children.lock().unwrap().push(element.clone());
+    }
+
+    // fn draw_child(&self, element: &Arc<Widget>) {
+    //     let r = self.clone();
+    //     element.inject(move |w| {
+    //         let r = r.clone();
+    //         w.component(Handler::new(move |elem, e: &RenderWrapperEvent| {
+    //             let mut scope = e.get_scope();
+    //             scope.clear();
+
+    //             let mut transform = r.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();
+
+    //             transform.height += if transform.height == 0 {
+    //                 elem_transform.height
+    //             } else {
+    //                 elem_transform.height + r.gap
+    //             };
+    //             transform.width = transform.width.max(elem_transform.width);
+
+    //             elem_transform.x = transform.x;
+    //             elem_transform.y = transform.y;
+    //             transform.y += elem_transform.height + r.gap;
+
+    //             scope.draw();
+    //             elem.0.lock().unwrap().after_render(&mut scope);
+
+    //             scope.set_parent_size(w, h);
+    //         }))
+    //     })
+    // }
 
     fn as_any(&self) -> &dyn std::any::Any {
         self
@@ -92,7 +111,7 @@ impl Element for Arc<FlexRow> {
 impl FlexRow {
     pub fn new(color: u32, gap: u16) -> Arc<Self> {
         Arc::new(Self {
-            transform: Mutex::new(RawTransform::new()),
+            children: Mutex::new(Vec::new()),
             color,
             gap,
         })
@@ -106,7 +125,7 @@ impl Element for Arc<FlexCol> {
         scope.draw_rect(w, h, self.color);
     }
 
-    fn after_render(&mut self, scope: &crate::render_scope::RenderScope) {
+    fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
         let mut t = self.transform.lock().unwrap();
         let st = scope.get_transform();
 
@@ -122,7 +141,7 @@ impl Element for Arc<FlexCol> {
         element.inject(move |w| {
             let r = r.clone();
             w.component(Handler::new(move |elem, e: &RenderWrapperEvent| {
-                let scope = e.get_scope();
+                let mut scope = e.get_scope();
                 scope.clear();
 
                 let mut transform = r.transform.lock().unwrap();
@@ -154,7 +173,7 @@ impl Element for Arc<FlexCol> {
                 transform.x += elem_transform.width + r.gap;
 
                 scope.draw();
-                elem.0.lock().unwrap().after_render(&scope);
+                elem.0.lock().unwrap().after_render(&mut scope);
 
                 scope.set_parent_size(w, h);
             }))

src/frontend.rs

@@ -25,7 +25,14 @@ impl Rsx {
         for rsx_elem in self.0 {
             match rsx_elem {
                 RsxElement::Element(f, dep, child) => {
-                    let w = screen.draw_box(f);
+                    let w = if let Some(parent) = &parent {
+                        let w = Arc::new(Widget::new(Box::new(f)));
+                        parent.0.lock().unwrap().draw_child(&w);
+                        w
+                    } else {
+                        screen.draw_box(f)
+                    };
+
                     for d in dep {
                         w.dependency_box(d);
                     }

src/lib.rs

@@ -104,7 +104,7 @@ impl Screen {
                 }
                 scope.draw();
 
-                elem.0.lock().unwrap().after_render(&scope);
+                elem.0.lock().unwrap().after_render(&mut scope);
             }
 
             elem.auto_refresh();

src/main.rs

@@ -1,11 +1,4 @@
-use osui::{
+use osui::{elements::div::Div, frontend::Rsx, rsx, style::Transform, Screen};
-    elements::{div::Div, flex::FlexRow},
-    frontend::Rsx,
-    rsx,
-    state::use_state,
-    style::Transform,
-    Screen,
-};
 
 fn main() -> std::io::Result<()> {
     let screen = Screen::new();
@@ -17,32 +10,15 @@ fn main() -> std::io::Result<()> {
 
 fn app() -> Rsx {
     rsx! {
-        FlexRow {
+        @Transform::new();
-            counter()
-        } (0x00000, 1)
-    }
-}
-
-fn counter() -> Rsx {
-    let count = use_state(0);
-
-    std::thread::spawn({
-        let count = count.clone();
-        move || loop {
-            std::thread::sleep(std::time::Duration::from_millis(50));
-            **count.get() += 1;
-        }
-    });
-
-    rsx! {
-        @Transform::new().dimensions(40, 3);
         Div {
-            %count
+            @Transform::center().dimensions(40, 3);
-            "{count}"
+            Div {
-
+                @Transform::center().dimensions(8, 1);
-            %count
+                Div {
-            @Transform::center();
+                    "hello"
-            "{count}"
+                } (0x00ff00)
             } (0xff0000)
+        } (0x0000ff)
     }
 }

src/render_scope.rs

@@ -91,6 +91,8 @@ impl RenderScope {
         self.render_stack.clear();
         self.transform.width = 0;
         self.transform.height = 0;
+        self.transform.x = 0;
+        self.transform.y = 0;
     }
 
     pub fn get_size(&self) -> (u16, u16) {

src/widget.rs

@@ -13,7 +13,7 @@ pub trait Element: Send + Sync {
     #[allow(unused)]
     fn render(&mut self, scope: &mut RenderScope) {}
     #[allow(unused)]
-    fn after_render(&mut self, scope: &RenderScope) {}
+    fn after_render(&mut self, scope: &mut RenderScope) {}
     #[allow(unused)]
     fn draw_child(&self, element: &Arc<Widget>) {}
     fn as_any(&self) -> &dyn Any;