Skip to content

Commit

Permalink
Remove usage of Gutters arrays and YGGutter as index (#39597)
Browse files Browse the repository at this point in the history 
Summary:
Pull Request resolved: #39597

X-link: facebook/yoga#1406

Similar in vain to D49362819, we want to stop exposing pre-resolved CompactValue, and allow enum class usage without becoming annoying.

This also simplifies gap resolution a bit. I moved this to Style, to make it clear we aren't relying on any node state. I plan to do some similar cleanup for other resolution later.

Reviewed By: rshest

Differential Revision: D49530923

fbshipit-source-id: 47b06a7301fb283acc493dba159f496159d59580
  • Loading branch information
@NickGerleman @facebook-github-bot
NickGerleman authored and facebook-github-bot committed Oct 3, 2023
1 parent 248c324 commit 4da0d44
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 93 deletions.
26 changes: 14 additions & 12 deletions packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
View file
Expand Up @@ -195,10 +195,14 @@ static inline T const getFieldValue(
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \
field, setter, yoga::Dimension::Height, heightStr);

#define REBUILD_FIELD_YG_GUTTER(field, rowGapStr, columnGapStr, gapStr) \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterRow, rowGapStr); \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterColumn, columnGapStr); \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterAll, gapStr);
#define REBUILD_FIELD_YG_GUTTER( \
field, setter, rowGapStr, columnGapStr, gapStr) \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \
field, setter, YGGutterRow, rowGapStr); \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \
field, setter, YGGutterColumn, columnGapStr); \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \
field, setter, YGGutterAll, gapStr);

#define REBUILD_FIELD_YG_EDGES(field, prefix, suffix) \
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \
Expand Down Expand Up @@ -250,7 +254,7 @@ void YogaStylableProps::setProp(
REBUILD_FIELD_SWITCH_CASE_YSP(flexShrink);
REBUILD_FIELD_SWITCH_CASE_YSP(flexBasis);
REBUILD_FIELD_SWITCH_CASE2(positionType, "position");
REBUILD_FIELD_YG_GUTTER(gap, "rowGap", "columnGap", "gap");
REBUILD_FIELD_YG_GUTTER(gap, setGap, "rowGap", "columnGap", "gap");
REBUILD_FIELD_SWITCH_CASE_YSP(aspectRatio);
REBUILD_FIELD_YG_DIMENSION(dimension, setDimension, "width", "height");
REBUILD_FIELD_YG_DIMENSION(
Expand Down Expand Up @@ -325,16 +329,14 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
"flexGrow", yogaStyle.flexGrow(), defaultYogaStyle.flexGrow()),
debugStringConvertibleItem(
"rowGap",
yogaStyle.gap()[YGGutterRow],
defaultYogaStyle.gap()[YGGutterRow]),
yogaStyle.gap(YGGutterRow),
defaultYogaStyle.gap(YGGutterRow)),
debugStringConvertibleItem(
"columnGap",
yogaStyle.gap()[YGGutterColumn],
defaultYogaStyle.gap()[YGGutterColumn]),
yogaStyle.gap(YGGutterColumn),
defaultYogaStyle.gap(YGGutterColumn)),
debugStringConvertibleItem(
"gap",
yogaStyle.gap()[YGGutterAll],
defaultYogaStyle.gap()[YGGutterAll]),
"gap", yogaStyle.gap(YGGutterAll), defaultYogaStyle.gap(YGGutterAll)),
debugStringConvertibleItem(
"flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()),
debugStringConvertibleItem(
Expand Down
42 changes: 24 additions & 18 deletions packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h
View file
Expand Up @@ -244,26 +244,32 @@ static inline yoga::Style convertRawProp(
sourceValue.padding(),
yogaStyle.padding());

yogaStyle.gap()[YGGutterRow] = convertRawProp(
context,
rawProps,
"rowGap",
sourceValue.gap()[YGGutterRow],
yogaStyle.gap()[YGGutterRow]);
yogaStyle.setGap(
YGGutterRow,
convertRawProp(
context,
rawProps,
"rowGap",
sourceValue.gap(YGGutterRow),
yogaStyle.gap(YGGutterRow)));

yogaStyle.gap()[YGGutterColumn] = convertRawProp(
context,
rawProps,
"columnGap",
sourceValue.gap()[YGGutterColumn],
yogaStyle.gap()[YGGutterColumn]);
yogaStyle.setGap(
YGGutterColumn,
convertRawProp(
context,
rawProps,
"columnGap",
sourceValue.gap(YGGutterColumn),
yogaStyle.gap(YGGutterColumn)));

yogaStyle.gap()[YGGutterAll] = convertRawProp(
context,
rawProps,
"gap",
sourceValue.gap()[YGGutterAll],
yogaStyle.gap()[YGGutterAll]);
yogaStyle.setGap(
YGGutterAll,
convertRawProp(
context,
rawProps,
"gap",
sourceValue.gap(YGGutterAll),
yogaStyle.gap(YGGutterAll)));

yogaStyle.border() = convertRawProp(
context,
Expand Down
4 changes: 2 additions & 2 deletions packages/react-native/ReactCommon/yoga/yoga/Yoga.cpp
View file
Expand Up @@ -635,11 +635,11 @@ void YGNodeStyleSetGap(
const YGGutter gutter,
const float gapLength) {
auto length = CompactValue::ofMaybe<YGUnitPoint>(gapLength);
updateIndexedStyleProp<MSVC_HINT(gap)>(node, &Style::gap, gutter, length);
updateIndexedStyleProp<&Style::gap, &Style::setGap>(node, gutter, length);
}

float YGNodeStyleGetGap(const YGNodeConstRef node, const YGGutter gutter) {
auto gapLength = resolveRef(node)->getStyle().gap()[gutter];
auto gapLength = resolveRef(node)->getStyle().gap(gutter);
if (gapLength.isUndefined() || gapLength.isAuto()) {
return YGUndefined;
}
Expand Down
9 changes: 4 additions & 5 deletions packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
View file
Expand Up @@ -1215,7 +1215,7 @@ static void justifyMainAxis(
node->getLeadingPaddingAndBorder(mainAxis, ownerWidth).unwrap();
const float trailingPaddingAndBorderMain =
node->getTrailingPaddingAndBorder(mainAxis, ownerWidth).unwrap();
const float gap = node->getGapForAxis(mainAxis, ownerWidth);
const float gap = node->getGapForAxis(mainAxis);
// If we are using "at most" rules in the main axis, make sure that
// remainingFreeSpace is 0 when min main dimension is not given
if (measureModeMainDim == MeasureMode::AtMost &&
Expand Down Expand Up @@ -1666,8 +1666,8 @@ static void calculateLayoutImpl(
generationCount);

if (childCount > 1) {
totalMainDim += node->getGapForAxis(mainAxis, availableInnerCrossDim) *
static_cast<float>(childCount - 1);
totalMainDim +=
node->getGapForAxis(mainAxis) * static_cast<float>(childCount - 1);
}

const bool mainAxisOverflows =
Expand All @@ -1690,8 +1690,7 @@ static void calculateLayoutImpl(
// Accumulated cross dimensions of all lines so far.
float totalLineCrossDim = 0;

const float crossAxisGap =
node->getGapForAxis(crossAxis, availableInnerCrossDim);
const float crossAxisGap = node->getGapForAxis(crossAxis);

// Max main dimension of all the lines.
float maxLineMainDim = 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.cpp
View file
Expand Up @@ -34,7 +34,7 @@ FlexLine calculateFlexLine(
const FlexDirection mainAxis = resolveDirection(
node->getStyle().flexDirection(), node->resolveDirection(ownerDirection));
const bool isNodeFlexWrap = node->getStyle().flexWrap() != Wrap::NoWrap;
const float gap = node->getGapForAxis(mainAxis, availableInnerWidth);
const float gap = node->getGapForAxis(mainAxis);

// Add items to the current line until it's full or we run out of items.
for (; endOfLineIndex < node->getChildren().size(); endOfLineIndex++) {
Expand Down
16 changes: 5 additions & 11 deletions packages/react-native/ReactCommon/yoga/yoga/debug/NodeToString.cpp
View file
Expand Up @@ -180,17 +180,11 @@ void nodeToString(
appendEdges(str, "padding", style.padding());
appendEdges(str, "border", style.border());

if (yoga::Node::computeColumnGap(
style.gap(), CompactValue::ofUndefined()) !=
yoga::Node::computeColumnGap(
yoga::Node{}.getStyle().gap(), CompactValue::ofUndefined())) {
appendNumberIfNotUndefined(
str, "column-gap", style.gap()[YGGutterColumn]);
}
if (yoga::Node::computeRowGap(style.gap(), CompactValue::ofUndefined()) !=
yoga::Node::computeRowGap(
yoga::Node{}.getStyle().gap(), CompactValue::ofUndefined())) {
appendNumberIfNotUndefined(str, "row-gap", style.gap()[YGGutterRow]);
if (!style.gap(YGGutterAll).isUndefined()) {
appendNumberIfNotUndefined(str, "gap", style.gap(YGGutterAll));
} else {
appendNumberIfNotUndefined(str, "column-gap", style.gap(YGGutterColumn));
appendNumberIfNotUndefined(str, "row-gap", style.gap(YGGutterRow));
}

appendNumberIfNotAuto(str, "width", style.dimension(Dimension::Width));
Expand Down
37 changes: 6 additions & 31 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
View file
Expand Up @@ -89,30 +89,6 @@ CompactValue Node::computeEdgeValueForColumn(
}
}

CompactValue Node::computeRowGap(
const Style::Gutters& gutters,
CompactValue defaultValue) {
if (!gutters[YGGutterRow].isUndefined()) {
return gutters[YGGutterRow];
} else if (!gutters[YGGutterAll].isUndefined()) {
return gutters[YGGutterAll];
} else {
return defaultValue;
}
}

CompactValue Node::computeColumnGap(
const Style::Gutters& gutters,
CompactValue defaultValue) {
if (!gutters[YGGutterColumn].isUndefined()) {
return gutters[YGGutterColumn];
} else if (!gutters[YGGutterAll].isUndefined()) {
return gutters[YGGutterAll];
} else {
return defaultValue;
}
}

FloatOptional Node::getLeadingPosition(
const FlexDirection axis,
const float axisSize) const {
Expand Down Expand Up @@ -202,13 +178,12 @@ FloatOptional Node::getMarginForAxis(
return getLeadingMargin(axis, widthSize) + getTrailingMargin(axis, widthSize);
}

float Node::getGapForAxis(const FlexDirection axis, const float widthSize)
const {
auto gap = isRow(axis)
? computeColumnGap(style_.gap(), CompactValue::ofUndefined())
: computeRowGap(style_.gap(), CompactValue::ofUndefined());
auto resolvedGap = yoga::resolveValue(gap, widthSize);
return maxOrDefined(resolvedGap.unwrap(), 0);
float Node::getGapForAxis(const FlexDirection axis) const {
auto gap = isRow(axis) ? style_.resolveColumnGap() : style_.resolveRowGap();
// TODO: Validate percentage gap, and expose ability to set percentage to
// public API
auto resolvedGap = yoga::resolveValue(gap, 0.0f /*ownerSize*/);
return maxOrDefined(resolvedGap.unwrap(), 0.0f);
}

YGSize Node::measure(
Expand Down
10 changes: 1 addition & 9 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.h
View file
Expand Up @@ -191,14 +191,6 @@ class YG_EXPORT Node : public ::YGNode {
YGEdge edge,
CompactValue defaultValue);

static CompactValue computeRowGap(
const Style::Gutters& gutters,
CompactValue defaultValue);

static CompactValue computeColumnGap(
const Style::Gutters& gutters,
CompactValue defaultValue);

// Methods related to positions, margin, padding and border
FloatOptional getLeadingPosition(
const FlexDirection axis,
Expand Down Expand Up @@ -231,7 +223,7 @@ class YG_EXPORT Node : public ::YGNode {
FloatOptional getMarginForAxis(
const FlexDirection axis,
const float widthSize) const;
float getGapForAxis(const FlexDirection axis, const float widthSize) const;
float getGapForAxis(const FlexDirection axis) const;
// Setters

void setContext(void* context) {
Expand Down
24 changes: 20 additions & 4 deletions packages/react-native/ReactCommon/yoga/yoga/style/Style.h
View file
Expand Up @@ -274,11 +274,11 @@ class YG_EXPORT Style {
return {*this};
}

const Gutters& gap() const {
return gap_;
CompactValue gap(YGGutter gutter) const {
return gap_[gutter];
}
IdxRef<YGGutter, &Style::gap_> gap() {
return {*this};
void setGap(YGGutter gutter, CompactValue value) {
gap_[gutter] = value;
}

CompactValue dimension(Dimension axis) const {
Expand Down Expand Up @@ -310,6 +310,22 @@ class YG_EXPORT Style {
return {*this};
}

CompactValue resolveColumnGap() const {
if (!gap_[YGGutterColumn].isUndefined()) {
return gap_[YGGutterColumn];
} else {
return gap_[YGGutterAll];
}
}

CompactValue resolveRowGap() const {
if (!gap_[YGGutterRow].isUndefined()) {
return gap_[YGGutterRow];
} else {
return gap_[YGGutterAll];
}
}

bool operator==(const Style& other) const {
return flags == other.flags && inexactEquals(flex_, other.flex_) &&
inexactEquals(flexGrow_, other.flexGrow_) &&
Expand Down

0 comments on commit 4da0d44

Please sign in to comment.