Fix issue where start/end would not be respected in flex edge getters (#1479)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1479

X-link: https://github.com/facebook/react-native/pull/41682

There are two ways to get the value of a style for a specific edge right now:

1) From the inline start/end edge which is determined via the writing direction (ltr or rtl), assuming you do not have errata on
2) From the flex start/end edge which is determined via the flex direction (row, row-reverse, column, column-reverse)

There is a weird curiosity in the second case: you can define a style to be on the "start" or "end" edge when writing the stylex/css. The physical edge that this refers to is dependent on the writing direction. So `start` would be `left` in `ltr` and `right` in `rtl`, with `end` the opposite. It is **never** determined via the flex direction. Additionally, `start`/`end` takes precedence over the physical edge it corresponds to in the case both are defined.

So, all of this means that to actually get the value of a style from the flex start/end edges, we need to account for the case that one of these relative edges was defined and would overwrite any physical edge. Since this mapping is solely determined by the writing direction, we need to pass that in to all the flex start/end getters and do that logic. This is done in  `flexStartRelativeEdge`/`flexEndRelativeEdge` which was added earlier but for some reason only being used on border.

Reviewed By: NickGerleman

Differential Revision: D51293315

fbshipit-source-id: 26fafff54827134e7c5b10354ff9bfdf67096f5b
This commit is contained in:
Joe Vilches
2023-12-04 19:35:30 -08:00
committed by Facebook GitHub Bot
parent 4ad9330fb9
commit 7893c4bd85
3 changed files with 117 additions and 53 deletions

View File

@@ -59,6 +59,12 @@ class YG_EXPORT Node : public ::YGNode {
Edge getInlineEndEdgeUsingErrata(
FlexDirection flexDirection,
Direction direction) const;
Edge getFlexStartRelativeEdgeUsingErrata(
FlexDirection flexDirection,
Direction direction) const;
Edge getFlexEndRelativeEdgeUsingErrata(
FlexDirection flexDirection,
Direction direction) const;
void useWebDefaults() {
style_.setFlexDirection(FlexDirection::Row);
@@ -196,28 +202,41 @@ class YG_EXPORT Node : public ::YGNode {
}
// Methods related to positions, margin, padding and border
bool isFlexStartPositionDefined(FlexDirection axis) const;
bool isFlexStartPositionDefined(FlexDirection axis, Direction direction)
const;
bool isInlineStartPositionDefined(FlexDirection axis, Direction direction)
const;
bool isFlexEndPositionDefined(FlexDirection axis) const;
bool isFlexEndPositionDefined(FlexDirection axis, Direction direction) const;
bool isInlineEndPositionDefined(FlexDirection axis, Direction direction)
const;
float getFlexStartPosition(FlexDirection axis, float axisSize) const;
float getFlexStartPosition(
FlexDirection axis,
Direction direction,
float axisSize) const;
float getInlineStartPosition(
FlexDirection axis,
Direction direction,
float axisSize) const;
float getFlexEndPosition(FlexDirection axis, float axisSize) const;
float getFlexEndPosition(
FlexDirection axis,
Direction direction,
float axisSize) const;
float getInlineEndPosition(
FlexDirection axis,
Direction direction,
float axisSize) const;
float getFlexStartMargin(FlexDirection axis, float widthSize) const;
float getFlexStartMargin(
FlexDirection axis,
Direction direction,
float widthSize) const;
float getInlineStartMargin(
FlexDirection axis,
Direction direction,
float widthSize) const;
float getFlexEndMargin(FlexDirection axis, float widthSize) const;
float getFlexEndMargin(
FlexDirection axis,
Direction direction,
float widthSize) const;
float getInlineEndMargin(
FlexDirection axis,
Direction direction,