feat(forest): support the gap property

Author: TtTRz

float-pigment-forest/src/ffi.rs

@@ -742,6 +742,71 @@ pub unsafe extern "C" fn NodeStyleSetOrder(node: NodePtr, value: i32) {
     node.set_order(value);
 }
 
+/// # Safety
+///
+#[no_mangle]
+pub unsafe extern "C" fn NodeStyleSetRowGap(node: NodePtr, value: f32) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_row_gap(DefLength::Points(Len::from_f32(value)));
+}
+
+/// # Safety
+///
+#[no_mangle]
+pub unsafe extern "C" fn NodeStyleSetRowGapNormal(node: NodePtr) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_row_gap(DefLength::Undefined);
+}
+
+/// # Safety
+///
+#[no_mangle]
+pub unsafe extern "C" fn NodeStyleSetRowGapPercentage(node: NodePtr, value: f32) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_row_gap(DefLength::Percent(value));
+}
+
+/// # Safety
+///
+#[no_mangle]
+pub unsafe extern "C" fn NodeStyleSetRowGapCalcHandle(node: NodePtr, calc_handle: i32) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_row_gap(DefLength::Custom(calc_handle));
+}
+
+/// # Safety
+///
+#[no_mangle]
+
+pub unsafe extern "C" fn NodeStyleSetColumnGap(node: NodePtr, value: f32) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_column_gap(DefLength::Points(Len::from_f32(value)));
+}
+
+/// # Safety
+///
+#[no_mangle]
+pub unsafe extern "C" fn NodeStyleSetColumnGapNormal(node: NodePtr) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_column_gap(DefLength::Undefined);
+}
+
+/// # Safety
+///
+#[no_mangle]
+pub unsafe extern "C" fn NodeStyleSetColumnGapPercentage(node: NodePtr, value: f32) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_column_gap(DefLength::Percent(value));
+}
+
+/// # Safety
+///
+#[no_mangle]
+pub unsafe extern "C" fn NodeStyleSetColumnGapCalcHandle(node: NodePtr, calc_handle: i32) {
+    let node = &*(node.ptr as *mut Node);
+    node.set_column_gap(DefLength::Custom(calc_handle));
+}
+
 /// # Safety
 ///
 #[no_mangle]

float-pigment-forest/src/layout/layout_impl.rs

@@ -685,4 +685,14 @@ impl LayoutStyle<Len> for Node {
     fn text_align(&self) -> TextAlign {
         self.style_manager().text_align()
     }
+
+    #[inline]
+    fn row_gap(&self) -> Length {
+        self.style_manager().row_gap()
+    }
+
+    #[inline]
+    fn column_gap(&self) -> Length {
+        self.style_manager().column_gap()
+    }
 }

float-pigment-forest/src/node.rs

@@ -618,6 +618,8 @@ pub trait StyleSetter {
     unsafe fn set_aspect_ratio(&self, value: Option<f32>);
     unsafe fn set_order(&self, value: i32);
     unsafe fn set_text_align(&self, value: TextAlign);
+    unsafe fn set_row_gap(&self, value: Length);
+    unsafe fn set_column_gap(&self, value: Length);
 }
 
 impl StyleSetter for Node {
@@ -857,6 +859,16 @@ impl StyleSetter for Node {
             self.mark_dirty_propagate();
         }
     }
+    unsafe fn set_row_gap(&self, value: Length) {
+        if self.style_manager_mut().set_row_gap(value) {
+            self.mark_dirty_propagate();
+        }
+    }
+    unsafe fn set_column_gap(&self, value: Length) {
+        if self.style_manager_mut().set_column_gap(value) {
+            self.mark_dirty_propagate();
+        }
+    }
 }
 
 #[cfg(test)]

float-pigment-forest/src/style.rs

@@ -76,6 +76,8 @@ struct OtherStyle {
     pub overflow_y: Overflow,
     pub text_align: TextAlign,
     pub aspect_ratio: Option<f32>,
+    pub row_gap: Length,
+    pub column_gap: Length,
 }
 
 impl Default for OtherStyle {
@@ -87,6 +89,8 @@ impl Default for OtherStyle {
             overflow_y: Overflow::Visible,
             text_align: TextAlign::Start,
             aspect_ratio: None,
+            row_gap: Length::Undefined,
+            column_gap: Length::Undefined,
         }
     }
 }
@@ -945,4 +949,30 @@ impl StyleManager {
         self.flex_style().flex_basis = value;
         true
     }
+
+    pub(crate) fn row_gap(&self) -> Length {
+        self.other_style().row_gap.clone()
+    }
+
+    pub(crate) fn set_row_gap(&self, value: Length) -> bool {
+        if self.other_style().row_gap == value {
+            return false;
+        }
+        self.clone_style(StyleBit::Other);
+        self.other_style().row_gap = value;
+        true
+    }
+
+    pub(crate) fn column_gap(&self) -> Length {
+        self.other_style().column_gap.clone()
+    }
+
+    pub(crate) fn set_column_gap(&self, value: Length) -> bool {
+        if self.other_style().column_gap == value {
+            return false;
+        }
+        self.clone_style(StyleBit::Other);
+        self.other_style().column_gap = value;
+        true
+    }
 }

float-pigment-forest/tests/custom/css_flexbox/gap.rs

@@ -0,0 +1,13 @@
+use crate::*;
+
+#[test]
+fn flex_gap() {
+    assert_xml!(
+        r#"
+        <div style="display: flex; width: 100px; gap: 10px;">
+          <div style="height: 10px; flex: 1" expect_width="45"></div>
+          <div style="height: 10px; flex: 1" expect_width="45" expect_left="55"></div>
+        </div>
+    "#
+    )
+}

float-pigment-forest/tests/custom/css_flexbox/mod.rs

@@ -9,3 +9,4 @@ mod order;
 mod align_content;
 
 mod flex_item_margin;
+mod gap;

float-pigment-forest/tests/mod.rs

@@ -7,7 +7,7 @@ pub use float_pigment_css::length_num::LengthNum;
 use float_pigment_css::{
     parser::parse_inline_style,
     property::NodeProperties,
-    typing::{AspectRatio, Display},
+    typing::{AspectRatio, Display, Gap},
 };
 pub use float_pigment_forest::Len;
 use float_pigment_forest::{layout::LayoutPosition, node::Length, *};
@@ -389,6 +389,36 @@ impl TestCtx {
                 },
                 "order" => node.set_order(node_props.order().to_i32()),
                 "text-align" => node.set_text_align(node_props.text_align()),
+                "gap" => {
+                    node.set_row_gap({
+                        match node_props.row_gap() {
+                            Gap::Length(l) => def_length(l),
+                            Gap::Normal => Length::Undefined,
+                        }
+                    });
+                    node.set_column_gap({
+                        match node_props.column_gap() {
+                            Gap::Length(l) => def_length(l),
+                            Gap::Normal => Length::Undefined,
+                        }
+                    });
+                }
+                "column-gap" => {
+                    node.set_column_gap({
+                        match node_props.column_gap() {
+                            Gap::Length(l) => def_length(l),
+                            Gap::Normal => Length::Undefined,
+                        }
+                    });
+                }
+                "row-gap" => {
+                    node.set_row_gap({
+                        match node_props.row_gap() {
+                            Gap::Length(l) => def_length(l),
+                            Gap::Normal => Length::Undefined,
+                        }
+                    });
+                }
                 _ => {}
             }
         });