DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Support ROW_REVERSE, COLUMN_REVERSE and RTL direction

Browse Source
This commit is contained in:
Lucas Rocha
2015-05-06 21:22:44 +01:00
parent 8cdf0d0228
commit 36a46673f9
16 changed files with 6112 additions and 864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/JavaTranspiler.js
View File

@@ -11,6 +11,8 @@ function __transpileToJavaCommon(code) {
return code
.replace(/CSS_UNDEFINED/g, 'CSSConstants.UNDEFINED')
.replace(/css_flex_direction_t/g, 'CSSFlexDirection')
.replace(/css_direction_t/g, 'CSSDirection')
.replace(/CSS_DIRECTION_/g, 'CSSDirection.')
.replace(/CSS_FLEX_DIRECTION_/g, 'CSSFlexDirection.')
.replace(/css_align_t/g, 'CSSAlign')
.replace(/CSS_ALIGN_/g, 'CSSAlign.')
@@ -33,7 +35,11 @@ function __transpileToJavaCommon(code) {
.replace(
/(\w+)\.layout\[((?:getLeading|getPos)\([^\)]+\))\]\s+=\s+([^;]+);/gm,
'setLayoutPosition($1, $2, $3);')
.replace(
/(\w+)\.layout\[((?:getTrailing|getPos)\([^\)]+\))\]\s+=\s+([^;]+);/gm,
'setLayoutPosition($1, $2, $3);')
.replace(/(\w+)\.layout\[((?:getLeading|getPos)\([^\]]+\))\]/g, 'getLayoutPosition($1, $2)')
.replace(/(\w+)\.layout\[((?:getTrailing|getPos)\([^\]]+\))\]/g, 'getLayoutPosition($1, $2)')
.replace(
/(\w+)\.layout\[(getDim\([^\)]+\))\]\s+=\s+([^;]+);/gm,
'setLayoutDimension($1, $2, $3);')
@@ -63,7 +69,7 @@ function __transpileSingleTestToJava(code) {
.replace( // layout.position[CSS_TOP] => layout.y
/layout\.position\[CSS_(TOP|LEFT)\]/g,
function (str, match1) {
return 'layout.' + (match1 === 'TOP' ? 'y' : 'x');
return 'layout.' + (match1 === 'TOP' ? 'top' : 'left');
})
.replace( // style.position[CSS_TOP] => style.positionTop
/style\.(position)\[CSS_(TOP|BOTTOM|LEFT|RIGHT)\]/g,

2
src/Layout-test-utils.c
View File

@@ -88,7 +88,7 @@ css_dim_t measure(void *context, float width) {
}
void test(const char *name, css_node_t *style, css_node_t *expected_layout) {
layoutNode(style, CSS_UNDEFINED);
layoutNode(style, CSS_UNDEFINED, -1);
if (!are_layout_equal(style, expected_layout)) {
printf("%sF%s", "\x1B[31m", "\x1B[0m");

1
src/Layout-test-utils.js
View File

@@ -184,6 +184,7 @@ var layoutTestUtils = (function() {
transferSpacing(div, node, 'padding', '');
transferSpacing(div, node, 'border', 'Width');
transfer(div, node, 'flexDirection');
transfer(div, node, 'direction');
transfer(div, node, 'flex');
transfer(div, node, 'flexWrap');
transfer(div, node, 'justifyContent');

163
src/Layout.c
View File

@@ -36,6 +36,9 @@ static bool eq(float a, float b) {
void init_css_node(css_node_t *node) {
node->style.align_items = CSS_ALIGN_STRETCH;
node->style.direction = CSS_DIRECTION_INHERIT;
node->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN;
// Some of the fields default to undefined and not 0
node->style.dimensions[CSS_WIDTH] = CSS_UNDEFINED;
node->style.dimensions[CSS_HEIGHT] = CSS_UNDEFINED;
@@ -58,6 +61,7 @@ void init_css_node(css_node_t *node) {
node->layout.last_requested_dimensions[CSS_WIDTH] = -1;
node->layout.last_requested_dimensions[CSS_HEIGHT] = -1;
node->layout.last_parent_max_width = -1;
node->layout.last_direction = -1;
node->layout.should_update = true;
}
@@ -119,8 +123,14 @@ static void print_css_node_rec(
}
if (options & CSS_PRINT_STYLE) {
if (node->style.flex_direction == CSS_FLEX_DIRECTION_ROW) {
if (node->style.flex_direction == CSS_FLEX_DIRECTION_COLUMN) {
printf("flexDirection: 'column', ");
} else if (node->style.flex_direction == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
printf("flexDirection: 'columnReverse', ");
} else if (node->style.flex_direction == CSS_FLEX_DIRECTION_ROW) {
printf("flexDirection: 'row', ");
} else if (node->style.flex_direction == CSS_FLEX_DIRECTION_ROW_REVERSE) {
printf("flexDirection: 'rowReverse', ");
}
if (node->style.justify_content == CSS_JUSTIFY_CENTER) {
@@ -210,25 +220,32 @@ void print_css_node(css_node_t *node, css_print_options_t options) {
}
static css_position_t leading[2] = {
static css_position_t leading[4] = {
/* CSS_FLEX_DIRECTION_COLUMN = */ CSS_TOP,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_LEFT
/* CSS_FLEX_DIRECTION_COLUMN_REVERSE = */ CSS_BOTTOM,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_LEFT,
/* CSS_FLEX_DIRECTION_ROW_REVERSE = */ CSS_RIGHT
};
static css_position_t trailing[2] = {
static css_position_t trailing[4] = {
/* CSS_FLEX_DIRECTION_COLUMN = */ CSS_BOTTOM,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_RIGHT
/* CSS_FLEX_DIRECTION_COLUMN_REVERSE = */ CSS_TOP,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_RIGHT,
/* CSS_FLEX_DIRECTION_ROW_REVERSE = */ CSS_LEFT
};
static css_position_t pos[2] = {
static css_position_t pos[4] = {
/* CSS_FLEX_DIRECTION_COLUMN = */ CSS_TOP,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_LEFT
/* CSS_FLEX_DIRECTION_COLUMN_REVERSE = */ CSS_BOTTOM,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_LEFT,
/* CSS_FLEX_DIRECTION_ROW_REVERSE = */ CSS_RIGHT
};
static css_dimension_t dim[2] = {
static css_dimension_t dim[4] = {
/* CSS_FLEX_DIRECTION_COLUMN = */ CSS_HEIGHT,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_WIDTH
/* CSS_FLEX_DIRECTION_COLUMN_REVERSE = */ CSS_HEIGHT,
/* CSS_FLEX_DIRECTION_ROW = */ CSS_WIDTH,
/* CSS_FLEX_DIRECTION_ROW_REVERSE = */ CSS_WIDTH
};
static float getMargin(css_node_t *node, int location) {
return node->style.margin[location];
}
@@ -278,10 +295,50 @@ static css_align_t getAlignItem(css_node_t *node, css_node_t *child) {
return node->style.align_items;
}
static bool isRowDirection(css_flex_direction_t flex_direction) {
return flex_direction == CSS_FLEX_DIRECTION_ROW ||
flex_direction == CSS_FLEX_DIRECTION_ROW_REVERSE;
}
static bool isColumnDirection(css_flex_direction_t flex_direction) {
return flex_direction == CSS_FLEX_DIRECTION_COLUMN ||
flex_direction == CSS_FLEX_DIRECTION_COLUMN_REVERSE;
}
static css_direction_t resolveDirection(css_node_t *node, css_direction_t parentDirection) {
css_direction_t direction = node->style.direction;
if (direction == CSS_DIRECTION_INHERIT) {
direction = parentDirection > CSS_DIRECTION_INHERIT ? parentDirection : CSS_DIRECTION_LTR;
}
return direction;
}
static css_flex_direction_t getFlexDirection(css_node_t *node) {
return node->style.flex_direction;
}
static css_flex_direction_t resolveAxis(css_flex_direction_t flex_direction, css_direction_t direction) {
if (direction == CSS_DIRECTION_RTL) {
if (flex_direction == CSS_FLEX_DIRECTION_ROW) {
return CSS_FLEX_DIRECTION_ROW_REVERSE;
} else if (flex_direction == CSS_FLEX_DIRECTION_ROW_REVERSE) {
return CSS_FLEX_DIRECTION_ROW;
}
}
return flex_direction;
}
static css_flex_direction_t getCrossFlexDirection(css_flex_direction_t flex_direction, css_direction_t direction) {
if (isColumnDirection(flex_direction)) {
return resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
} else {
return CSS_FLEX_DIRECTION_COLUMN;
}
}
static float getFlex(css_node_t *node) {
return node->style.flex;
}
@@ -328,10 +385,10 @@ static float boundAxis(css_node_t *node, css_flex_direction_t axis, float value)
float min = CSS_UNDEFINED;
float max = CSS_UNDEFINED;
if (axis == CSS_FLEX_DIRECTION_COLUMN) {
if (isColumnDirection(axis)) {
min = node->style.minDimensions[CSS_HEIGHT];
max = node->style.maxDimensions[CSS_HEIGHT];
} else if (axis == CSS_FLEX_DIRECTION_ROW) {
} else if (isRowDirection(axis)) {
min = node->style.minDimensions[CSS_WIDTH];
max = node->style.maxDimensions[CSS_WIDTH];
}
@@ -366,6 +423,11 @@ static void setDimensionFromStyle(css_node_t *node, css_flex_direction_t axis) {
);
}
static void setTrailingPosition(css_node_t *node, css_node_t *child, css_flex_direction_t axis) {
child->layout.position[trailing[axis]] = node->layout.dimensions[dim[axis]] -
child->layout.dimensions[dim[axis]] - child->layout.position[pos[axis]];
}
// If both left and right are defined, then use left. Otherwise return
// +left or -right depending on which is defined.
static float getRelativePosition(css_node_t *node, css_flex_direction_t axis) {
@@ -376,13 +438,12 @@ static float getRelativePosition(css_node_t *node, css_flex_direction_t axis) {
return -getPosition(node, trailing[axis]);
}
static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction_t parentDirection) {
/** START_GENERATED **/
css_flex_direction_t mainAxis = getFlexDirection(node);
css_flex_direction_t crossAxis = mainAxis == CSS_FLEX_DIRECTION_ROW ?
CSS_FLEX_DIRECTION_COLUMN :
CSS_FLEX_DIRECTION_ROW;
css_direction_t direction = resolveDirection(node, parentDirection);
css_flex_direction_t mainAxis = resolveAxis(getFlexDirection(node), direction);
css_flex_direction_t crossAxis = getCrossFlexDirection(mainAxis, direction);
css_flex_direction_t resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
// Handle width and height style attributes
setDimensionFromStyle(node, mainAxis);
@@ -392,26 +453,30 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// delta composed of the margin and left/top/right/bottom
node->layout.position[leading[mainAxis]] += getMargin(node, leading[mainAxis]) +
getRelativePosition(node, mainAxis);
node->layout.position[trailing[mainAxis]] += getMargin(node, trailing[mainAxis]) +
getRelativePosition(node, mainAxis);
node->layout.position[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
getRelativePosition(node, crossAxis);
node->layout.position[trailing[crossAxis]] += getMargin(node, trailing[crossAxis]) +
getRelativePosition(node, crossAxis);
if (isMeasureDefined(node)) {
float width = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
if (isDimDefined(node, resolvedRowAxis)) {
width = node->style.dimensions[CSS_WIDTH];
} else if (!isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]])) {
width = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]];
} else if (!isUndefined(node->layout.dimensions[dim[resolvedRowAxis]])) {
width = node->layout.dimensions[dim[resolvedRowAxis]];
} else {
width = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW);
getMarginAxis(node, resolvedRowAxis);
}
width -= getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
width -= getPaddingAndBorderAxis(node, resolvedRowAxis);
// 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, CSS_FLEX_DIRECTION_ROW) &&
isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]]);
bool isRowUndefined = !isDimDefined(node, resolvedRowAxis) &&
isUndefined(node->layout.dimensions[dim[resolvedRowAxis]]);
bool isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]);
@@ -424,7 +489,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
);
if (isRowUndefined) {
node->layout.dimensions[CSS_WIDTH] = measureDim.dimensions[CSS_WIDTH] +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
if (isColumnUndefined) {
node->layout.dimensions[CSS_HEIGHT] = measureDim.dimensions[CSS_HEIGHT] +
@@ -527,20 +592,20 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
} else {
maxWidth = CSS_UNDEFINED;
if (mainAxis != CSS_FLEX_DIRECTION_ROW) {
if (!isRowDirection(mainAxis)) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
}
// This is the main recursive call. We layout non flexible children.
if (alreadyComputedNextLayout == 0) {
layoutNode(child, maxWidth);
layoutNode(child, maxWidth, direction);
}
// Absolute positioned elements do not take part of the layout, so we
@@ -626,17 +691,17 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
);
maxWidth = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
} else if (mainAxis != CSS_FLEX_DIRECTION_ROW) {
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
getPaddingAndBorderAxis(node, resolvedRowAxis);
} else if (!isRowDirection(mainAxis)) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
// And we recursively call the layout algorithm for this child
layoutNode(child, maxWidth);
layoutNode(child, maxWidth, direction);
}
}
@@ -689,6 +754,11 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// If the child is position absolute (without top/left) or relative,
// we put it at the current accumulated offset.
child->layout.position[pos[mainAxis]] += mainDim;
// Define the trailing position accordingly.
if (!isUndefined(node->layout.dimensions[dim[mainAxis]])) {
setTrailingPosition(node, child, mainAxis);
}
}
// Now that we placed the element, we need to update the variables
@@ -783,6 +853,12 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// We can never assign a width smaller than the padding and borders
getPaddingAndBorderAxis(node, mainAxis)
);
// Now that the width is defined, we should update the trailing
// positions for the children.
for (i = 0; i < node->children_count; ++i) {
setTrailingPosition(node, node->get_child(node->context, i), mainAxis);
}
}
if (isUndefined(node->layout.dimensions[dim[crossAxis]])) {
@@ -835,8 +911,9 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
/** END_GENERATED **/
}
void layoutNode(css_node_t *node, float parentMaxWidth) {
void layoutNode(css_node_t *node, float parentMaxWidth, css_direction_t parentDirection) {
css_layout_t *layout = &node->layout;
css_direction_t direction = node->style.direction;
layout->should_update = true;
bool skipLayout =
@@ -844,6 +921,7 @@ void layoutNode(css_node_t *node, float parentMaxWidth) {
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_direction, direction);
if (skipLayout) {
layout->dimensions[CSS_WIDTH] = layout->last_dimensions[CSS_WIDTH];
@@ -854,8 +932,9 @@ void layoutNode(css_node_t *node, float parentMaxWidth) {
layout->last_requested_dimensions[CSS_WIDTH] = layout->dimensions[CSS_WIDTH];
layout->last_requested_dimensions[CSS_HEIGHT] = layout->dimensions[CSS_HEIGHT];
layout->last_parent_max_width = parentMaxWidth;
layout->last_direction = direction;
layoutNodeImpl(node, parentMaxWidth);
layoutNodeImpl(node, parentMaxWidth, parentDirection);
layout->last_dimensions[CSS_WIDTH] = layout->dimensions[CSS_WIDTH];
layout->last_dimensions[CSS_HEIGHT] = layout->dimensions[CSS_HEIGHT];

16
src/Layout.h
View File

@@ -23,9 +23,17 @@ static const unsigned long __nan[2] = {0xffffffff, 0x7fffffff};
#define CSS_UNDEFINED NAN
typedef enum {
CSS_DIRECTION_INHERIT = 0,
CSS_DIRECTION_LTR,
CSS_DIRECTION_RTL
} css_direction_t;
typedef enum {
CSS_FLEX_DIRECTION_COLUMN = 0,
CSS_FLEX_DIRECTION_ROW
CSS_FLEX_DIRECTION_COLUMN_REVERSE,
CSS_FLEX_DIRECTION_ROW,
CSS_FLEX_DIRECTION_ROW_REVERSE
} css_flex_direction_t;
typedef enum {
@@ -72,7 +80,7 @@ typedef enum {
} css_dimension_t;
typedef struct {
float position[2];
float position[4];
float dimensions[2];
// Instead of recomputing the entire layout every single time, we
@@ -82,6 +90,7 @@ typedef struct {
float last_parent_max_width;
float last_dimensions[2];
float last_position[2];
css_direction_t last_direction;
} css_layout_t;
typedef struct {
@@ -89,6 +98,7 @@ typedef struct {
} css_dim_t;
typedef struct {
css_direction_t direction;
css_flex_direction_t flex_direction;
css_justify_t justify_content;
css_align_t align_items;
@@ -142,7 +152,7 @@ typedef enum {
void print_css_node(css_node_t *node, css_print_options_t options);
// Function that computes the layout!
void layoutNode(css_node_t *node, float maxWidth);
void layoutNode(css_node_t *node, float maxWidth, css_direction_t parentDirection);
bool isUndefined(float value);
#endif

172
src/Layout.js
View File

@@ -11,8 +11,14 @@ var computeLayout = (function() {
var CSS_UNDEFINED;
var CSS_DIRECTION_INHERIT = 'inherit';
var CSS_DIRECTION_LTR = 'ltr';
var CSS_DIRECTION_RTL = 'rtl';
var CSS_FLEX_DIRECTION_ROW = 'row';
var CSS_FLEX_DIRECTION_ROW_REVERSE = 'row-reverse';
var CSS_FLEX_DIRECTION_COLUMN = 'column';
var CSS_FLEX_DIRECTION_COLUMN_REVERSE = 'column-reverse';
// var CSS_JUSTIFY_FLEX_START = 'flex-start';
var CSS_JUSTIFY_CENTER = 'center';
@@ -29,20 +35,28 @@ var computeLayout = (function() {
var CSS_POSITION_ABSOLUTE = 'absolute';
var leading = {
row: 'left',
column: 'top'
'row': 'left',
'row-reverse': 'right',
'column': 'top',
'column-reverse': 'bottom'
};
var trailing = {
row: 'right',
column: 'bottom'
'row': 'right',
'row-reverse': 'left',
'column': 'bottom',
'column-reverse': 'top'
};
var pos = {
row: 'left',
column: 'top'
'row': 'left',
'row-reverse': 'right',
'column': 'top',
'column-reverse': 'bottom'
};
var dim = {
row: 'width',
column: 'height'
'row': 'width',
'row-reverse': 'width',
'column': 'height',
'column-reverse': 'height'
};
function capitalizeFirst(str) {
@@ -67,7 +81,9 @@ var computeLayout = (function() {
width: undefined,
height: undefined,
top: 0,
left: 0
left: 0,
right: 0,
bottom: 0
};
if (!node.style) {
node.style = {};
@@ -88,6 +104,10 @@ var computeLayout = (function() {
} else {
delete node.children;
}
delete layout.right;
delete layout.bottom;
return layout;
}
@@ -154,11 +174,56 @@ var computeLayout = (function() {
return 'stretch';
}
function isRowDirection(flexDirection) {
return flexDirection === CSS_FLEX_DIRECTION_ROW ||
flexDirection === CSS_FLEX_DIRECTION_ROW_REVERSE;
}
function isColumnDirection(flexDirection) {
return flexDirection === CSS_FLEX_DIRECTION_COLUMN ||
flexDirection === CSS_FLEX_DIRECTION_COLUMN_REVERSE;
}
function resolveAxis(axis, direction) {
if (direction === CSS_DIRECTION_RTL) {
if (axis === CSS_FLEX_DIRECTION_ROW) {
return CSS_FLEX_DIRECTION_ROW_REVERSE;
} else if (axis === CSS_FLEX_DIRECTION_ROW_REVERSE) {
return CSS_FLEX_DIRECTION_ROW;
}
}
return axis;
}
function resolveDirection(node, parentDirection) {
var direction;
if ('direction' in node.style) {
direction = node.style.direction;
} else {
direction = CSS_DIRECTION_INHERIT;
}
if (direction === CSS_DIRECTION_INHERIT) {
direction = (parentDirection === undefined ? CSS_DIRECTION_LTR : parentDirection);
}
return direction;
}
function getFlexDirection(node) {
if ('flexDirection' in node.style) {
return node.style.flexDirection;
}
return 'column';
return CSS_FLEX_DIRECTION_COLUMN;
}
function getCrossFlexDirection(flexDirection, direction) {
if (isColumnDirection(flexDirection)) {
return resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
} else {
return CSS_FLEX_DIRECTION_COLUMN;
}
}
function getPositionType(node) {
@@ -208,13 +273,17 @@ var computeLayout = (function() {
function boundAxis(node, axis, value) {
var min = {
row: node.style.minWidth,
column: node.style.minHeight
'row': node.style.minWidth,
'row-reverse': node.style.minWidth,
'column': node.style.minHeight,
'column-reverse': node.style.minHeight
}[axis];
var max = {
row: node.style.maxWidth,
column: node.style.maxHeight
'row': node.style.maxWidth,
'row-reverse': node.style.maxWidth,
'column': node.style.maxHeight,
'column-reverse': node.style.maxHeight
}[axis];
var boundValue = value;
@@ -252,6 +321,11 @@ var computeLayout = (function() {
);
}
function setTrailingPosition(node, child, axis) {
child.layout[trailing[axis]] = node.layout[dim[axis]] -
child.layout[dim[axis]] - child.layout[pos[axis]];
}
// If both left and right are defined, then use left. Otherwise return
// +left or -right depending on which is defined.
function getRelativePosition(node, axis) {
@@ -261,12 +335,11 @@ var computeLayout = (function() {
return -getPosition(node, trailing[axis]);
}
function layoutNode(node, parentMaxWidth) {
var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
CSS_FLEX_DIRECTION_COLUMN :
CSS_FLEX_DIRECTION_ROW;
function layoutNode(node, parentMaxWidth, /*css_direction_t*/parentDirection) {
var/*css_direction_t*/ direction = resolveDirection(node, parentDirection);
var/*css_flex_direction_t*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
var/*css_flex_direction_t*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
var/*css_flex_direction_t*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
// Handle width and height style attributes
setDimensionFromStyle(node, mainAxis);
@@ -276,26 +349,30 @@ var computeLayout = (function() {
// delta composed of the margin and left/top/right/bottom
node.layout[leading[mainAxis]] += getMargin(node, leading[mainAxis]) +
getRelativePosition(node, mainAxis);
node.layout[trailing[mainAxis]] += getMargin(node, trailing[mainAxis]) +
getRelativePosition(node, mainAxis);
node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
getRelativePosition(node, crossAxis);
node.layout[trailing[crossAxis]] += getMargin(node, trailing[crossAxis]) +
getRelativePosition(node, crossAxis);
if (isMeasureDefined(node)) {
var/*float*/ width = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
if (isDimDefined(node, resolvedRowAxis)) {
width = node.style.width;
} else if (!isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_ROW]])) {
width = node.layout[dim[CSS_FLEX_DIRECTION_ROW]];
} else if (!isUndefined(node.layout[dim[resolvedRowAxis]])) {
width = node.layout[dim[resolvedRowAxis]];
} else {
width = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW);
getMarginAxis(node, resolvedRowAxis);
}
width -= getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
width -= getPaddingAndBorderAxis(node, resolvedRowAxis);
// 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.
var/*bool*/ isRowUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_ROW) &&
isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_ROW]]);
var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) &&
isUndefined(node.layout[dim[resolvedRowAxis]]);
var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
@@ -308,7 +385,7 @@ var computeLayout = (function() {
);
if (isRowUndefined) {
node.layout.width = measureDim.width +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
if (isColumnUndefined) {
node.layout.height = measureDim.height +
@@ -411,20 +488,20 @@ var computeLayout = (function() {
} else {
maxWidth = CSS_UNDEFINED;
if (mainAxis !== CSS_FLEX_DIRECTION_ROW) {
if (!isRowDirection(mainAxis)) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
}
// This is the main recursive call. We layout non flexible children.
if (alreadyComputedNextLayout === 0) {
layoutNode(/*(java)!layoutContext, */child, maxWidth);
layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
}
// Absolute positioned elements do not take part of the layout, so we
@@ -510,17 +587,17 @@ var computeLayout = (function() {
);
maxWidth = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
} else if (mainAxis !== CSS_FLEX_DIRECTION_ROW) {
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
getPaddingAndBorderAxis(node, resolvedRowAxis);
} else if (!isRowDirection(mainAxis)) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
// And we recursively call the layout algorithm for this child
layoutNode(/*(java)!layoutContext, */child, maxWidth);
layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
}
}
@@ -573,6 +650,11 @@ var computeLayout = (function() {
// If the child is position absolute (without top/left) or relative,
// we put it at the current accumulated offset.
child.layout[pos[mainAxis]] += mainDim;
// Define the trailing position accordingly.
if (!isUndefined(node.layout[dim[mainAxis]])) {
setTrailingPosition(node, child, mainAxis);
}
}
// Now that we placed the element, we need to update the variables
@@ -667,6 +749,12 @@ var computeLayout = (function() {
// We can never assign a width smaller than the padding and borders
getPaddingAndBorderAxis(node, mainAxis)
);
// Now that the width is defined, we should update the trailing
// positions for the children.
for (i = 0; i < node.children.length; ++i) {
setTrailingPosition(node, node.children[i], mainAxis);
}
}
if (isUndefined(node.layout[dim[crossAxis]])) {

2118
src/__tests__/Layout-test.c
View File

File diff suppressed because it is too large Load Diff

616
src/__tests__/Layout-test.js
View File

@@ -19,14 +19,14 @@ describe('Javascript Only', function() {
it('should fill root node with layout, style, and children', function() {
testFillNodes(
{},
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
{layout: {width: undefined, height: undefined, top: 0, left: 0, right: 0, bottom: 0}, style: {}, children: []}
);
});
it('should fill root and child node with layout, style, and children', function() {
testFillNodes(
{children: [{}]},
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: [
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
{layout: {width: undefined, height: undefined, top: 0, left: 0, right: 0, bottom: 0}, style: {}, children: [
{layout: {width: undefined, height: undefined, top: 0, left: 0, right: 0, bottom: 0}, style: {}, children: []}
]}
);
});
@@ -46,9 +46,9 @@ describe('Javascript Only', function() {
]}
);
});
});
describe('Layout', function() {
it('should layout a single node with width and height', function() {
testLayout({
@@ -73,6 +73,21 @@ describe('Layout', function() {
);
});
it('should layout node with children in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
{style: {width: 500, height: 500}},
{style: {width: 250, height: 250}},
{style: {width: 125, height: 125}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 500, height: 500, top: 500, left: 0},
{width: 250, height: 250, top: 250, left: 0},
{width: 125, height: 125, top: 125, left: 0}
]}
);
});
it('should layout node with nested children', function() {
testLayout(
{style: {width: 1000, height: 1000}, children: [
@@ -92,6 +107,25 @@ describe('Layout', function() {
);
});
it('should layout node with nested children in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
{style: {width: 500, height: 500}},
{style: {width: 500, height: 500, flexDirection: 'column-reverse'}, children: [
{style: {width: 250, height: 250}},
{style: {width: 250, height: 250}}
]}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 500, height: 500, top: 500, left: 0},
{width: 500, height: 500, top: 0, left: 0, children: [
{width: 250, height: 250, top: 250, left: 0},
{width: 250, height: 250, top: 0, left: 0}
]}
]}
);
});
it('should layout node with margin', function() {
testLayout(
{style: {width: 100, height: 200, margin: 10}},
@@ -114,6 +148,34 @@ describe('Layout', function() {
);
});
it('should layout node with several children in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', margin: 10}, children: [
{style: {width: 100, height: 100, margin: 50}},
{style: {width: 100, height: 100, margin: 25}},
{style: {width: 100, height: 100, margin: 10}}
]},
{width: 1000, height: 1000, top: 10, left: 10, children: [
{width: 100, height: 100, top: 850, left: 50},
{width: 100, height: 100, top: 675, left: 25},
{width: 100, height: 100, top: 540, left: 10}
]}
);
});
it('should layout rtl with reverse correctly', function() {
testLayout(
{style: {width: 1000, height: 1000, direction: 'rtl', flexDirection: 'row-reverse'}, children: [
{style: {width: 100, height: 200}},
{style: {width: 300, height: 150}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 200, top: 0, left: 0},
{width: 300, height: 150, top: 0, left: 100}
]}
);
});
it('should layout node with row flex direction', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'row'}, children: [
@@ -127,6 +189,19 @@ describe('Layout', function() {
);
});
it('should layout node with row flex direction in rtl', function() {
testLayout(
{style: {width: 1000, height: 1000, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {width: 100, height: 200}},
{style: {width: 300, height: 150}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 200, top: 0, left: 900},
{width: 300, height: 150, top: 0, left: 600}
]}
);
});
it('should layout node based on children main dimensions', function() {
testLayout(
{style: {width: 300}, children: [
@@ -140,6 +215,19 @@ describe('Layout', function() {
);
});
it('should layout node based on children main dimensions in reverse', function() {
testLayout(
{style: {width: 300, flexDirection: 'column-reverse'}, children: [
{style: {width: 100, height: 200}},
{style: {width: 300, height: 150}}
]},
{width: 300, height: 350, top: 0, left: 0, children: [
{width: 100, height: 200, top: 150, left: 0},
{width: 300, height: 150, top: 0, left: 0}
]}
);
});
it('should layout node with just flex', function() {
testLayout(
{style: {width: 1000, height: 1000}, children: [
@@ -153,6 +241,19 @@ describe('Layout', function() {
);
});
it('should layout node with just flex in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
{style: {width: 100, height: 200}},
{style: {width: 100, flex: 1}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 200, top: 800, left: 0},
{width: 100, height: 800, top: 0, left: 0}
]}
);
});
it('should layout node with flex recursively', function() {
testLayout(
{style: {width: 1000, height: 1000}, children: [
@@ -172,6 +273,25 @@ describe('Layout', function() {
);
});
it('should layout node with flex recursively in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse'}, children: [
{style: {width: 1000, flex: 1, flexDirection: 'column-reverse'}, children: [
{style: {width: 1000, flex: 1, flexDirection: 'column-reverse'}, children: [
{style: {width: 1000, flex: 1, flexDirection: 'column-reverse'}}
]}
]}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 1000, height: 1000, top: 0, left: 0}
]}
]}
]}
);
});
it('should layout node with targeted margin', function() {
testLayout(
{style: {width: 1000, height: 1000, marginTop: 10, marginLeft: 5}, children: [
@@ -185,6 +305,19 @@ describe('Layout', function() {
);
});
it('should layout node with targeted margin in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', marginTop: 10, marginLeft: 5}, children: [
{style: {width: 100, height: 100, marginTop: 50, marginLeft: 15, marginBottom: 20}},
{style: {width: 100, height: 100, marginLeft: 30}}
]},
{width: 1000, height: 1000, top: 10, left: 5, children: [
{width: 100, height: 100, top: 880, left: 15},
{width: 100, height: 100, top: 730, left: 30}
]}
);
});
it('should layout node with justifyContent: flex-start', function() {
testLayout(
{style: {width: 1000, height: 1000, justifyContent: 'flex-start'}, children: [
@@ -198,6 +331,19 @@ describe('Layout', function() {
);
});
it('should layout node with justifyContent: flex-start in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'flex-start'}, children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 100, top: 900, left: 0},
{width: 100, height: 100, top: 800, left: 0}
]}
);
});
it('should layout node with justifyContent: flex-end', function() {
testLayout(
{style: {width: 1000, height: 1000, justifyContent: 'flex-end'}, children: [
@@ -211,6 +357,19 @@ describe('Layout', function() {
);
});
it('should layout node with justifyContent: flex-end in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'flex-end'}, children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 100, top: 100, left: 0},
{width: 100, height: 100, top: 0, left: 0}
]}
);
});
it('should layout node with justifyContent: space-between', function() {
testLayout(
{style: {width: 1000, height: 1000, justifyContent: 'space-between'}, children: [
@@ -224,6 +383,19 @@ describe('Layout', function() {
);
});
it('should layout node with justifyContent: space-between in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'space-between'}, children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 100, top: 900, left: 0},
{width: 100, height: 100, top: 0, left: 0}
]}
);
});
it('should layout node with justifyContent: space-around', function() {
testLayout(
{style: {width: 1000, height: 1000, justifyContent: 'space-around'}, children: [
@@ -237,6 +409,19 @@ describe('Layout', function() {
);
});
it('should layout node with justifyContent: space-around in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'space-around'}, children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 100, top: 700, left: 0},
{width: 100, height: 100, top: 200, left: 0}
]}
);
});
it('should layout node with justifyContent: center', function() {
testLayout(
{style: {width: 1000, height: 1000, justifyContent: 'center'}, children: [
@@ -250,6 +435,19 @@ describe('Layout', function() {
);
});
it('should layout node with justifyContent: center in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', justifyContent: 'center'}, children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 100, top: 500, left: 0},
{width: 100, height: 100, top: 400, left: 0}
]}
);
});
it('should layout node with flex override height', function() {
testLayout(
{style: {width: 1000, height: 1000}, children: [
@@ -274,6 +472,19 @@ describe('Layout', function() {
);
});
it('should layout node with alignItems: flex-start in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'flex-start'}, children: [
{style: {width: 200, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 900, left: 0},
{width: 100, height: 100, top: 800, left: 0}
]}
);
});
it('should layout node with alignItems: center', function() {
testLayout(
{style: {width: 1000, height: 1000, alignItems: 'center'}, children: [
@@ -287,6 +498,19 @@ describe('Layout', function() {
);
});
it('should layout node with alignItems: center in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'center'}, children: [
{style: {width: 200, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 900, left: 400},
{width: 100, height: 100, top: 800, left: 450}
]}
);
});
it('should layout node with alignItems: flex-end', function() {
testLayout(
{style: {width: 1000, height: 1000, alignItems: 'flex-end'}, children: [
@@ -300,6 +524,19 @@ describe('Layout', function() {
);
});
it('should layout node with alignItems: flex-end in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'flex-end'}, children: [
{style: {width: 200, height: 100}},
{style: {width: 100, height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 900, left: 800},
{width: 100, height: 100, top: 800, left: 900}
]}
);
});
it('should layout node with alignSelf overrides alignItems', function() {
testLayout(
{style: {width: 1000, height: 1000, alignItems: 'flex-end'}, children: [
@@ -313,6 +550,19 @@ describe('Layout', function() {
);
});
it('should layout node with alignSelf overrides alignItems in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'flex-end'}, children: [
{style: {width: 200, height: 100}},
{style: {width: 100, height: 100, alignSelf: 'center'}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 900, left: 800},
{width: 100, height: 100, top: 800, left: 450}
]}
);
});
it('should layout node with alignItem: stretch', function() {
testLayout(
{style: {width: 1000, height: 1000, alignItems: 'stretch'}, children: [
@@ -324,6 +574,17 @@ describe('Layout', function() {
);
});
it('should layout node with alignItem: stretch in reverse', function() {
testLayout(
{style: {width: 1000, height: 1000, flexDirection: 'column-reverse', alignItems: 'stretch'}, children: [
{style: {height: 100}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 1000, height: 100, top: 900, left: 0}
]}
);
});
it('should layout empty node', function() {
testLayout(
{style: {}, children: [
@@ -335,6 +596,17 @@ describe('Layout', function() {
);
});
it('should layout empty node in reverse', function() {
testLayout(
{style: {flexDirection: 'column-reverse'}, children: [
{style: {}}
]},
{width: 0, height: 0, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 0}
]}
);
});
it('should layout child with margin', function() {
testLayout(
{style: {}, children: [
@@ -346,6 +618,17 @@ describe('Layout', function() {
);
});
it('should layout child with margin in reverse', function() {
testLayout(
{style: {flexDirection: 'column-reverse'}, children: [
{style: {margin: 5}}
]},
{width: 10, height: 10, top: 0, left: 0, children: [
{width: 0, height: 0, top: 5, left: 5}
]}
);
});
it('should not shrink children if not enough space', function() {
testLayout(
{style: {height: 100}, children: [
@@ -359,6 +642,19 @@ describe('Layout', function() {
);
});
it('should not shrink children if not enough space in reverse', function() {
testLayout(
{style: {height: 100, flexDirection: 'column-reverse'}, children: [
{style: {height: 100}},
{style: {height: 200}}
]},
{width: 0, height: 100, top: 0, left: 0, children: [
{width: 0, height: 100, top: 0, left: 0},
{width: 0, height: 200, top: -200, left: 0}
]}
);
});
it('should layout for center', function() {
testLayout(
{style: {justifyContent: 'center'}},
@@ -377,6 +673,17 @@ describe('Layout', function() {
);
});
it('should layout flex-end taking into account margin in reverse', function() {
testLayout(
{style: {height: 100, flexDirection: 'column-reverse', justifyContent: 'flex-end'}, children: [
{style: {marginTop: 10}}
]},
{width: 0, height: 100, top: 0, left: 0, children: [
{width: 0, height: 0, top: 10, left: 0}
]}
);
});
it('should layout alignItems with margin', function() {
testLayout(
{style: {}, children: [
@@ -394,6 +701,23 @@ describe('Layout', function() {
);
});
it('should layout alignItems with margin in reverse', function() {
testLayout(
{style: {}, children: [
{style: {flexDirection: 'column-reverse', alignItems: 'flex-end'}, children: [
{style: {margin: 10}},
{style: {height: 100}}
]}
]},
{width: 20, height: 120, top: 0, left: 0, children: [
{width: 20, height: 120, top: 0, left: 0, children: [
{width: 0, height: 0, top: 110, left: 10},
{width: 0, height: 100, top: 0, left: 20}
]}
]}
);
});
it('should layout flex inside of an empty element', function() {
testLayout(
{style: {}, children: [
@@ -416,6 +740,17 @@ describe('Layout', function() {
);
});
it('should layout alignItems stretch and margin in reverse', function() {
testLayout(
{style: {flexDirection: 'column-reverse', alignItems: 'stretch'}, children: [
{style: {marginLeft: 10}}
]},
{width: 10, height: 0, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 10}
]}
);
});
it('should layout node with padding', function() {
testLayout(
{style: {padding: 5}},
@@ -652,6 +987,19 @@ describe('Layout', function() {
);
});
it('should layout node with space-around and child position absolute in reverse', function() {
testLayout(
{style: {height: 200, flexDirection: 'column-reverse', justifyContent: 'space-around'}, children: [
{style: {position: 'absolute'}},
{style: {}}
]},
{width: 0, height: 200, top: 0, left: 0, children: [
{width: 0, height: 0, top: 100, left: 0},
{width: 0, height: 0, top: 100, left: 0}
]}
);
});
it('should layout node with flex and main margin', function() {
testLayout(
{style: {width: 700, flexDirection: 'row'}, children: [
@@ -663,6 +1011,17 @@ describe('Layout', function() {
);
});
it('should layout node with flex and main margin in rtl', function() {
testLayout(
{style: {width: 700, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {marginRight: 5, flex: 1}}
]},
{width: 700, height: 0, top: 0, left: 0, children: [
{width: 695, height: 0, top: 0, left: 0}
]}
);
});
it('should layout node with multiple flex and padding', function() {
testLayout(
{style: {width: 700, flexDirection: 'row'}, children: [
@@ -676,6 +1035,19 @@ describe('Layout', function() {
);
});
it('should layout node with multiple flex and padding in rtl', function() {
testLayout(
{style: {width: 700, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1}},
{style: {paddingLeft: 5, flex: 1}}
]},
{width: 700, height: 0, top: 0, left: 0, children: [
{width: 347.5, height: 0, top: 0, left: 352.5},
{width: 352.5, height: 0, top: 0, left: 0}
]}
);
});
it('should layout node with multiple flex and margin', function() {
testLayout(
{style: {width: 700, flexDirection: 'row'}, children: [
@@ -689,6 +1061,19 @@ describe('Layout', function() {
);
});
it('should layout node with multiple flex and margin in rtl', function() {
testLayout(
{style: {width: 700, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1}},
{style: {marginRight: 5, flex: 1}}
]},
{width: 700, height: 0, top: 0, left: 0, children: [
{width: 347.5, height: 0, top: 0, left: 352.5},
{width: 347.5, height: 0, top: 0, left: 0}
]}
);
});
it('should layout node with flex and overflow', function() {
testLayout(
{style: {height: 300}, children: [
@@ -713,6 +1098,17 @@ describe('Layout', function() {
);
});
it('should layout node with flex and position absolute in rtl', function() {
testLayout(
{style: {width: 600, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1, position: 'absolute'}}
]},
{width: 600, height: 0, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 600}
]}
);
});
it('should layout node with double flex and position absolute', function() {
testLayout(
{style: {height: 500}, children: [
@@ -788,6 +1184,17 @@ describe('Layout', function() {
);
});
it('should handle negative margin and min padding correctly in rtl', function() {
testLayout(
{style: {borderLeftWidth: 1, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {marginLeft: -8}}
]},
{width: 1, height: 0, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 1}
]}
);
});
it('should layout node with just text', function() {
testLayout(
{style: {measure: text(texts.small)}},
@@ -839,6 +1246,21 @@ describe('Layout', function() {
);
});
it('should layout node with text and flex in rtl', function() {
testLayout(
{style: {}, children: [
{style: {width: 500, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1, measure: text(texts.big)}}
]}
]},
{width: 500, height: textSizes.smallHeight, top: 0, left: 0, children: [
{width: 500, height: textSizes.smallHeight, top: 0, left: 0, children: [
{width: 500, height: textSizes.smallHeight, top: 0, left: 0}
]}
]}
);
});
it('should layout node with text and stretch', function() {
testLayout(
{style: {width: 130}, children: [
@@ -908,6 +1330,19 @@ describe('Layout', function() {
);
});
it('should layout space-between when remaining space is negative in reverse', function() {
testLayout(
{style: {height: 100, flexDirection: 'column-reverse', justifyContent: 'space-between'}, children: [
{style: {height: 900}},
{style: {}}
]},
{width: 0, height: 100, top: 0, left: 0, children: [
{width: 0, height: 900, top: -800, left: 0},
{width: 0, height: 0, top: -800, left: 0}
]}
);
});
it('should layout flex-end when remaining space is negative', function() {
testLayout(
{style: {width: 200, flexDirection: 'row', justifyContent: 'flex-end'}, children: [
@@ -919,6 +1354,17 @@ describe('Layout', function() {
);
});
it('should layout flex-end when remaining space is negative in rtl', function() {
testLayout(
{style: {width: 200, direction: 'rtl', flexDirection: 'row', justifyContent: 'flex-end'}, children: [
{style: {width: 900}}
]},
{width: 200, height: 0, top: 0, left: 0, children: [
{width: 900, height: 0, top: 0, left: 0}
]}
);
});
it('should layout text with flexDirection row', function() {
testLayout(
{style: {}, children: [
@@ -934,6 +1380,21 @@ describe('Layout', function() {
);
});
it('should layout text with flexDirection row in rtl', function() {
testLayout(
{style: { direction: 'rtl' }, children: [
{style: {width: 200, flexDirection: 'row'}, children: [
{style: {margin: 20, measure: text(texts.big)}}
]}
]},
{width: 200, height: textSizes.smallHeight + 40, top: 0, left: 0, children: [
{width: 200, height: textSizes.smallHeight + 40, top: 0, left: 0, children: [
{width: textSizes.bigWidth, height: textSizes.smallHeight, top: 20, left: 7.578125}
]}
]}
);
});
it('should layout with text and margin', function() {
testLayout(
{style: {}, children: [
@@ -973,15 +1434,28 @@ describe('Layout', function() {
);
});
it('should layout with negative flex', function() {
it('should layout with arbitrary flex in reverse', function() {
testLayout(
{style: {width: 100, height: 100, alignSelf: 'flex-start'}, children: [
{style: {width: 100, height: 100, flexDirection: 'column-reverse', alignSelf: 'flex-start'}, children: [
{style: {flex: 2.5, alignSelf: 'flex-start'}},
{style: {flex: 7.5, alignSelf: 'flex-start'}}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 25, top: 75, left: 0},
{width: 0, height: 75, top: 0, left: 0}
]}
);
});
it('should layout with negative flex in reverse', function() {
testLayout(
{style: {width: 100, height: 100, flexDirection: 'column-reverse', alignSelf: 'flex-start'}, children: [
{style: {flex: -2.5, alignSelf: 'flex-start'}},
{style: {flex: 0, alignSelf: 'flex-start'}}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 0},
{width: 0, height: 0, top: 0, left: 0}
{width: 0, height: 0, top: 100, left: 0},
{width: 0, height: 0, top: 100, left: 0}
]}
);
});
@@ -1196,6 +1670,21 @@ describe('Layout', function() {
);
});
it('should layout flex-wrap in rtl', function() {
testLayout(
{style: {flexWrap: 'wrap', direction: 'rtl', flexDirection: 'row', width: 100}, children: [
{style: {width: 40, height: 10}},
{style: {width: 40, height: 10}},
{style: {width: 40, height: 10}}
]},
{width: 100, height: 20, top: 0, left: 0, children: [
{width: 40, height: 10, top: 0, left: 60},
{width: 40, height: 10, top: 0, left: 20},
{width: 40, height: 10, top: 10, left: 60}
]}
);
});
it('should layout flex wrap with a line bigger than container', function() {
testLayout(
{style: {height: 100, flexWrap: 'wrap'}, children: [
@@ -1315,6 +1804,21 @@ describe('Layout', function() {
);
});
it('should override flex direction size with min bounds in rtl', function() {
testLayout(
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1}},
{style: {flex: 1, minWidth: 200}},
{style: {flex: 1}}
]},
{width: 300, height: 200, top: 0, left: 0, children: [
{width: 50, height: 200, top: 0, left: 250},
{width: 200, height: 200, top: 0, left: 50},
{width: 50, height: 200, top: 0, left: 0}
]}
);
});
it('should not override flex direction size within bounds', function() {
testLayout(
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
@@ -1330,6 +1834,21 @@ describe('Layout', function() {
);
});
it('should not override flex direction size within bounds in rtl', function() {
testLayout(
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1}},
{style: {flex: 1, minWidth: 90, maxWidth: 110}},
{style: {flex: 1}}
]},
{width: 300, height: 200, top: 0, left: 0, children: [
{width: 100, height: 200, top: 0, left: 200},
{width: 100, height: 200, top: 0, left: 100},
{width: 100, height: 200, top: 0, left: 0}
]}
);
});
it('should override flex direction size with max bounds', function() {
testLayout(
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
@@ -1345,6 +1864,21 @@ describe('Layout', function() {
);
});
it('should override flex direction size with max bounds in rtl', function() {
testLayout(
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1}},
{style: {flex: 1, maxWidth: 60}},
{style: {flex: 1}}
]},
{width: 300, height: 200, top: 0, left: 0, children: [
{width: 120, height: 200, top: 0, left: 180},
{width: 60, height: 200, top: 0, left: 120},
{width: 120, height: 200, top: 0, left: 0}
]}
);
});
it('should ignore flex size if fully max bound', function() {
testLayout(
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
@@ -1360,6 +1894,21 @@ describe('Layout', function() {
);
});
it('should ignore flex size if fully max bound in rtl', function() {
testLayout(
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1, maxWidth: 60}},
{style: {flex: 1, maxWidth: 60}},
{style: {flex: 1, maxWidth: 60}}
]},
{width: 300, height: 200, top: 0, left: 0, children: [
{width: 60, height: 200, top: 0, left: 240},
{width: 60, height: 200, top: 0, left: 180},
{width: 60, height: 200, top: 0, left: 120}
]}
);
});
it('should ignore flex size if fully min bound', function() {
testLayout(
{style: {width: 300, height: 200, flexDirection: 'row'}, children: [
@@ -1375,6 +1924,21 @@ describe('Layout', function() {
);
});
it('should ignore flex size if fully min bound in rtl', function() {
testLayout(
{style: {width: 300, height: 200, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {flex: 1, minWidth: 120}},
{style: {flex: 1, minWidth: 120}},
{style: {flex: 1, minWidth: 120}}
]},
{width: 300, height: 200, top: 0, left: 0, children: [
{width: 120, height: 200, top: 0, left: 180},
{width: 120, height: 200, top: 0, left: 60},
{width: 120, height: 200, top: 0, left: -60}
]}
);
});
it('should pre-fill child size within bounds', function() {
testLayout(
{style: {width: 300, height: 200}, children: [
@@ -1491,6 +2055,17 @@ describe('Layout', function() {
);
});
it('should keep cross axis size within min bounds in rtl', function() {
testLayout(
{style: {width: 1000, direction: 'rtl', flexDirection: 'row'}, children: [
{style: {height: 100, minHeight: 110, minWidth: 100}}
]},
{width: 1000, height: 110, top: 0, left: 0, children: [
{width: 100, height: 110, top: 0, left: 900}
]}
);
});
it('should layout node with position absolute, top and left and max bounds', function() {
testLayout(
{style: {width: 1000, height: 1000}, children: [
@@ -1586,5 +2161,28 @@ describe('Layout', function() {
);
});
it('should layout nested nodes with mixed directions', function() {
testLayout(
{style: {width: 200, height: 200, direction: 'rtl'}, children: [
{style: {flexDirection: 'row'}, children: [
{style: {width: 50, height: 50}},
{style: {width: 50, height: 50}}
]},
{style: {direction: 'ltr', flexDirection: 'row'}, children: [
{style: {width: 50, height: 50}},
{style: {width: 50, height: 50}}
]}
]},
{width: 200, height: 200, top: 0, left: 0, children: [
{width: 200, height: 50, top: 0, left: 0, children: [
{width: 50, height: 50, top: 0, left: 150},
{width: 50, height: 50, top: 0, left: 100}
]},
{width: 200, height: 50, top: 50, left: 0, children: [
{width: 50, height: 50, top: 0, left: 0},
{width: 50, height: 50, top: 0, left: 50}
]}
]}
);
});
});

15
src/java/src/com/facebook/csslayout/CSSDirection.java Normal file
View File

@@ -0,0 +1,15 @@
/**
* Copyright (c) 2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
package com.facebook.csslayout;
public enum CSSDirection {
INHERIT,
LTR,
RTL,
}

2
src/java/src/com/facebook/csslayout/CSSFlexDirection.java
View File

@@ -10,5 +10,7 @@ package com.facebook.csslayout;
public enum CSSFlexDirection {
COLUMN,
COLUMN_REVERSE,
ROW,
ROW_REVERSE
}

22
src/java/src/com/facebook/csslayout/CSSLayout.java
View File

@@ -13,8 +13,10 @@ package com.facebook.csslayout;
*/
public class CSSLayout {
public float x;
public float y;
public float top;
public float left;
public float right;
public float bottom;
public float width = CSSConstants.UNDEFINED;
public float height = CSSConstants.UNDEFINED;
@@ -22,15 +24,19 @@ public class CSSLayout {
* This should always get called before calling {@link LayoutEngine#layoutNode(CSSNode, float)}
*/
public void resetResult() {
x = 0;
y = 0;
left = 0;
top = 0;
right = 0;
bottom = 0;
width = CSSConstants.UNDEFINED;
height = CSSConstants.UNDEFINED;
}
public void copy(CSSLayout layout) {
x = layout.x;
y = layout.y;
left = layout.left;
top = layout.top;
right = layout.right;
bottom = layout.bottom;
width = layout.width;
height = layout.height;
}
@@ -38,8 +44,8 @@ public class CSSLayout {
@Override
public String toString() {
return "layout: {" +
"x: " + x + ", " +
"y: " + y + ", " +
"left: " + left + ", " +
"top: " + top + ", " +
"width: " + width + ", " +
"height: " + height +
"}";

6
src/java/src/com/facebook/csslayout/CSSNode.java
View File

@@ -125,7 +125,7 @@ public class CSSNode {
*/
public void calculateLayout(CSSLayoutContext layoutContext) {
layout.resetResult();
LayoutEngine.layoutNode(layoutContext, this, CSSConstants.UNDEFINED);
LayoutEngine.layoutNode(layoutContext, this, CSSConstants.UNDEFINED, null);
}
/**
@@ -328,11 +328,11 @@ public class CSSNode {
}
public float getLayoutX() {
return layout.x;
return layout.left;
}
public float getLayoutY() {
return layout.y;
return layout.top;
}
public float getLayoutWidth() {

1
src/java/src/com/facebook/csslayout/CSSStyle.java
View File

@@ -13,6 +13,7 @@ package com.facebook.csslayout;
*/
public class CSSStyle {
public CSSDirection direction = CSSDirection.INHERIT;
public CSSFlexDirection flexDirection = CSSFlexDirection.COLUMN;
public CSSJustify justifyContent = CSSJustify.FLEX_START;
public CSSAlign alignItems = CSSAlign.STRETCH;

207
src/java/src/com/facebook/csslayout/LayoutEngine.java
View File

@@ -28,24 +28,34 @@ public class LayoutEngine {
private static void setLayoutPosition(CSSNode node, PositionIndex position, float value) {
switch (position) {
case TOP:
node.layout.y = value;
node.layout.top = value;
break;
case LEFT:
node.layout.x = value;
node.layout.left = value;
break;
case RIGHT:
node.layout.right = value;
break;
case BOTTOM:
node.layout.bottom = value;
break;
default:
throw new RuntimeException("Didn't get TOP or LEFT!");
throw new RuntimeException("Didn't get TOP, LEFT, RIGHT, or BOTTOM!");
}
}
private static float getLayoutPosition(CSSNode node, PositionIndex position) {
switch (position) {
case TOP:
return node.layout.y;
return node.layout.top;
case LEFT:
return node.layout.x;
return node.layout.left;
case RIGHT:
return node.layout.right;
case BOTTOM:
return node.layout.bottom;
default:
throw new RuntimeException("Didn't get TOP or LEFT!");
throw new RuntimeException("Didn't get TOP, LEFT, RIGHT, or BOTTOM!");
}
}
@@ -100,19 +110,61 @@ public class LayoutEngine {
}
private static PositionIndex getLeading(CSSFlexDirection axis) {
return axis == CSSFlexDirection.COLUMN ? PositionIndex.TOP : PositionIndex.LEFT;
switch (axis) {
case COLUMN:
return PositionIndex.TOP;
case COLUMN_REVERSE:
return PositionIndex.BOTTOM;
case ROW:
return PositionIndex.LEFT;
case ROW_REVERSE:
return PositionIndex.RIGHT;
default:
throw new RuntimeException("Didn't get TOP, LEFT, RIGHT, or BOTTOM!");
}
}
private static PositionIndex getTrailing(CSSFlexDirection axis) {
return axis == CSSFlexDirection.COLUMN ? PositionIndex.BOTTOM : PositionIndex.RIGHT;
switch (axis) {
case COLUMN:
return PositionIndex.BOTTOM;
case COLUMN_REVERSE:
return PositionIndex.TOP;
case ROW:
return PositionIndex.RIGHT;
case ROW_REVERSE:
return PositionIndex.LEFT;
default:
throw new RuntimeException("Didn't get COLUMN, COLUMN_REVERSE, ROW, or ROW_REVERSE!");
}
}
private static PositionIndex getPos(CSSFlexDirection axis) {
return axis == CSSFlexDirection.COLUMN ? PositionIndex.TOP : PositionIndex.LEFT;
switch (axis) {
case COLUMN:
return PositionIndex.TOP;
case COLUMN_REVERSE:
return PositionIndex.BOTTOM;
case ROW:
return PositionIndex.LEFT;
case ROW_REVERSE:
return PositionIndex.RIGHT;
default:
throw new RuntimeException("Didn't get COLUMN, COLUMN_REVERSE, ROW, or ROW_REVERSE!");
}
}
private static DimensionIndex getDim(CSSFlexDirection axis) {
return axis == CSSFlexDirection.COLUMN ? DimensionIndex.HEIGHT : DimensionIndex.WIDTH;
switch (axis) {
case COLUMN:
case COLUMN_REVERSE:
return DimensionIndex.HEIGHT;
case ROW:
case ROW_REVERSE:
return DimensionIndex.WIDTH;
default:
throw new RuntimeException("Didn't get COLUMN, COLUMN_REVERSE, ROW, or ROW_REVERSE!");
}
}
private static boolean isDimDefined(CSSNode node, CSSFlexDirection axis) {
@@ -196,10 +248,10 @@ public class LayoutEngine {
float min = CSSConstants.UNDEFINED;
float max = CSSConstants.UNDEFINED;
if (axis == CSSFlexDirection.COLUMN) {
if (isColumnDirection(axis)) {
min = node.style.minHeight;
max = node.style.maxHeight;
} else if (axis == CSSFlexDirection.ROW) {
} else if (isRowDirection(axis)) {
min = node.style.minWidth;
max = node.style.maxWidth;
}
@@ -233,6 +285,18 @@ public class LayoutEngine {
setLayoutDimension(node, getDim(axis), maxLayoutDimension);
}
private static void setTrailingPosition(
CSSNode node,
CSSNode child,
CSSFlexDirection axis) {
setLayoutPosition(
child,
getTrailing(axis),
getLayoutDimension(node, getDim(axis)) -
getLayoutDimension(child, getDim(axis)) -
getLayoutPosition(child, getPos(axis)));
}
private static float getRelativePosition(CSSNode node, CSSFlexDirection axis) {
float lead = getStylePosition(node, getLeading(axis));
if (!CSSConstants.isUndefined(lead)) {
@@ -245,10 +309,53 @@ public class LayoutEngine {
return node.style.flex;
}
private static boolean isRowDirection(CSSFlexDirection flexDirection) {
return flexDirection == CSSFlexDirection.ROW ||
flexDirection == CSSFlexDirection.ROW_REVERSE;
}
private static boolean isColumnDirection(CSSFlexDirection flexDirection) {
return flexDirection == CSSFlexDirection.COLUMN ||
flexDirection == CSSFlexDirection.COLUMN_REVERSE;
}
private static CSSFlexDirection resolveAxis(
CSSFlexDirection axis,
CSSDirection direction) {
if (direction == CSSDirection.RTL) {
if (axis == CSSFlexDirection.ROW) {
return CSSFlexDirection.ROW_REVERSE;
} else if (axis == CSSFlexDirection.ROW_REVERSE) {
return CSSFlexDirection.ROW;
}
}
return axis;
}
private static CSSDirection resolveDirection(CSSNode node, CSSDirection parentDirection) {
CSSDirection direction = node.style.direction;
if (direction == CSSDirection.INHERIT) {
direction = (parentDirection == null ? CSSDirection.LTR : parentDirection);
}
return direction;
}
private static CSSFlexDirection getFlexDirection(CSSNode node) {
return node.style.flexDirection;
}
private static CSSFlexDirection getCrossFlexDirection(
CSSFlexDirection flexDirection,
CSSDirection direction) {
if (isColumnDirection(flexDirection)) {
return resolveAxis(CSSFlexDirection.ROW, direction);
} else {
return CSSFlexDirection.COLUMN;
}
}
private static CSSPositionType getPositionType(CSSNode node) {
return node.style.positionType;
}
@@ -292,13 +399,14 @@ public class LayoutEngine {
/*package*/ static void layoutNode(
CSSLayoutContext layoutContext,
CSSNode node,
float parentMaxWidth) {
float parentMaxWidth,
CSSDirection parentDirection) {
if (needsRelayout(node, parentMaxWidth)) {
node.lastLayout.requestedWidth = node.layout.width;
node.lastLayout.requestedHeight = node.layout.height;
node.lastLayout.parentMaxWidth = parentMaxWidth;
layoutNodeImpl(layoutContext, node, parentMaxWidth);
layoutNodeImpl(layoutContext, node, parentMaxWidth, parentDirection);
node.lastLayout.copy(node.layout);
} else {
node.layout.copy(node.lastLayout);
@@ -310,18 +418,18 @@ public class LayoutEngine {
private static void layoutNodeImpl(
CSSLayoutContext layoutContext,
CSSNode node,
float parentMaxWidth) {
float parentMaxWidth,
CSSDirection parentDirection) {
for (int i = 0; i < node.getChildCount(); i++) {
node.getChildAt(i).layout.resetResult();
}
/** START_GENERATED **/
CSSFlexDirection mainAxis = getFlexDirection(node);
CSSFlexDirection crossAxis = mainAxis == CSSFlexDirection.ROW ?
CSSFlexDirection.COLUMN :
CSSFlexDirection.ROW;
CSSDirection direction = resolveDirection(node, parentDirection);
CSSFlexDirection mainAxis = resolveAxis(getFlexDirection(node), direction);
CSSFlexDirection crossAxis = getCrossFlexDirection(mainAxis, direction);
CSSFlexDirection resolvedRowAxis = resolveAxis(CSSFlexDirection.ROW, direction);
// Handle width and height style attributes
setDimensionFromStyle(node, mainAxis);
@@ -331,26 +439,30 @@ public class LayoutEngine {
// delta composed of the margin and left/top/right/bottom
setLayoutPosition(node, getLeading(mainAxis), getLayoutPosition(node, getLeading(mainAxis)) + getMargin(node, getLeading(mainAxis)) +
getRelativePosition(node, mainAxis));
setLayoutPosition(node, getTrailing(mainAxis), getLayoutPosition(node, getTrailing(mainAxis)) + getMargin(node, getTrailing(mainAxis)) +
getRelativePosition(node, mainAxis));
setLayoutPosition(node, getLeading(crossAxis), getLayoutPosition(node, getLeading(crossAxis)) + getMargin(node, getLeading(crossAxis)) +
getRelativePosition(node, crossAxis));
setLayoutPosition(node, getTrailing(crossAxis), getLayoutPosition(node, getTrailing(crossAxis)) + getMargin(node, getTrailing(crossAxis)) +
getRelativePosition(node, crossAxis));
if (isMeasureDefined(node)) {
float width = CSSConstants.UNDEFINED;
if (isDimDefined(node, CSSFlexDirection.ROW)) {
if (isDimDefined(node, resolvedRowAxis)) {
width = node.style.width;
} else if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(CSSFlexDirection.ROW)))) {
width = getLayoutDimension(node, getDim(CSSFlexDirection.ROW));
} else if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(resolvedRowAxis)))) {
width = getLayoutDimension(node, getDim(resolvedRowAxis));
} else {
width = parentMaxWidth -
getMarginAxis(node, CSSFlexDirection.ROW);
getMarginAxis(node, resolvedRowAxis);
}
width -= getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
width -= getPaddingAndBorderAxis(node, resolvedRowAxis);
// 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.
boolean isRowUndefined = !isDimDefined(node, CSSFlexDirection.ROW) &&
CSSConstants.isUndefined(getLayoutDimension(node, getDim(CSSFlexDirection.ROW)));
boolean isRowUndefined = !isDimDefined(node, resolvedRowAxis) &&
CSSConstants.isUndefined(getLayoutDimension(node, getDim(resolvedRowAxis)));
boolean isColumnUndefined = !isDimDefined(node, CSSFlexDirection.COLUMN) &&
CSSConstants.isUndefined(getLayoutDimension(node, getDim(CSSFlexDirection.COLUMN)));
@@ -362,7 +474,7 @@ public class LayoutEngine {
);
if (isRowUndefined) {
node.layout.width = measureDim.width +
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
if (isColumnUndefined) {
node.layout.height = measureDim.height +
@@ -465,20 +577,20 @@ public class LayoutEngine {
} else {
maxWidth = CSSConstants.UNDEFINED;
if (mainAxis != CSSFlexDirection.ROW) {
if (!isRowDirection(mainAxis)) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSSFlexDirection.ROW) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
if (isDimDefined(node, CSSFlexDirection.ROW)) {
maxWidth = getLayoutDimension(node, getDim(CSSFlexDirection.ROW)) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = getLayoutDimension(node, getDim(resolvedRowAxis)) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
}
// This is the main recursive call. We layout non flexible children.
if (alreadyComputedNextLayout == 0) {
layoutNode(layoutContext, child, maxWidth);
layoutNode(layoutContext, child, maxWidth, direction);
}
// Absolute positioned elements do not take part of the layout, so we
@@ -564,17 +676,17 @@ public class LayoutEngine {
));
maxWidth = CSSConstants.UNDEFINED;
if (isDimDefined(node, CSSFlexDirection.ROW)) {
maxWidth = getLayoutDimension(node, getDim(CSSFlexDirection.ROW)) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
} else if (mainAxis != CSSFlexDirection.ROW) {
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = getLayoutDimension(node, getDim(resolvedRowAxis)) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
} else if (!isRowDirection(mainAxis)) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSSFlexDirection.ROW) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
}
// And we recursively call the layout algorithm for this child
layoutNode(layoutContext, child, maxWidth);
layoutNode(layoutContext, child, maxWidth, direction);
}
}
@@ -627,6 +739,11 @@ public class LayoutEngine {
// If the child is position absolute (without top/left) or relative,
// we put it at the current accumulated offset.
setLayoutPosition(child, getPos(mainAxis), getLayoutPosition(child, getPos(mainAxis)) + mainDim);
// Define the trailing position accordingly.
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(mainAxis)))) {
setTrailingPosition(node, child, mainAxis);
}
}
// Now that we placed the element, we need to update the variables
@@ -721,6 +838,12 @@ public class LayoutEngine {
// We can never assign a width smaller than the padding and borders
getPaddingAndBorderAxis(node, mainAxis)
));
// Now that the width is defined, we should update the trailing
// positions for the children.
for (i = 0; i < node.getChildCount(); ++i) {
setTrailingPosition(node, node.getChildAt(i), mainAxis);
}
}
if (CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))) {

3618
src/java/tests/com/facebook/csslayout/LayoutEngineTest.java
View File

File diff suppressed because it is too large Load Diff

9
src/transpile.js
View File

@@ -111,9 +111,15 @@ function printLayout(test) {
}
}
addEnum(node, 'direction', 'direction', {
'ltr': 'CSS_DIRECTION_LTR',
'rtl': 'CSS_DIRECTION_RTL'
});
addEnum(node, 'flexDirection', 'flex_direction', {
'row': 'CSS_FLEX_DIRECTION_ROW',
'column': 'CSS_FLEX_DIRECTION_COLUMN'
'row-reverse': 'CSS_FLEX_DIRECTION_ROW_REVERSE',
'column': 'CSS_FLEX_DIRECTION_COLUMN',
'column-reverse': 'CSS_FLEX_DIRECTION_COLUMN_REVERSE'
});
addEnum(node, 'justifyContent', 'justify_content', {
'flex-start': 'CSS_JUSTIFY_FLEX_START',
@@ -234,6 +240,7 @@ function transpileAnnotatedJStoC(jsCode) {
.replace(/layout\[dim/g, 'layout.dimensions[dim')
.replace(/layout\[pos/g, 'layout.position[pos')
.replace(/layout\[leading/g, 'layout.position[leading')
.replace(/layout\[trailing/g, 'layout.position[trailing')
.replace(/style\[dim/g, 'style.dimensions[dim')
.replace(/node.children\[i\]/g, 'node->get_child(node->context, i)')
.replace(/node\./g, 'node->')