From d95757037aef3fbd8bb9064e667ea4fea9e5abc1 Mon Sep 17 00:00:00 2001 From: Pieter De Baets Date: Mon, 4 Apr 2016 04:08:19 -0700 Subject: [PATCH] Update css-layout from github Summary:Update to latest master version of css-layout. Update integration in RCTShadow(Root)View to match. This solves the issue with items not strechting vertically in column layouts (https://github.com/facebook/css-layout/issues/127) Reviewed By: vjeux Differential Revision: D3120699 fb-gh-sync-id: beba162e1255d3527e1160e9bd414a712cb10713 fbshipit-source-id: beba162e1255d3527e1160e9bd414a712cb10713 --- React/Layout/Layout.c | 88 +++++++++++++------ React/Layout/Layout.h | 13 +-- React/Views/RCTRootShadowView.m | 1 + React/Views/RCTShadowView.m | 5 -- .../com/facebook/csslayout/LayoutEngine.java | 10 +-- .../main/java/com/facebook/csslayout/README | 2 +- .../com/facebook/csslayout/README.facebook | 2 +- .../com/facebook/csslayout/syncFromGithub.sh | 5 +- 8 files changed, 79 insertions(+), 47 deletions(-) diff --git a/React/Layout/Layout.c b/React/Layout/Layout.c index 317f69bb6dfbdd..33afdb0d83d64f 100644 --- a/React/Layout/Layout.c +++ b/React/Layout/Layout.c @@ -451,11 +451,16 @@ static float getDimWithMargin(css_node_t *node, css_flex_direction_t axis) { getTrailingMargin(node, axis); } -static bool isDimDefined(css_node_t *node, css_flex_direction_t axis) { +static bool isStyleDimDefined(css_node_t *node, css_flex_direction_t axis) { float value = node->style.dimensions[dim[axis]]; return !isUndefined(value) && value >= 0.0; } +static bool isLayoutDimDefined(css_node_t *node, css_flex_direction_t axis) { + float value = node->layout.dimensions[dim[axis]]; + return !isUndefined(value) && value >= 0.0; +} + static bool isPosDefined(css_node_t *node, css_position_t position) { return !isUndefined(node->style.position[position]); } @@ -499,11 +504,11 @@ static float boundAxis(css_node_t *node, css_flex_direction_t axis, float value) // When the user specifically sets a value for width or height static void setDimensionFromStyle(css_node_t *node, css_flex_direction_t axis) { // The parent already computed us a width or height. We just skip it - if (!isUndefined(node->layout.dimensions[dim[axis]])) { + if (isLayoutDimDefined(node, axis)) { return; } // We only run if there's a width or height defined - if (!isDimDefined(node, axis)) { + if (!isStyleDimDefined(node, axis)) { return; } @@ -561,10 +566,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM float paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN); if (isMeasureDefined(node)) { - bool isResolvedRowDimDefined = !isUndefined(node->layout.dimensions[dim[resolvedRowAxis]]); + bool isResolvedRowDimDefined = isLayoutDimDefined(node, resolvedRowAxis); float width = CSS_UNDEFINED; - if (isDimDefined(node, resolvedRowAxis)) { + if (isStyleDimDefined(node, resolvedRowAxis)) { width = node->style.dimensions[CSS_WIDTH]; } else if (isResolvedRowDimDefined) { width = node->layout.dimensions[dim[resolvedRowAxis]]; @@ -575,9 +580,9 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM width -= paddingAndBorderAxisResolvedRow; float height = CSS_UNDEFINED; - if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) { + if (isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) { height = node->style.dimensions[CSS_HEIGHT]; - } else if (!isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]])) { + } else if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) { height = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]; } else { height = parentMaxHeight - @@ -588,8 +593,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM // We only need to give a dimension for the text if we haven't got any // for it computed yet. It can either be from the style attribute or because // the element is flexible. - bool isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined; - bool isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) && + bool isRowUndefined = !isStyleDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined; + bool isColumnUndefined = !isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) && isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]); // Let's not measure the text if we already know both dimensions @@ -623,8 +628,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM float paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis); float paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis); - bool isMainDimDefined = !isUndefined(node->layout.dimensions[dim[mainAxis]]); - bool isCrossDimDefined = !isUndefined(node->layout.dimensions[dim[crossAxis]]); + bool isMainDimDefined = isLayoutDimDefined(node, mainAxis); + bool isCrossDimDefined = isLayoutDimDefined(node, crossAxis); bool isMainRowDirection = isRowDirection(mainAxis); int i; @@ -686,8 +691,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM float mainDim = leadingPaddingAndBorderMain; float crossDim = 0; - float maxWidth; - float maxHeight; + float maxWidth = CSS_UNDEFINED; + float maxHeight = CSS_UNDEFINED; for (i = startLine; i < childCount; ++i) { child = node->get_child(node->context, i); child->line_index = linesCount; @@ -702,7 +707,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM if (alignItem == CSS_ALIGN_STRETCH && child->style.position_type == CSS_POSITION_RELATIVE && isCrossDimDefined && - !isDimDefined(child, crossAxis)) { + !isStyleDimDefined(child, crossAxis)) { child->layout.dimensions[dim[crossAxis]] = fmaxf( boundAxis(child, crossAxis, node->layout.dimensions[dim[crossAxis]] - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)), @@ -724,8 +729,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM // left and right or top and bottom). for (ii = 0; ii < 2; ii++) { axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; - if (!isUndefined(node->layout.dimensions[dim[axis]]) && - !isDimDefined(child, axis) && + if (isLayoutDimDefined(node, axis) && + !isStyleDimDefined(child, axis) && isPosDefined(child, leading[axis]) && isPosDefined(child, trailing[axis])) { child->layout.dimensions[dim[axis]] = fmaxf( @@ -771,7 +776,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM maxHeight = CSS_UNDEFINED; if (!isMainRowDirection) { - if (isDimDefined(node, resolvedRowAxis)) { + if (isLayoutDimDefined(node, resolvedRowAxis)) { maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] - paddingAndBorderAxisResolvedRow; } else { @@ -780,7 +785,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM paddingAndBorderAxisResolvedRow; } } else { - if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) { + if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) { maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] - paddingAndBorderAxisColumn; } else { @@ -831,7 +836,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM if (isSimpleStackCross && (child->style.position_type != CSS_POSITION_RELATIVE || (alignItem != CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) || - isUndefined(child->layout.dimensions[dim[crossAxis]]))) { + (alignItem == CSS_ALIGN_STRETCH && !isCrossDimDefined))) { isSimpleStackCross = false; firstComplexCross = i; } @@ -914,7 +919,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM ); maxWidth = CSS_UNDEFINED; - if (isDimDefined(node, resolvedRowAxis)) { + if (isLayoutDimDefined(node, resolvedRowAxis)) { maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] - paddingAndBorderAxisResolvedRow; } else if (!isMainRowDirection) { @@ -923,7 +928,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM paddingAndBorderAxisResolvedRow; } maxHeight = CSS_UNDEFINED; - if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) { + if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) { maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] - paddingAndBorderAxisColumn; } else if (isMainRowDirection) { @@ -1041,15 +1046,31 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM css_align_t alignItem = getAlignItem(node, child); /*eslint-enable */ if (alignItem == CSS_ALIGN_STRETCH) { - // You can only stretch if the dimension has not already been set + // You can only stretch if the dimension has not already been defined // previously. - if (isUndefined(child->layout.dimensions[dim[crossAxis]])) { + if (!isStyleDimDefined(child, crossAxis)) { + float dimCrossAxis = child->layout.dimensions[dim[crossAxis]]; child->layout.dimensions[dim[crossAxis]] = fmaxf( boundAxis(child, crossAxis, containerCrossAxis - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)), // You never want to go smaller than padding getPaddingAndBorderAxis(child, crossAxis) ); + + // If the size has changed, and this child has children we need to re-layout this child + if (dimCrossAxis != child->layout.dimensions[dim[crossAxis]] && child->children_count > 0) { + // Reset child margins before re-layout as they are added back in layoutNode and would be doubled + child->layout.position[leading[mainAxis]] -= getLeadingMargin(child, mainAxis) + + getRelativePosition(child, mainAxis); + child->layout.position[trailing[mainAxis]] -= getTrailingMargin(child, mainAxis) + + getRelativePosition(child, mainAxis); + child->layout.position[leading[crossAxis]] -= getLeadingMargin(child, crossAxis) + + getRelativePosition(child, crossAxis); + child->layout.position[trailing[crossAxis]] -= getTrailingMargin(child, crossAxis) + + getRelativePosition(child, crossAxis); + + layoutNode(child, maxWidth, maxHeight, direction); + } } } else if (alignItem != CSS_ALIGN_FLEX_START) { // The remaining space between the parent dimensions+padding and child @@ -1127,7 +1148,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM if (child->line_index != i) { break; } - if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) { + if (isLayoutDimDefined(child, crossAxis)) { lineHeight = fmaxf( lineHeight, child->layout.dimensions[dim[crossAxis]] + getMarginAxis(child, crossAxis) @@ -1220,8 +1241,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM for (ii = 0; ii < 2; ii++) { axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; - if (!isUndefined(node->layout.dimensions[dim[axis]]) && - !isDimDefined(currentAbsoluteChild, axis) && + if (isLayoutDimDefined(node, axis) && + !isStyleDimDefined(currentAbsoluteChild, axis) && isPosDefined(currentAbsoluteChild, leading[axis]) && isPosDefined(currentAbsoluteChild, trailing[axis])) { currentAbsoluteChild->layout.dimensions[dim[axis]] = fmaxf( @@ -1261,8 +1282,8 @@ void layoutNode(css_node_t *node, float parentMaxWidth, float parentMaxHeight, c !node->is_dirty(node->context) && eq(layout->last_requested_dimensions[CSS_WIDTH], layout->dimensions[CSS_WIDTH]) && eq(layout->last_requested_dimensions[CSS_HEIGHT], layout->dimensions[CSS_HEIGHT]) && - eq(layout->last_parent_max_width, parentMaxWidth); - eq(layout->last_parent_max_height, parentMaxHeight); + eq(layout->last_parent_max_width, parentMaxWidth) && + eq(layout->last_parent_max_height, parentMaxHeight) && eq(layout->last_direction, direction); if (skipLayout) { @@ -1277,6 +1298,10 @@ void layoutNode(css_node_t *node, float parentMaxWidth, float parentMaxHeight, c layout->last_parent_max_height = parentMaxHeight; layout->last_direction = direction; + for (int i = 0, childCount = node->children_count; i < childCount; i++) { + resetNodeLayout(node->get_child(node->context, i)); + } + layoutNodeImpl(node, parentMaxWidth, parentMaxHeight, parentDirection); layout->last_dimensions[CSS_WIDTH] = layout->dimensions[CSS_WIDTH]; @@ -1285,3 +1310,10 @@ void layoutNode(css_node_t *node, float parentMaxWidth, float parentMaxHeight, c layout->last_position[CSS_LEFT] = layout->position[CSS_LEFT]; } } + +void resetNodeLayout(css_node_t *node) { + node->layout.dimensions[CSS_WIDTH] = CSS_UNDEFINED; + node->layout.dimensions[CSS_HEIGHT] = CSS_UNDEFINED; + node->layout.position[CSS_LEFT] = 0; + node->layout.position[CSS_TOP] = 0; +} diff --git a/React/Layout/Layout.h b/React/Layout/Layout.h index be37c93939666e..5abd1e5722767a 100644 --- a/React/Layout/Layout.h +++ b/React/Layout/Layout.h @@ -9,7 +9,7 @@ * !! 3) Copy the file from github to here !! * !! (don't forget to keep this header) !! * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! - * @generated + * @generated * * Copyright (c) 2014, Facebook, Inc. * All rights reserved. @@ -149,8 +149,8 @@ struct css_node { int children_count; int line_index; - css_node_t* next_absolute_child; - css_node_t* next_flex_child; + css_node_t *next_absolute_child; + css_node_t *next_flex_child; css_dim_t (*measure)(void *context, float width, float height); void (*print)(void *context); @@ -159,7 +159,6 @@ struct css_node { void *context; }; - // Lifecycle of nodes and children css_node_t *new_css_node(void); void init_css_node(css_node_t *node); @@ -173,8 +172,12 @@ typedef enum { } css_print_options_t; void print_css_node(css_node_t *node, css_print_options_t options); +bool isUndefined(float value); + // Function that computes the layout! void layoutNode(css_node_t *node, float maxWidth, float maxHeight, css_direction_t parentDirection); -bool isUndefined(float value); + +// Reset the calculated layout values for a given node. You should call this before `layoutNode`. +void resetNodeLayout(css_node_t *node); #endif diff --git a/React/Views/RCTRootShadowView.m b/React/Views/RCTRootShadowView.m index b23914d25cac4a..70f62be1705903 100644 --- a/React/Views/RCTRootShadowView.m +++ b/React/Views/RCTRootShadowView.m @@ -34,6 +34,7 @@ - (void)applySizeConstraints [self applySizeConstraints]; [self fillCSSNode:self.cssNode]; + resetNodeLayout(self.cssNode); layoutNode(self.cssNode, CSS_UNDEFINED, CSS_UNDEFINED, CSS_DIRECTION_INHERIT); NSMutableSet *viewsWithNewFrame = [NSMutableSet set]; diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m index 9d718fa3724165..d55e80c624c96e 100644 --- a/React/Views/RCTShadowView.m +++ b/React/Views/RCTShadowView.m @@ -157,11 +157,6 @@ - (void)applyLayoutNode:(css_node_t *)node absolutePosition.x += node->layout.position[CSS_LEFT]; absolutePosition.y += node->layout.position[CSS_TOP]; - node->layout.dimensions[CSS_WIDTH] = CSS_UNDEFINED; - node->layout.dimensions[CSS_HEIGHT] = CSS_UNDEFINED; - node->layout.position[CSS_LEFT] = 0; - node->layout.position[CSS_TOP] = 0; - for (int i = 0; i < node->children_count; ++i) { RCTShadowView *child = (RCTShadowView *)_reactSubviews[i]; [child applyLayoutNode:node->get_child(node->context, i) diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java b/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java index 5efd88e3b2a1ea..ebef5c3a4df49e 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java @@ -7,7 +7,7 @@ */ // NOTE: this file is auto-copied from https://github.com/facebook/css-layout -// @generated SignedSource<> +// @generated SignedSource<<1d6f1ec2d1fbd24c5176f48d5005c0d5>> package com.facebook.csslayout; @@ -207,6 +207,10 @@ static boolean needsRelayout(CSSNode node, float parentMaxWidth, float parentMax node.lastLayout.parentMaxWidth = parentMaxWidth; node.lastLayout.parentMaxHeight = parentMaxHeight; + for (int i = 0, childCount = node.getChildCount(); i < childCount; i++) { + node.getChildAt(i).layout.resetResult(); + } + layoutNodeImpl(layoutContext, node, parentMaxWidth, parentMaxHeight, parentDirection); node.lastLayout.copy(node.layout); } else { @@ -222,10 +226,6 @@ private static void layoutNodeImpl( float parentMaxWidth, float parentMaxHeight, CSSDirection parentDirection) { - for (int i = 0, childCount = node.getChildCount(); i < childCount; i++) { - node.getChildAt(i).layout.resetResult(); - } - /** START_GENERATED **/ CSSDirection direction = resolveDirection(node, parentDirection); diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/README b/ReactAndroid/src/main/java/com/facebook/csslayout/README index 0de9f29a65f688..2859f0a63e31ae 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/README +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/README @@ -1,7 +1,7 @@ The source of truth for css-layout is: https://github.com/facebook/css-layout The code here should be kept in sync with GitHub. -HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/3f0f4be2e868a9af4f3ed1e019f71efbc814e8a2 +HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/68e0b0cc58dcdf023651905d39c0e8147141b123 There is generated code in: - README (this file) diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/README.facebook b/ReactAndroid/src/main/java/com/facebook/csslayout/README.facebook index fc97204649102a..7cdf630c220f7a 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/README.facebook +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/README.facebook @@ -1,7 +1,7 @@ The source of truth for css-layout is: https://github.com/facebook/css-layout The code here should be kept in sync with GitHub. -HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/3f0f4be2e868a9af4f3ed1e019f71efbc814e8a2 +HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/68e0b0cc58dcdf023651905d39c0e8147141b123 There is generated code in: - README.facebook (this file) diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/syncFromGithub.sh b/ReactAndroid/src/main/java/com/facebook/csslayout/syncFromGithub.sh index d0693ddb898ba9..ff037d6232a15a 100755 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/syncFromGithub.sh +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/syncFromGithub.sh @@ -46,7 +46,7 @@ popd SRC=$GITHUB/src/java/src/com/facebook/csslayout TESTS=$GITHUB/src/java/tests/com/facebook/csslayout -FBA_SRC=. +FBA_SRC=$ROOT/java/com/facebook/catalyst/js/react-native-github/ReactAndroid/src/main/java/com/facebook/csslayout/ FBA_TESTS=$ROOT/javatests/com/facebook/csslayout echo "Copying src files over..." @@ -94,5 +94,6 @@ There is generated code in: The code was generated by running 'make' in the css-layout folder and copied to React Native. " > $FBA_SRC/README -echo "Done." +echo "fbandroid was updated. Please also update the fbobjc version under" \ + "fbobjc/Libraries/FBReactKit/js/react-native-github/React/Layout/Layout.c." echo "Please run buck test //javatests/com/facebook/csslayout"