Skip to content

Commit

Permalink
Fix sizing and alignment issues with multi-line containers (facebook#…
Browse files Browse the repository at this point in the history
…41916)

Summary:
X-link: facebook/yoga#1513

Pull Request resolved: facebook#41916

Fixes facebook/yoga#1300
Fixes facebook/yoga#1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. facebook/yoga#1491
2. facebook/yoga#1493
3. facebook/yoga#1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013

fbshipit-source-id: 8d95ad17e58c1fec1cceab9756413d0b3bd4cd8f
  • Loading branch information
NickGerleman authored and Othinn committed Jan 9, 2024
1 parent 447b40a commit 1880c02
Showing 1 changed file with 74 additions and 64 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1569,15 +1569,20 @@ static void calculateLayoutImpl(
flexLine.layout.crossDim = availableInnerCrossDim;
}

// Clamp to the min/max size specified on the container.
flexLine.layout.crossDim =
boundAxis(
node,
crossAxis,
flexLine.layout.crossDim + paddingAndBorderAxisCross,
crossAxisownerSize,
ownerWidth) -
paddingAndBorderAxisCross;
// As-per https://www.w3.org/TR/css-flexbox-1/#cross-sizing, the
// cross-size of the line within a single-line container should be bound to
// min/max constraints before alignment within the line. In a multi-line
// container, affecting alignment between the lines.
if (!isNodeFlexWrap) {
flexLine.layout.crossDim =
boundAxis(
node,
crossAxis,
flexLine.layout.crossDim + paddingAndBorderAxisCross,
crossAxisownerSize,
ownerWidth) -
paddingAndBorderAxisCross;
}

// STEP 7: CROSS-AXIS ALIGNMENT
// We can skip child alignment if we're just measuring the container.
Expand Down Expand Up @@ -1735,59 +1740,65 @@ static void calculateLayoutImpl(
// STEP 8: MULTI-LINE CONTENT ALIGNMENT
// currentLead stores the size of the cross dim
if (performLayout && (isNodeFlexWrap || isBaselineLayout(node))) {
float crossDimLead = 0;
float leadPerLine = 0;
float currentLead = leadingPaddingAndBorderCross;
if (yoga::isDefined(availableInnerCrossDim)) {
const float remainingAlignContentDim =
availableInnerCrossDim - totalLineCrossDim;
switch (node->getStyle().alignContent()) {
case Align::FlexEnd:
currentLead += remainingAlignContentDim;
break;
case Align::Center:

const float unclampedCrossDim =
node->styleDefinesDimension(crossAxis, crossAxisownerSize)
? yoga::resolveValue(
node->getResolvedDimension(dimension(crossAxis)),
crossAxisownerSize)
.unwrap()
: totalLineCrossDim + paddingAndBorderAxisCross;

const float innerCrossDim =
boundAxis(node, crossAxis, unclampedCrossDim, ownerHeight, ownerWidth) -
paddingAndBorderAxisCross;

const float remainingAlignContentDim = innerCrossDim - totalLineCrossDim;
switch (node->getStyle().alignContent()) {
case Align::FlexEnd:
currentLead += remainingAlignContentDim;
break;
case Align::Center:
currentLead += remainingAlignContentDim / 2;
break;
case Align::Stretch:
if (innerCrossDim > totalLineCrossDim) {
leadPerLine =
remainingAlignContentDim / static_cast<float>(lineCount);
}
break;
case Align::SpaceAround:
if (innerCrossDim > totalLineCrossDim) {
currentLead +=
remainingAlignContentDim / (2 * static_cast<float>(lineCount));
leadPerLine =
remainingAlignContentDim / static_cast<float>(lineCount);
} else {
currentLead += remainingAlignContentDim / 2;
break;
case Align::Stretch:
if (availableInnerCrossDim > totalLineCrossDim) {
crossDimLead =
remainingAlignContentDim / static_cast<float>(lineCount);
}
break;
case Align::SpaceAround:
if (availableInnerCrossDim > totalLineCrossDim) {
currentLead +=
remainingAlignContentDim / (2 * static_cast<float>(lineCount));
if (lineCount > 1) {
crossDimLead =
remainingAlignContentDim / static_cast<float>(lineCount);
}
} else {
currentLead += remainingAlignContentDim / 2;
}
break;
case Align::SpaceEvenly:
if (availableInnerCrossDim > totalLineCrossDim) {
currentLead +=
remainingAlignContentDim / static_cast<float>(lineCount + 1);
if (lineCount > 1) {
crossDimLead =
remainingAlignContentDim / static_cast<float>(lineCount + 1);
}
} else {
currentLead += remainingAlignContentDim / 2;
}
break;
case Align::SpaceBetween:
if (availableInnerCrossDim > totalLineCrossDim && lineCount > 1) {
crossDimLead =
remainingAlignContentDim / static_cast<float>(lineCount - 1);
}
break;
case Align::Auto:
case Align::FlexStart:
case Align::Baseline:
break;
}
}
break;
case Align::SpaceEvenly:
if (innerCrossDim > totalLineCrossDim) {
currentLead +=
remainingAlignContentDim / static_cast<float>(lineCount + 1);
leadPerLine =
remainingAlignContentDim / static_cast<float>(lineCount + 1);
} else {
currentLead += remainingAlignContentDim / 2;
}
break;
case Align::SpaceBetween:
if (innerCrossDim > totalLineCrossDim && lineCount > 1) {
leadPerLine =
remainingAlignContentDim / static_cast<float>(lineCount - 1);
}
break;
case Align::Auto:
case Align::FlexStart:
case Align::Baseline:
break;
}
size_t endIndex = 0;
for (size_t i = 0; i < lineCount; i++) {
Expand Down Expand Up @@ -1832,7 +1843,6 @@ static void calculateLayoutImpl(
}
}
endIndex = ii;
lineHeight += crossDimLead;
currentLead += i != 0 ? crossAxisGap : 0;

if (performLayout) {
Expand Down Expand Up @@ -1885,14 +1895,14 @@ static void calculateLayoutImpl(
? (child->getLayout().measuredDimension(
Dimension::Width) +
child->getMarginForAxis(mainAxis, availableInnerWidth))
: lineHeight;
: leadPerLine + lineHeight;

const float childHeight = !isMainAxisRow
? (child->getLayout().measuredDimension(
Dimension::Height) +
child->getMarginForAxis(
crossAxis, availableInnerWidth))
: lineHeight;
: leadPerLine + lineHeight;

if (!(yoga::inexactEquals(
childWidth,
Expand Down Expand Up @@ -1941,7 +1951,7 @@ static void calculateLayoutImpl(
}
}
}
currentLead += lineHeight;
currentLead = currentLead + leadPerLine + lineHeight;
}
}

Expand Down

0 comments on commit 1880c02

Please sign in to comment.