Incorporate gap space into main axis overflow flag #1173
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Summary: In facebook/react-native#35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap. In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization? If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead. `flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`. We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap. Differential Revision: D41311424 fbshipit-source-id: 7d04bbe7bf09f0ca3481d3ff2a7c23b67f359b3e
|
This pull request was exported from Phabricator. Differential Revision: D41311424 |
NickGerleman
commented
Nov 15, 2022
| @@ -2899,10 +2900,15 @@ static void YGNodelayoutImpl( | |||
| depth, | |||
| generationCount); | |||
|
|
|||
| const bool flexBasisOverflows = measureModeMainDim == YGMeasureModeUndefined | |||
| float totalGap = childCount == 0 | |||
There was a problem hiding this comment.
Suggested change
| float totalGap = childCount == 0 | |
| float totalGap = childCount <= 1 |
There was a problem hiding this comment.
Both work I guess, one skips a bit of math.
jacobp100
reviewed
Nov 15, 2022
| @@ -2884,7 +2884,8 @@ static void YGNodelayoutImpl( | |||
|
|
|||
| // STEP 3: DETERMINE FLEX BASIS FOR EACH ITEM | |||
|
|
|||
| float totalOuterFlexBasis = YGNodeComputeFlexBasisForChildren( | |||
| // Computed basis + margins | |||
| const float totalOuterFlexBasis = YGNodeComputeFlexBasisForChildren( | |||
There was a problem hiding this comment.
Because this function is only called once, should we change it to return the main axis size?
There was a problem hiding this comment.
I was looking at that, but it isn't super clean, since the main purpose of the function is to mutate each node with its calculated basis. Imo it shouldn't be adding margin either, but that is already per child so doing it during the iteration makes sense to me.
|
I think what you’ve done makes sense in the current code I’m confused why we do all this calculation at all. Don’t we already know if the children wrapped at this point - and is that not the same thing? |
I think this place is the first place we can check. This is directly after we calculate flex basis per-item, which allows us to know if wrapping will happen. Then later we break into specific lines, and that calculation is item-by-item adding leading gap. |
facebook-github-bot
pushed a commit
to facebook/litho
that referenced
this pull request
Nov 16, 2022
Summary: X-link: facebook/yoga#1173 In facebook/react-native#35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap. In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization? If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead. `flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`. We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap. Changelog: [General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched Reviewed By: yungsters Differential Revision: D41311424 fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
facebook-github-bot
pushed a commit
to facebook/react-native
that referenced
this pull request
Nov 16, 2022
Summary: X-link: facebook/yoga#1173 In #35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap. In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization? If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead. `flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`. We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap. Changelog: [General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched Reviewed By: yungsters Differential Revision: D41311424 fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
NickGerleman
added a commit
to facebook/react-native
that referenced
this pull request
Nov 16, 2022
Summary: X-link: facebook/yoga#1173 In #35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap. In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization? If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead. `flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`. We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap. Changelog: [General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched Reviewed By: yungsters Differential Revision: D41311424 fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
kelset
pushed a commit
to facebook/react-native
that referenced
this pull request
Nov 22, 2022
Summary: X-link: facebook/yoga#1173 In #35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap. In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization? If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead. `flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`. We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap. Changelog: [General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched Reviewed By: yungsters Differential Revision: D41311424 fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
Summary: X-link: facebook/yoga#1173 In facebook#35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap. In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization? If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead. `flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`. We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap. Changelog: [General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched Reviewed By: yungsters Differential Revision: D41311424 fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
In facebook/react-native#35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap.
In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization?
If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead.
flexBasisOverflowsincorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag tomainAxisOverflows.We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap.
Differential Revision: D41311424