Implement Percentage support for gap styles

Summary: Changelog [Internal]: - Added percentage value for flex layout gap - Wired up to pass proper available width and height to implement this feature Differential Revision: D56002340
facebook · Apr 12, 2024 · d863e8d · d863e8d
1 parent 70de2da
commit d863e8d
Show file tree

Hide file tree

Showing 19 changed files with 715 additions and 13 deletions.
diff --git a/gentest/fixtures/YGGapTest.html b/gentest/fixtures/YGGapTest.html
@@ -171,3 +171,19 @@
   <div style="height: 20px"></div>
   <div style="height: 30px"></div>
 </div>
+
+<div id="row_gap_percent_wrapping" style="flex-direction: row; width: 300px; height: 700px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_determines_parent_height" style="flex-direction: row; width: 300px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
diff --git a/java/com/facebook/yoga/YogaNative.java b/java/com/facebook/yoga/YogaNative.java
@@ -108,6 +108,7 @@ public class YogaNative {
   static native void jni_YGNodeStyleSetAspectRatioJNI(long nativePointer, float aspectRatio);
   static native float jni_YGNodeStyleGetGapJNI(long nativePointer, int gutter);
   static native void jni_YGNodeStyleSetGapJNI(long nativePointer, int gutter, float gapLength);
+  static native void jni_YGNodeStyleSetGapPercentJNI(long nativePointer, int gutter, float gapLength);
   static native void jni_YGNodeSetHasMeasureFuncJNI(long nativePointer, boolean hasMeasureFunc);
   static native void jni_YGNodeSetHasBaselineFuncJNI(long nativePointer, boolean hasMeasureFunc);
   static native void jni_YGNodeSetStyleInputsJNI(long nativePointer, float[] styleInputsArray, int size);

diff --git a/java/com/facebook/yoga/YogaNode.java b/java/com/facebook/yoga/YogaNode.java
@@ -192,6 +192,8 @@ public interface Inputs {
 
   public abstract void setGap(YogaGutter gutter, float gapLength);
 
+  public abstract void setGapPercent(YogaGutter gutter, float gapLength);
+
   public abstract float getLayoutX();
 
   public abstract float getLayoutY();

diff --git a/java/com/facebook/yoga/YogaNodeJNIBase.java b/java/com/facebook/yoga/YogaNodeJNIBase.java
@@ -721,4 +721,9 @@ public float getGap(YogaGutter gutter) {
   public void setGap(YogaGutter gutter, float gapLength) {
     YogaNative.jni_YGNodeStyleSetGapJNI(mNativePointer, gutter.intValue(), gapLength);
   }
+
+  @Override
+  public void setGapPercent(YogaGutter gutter, float gapLength) {
+    YogaNative.jni_YGNodeStyleSetGapPercentJNI(mNativePointer, gutter.intValue(), gapLength);
+  }
 }
diff --git a/java/jni/YGJNIVanilla.cpp b/java/jni/YGJNIVanilla.cpp
@@ -715,6 +715,18 @@ static void jni_YGNodeStyleSetGapJNI(
       static_cast<float>(gapLength));
 }
 
+static void jni_YGNodeStyleSetGapPercentJNI(
+    JNIEnv* /*env*/,
+    jobject /*obj*/,
+    jlong nativePointer,
+    jint gutter,
+    jfloat gapLength) {
+  YGNodeStyleSetGapPercent(
+      _jlong2YGNodeRef(nativePointer),
+      static_cast<YGGutter>(gutter),
+      static_cast<float>(gapLength));
+}
+
 // Yoga specific properties, not compatible with flexbox specification
 YG_NODE_JNI_STYLE_PROP(jfloat, float, AspectRatio);
 
@@ -944,6 +956,9 @@ static JNINativeMethod methods[] = {
      (void*)jni_YGNodeSetHasMeasureFuncJNI},
     {"jni_YGNodeStyleGetGapJNI", "(JI)F", (void*)jni_YGNodeStyleGetGapJNI},
     {"jni_YGNodeStyleSetGapJNI", "(JIF)V", (void*)jni_YGNodeStyleSetGapJNI},
+    {"jni_YGNodeStyleSetGapPercentJNI",
+     "(JIF)V",
+     (void*)jni_YGNodeStyleSetGapPercentJNI},
     {"jni_YGNodeSetHasBaselineFuncJNI",
      "(JZ)V",
      (void*)jni_YGNodeSetHasBaselineFuncJNI},

diff --git a/java/tests/com/facebook/yoga/YGGapTest.java b/java/tests/com/facebook/yoga/YGGapTest.java
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<f45f69191b808fe39b56a1473be47963>>
+ * @generated SignedSource<<fffa604d101bfce9443489599e474c65>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGGapTest.html
  */
 
@@ -2216,6 +2216,213 @@ public void test_row_gap_determines_parent_height() {
     assertEquals(30f, root_child2.getLayoutHeight(), 0.0f);
   }
 
+  @Test
+  public void test_row_gap_percent_wrapping() {
+    YogaConfig config = YogaConfigFactory.create();
+
+    final YogaNode root = createNode(config);
+    root.setFlexDirection(YogaFlexDirection.ROW);
+    root.setPositionType(YogaPositionType.ABSOLUTE);
+    root.setWrap(YogaWrap.WRAP);
+    root.setWidth(300f);
+    root.setHeight(700f);
+    root.setGapPercent(YogaGutter.COLUMN, 10f);
+    root.setGapPercent(YogaGutter.ROW, 10f);
+
+    final YogaNode root_child0 = createNode(config);
+    root_child0.setWidth(100f);
+    root_child0.setHeight(100f);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child1 = createNode(config);
+    root_child1.setWidth(100f);
+    root_child1.setHeight(100f);
+    root.addChildAt(root_child1, 1);
+
+    final YogaNode root_child2 = createNode(config);
+    root_child2.setWidth(100f);
+    root_child2.setHeight(100f);
+    root.addChildAt(root_child2, 2);
+
+    final YogaNode root_child3 = createNode(config);
+    root_child3.setWidth(100f);
+    root_child3.setHeight(100f);
+    root.addChildAt(root_child3, 3);
+
+    final YogaNode root_child4 = createNode(config);
+    root_child4.setWidth(100f);
+    root_child4.setHeight(100f);
+    root.addChildAt(root_child4, 4);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(300f, root.getLayoutWidth(), 0.0f);
+    assertEquals(700f, 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(100f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(130f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child2.getLayoutX(), 0.0f);
+    assertEquals(170f, root_child2.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(130f, root_child3.getLayoutX(), 0.0f);
+    assertEquals(170f, root_child3.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child4.getLayoutX(), 0.0f);
+    assertEquals(340f, root_child4.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child4.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child4.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(300f, root.getLayoutWidth(), 0.0f);
+    assertEquals(700f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(70f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child2.getLayoutX(), 0.0f);
+    assertEquals(170f, root_child2.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(70f, root_child3.getLayoutX(), 0.0f);
+    assertEquals(170f, root_child3.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child4.getLayoutX(), 0.0f);
+    assertEquals(340f, root_child4.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child4.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child4.getLayoutHeight(), 0.0f);
+  }
+
+  @Test
+  public void test_row_gap_percent_determines_parent_height() {
+    YogaConfig config = YogaConfigFactory.create();
+
+    final YogaNode root = createNode(config);
+    root.setFlexDirection(YogaFlexDirection.ROW);
+    root.setPositionType(YogaPositionType.ABSOLUTE);
+    root.setWrap(YogaWrap.WRAP);
+    root.setWidth(300f);
+    root.setGapPercent(YogaGutter.COLUMN, 10f);
+    root.setGapPercent(YogaGutter.ROW, 10f);
+
+    final YogaNode root_child0 = createNode(config);
+    root_child0.setWidth(100f);
+    root_child0.setHeight(100f);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child1 = createNode(config);
+    root_child1.setWidth(100f);
+    root_child1.setHeight(100f);
+    root.addChildAt(root_child1, 1);
+
+    final YogaNode root_child2 = createNode(config);
+    root_child2.setWidth(100f);
+    root_child2.setHeight(100f);
+    root.addChildAt(root_child2, 2);
+
+    final YogaNode root_child3 = createNode(config);
+    root_child3.setWidth(100f);
+    root_child3.setHeight(100f);
+    root.addChildAt(root_child3, 3);
+
+    final YogaNode root_child4 = createNode(config);
+    root_child4.setWidth(100f);
+    root_child4.setHeight(100f);
+    root.addChildAt(root_child4, 4);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(300f, root.getLayoutWidth(), 0.0f);
+    assertEquals(300f, 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(100f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(130f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child2.getLayoutX(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(130f, root_child3.getLayoutX(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child4.getLayoutX(), 0.0f);
+    assertEquals(200f, root_child4.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child4.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child4.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(300f, root.getLayoutWidth(), 0.0f);
+    assertEquals(300f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(70f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child2.getLayoutX(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(70f, root_child3.getLayoutX(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child3.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child4.getLayoutX(), 0.0f);
+    assertEquals(200f, root_child4.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child4.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child4.getLayoutHeight(), 0.0f);
+  }
+
   private YogaNode createNode(YogaConfig config) {
     return mNodeFactory.create(config);
   }

diff --git a/javascript/src/Node.cpp b/javascript/src/Node.cpp
@@ -240,6 +240,10 @@ void Node::setGap(int gutter, double gapLength) {
   YGNodeStyleSetGap(m_node, static_cast<YGGutter>(gutter), gapLength);
 }
 
+void Node::setGapPercent(int gutter, double gapLength) {
+  YGNodeStyleSetGapPercent(m_node, static_cast<YGGutter>(gutter), gapLength);
+}
+
 int Node::getPositionType(void) const {
   return YGNodeStyleGetPositionType(m_node);
 }

diff --git a/javascript/src/Node.h b/javascript/src/Node.h
@@ -124,6 +124,7 @@ class Node {
   void setPaddingPercent(int edge, double padding);
 
   void setGap(int gutter, double gapLength);
+  void setGapPercent(int gutter, double gapLength);
 
  public: // Style getters
   int getPositionType(void) const;

diff --git a/javascript/src/embind.cpp b/javascript/src/embind.cpp
@@ -116,6 +116,7 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
       .function("setPadding", &Node::setPadding)
       .function("setPaddingPercent", &Node::setPaddingPercent)
       .function("setGap", &Node::setGap)
+      .function("setGapPercent", &Node::setGapPercent)
 
       .function("setDirection", &Node::setDirection)
 

diff --git a/javascript/src/wrapAssembly.ts b/javascript/src/wrapAssembly.ts
@@ -144,7 +144,8 @@ export type Node = {
   setHeightAuto(): void;
   setHeightPercent(height: number | undefined): void;
   setJustifyContent(justifyContent: Justify): void;
-  setGap(gutter: Gutter, gapLength: number | undefined): Value;
+  setGap(gutter: Gutter, gapLength: number | `${number}%` | undefined): Value;
+  setGapPercent(gutter: Gutter, gapLength: number | undefined): Value;
   setMargin(
     edge: Edge,
     margin: number | 'auto' | `${number}%` | undefined,
@@ -209,6 +210,7 @@ export default function wrapAssembly(lib: any): Yoga {
     'setMaxWidth',
     'setMaxHeight',
     'setPadding',
+    'setGap',
   ]) {
     const methods = {
       [Unit.Point]: lib.Node.prototype[fnName],