From 38f1797ba01b15e547c792c17c096acffd2f71fc Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Tue, 17 Oct 2023 13:26:09 -0700 Subject: [PATCH] Fix issue where paddingStart and paddingEnd were swapped with row reverse (#41023) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/41023 X-link: https://github.com/facebook/yoga/pull/1426 Just like D50140503 where marginStart and marginEnd were not working with row reverse, paddingStart and paddingEnd are not working either with row reverse either. The solution is similar - we were checking the flex item layout starting/ending edges and not the general layout starting/ending edges. This change makes it so that we look at the proper edge according to what direction is set. One caveat is that in the case of padding (and also border) there is a callsite that actually wants to get the flex item layout's leading/trailing padding and not the one dictated by direction. So, I made a new function to accommodate this and just swapped that callsite out. Reviewed By: NickGerleman Differential Revision: D50348995 fbshipit-source-id: fdca6b10617d3e63ec007b672c0106015299c0fc --- .../yoga/yoga/algorithm/CalculateLayout.cpp | 12 +++-- .../ReactCommon/yoga/yoga/node/Node.cpp | 51 ++++++++++++++++--- .../ReactCommon/yoga/yoga/node/Node.h | 18 ++++++- 3 files changed, 67 insertions(+), 14 deletions(-) diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp index 2e7bc88e2f7c3c..570070d047f175 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp @@ -1535,13 +1535,17 @@ static void calculateLayoutImpl( node->getInlineEndBorder(flexColumnDirection, direction), YGEdgeBottom); node->setLayoutPadding( - node->getFlexStartPadding(flexRowDirection, ownerWidth), startEdge); + node->getInlineStartPadding(flexRowDirection, direction, ownerWidth), + startEdge); node->setLayoutPadding( - node->getFlexEndPadding(flexRowDirection, ownerWidth), endEdge); + node->getInlineEndPadding(flexRowDirection, direction, ownerWidth), + endEdge); node->setLayoutPadding( - node->getFlexStartPadding(flexColumnDirection, ownerWidth), YGEdgeTop); + node->getInlineStartPadding(flexColumnDirection, direction, ownerWidth), + YGEdgeTop); node->setLayoutPadding( - node->getFlexEndPadding(flexColumnDirection, ownerWidth), YGEdgeBottom); + node->getInlineEndPadding(flexColumnDirection, direction, ownerWidth), + YGEdgeBottom); if (node->hasMeasureFunc()) { measureNodeWithMeasureFunc( diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp index 146deb77d66e26..3725f8aaf34b1e 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp @@ -197,18 +197,52 @@ float Node::getFlexEndBorder(FlexDirection axis, Direction direction) const { return maxOrDefined(trailingBorder.value, 0.0f); } -float Node::getFlexStartPadding(FlexDirection axis, float widthSize) const { +float Node::getInlineStartPadding( + FlexDirection axis, + Direction direction, + float widthSize) const { + const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction); + auto leadingPadding = isRow(axis) + ? computeEdgeValueForRow(style_.padding(), YGEdgeStart, startEdge) + : computeEdgeValueForColumn(style_.padding(), startEdge); + + return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f); +} + +float Node::getFlexStartPadding( + FlexDirection axis, + Direction direction, + float widthSize) const { + const YGEdge leadRelativeFlexItemEdge = + flexStartRelativeEdge(axis, direction); auto leadingPadding = isRow(axis) ? computeEdgeValueForRow( - style_.padding(), YGEdgeStart, flexStartEdge(axis)) + style_.padding(), leadRelativeFlexItemEdge, flexStartEdge(axis)) : computeEdgeValueForColumn(style_.padding(), flexStartEdge(axis)); return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f); } -float Node::getFlexEndPadding(FlexDirection axis, float widthSize) const { +float Node::getInlineEndPadding( + FlexDirection axis, + Direction direction, + float widthSize) const { + const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction); + auto trailingPadding = isRow(axis) + ? computeEdgeValueForRow(style_.padding(), YGEdgeEnd, endEdge) + : computeEdgeValueForColumn(style_.padding(), endEdge); + + return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f); +} + +float Node::getFlexEndPadding( + FlexDirection axis, + Direction direction, + float widthSize) const { + const YGEdge trailRelativeFlexItemEdge = flexEndRelativeEdge(axis, direction); auto trailingPadding = isRow(axis) - ? computeEdgeValueForRow(style_.padding(), YGEdgeEnd, flexEndEdge(axis)) + ? computeEdgeValueForRow( + style_.padding(), trailRelativeFlexItemEdge, flexEndEdge(axis)) : computeEdgeValueForColumn(style_.padding(), flexEndEdge(axis)); return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f); @@ -218,7 +252,7 @@ float Node::getInlineStartPaddingAndBorder( FlexDirection axis, Direction direction, float widthSize) const { - return getFlexStartPadding(axis, widthSize) + + return getInlineStartPadding(axis, direction, widthSize) + getInlineStartBorder(axis, direction); } @@ -226,7 +260,7 @@ float Node::getFlexStartPaddingAndBorder( FlexDirection axis, Direction direction, float widthSize) const { - return getFlexStartPadding(axis, widthSize) + + return getFlexStartPadding(axis, direction, widthSize) + getFlexStartBorder(axis, direction); } @@ -234,7 +268,7 @@ float Node::getInlineEndPaddingAndBorder( FlexDirection axis, Direction direction, float widthSize) const { - return getFlexEndPadding(axis, widthSize) + + return getInlineEndPadding(axis, direction, widthSize) + getInlineEndBorder(axis, direction); } @@ -242,7 +276,8 @@ float Node::getFlexEndPaddingAndBorder( FlexDirection axis, Direction direction, float widthSize) const { - return getFlexEndPadding(axis, widthSize) + getFlexEndBorder(axis, direction); + return getFlexEndPadding(axis, direction, widthSize) + + getFlexEndBorder(axis, direction); } float Node::getMarginForAxis(FlexDirection axis, float widthSize) const { diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h index 30988ceecefb62..ade4f03e29e414 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h +++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h @@ -216,8 +216,22 @@ class YG_EXPORT Node : public ::YGNode { const; float getInlineEndBorder(FlexDirection flexDirection, Direction direction) const; - float getFlexStartPadding(FlexDirection axis, float widthSize) const; - float getFlexEndPadding(FlexDirection axis, float widthSize) const; + float getFlexStartPadding( + FlexDirection axis, + Direction direction, + float widthSize) const; + float getInlineStartPadding( + FlexDirection axis, + Direction direction, + float widthSize) const; + float getFlexEndPadding( + FlexDirection axis, + Direction direction, + float widthSize) const; + float getInlineEndPadding( + FlexDirection axis, + Direction direction, + float widthSize) const; float getFlexStartPaddingAndBorder( FlexDirection axis, Direction direction,