diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSLayout.java b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSLayout.java index ed2b82494..a77e2930e 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSLayout.java +++ b/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; diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNode.java b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNode.java index 97a5e9378..9e1bc07be 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNode.java +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNode.java @@ -361,17 +361,72 @@ public class CSSNode implements CSSNodeAPI { */ @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)) { - style.flex = flex; + if (CSSConstants.isUndefined(flex) || flex == 0) { + 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. */ diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeAPI.java b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeAPI.java index b7f176876..51349a123 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeAPI.java +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeAPI.java @@ -54,6 +54,12 @@ public interface 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(); diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeJNI.java b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeJNI.java index 550ac7ebd..356bddccc 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeJNI.java +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSNodeJNI.java @@ -293,6 +293,48 @@ public class CSSNodeJNI implements CSSNodeAPI { 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() { diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSStyle.java b/ReactAndroid/src/main/java/com/facebook/csslayout/CSSStyle.java index d0ffd35c7..36cb049e2 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/CSSStyle.java +++ b/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(); diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java b/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java index 3f84e66fd..f704879af 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java +++ b/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) { - // All flex values are auto. - return true; - } else { - // A flex value > 0 implies a basis of zero. - return node.style.flex <= 0; - } + return CSSConstants.isUndefined(node.style.flexBasis); } private static float getFlexGrowFactor(CSSNode node) { - // Flex grow is implied by positive values for flex. - if (node.style.flex > 0) { - return node.style.flex; - } - return 0; + return node.style.flexGrow; } private static float getFlexShrinkFactor(CSSNode node) { - if (POSITIVE_FLEX_IS_AUTO) { - // 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; + return node.style.flexShrink; } @@ -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