swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade Taffy to v0.3.12]

Browse Source
This commit is contained in:
Nico Burns committed 2023-05-16 10:46:13 +01:00
1 parent 6acec6f020
commit 2b0a86701e
3 files changed
+158 -109
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/native-core/Cargo.toml
+1 -1
View File
@@ -14,7 +14,7 @@ keywords = ["dom", "ui", "gui", "react"]
dioxus-core = { path = "../core", version = "^0.3.0", optional = true } dioxus-core = { path = "../core", version = "^0.3.0", optional = true }
keyboard-types = "0.6.2" keyboard-types = "0.6.2"
taffy = "0.2.1" taffy = "0.3.12"
smallvec = "1.6" smallvec = "1.6"
rustc-hash = "1.1.0" rustc-hash = "1.1.0"
anymap = "1.0.0-beta.2" anymap = "1.0.0-beta.2"
packages/native-core/src/layout_attributes.rs
+156 -107
View File
@@ -2,7 +2,7 @@
/* /*
- [ ] pub display: Display, ----> taffy doesnt support all display types - [ ] 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 direction: Direction,
- [x] pub flex_direction: FlexDirection, - [x] pub flex_direction: FlexDirection,
@@ -21,7 +21,7 @@
- [x] pub padding: Rect<Dimension>, - [x] pub padding: Rect<Dimension>,
- [x] pub justify_content: JustifyContent, - [x] pub justify_content: JustifyContent,
- [x] pub position: Rect<Dimension>, - [x] pub inset: Rect<Dimension>,
- [x] pub border: Rect<Dimension>, - [x] pub border: Rect<Dimension>,
- [ ] pub size: Size<Dimension>, ----> seems to only be relevant for input? - [ ] pub size: Size<Dimension>, ----> seems to only be relevant for input?
@@ -32,9 +32,9 @@
*/ */
use lightningcss::properties::border::LineStyle; use lightningcss::properties::border::LineStyle;
use lightningcss::properties::{align, display, flex, position, size}; use lightningcss::properties::{align, border, display, flex, position, size};
use lightningcss::{ use lightningcss::{
properties::{align::GapValue, border::BorderSideWidth, Property, PropertyId}, properties::{Property, PropertyId},
stylesheet::ParserOptions, stylesheet::ParserOptions,
traits::Parse, traits::Parse,
values::{ values::{
@@ -45,7 +45,7 @@ use lightningcss::{
}; };
use taffy::{ use taffy::{
prelude::*, prelude::*,
style::{FlexDirection, PositionType}, style::{FlexDirection, Position},
}; };
/// Default values for layout attributes /// Default values for layout attributes
@@ -103,25 +103,23 @@ pub fn apply_layout_attributes_cfg(
_ => (), _ => (),
}, },
Property::Position(position) => { Property::Position(position) => {
style.position_type = match position { style.position = match position {
position::Position::Relative => PositionType::Relative, position::Position::Relative => Position::Relative,
position::Position::Absolute => PositionType::Absolute, position::Position::Absolute => Position::Absolute,
_ => return, _ => 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) => { Property::Bottom(bottom) => {
style.position.bottom = convert_length_percentage_or_auto(bottom) style.inset.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)
} }
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) => { Property::Inset(inset) => {
style.position.top = convert_length_percentage_or_auto(inset.top); style.inset.top = convert_length_percentage_or_auto(inset.top);
style.position.bottom = convert_length_percentage_or_auto(inset.bottom); style.inset.bottom = convert_length_percentage_or_auto(inset.bottom);
style.position.left = convert_length_percentage_or_auto(inset.left); style.inset.left = convert_length_percentage_or_auto(inset.left);
style.position.right = convert_length_percentage_or_auto(inset.right); style.inset.right = convert_length_percentage_or_auto(inset.right);
} }
Property::BorderTopWidth(width) => { Property::BorderTopWidth(width) => {
style.border.top = convert_border_side_width(width, &config.border_widths); 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) => { Property::BorderTopStyle(line_style) => {
if line_style != LineStyle::None { if line_style != LineStyle::None {
style.border.top = style.border.top = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
} }
Property::BorderBottomStyle(line_style) => { Property::BorderBottomStyle(line_style) => {
if line_style != LineStyle::None { if line_style != LineStyle::None {
style.border.bottom = style.border.bottom = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
} }
Property::BorderLeftStyle(line_style) => { Property::BorderLeftStyle(line_style) => {
if line_style != LineStyle::None { if line_style != LineStyle::None {
style.border.left = style.border.left = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
} }
Property::BorderRightStyle(line_style) => { Property::BorderRightStyle(line_style) => {
if line_style != LineStyle::None { if line_style != LineStyle::None {
style.border.right = style.border.right = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
} }
Property::BorderStyle(styles) => { Property::BorderStyle(styles) => {
if styles.top != LineStyle::None { if styles.top != LineStyle::None {
style.border.top = style.border.top = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
if styles.bottom != LineStyle::None { if styles.bottom != LineStyle::None {
style.border.bottom = style.border.bottom = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
if styles.left != LineStyle::None { if styles.left != LineStyle::None {
style.border.left = style.border.left = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
if styles.right != LineStyle::None { if styles.right != LineStyle::None {
style.border.right = style.border.right = convert_border_side_width(
convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); border::BorderSideWidth::Medium,
&config.border_widths,
);
} }
} }
Property::FlexDirection(flex_direction, _) => { Property::FlexDirection(flex_direction, _) => {
@@ -228,75 +242,73 @@ pub fn apply_layout_attributes_cfg(
style.flex_shrink = shrink; style.flex_shrink = shrink;
} }
Property::FlexBasis(basis, _) => { 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, _) => { Property::Flex(flex, _) => {
style.flex_grow = flex.grow; style.flex_grow = flex.grow;
style.flex_shrink = flex.shrink; 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, _) => { Property::AlignContent(align, _) => {
use AlignContent::*; use AlignContent::*;
style.align_content = match align { style.align_content = match align {
align::AlignContent::ContentDistribution(distribution) => match distribution { align::AlignContent::ContentDistribution(distribution) => match distribution {
align::ContentDistribution::SpaceBetween => SpaceBetween, align::ContentDistribution::SpaceBetween => Some(SpaceBetween),
align::ContentDistribution::SpaceAround => SpaceAround, align::ContentDistribution::SpaceAround => Some(SpaceAround),
align::ContentDistribution::SpaceEvenly => SpaceEvenly, align::ContentDistribution::SpaceEvenly => Some(SpaceEvenly),
align::ContentDistribution::Stretch => Stretch, align::ContentDistribution::Stretch => Some(Stretch),
}, },
align::AlignContent::ContentPosition { align::AlignContent::ContentPosition {
value: position, .. value: position, ..
} => match position { } => match position {
align::ContentPosition::Center => Center, align::ContentPosition::Center => Some(Center),
align::ContentPosition::Start | align::ContentPosition::FlexStart => { align::ContentPosition::Start => Some(Start),
FlexStart align::ContentPosition::FlexStart => Some(FlexStart),
} align::ContentPosition::End => Some(End),
align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd, align::ContentPosition::FlexEnd => Some(FlexEnd),
}, },
_ => return, _ => return,
}; };
} }
Property::JustifyContent(justify, _) => { Property::JustifyContent(justify, _) => {
use JustifyContent::*; use AlignContent::*;
style.justify_content = match justify { style.justify_content = match justify {
align::JustifyContent::ContentDistribution(distribution) => { align::JustifyContent::ContentDistribution(distribution) => {
match distribution { match distribution {
align::ContentDistribution::SpaceBetween => SpaceBetween, align::ContentDistribution::SpaceBetween => Some(SpaceBetween),
align::ContentDistribution::SpaceAround => SpaceAround, align::ContentDistribution::SpaceAround => Some(SpaceAround),
align::ContentDistribution::SpaceEvenly => SpaceEvenly, align::ContentDistribution::SpaceEvenly => Some(SpaceEvenly),
_ => return, _ => return,
} }
} }
align::JustifyContent::ContentPosition { align::JustifyContent::ContentPosition {
value: position, .. value: position, ..
} => match position { } => match position {
align::ContentPosition::Center => Center, align::ContentPosition::Center => Some(Center),
// start ignores -reverse flex-direction but there is no way to specify that in Taffy align::ContentPosition::Start => Some(Start),
align::ContentPosition::Start | align::ContentPosition::FlexStart => { align::ContentPosition::FlexStart => Some(FlexStart),
FlexStart align::ContentPosition::End => Some(End),
} align::ContentPosition::FlexEnd => Some(FlexEnd),
// end ignores -reverse flex-direction but there is no way to specify that in Taffy
align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd,
}, },
_ => return, _ => return,
}; };
} }
Property::AlignSelf(align, _) => { Property::AlignSelf(align, _) => {
use AlignSelf::*; use AlignItems::*;
style.align_self = match align { style.align_self = match align {
align::AlignSelf::Auto => Auto, align::AlignSelf::Auto => None,
align::AlignSelf::Stretch => Stretch, align::AlignSelf::Stretch => Some(Stretch),
align::AlignSelf::BaselinePosition(_) => Baseline, align::AlignSelf::BaselinePosition(_) => Some(Baseline),
align::AlignSelf::SelfPosition { align::AlignSelf::SelfPosition {
value: position, .. value: position, ..
} => match position { } => match position {
align::SelfPosition::Center => Center, align::SelfPosition::Center => Some(Center),
align::SelfPosition::Start align::SelfPosition::Start | align::SelfPosition::SelfStart => Some(Start),
| align::SelfPosition::SelfStart align::SelfPosition::FlexStart => Some(FlexStart),
| align::SelfPosition::FlexStart => FlexStart, align::SelfPosition::End | align::SelfPosition::SelfEnd => Some(End),
align::SelfPosition::End align::SelfPosition::FlexEnd => Some(FlexEnd),
| align::SelfPosition::SelfEnd
| align::SelfPosition::FlexEnd => FlexEnd,
}, },
_ => return, _ => return,
}; };
@@ -304,15 +316,18 @@ pub fn apply_layout_attributes_cfg(
Property::AlignItems(align, _) => { Property::AlignItems(align, _) => {
use AlignItems::*; use AlignItems::*;
style.align_items = match align { style.align_items = match align {
align::AlignItems::BaselinePosition(_) => Baseline, align::AlignItems::BaselinePosition(_) => Some(Baseline),
align::AlignItems::Stretch => Stretch, align::AlignItems::Stretch => Some(Stretch),
align::AlignItems::SelfPosition { align::AlignItems::SelfPosition {
value: position, .. value: position, ..
} => match position { } => match position {
align::SelfPosition::Center => Center, align::SelfPosition::Center => Some(Center),
align::SelfPosition::FlexStart => FlexStart, align::SelfPosition::FlexStart => Some(FlexStart),
align::SelfPosition::FlexEnd => FlexEnd, align::SelfPosition::FlexEnd => Some(FlexEnd),
_ => return, align::SelfPosition::Start | align::SelfPosition::SelfStart => {
Some(FlexEnd)
}
align::SelfPosition::End | align::SelfPosition::SelfEnd => Some(FlexEnd),
}, },
_ => return, _ => return,
}; };
@@ -350,23 +365,23 @@ pub fn apply_layout_attributes_cfg(
}; };
} }
Property::PaddingTop(padding) => { Property::PaddingTop(padding) => {
style.padding.top = convert_length_percentage_or_auto(padding); style.padding.top = convert_padding(padding);
} }
Property::PaddingBottom(padding) => { Property::PaddingBottom(padding) => {
style.padding.bottom = convert_length_percentage_or_auto(padding); style.padding.bottom = convert_padding(padding);
} }
Property::PaddingLeft(padding) => { Property::PaddingLeft(padding) => {
style.padding.left = convert_length_percentage_or_auto(padding); style.padding.left = convert_padding(padding);
} }
Property::PaddingRight(padding) => { Property::PaddingRight(padding) => {
style.padding.right = convert_length_percentage_or_auto(padding); style.padding.right = convert_padding(padding);
} }
Property::Padding(padding) => { Property::Padding(padding) => {
style.padding = Rect { style.padding = Rect {
top: convert_length_percentage_or_auto(padding.top), top: convert_padding(padding.top),
bottom: convert_length_percentage_or_auto(padding.bottom), bottom: convert_padding(padding.bottom),
left: convert_length_percentage_or_auto(padding.left), left: convert_padding(padding.left),
right: convert_length_percentage_or_auto(padding.right), right: convert_padding(padding.right),
}; };
} }
Property::Width(width) => { 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 { match length_value {
LengthValue::Px(value) => Dimension::Points(value), LengthValue::Px(value) => value,
_ => todo!(), _ => todo!(),
} }
} }
fn convert_dimension_percentage( fn convert_length_percentage(
dimension_percentage: DimensionPercentage<LengthValue>, dimension_percentage: DimensionPercentage<LengthValue>,
) -> Dimension { ) -> LengthPercentage {
match dimension_percentage { match dimension_percentage {
DimensionPercentage::Dimension(value) => convert_length_value(value), DimensionPercentage::Dimension(value) => LengthPercentage::Points(extract_px_value(value)),
DimensionPercentage::Percentage(percentage) => Dimension::Percent(percentage.0), DimensionPercentage::Percentage(percentage) => LengthPercentage::Percent(percentage.0),
_ => todo!(), 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( fn convert_length_percentage_or_auto(
length_percentage_or_auto: LengthPercentageOrAuto, dimension_percentage: LengthPercentageOrAuto,
) -> Dimension { ) -> LengthPercentageAuto {
match length_percentage_or_auto { match dimension_percentage {
LengthPercentageOrAuto::Auto => Dimension::Auto, LengthPercentageOrAuto::Auto => LengthPercentageAuto::Auto,
LengthPercentageOrAuto::LengthPercentage(percentage) => { LengthPercentageOrAuto::LengthPercentage(lp) => match lp {
convert_dimension_percentage(percentage) 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( fn convert_border_side_width(
border_side_width: BorderSideWidth, border_side_width: border::BorderSideWidth,
border_width_config: &BorderWidths, border_width_config: &BorderWidths,
) -> Dimension { ) -> LengthPercentage {
match border_side_width { match border_side_width {
BorderSideWidth::Length(Length::Value(value)) => convert_length_value(value), border::BorderSideWidth::Length(Length::Value(value)) => {
BorderSideWidth::Thick => Dimension::Points(border_width_config.thick), LengthPercentage::Points(extract_px_value(value))
BorderSideWidth::Medium => Dimension::Points(border_width_config.medium), }
BorderSideWidth::Thin => Dimension::Points(border_width_config.thin), border::BorderSideWidth::Thick => LengthPercentage::Points(border_width_config.thick),
_ => todo!(), 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 { match gap_value {
GapValue::LengthPercentage(dim) => convert_dimension_percentage(dim), align::GapValue::LengthPercentage(dim) => convert_length_percentage(dim),
GapValue::Normal => Dimension::Auto, align::GapValue::Normal => LengthPercentage::Points(0.0),
} }
} }
fn convert_size(size: size::Size) -> Dimension { fn convert_size(size: size::Size) -> Dimension {
match size { match size {
size::Size::Auto => Dimension::Auto, size::Size::Auto => Dimension::Auto,
size::Size::LengthPercentage(length) => convert_dimension_percentage(length), size::Size::LengthPercentage(length) => convert_dimension(length),
_ => todo!(), 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
+1 -1
View File
@@ -22,7 +22,7 @@ crossterm = "0.23.0"
anyhow = "1.0.42" anyhow = "1.0.42"
tokio = { version = "1.15.0", features = ["full"] } tokio = { version = "1.15.0", features = ["full"] }
futures = "0.3.19" futures = "0.3.19"
taffy = "0.2.1" taffy = "0.3.12"
smallvec = "1.6" smallvec = "1.6"
rustc-hash = "1.1.0" rustc-hash = "1.1.0"
anymap = "1.0.0-beta.2" anymap = "1.0.0-beta.2"