diff --git a/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm b/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm index da306ba8092441..0f5dc648ded670 100644 --- a/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm +++ b/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm @@ -134,8 +134,8 @@ - (void)setUp props.accessible = true; auto &yogaStyle = props.yogaStyle; yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{0, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{0, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(0)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(0)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(200)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(200)); return sharedProps; @@ -214,8 +214,8 @@ - (void)setUp props.accessible = true; auto &yogaStyle = props.yogaStyle; yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{0, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{30, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(0)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(30)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(200)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(50)); return sharedProps; @@ -258,8 +258,8 @@ - (void)setUp props.accessible = true; auto &yogaStyle = props.yogaStyle; yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{0, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{90, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(0)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(90)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(200)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(50)); return sharedProps; @@ -432,8 +432,8 @@ - (void)testEntireParagraphLink props.accessibilityTraits = AccessibilityTraits::Link; auto &yogaStyle = props.yogaStyle; yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{0, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{0, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(0)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(0)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(200)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(20)); return sharedProps; diff --git a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h index c771fd4bcd8744..87e188ce68a1e8 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h +++ b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h @@ -20,12 +20,12 @@ class SafeAreaViewComponentDescriptor final : public ConcreteComponentDescriptor { using ConcreteComponentDescriptor::ConcreteComponentDescriptor; void adopt(ShadowNode& shadowNode) const override { - auto& layoutableShadowNode = + auto& yogaLayoutableShadowNode = static_cast(shadowNode); auto& stateData = static_cast( *shadowNode.getState()) .getData(); - layoutableShadowNode.setPadding(stateData.padding); + yogaLayoutableShadowNode.setPadding(stateData.padding); ConcreteComponentDescriptor::adopt(shadowNode); } diff --git a/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h b/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h index 04d19a11bfbdb6..04bcfc886c9778 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h +++ b/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h @@ -40,7 +40,7 @@ class AndroidTextInputComponentDescriptor final const ShadowNodeFamily::Shared& family) const override { int surfaceId = family->getSurfaceId(); - yoga::Style::Edges theme; + ThemePadding theme; // TODO: figure out RTL/start/end/left/right stuff here if (surfaceIdToThemePaddingMap_.find(surfaceId) != surfaceIdToThemePaddingMap_.end()) { @@ -59,11 +59,16 @@ class AndroidTextInputComponentDescriptor final fabricUIManager, surfaceId, defaultTextInputPaddingArray)) { jfloat* defaultTextInputPadding = env->GetFloatArrayElements(defaultTextInputPaddingArray, 0); - theme[YGEdgeStart] = (YGValue){defaultTextInputPadding[0], YGUnitPoint}; - theme[YGEdgeEnd] = (YGValue){defaultTextInputPadding[1], YGUnitPoint}; - theme[YGEdgeTop] = (YGValue){defaultTextInputPadding[2], YGUnitPoint}; - theme[YGEdgeBottom] = - (YGValue){defaultTextInputPadding[3], YGUnitPoint}; + + theme.start = + yoga::CompactValue::of(defaultTextInputPadding[0]); + theme.end = + yoga::CompactValue::of(defaultTextInputPadding[1]); + theme.top = + yoga::CompactValue::of(defaultTextInputPadding[2]); + theme.bottom = + yoga::CompactValue::of(defaultTextInputPadding[3]); + surfaceIdToThemePaddingMap_.emplace(std::make_pair(surfaceId, theme)); env->ReleaseFloatArrayElements( defaultTextInputPaddingArray, defaultTextInputPadding, JNI_ABORT); @@ -77,10 +82,10 @@ class AndroidTextInputComponentDescriptor final {}, {}, {}, - ((YGValue)theme[YGEdgeStart]).value, - ((YGValue)theme[YGEdgeEnd]).value, - ((YGValue)theme[YGEdgeTop]).value, - ((YGValue)theme[YGEdgeBottom]).value)), + ((YGValue)theme.start).value, + ((YGValue)theme.end).value, + ((YGValue)theme.top).value, + ((YGValue)theme.bottom).value)), family); } @@ -99,7 +104,7 @@ class AndroidTextInputComponentDescriptor final int surfaceId = textInputShadowNode.getSurfaceId(); if (surfaceIdToThemePaddingMap_.find(surfaceId) != surfaceIdToThemePaddingMap_.end()) { - yoga::Style::Edges theme = surfaceIdToThemePaddingMap_[surfaceId]; + ThemePadding theme = surfaceIdToThemePaddingMap_[surfaceId]; auto& textInputProps = textInputShadowNode.getConcreteProps(); @@ -108,29 +113,34 @@ class AndroidTextInputComponentDescriptor final // TODO: T62959168 account for RTL and paddingLeft when setting default // paddingStart, and vice-versa with paddingRight/paddingEnd. // For now this assumes no RTL. - yoga::Style::Edges result = textInputProps.yogaStyle.padding(); + ThemePadding result{ + .start = textInputProps.yogaStyle.padding(YGEdgeStart), + .end = textInputProps.yogaStyle.padding(YGEdgeEnd), + .top = textInputProps.yogaStyle.padding(YGEdgeTop), + .bottom = textInputProps.yogaStyle.padding(YGEdgeBottom)}; + bool changedPadding = false; if (!textInputProps.hasPadding && !textInputProps.hasPaddingStart && !textInputProps.hasPaddingLeft && !textInputProps.hasPaddingHorizontal) { changedPadding = true; - result[YGEdgeStart] = theme[YGEdgeStart]; + result.start = theme.start; } if (!textInputProps.hasPadding && !textInputProps.hasPaddingEnd && !textInputProps.hasPaddingRight && !textInputProps.hasPaddingHorizontal) { changedPadding = true; - result[YGEdgeEnd] = theme[YGEdgeEnd]; + result.end = theme.end; } if (!textInputProps.hasPadding && !textInputProps.hasPaddingTop && !textInputProps.hasPaddingVertical) { changedPadding = true; - result[YGEdgeTop] = theme[YGEdgeTop]; + result.top = theme.top; } if (!textInputProps.hasPadding && !textInputProps.hasPaddingBottom && !textInputProps.hasPaddingVertical) { changedPadding = true; - result[YGEdgeBottom] = theme[YGEdgeBottom]; + result.bottom = theme.bottom; } // If the TextInput initially does not have paddingLeft or paddingStart, a @@ -141,12 +151,12 @@ class AndroidTextInputComponentDescriptor final if ((textInputProps.hasPadding || textInputProps.hasPaddingLeft || textInputProps.hasPaddingHorizontal) && !textInputProps.hasPaddingStart) { - result[YGEdgeStart] = YGValueUndefined; + result.start = yoga::CompactValue::ofUndefined(); } if ((textInputProps.hasPadding || textInputProps.hasPaddingRight || textInputProps.hasPaddingHorizontal) && !textInputProps.hasPaddingEnd) { - result[YGEdgeEnd] = YGValueUndefined; + result.end = yoga::CompactValue::ofUndefined(); } // Note that this is expensive: on every adopt, we need to set the Yoga @@ -154,8 +164,13 @@ class AndroidTextInputComponentDescriptor final // commit, state update, etc, will incur this cost. if (changedPadding) { // Set new props on node - const_cast(textInputProps).yogaStyle.padding() = - result; + yoga::Style& style = + const_cast(textInputProps).yogaStyle; + style.setPadding(YGEdgeStart, result.start); + style.setPadding(YGEdgeEnd, result.end); + style.setPadding(YGEdgeTop, result.top); + style.setPadding(YGEdgeBottom, result.bottom); + // Communicate new props to Yoga part of the node textInputShadowNode.updateYogaProps(); } @@ -168,13 +183,19 @@ class AndroidTextInputComponentDescriptor final } private: + struct ThemePadding { + yoga::CompactValue start; + yoga::CompactValue end; + yoga::CompactValue top; + yoga::CompactValue bottom; + }; + // TODO T68526882: Unify with Binding::UIManagerJavaDescriptor constexpr static auto UIManagerJavaDescriptor = "com/facebook/react/fabric/FabricUIManager"; SharedTextLayoutManager textLayoutManager_; - mutable std::unordered_map - surfaceIdToThemePaddingMap_; + mutable std::unordered_map surfaceIdToThemePaddingMap_; }; } // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp index 58bb38b20385c1..790f14638e8622 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp @@ -358,20 +358,20 @@ BorderMetrics BaseViewProps::resolveBorderMetrics( bool{layoutMetrics.layoutDirection == LayoutDirection::RightToLeft}; auto borderWidths = CascadedBorderWidths{ - /* .left = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeLeft]), - /* .top = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeTop]), + /* .left = */ optionalFloatFromYogaValue(yogaStyle.border(YGEdgeLeft)), + /* .top = */ optionalFloatFromYogaValue(yogaStyle.border(YGEdgeTop)), /* .right = */ - optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeRight]), + optionalFloatFromYogaValue(yogaStyle.border(YGEdgeRight)), /* .bottom = */ - optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeBottom]), + optionalFloatFromYogaValue(yogaStyle.border(YGEdgeBottom)), /* .start = */ - optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeStart]), - /* .end = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeEnd]), + optionalFloatFromYogaValue(yogaStyle.border(YGEdgeStart)), + /* .end = */ optionalFloatFromYogaValue(yogaStyle.border(YGEdgeEnd)), /* .horizontal = */ - optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeHorizontal]), + optionalFloatFromYogaValue(yogaStyle.border(YGEdgeHorizontal)), /* .vertical = */ - optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeVertical]), - /* .all = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeAll]), + optionalFloatFromYogaValue(yogaStyle.border(YGEdgeVertical)), + /* .all = */ optionalFloatFromYogaValue(yogaStyle.border(YGEdgeAll)), }; return { diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp index 42575ec6085f35..8c66b0f6f890c2 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp @@ -54,9 +54,17 @@ void ViewShadowNode::initialize() noexcept { viewProps.removeClippedSubviews || HostPlatformViewTraitsInitializer::formsStackingContext(viewProps); + bool hasBorder = [&]() { + for (int edge = YGEdgeLeft; edge != YGEdgeAll; ++edge) { + if (viewProps.yogaStyle.border(static_cast(edge)).isDefined()) { + return true; + } + } + return false; + }(); + bool formsView = formsStackingContext || - isColorMeaningful(viewProps.backgroundColor) || - !(viewProps.yogaStyle.border() == yoga::Style::Edges{}) || + isColorMeaningful(viewProps.backgroundColor) || hasBorder || !viewProps.testId.empty() || HostPlatformViewTraitsInitializer::formsView(viewProps); diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp index 3bfa3a97f2394f..ac2e89a618aaab 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp @@ -391,64 +391,55 @@ void YogaLayoutableShadowNode::updateYogaProps() { yoga::Style result{baseStyle}; // Aliases with precedence - if (!props.inset.isUndefined()) { - result.position()[YGEdgeAll] = props.inset; + if (props.insetInlineEnd.isDefined()) { + result.setPosition(YGEdgeEnd, props.insetInlineEnd); } - if (!props.insetBlock.isUndefined()) { - result.position()[YGEdgeVertical] = props.insetBlock; + if (props.insetInlineStart.isDefined()) { + result.setPosition(YGEdgeStart, props.insetInlineStart); } - if (!props.insetInline.isUndefined()) { - result.position()[YGEdgeHorizontal] = props.insetInline; + if (props.marginInline.isDefined()) { + result.setMargin(YGEdgeHorizontal, props.marginInline); } - if (!props.insetInlineEnd.isUndefined()) { - result.position()[YGEdgeEnd] = props.insetInlineEnd; + if (props.marginInlineStart.isDefined()) { + result.setMargin(YGEdgeStart, props.marginInlineStart); } - if (!props.insetInlineStart.isUndefined()) { - result.position()[YGEdgeStart] = props.insetInlineStart; + if (props.marginInlineEnd.isDefined()) { + result.setMargin(YGEdgeEnd, props.marginInlineEnd); } - if (!props.marginInline.isUndefined()) { - result.margin()[YGEdgeHorizontal] = props.marginInline; + if (props.marginBlock.isDefined()) { + result.setMargin(YGEdgeVertical, props.marginBlock); } - if (!props.marginInlineStart.isUndefined()) { - result.margin()[YGEdgeStart] = props.marginInlineStart; + if (props.paddingInline.isDefined()) { + result.setPadding(YGEdgeHorizontal, props.paddingInline); } - if (!props.marginInlineEnd.isUndefined()) { - result.margin()[YGEdgeEnd] = props.marginInlineEnd; + if (props.paddingInlineStart.isDefined()) { + result.setPadding(YGEdgeStart, props.paddingInlineStart); } - if (!props.marginBlock.isUndefined()) { - result.margin()[YGEdgeVertical] = props.marginBlock; + if (props.paddingInlineEnd.isDefined()) { + result.setPadding(YGEdgeEnd, props.paddingInlineEnd); } - if (!props.paddingInline.isUndefined()) { - result.padding()[YGEdgeHorizontal] = props.paddingInline; - } - if (!props.paddingInlineStart.isUndefined()) { - result.padding()[YGEdgeStart] = props.paddingInlineStart; - } - if (!props.paddingInlineEnd.isUndefined()) { - result.padding()[YGEdgeEnd] = props.paddingInlineEnd; - } - if (!props.paddingBlock.isUndefined()) { - result.padding()[YGEdgeVertical] = props.paddingBlock; + if (props.paddingBlock.isDefined()) { + result.setPadding(YGEdgeVertical, props.paddingBlock); } // Aliases without precedence - if (CompactValue(result.position()[YGEdgeBottom]).isUndefined()) { - result.position()[YGEdgeBottom] = props.insetBlockEnd; + if (result.position(YGEdgeBottom).isUndefined()) { + result.setPosition(YGEdgeBottom, props.insetBlockEnd); } - if (CompactValue(result.position()[YGEdgeTop]).isUndefined()) { - result.position()[YGEdgeTop] = props.insetBlockStart; + if (result.position(YGEdgeTop).isUndefined()) { + result.setPosition(YGEdgeTop, props.insetBlockStart); } - if (CompactValue(result.margin()[YGEdgeTop]).isUndefined()) { - result.margin()[YGEdgeTop] = props.marginBlockStart; + if (result.margin(YGEdgeTop).isUndefined()) { + result.setMargin(YGEdgeTop, props.marginBlockStart); } - if (CompactValue(result.margin()[YGEdgeBottom]).isUndefined()) { - result.margin()[YGEdgeBottom] = props.marginBlockEnd; + if (result.margin(YGEdgeBottom).isUndefined()) { + result.setMargin(YGEdgeBottom, props.marginBlockEnd); } - if (CompactValue(result.padding()[YGEdgeTop]).isUndefined()) { - result.padding()[YGEdgeTop] = props.paddingBlockStart; + if (result.padding(YGEdgeTop).isUndefined()) { + result.setPadding(YGEdgeTop, props.paddingBlockStart); } - if (CompactValue(result.padding()[YGEdgeBottom]).isUndefined()) { - result.padding()[YGEdgeBottom] = props.paddingBlockEnd; + if (result.padding(YGEdgeBottom).isUndefined()) { + result.setPadding(YGEdgeBottom, props.paddingBlockEnd); } return result; @@ -558,18 +549,18 @@ void YogaLayoutableShadowNode::setPadding(RectangleEdges padding) const { auto rightPadding = yoga::CompactValue::ofMaybe(padding.right); auto bottomPadding = yoga::CompactValue::ofMaybe(padding.bottom); - if (leftPadding != style.padding()[YGEdgeLeft] || - topPadding != style.padding()[YGEdgeTop] || - rightPadding != style.padding()[YGEdgeRight] || - bottomPadding != style.padding()[YGEdgeBottom]) { - style.padding()[YGEdgeTop] = - yoga::CompactValue::ofMaybe(padding.top); - style.padding()[YGEdgeLeft] = - yoga::CompactValue::ofMaybe(padding.left); - style.padding()[YGEdgeRight] = - yoga::CompactValue::ofMaybe(padding.right); - style.padding()[YGEdgeBottom] = - yoga::CompactValue::ofMaybe(padding.bottom); + if (leftPadding != style.padding(YGEdgeLeft) || + topPadding != style.padding(YGEdgeTop) || + rightPadding != style.padding(YGEdgeRight) || + bottomPadding != style.padding(YGEdgeBottom)) { + style.setPadding( + YGEdgeTop, yoga::CompactValue::ofMaybe(padding.top)); + style.setPadding( + YGEdgeLeft, yoga::CompactValue::ofMaybe(padding.left)); + style.setPadding( + YGEdgeRight, yoga::CompactValue::ofMaybe(padding.right)); + style.setPadding( + YGEdgeBottom, yoga::CompactValue::ofMaybe(padding.bottom)); yogaNode_.setStyle(style); yogaNode_.setDirty(true); } @@ -892,40 +883,36 @@ void YogaLayoutableShadowNode::swapLeftAndRightInYogaStyleProps( const YogaLayoutableShadowNode& shadowNode) { auto yogaStyle = shadowNode.yogaNode_.getStyle(); - const yoga::Style::Edges& position = yogaStyle.position(); - const yoga::Style::Edges& padding = yogaStyle.padding(); - const yoga::Style::Edges& margin = yogaStyle.margin(); - // Swap Yoga node values, position, padding and margin. - if (yogaStyle.position()[YGEdgeLeft] != YGValueUndefined) { - yogaStyle.position()[YGEdgeStart] = position[YGEdgeLeft]; - yogaStyle.position()[YGEdgeLeft] = YGValueUndefined; + if (yogaStyle.position(YGEdgeLeft).isDefined()) { + yogaStyle.setPosition(YGEdgeStart, yogaStyle.position(YGEdgeLeft)); + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::ofUndefined()); } - if (yogaStyle.position()[YGEdgeRight] != YGValueUndefined) { - yogaStyle.position()[YGEdgeEnd] = position[YGEdgeRight]; - yogaStyle.position()[YGEdgeRight] = YGValueUndefined; + if (yogaStyle.position(YGEdgeRight).isDefined()) { + yogaStyle.setPosition(YGEdgeEnd, yogaStyle.position(YGEdgeRight)); + yogaStyle.setPosition(YGEdgeRight, yoga::CompactValue::ofUndefined()); } - if (yogaStyle.padding()[YGEdgeLeft] != YGValueUndefined) { - yogaStyle.padding()[YGEdgeStart] = padding[YGEdgeLeft]; - yogaStyle.padding()[YGEdgeLeft] = YGValueUndefined; + if (yogaStyle.padding(YGEdgeLeft).isDefined()) { + yogaStyle.setPadding(YGEdgeStart, yogaStyle.padding(YGEdgeLeft)); + yogaStyle.setPadding(YGEdgeLeft, yoga::CompactValue::ofUndefined()); } - if (yogaStyle.padding()[YGEdgeRight] != YGValueUndefined) { - yogaStyle.padding()[YGEdgeEnd] = padding[YGEdgeRight]; - yogaStyle.padding()[YGEdgeRight] = YGValueUndefined; + if (yogaStyle.padding(YGEdgeRight).isDefined()) { + yogaStyle.setPadding(YGEdgeEnd, yogaStyle.padding(YGEdgeRight)); + yogaStyle.setPadding(YGEdgeRight, yoga::CompactValue::ofUndefined()); } - if (yogaStyle.margin()[YGEdgeLeft] != YGValueUndefined) { - yogaStyle.margin()[YGEdgeStart] = margin[YGEdgeLeft]; - yogaStyle.margin()[YGEdgeLeft] = YGValueUndefined; + if (yogaStyle.margin(YGEdgeLeft).isDefined()) { + yogaStyle.setMargin(YGEdgeStart, yogaStyle.margin(YGEdgeLeft)); + yogaStyle.setMargin(YGEdgeLeft, yoga::CompactValue::ofUndefined()); } - if (yogaStyle.margin()[YGEdgeRight] != YGValueUndefined) { - yogaStyle.margin()[YGEdgeEnd] = margin[YGEdgeRight]; - yogaStyle.margin()[YGEdgeRight] = YGValueUndefined; + if (yogaStyle.margin(YGEdgeRight).isDefined()) { + yogaStyle.setMargin(YGEdgeEnd, yogaStyle.margin(YGEdgeRight)); + yogaStyle.setMargin(YGEdgeRight, yoga::CompactValue::ofUndefined()); } shadowNode.yogaNode_.setStyle(yogaStyle); @@ -978,16 +965,14 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps( props.borderStyles.right.reset(); } - const yoga::Style::Edges& border = props.yogaStyle.border(); - - if (props.yogaStyle.border()[YGEdgeLeft] != YGValueUndefined) { - props.yogaStyle.border()[YGEdgeStart] = border[YGEdgeLeft]; - props.yogaStyle.border()[YGEdgeLeft] = YGValueUndefined; + if (props.yogaStyle.border(YGEdgeLeft).isDefined()) { + props.yogaStyle.setBorder(YGEdgeStart, props.yogaStyle.border(YGEdgeLeft)); + props.yogaStyle.setBorder(YGEdgeLeft, yoga::CompactValue::ofUndefined()); } - if (props.yogaStyle.border()[YGEdgeRight] != YGValueUndefined) { - props.yogaStyle.border()[YGEdgeEnd] = border[YGEdgeRight]; - props.yogaStyle.border()[YGEdgeRight] = YGValueUndefined; + if (props.yogaStyle.border(YGEdgeRight).isDefined()) { + props.yogaStyle.setBorder(YGEdgeEnd, props.yogaStyle.border(YGEdgeRight)); + props.yogaStyle.setBorder(YGEdgeRight, yoga::CompactValue::ofUndefined()); } } diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp index 607ed67c9d8be4..9c2c6518e86385 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp @@ -174,60 +174,67 @@ static inline T const getFieldValue( #define REBUILD_FIELD_SWITCH_CASE_YSP(field) \ REBUILD_FIELD_SWITCH_CASE2(field, #field) -#define REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, index, fieldName) \ - case CONSTEXPR_RAW_PROPS_KEY_HASH(fieldName): { \ - yogaStyle.field()[index] = \ - getFieldValue(context, value, ygDefaults.field()[index]); \ - return; \ - } - -#define REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \ - field, setter, index, fieldName) \ - case CONSTEXPR_RAW_PROPS_KEY_HASH(fieldName): { \ - yogaStyle.setter( \ - index, getFieldValue(context, value, ygDefaults.field(index))); \ - return; \ +#define REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, setter, index, fieldName) \ + case CONSTEXPR_RAW_PROPS_KEY_HASH(fieldName): { \ + yogaStyle.setter( \ + index, getFieldValue(context, value, ygDefaults.field(index))); \ + return; \ } #define REBUILD_FIELD_YG_DIMENSION(field, setter, widthStr, heightStr) \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ field, setter, yoga::Dimension::Width, widthStr); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ field, setter, yoga::Dimension::Height, heightStr); #define REBUILD_FIELD_YG_GUTTER( \ field, setter, rowGapStr, columnGapStr, gapStr) \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ field, setter, yoga::Gutter::Row, rowGapStr); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ field, setter, yoga::Gutter::Column, columnGapStr); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED_SETTER( \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ field, setter, yoga::Gutter::All, gapStr); -#define REBUILD_FIELD_YG_EDGES(field, prefix, suffix) \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ - field, YGEdgeLeft, prefix "Left" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGEdgeTop, prefix "Top" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ - field, YGEdgeRight, prefix "Right" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ - field, YGEdgeBottom, prefix "Bottom" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ - field, YGEdgeStart, prefix "Start" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGEdgeEnd, prefix "End" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ - field, YGEdgeHorizontal, prefix "Horizontal" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ - field, YGEdgeVertical, prefix "Vertical" suffix); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGEdgeAll, prefix "" suffix); - -#define REBUILD_FIELD_YG_EDGES_POSITION() \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeLeft, "left"); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeTop, "top"); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeRight, "right"); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeBottom, "bottom"); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeStart, "start"); \ - REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeEnd, "end"); +#define REBUILD_FIELD_YG_EDGES(field, setter, prefix, suffix) \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeLeft, prefix "Left" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeTop, prefix "Top" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeRight, prefix "Right" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeBottom, prefix "Bottom" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeStart, prefix "Start" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeEnd, prefix "End" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeHorizontal, prefix "Horizontal" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeVertical, prefix "Vertical" suffix); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + field, setter, YGEdgeAll, prefix "" suffix); + +#define REBUILD_FIELD_YG_EDGES_POSITION() \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeLeft, "left"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeTop, "top"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeRight, "right"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeBottom, "bottom"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeStart, "start"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeEnd, "end"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeHorizontal, "insetInline"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeVertical, "insetBlock"); \ + REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ + position, setPosition, YGEdgeAll, "inset"); void YogaStylableProps::setProp( const PropsParserContext& context, @@ -262,18 +269,15 @@ void YogaStylableProps::setProp( REBUILD_FIELD_YG_DIMENSION( maxDimension, setMaxDimension, "maxWidth", "maxHeight"); REBUILD_FIELD_YG_EDGES_POSITION(); - REBUILD_FIELD_YG_EDGES(margin, "margin", ""); - REBUILD_FIELD_YG_EDGES(padding, "padding", ""); - REBUILD_FIELD_YG_EDGES(border, "border", "Width"); + REBUILD_FIELD_YG_EDGES(margin, setMargin, "margin", ""); + REBUILD_FIELD_YG_EDGES(padding, setPadding, "padding", ""); + REBUILD_FIELD_YG_EDGES(border, setBorder, "border", "Width"); // Aliases - RAW_SET_PROP_SWITCH_CASE(inset, "inset"); - RAW_SET_PROP_SWITCH_CASE(insetBlock, "insetBlock"); RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd"); RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart"); - RAW_SET_PROP_SWITCH_CASE(insetInline, "insetInline"); - RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd"); RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart"); + RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd"); RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline"); RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart"); RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd"); @@ -343,14 +347,155 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const { "flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()), debugStringConvertibleItem( "flexBasis", yogaStyle.flexBasis(), defaultYogaStyle.flexBasis()), + + debugStringConvertibleItem( + "marginLeft", + yogaStyle.margin(YGEdgeLeft), + defaultYogaStyle.margin(YGEdgeLeft)), + debugStringConvertibleItem( + "marginTop", + yogaStyle.margin(YGEdgeTop), + defaultYogaStyle.margin(YGEdgeTop)), + debugStringConvertibleItem( + "marginRight", + yogaStyle.margin(YGEdgeRight), + defaultYogaStyle.margin(YGEdgeRight)), + debugStringConvertibleItem( + "marginBottom", + yogaStyle.margin(YGEdgeBottom), + defaultYogaStyle.margin(YGEdgeBottom)), + debugStringConvertibleItem( + "marginStart", + yogaStyle.margin(YGEdgeStart), + defaultYogaStyle.margin(YGEdgeStart)), + debugStringConvertibleItem( + "marginEnd", + yogaStyle.margin(YGEdgeEnd), + defaultYogaStyle.margin(YGEdgeEnd)), + debugStringConvertibleItem( + "marginHorizontal", + yogaStyle.margin(YGEdgeHorizontal), + defaultYogaStyle.margin(YGEdgeHorizontal)), + debugStringConvertibleItem( + "marginVertical", + yogaStyle.margin(YGEdgeVertical), + defaultYogaStyle.margin(YGEdgeVertical)), + debugStringConvertibleItem( + "margin", + yogaStyle.margin(YGEdgeAll), + defaultYogaStyle.margin(YGEdgeAll)), + + debugStringConvertibleItem( + "left", + yogaStyle.position(YGEdgeLeft), + defaultYogaStyle.position(YGEdgeLeft)), + debugStringConvertibleItem( + "top", + yogaStyle.position(YGEdgeTop), + defaultYogaStyle.position(YGEdgeTop)), + debugStringConvertibleItem( + "right", + yogaStyle.position(YGEdgeRight), + defaultYogaStyle.position(YGEdgeRight)), + debugStringConvertibleItem( + "bottom", + yogaStyle.position(YGEdgeBottom), + defaultYogaStyle.position(YGEdgeBottom)), + debugStringConvertibleItem( + "start", + yogaStyle.position(YGEdgeStart), + defaultYogaStyle.position(YGEdgeStart)), + debugStringConvertibleItem( + "end", + yogaStyle.position(YGEdgeEnd), + defaultYogaStyle.position(YGEdgeEnd)), + debugStringConvertibleItem( + "inseInline", + yogaStyle.position(YGEdgeHorizontal), + defaultYogaStyle.position(YGEdgeHorizontal)), + debugStringConvertibleItem( + "insetBlock", + yogaStyle.position(YGEdgeVertical), + defaultYogaStyle.position(YGEdgeVertical)), + debugStringConvertibleItem( + "inset", + yogaStyle.position(YGEdgeAll), + defaultYogaStyle.position(YGEdgeAll)), + + debugStringConvertibleItem( + "paddingLeft", + yogaStyle.padding(YGEdgeLeft), + defaultYogaStyle.padding(YGEdgeLeft)), + debugStringConvertibleItem( + "paddingTop", + yogaStyle.padding(YGEdgeTop), + defaultYogaStyle.padding(YGEdgeTop)), debugStringConvertibleItem( - "margin", yogaStyle.margin(), defaultYogaStyle.margin()), + "paddingRight", + yogaStyle.padding(YGEdgeRight), + defaultYogaStyle.padding(YGEdgeRight)), debugStringConvertibleItem( - "position", yogaStyle.position(), defaultYogaStyle.position()), + "paddingBottom", + yogaStyle.padding(YGEdgeBottom), + defaultYogaStyle.padding(YGEdgeBottom)), debugStringConvertibleItem( - "padding", yogaStyle.padding(), defaultYogaStyle.padding()), + "paddingStart", + yogaStyle.padding(YGEdgeStart), + defaultYogaStyle.padding(YGEdgeStart)), debugStringConvertibleItem( - "border", yogaStyle.border(), defaultYogaStyle.border()), + "paddingEnd", + yogaStyle.padding(YGEdgeEnd), + defaultYogaStyle.padding(YGEdgeEnd)), + debugStringConvertibleItem( + "paddingHorizontal", + yogaStyle.padding(YGEdgeHorizontal), + defaultYogaStyle.padding(YGEdgeHorizontal)), + debugStringConvertibleItem( + "paddingVertical", + yogaStyle.padding(YGEdgeVertical), + defaultYogaStyle.padding(YGEdgeVertical)), + debugStringConvertibleItem( + "padding", + yogaStyle.padding(YGEdgeAll), + defaultYogaStyle.padding(YGEdgeAll)), + + debugStringConvertibleItem( + "borderLeft", + yogaStyle.border(YGEdgeLeft), + defaultYogaStyle.border(YGEdgeLeft)), + debugStringConvertibleItem( + "borderTop", + yogaStyle.border(YGEdgeTop), + defaultYogaStyle.border(YGEdgeTop)), + debugStringConvertibleItem( + "borderRight", + yogaStyle.border(YGEdgeRight), + defaultYogaStyle.border(YGEdgeRight)), + debugStringConvertibleItem( + "borderBottom", + yogaStyle.border(YGEdgeBottom), + defaultYogaStyle.border(YGEdgeBottom)), + debugStringConvertibleItem( + "borderStart", + yogaStyle.border(YGEdgeStart), + defaultYogaStyle.border(YGEdgeStart)), + debugStringConvertibleItem( + "borderEnd", + yogaStyle.border(YGEdgeEnd), + defaultYogaStyle.border(YGEdgeEnd)), + debugStringConvertibleItem( + "borderHorizontal", + yogaStyle.border(YGEdgeHorizontal), + defaultYogaStyle.border(YGEdgeHorizontal)), + debugStringConvertibleItem( + "borderVertical", + yogaStyle.border(YGEdgeVertical), + defaultYogaStyle.border(YGEdgeVertical)), + debugStringConvertibleItem( + "border", + yogaStyle.border(YGEdgeAll), + defaultYogaStyle.border(YGEdgeAll)), + debugStringConvertibleItem( "width", yogaStyle.dimension(yoga::Dimension::Width), @@ -387,18 +532,6 @@ void YogaStylableProps::convertRawPropAliases( const PropsParserContext& context, const YogaStylableProps& sourceProps, const RawProps& rawProps) { - inset = convertRawProp( - context, - rawProps, - "inset", - sourceProps.inset, - CompactValue::ofUndefined()); - insetBlock = convertRawProp( - context, - rawProps, - "insetBlock", - sourceProps.insetBlock, - CompactValue::ofUndefined()); insetBlockEnd = convertRawProp( context, rawProps, @@ -411,24 +544,18 @@ void YogaStylableProps::convertRawPropAliases( "insetBlockStart", sourceProps.insetBlockStart, CompactValue::ofUndefined()); - insetInline = convertRawProp( + insetInlineStart = convertRawProp( context, rawProps, - "insetInline", - sourceProps.insetInline, + "start", + sourceProps.insetInlineStart, CompactValue::ofUndefined()); insetInlineEnd = convertRawProp( context, rawProps, - "insetInlineEnd", + "end", sourceProps.insetInlineEnd, CompactValue::ofUndefined()); - insetInlineStart = convertRawProp( - context, - rawProps, - "insetInlineStart", - sourceProps.insetInlineStart, - CompactValue::ofUndefined()); marginInline = convertRawProp( context, rawProps, diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h index 6b529f7a7180fd..2f4f7bed2a3859 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h @@ -41,8 +41,6 @@ class YogaStylableProps : public Props { // Duplicates of existing properties with different names, taking // precedence. E.g. "marginBlock" instead of "marginVertical" - CompactValue inset; - CompactValue insetInline; CompactValue insetInlineEnd; CompactValue insetInlineStart; @@ -59,7 +57,6 @@ class YogaStylableProps : public Props { // BlockEnd/BlockStart map to top/bottom (no writing mode), but we preserve // Yoga's precedence and prefer specific edges (e.g. top) to ones which are // flow relative (e.g. blockStart). - CompactValue insetBlock; CompactValue insetBlockEnd; CompactValue insetBlockStart; diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h index c0edf7ce02dde9..2a82a16e85a1ce 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h @@ -395,7 +395,7 @@ inline void fromRawValue( inline void fromRawValue( const PropsParserContext& context, const RawValue& value, - yoga::Style::ValueRepr& result) { + yoga::CompactValue& result) { if (value.hasType()) { result = yoga::CompactValue::ofMaybe((float)value); return; @@ -428,7 +428,7 @@ inline void fromRawValue( const PropsParserContext& context, const RawValue& value, YGValue& result) { - yoga::Style::ValueRepr ygValue{}; + yoga::CompactValue ygValue{}; fromRawValue(context, value, ygValue); result = ygValue; } @@ -778,40 +778,6 @@ inline std::string toString(const yoga::FloatOptional& value) { return folly::to(floatFromYogaFloat(value.unwrap())); } -inline std::string toString(const yoga::Style::Dimensions& value) { - return "{" + toString(value[0]) + ", " + toString(value[1]) + "}"; -} - -inline std::string toString(const yoga::Style::Edges& value) { - static std::array names = { - {"left", - "top", - "right", - "bottom", - "start", - "end", - "horizontal", - "vertical", - "all"}}; - - auto result = std::string{}; - auto separator = std::string{", "}; - - for (size_t i = 0; i < names.size(); i++) { - YGValue v = value[i]; - if (v.unit == YGUnitUndefined) { - continue; - } - result += names[i] + ": " + toString(v) + separator; - } - - if (!result.empty()) { - result.erase(result.length() - separator.length()); - } - - return "{" + result + "}"; -} - inline std::string toString(const LayoutConformance& value) { switch (value) { case LayoutConformance::Undefined: diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/YogaStylablePropsMapBuffer.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/YogaStylablePropsMapBuffer.cpp index 640a407caec03b..663205dca10192 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/YogaStylablePropsMapBuffer.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/YogaStylablePropsMapBuffer.cpp @@ -13,22 +13,28 @@ namespace facebook::react { -MapBuffer convertBorderWidths(const yoga::Style::Edges& border) { +MapBuffer convertBorderWidths(const yoga::Style& style) { MapBufferBuilder builder(7); putOptionalFloat( - builder, EDGE_TOP, optionalFloatFromYogaValue(border[YGEdgeTop])); + builder, EDGE_TOP, optionalFloatFromYogaValue(style.border(YGEdgeTop))); putOptionalFloat( - builder, EDGE_RIGHT, optionalFloatFromYogaValue(border[YGEdgeRight])); + builder, + EDGE_RIGHT, + optionalFloatFromYogaValue(style.border(YGEdgeRight))); putOptionalFloat( - builder, EDGE_BOTTOM, optionalFloatFromYogaValue(border[YGEdgeBottom])); + builder, + EDGE_BOTTOM, + optionalFloatFromYogaValue(style.border(YGEdgeBottom))); putOptionalFloat( - builder, EDGE_LEFT, optionalFloatFromYogaValue(border[YGEdgeLeft])); + builder, EDGE_LEFT, optionalFloatFromYogaValue(style.border(YGEdgeLeft))); putOptionalFloat( - builder, EDGE_START, optionalFloatFromYogaValue(border[YGEdgeStart])); + builder, + EDGE_START, + optionalFloatFromYogaValue(style.border(YGEdgeStart))); putOptionalFloat( - builder, EDGE_END, optionalFloatFromYogaValue(border[YGEdgeEnd])); + builder, EDGE_END, optionalFloatFromYogaValue(style.border(YGEdgeEnd))); putOptionalFloat( - builder, EDGE_ALL, optionalFloatFromYogaValue(border[YGEdgeAll])); + builder, EDGE_ALL, optionalFloatFromYogaValue(style.border(YGEdgeAll))); return builder.build(); } @@ -54,9 +60,18 @@ void YogaStylableProps::propsDiffMapBuffer( const auto& oldStyle = oldProps.yogaStyle; const auto& newStyle = newProps.yogaStyle; - if (!(oldStyle.border() == newStyle.border())) { - builder.putMapBuffer( - YG_BORDER_WIDTH, convertBorderWidths(newStyle.border())); + bool areBordersEqual = [&]() { + for (int edge = YGEdgeLeft; edge != YGEdgeAll; ++edge) { + if (oldStyle.border(static_cast(edge)) != + newStyle.border(static_cast(edge))) { + return false; + } + } + return true; + }(); + + if (!areBordersEqual) { + builder.putMapBuffer(YG_BORDER_WIDTH, convertBorderWidths(newStyle)); } if (oldStyle.overflow() != newStyle.overflow()) { diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h index db085aa2ae566d..13af58193c4289 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h @@ -18,134 +18,6 @@ namespace facebook::react { // Nearly this entire file can be deleted when iterator-style Prop parsing // ships fully for View -static inline yoga::Style::Edges convertRawProp( - const PropsParserContext& context, - const RawProps& rawProps, - const char* prefix, - const char* suffix, - const yoga::Style::Edges& sourceValue, - const yoga::Style::Edges& defaultValue) { - auto result = defaultValue; - result[YGEdgeLeft] = convertRawProp( - context, - rawProps, - "Left", - sourceValue[YGEdgeLeft], - defaultValue[YGEdgeLeft], - prefix, - suffix); - result[YGEdgeTop] = convertRawProp( - context, - rawProps, - "Top", - sourceValue[YGEdgeTop], - defaultValue[YGEdgeTop], - prefix, - suffix); - result[YGEdgeRight] = convertRawProp( - context, - rawProps, - "Right", - sourceValue[YGEdgeRight], - defaultValue[YGEdgeRight], - prefix, - suffix); - result[YGEdgeBottom] = convertRawProp( - context, - rawProps, - "Bottom", - sourceValue[YGEdgeBottom], - defaultValue[YGEdgeBottom], - prefix, - suffix); - result[YGEdgeStart] = convertRawProp( - context, - rawProps, - "Start", - sourceValue[YGEdgeStart], - defaultValue[YGEdgeStart], - prefix, - suffix); - result[YGEdgeEnd] = convertRawProp( - context, - rawProps, - "End", - sourceValue[YGEdgeEnd], - defaultValue[YGEdgeEnd], - prefix, - suffix); - result[YGEdgeHorizontal] = convertRawProp( - context, - rawProps, - "Horizontal", - sourceValue[YGEdgeHorizontal], - defaultValue[YGEdgeHorizontal], - prefix, - suffix); - result[YGEdgeVertical] = convertRawProp( - context, - rawProps, - "Vertical", - sourceValue[YGEdgeVertical], - defaultValue[YGEdgeVertical], - prefix, - suffix); - result[YGEdgeAll] = convertRawProp( - context, - rawProps, - "", - sourceValue[YGEdgeAll], - defaultValue[YGEdgeAll], - prefix, - suffix); - return result; -} - -static inline yoga::Style::Edges convertRawProp( - const PropsParserContext& context, - const RawProps& rawProps, - const yoga::Style::Edges& sourceValue, - const yoga::Style::Edges& defaultValue) { - auto result = defaultValue; - result[YGEdgeLeft] = convertRawProp( - context, - rawProps, - "left", - sourceValue[YGEdgeLeft], - defaultValue[YGEdgeLeft]); - result[YGEdgeTop] = convertRawProp( - context, - rawProps, - "top", - sourceValue[YGEdgeTop], - defaultValue[YGEdgeTop]); - result[YGEdgeRight] = convertRawProp( - context, - rawProps, - "right", - sourceValue[YGEdgeRight], - defaultValue[YGEdgeRight]); - result[YGEdgeBottom] = convertRawProp( - context, - rawProps, - "bottom", - sourceValue[YGEdgeBottom], - defaultValue[YGEdgeBottom]); - result[YGEdgeStart] = convertRawProp( - context, - rawProps, - "start", - sourceValue[YGEdgeStart], - defaultValue[YGEdgeStart]); - result[YGEdgeEnd] = convertRawProp( - context, - rawProps, - "end", - sourceValue[YGEdgeEnd], - defaultValue[YGEdgeEnd]); - return result; -} - static inline yoga::Style convertRawProp( const PropsParserContext& context, const RawProps& rawProps, @@ -227,22 +99,249 @@ static inline yoga::Style convertRawProp( "flexBasis", sourceValue.flexBasis(), yogaStyle.flexBasis()); - yogaStyle.margin() = convertRawProp( - context, - rawProps, - "margin", - "", - sourceValue.margin(), - yogaStyle.margin()); - yogaStyle.position() = convertRawProp( - context, rawProps, sourceValue.position(), yogaStyle.position()); - yogaStyle.padding() = convertRawProp( - context, - rawProps, - "padding", - "", - sourceValue.padding(), - yogaStyle.padding()); + + yogaStyle.setMargin( + YGEdgeLeft, + convertRawProp( + context, + rawProps, + "marginLeft", + sourceValue.margin(YGEdgeLeft), + yogaStyle.margin(YGEdgeLeft))); + + yogaStyle.setMargin( + YGEdgeTop, + convertRawProp( + context, + rawProps, + "marginTop", + sourceValue.margin(YGEdgeTop), + yogaStyle.margin(YGEdgeTop))); + + yogaStyle.setMargin( + YGEdgeRight, + convertRawProp( + context, + rawProps, + "marginRight", + sourceValue.margin(YGEdgeRight), + yogaStyle.margin(YGEdgeRight))); + + yogaStyle.setMargin( + YGEdgeBottom, + convertRawProp( + context, + rawProps, + "marginBottom", + sourceValue.margin(YGEdgeBottom), + yogaStyle.margin(YGEdgeBottom))); + + yogaStyle.setMargin( + YGEdgeStart, + convertRawProp( + context, + rawProps, + "marginStart", + sourceValue.margin(YGEdgeStart), + yogaStyle.margin(YGEdgeStart))); + + yogaStyle.setMargin( + YGEdgeEnd, + convertRawProp( + context, + rawProps, + "marginEnd", + sourceValue.margin(YGEdgeEnd), + yogaStyle.margin(YGEdgeEnd))); + + yogaStyle.setMargin( + YGEdgeHorizontal, + convertRawProp( + context, + rawProps, + "marginHorizontal", + sourceValue.margin(YGEdgeHorizontal), + yogaStyle.margin(YGEdgeHorizontal))); + + yogaStyle.setMargin( + YGEdgeVertical, + convertRawProp( + context, + rawProps, + "marginVertical", + sourceValue.margin(YGEdgeVertical), + yogaStyle.margin(YGEdgeVertical))); + + yogaStyle.setMargin( + YGEdgeAll, + convertRawProp( + context, + rawProps, + "margin", + sourceValue.margin(YGEdgeAll), + yogaStyle.margin(YGEdgeAll))); + + yogaStyle.setPosition( + YGEdgeLeft, + convertRawProp( + context, + rawProps, + "left", + sourceValue.position(YGEdgeLeft), + yogaStyle.position(YGEdgeLeft))); + + yogaStyle.setPosition( + YGEdgeTop, + convertRawProp( + context, + rawProps, + "top", + sourceValue.position(YGEdgeTop), + yogaStyle.position(YGEdgeTop))); + + yogaStyle.setPosition( + YGEdgeRight, + convertRawProp( + context, + rawProps, + "right", + sourceValue.position(YGEdgeRight), + yogaStyle.position(YGEdgeRight))); + + yogaStyle.setPosition( + YGEdgeBottom, + convertRawProp( + context, + rawProps, + "bottom", + sourceValue.position(YGEdgeBottom), + yogaStyle.position(YGEdgeBottom))); + + yogaStyle.setPosition( + YGEdgeStart, + convertRawProp( + context, + rawProps, + "start", + sourceValue.position(YGEdgeStart), + yogaStyle.position(YGEdgeStart))); + + yogaStyle.setPosition( + YGEdgeEnd, + convertRawProp( + context, + rawProps, + "end", + sourceValue.position(YGEdgeEnd), + yogaStyle.position(YGEdgeEnd))); + + yogaStyle.setPosition( + YGEdgeHorizontal, + convertRawProp( + context, + rawProps, + "insetInline", + sourceValue.position(YGEdgeHorizontal), + yogaStyle.position(YGEdgeHorizontal))); + + yogaStyle.setPosition( + YGEdgeVertical, + convertRawProp( + context, + rawProps, + "insetBlock", + sourceValue.position(YGEdgeVertical), + yogaStyle.position(YGEdgeVertical))); + + yogaStyle.setPosition( + YGEdgeAll, + convertRawProp( + context, + rawProps, + "inset", + sourceValue.position(YGEdgeAll), + yogaStyle.position(YGEdgeAll))); + + yogaStyle.setPadding( + YGEdgeLeft, + convertRawProp( + context, + rawProps, + "paddingLeft", + sourceValue.padding(YGEdgeLeft), + yogaStyle.padding(YGEdgeLeft))); + + yogaStyle.setPadding( + YGEdgeTop, + convertRawProp( + context, + rawProps, + "paddingTop", + sourceValue.padding(YGEdgeTop), + yogaStyle.padding(YGEdgeTop))); + + yogaStyle.setPadding( + YGEdgeRight, + convertRawProp( + context, + rawProps, + "paddingRight", + sourceValue.padding(YGEdgeRight), + yogaStyle.padding(YGEdgeRight))); + + yogaStyle.setPadding( + YGEdgeBottom, + convertRawProp( + context, + rawProps, + "paddingBottom", + sourceValue.padding(YGEdgeBottom), + yogaStyle.padding(YGEdgeBottom))); + + yogaStyle.setPadding( + YGEdgeStart, + convertRawProp( + context, + rawProps, + "paddingStart", + sourceValue.padding(YGEdgeStart), + yogaStyle.padding(YGEdgeStart))); + + yogaStyle.setPadding( + YGEdgeEnd, + convertRawProp( + context, + rawProps, + "paddingEnd", + sourceValue.padding(YGEdgeEnd), + yogaStyle.padding(YGEdgeEnd))); + + yogaStyle.setPadding( + YGEdgeHorizontal, + convertRawProp( + context, + rawProps, + "paddingHorizontal", + sourceValue.padding(YGEdgeHorizontal), + yogaStyle.padding(YGEdgeHorizontal))); + + yogaStyle.setPadding( + YGEdgeVertical, + convertRawProp( + context, + rawProps, + "paddingVertical", + sourceValue.padding(YGEdgeVertical), + yogaStyle.padding(YGEdgeVertical))); + + yogaStyle.setPadding( + YGEdgeAll, + convertRawProp( + context, + rawProps, + "padding", + sourceValue.padding(YGEdgeAll), + yogaStyle.padding(YGEdgeAll))); yogaStyle.setGap( yoga::Gutter::Row, @@ -271,13 +370,86 @@ static inline yoga::Style convertRawProp( sourceValue.gap(yoga::Gutter::All), yogaStyle.gap(yoga::Gutter::All))); - yogaStyle.border() = convertRawProp( - context, - rawProps, - "border", - "Width", - sourceValue.border(), - yogaStyle.border()); + yogaStyle.setBorder( + YGEdgeLeft, + convertRawProp( + context, + rawProps, + "borderLeftWidth", + sourceValue.border(YGEdgeLeft), + yogaStyle.border(YGEdgeLeft))); + + yogaStyle.setBorder( + YGEdgeTop, + convertRawProp( + context, + rawProps, + "borderTopWidth", + sourceValue.border(YGEdgeTop), + yogaStyle.border(YGEdgeTop))); + + yogaStyle.setBorder( + YGEdgeRight, + convertRawProp( + context, + rawProps, + "borderRightWidth", + sourceValue.border(YGEdgeRight), + yogaStyle.border(YGEdgeRight))); + + yogaStyle.setBorder( + YGEdgeBottom, + convertRawProp( + context, + rawProps, + "borderBottomWidth", + sourceValue.border(YGEdgeBottom), + yogaStyle.border(YGEdgeBottom))); + + yogaStyle.setBorder( + YGEdgeStart, + convertRawProp( + context, + rawProps, + "borderStartWidth", + sourceValue.border(YGEdgeStart), + yogaStyle.border(YGEdgeStart))); + + yogaStyle.setBorder( + YGEdgeEnd, + convertRawProp( + context, + rawProps, + "borderEndWidth", + sourceValue.border(YGEdgeEnd), + yogaStyle.border(YGEdgeEnd))); + + yogaStyle.setBorder( + YGEdgeHorizontal, + convertRawProp( + context, + rawProps, + "borderHorizontalWidth", + sourceValue.border(YGEdgeHorizontal), + yogaStyle.border(YGEdgeHorizontal))); + + yogaStyle.setBorder( + YGEdgeVertical, + convertRawProp( + context, + rawProps, + "borderVerticalWidth", + sourceValue.border(YGEdgeVertical), + yogaStyle.border(YGEdgeVertical))); + + yogaStyle.setBorder( + YGEdgeAll, + convertRawProp( + context, + rawProps, + "borderWidth", + sourceValue.border(YGEdgeAll), + yogaStyle.border(YGEdgeAll))); yogaStyle.setDimension( yoga::Dimension::Width, diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp index 0e53f62e809bc4..b0be9bc7f1e32d 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp @@ -103,8 +103,8 @@ class LayoutTest : public ::testing::Test { auto &props = *sharedProps; auto &yogaStyle = props.yogaStyle; yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{10, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{10, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(10)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(10)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(30)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(90)); @@ -136,8 +136,8 @@ class LayoutTest : public ::testing::Test { } yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{10, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{10, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(10)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(10)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(110)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(20)); return sharedProps; @@ -151,8 +151,8 @@ class LayoutTest : public ::testing::Test { auto &props = *sharedProps; auto &yogaStyle = props.yogaStyle; yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{70, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{-50, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(70)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(-50)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(30)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(60)); return sharedProps; @@ -166,8 +166,8 @@ class LayoutTest : public ::testing::Test { auto &props = *sharedProps; auto &yogaStyle = props.yogaStyle; yogaStyle.positionType() = yoga::PositionType::Absolute; - yogaStyle.position()[YGEdgeLeft] = YGValue{-60, YGUnitPoint}; - yogaStyle.position()[YGEdgeTop] = YGValue{50, YGUnitPoint}; + yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of(-60)); + yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of(50)); yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of(70)); yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of(20)); return sharedProps; diff --git a/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp b/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp index 262e7e10c2f541..ab06e2f8ccce76 100644 --- a/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp +++ b/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp @@ -251,8 +251,8 @@ TEST_F(StackingContextTest, mostPropsDoNotForceViewsToMaterialize) { mutateViewShadowNodeProps_(nodeAA_, [](ViewProps& props) { auto& yogaStyle = props.yogaStyle; - yogaStyle.padding()[YGEdgeAll] = YGValue{42, YGUnitPoint}; - yogaStyle.margin()[YGEdgeAll] = YGValue{42, YGUnitPoint}; + yogaStyle.setPadding(YGEdgeAll, yoga::CompactValue::of(42)); + yogaStyle.setMargin(YGEdgeAll, yoga::CompactValue::of(42)); yogaStyle.positionType() = yoga::PositionType::Absolute; props.shadowRadius = 42; props.shadowOffset = Size{42, 42}; @@ -262,7 +262,7 @@ TEST_F(StackingContextTest, mostPropsDoNotForceViewsToMaterialize) { mutateViewShadowNodeProps_(nodeBA_, [](ViewProps& props) { auto& yogaStyle = props.yogaStyle; props.zIndex = 42; - yogaStyle.margin()[YGEdgeAll] = YGValue{42, YGUnitPoint}; + yogaStyle.setMargin(YGEdgeAll, yoga::CompactValue::of(42)); props.shadowColor = clearColor(); props.shadowOpacity = 0.42; }); diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp index 57d352cd01685d..38a55f2c8c8a31 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp @@ -35,19 +35,6 @@ void updateStyle(YGNodeRef node, Ref (Style::*prop)(), T value) { [prop](Style& s, T x) { (s.*prop)() = x; }); } -template -void updateIndexedStyleProp( - YGNodeRef node, - Ref (Style::*prop)(), - Idx idx, - CompactValue value) { - updateStyle( - resolveRef(node), - value, - [idx, prop](Style& s, CompactValue x) { return (s.*prop)()[idx] != x; }, - [idx, prop](Style& s, CompactValue x) { (s.*prop)()[idx] = x; }); -} - template void updateIndexedStyleProp(YGNodeRef node, IdxT idx, CompactValue value) { updateStyle( @@ -237,53 +224,53 @@ YGValue YGNodeStyleGetFlexBasis(const YGNodeConstRef node) { void YGNodeStyleSetPosition(YGNodeRef node, YGEdge edge, float points) { auto value = CompactValue::ofMaybe(points); - updateIndexedStyleProp( - node, &Style::position, edge, value); + updateIndexedStyleProp<&Style::position, &Style::setPosition>( + node, edge, value); } void YGNodeStyleSetPositionPercent(YGNodeRef node, YGEdge edge, float percent) { auto value = CompactValue::ofMaybe(percent); - updateIndexedStyleProp( - node, &Style::position, edge, value); + updateIndexedStyleProp<&Style::position, &Style::setPosition>( + node, edge, value); } YGValue YGNodeStyleGetPosition(YGNodeConstRef node, YGEdge edge) { - return resolveRef(node)->getStyle().position()[edge]; + return resolveRef(node)->getStyle().position(edge); } void YGNodeStyleSetMargin(YGNodeRef node, YGEdge edge, float points) { auto value = CompactValue::ofMaybe(points); - updateIndexedStyleProp(node, &Style::margin, edge, value); + updateIndexedStyleProp<&Style::margin, &Style::setMargin>(node, edge, value); } void YGNodeStyleSetMarginPercent(YGNodeRef node, YGEdge edge, float percent) { auto value = CompactValue::ofMaybe(percent); - updateIndexedStyleProp(node, &Style::margin, edge, value); + updateIndexedStyleProp<&Style::margin, &Style::setMargin>(node, edge, value); } void YGNodeStyleSetMarginAuto(YGNodeRef node, YGEdge edge) { - updateIndexedStyleProp( - node, &Style::margin, edge, CompactValue::ofAuto()); + updateIndexedStyleProp<&Style::margin, &Style::setMargin>( + node, edge, CompactValue::ofAuto()); } YGValue YGNodeStyleGetMargin(YGNodeConstRef node, YGEdge edge) { - return resolveRef(node)->getStyle().margin()[edge]; + return resolveRef(node)->getStyle().margin(edge); } void YGNodeStyleSetPadding(YGNodeRef node, YGEdge edge, float points) { auto value = CompactValue::ofMaybe(points); - updateIndexedStyleProp( - node, &Style::padding, edge, value); + updateIndexedStyleProp<&Style::padding, &Style::setPadding>( + node, edge, value); } void YGNodeStyleSetPaddingPercent(YGNodeRef node, YGEdge edge, float percent) { auto value = CompactValue::ofMaybe(percent); - updateIndexedStyleProp( - node, &Style::padding, edge, value); + updateIndexedStyleProp<&Style::padding, &Style::setPadding>( + node, edge, value); } YGValue YGNodeStyleGetPadding(YGNodeConstRef node, YGEdge edge) { - return resolveRef(node)->getStyle().padding()[edge]; + return resolveRef(node)->getStyle().padding(edge); } void YGNodeStyleSetBorder( @@ -291,11 +278,11 @@ void YGNodeStyleSetBorder( const YGEdge edge, const float border) { auto value = CompactValue::ofMaybe(border); - updateIndexedStyleProp(node, &Style::border, edge, value); + updateIndexedStyleProp<&Style::border, &Style::setBorder>(node, edge, value); } float YGNodeStyleGetBorder(const YGNodeConstRef node, const YGEdge edge) { - auto border = resolveRef(node)->getStyle().border()[edge]; + auto border = resolveRef(node)->getStyle().border(edge); if (border.isUndefined() || border.isAuto()) { return YGUndefined; } diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexDirection.h b/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexDirection.h index 3770783b7e7d71..a8ee7586aeb849 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexDirection.h +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexDirection.h @@ -11,6 +11,7 @@ #include #include +#include #include namespace facebook::yoga { diff --git a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp index 2388a744539dbe..e43ce2a254ee23 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp @@ -7,8 +7,10 @@ #include +#include #include #include +#include namespace facebook::yoga { diff --git a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h index 929ff1792d0d8f..bbd8ad19eabbf0 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h +++ b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h @@ -8,11 +8,12 @@ #pragma once #include -#include -#include namespace facebook::yoga { +class Node; +class Config; + [[noreturn]] void fatalWithMessage(const char* message); void assertFatal(bool condition, const char* message); diff --git a/packages/react-native/ReactCommon/yoga/yoga/debug/NodeToString.cpp b/packages/react-native/ReactCommon/yoga/yoga/debug/NodeToString.cpp index a2bf467bede115..107c50e4bb9bdd 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/debug/NodeToString.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/debug/NodeToString.cpp @@ -23,12 +23,6 @@ static void indent(std::string& base, uint32_t level) { } } -static bool areFourValuesEqual(const Style::Edges& four) { - return yoga::inexactEquals(four[0], four[1]) && - yoga::inexactEquals(four[0], four[2]) && - yoga::inexactEquals(four[0], four[3]); -} - static void appendFormattedString(std::string& str, const char* fmt, ...) { va_list args; va_start(args, fmt); @@ -86,33 +80,15 @@ static void appendNumberIfNotZero( } } -static void appendEdges( - std::string& base, - const std::string& key, - const Style::Edges& edges) { - if (areFourValuesEqual(edges)) { - auto edgeValue = yoga::Node::computeEdgeValueForColumn(edges, YGEdgeLeft); - appendNumberIfNotUndefined(base, key, edgeValue); - } else { - for (int edge = YGEdgeLeft; edge != YGEdgeAll; ++edge) { - std::string str = key + "-" + YGEdgeToString(static_cast(edge)); - appendNumberIfNotZero(base, str, edges[static_cast(edge)]); - } +template +static void +appendEdges(std::string& base, const std::string& key, const Style& style) { + for (int edge = YGEdgeLeft; edge != YGEdgeAll; ++edge) { + std::string str = key + "-" + YGEdgeToString(static_cast(edge)); + appendNumberIfNotZero(base, str, (style.*Field)(static_cast(edge))); } } -static void appendEdgeIfNotUndefined( - std::string& base, - const std::string& str, - const Style::Edges& edges, - const YGEdge edge) { - // TODO: this doesn't take RTL / YGEdgeStart / YGEdgeEnd into account - auto value = (edge == YGEdgeLeft || edge == YGEdgeRight) - ? yoga::Node::computeEdgeValueForRow(edges, edge, edge) - : yoga::Node::computeEdgeValueForColumn(edges, edge); - appendNumberIfNotUndefined(base, str, value); -} - void nodeToString( std::string& str, const yoga::Node* node, @@ -173,9 +149,9 @@ void nodeToString( if (style.display() != yoga::Node{}.getStyle().display()) { appendFormattedString(str, "display: %s; ", toString(style.display())); } - appendEdges(str, "margin", style.margin()); - appendEdges(str, "padding", style.padding()); - appendEdges(str, "border", style.border()); + appendEdges<&Style::margin>(str, "margin", style); + appendEdges<&Style::padding>(str, "padding", style); + appendEdges<&Style::border>(str, "border", style); if (style.gap(Gutter::All).isDefined()) { appendNumberIfNotUndefined(str, "gap", style.gap(Gutter::All)); @@ -200,10 +176,7 @@ void nodeToString( str, "position: %s; ", toString(style.positionType())); } - appendEdgeIfNotUndefined(str, "left", style.position(), YGEdgeLeft); - appendEdgeIfNotUndefined(str, "right", style.position(), YGEdgeRight); - appendEdgeIfNotUndefined(str, "top", style.position(), YGEdgeTop); - appendEdgeIfNotUndefined(str, "bottom", style.position(), YGEdgeBottom); + appendEdges<&Style::position>(str, "position", style); appendFormattedString(str, "\" "); if (node->hasMeasureFunc()) { diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp index e69c96f5aeddee..e5100ee2815137 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp @@ -56,30 +56,29 @@ void Node::print() { } } -CompactValue Node::computeEdgeValueForRow( - const Style::Edges& edges, - YGEdge rowEdge, - YGEdge edge) { - if (edges[rowEdge].isDefined()) { - return edges[rowEdge]; - } else if (edges[edge].isDefined()) { - return edges[edge]; - } else if (edges[YGEdgeHorizontal].isDefined()) { - return edges[YGEdgeHorizontal]; +// TODO: Edge value resolution should be moved to `yoga::Style` +template +CompactValue Node::computeEdgeValueForRow(YGEdge rowEdge, YGEdge edge) const { + if ((style_.*Field)(rowEdge).isDefined()) { + return (style_.*Field)(rowEdge); + } else if ((style_.*Field)(edge).isDefined()) { + return (style_.*Field)(edge); + } else if ((style_.*Field)(YGEdgeHorizontal).isDefined()) { + return (style_.*Field)(YGEdgeHorizontal); } else { - return edges[YGEdgeAll]; + return (style_.*Field)(YGEdgeAll); } } -CompactValue Node::computeEdgeValueForColumn( - const Style::Edges& edges, - YGEdge edge) { - if (edges[edge].isDefined()) { - return edges[edge]; - } else if (edges[YGEdgeVertical].isDefined()) { - return edges[YGEdgeVertical]; +// TODO: Edge value resolution should be moved to `yoga::Style` +template +CompactValue Node::computeEdgeValueForColumn(YGEdge edge) const { + if ((style_.*Field)(edge).isDefined()) { + return (style_.*Field)(edge); + } else if ((style_.*Field)(YGEdgeVertical).isDefined()) { + return (style_.*Field)(YGEdgeVertical); } else { - return edges[YGEdgeAll]; + return (style_.*Field)(YGEdgeAll); } } @@ -102,8 +101,8 @@ YGEdge Node::getInlineEndEdgeUsingErrata( bool Node::isFlexStartPositionDefined(FlexDirection axis) const { const YGEdge startEdge = flexStartEdge(axis); auto leadingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.position(), startEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::position>(startEdge); return leadingPosition.isDefined(); } @@ -112,8 +111,8 @@ bool Node::isInlineStartPositionDefined(FlexDirection axis, Direction direction) const { const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction); auto leadingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.position(), startEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::position>(startEdge); return leadingPosition.isDefined(); } @@ -121,8 +120,8 @@ bool Node::isInlineStartPositionDefined(FlexDirection axis, Direction direction) bool Node::isFlexEndPositionDefined(FlexDirection axis) const { const YGEdge endEdge = flexEndEdge(axis); auto trailingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.position(), endEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::position>(endEdge); return !trailingPosition.isUndefined(); } @@ -131,8 +130,8 @@ bool Node::isInlineEndPositionDefined(FlexDirection axis, Direction direction) const { const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction); auto trailingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.position(), endEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::position>(endEdge); return trailingPosition.isDefined(); } @@ -140,8 +139,8 @@ bool Node::isInlineEndPositionDefined(FlexDirection axis, Direction direction) float Node::getFlexStartPosition(FlexDirection axis, float axisSize) const { const YGEdge startEdge = flexStartEdge(axis); auto leadingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.position(), startEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::position>(startEdge); return resolveValue(leadingPosition, axisSize).unwrapOrDefault(0.0f); } @@ -152,8 +151,8 @@ float Node::getInlineStartPosition( float axisSize) const { const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction); auto leadingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.position(), startEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::position>(startEdge); return resolveValue(leadingPosition, axisSize).unwrapOrDefault(0.0f); } @@ -161,8 +160,8 @@ float Node::getInlineStartPosition( float Node::getFlexEndPosition(FlexDirection axis, float axisSize) const { const YGEdge endEdge = flexEndEdge(axis); auto trailingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.position(), endEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::position>(endEdge); return resolveValue(trailingPosition, axisSize).unwrapOrDefault(0.0f); } @@ -173,8 +172,8 @@ float Node::getInlineEndPosition( float axisSize) const { const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction); auto trailingPosition = isRow(axis) - ? computeEdgeValueForRow(style_.position(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.position(), endEdge); + ? computeEdgeValueForRow<&Style::position>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::position>(endEdge); return resolveValue(trailingPosition, axisSize).unwrapOrDefault(0.0f); } @@ -182,8 +181,8 @@ float Node::getInlineEndPosition( float Node::getFlexStartMargin(FlexDirection axis, float widthSize) const { const YGEdge startEdge = flexStartEdge(axis); auto leadingMargin = isRow(axis) - ? computeEdgeValueForRow(style_.margin(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.margin(), startEdge); + ? computeEdgeValueForRow<&Style::margin>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::margin>(startEdge); return resolveValue(leadingMargin, widthSize).unwrapOrDefault(0.0f); } @@ -194,8 +193,8 @@ float Node::getInlineStartMargin( float widthSize) const { const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction); auto leadingMargin = isRow(axis) - ? computeEdgeValueForRow(style_.margin(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.margin(), startEdge); + ? computeEdgeValueForRow<&Style::margin>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::margin>(startEdge); return resolveValue(leadingMargin, widthSize).unwrapOrDefault(0.0f); } @@ -203,8 +202,8 @@ float Node::getInlineStartMargin( float Node::getFlexEndMargin(FlexDirection axis, float widthSize) const { const YGEdge endEdge = flexEndEdge(axis); auto trailingMargin = isRow(axis) - ? computeEdgeValueForRow(style_.margin(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.margin(), endEdge); + ? computeEdgeValueForRow<&Style::margin>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::margin>(endEdge); return resolveValue(trailingMargin, widthSize).unwrapOrDefault(0.0f); } @@ -215,8 +214,8 @@ float Node::getInlineEndMargin( float widthSize) const { const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction); auto trailingMargin = isRow(axis) - ? computeEdgeValueForRow(style_.margin(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.margin(), endEdge); + ? computeEdgeValueForRow<&Style::margin>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::margin>(endEdge); return resolveValue(trailingMargin, widthSize).unwrapOrDefault(0.0f); } @@ -225,8 +224,8 @@ float Node::getInlineStartBorder(FlexDirection axis, Direction direction) const { const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction); YGValue leadingBorder = isRow(axis) - ? computeEdgeValueForRow(style_.border(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.border(), startEdge); + ? computeEdgeValueForRow<&Style::border>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::border>(startEdge); return maxOrDefined(leadingBorder.value, 0.0f); } @@ -235,9 +234,9 @@ float Node::getFlexStartBorder(FlexDirection axis, Direction direction) const { const YGEdge leadRelativeFlexItemEdge = flexStartRelativeEdge(axis, direction); YGValue leadingBorder = isRow(axis) - ? computeEdgeValueForRow( - style_.border(), leadRelativeFlexItemEdge, flexStartEdge(axis)) - : computeEdgeValueForColumn(style_.border(), flexStartEdge(axis)); + ? computeEdgeValueForRow<&Style::border>( + leadRelativeFlexItemEdge, flexStartEdge(axis)) + : computeEdgeValueForColumn<&Style::border>(flexStartEdge(axis)); return maxOrDefined(leadingBorder.value, 0.0f); } @@ -245,8 +244,8 @@ float Node::getFlexStartBorder(FlexDirection axis, Direction direction) const { float Node::getInlineEndBorder(FlexDirection axis, Direction direction) const { const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction); YGValue trailingBorder = isRow(axis) - ? computeEdgeValueForRow(style_.border(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.border(), endEdge); + ? computeEdgeValueForRow<&Style::border>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::border>(endEdge); return maxOrDefined(trailingBorder.value, 0.0f); } @@ -254,9 +253,9 @@ float Node::getInlineEndBorder(FlexDirection axis, Direction direction) const { float Node::getFlexEndBorder(FlexDirection axis, Direction direction) const { const YGEdge trailRelativeFlexItemEdge = flexEndRelativeEdge(axis, direction); YGValue trailingBorder = isRow(axis) - ? computeEdgeValueForRow( - style_.border(), trailRelativeFlexItemEdge, flexEndEdge(axis)) - : computeEdgeValueForColumn(style_.border(), flexEndEdge(axis)); + ? computeEdgeValueForRow<&Style::border>( + trailRelativeFlexItemEdge, flexEndEdge(axis)) + : computeEdgeValueForColumn<&Style::border>(flexEndEdge(axis)); return maxOrDefined(trailingBorder.value, 0.0f); } @@ -267,8 +266,8 @@ float Node::getInlineStartPadding( float widthSize) const { const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction); auto leadingPadding = isRow(axis) - ? computeEdgeValueForRow(style_.padding(), YGEdgeStart, startEdge) - : computeEdgeValueForColumn(style_.padding(), startEdge); + ? computeEdgeValueForRow<&Style::padding>(YGEdgeStart, startEdge) + : computeEdgeValueForColumn<&Style::padding>(startEdge); return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f); } @@ -280,9 +279,9 @@ float Node::getFlexStartPadding( const YGEdge leadRelativeFlexItemEdge = flexStartRelativeEdge(axis, direction); auto leadingPadding = isRow(axis) - ? computeEdgeValueForRow( - style_.padding(), leadRelativeFlexItemEdge, flexStartEdge(axis)) - : computeEdgeValueForColumn(style_.padding(), flexStartEdge(axis)); + ? computeEdgeValueForRow<&Style::padding>( + leadRelativeFlexItemEdge, flexStartEdge(axis)) + : computeEdgeValueForColumn<&Style::padding>(flexStartEdge(axis)); return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f); } @@ -293,8 +292,8 @@ float Node::getInlineEndPadding( float widthSize) const { const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction); auto trailingPadding = isRow(axis) - ? computeEdgeValueForRow(style_.padding(), YGEdgeEnd, endEdge) - : computeEdgeValueForColumn(style_.padding(), endEdge); + ? computeEdgeValueForRow<&Style::padding>(YGEdgeEnd, endEdge) + : computeEdgeValueForColumn<&Style::padding>(endEdge); return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f); } @@ -305,9 +304,9 @@ float Node::getFlexEndPadding( float widthSize) const { const YGEdge trailRelativeFlexItemEdge = flexEndRelativeEdge(axis, direction); auto trailingPadding = isRow(axis) - ? computeEdgeValueForRow( - style_.padding(), trailRelativeFlexItemEdge, flexEndEdge(axis)) - : computeEdgeValueForColumn(style_.padding(), flexEndEdge(axis)); + ? computeEdgeValueForRow<&Style::padding>( + trailRelativeFlexItemEdge, flexEndEdge(axis)) + : computeEdgeValueForColumn<&Style::padding>(flexEndEdge(axis)); return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f); } @@ -565,18 +564,18 @@ void Node::setPosition( } YGValue Node::getFlexStartMarginValue(FlexDirection axis) const { - if (isRow(axis) && style_.margin()[YGEdgeStart].isDefined()) { - return style_.margin()[YGEdgeStart]; + if (isRow(axis) && style_.margin(YGEdgeStart).isDefined()) { + return style_.margin(YGEdgeStart); } else { - return style_.margin()[flexStartEdge(axis)]; + return style_.margin(flexStartEdge(axis)); } } YGValue Node::marginTrailingValue(FlexDirection axis) const { - if (isRow(axis) && style_.margin()[YGEdgeEnd].isDefined()) { - return style_.margin()[YGEdgeEnd]; + if (isRow(axis) && style_.margin(YGEdgeEnd).isDefined()) { + return style_.margin(YGEdgeEnd); } else { - return style_.margin()[flexEndEdge(axis)]; + return style_.margin(flexEndEdge(axis)); } } diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h index 601e153fea8a99..9fefcf15aa0b99 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h +++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h @@ -65,6 +65,12 @@ class YG_EXPORT Node : public ::YGNode { style_.alignContent() = Align::Stretch; } + template + CompactValue computeEdgeValueForColumn(YGEdge edge) const; + + template + CompactValue computeEdgeValueForRow(YGEdge rowEdge, YGEdge edge) const; + // DANGER DANGER DANGER! // If the node assigned to has children, we'd either have to deallocate // them (potentially incorrect) or ignore them (danger of leaks). Only ever @@ -189,15 +195,6 @@ class YG_EXPORT Node : public ::YGNode { return resolvedDimensions_[static_cast(dimension)]; } - static CompactValue computeEdgeValueForColumn( - const Style::Edges& edges, - YGEdge edge); - - static CompactValue computeEdgeValueForRow( - const Style::Edges& edges, - YGEdge rowEdge, - YGEdge edge); - // Methods related to positions, margin, padding and border bool isFlexStartPositionDefined(FlexDirection axis) const; bool isInlineStartPositionDefined(FlexDirection axis, Direction direction) diff --git a/packages/react-native/ReactCommon/yoga/yoga/style/Style.h b/packages/react-native/ReactCommon/yoga/yoga/style/Style.h index 3eb5cadd195e16..06fbe23bb8ff5a 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/style/Style.h +++ b/packages/react-native/ReactCommon/yoga/yoga/style/Style.h @@ -34,11 +34,11 @@ class YG_EXPORT Style { template using Values = std::array()>; - public: using Dimensions = Values; using Edges = Values; using Gutters = Values; + public: static constexpr float DefaultFlexGrow = 0.0f; static constexpr float DefaultFlexShrink = 0.0f; static constexpr float WebDefaultFlexShrink = 1.0f; @@ -68,39 +68,6 @@ class YG_EXPORT Style { } }; - template Style::*Prop> - struct IdxRef { - struct Ref { - Style& style; - Idx idx; - operator CompactValue() const { - return (style.*Prop)[idx]; - } - operator YGValue() const { - return (style.*Prop)[idx]; - } - Ref& operator=(CompactValue value) { - (style.*Prop)[idx] = value; - return *this; - } - }; - - Style& style; - IdxRef& operator=(const Values& values) { - style.*Prop = values; - return *this; - } - operator const Values&() const { - return style.*Prop; - } - Ref operator[](Idx idx) { - return {style, idx}; - } - CompactValue operator[](Idx idx) const { - return (style.*Prop)[idx]; - } - }; - Style() { alignContent() = Align::FlexStart; alignItems() = Align::Stretch; @@ -146,9 +113,6 @@ class YG_EXPORT Style { FloatOptional aspectRatio_ = {}; public: - // for library users needing a type - using ValueRepr = std::remove_reference::type; - Direction direction() const { return getEnumData(flags, directionOffset); } @@ -247,32 +211,32 @@ class YG_EXPORT Style { return {*this}; } - const Edges& margin() const { - return margin_; + CompactValue margin(YGEdge edge) const { + return margin_[edge]; } - IdxRef margin() { - return {*this}; + void setMargin(YGEdge edge, CompactValue value) { + margin_[edge] = value; } - const Edges& position() const { - return position_; + CompactValue position(YGEdge edge) const { + return position_[edge]; } - IdxRef position() { - return {*this}; + void setPosition(YGEdge edge, CompactValue value) { + position_[edge] = value; } - const Edges& padding() const { - return padding_; + CompactValue padding(YGEdge edge) const { + return padding_[edge]; } - IdxRef padding() { - return {*this}; + void setPadding(YGEdge edge, CompactValue value) { + padding_[edge] = value; } - const Edges& border() const { - return border_; + CompactValue border(YGEdge edge) const { + return border_[edge]; } - IdxRef border() { - return {*this}; + void setBorder(YGEdge edge, CompactValue value) { + border_[edge] = value; } CompactValue gap(Gutter gutter) const {