Implement flex properties in java version as well

Reviewed By: lucasr

Differential Revision: D3753231

fbshipit-source-id: ea41d887cd99d1f03d2bc876a2fd7141dbe48320

ReactAndroid/src/main/java/com/facebook/csslayout/CSSLayout.java

@@ -31,7 +31,7 @@ public class CSSLayout {
   public float[] dimensions = new float[2];
   public CSSDirection direction = CSSDirection.LTR;
 
-  public float flexBasis;
+  public float computedFlexBasis;
 
   public int generationCount;
   public CSSDirection lastParentDirection;
@@ -51,7 +51,7 @@ public class CSSLayout {
     Arrays.fill(dimensions, CSSConstants.UNDEFINED);
     direction = CSSDirection.LTR;
 
-    flexBasis = 0;
+    computedFlexBasis = 0;
 
     generationCount = 0;
     lastParentDirection = null;

ReactAndroid/src/main/java/com/facebook/csslayout/CSSNode.java

@@ -361,17 +361,72 @@ public class CSSNode implements CSSNodeAPI<CSSNode> {
    */
   @Override
   public float getFlex() {
-    return style.flex;
+    if (style.flexGrow > 0) {
+      return style.flexGrow;
+    } else if (style.flexShrink > 0) {
+      return -style.flexShrink;
+    }
+
+    return 0;
   }
 
   @Override
   public void setFlex(float flex) {
-    if (!valuesEqual(style.flex, flex)) {
+    if (CSSConstants.isUndefined(flex) || flex == 0) {
-      style.flex = flex;
+      setFlexGrow(0);
+      setFlexShrink(0);
+      setFlexBasis(CSSConstants.UNDEFINED);
+    } else if (flex > 0) {
+      setFlexGrow(flex);
+      setFlexShrink(0);
+      setFlexBasis(0);
+    } else {
+      setFlexGrow(0);
+      setFlexShrink(-flex);
+      setFlexBasis(CSSConstants.UNDEFINED);
+    }
+  }
+
+  @Override
+  public float getFlexGrow() {
+    return style.flexGrow;
+  }
+
+  @Override
+  public void setFlexGrow(float flexGrow) {
+    if (!valuesEqual(style.flexGrow, flexGrow)) {
+      style.flexGrow = flexGrow;
       dirty();
     }
   }
 
+  @Override
+  public float getFlexShrink() {
+    return style.flexShrink;
+  }
+
+  @Override
+  public void setFlexShrink(float flexShrink) {
+    if (!valuesEqual(style.flexShrink, flexShrink)) {
+      style.flexShrink = flexShrink;
+      dirty();
+    }
+  }
+
+  @Override
+  public float getFlexBasis() {
+    return style.flexBasis;
+  }
+
+  @Override
+  public void setFlexBasis(float flexBasis) {
+    if (!valuesEqual(style.flexBasis, flexBasis)) {
+      style.flexBasis = flexBasis;
+      dirty();
+    }
+  }
+
+
   /**
    * Get this node's margin, as defined by style + default margin.
    */

ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeAPI.java

@@ -54,6 +54,12 @@ public interface CSSNodeAPI<CSSNodeType extends CSSNodeAPI> {
   void setWrap(CSSWrap flexWrap);
   float getFlex();
   void setFlex(float flex);
+  float getFlexGrow();
+  void setFlexGrow(float flexGrow);
+  float getFlexShrink();
+  void setFlexShrink(float flexShrink);
+  float getFlexBasis();
+  void setFlexBasis(float flexBasis);
   Spacing getMargin();
   void setMargin(int spacingType, float margin);
   Spacing getPadding();

ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeJNI.java

@@ -293,6 +293,48 @@ public class CSSNodeJNI implements CSSNodeAPI<CSSNodeJNI> {
     jni_CSSNodeStyleSetFlex(mNativePointer, flex);
   }
 
+  private native float jni_CSSNodeStyleGetFlexGrow(long nativePointer);
+  @Override
+  public float getFlexGrow() {
+    assertNativeInstance();
+    return jni_CSSNodeStyleGetFlexGrow(mNativePointer);
+  }
+
+  private native void jni_CSSNodeStyleSetFlexGrow(long nativePointer, float flexGrow);
+  @Override
+  public void setFlexGrow(float flexGrow) {
+    assertNativeInstance();
+    jni_CSSNodeStyleSetFlexGrow(mNativePointer, flexGrow);
+  }
+
+  private native float jni_CSSNodeStyleGetFlexShrink(long nativePointer);
+  @Override
+  public float getFlexShrink() {
+    assertNativeInstance();
+    return jni_CSSNodeStyleGetFlexShrink(mNativePointer);
+  }
+
+  private native void jni_CSSNodeStyleSetFlexShrink(long nativePointer, float flexShrink);
+  @Override
+  public void setFlexShrink(float flexShrink) {
+    assertNativeInstance();
+    jni_CSSNodeStyleSetFlexShrink(mNativePointer, flexShrink);
+  }
+
+  private native float jni_CSSNodeStyleGetFlexBasis(long nativePointer);
+  @Override
+  public float getFlexBasis() {
+    assertNativeInstance();
+    return jni_CSSNodeStyleGetFlexBasis(mNativePointer);
+  }
+
+  private native void jni_CSSNodeStyleSetFlexBasis(long nativePointer, float flexBasis);
+  @Override
+  public void setFlexBasis(float flexBasis) {
+    assertNativeInstance();
+    jni_CSSNodeStyleSetFlexBasis(mNativePointer, flexBasis);
+  }
+
   private native float jni_CSSNodeStyleGetMargin(long nativePointer, int edge);
   @Override
   public Spacing getMargin() {

ReactAndroid/src/main/java/com/facebook/csslayout/CSSStyle.java

@@ -25,7 +25,9 @@ public class CSSStyle {
   public CSSPositionType positionType;
   public CSSWrap flexWrap;
   public CSSOverflow overflow;
-  public float flex;
+  public float flexGrow;
+  public float flexShrink;
+  public float flexBasis;
 
   public Spacing margin = new Spacing();
   public Spacing padding = new Spacing();
@@ -54,7 +56,9 @@ public class CSSStyle {
     positionType = CSSPositionType.RELATIVE;
     flexWrap = CSSWrap.NOWRAP;
     overflow = CSSOverflow.VISIBLE;
-    flex = 0f;
+    flexGrow = 0;
+    flexShrink = 0;
+    flexBasis = CSSConstants.UNDEFINED;
 
     margin.reset();
     padding.reset();

ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java

@@ -23,8 +23,6 @@ import static com.facebook.csslayout.CSSLayout.POSITION_TOP;
  */
 public class LayoutEngine {
 
-  private static final boolean POSITIVE_FLEX_IS_AUTO = false;
-
   private static final int CSS_FLEX_DIRECTION_COLUMN =
       CSSFlexDirection.COLUMN.ordinal();
   private static final int CSS_FLEX_DIRECTION_COLUMN_REVERSE =
@@ -80,36 +78,15 @@ public class LayoutEngine {
   };
 
   private static boolean isFlexBasisAuto(CSSNode node) {
-    if (POSITIVE_FLEX_IS_AUTO) {
+    return CSSConstants.isUndefined(node.style.flexBasis);
-      // All flex values are auto.
-      return true;
-    } else {
-      // A flex value > 0 implies a basis of zero.
-      return node.style.flex <= 0;
-    }
   }
 
   private static float getFlexGrowFactor(CSSNode node) {
-    // Flex grow is implied by positive values for flex.
+    return node.style.flexGrow;
-    if (node.style.flex > 0) {
-      return node.style.flex;
-    }
-    return 0;
   }
 
   private static float getFlexShrinkFactor(CSSNode node) {
-    if (POSITIVE_FLEX_IS_AUTO) {
+    return node.style.flexShrink;
-      // A flex shrink factor of 1 is implied by non-zero values for flex.
-      if (node.style.flex != 0) {
-        return 1;
-      }
-    } else {
-      // A flex shrink factor of 1 is implied by negative values for flex.
-      if (node.style.flex < 0) {
-        return 1;
-      }
-    }
-    return 0;
   }
 
 
@@ -712,15 +689,15 @@ public class LayoutEngine {
         if (isMainAxisRow && (child.style.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] >= 0.0)) {
 
           // The width is definite, so use that as the flex basis.
-          child.layout.flexBasis = Math.max(child.style.dimensions[DIMENSION_WIDTH], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]))));
+          child.layout.computedFlexBasis = Math.max(child.style.dimensions[DIMENSION_WIDTH], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]))));
         } else if (!isMainAxisRow && (child.style.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] >= 0.0)) {
 
           // The height is definite, so use that as the flex basis.
-          child.layout.flexBasis = Math.max(child.style.dimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]))));
+          child.layout.computedFlexBasis = Math.max(child.style.dimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]))));
         } else if (!isFlexBasisAuto(child) && !Float.isNaN(availableInnerMainDim)) {
 
           // If the basis isn't 'auto', it is assumed to be zero.
-          child.layout.flexBasis = Math.max(0, ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
+          child.layout.computedFlexBasis = Math.max(child.style.flexBasis, ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
         } else {
 
           // Compute the flex basis and hypothetical main size (i.e. the clamped flex basis).
@@ -778,7 +755,7 @@ public class LayoutEngine {
           // Measure the child
           layoutNodeInternal(layoutContext, child, childWidth, childHeight, direction, childWidthMeasureMode, childHeightMeasureMode, false, "measure");
 
-          child.layout.flexBasis = Math.max(isMainAxisRow ? child.layout.measuredDimensions[DIMENSION_WIDTH] : child.layout.measuredDimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
+          child.layout.computedFlexBasis = Math.max(isMainAxisRow ? child.layout.measuredDimensions[DIMENSION_WIDTH] : child.layout.measuredDimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
         }
       }
     }
@@ -825,7 +802,7 @@ public class LayoutEngine {
         child.lineIndex = lineCount;
 
         if (child.style.positionType != CSSPositionType.ABSOLUTE) {
-          float outerFlexBasis = child.layout.flexBasis + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]));
+          float outerFlexBasis = child.layout.computedFlexBasis + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]));
 
           // If this is a multi-line flow and this item pushes us over the available size, we've
           // hit the end of the current line. Break out of the loop and lay out the current line.
@@ -836,12 +813,12 @@ public class LayoutEngine {
           sizeConsumedOnCurrentLine += outerFlexBasis;
           itemsOnLine++;
 
-          if ((child.style.positionType == CSSPositionType.RELATIVE && child.style.flex != 0)) {
+          if ((child.style.positionType == CSSPositionType.RELATIVE && (child.style.flexGrow != 0 || child.style.flexShrink != 0))) {
             totalFlexGrowFactors += getFlexGrowFactor(child);
 
             // Unlike the grow factor, the shrink factor is scaled relative to the child
             // dimension.
-            totalFlexShrinkScaledFactors += getFlexShrinkFactor(child) * child.layout.flexBasis;
+            totalFlexShrinkScaledFactors += getFlexShrinkFactor(child) * child.layout.computedFlexBasis;
           }
 
           // Store a private linked list of children that need to be layed out.
@@ -910,7 +887,7 @@ public class LayoutEngine {
         float deltaFlexGrowFactors = 0;
         currentRelativeChild = firstRelativeChild;
         while (currentRelativeChild != null) {
-          childFlexBasis = currentRelativeChild.layout.flexBasis;
+          childFlexBasis = currentRelativeChild.layout.computedFlexBasis;
 
           if (remainingFreeSpace < 0) {
             flexShrinkScaledFactor = getFlexShrinkFactor(currentRelativeChild) * childFlexBasis;
@@ -957,7 +934,7 @@ public class LayoutEngine {
         deltaFreeSpace = 0;
         currentRelativeChild = firstRelativeChild;
         while (currentRelativeChild != null) {
-          childFlexBasis = currentRelativeChild.layout.flexBasis;
+          childFlexBasis = currentRelativeChild.layout.computedFlexBasis;
           float updatedMainSize = childFlexBasis;
 
           if (remainingFreeSpace < 0) {
@@ -1095,7 +1072,7 @@ public class LayoutEngine {
             if (canSkipFlex) {
               // If we skipped the flex step, then we can't rely on the measuredDims because
               // they weren't computed. This means we can't call getDimWithMargin.
-              mainDim += betweenMainDim + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])) + child.layout.flexBasis;
+              mainDim += betweenMainDim + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])) + child.layout.computedFlexBasis;
               crossDim = availableInnerCrossDim;
             } else {
               // The main dimension is the sum of all the elements dimension plus