From a81522c165114fba6be831a1f04dd9030d5051a2 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Tue, 5 Dec 2023 13:11:01 -0800 Subject: [PATCH] Make positionAbsoluteChild the sole place that matters when determining absolute node's position (#1481) Summary: X-link: https://github.com/facebook/react-native/pull/41684 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 --- enums.py | 3 + java/com/facebook/yoga/YogaErrata.java | 2 + javascript/src/generated/YGEnums.ts | 2 + yoga/YGEnums.cpp | 2 + yoga/YGEnums.h | 1 + yoga/algorithm/AbsoluteLayout.cpp | 212 ++++++++++++++++++++++--- yoga/algorithm/CalculateLayout.h | 17 +- yoga/enums/Errata.h | 1 + 8 files changed, 215 insertions(+), 25 deletions(-) diff --git a/enums.py b/enums.py index c7c3b29b0e..7e2a918edc 100755 --- a/enums.py +++ b/enums.py @@ -72,6 +72,9 @@ ("StartingEndingEdgeFromFlexDirection", 1 << 1), # Position: static behaves like position: relative within Yoga ("PositionStaticBehavesLikeRelative", 1 << 2), + # Positioning of absolute nodes will have various bugs related to + # justification, alignment, and insets + ("AbsolutePositioning", 1 << 3), # Enable all incorrect behavior (preserve compatibility) ("All", 0x7FFFFFFF), # Enable all errata except for "StretchFlexBasis" (Defaults behavior diff --git a/java/com/facebook/yoga/YogaErrata.java b/java/com/facebook/yoga/YogaErrata.java index 99f53f5a81..04307de408 100644 --- a/java/com/facebook/yoga/YogaErrata.java +++ b/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/javascript/src/generated/YGEnums.ts b/javascript/src/generated/YGEnums.ts index af4dc5f46f..2c7a6a57eb 100644 --- a/javascript/src/generated/YGEnums.ts +++ b/javascript/src/generated/YGEnums.ts @@ -52,6 +52,7 @@ export enum Errata { StretchFlexBasis = 1, StartingEndingEdgeFromFlexDirection = 2, PositionStaticBehavesLikeRelative = 4, + AbsolutePositioning = 8, All = 2147483647, Classic = 2147483646, } @@ -164,6 +165,7 @@ const constants = { ERRATA_STRETCH_FLEX_BASIS: Errata.StretchFlexBasis, ERRATA_STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION: Errata.StartingEndingEdgeFromFlexDirection, ERRATA_POSITION_STATIC_BEHAVES_LIKE_RELATIVE: Errata.PositionStaticBehavesLikeRelative, + ERRATA_ABSOLUTE_POSITIONING: Errata.AbsolutePositioning, ERRATA_ALL: Errata.All, ERRATA_CLASSIC: Errata.Classic, EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS: ExperimentalFeature.WebFlexBasis, diff --git a/yoga/YGEnums.cpp b/yoga/YGEnums.cpp index 04fd7be933..d14db83cbf 100644 --- a/yoga/YGEnums.cpp +++ b/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/yoga/YGEnums.h b/yoga/YGEnums.h index e0454394da..e6076decef 100644 --- a/yoga/YGEnums.h +++ b/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/yoga/algorithm/AbsoluteLayout.cpp b/yoga/algorithm/AbsoluteLayout.cpp index bf3a335435..22574cf805 100644 --- a/yoga/algorithm/AbsoluteLayout.cpp +++ b/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/yoga/algorithm/CalculateLayout.h b/yoga/algorithm/CalculateLayout.h index 26f4aa47a9..955cbdbb59 100644 --- a/yoga/algorithm/CalculateLayout.h +++ b/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/yoga/enums/Errata.h b/yoga/enums/Errata.h index 134f5fffc0..5bda0c0b9c 100644 --- a/yoga/enums/Errata.h +++ b/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, };