Skip to content

Commit

Permalink
Modify private apis to set, store, and get intrinsic sizing keywords (#…
Browse files Browse the repository at this point in the history 
…46938)

Summary:
X-link: facebook/yoga#1721


The private internals of how we store styles needed to change a bit to support 3 new keyword values. Right now the only other keyword that can be stored is `auto`. As a result there isn't much fancy logic to support storing this and its just stored as a specific type inside of `StyleValueHandle`. There are only 3 bits for types (8 values), so it is not sustainable to just stuff every keyword in there. So the change writes the keyword as a value with a new `keyword` `Type`. 

I chose not to put `auto` in there even though it is a keyword since it is a hot path, I did not want to regress perf when I did not need to.

I also make a new `StyleSizeValue` class to store size values - so values for `width`, `height`, etc. This way these new keywords are kept specific to sizes and we will not be able to create, for example, a margin: `max-content`.

Reviewed By: NickGerleman

Differential Revision: D63927512
  • Loading branch information
@joevilches @facebook-github-bot
joevilches authored and facebook-github-bot committed Nov 1, 2024
1 parent af384a9 commit 9674da5
Show file tree
Hide file tree
Showing 21 changed files with 418 additions and 114 deletions.
24 changes: 12 additions & 12 deletions packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ - (void)setUp
auto &props = *sharedProps;
props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
auto &yogaStyle = props.yogaStyle;
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
return sharedProps;
})
.children({
Expand All @@ -136,8 +136,8 @@ - (void)setUp
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(0));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
return sharedProps;
})
.children({
Expand Down Expand Up @@ -216,8 +216,8 @@ - (void)setUp
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(30));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(50));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(50));
return sharedProps;
})
.children({
Expand Down Expand Up @@ -260,8 +260,8 @@ - (void)setUp
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(90));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(50));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(50));
return sharedProps;
})
.children({
Expand Down Expand Up @@ -418,8 +418,8 @@ - (void)testEntireParagraphLink
auto &props = *sharedProps;
props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
auto &yogaStyle = props.yogaStyle;
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
return sharedProps;
})
.children({
Expand All @@ -434,8 +434,8 @@ - (void)testEntireParagraphLink
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(0));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(90));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(20));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(20));
return sharedProps;
})
.children({
Expand Down
3 changes: 3 additions & 0 deletions packages/react-native/React/Views/RCTLayout.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,9 @@ CGFloat RCTCoreGraphicsFloatFromYogaValue(YGValue value, CGFloat baseFloatValue)
return RCTCoreGraphicsFloatFromYogaFloat(value.value) * baseFloatValue;
case YGUnitAuto:
case YGUnitUndefined:
case YGUnitMaxContent:
case YGUnitFitContent:
case YGUnitStretch:
return baseFloatValue;
}
}
Expand Down
6 changes: 6 additions & 0 deletions packages/react-native/React/Views/RCTShadowView.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@ + (YGConfigRef)yogaConfig
#define RCT_SET_YGVALUE(ygvalue, setter, ...) \
switch (ygvalue.unit) { \
case YGUnitAuto: \
case YGUnitMaxContent: \
case YGUnitFitContent: \
case YGUnitStretch: \
case YGUnitUndefined: \
setter(__VA_ARGS__, YGUndefined); \
break; \
Expand All @@ -80,6 +83,9 @@ + (YGConfigRef)yogaConfig
setter##Auto(__VA_ARGS__); \
break; \
case YGUnitUndefined: \
case YGUnitMaxContent: \
case YGUnitFitContent: \
case YGUnitStretch: \
setter(__VA_ARGS__, YGUndefined); \
break; \
case YGUnitPoint: \
Expand Down
8 changes: 7 additions & 1 deletion packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaUnit.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ public enum YogaUnit {
UNDEFINED(0),
POINT(1),
PERCENT(2),
AUTO(3);
AUTO(3),
MAX_CONTENT(4),
FIT_CONTENT(5),
STRETCH(6);

private final int mIntValue;

Expand All @@ -31,6 +34,9 @@ public static YogaUnit fromInt(int value) {
case 1: return POINT;
case 2: return PERCENT;
case 3: return AUTO;
case 4: return MAX_CONTENT;
case 5: return FIT_CONTENT;
case 6: return STRETCH;
default: throw new IllegalArgumentException("Unknown enum value: " + value);
}
}
Expand Down
14 changes: 8 additions & 6 deletions ...ages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -538,9 +538,9 @@ void YogaLayoutableShadowNode::setSize(Size size) const {

auto style = yogaNode_.style();
style.setDimension(
yoga::Dimension::Width, yoga::StyleLength::points(size.width));
yoga::Dimension::Width, yoga::StyleSizeLength::points(size.width));
style.setDimension(
yoga::Dimension::Height, yoga::StyleLength::points(size.height));
yoga::Dimension::Height, yoga::StyleSizeLength::points(size.height));
yogaNode_.setStyle(style);
yogaNode_.setDirty(true);
}
Expand Down Expand Up @@ -631,16 +631,18 @@ void YogaLayoutableShadowNode::layoutTree(
auto ownerHeight = yogaFloatFromFloat(maximumSize.height);

yogaStyle.setMaxDimension(
yoga::Dimension::Width, yoga::StyleLength::points(maximumSize.width));
yoga::Dimension::Width, yoga::StyleSizeLength::points(maximumSize.width));

yogaStyle.setMaxDimension(
yoga::Dimension::Height, yoga::StyleLength::points(maximumSize.height));
yoga::Dimension::Height,
yoga::StyleSizeLength::points(maximumSize.height));

yogaStyle.setMinDimension(
yoga::Dimension::Width, yoga::StyleLength::points(minimumSize.width));
yoga::Dimension::Width, yoga::StyleSizeLength::points(minimumSize.width));

yogaStyle.setMinDimension(
yoga::Dimension::Height, yoga::StyleLength::points(minimumSize.height));
yoga::Dimension::Height,
yoga::StyleSizeLength::points(minimumSize.height));

auto direction =
yogaDirectionFromLayoutDirection(layoutConstraints.layoutDirection);
Expand Down
101 changes: 80 additions & 21 deletions packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,18 +92,15 @@ inline yoga::FloatOptional yogaOptionalFloatFromFloat(Float value) {
inline std::optional<Float> optionalFloatFromYogaValue(
const yoga::Style::Length& length,
std::optional<Float> base = {}) {
switch (length.unit()) {
case yoga::Unit::Undefined:
return {};
case yoga::Unit::Point:
return floatFromYogaOptionalFloat(length.value());
case yoga::Unit::Percent:
return base.has_value()
? std::optional<Float>(
base.value() * floatFromYogaOptionalFloat(length.value()))
: std::optional<Float>();
case yoga::Unit::Auto:
return {};
if (length.isPoints()) {
return floatFromYogaOptionalFloat(length.value());
} else if (length.isPercent()) {
return base.has_value()
? std::optional<Float>(
base.value() * floatFromYogaOptionalFloat(length.value()))
: std::optional<Float>();
} else {
return {};
}
}

Expand Down Expand Up @@ -446,6 +443,47 @@ inline void fromRawValue(
LOG(ERROR) << "Could not parse yoga::Display: " << stringValue;
}

inline void fromRawValue(
const PropsParserContext& /*context*/,
const RawValue& value,
yoga::Style::SizeLength& result) {
if (value.hasType<Float>()) {
result = yoga::StyleSizeLength::points((float)value);
return;
} else if (value.hasType<std::string>()) {
const auto stringValue = (std::string)value;
if (stringValue == "auto") {
result = yoga::StyleSizeLength::ofAuto();
return;
} else if (stringValue == "max-content") {
result = yoga::StyleSizeLength::ofMaxContent();
return;
} else if (stringValue == "stretch") {
result = yoga::StyleSizeLength::ofStretch();
return;
} else if (stringValue == "fit-content") {
result = yoga::StyleSizeLength::ofFitContent();
return;
} else {
if (stringValue.back() == '%') {
auto tryValue = folly::tryTo<float>(
std::string_view(stringValue).substr(0, stringValue.length() - 1));
if (tryValue.hasValue()) {
result = yoga::StyleSizeLength::percent(tryValue.value());
return;
}
} else {
auto tryValue = folly::tryTo<float>(stringValue);
if (tryValue.hasValue()) {
result = yoga::StyleSizeLength::points(tryValue.value());
return;
}
}
}
}
result = yoga::StyleSizeLength::undefined();
}

inline void fromRawValue(
const PropsParserContext& context,
const RawValue& value,
Expand Down Expand Up @@ -1370,15 +1408,36 @@ inline std::string toString(const yoga::Display& value) {
}

inline std::string toString(const yoga::Style::Length& length) {
switch (length.unit()) {
case yoga::Unit::Undefined:
return "undefined";
case yoga::Unit::Point:
return std::to_string(length.value().unwrap());
case yoga::Unit::Percent:
return std::to_string(length.value().unwrap()) + "%";
case yoga::Unit::Auto:
return "auto";
if (length.isUndefined()) {
return "undefined";
} else if (length.isAuto()) {
return "auto";
} else if (length.isPoints()) {
return std::to_string(length.value().unwrap());
} else if (length.isPercent()) {
return std::to_string(length.value().unwrap()) + "%";
} else {
return "unknown";
}
}

inline std::string toString(const yoga::Style::SizeLength& length) {
if (length.isUndefined()) {
return "undefined";
} else if (length.isAuto()) {
return "auto";
} else if (length.isPoints()) {
return std::to_string(length.value().unwrap());
} else if (length.isPercent()) {
return std::to_string(length.value().unwrap()) + "%";
} else if (length.isMaxContent()) {
return "max-content";
} else if (length.isFitContent()) {
return "fit-content";
} else if (length.isStretch()) {
return "stretch";
} else {
return "unknown";
}
}

Expand Down
24 changes: 12 additions & 12 deletions packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ class LayoutTest : public ::testing::Test {
auto &props = *sharedProps;
props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
auto &yogaStyle = props.yogaStyle;
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
return sharedProps;
})
.children({
Expand All @@ -90,8 +90,8 @@ class LayoutTest : public ::testing::Test {
auto &props = *sharedProps;
auto &yogaStyle = props.yogaStyle;
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(50));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(50));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(50));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(50));
return sharedProps;
})
.children({
Expand All @@ -105,8 +105,8 @@ class LayoutTest : public ::testing::Test {
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(10));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(10));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(30));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(90));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(30));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(90));

if (testCase == TRANSFORM_SCALE) {
props.transform = props.transform * Transform::Scale(2, 2, 1);
Expand Down Expand Up @@ -138,8 +138,8 @@ class LayoutTest : public ::testing::Test {
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(10));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(10));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(110));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(20));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(110));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(20));
return sharedProps;
})
.children({
Expand All @@ -153,8 +153,8 @@ class LayoutTest : public ::testing::Test {
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(70));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(-50));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(30));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(60));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(30));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(60));
return sharedProps;
})
}),
Expand All @@ -168,8 +168,8 @@ class LayoutTest : public ::testing::Test {
yogaStyle.setPositionType(yoga::PositionType::Absolute);
yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(-60));
yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(50));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleLength::points(70));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleLength::points(20));
yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(70));
yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(20));
return sharedProps;
})
})
Expand Down
Loading

0 comments on commit 9674da5

Please sign in to comment.