Upgrade Taffy to v0.3.12]

packages/native-core/Cargo.toml

@@ -14,7 +14,7 @@ keywords = ["dom", "ui", "gui", "react"]
 dioxus-core = { path = "../core", version = "^0.3.0", optional = true }
 
 keyboard-types = "0.6.2"
-taffy = "0.2.1"
+taffy = "0.3.12"
 smallvec = "1.6"
 rustc-hash = "1.1.0"
 anymap = "1.0.0-beta.2"

packages/native-core/src/layout_attributes.rs

@@ -2,7 +2,7 @@
 
 /*
 - [ ] pub display: Display, ----> taffy doesnt support all display types
-- [x] pub position_type: PositionType,  --> taffy doesnt support everything
+- [x] pub position: Position,  --> taffy doesnt support everything
 - [x] pub direction: Direction,
 
 - [x] pub flex_direction: FlexDirection,
@@ -21,7 +21,7 @@
 - [x] pub padding: Rect<Dimension>,
 
 - [x] pub justify_content: JustifyContent,
-- [x] pub position: Rect<Dimension>,
+- [x] pub inset: Rect<Dimension>,
 - [x] pub border: Rect<Dimension>,
 
 - [ ] pub size: Size<Dimension>, ----> seems to only be relevant for input?
@@ -32,9 +32,9 @@
 */
 
 use lightningcss::properties::border::LineStyle;
-use lightningcss::properties::{align, display, flex, position, size};
+use lightningcss::properties::{align, border, display, flex, position, size};
 use lightningcss::{
-    properties::{align::GapValue, border::BorderSideWidth, Property, PropertyId},
+    properties::{Property, PropertyId},
     stylesheet::ParserOptions,
     traits::Parse,
     values::{
@@ -45,7 +45,7 @@ use lightningcss::{
 };
 use taffy::{
     prelude::*,
-    style::{FlexDirection, PositionType},
+    style::{FlexDirection, Position},
 };
 
 /// Default values for layout attributes
@@ -103,25 +103,23 @@ pub fn apply_layout_attributes_cfg(
                 _ => (),
             },
             Property::Position(position) => {
-                style.position_type = match position {
-                    position::Position::Relative => PositionType::Relative,
-                    position::Position::Absolute => PositionType::Absolute,
+                style.position = match position {
+                    position::Position::Relative => Position::Relative,
+                    position::Position::Absolute => Position::Absolute,
                     _ => return,
                 }
             }
-            Property::Top(top) => style.position.top = convert_length_percentage_or_auto(top),
+            Property::Top(top) => style.inset.top = convert_length_percentage_or_auto(top),
             Property::Bottom(bottom) => {
-                style.position.bottom = convert_length_percentage_or_auto(bottom)
-            }
-            Property::Left(left) => style.position.left = convert_length_percentage_or_auto(left),
-            Property::Right(right) => {
-                style.position.right = convert_length_percentage_or_auto(right)
+                style.inset.bottom = convert_length_percentage_or_auto(bottom)
             }
+            Property::Left(left) => style.inset.left = convert_length_percentage_or_auto(left),
+            Property::Right(right) => style.inset.right = convert_length_percentage_or_auto(right),
             Property::Inset(inset) => {
-                style.position.top = convert_length_percentage_or_auto(inset.top);
-                style.position.bottom = convert_length_percentage_or_auto(inset.bottom);
-                style.position.left = convert_length_percentage_or_auto(inset.left);
-                style.position.right = convert_length_percentage_or_auto(inset.right);
+                style.inset.top = convert_length_percentage_or_auto(inset.top);
+                style.inset.bottom = convert_length_percentage_or_auto(inset.bottom);
+                style.inset.left = convert_length_percentage_or_auto(inset.left);
+                style.inset.right = convert_length_percentage_or_auto(inset.right);
             }
             Property::BorderTopWidth(width) => {
                 style.border.top = convert_border_side_width(width, &config.border_widths);
@@ -164,44 +162,60 @@ pub fn apply_layout_attributes_cfg(
             }
             Property::BorderTopStyle(line_style) => {
                 if line_style != LineStyle::None {
-                    style.border.top =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.top = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
             }
             Property::BorderBottomStyle(line_style) => {
                 if line_style != LineStyle::None {
-                    style.border.bottom =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.bottom = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
             }
             Property::BorderLeftStyle(line_style) => {
                 if line_style != LineStyle::None {
-                    style.border.left =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.left = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
             }
             Property::BorderRightStyle(line_style) => {
                 if line_style != LineStyle::None {
-                    style.border.right =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.right = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
             }
             Property::BorderStyle(styles) => {
                 if styles.top != LineStyle::None {
-                    style.border.top =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.top = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
                 if styles.bottom != LineStyle::None {
-                    style.border.bottom =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.bottom = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
                 if styles.left != LineStyle::None {
-                    style.border.left =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.left = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
                 if styles.right != LineStyle::None {
-                    style.border.right =
-                        convert_border_side_width(BorderSideWidth::Medium, &config.border_widths);
+                    style.border.right = convert_border_side_width(
+                        border::BorderSideWidth::Medium,
+                        &config.border_widths,
+                    );
                 }
             }
             Property::FlexDirection(flex_direction, _) => {
@@ -228,75 +242,73 @@ pub fn apply_layout_attributes_cfg(
                 style.flex_shrink = shrink;
             }
             Property::FlexBasis(basis, _) => {
-                style.flex_basis = convert_length_percentage_or_auto(basis);
+                style.flex_basis = convert_length_percentage_or_auto(basis).into();
             }
             Property::Flex(flex, _) => {
                 style.flex_grow = flex.grow;
                 style.flex_shrink = flex.shrink;
-                style.flex_basis = convert_length_percentage_or_auto(flex.basis);
+                style.flex_basis = convert_length_percentage_or_auto(flex.basis).into();
             }
+
+            // Alignment properties
             Property::AlignContent(align, _) => {
                 use AlignContent::*;
                 style.align_content = match align {
                     align::AlignContent::ContentDistribution(distribution) => match distribution {
-                        align::ContentDistribution::SpaceBetween => SpaceBetween,
-                        align::ContentDistribution::SpaceAround => SpaceAround,
-                        align::ContentDistribution::SpaceEvenly => SpaceEvenly,
-                        align::ContentDistribution::Stretch => Stretch,
+                        align::ContentDistribution::SpaceBetween => Some(SpaceBetween),
+                        align::ContentDistribution::SpaceAround => Some(SpaceAround),
+                        align::ContentDistribution::SpaceEvenly => Some(SpaceEvenly),
+                        align::ContentDistribution::Stretch => Some(Stretch),
                     },
                     align::AlignContent::ContentPosition {
                         value: position, ..
                     } => match position {
-                        align::ContentPosition::Center => Center,
-                        align::ContentPosition::Start | align::ContentPosition::FlexStart => {
-                            FlexStart
-                        }
-                        align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd,
+                        align::ContentPosition::Center => Some(Center),
+                        align::ContentPosition::Start => Some(Start),
+                        align::ContentPosition::FlexStart => Some(FlexStart),
+                        align::ContentPosition::End => Some(End),
+                        align::ContentPosition::FlexEnd => Some(FlexEnd),
                     },
                     _ => return,
                 };
             }
             Property::JustifyContent(justify, _) => {
-                use JustifyContent::*;
+                use AlignContent::*;
                 style.justify_content = match justify {
                     align::JustifyContent::ContentDistribution(distribution) => {
                         match distribution {
-                            align::ContentDistribution::SpaceBetween => SpaceBetween,
-                            align::ContentDistribution::SpaceAround => SpaceAround,
-                            align::ContentDistribution::SpaceEvenly => SpaceEvenly,
+                            align::ContentDistribution::SpaceBetween => Some(SpaceBetween),
+                            align::ContentDistribution::SpaceAround => Some(SpaceAround),
+                            align::ContentDistribution::SpaceEvenly => Some(SpaceEvenly),
                             _ => return,
                         }
                     }
                     align::JustifyContent::ContentPosition {
                         value: position, ..
                     } => match position {
-                        align::ContentPosition::Center => Center,
-                        // start ignores -reverse flex-direction but there is no way to specify that in Taffy
-                        align::ContentPosition::Start | align::ContentPosition::FlexStart => {
-                            FlexStart
-                        }
-                        // end ignores -reverse flex-direction but there is no way to specify that in Taffy
-                        align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd,
+                        align::ContentPosition::Center => Some(Center),
+                        align::ContentPosition::Start => Some(Start),
+                        align::ContentPosition::FlexStart => Some(FlexStart),
+                        align::ContentPosition::End => Some(End),
+                        align::ContentPosition::FlexEnd => Some(FlexEnd),
                     },
                     _ => return,
                 };
             }
             Property::AlignSelf(align, _) => {
-                use AlignSelf::*;
+                use AlignItems::*;
                 style.align_self = match align {
-                    align::AlignSelf::Auto => Auto,
-                    align::AlignSelf::Stretch => Stretch,
-                    align::AlignSelf::BaselinePosition(_) => Baseline,
+                    align::AlignSelf::Auto => None,
+                    align::AlignSelf::Stretch => Some(Stretch),
+                    align::AlignSelf::BaselinePosition(_) => Some(Baseline),
                     align::AlignSelf::SelfPosition {
                         value: position, ..
                     } => match position {
-                        align::SelfPosition::Center => Center,
-                        align::SelfPosition::Start
-                        | align::SelfPosition::SelfStart
-                        | align::SelfPosition::FlexStart => FlexStart,
-                        align::SelfPosition::End
-                        | align::SelfPosition::SelfEnd
-                        | align::SelfPosition::FlexEnd => FlexEnd,
+                        align::SelfPosition::Center => Some(Center),
+                        align::SelfPosition::Start | align::SelfPosition::SelfStart => Some(Start),
+                        align::SelfPosition::FlexStart => Some(FlexStart),
+                        align::SelfPosition::End | align::SelfPosition::SelfEnd => Some(End),
+                        align::SelfPosition::FlexEnd => Some(FlexEnd),
                     },
                     _ => return,
                 };
@@ -304,15 +316,18 @@ pub fn apply_layout_attributes_cfg(
             Property::AlignItems(align, _) => {
                 use AlignItems::*;
                 style.align_items = match align {
-                    align::AlignItems::BaselinePosition(_) => Baseline,
-                    align::AlignItems::Stretch => Stretch,
+                    align::AlignItems::BaselinePosition(_) => Some(Baseline),
+                    align::AlignItems::Stretch => Some(Stretch),
                     align::AlignItems::SelfPosition {
                         value: position, ..
                     } => match position {
-                        align::SelfPosition::Center => Center,
-                        align::SelfPosition::FlexStart => FlexStart,
-                        align::SelfPosition::FlexEnd => FlexEnd,
-                        _ => return,
+                        align::SelfPosition::Center => Some(Center),
+                        align::SelfPosition::FlexStart => Some(FlexStart),
+                        align::SelfPosition::FlexEnd => Some(FlexEnd),
+                        align::SelfPosition::Start | align::SelfPosition::SelfStart => {
+                            Some(FlexEnd)
+                        }
+                        align::SelfPosition::End | align::SelfPosition::SelfEnd => Some(FlexEnd),
                     },
                     _ => return,
                 };
@@ -350,23 +365,23 @@ pub fn apply_layout_attributes_cfg(
                 };
             }
             Property::PaddingTop(padding) => {
-                style.padding.top = convert_length_percentage_or_auto(padding);
+                style.padding.top = convert_padding(padding);
             }
             Property::PaddingBottom(padding) => {
-                style.padding.bottom = convert_length_percentage_or_auto(padding);
+                style.padding.bottom = convert_padding(padding);
             }
             Property::PaddingLeft(padding) => {
-                style.padding.left = convert_length_percentage_or_auto(padding);
+                style.padding.left = convert_padding(padding);
             }
             Property::PaddingRight(padding) => {
-                style.padding.right = convert_length_percentage_or_auto(padding);
+                style.padding.right = convert_padding(padding);
             }
             Property::Padding(padding) => {
                 style.padding = Rect {
-                    top: convert_length_percentage_or_auto(padding.top),
-                    bottom: convert_length_percentage_or_auto(padding.bottom),
-                    left: convert_length_percentage_or_auto(padding.left),
-                    right: convert_length_percentage_or_auto(padding.right),
+                    top: convert_padding(padding.top),
+                    bottom: convert_padding(padding.bottom),
+                    left: convert_padding(padding.left),
+                    right: convert_padding(padding.right),
                 };
             }
             Property::Width(width) => {
@@ -386,59 +401,93 @@ pub fn apply_layout_attributes_cfg(
     }
 }
 
-fn convert_length_value(length_value: LengthValue) -> Dimension {
+fn extract_px_value(length_value: LengthValue) -> f32 {
     match length_value {
-        LengthValue::Px(value) => Dimension::Points(value),
+        LengthValue::Px(value) => value,
         _ => todo!(),
     }
 }
 
-fn convert_dimension_percentage(
+fn convert_length_percentage(
     dimension_percentage: DimensionPercentage<LengthValue>,
-) -> Dimension {
+) -> LengthPercentage {
     match dimension_percentage {
-        DimensionPercentage::Dimension(value) => convert_length_value(value),
-        DimensionPercentage::Percentage(percentage) => Dimension::Percent(percentage.0),
-        _ => todo!(),
+        DimensionPercentage::Dimension(value) => LengthPercentage::Points(extract_px_value(value)),
+        DimensionPercentage::Percentage(percentage) => LengthPercentage::Percent(percentage.0),
+        DimensionPercentage::Calc(_) => todo!(),
+    }
+}
+
+fn convert_padding(dimension_percentage: LengthPercentageOrAuto) -> LengthPercentage {
+    match dimension_percentage {
+        LengthPercentageOrAuto::Auto => unimplemented!(),
+        LengthPercentageOrAuto::LengthPercentage(lp) => match lp {
+            DimensionPercentage::Dimension(value) => {
+                LengthPercentage::Points(extract_px_value(value))
+            }
+            DimensionPercentage::Percentage(percentage) => LengthPercentage::Percent(percentage.0),
+            DimensionPercentage::Calc(_) => unimplemented!(),
+        },
     }
 }
 
 fn convert_length_percentage_or_auto(
-    length_percentage_or_auto: LengthPercentageOrAuto,
-) -> Dimension {
-    match length_percentage_or_auto {
-        LengthPercentageOrAuto::Auto => Dimension::Auto,
-        LengthPercentageOrAuto::LengthPercentage(percentage) => {
-            convert_dimension_percentage(percentage)
-        }
+    dimension_percentage: LengthPercentageOrAuto,
+) -> LengthPercentageAuto {
+    match dimension_percentage {
+        LengthPercentageOrAuto::Auto => LengthPercentageAuto::Auto,
+        LengthPercentageOrAuto::LengthPercentage(lp) => match lp {
+            DimensionPercentage::Dimension(value) => {
+                LengthPercentageAuto::Points(extract_px_value(value))
+            }
+            DimensionPercentage::Percentage(percentage) => {
+                LengthPercentageAuto::Percent(percentage.0)
+            }
+            DimensionPercentage::Calc(_) => todo!(),
+        },
+    }
+}
+
+fn convert_dimension(dimension_percentage: DimensionPercentage<LengthValue>) -> Dimension {
+    match dimension_percentage {
+        DimensionPercentage::Dimension(value) => Dimension::Points(extract_px_value(value)),
+        DimensionPercentage::Percentage(percentage) => Dimension::Percent(percentage.0),
+        DimensionPercentage::Calc(_) => todo!(),
     }
 }
 
 fn convert_border_side_width(
-    border_side_width: BorderSideWidth,
+    border_side_width: border::BorderSideWidth,
     border_width_config: &BorderWidths,
-) -> Dimension {
+) -> LengthPercentage {
     match border_side_width {
-        BorderSideWidth::Length(Length::Value(value)) => convert_length_value(value),
-        BorderSideWidth::Thick => Dimension::Points(border_width_config.thick),
-        BorderSideWidth::Medium => Dimension::Points(border_width_config.medium),
-        BorderSideWidth::Thin => Dimension::Points(border_width_config.thin),
-        _ => todo!(),
+        border::BorderSideWidth::Length(Length::Value(value)) => {
+            LengthPercentage::Points(extract_px_value(value))
+        }
+        border::BorderSideWidth::Thick => LengthPercentage::Points(border_width_config.thick),
+        border::BorderSideWidth::Medium => LengthPercentage::Points(border_width_config.medium),
+        border::BorderSideWidth::Thin => LengthPercentage::Points(border_width_config.thin),
+        border::BorderSideWidth::Length(_) => unimplemented!(),
     }
 }
 
-fn convert_gap_value(gap_value: GapValue) -> Dimension {
+fn convert_gap_value(gap_value: align::GapValue) -> LengthPercentage {
     match gap_value {
-        GapValue::LengthPercentage(dim) => convert_dimension_percentage(dim),
-        GapValue::Normal => Dimension::Auto,
+        align::GapValue::LengthPercentage(dim) => convert_length_percentage(dim),
+        align::GapValue::Normal => LengthPercentage::Points(0.0),
     }
 }
 
 fn convert_size(size: size::Size) -> Dimension {
     match size {
         size::Size::Auto => Dimension::Auto,
-        size::Size::LengthPercentage(length) => convert_dimension_percentage(length),
-        _ => todo!(),
+        size::Size::LengthPercentage(length) => convert_dimension(length),
+        size::Size::MinContent(_) => Dimension::Auto, // Unimplemented, so default auto
+        size::Size::MaxContent(_) => Dimension::Auto, // Unimplemented, so default auto
+        size::Size::FitContent(_) => Dimension::Auto, // Unimplemented, so default auto
+        size::Size::FitContentFunction(_) => Dimension::Auto, // Unimplemented, so default auto
+        size::Size::Stretch(_) => Dimension::Auto,    // Unimplemented, so default auto
+        size::Size::Contain => Dimension::Auto,       // Unimplemented, so default auto
     }
 }
 

packages/rink/Cargo.toml

@@ -22,7 +22,7 @@ crossterm = "0.23.0"
 anyhow = "1.0.42"
 tokio = { version = "1.15.0", features = ["full"] }
 futures = "0.3.19"
-taffy = "0.2.1"
+taffy = "0.3.12"
 smallvec = "1.6"
 rustc-hash = "1.1.0"
 anymap = "1.0.0-beta.2"