From 2b0a86701ed50bd0b376cdad178ec2916e90fd3b Mon Sep 17 00:00:00 2001 From: Nico Burns Date: Tue, 16 May 2023 10:46:13 +0100 Subject: [PATCH] Upgrade Taffy to v0.3.12] --- packages/native-core/Cargo.toml | 2 +- packages/native-core/src/layout_attributes.rs | 263 +++++++++++------- packages/rink/Cargo.toml | 2 +- 3 files changed, 158 insertions(+), 109 deletions(-) diff --git a/packages/native-core/Cargo.toml b/packages/native-core/Cargo.toml index c9be2f27d..7832a33ae 100644 --- a/packages/native-core/Cargo.toml +++ b/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" diff --git a/packages/native-core/src/layout_attributes.rs b/packages/native-core/src/layout_attributes.rs index 84fd61ac4..83e2ae906 100644 --- a/packages/native-core/src/layout_attributes.rs +++ b/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, - [x] pub justify_content: JustifyContent, -- [x] pub position: Rect, +- [x] pub inset: Rect, - [x] pub border: Rect, - [ ] pub size: Size, ----> 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, -) -> 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) -> 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 } } diff --git a/packages/rink/Cargo.toml b/packages/rink/Cargo.toml index 2f08eb720..3e19048dd 100644 --- a/packages/rink/Cargo.toml +++ b/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"