DioxusLabs · nicoburns · Jul 7, 2024 · Jul 3, 2024
diff --git a/src/compute/block.rs b/src/compute/block.rs
@@ -437,6 +437,7 @@ fn perform_final_layout_on_in_flow_children(
                     location,
                     padding: item.padding,
                     border: item.border,
+                    margin: resolved_margin,
                 },
             );
 
@@ -662,6 +663,7 @@ fn perform_absolute_layout_on_absolute_children(
                 location,
                 padding,
                 border,
+                margin: resolved_margin,
             },
         );
 

diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
@@ -1818,6 +1818,7 @@ fn calculate_flex_item(
             location,
             padding: item.padding,
             border: item.border,
+            margin: item.margin,
         },
     );
 
@@ -2149,6 +2150,7 @@ fn perform_absolute_layout_on_absolute_children(
                 location,
                 padding,
                 border,
+                margin: resolved_margin,
             },
         );
 

diff --git a/src/compute/grid/alignment.rs b/src/compute/grid/alignment.rs
@@ -187,7 +187,7 @@ pub(super) fn align_and_position_item(
     // Resolve final size
     let Size { width, height } = Size { width, height }.unwrap_or(layout_output.size).maybe_clamp(min_size, max_size);
 
-    let x = align_item_within_area(
+    let (x, x_margin) = align_item_within_area(
         Line { start: grid_area.left, end: grid_area.right },
         justify_self.unwrap_or(alignment_styles.horizontal),
         width,
@@ -196,7 +196,7 @@ pub(super) fn align_and_position_item(
         margin.horizontal_components(),
         0.0,
     );
-    let y = align_item_within_area(
+    let (y, y_margin) = align_item_within_area(
         Line { start: grid_area.top, end: grid_area.bottom },
         align_self.unwrap_or(alignment_styles.vertical),
         height,
@@ -211,6 +211,8 @@ pub(super) fn align_and_position_item(
         height: if overflow.x == Overflow::Scroll { scrollbar_width } else { 0.0 },
     };
 
+    let resolved_margin = Rect { left: x_margin.start, right: x_margin.end, top: y_margin.start, bottom: y_margin.end };
+
     tree.set_unrounded_layout(
         node,
         &Layout {
@@ -222,6 +224,7 @@ pub(super) fn align_and_position_item(
             scrollbar_size,
             padding,
             border,
+            margin: resolved_margin,
         },
     );
 
@@ -243,7 +246,7 @@ pub(super) fn align_item_within_area(
     inset: Line<Option<f32>>,
     margin: Line<Option<f32>>,
     baseline_shim: f32,
-) -> f32 {
+) -> (f32, Line<f32>) {
     // Calculate grid area dimension in the axis
     let non_auto_margin = Line { start: margin.start.unwrap_or(0.0) + baseline_shim, end: margin.end.unwrap_or(0.0) };
     let grid_area_size = f32_max(grid_area.end - grid_area.start, 0.0);
@@ -284,5 +287,5 @@ pub(super) fn align_item_within_area(
         start += inset.start.or(inset.end.map(|pos| -pos)).unwrap_or(0.0);
     }
 
-    start
+    (start, resolved_margin)
 }
diff --git a/src/compute/mod.rs b/src/compute/mod.rs
@@ -113,6 +113,7 @@ pub fn compute_root_layout(tree: &mut impl LayoutPartialTree, root: NodeId, avai
     let style = tree.get_style(root);
     let padding = style.padding.resolve_or_zero(available_space.width.into_option());
     let border = style.border.resolve_or_zero(available_space.width.into_option());
+    let margin = style.margin.resolve_or_zero(available_space.width.into_option());
     let scrollbar_size = Size {
         width: if style.overflow.y == Overflow::Scroll { style.scrollbar_width } else { 0.0 },
         height: if style.overflow.x == Overflow::Scroll { style.scrollbar_width } else { 0.0 },
@@ -129,6 +130,8 @@ pub fn compute_root_layout(tree: &mut impl LayoutPartialTree, root: NodeId, avai
             scrollbar_size,
             padding,
             border,
+            // TODO: support auto margins for root node?
+            margin,
         },
     );
 }

diff --git a/src/tree/layout.rs b/src/tree/layout.rs
@@ -233,6 +233,8 @@ pub struct Layout {
     pub border: Rect<f32>,
     /// The size of the padding of the node
     pub padding: Rect<f32>,
+    /// The size of the margin of the node
+    pub margin: Rect<f32>,
 }
 
 impl Default for Layout {
@@ -258,6 +260,7 @@ impl Layout {
             scrollbar_size: Size::zero(),
             border: Rect::zero(),
             padding: Rect::zero(),
+            margin: Rect::zero(),
         }
     }
 
@@ -276,6 +279,7 @@ impl Layout {
             scrollbar_size: Size::zero(),
             border: Rect::zero(),
             padding: Rect::zero(),
+            margin: Rect::zero(),
         }
     }
 }