fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188)

Summary:
Fixes - https://github.com/facebook/react-native/issues/35553

## Approach
We're using `betweenMainDim` to add [gap between](bbeede82d3/yoga/Yoga.cpp (L2495)) items in main axis. This is resulting in increased [main axis](bbeede82d3/yoga/Yoga.cpp (L2598)) dimension of the container as it gets added even for the last element. One solution is to keep using it and subtract the gap when last element is reached.

## Aside
Mutating this value feels weird, but I think `betweenMainDim` gets initialized for every line so should be fine? I did some manual tests to verify. I tried running tests but I'll have to downgrade the java version. Let me know if anything fails. Thanks! 🙏

Pull Request resolved: https://github.com/facebook/yoga/pull/1188

Test Plan: Added fixtures which previously failed but now pass.

Reviewed By: necolas

Differential Revision: D42078162

Pulled By: NickGerleman

fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9
This commit is contained in:
Nishan
2022-12-15 16:30:37 -08:00
committed by Facebook GitHub Bot
parent 35f3335efc
commit ba27f9d1ec
6 changed files with 561 additions and 0 deletions

View File

@@ -1589,6 +1589,73 @@ public class YGGapTest {
assertEquals(150f, root_child4.getLayoutHeight(), 0.0f);
}
@Test
public void test_column_gap_determines_parent_width() {
YogaConfig config = YogaConfigFactory.create();
final YogaNode root = createNode(config);
root.setFlexDirection(YogaFlexDirection.ROW);
root.setHeight(100f);
root.setGap(YogaGutter.COLUMN, 10f);
final YogaNode root_child0 = createNode(config);
root_child0.setWidth(10f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = createNode(config);
root_child1.setWidth(20f);
root.addChildAt(root_child1, 1);
final YogaNode root_child2 = createNode(config);
root_child2.setWidth(30f);
root.addChildAt(root_child2, 2);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(80f, root.getLayoutWidth(), 0.0f);
assertEquals(100f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(20f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(50f, root_child2.getLayoutX(), 0.0f);
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
assertEquals(30f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
root.setDirection(YogaDirection.RTL);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(80f, root.getLayoutWidth(), 0.0f);
assertEquals(100f, root.getLayoutHeight(), 0.0f);
assertEquals(70f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(40f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
assertEquals(30f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
}
@Test
public void test_row_gap_align_items_stretch() {
YogaConfig config = YogaConfigFactory.create();
@@ -1969,6 +2036,72 @@ public class YGGapTest {
assertEquals(0f, root_child2.getLayoutHeight(), 0.0f);
}
@Test
public void test_row_gap_determines_parent_height() {
YogaConfig config = YogaConfigFactory.create();
final YogaNode root = createNode(config);
root.setWidth(100f);
root.setGap(YogaGutter.ROW, 10f);
final YogaNode root_child0 = createNode(config);
root_child0.setHeight(10f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = createNode(config);
root_child1.setHeight(20f);
root.addChildAt(root_child1, 1);
final YogaNode root_child2 = createNode(config);
root_child2.setHeight(30f);
root.addChildAt(root_child2, 2);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(100f, root.getLayoutWidth(), 0.0f);
assertEquals(80f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(20f, root_child1.getLayoutY(), 0.0f);
assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(50f, root_child2.getLayoutY(), 0.0f);
assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(30f, root_child2.getLayoutHeight(), 0.0f);
root.setDirection(YogaDirection.RTL);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(100f, root.getLayoutWidth(), 0.0f);
assertEquals(80f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(20f, root_child1.getLayoutY(), 0.0f);
assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(50f, root_child2.getLayoutY(), 0.0f);
assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(30f, root_child2.getLayoutHeight(), 0.0f);
}
private YogaNode createNode(YogaConfig config) {
return mNodeFactory.create(config);
}