Fixed area rendering and merging issues

examples/iter.rs

@@ -9,53 +9,32 @@ fn main() -> std::io::Result<()> {
 }
 
 pub fn app() -> Rsx {
-    let items: State<Vec<i32>> = use_state(vec![1, 2]);
+    let items: State<Vec<i32>> = use_state(Vec::new());
-    let count = use_state(3);
+    let count = use_state(1);
+
+    run! {
+        ref count {
+            loop {
+                if count.get_dl() == 5 {
+                    break;
+                }
+                std::thread::sleep(std::time::Duration::from_millis(300));
+                **count.get() += 1;
+            }
+        }
+    }
 
     run! {
         use count ref items {
             items.get().push(count.get_dl());
-            **count.get() += 1;
         }
     }
 
     rsx! {
-        // @transform! {
-        //     height: 3
-        // };
-        // FlexRow {
-        //     for item in items {
-        //         static "{item}"
-        //     }
-        // }
-
-        @transform! {
-            height: 3
-        };
         FlexRow {
-            @transform! {
+            for item in items {
-                height: 1
+                static "{item}"
-            };
+            }
-            @Style { foreground: None, background: Background::Solid(0xff0000) };
-            Div { "yo" }
-
-            @transform! {
-                height: 1
-            };
-            @Style { foreground: None, background: Background::Solid(0x00ff00) };
-            Div { "gurt" }
-
-            @transform! {
-                height: 1
-            };
-            @Style { foreground: None, background: Background::Solid(0x0000ff) };
-            Div { "67" }
-
-            @transform! {
-                height: 1
-            };
-            @Style { foreground: None, background: Background::Solid(0x0000ff) };
-            Div { "41" }
         }
     }
 }

src/elements/div.rs

@@ -37,19 +37,25 @@ impl Element for Div {
         parent_scope: &mut crate::render_scope::RenderScope,
         render_context: &crate::render_scope::RenderContext,
     ) {
-        let mut transform = parent_scope.get_transform().clone();
+        let mut transform = {
-        let mut transform2 = transform.clone();
+            let (width, height) = parent_scope.get_size_or_parent();
-        (transform2.width, transform2.height) = parent_scope.get_size_or_parent();
+            let mut t = parent_scope.get_transform().clone();
+            t.width = width;
+            t.height = height;
+            t.transform_parent(parent_scope.get_parent_transform());
+            t
+        };
 
         let mut scope = crate::render_scope::RenderScope::new();
-        scope.set_parent_transform(transform2.clone());
+        scope.set_parent_transform(transform.clone());
 
+        transform.height = 0;
         let mut renderer = DivRenderer(&mut transform);
         for widget in &self.children {
             scope.render_widget(&mut renderer, render_context.get_context(), widget);
         }
 
-        self.render = (transform2.width, transform2.height);
+        self.render = (transform.width, transform.height);
     }
 
     fn draw_child(&mut self, element: &Arc<Widget>) {

src/elements/flex.rs

@@ -56,12 +56,17 @@ impl Element for FlexRow {
         parent_scope: &mut crate::render_scope::RenderScope,
         render_context: &crate::render_scope::RenderContext,
     ) {
-        let mut transform = parent_scope.get_transform().clone();
+        let mut transform = {
-        let mut transform2 = transform.clone();
+            let (width, height) = parent_scope.get_size_or_parent();
-        (transform2.width, transform2.height) = parent_scope.get_size_or_parent();
+            let mut t = parent_scope.get_transform().clone();
+            t.width = width;
+            t.height = height;
+            t.transform_parent(parent_scope.get_parent_transform());
+            t
+        };
 
         let mut scope = crate::render_scope::RenderScope::new();
-        scope.set_parent_transform(transform2.clone());
+        scope.set_parent_transform(transform.clone());
 
         let mut v = 0;
         let mut renderer = RowRenderer(&mut transform, self.gap, &mut v);
@@ -69,7 +74,7 @@ impl Element for FlexRow {
             scope.render_widget(&mut renderer, render_context.get_context(), widget);
         }
 
-        self.render = (transform2.width, transform2.height);
+        self.render = (transform.width, transform.height);
     }
 
     fn draw_child(&mut self, element: &Arc<Widget>) {
@@ -110,12 +115,17 @@ impl Element for FlexCol {
         parent_scope: &mut crate::render_scope::RenderScope,
         render_context: &crate::render_scope::RenderContext,
     ) {
-        let mut transform = parent_scope.get_transform().clone();
+        let mut transform = {
-        let mut transform2 = transform.clone();
+            let (width, height) = parent_scope.get_size_or_parent();
-        (transform2.width, transform2.height) = parent_scope.get_size_or_parent();
+            let mut t = parent_scope.get_transform().clone();
+            t.width = width;
+            t.height = height;
+            t.transform_parent(parent_scope.get_parent_transform());
+            t
+        };
 
         let mut scope = crate::render_scope::RenderScope::new();
-        scope.set_parent_transform(transform2.clone());
+        scope.set_parent_transform(transform.clone());
 
         let mut v = 0;
         let mut renderer = ColumnRenderer(&mut transform, self.gap, &mut v);
@@ -123,7 +133,7 @@ impl Element for FlexCol {
             scope.render_widget(&mut renderer, render_context.get_context(), widget);
         }
 
-        self.render = (transform2.width, transform2.height);
+        self.render = (transform.width, transform.height);
     }
 
     fn draw_child(&mut self, element: &Arc<Widget>) {

src/style.rs

@@ -171,6 +171,19 @@ impl RawTransform {
             py: 0,
         }
     }
+
+    pub fn transform_parent(&mut self, parent: &Self) {
+        let child_bottom = self.y + self.height;
+        let parent_bottom = parent.y + parent.height;
+
+        if child_bottom > parent_bottom {
+            if parent_bottom > self.y {
+                self.height = parent_bottom - self.y;
+            } else {
+                self.height = 0;
+            }
+        }
+    }
 }
 
 impl Dimension {