🐛 Fix flex layout sorting on reverse order with no z-index

render-wasm/src/render.rs

@@ -1951,13 +1951,17 @@ impl RenderState {
                     element.children_ids_iter(false).copied().collect()
                 };
 
-                // Z-index ordering on Layouts
+                // Z-index ordering
+                // For reverse flex layouts with custom z-indexes, we reverse the base order
+                // so that visual stacking matches visual position
                 let children_ids = if element.has_layout() {
                     let mut ids = children_ids;
-                    if element.is_flex() && !element.is_flex_reverse() {
+                    let has_z_index = ids
+                        .iter()
+                        .any(|id| tree.get(id).map(|s| s.has_z_index()).unwrap_or(false));
+                    if element.is_flex_reverse() && has_z_index {
                         ids.reverse();
                     }
-
                     ids.sort_by(|id1, id2| {
                         let z1 = tree.get(id1).map(|s| s.z_index()).unwrap_or(0);
                         let z2 = tree.get(id2).map(|s| s.z_index()).unwrap_or(0);

render-wasm/src/shapes.rs

@@ -342,6 +342,7 @@ impl Shape {
         )
     }
 
+    #[allow(dead_code)]
     pub fn is_flex(&self) -> bool {
         matches!(
             self.shape_type,
@@ -456,7 +457,7 @@ impl Shape {
         min_w: Option<f32>,
         align_self: Option<AlignSelf>,
         is_absolute: bool,
-        z_index: i32,
+        z_index: Option<i32>,
     ) {
         self.layout_item = Some(LayoutItem {
             margin_top,
@@ -1401,11 +1402,23 @@ impl Shape {
 
     pub fn z_index(&self) -> i32 {
         match &self.layout_item {
-            Some(LayoutItem { z_index, .. }) => *z_index,
+            Some(LayoutItem {
+                z_index: Some(z), ..
+            }) => *z,
             _ => 0,
         }
     }
 
+    pub fn has_z_index(&self) -> bool {
+        matches!(
+            &self.layout_item,
+            Some(LayoutItem {
+                z_index: Some(_),
+                ..
+            })
+        )
+    }
+
     pub fn is_layout_vertical_auto(&self) -> bool {
         match &self.layout_item {
             Some(LayoutItem { v_sizing, .. }) => v_sizing == &Sizing::Auto,

render-wasm/src/shapes/layouts.rs

@@ -226,7 +226,7 @@ pub struct LayoutItem {
     pub max_w: Option<f32>,
     pub min_w: Option<f32>,
     pub is_absolute: bool,
-    pub z_index: i32,
+    pub z_index: Option<i32>,
     pub align_self: Option<AlignSelf>,
 }
 

render-wasm/src/shapes/modifiers/flex_layout.rs

@@ -13,6 +13,8 @@ use super::common::GetBounds;
 
 const MIN_SIZE: f32 = 0.01;
 const MAX_SIZE: f32 = f32::INFINITY;
+const TRACK_TOLERANCE: f32 = 0.01;
+
 
 #[derive(Debug)]
 struct TrackData {
@@ -139,7 +141,7 @@ impl ChildAxis {
                 max_across_size: layout_item.and_then(|i| i.max_h).unwrap_or(MAX_SIZE),
                 is_fill_main: child.is_layout_horizontal_fill(),
                 is_fill_across: child.is_layout_vertical_fill(),
-                z_index: layout_item.map(|i| i.z_index).unwrap_or(0),
+                z_index: layout_item.and_then(|i| i.z_index).unwrap_or(0),
                 bounds: *child_bounds,
             }
         } else {
@@ -157,7 +159,7 @@ impl ChildAxis {
                 max_main_size: layout_item.and_then(|i| i.max_h).unwrap_or(MAX_SIZE),
                 is_fill_main: child.is_layout_vertical_fill(),
                 is_fill_across: child.is_layout_horizontal_fill(),
-                z_index: layout_item.map(|i| i.z_index).unwrap_or(0),
+                z_index: layout_item.and_then(|i| i.z_index).unwrap_or(0),
                 bounds: *child_bounds,
             }
         };
@@ -228,12 +230,12 @@ fn initialize_tracks(
         };
 
         let gap_main = if first { 0.0 } else { layout_axis.gap_main };
-        let next_main_size = current_track.main_size + child_main_size + gap_main;
 
-        if !layout_axis.is_auto_main
-            && flex_data.is_wrap()
-            && (next_main_size > layout_axis.main_space())
-        {
+        let next_main_size = current_track.main_size + child_main_size + gap_main;
+        let main_space = layout_axis.main_space();
+        let exceeds_main_space = next_main_size > main_space + TRACK_TOLERANCE;
+
+        if !layout_axis.is_auto_main && flex_data.is_wrap() && exceeds_main_space {
             tracks.push(current_track);
 
             current_track = TrackData {

render-wasm/src/wasm/layouts.rs

@@ -57,6 +57,7 @@ pub extern "C" fn set_layout_data(
     min_w: f32,
     align_self: u8,
     is_absolute: bool,
+    has_z_index: bool,
     z_index: i32,
 ) {
     with_current_shape_mut!(state, |shape: &mut Shape| {
@@ -67,6 +68,7 @@ pub extern "C" fn set_layout_data(
         let min_h = if has_min_h { Some(min_h) } else { None };
         let max_w = if has_max_w { Some(max_w) } else { None };
         let min_w = if has_min_w { Some(min_w) } else { None };
+        let z_index = if has_z_index { Some(z_index) } else { None };
 
         let raw_align_self = align::RawAlignSelf::from(align_self);