From 7343d3904860d3cc72108cfcb4e04f49cb6348af Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Thu, 7 Dec 2023 14:39:14 -0800 Subject: [PATCH 1/3] Make positionAbsoluteChild the sole place that matters when determining absolute node's position (#41684) Summary: X-link: https://github.com/facebook/yoga/pull/1481 Absolute nodes can be laid out by themselves and do not have to care about what is happening to their siblings. Because of this we can make `positionAbsoluteChild` the sole place where we handle this logic. Right now that is scattered around algorithm with many `if (child is absolute)` cases everywhere. This makes implementing position static a lot harder since we are relying on the CB to do all this work, not the parent. With this change the only time we set position for an absolute node and it matter (i.e. not overwritten) is in `positionAbsoluteChild` Reviewed By: NickGerleman Differential Revision: D51290723 --- .../java/com/facebook/yoga/YogaErrata.java | 2 + .../ReactCommon/yoga/yoga/YGEnums.cpp | 2 + .../ReactCommon/yoga/yoga/YGEnums.h | 1 + .../yoga/yoga/algorithm/AbsoluteLayout.cpp | 212 ++++++++++++++++-- .../yoga/yoga/algorithm/CalculateLayout.h | 17 +- .../ReactCommon/yoga/yoga/enums/Errata.h | 1 + 6 files changed, 210 insertions(+), 25 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaErrata.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaErrata.java index 99f53f5a8187cb..04307de408c503 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaErrata.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaErrata.java @@ -14,6 +14,7 @@ public enum YogaErrata { STRETCH_FLEX_BASIS(1), STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION(2), POSITION_STATIC_BEHAVES_LIKE_RELATIVE(4), + ABSOLUTE_POSITIONING(8), ALL(2147483647), CLASSIC(2147483646); @@ -33,6 +34,7 @@ public static YogaErrata fromInt(int value) { case 1: return STRETCH_FLEX_BASIS; case 2: return STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION; case 4: return POSITION_STATIC_BEHAVES_LIKE_RELATIVE; + case 8: return ABSOLUTE_POSITIONING; case 2147483647: return ALL; case 2147483646: return CLASSIC; default: throw new IllegalArgumentException("Unknown enum value: " + value); diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp index 04fd7be9336bec..d14db83cbf817c 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp @@ -99,6 +99,8 @@ const char* YGErrataToString(const YGErrata value) { return "starting-ending-edge-from-flex-direction"; case YGErrataPositionStaticBehavesLikeRelative: return "position-static-behaves-like-relative"; + case YGErrataAbsolutePositioning: + return "absolute-positioning"; case YGErrataAll: return "all"; case YGErrataClassic: diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h index e0454394dae4d8..e6076decefbc81 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h +++ b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h @@ -58,6 +58,7 @@ YG_ENUM_DECL( YGErrataStretchFlexBasis = 1, YGErrataStartingEndingEdgeFromFlexDirection = 2, YGErrataPositionStaticBehavesLikeRelative = 4, + YGErrataAbsolutePositioning = 8, YGErrataAll = 2147483647, YGErrataClassic = 2147483646) YG_DEFINE_ENUM_FLAG_OPERATORS(YGErrata) diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp index bf3a3354352260..22574cf805522d 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp @@ -13,23 +13,88 @@ namespace facebook::yoga { -/* - * Absolutely positioned nodes do not participate in flex layout and thus their - * positions can be determined independently from the rest of their siblings. - * For each axis there are essentially two cases: - * - * 1) The node has insets defined. In this case we can just use these to - * determine the position of the node. - * 2) The node does not have insets defined. In this case we look at the style - * of the parent to position the node. Things like justify content and - * align content will move absolute children around. If none of these - * special properties are defined, the child is positioned at the start - * (defined by flex direction) of the leading flex line. - * - * This function does that positioning for the given axis. The spec has more - * information on this topic: https://www.w3.org/TR/css-flexbox-1/#abspos-items - */ -static void positionAbsoluteChild( +static void justifyAbsoluteChild( + const yoga::Node* const parent, + yoga::Node* child, + const Direction direction, + const FlexDirection mainAxis, + const float containingBlockWidth) { + const Justify parentJustifyContent = parent->getStyle().justifyContent(); + switch (parentJustifyContent) { + case Justify::FlexStart: + case Justify::SpaceBetween: + child->setLayoutPosition( + child->getFlexStartMargin(mainAxis, direction, containingBlockWidth) + + parent->getFlexStartBorder(mainAxis, direction), + flexStartEdge(mainAxis)); + break; + case Justify::FlexEnd: + child->setLayoutPosition( + (parent->getLayout().measuredDimension(dimension(mainAxis)) - + child->getLayout().measuredDimension(dimension(mainAxis))), + flexStartEdge(mainAxis)); + break; + case Justify::Center: + case Justify::SpaceAround: + case Justify::SpaceEvenly: + child->setLayoutPosition( + (parent->getLayout().measuredDimension(dimension(mainAxis)) - + child->getLayout().measuredDimension(dimension(mainAxis))) / + 2.0f, + flexStartEdge(mainAxis)); + break; + } +} + +static void alignAbsoluteChild( + const yoga::Node* const parent, + yoga::Node* child, + const Direction direction, + const FlexDirection crossAxis, + const float containingBlockWidth) { + Align itemAlign = resolveChildAlignment(parent, child); + const Wrap parentWrap = parent->getStyle().flexWrap(); + if (parentWrap == Wrap::WrapReverse) { + if (itemAlign == Align::FlexEnd) { + itemAlign = Align::FlexStart; + } else if (itemAlign != Align::Center) { + itemAlign = Align::FlexEnd; + } + } + + switch (itemAlign) { + case Align::Auto: + case Align::FlexStart: + case Align::Baseline: + case Align::SpaceAround: + case Align::SpaceBetween: + case Align::Stretch: + case Align::SpaceEvenly: + child->setLayoutPosition( + parent->getFlexStartBorder(crossAxis, direction) + + child->getFlexStartMargin( + crossAxis, direction, containingBlockWidth), + flexStartEdge(crossAxis)); + break; + case Align::FlexEnd: + child->setLayoutPosition( + (parent->getLayout().measuredDimension(dimension(crossAxis)) - + child->getLayout().measuredDimension(dimension(crossAxis))), + flexStartEdge(crossAxis)); + break; + case Align::Center: + child->setLayoutPosition( + (parent->getLayout().measuredDimension(dimension(crossAxis)) - + child->getLayout().measuredDimension(dimension(crossAxis))) / + 2.0f, + flexStartEdge(crossAxis)); + break; + } +} + +// To ensure no breaking changes, we preserve the legacy way of positioning +// absolute children and determine if we should use it using an errata. +static void positionAbsoluteChildLegacy( const yoga::Node* const containingNode, const yoga::Node* const parent, yoga::Node* child, @@ -93,6 +158,109 @@ static void positionAbsoluteChild( } } +/* + * Absolutely positioned nodes do not participate in flex layout and thus their + * positions can be determined independently from the rest of their siblings. + * For each axis there are essentially two cases: + * + * 1) The node has insets defined. In this case we can just use these to + * determine the position of the node. + * 2) The node does not have insets defined. In this case we look at the style + * of the parent to position the node. Things like justify content and + * align content will move absolute children around. If none of these + * special properties are defined, the child is positioned at the start + * (defined by flex direction) of the leading flex line. + * + * This function does that positioning for the given axis. The spec has more + * information on this topic: https://www.w3.org/TR/css-flexbox-1/#abspos-items + */ +static void positionAbsoluteChildImpl( + const yoga::Node* const containingNode, + const yoga::Node* const parent, + yoga::Node* child, + const Direction direction, + const FlexDirection axis, + const bool isMainAxis, + const float containingBlockWidth, + const float containingBlockHeight) { + const bool isAxisRow = isRow(axis); + const float containingBlockSize = + isAxisRow ? containingBlockWidth : containingBlockHeight; + + // The inline-start position takes priority over the end position in the case + // that they are both set and the node has a fixed width. Thus we only have 2 + // cases here: if inline-start is defined and if inline-end is defined. + // + // Despite checking inline-start to honor prioritization of insets, we write + // to the flex-start edge because this algorithm works by positioning on the + // flex-start edge and then filling in the flex-end direction at the end if + // necessary. + if (child->isInlineStartPositionDefined(axis, direction)) { + const float positionRelativeToInlineStart = + child->getInlineStartPosition( + axis, + direction, + containingNode->getLayout().measuredDimension(dimension(axis))) + + containingNode->getInlineStartBorder(axis, direction) + + child->getInlineStartMargin(axis, direction, containingBlockSize); + const float positionRelativeToFlexStart = + inlineStartEdge(axis, direction) != flexStartEdge(axis) + ? getPositionOfOppositeEdge( + positionRelativeToInlineStart, axis, containingNode, child) + : positionRelativeToInlineStart; + + child->setLayoutPosition(positionRelativeToFlexStart, flexStartEdge(axis)); + } else if (child->isInlineEndPositionDefined(axis, direction)) { + const float positionRelativeToInlineStart = + containingNode->getLayout().measuredDimension(dimension(axis)) - + child->getLayout().measuredDimension(dimension(axis)) - + containingNode->getInlineEndBorder(axis, direction) - + child->getInlineEndMargin(axis, direction, containingBlockSize) - + child->getInlineEndPosition(axis, direction, containingBlockSize); + const float positionRelativeToFlexStart = + inlineStartEdge(axis, direction) != flexStartEdge(axis) + ? getPositionOfOppositeEdge( + positionRelativeToInlineStart, axis, containingNode, child) + : positionRelativeToInlineStart; + + child->setLayoutPosition(positionRelativeToFlexStart, flexStartEdge(axis)); + } else { + isMainAxis ? justifyAbsoluteChild( + parent, child, direction, axis, containingBlockWidth) + : alignAbsoluteChild( + parent, child, direction, axis, containingBlockWidth); + } +} + +static void positionAbsoluteChild( + const yoga::Node* const containingNode, + const yoga::Node* const parent, + yoga::Node* child, + const Direction direction, + const FlexDirection axis, + const bool isMainAxis, + const float containingBlockWidth, + const float containingBlockHeight) { + child->hasErrata(Errata::AbsolutePositioning) ? positionAbsoluteChildLegacy( + containingNode, + parent, + child, + direction, + axis, + isMainAxis, + containingBlockWidth, + containingBlockHeight) + : positionAbsoluteChildImpl( + containingNode, + parent, + child, + direction, + axis, + isMainAxis, + containingBlockWidth, + containingBlockHeight); +} + void layoutAbsoluteChild( const yoga::Node* const containingNode, const yoga::Node* const node, @@ -155,8 +323,8 @@ void layoutAbsoluteChild( .unwrap() + marginColumn; } else { - // If the child doesn't have a specified height, compute the height based on - // the top/bottom offsets if they're defined. + // If the child doesn't have a specified height, compute the height based + // on the top/bottom offsets if they're defined. if (child->isFlexStartPositionDefined(FlexDirection::Column, direction) && child->isFlexEndPositionDefined(FlexDirection::Column, direction)) { childHeight = @@ -203,9 +371,9 @@ void layoutAbsoluteChild( : SizingMode::StretchFit; // If the size of the owner is defined then try to constrain the absolute - // child to that size as well. This allows text within the absolute child to - // wrap to the size of its owner. This is the same behavior as many browsers - // implement. + // child to that size as well. This allows text within the absolute child + // to wrap to the size of its owner. This is the same behavior as many + // browsers implement. if (!isMainAxisRow && yoga::isUndefined(childWidth) && widthMode != SizingMode::MaxContent && yoga::isDefined(containingBlockWidth) && containingBlockWidth > 0) { diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.h b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.h index 26f4aa47a9dc6d..955cbdbb594426 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.h +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.h @@ -35,14 +35,25 @@ bool calculateLayoutInternal( const uint32_t depth, const uint32_t generationCount); +// Given an offset to an edge, returns the offset to the opposite edge on the +// same axis. This assumes that the width/height of both nodes is determined at +// this point. +inline float getPositionOfOppositeEdge( + float position, + FlexDirection axis, + const yoga::Node* const containingNode, + const yoga::Node* const node) { + return containingNode->getLayout().measuredDimension(dimension(axis)) - + node->getLayout().measuredDimension(dimension(axis)) - position; +} + inline void setChildTrailingPosition( const yoga::Node* const node, yoga::Node* const child, const FlexDirection axis) { - const float size = child->getLayout().measuredDimension(dimension(axis)); child->setLayoutPosition( - node->getLayout().measuredDimension(dimension(axis)) - size - - child->getLayout().position(flexStartEdge(axis)), + getPositionOfOppositeEdge( + child->getLayout().position(flexStartEdge(axis)), axis, node, child), flexEndEdge(axis)); } diff --git a/packages/react-native/ReactCommon/yoga/yoga/enums/Errata.h b/packages/react-native/ReactCommon/yoga/yoga/enums/Errata.h index 134f5fffc012fe..5bda0c0b9c7b57 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/enums/Errata.h +++ b/packages/react-native/ReactCommon/yoga/yoga/enums/Errata.h @@ -20,6 +20,7 @@ enum class Errata : uint32_t { StretchFlexBasis = YGErrataStretchFlexBasis, StartingEndingEdgeFromFlexDirection = YGErrataStartingEndingEdgeFromFlexDirection, PositionStaticBehavesLikeRelative = YGErrataPositionStaticBehavesLikeRelative, + AbsolutePositioning = YGErrataAbsolutePositioning, All = YGErrataAll, Classic = YGErrataClassic, }; From 8db640e47db72224608f3e37d71256c63d3133bf Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Thu, 7 Dec 2023 14:39:14 -0800 Subject: [PATCH 2/3] Make position static behave like position static (#41685) Summary: X-link: https://github.com/facebook/yoga/pull/1482 This is the final step (that I know of) to get the core features of static working. Here we turn on all of the tests and pass down the correct owner size for the call to `calculateLayoutInternal` that is in `layoutAbsoluteChild` Reviewed By: NickGerleman Differential Revision: D51293606 --- .../ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp index 22574cf805522d..cbccf07b9f7246 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp @@ -388,8 +388,8 @@ void layoutAbsoluteChild( direction, childWidthSizingMode, childHeightSizingMode, - childWidth, - childHeight, + containingBlockWidth, + containingBlockHeight, false, LayoutPassReason::kAbsMeasureChild, layoutMarkerData, @@ -408,8 +408,8 @@ void layoutAbsoluteChild( direction, SizingMode::StretchFit, SizingMode::StretchFit, - childWidth, - childHeight, + containingBlockWidth, + containingBlockHeight, true, LayoutPassReason::kAbsLayout, layoutMarkerData, From d0976f0a745350caac64e85a498f6cb972604ad7 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Thu, 7 Dec 2023 14:39:14 -0800 Subject: [PATCH 3/3] Fix issue where percentages were off of the border box, not padding box (#41686) Summary: X-link: https://github.com/facebook/yoga/pull/1485 The size of the containing block is the size of the padding box of the containing node for absolute nodes. We were looking at `containingNode->getLayout().measuredDimension(Dimension::Width)` which is the border box. So we need to subtract the border from this. Added a test that was failing before this change as well Reviewed By: NickGerleman Differential Revision: D51330526 --- .../ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp | 9 ++++++--- .../react-native/ReactCommon/yoga/yoga/node/Node.cpp | 5 +++++ packages/react-native/ReactCommon/yoga/yoga/node/Node.h | 1 + 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp index cbccf07b9f7246..d421db548746de 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp @@ -25,7 +25,8 @@ static void justifyAbsoluteChild( case Justify::SpaceBetween: child->setLayoutPosition( child->getFlexStartMargin(mainAxis, direction, containingBlockWidth) + - parent->getFlexStartBorder(mainAxis, direction), + parent->getLayout().border(flexStartEdge(mainAxis)) + + parent->getLayout().padding(flexStartEdge(mainAxis)), flexStartEdge(mainAxis)); break; case Justify::FlexEnd: @@ -458,8 +459,10 @@ void layoutAbsoluteDescendants( containingNode, currentNode, child, - containingNode->getLayout().measuredDimension(Dimension::Width), - containingNode->getLayout().measuredDimension(Dimension::Height), + containingNode->getLayout().measuredDimension(Dimension::Width) - + containingNode->getBorderForAxis(FlexDirection::Row), + containingNode->getLayout().measuredDimension(Dimension::Height) - + containingNode->getBorderForAxis(FlexDirection::Column), widthSizingMode, currentNodeDirection, layoutMarkerData, diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp index f26a588e174cc7..36eefbb52518dd 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp @@ -377,6 +377,11 @@ float Node::getFlexEndPaddingAndBorder( getFlexEndBorder(axis, direction); } +float Node::getBorderForAxis(FlexDirection axis) const { + return getInlineStartBorder(axis, Direction::LTR) + + getInlineEndBorder(axis, Direction::LTR); +} + float Node::getMarginForAxis(FlexDirection axis, float widthSize) const { // The total margin for a given axis does not depend on the direction // so hardcoding LTR here to avoid piping direction to this function diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h index aa60b3d8303a70..bbde5eac362d0f 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h +++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h @@ -287,6 +287,7 @@ class YG_EXPORT Node : public ::YGNode { FlexDirection axis, Direction direction, float widthSize) const; + float getBorderForAxis(FlexDirection axis) const; float getMarginForAxis(FlexDirection axis, float widthSize) const; float getGapForAxis(FlexDirection axis) const; // Setters