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

Update dist/ to be the latest version

Browse Source
This commit is contained in:
Christopher Chedeau
2015-09-24 11:56:18 -07:00
parent 4ca2ea3466
commit 246005cc84
5 changed files with 572 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

487
dist/css-layout.h vendored
View File

@@ -1,7 +1,7 @@
/* /*
* #define CSS_LAYOUT_IMPLEMENTATION * #define CSS_LAYOUT_IMPLEMENTATION
* before you include this file in *one* C or C++ file to create the implementation. * before you include this file in *one* C or C++ file to create the implementation.
*/ */
/** /**
* Copyright (c) 2014, Facebook, Inc. * Copyright (c) 2014, Facebook, Inc.
* All rights reserved. * All rights reserved.
@@ -133,18 +133,22 @@ typedef struct {
float maxDimensions[2]; float maxDimensions[2];
} css_style_t; } css_style_t;
typedef struct css_node { typedef struct css_node css_node_t;
struct css_node {
css_style_t style; css_style_t style;
css_layout_t layout; css_layout_t layout;
int children_count; int children_count;
int line_index; int line_index;
css_node_t* next_absolute_child;
css_node_t* next_flex_child;
css_dim_t (*measure)(void *context, float width); css_dim_t (*measure)(void *context, float width);
void (*print)(void *context); void (*print)(void *context);
struct css_node* (*get_child)(void *context, int i); struct css_node* (*get_child)(void *context, int i);
bool (*is_dirty)(void *context); bool (*is_dirty)(void *context);
void *context; void *context;
} css_node_t; };
// Lifecycle of nodes and children // Lifecycle of nodes and children
@@ -165,7 +169,7 @@ void layoutNode(css_node_t *node, float maxWidth, css_direction_t parentDirectio
bool isUndefined(float value); bool isUndefined(float value);
#endif #endif
#ifdef CSS_LAYOUT_IMPLEMENTATION #ifdef CSS_LAYOUT_IMPLEMENTATION
/** /**
* Copyright (c) 2014, Facebook, Inc. * Copyright (c) 2014, Facebook, Inc.
@@ -545,18 +549,6 @@ static float getPaddingAndBorderAxis(css_node_t *node, css_flex_direction_t axis
return getLeadingPaddingAndBorder(node, axis) + getTrailingPaddingAndBorder(node, axis); return getLeadingPaddingAndBorder(node, axis) + getTrailingPaddingAndBorder(node, axis);
} }
static css_position_type_t getPositionType(css_node_t *node) {
return node->style.position_type;
}
static css_justify_t getJustifyContent(css_node_t *node) {
return node->style.justify_content;
}
static css_align_t getAlignContent(css_node_t *node) {
return node->style.align_content;
}
static css_align_t getAlignItem(css_node_t *node, css_node_t *child) { static css_align_t getAlignItem(css_node_t *node, css_node_t *child) {
if (child->style.align_self != CSS_ALIGN_AUTO) { if (child->style.align_self != CSS_ALIGN_AUTO) {
return child->style.align_self; return child->style.align_self;
@@ -604,7 +596,7 @@ static float getFlex(css_node_t *node) {
static bool isFlex(css_node_t *node) { static bool isFlex(css_node_t *node) {
return ( return (
getPositionType(node) == CSS_POSITION_RELATIVE && node->style.position_type == CSS_POSITION_RELATIVE &&
getFlex(node) > 0 getFlex(node) > 0
); );
} }
@@ -722,23 +714,29 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
node->layout.position[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) + node->layout.position[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) +
getRelativePosition(node, crossAxis); getRelativePosition(node, crossAxis);
// Inline immutable values from the target node to avoid excessive method
// invocations during the layout calculation.
int childCount = node->children_count;
float paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
if (isMeasureDefined(node)) { if (isMeasureDefined(node)) {
bool isResolvedRowDimDefined = !isUndefined(node->layout.dimensions[dim[resolvedRowAxis]]);
float width = CSS_UNDEFINED; float width = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) { if (isDimDefined(node, resolvedRowAxis)) {
width = node->style.dimensions[CSS_WIDTH]; width = node->style.dimensions[CSS_WIDTH];
} else if (!isUndefined(node->layout.dimensions[dim[resolvedRowAxis]])) { } else if (isResolvedRowDimDefined) {
width = node->layout.dimensions[dim[resolvedRowAxis]]; width = node->layout.dimensions[dim[resolvedRowAxis]];
} else { } else {
width = parentMaxWidth - width = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis); getMarginAxis(node, resolvedRowAxis);
} }
width -= getPaddingAndBorderAxis(node, resolvedRowAxis); width -= paddingAndBorderAxisResolvedRow;
// We only need to give a dimension for the text if we haven't got any // 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 // for it computed yet. It can either be from the style attribute or because
// the element is flexible. // the element is flexible.
bool isRowUndefined = !isDimDefined(node, resolvedRowAxis) && bool isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
isUndefined(node->layout.dimensions[dim[resolvedRowAxis]]);
bool isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) && bool isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]); isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]);
@@ -751,66 +749,42 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
); );
if (isRowUndefined) { if (isRowUndefined) {
node->layout.dimensions[CSS_WIDTH] = measureDim.dimensions[CSS_WIDTH] + node->layout.dimensions[CSS_WIDTH] = measureDim.dimensions[CSS_WIDTH] +
getPaddingAndBorderAxis(node, resolvedRowAxis); paddingAndBorderAxisResolvedRow;
} }
if (isColumnUndefined) { if (isColumnUndefined) {
node->layout.dimensions[CSS_HEIGHT] = measureDim.dimensions[CSS_HEIGHT] + node->layout.dimensions[CSS_HEIGHT] = measureDim.dimensions[CSS_HEIGHT] +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN); getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
} }
} }
if (node->children_count == 0) { if (childCount == 0) {
return; return;
} }
} }
bool isNodeFlexWrap = isFlexWrap(node);
css_justify_t justifyContent = node->style.justify_content;
float leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
float leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
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 isMainRowDirection = isRowDirection(mainAxis);
int i; int i;
int ii; int ii;
css_node_t* child; css_node_t* child;
css_flex_direction_t axis; css_flex_direction_t axis;
// Pre-fill some dimensions straight from the parent css_node_t* firstAbsoluteChild = NULL;
for (i = 0; i < node->children_count; ++i) { css_node_t* currentAbsoluteChild = NULL;
child = node->get_child(node->context, i);
// Pre-fill cross axis dimensions when the child is using stretch before
// we call the recursive layout pass
if (getAlignItem(node, child) == CSS_ALIGN_STRETCH &&
getPositionType(child) == CSS_POSITION_RELATIVE &&
!isUndefined(node->layout.dimensions[dim[crossAxis]]) &&
!isDimDefined(child, crossAxis)) {
child->layout.dimensions[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, node->layout.dimensions[dim[crossAxis]] -
getPaddingAndBorderAxis(node, crossAxis) -
getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
} else if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// 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) &&
isPosDefined(child, leading[axis]) &&
isPosDefined(child, trailing[axis])) {
child->layout.dimensions[dim[axis]] = fmaxf(
boundAxis(child, axis, node->layout.dimensions[dim[axis]] -
getPaddingAndBorderAxis(node, axis) -
getMarginAxis(child, axis) -
getPosition(child, leading[axis]) -
getPosition(child, trailing[axis])),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, axis)
);
}
}
}
}
float definedMainDim = CSS_UNDEFINED; float definedMainDim = CSS_UNDEFINED;
if (!isUndefined(node->layout.dimensions[dim[mainAxis]])) { if (isMainDimDefined) {
definedMainDim = node->layout.dimensions[dim[mainAxis]] - definedMainDim = node->layout.dimensions[dim[mainAxis]] - paddingAndBorderAxisMain;
getPaddingAndBorderAxis(node, mainAxis);
} }
// We want to execute the next two loops one per line with flex-wrap // We want to execute the next two loops one per line with flex-wrap
@@ -822,7 +796,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
float linesCrossDim = 0; float linesCrossDim = 0;
float linesMainDim = 0; float linesMainDim = 0;
int linesCount = 0; int linesCount = 0;
while (endLine < node->children_count) { while (endLine < childCount) {
// <Loop A> Layout non flexible children and count children by type // <Loop A> Layout non flexible children and count children by type
// mainContentDim is accumulation of the dimensions and margin of all the // mainContentDim is accumulation of the dimensions and margin of all the
@@ -837,16 +811,99 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
float totalFlexible = 0; float totalFlexible = 0;
int nonFlexibleChildrenCount = 0; int nonFlexibleChildrenCount = 0;
// Use the line loop to position children in the main axis for as long
// as they are using a simple stacking behaviour. Children that are
// immediately stacked in the initial loop will not be touched again
// in <Loop C>.
bool isSimpleStackMain =
(isMainDimDefined && justifyContent == CSS_JUSTIFY_FLEX_START) ||
(!isMainDimDefined && justifyContent != CSS_JUSTIFY_CENTER);
int firstComplexMain = (isSimpleStackMain ? childCount : startLine);
// Use the initial line loop to position children in the cross axis for
// as long as they are relatively positioned with alignment STRETCH or
// FLEX_START. Children that are immediately stacked in the initial loop
// will not be touched again in <Loop D>.
bool isSimpleStackCross = true;
int firstComplexCross = childCount;
css_node_t* firstFlexChild = NULL;
css_node_t* currentFlexChild = NULL;
float mainDim = leadingPaddingAndBorderMain;
float crossDim = 0;
float maxWidth; float maxWidth;
for (i = startLine; i < node->children_count; ++i) { for (i = startLine; i < childCount; ++i) {
child = node->get_child(node->context, i); child = node->get_child(node->context, i);
child->line_index = linesCount;
child->next_absolute_child = NULL;
child->next_flex_child = NULL;
css_align_t alignItem = getAlignItem(node, child);
// Pre-fill cross axis dimensions when the child is using stretch before
// we call the recursive layout pass
if (alignItem == CSS_ALIGN_STRETCH &&
child->style.position_type == CSS_POSITION_RELATIVE &&
isCrossDimDefined &&
!isDimDefined(child, crossAxis)) {
child->layout.dimensions[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, node->layout.dimensions[dim[crossAxis]] -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
} else if (child->style.position_type == CSS_POSITION_ABSOLUTE) {
// Store a private linked list of absolutely positioned children
// so that we can efficiently traverse them later.
if (firstAbsoluteChild == NULL) {
firstAbsoluteChild = child;
}
if (currentAbsoluteChild != NULL) {
currentAbsoluteChild->next_absolute_child = child;
}
currentAbsoluteChild = child;
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// 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) &&
isPosDefined(child, leading[axis]) &&
isPosDefined(child, trailing[axis])) {
child->layout.dimensions[dim[axis]] = fmaxf(
boundAxis(child, axis, node->layout.dimensions[dim[axis]] -
getPaddingAndBorderAxis(node, axis) -
getMarginAxis(child, axis) -
getPosition(child, leading[axis]) -
getPosition(child, trailing[axis])),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, axis)
);
}
}
}
float nextContentDim = 0; float nextContentDim = 0;
// It only makes sense to consider a child flexible if we have a computed // It only makes sense to consider a child flexible if we have a computed
// dimension for the node-> // dimension for the node->
if (!isUndefined(node->layout.dimensions[dim[mainAxis]]) && isFlex(child)) { if (isMainDimDefined && isFlex(child)) {
flexibleChildrenCount++; flexibleChildrenCount++;
totalFlexible += getFlex(child); totalFlexible += child->style.flex;
// Store a private linked list of flexible children so that we can
// efficiently traverse them later.
if (firstFlexChild == NULL) {
firstFlexChild = child;
}
if (currentFlexChild != NULL) {
currentFlexChild->next_flex_child = child;
}
currentFlexChild = child;
// Even if we don't know its exact size yet, we already know the padding, // Even if we don't know its exact size yet, we already know the padding,
// border and margin. We'll use this partial information, which represents // border and margin. We'll use this partial information, which represents
@@ -857,14 +914,14 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
} else { } else {
maxWidth = CSS_UNDEFINED; maxWidth = CSS_UNDEFINED;
if (!isRowDirection(mainAxis)) { if (!isMainRowDirection) {
maxWidth = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
if (isDimDefined(node, resolvedRowAxis)) { if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] - maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
getPaddingAndBorderAxis(node, resolvedRowAxis); paddingAndBorderAxisResolvedRow;
} else {
maxWidth = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
} }
} }
@@ -875,7 +932,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// Absolute positioned elements do not take part of the layout, so we // Absolute positioned elements do not take part of the layout, so we
// don't use them to compute mainContentDim // don't use them to compute mainContentDim
if (getPositionType(child) == CSS_POSITION_RELATIVE) { if (child->style.position_type == CSS_POSITION_RELATIVE) {
nonFlexibleChildrenCount++; nonFlexibleChildrenCount++;
// At this point we know the final size and margin of the element. // At this point we know the final size and margin of the element.
nextContentDim = getDimWithMargin(child, mainAxis); nextContentDim = getDimWithMargin(child, mainAxis);
@@ -883,8 +940,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
} }
// The element we are about to add would make us go to the next line // The element we are about to add would make us go to the next line
if (isFlexWrap(node) && if (isNodeFlexWrap &&
!isUndefined(node->layout.dimensions[dim[mainAxis]]) && isMainDimDefined &&
mainContentDim + nextContentDim > definedMainDim && mainContentDim + nextContentDim > definedMainDim &&
// If there's only one element, then it's bigger than the content // If there's only one element, then it's bigger than the content
// and needs its own line // and needs its own line
@@ -893,6 +950,44 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
alreadyComputedNextLayout = 1; alreadyComputedNextLayout = 1;
break; break;
} }
// Disable simple stacking in the main axis for the current line as
// we found a non-trivial child-> The remaining children will be laid out
// in <Loop C>.
if (isSimpleStackMain &&
(child->style.position_type != CSS_POSITION_RELATIVE || isFlex(child))) {
isSimpleStackMain = false;
firstComplexMain = i;
}
// Disable simple stacking in the cross axis for the current line as
// we found a non-trivial child-> The remaining children will be laid out
// in <Loop D>.
if (isSimpleStackCross &&
(child->style.position_type != CSS_POSITION_RELATIVE ||
(alignItem != CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) ||
isUndefined(child->layout.dimensions[dim[crossAxis]]))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
if (isSimpleStackMain) {
child->layout.position[pos[mainAxis]] += mainDim;
if (isMainDimDefined) {
setTrailingPosition(node, child, mainAxis);
}
mainDim += getDimWithMargin(child, mainAxis);
crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
}
if (isSimpleStackCross) {
child->layout.position[pos[crossAxis]] += linesCrossDim + leadingPaddingAndBorderCross;
if (isCrossDimDefined) {
setTrailingPosition(node, child, crossAxis);
}
}
alreadyComputedNextLayout = 0; alreadyComputedNextLayout = 0;
mainContentDim += nextContentDim; mainContentDim += nextContentDim;
endLine = i + 1; endLine = i + 1;
@@ -908,7 +1003,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// The remaining available space that needs to be allocated // The remaining available space that needs to be allocated
float remainingMainDim = 0; float remainingMainDim = 0;
if (!isUndefined(node->layout.dimensions[dim[mainAxis]])) { if (isMainDimDefined) {
remainingMainDim = definedMainDim - mainContentDim; remainingMainDim = definedMainDim - mainContentDim;
} else { } else {
remainingMainDim = fmaxf(mainContentDim, 0) - mainContentDim; remainingMainDim = fmaxf(mainContentDim, 0) - mainContentDim;
@@ -921,21 +1016,20 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
float baseMainDim; float baseMainDim;
float boundMainDim; float boundMainDim;
// Iterate over every child in the axis. If the flex share of remaining // If the flex share of remaining space doesn't meet min/max bounds,
// space doesn't meet min/max bounds, remove this child from flex // remove this child from flex calculations.
// calculations. currentFlexChild = firstFlexChild;
for (i = startLine; i < endLine; ++i) { while (currentFlexChild != NULL) {
child = node->get_child(node->context, i); baseMainDim = flexibleMainDim * currentFlexChild->style.flex +
if (isFlex(child)) { getPaddingAndBorderAxis(currentFlexChild, mainAxis);
baseMainDim = flexibleMainDim * getFlex(child) + boundMainDim = boundAxis(currentFlexChild, mainAxis, baseMainDim);
getPaddingAndBorderAxis(child, mainAxis);
boundMainDim = boundAxis(child, mainAxis, baseMainDim);
if (baseMainDim != boundMainDim) { if (baseMainDim != boundMainDim) {
remainingMainDim -= boundMainDim; remainingMainDim -= boundMainDim;
totalFlexible -= getFlex(child); totalFlexible -= currentFlexChild->style.flex;
}
} }
currentFlexChild = currentFlexChild->next_flex_child;
} }
flexibleMainDim = remainingMainDim / totalFlexible; flexibleMainDim = remainingMainDim / totalFlexible;
@@ -944,37 +1038,37 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
if (flexibleMainDim < 0) { if (flexibleMainDim < 0) {
flexibleMainDim = 0; flexibleMainDim = 0;
} }
// We iterate over the full array and only apply the action on flexible
// children. This is faster than actually allocating a new array that
// contains only flexible children.
for (i = startLine; i < endLine; ++i) {
child = node->get_child(node->context, i);
if (isFlex(child)) {
// At this point we know the final size of the element in the main
// dimension
child->layout.dimensions[dim[mainAxis]] = boundAxis(child, mainAxis,
flexibleMainDim * getFlex(child) + getPaddingAndBorderAxis(child, mainAxis)
);
maxWidth = CSS_UNDEFINED; currentFlexChild = firstFlexChild;
if (isDimDefined(node, resolvedRowAxis)) { while (currentFlexChild != NULL) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] - // At this point we know the final size of the element in the main
getPaddingAndBorderAxis(node, resolvedRowAxis); // dimension
} else if (!isRowDirection(mainAxis)) { currentFlexChild->layout.dimensions[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis,
maxWidth = parentMaxWidth - flexibleMainDim * currentFlexChild->style.flex +
getMarginAxis(node, resolvedRowAxis) - getPaddingAndBorderAxis(currentFlexChild, mainAxis)
getPaddingAndBorderAxis(node, resolvedRowAxis); );
}
// And we recursively call the layout algorithm for this child maxWidth = CSS_UNDEFINED;
layoutNode(child, maxWidth, direction); if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else if (!isMainRowDirection) {
maxWidth = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
} }
// And we recursively call the layout algorithm for this child
layoutNode(currentFlexChild, maxWidth, direction);
child = currentFlexChild;
currentFlexChild = currentFlexChild->next_flex_child;
child->next_flex_child = NULL;
} }
// We use justifyContent to figure out how to allocate the remaining // We use justifyContent to figure out how to allocate the remaining
// space available // space available
} else { } else if (justifyContent != CSS_JUSTIFY_FLEX_START) {
css_justify_t justifyContent = getJustifyContent(node);
if (justifyContent == CSS_JUSTIFY_CENTER) { if (justifyContent == CSS_JUSTIFY_CENTER) {
leadingMainDim = remainingMainDim / 2; leadingMainDim = remainingMainDim / 2;
} else if (justifyContent == CSS_JUSTIFY_FLEX_END) { } else if (justifyContent == CSS_JUSTIFY_FLEX_END) {
@@ -1001,15 +1095,12 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// find their position. In order to do that, we accumulate data in // find their position. In order to do that, we accumulate data in
// variables that are also useful to compute the total dimensions of the // variables that are also useful to compute the total dimensions of the
// container! // container!
float crossDim = 0; mainDim += leadingMainDim;
float mainDim = leadingMainDim +
getLeadingPaddingAndBorder(node, mainAxis);
for (i = startLine; i < endLine; ++i) { for (i = firstComplexMain; i < endLine; ++i) {
child = node->get_child(node->context, i); child = node->get_child(node->context, i);
child->line_index = linesCount;
if (getPositionType(child) == CSS_POSITION_ABSOLUTE && if (child->style.position_type == CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[mainAxis])) { isPosDefined(child, leading[mainAxis])) {
// In case the child is position absolute and has left/top being // In case the child is position absolute and has left/top being
// defined, we override the position to whatever the user said // defined, we override the position to whatever the user said
@@ -1023,40 +1114,40 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
child->layout.position[pos[mainAxis]] += mainDim; child->layout.position[pos[mainAxis]] += mainDim;
// Define the trailing position accordingly. // Define the trailing position accordingly.
if (!isUndefined(node->layout.dimensions[dim[mainAxis]])) { if (isMainDimDefined) {
setTrailingPosition(node, child, mainAxis); setTrailingPosition(node, child, mainAxis);
} }
}
// Now that we placed the element, we need to update the variables // Now that we placed the element, we need to update the variables
// We only need to do that for relative elements. Absolute elements // We only need to do that for relative elements. Absolute elements
// do not take part in that phase. // do not take part in that phase.
if (getPositionType(child) == CSS_POSITION_RELATIVE) { if (child->style.position_type == CSS_POSITION_RELATIVE) {
// The main dimension is the sum of all the elements dimension plus // The main dimension is the sum of all the elements dimension plus
// the spacing. // the spacing.
mainDim += betweenMainDim + getDimWithMargin(child, mainAxis); mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
// The cross dimension is the max of the elements dimension since there // The cross dimension is the max of the elements dimension since there
// can only be one element in that cross dimension. // can only be one element in that cross dimension.
crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis))); crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
}
} }
} }
float containerCrossAxis = node->layout.dimensions[dim[crossAxis]]; float containerCrossAxis = node->layout.dimensions[dim[crossAxis]];
if (isUndefined(node->layout.dimensions[dim[crossAxis]])) { if (!isCrossDimDefined) {
containerCrossAxis = fmaxf( containerCrossAxis = fmaxf(
// For the cross dim, we add both sides at the end because the value // For the cross dim, we add both sides at the end because the value
// is aggregate via a max function. Intermediate negative values // is aggregate via a max function. Intermediate negative values
// can mess this computation otherwise // can mess this computation otherwise
boundAxis(node, crossAxis, crossDim + getPaddingAndBorderAxis(node, crossAxis)), boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross),
getPaddingAndBorderAxis(node, crossAxis) paddingAndBorderAxisCross
); );
} }
// <Loop D> Position elements in the cross axis // <Loop D> Position elements in the cross axis
for (i = startLine; i < endLine; ++i) { for (i = firstComplexCross; i < endLine; ++i) {
child = node->get_child(node->context, i); child = node->get_child(node->context, i);
if (getPositionType(child) == CSS_POSITION_ABSOLUTE && if (child->style.position_type == CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[crossAxis])) { isPosDefined(child, leading[crossAxis])) {
// In case the child is absolutely positionned and has a // In case the child is absolutely positionned and has a
// top/left/bottom/right being set, we override all the previously // top/left/bottom/right being set, we override all the previously
@@ -1066,20 +1157,19 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
getLeadingMargin(child, crossAxis); getLeadingMargin(child, crossAxis);
} else { } else {
float leadingCrossDim = getLeadingPaddingAndBorder(node, crossAxis); float leadingCrossDim = leadingPaddingAndBorderCross;
// For a relative children, we're either using alignItems (parent) or // For a relative children, we're either using alignItems (parent) or
// alignSelf (child) in order to determine the position in the cross axis // alignSelf (child) in order to determine the position in the cross axis
if (getPositionType(child) == CSS_POSITION_RELATIVE) { if (child->style.position_type == CSS_POSITION_RELATIVE) {
css_align_t alignItem = getAlignItem(node, child); css_align_t alignItem = getAlignItem(node, child);
if (alignItem == CSS_ALIGN_STRETCH) { 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 set
// previously. // previously.
if (!isDimDefined(child, crossAxis)) { if (isUndefined(child->layout.dimensions[dim[crossAxis]])) {
child->layout.dimensions[dim[crossAxis]] = fmaxf( child->layout.dimensions[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, containerCrossAxis - boundAxis(child, crossAxis, containerCrossAxis -
getPaddingAndBorderAxis(node, crossAxis) - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding // You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis) getPaddingAndBorderAxis(child, crossAxis)
); );
@@ -1088,8 +1178,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// The remaining space between the parent dimensions+padding and child // The remaining space between the parent dimensions+padding and child
// dimensions+margin. // dimensions+margin.
float remainingCrossDim = containerCrossAxis - float remainingCrossDim = containerCrossAxis -
getPaddingAndBorderAxis(node, crossAxis) - paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis);
getDimWithMargin(child, crossAxis);
if (alignItem == CSS_ALIGN_CENTER) { if (alignItem == CSS_ALIGN_CENTER) {
leadingCrossDim += remainingCrossDim / 2; leadingCrossDim += remainingCrossDim / 2;
@@ -1103,7 +1192,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
child->layout.position[pos[crossAxis]] += linesCrossDim + leadingCrossDim; child->layout.position[pos[crossAxis]] += linesCrossDim + leadingCrossDim;
// Define the trailing position accordingly. // Define the trailing position accordingly.
if (!isUndefined(node->layout.dimensions[dim[crossAxis]])) { if (isCrossDimDefined) {
setTrailingPosition(node, child, crossAxis); setTrailingPosition(node, child, crossAxis);
} }
} }
@@ -1128,16 +1217,15 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm // http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm
// section 9.4 // section 9.4
// //
if (linesCount > 1 && if (linesCount > 1 && isCrossDimDefined) {
!isUndefined(node->layout.dimensions[dim[crossAxis]])) {
float nodeCrossAxisInnerSize = node->layout.dimensions[dim[crossAxis]] - float nodeCrossAxisInnerSize = node->layout.dimensions[dim[crossAxis]] -
getPaddingAndBorderAxis(node, crossAxis); paddingAndBorderAxisCross;
float remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim; float remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
float crossDimLead = 0; float crossDimLead = 0;
float currentLead = getLeadingPaddingAndBorder(node, crossAxis); float currentLead = leadingPaddingAndBorderCross;
css_align_t alignContent = getAlignContent(node); css_align_t alignContent = node->style.align_content;
if (alignContent == CSS_ALIGN_FLEX_END) { if (alignContent == CSS_ALIGN_FLEX_END) {
currentLead += remainingAlignContentDim; currentLead += remainingAlignContentDim;
} else if (alignContent == CSS_ALIGN_CENTER) { } else if (alignContent == CSS_ALIGN_CENTER) {
@@ -1154,9 +1242,9 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// compute the line's height and find the endIndex // compute the line's height and find the endIndex
float lineHeight = 0; float lineHeight = 0;
for (ii = startIndex; ii < node->children_count; ++ii) { for (ii = startIndex; ii < childCount; ++ii) {
child = node->get_child(node->context, ii); child = node->get_child(node->context, ii);
if (getPositionType(child) != CSS_POSITION_RELATIVE) { if (child->style.position_type != CSS_POSITION_RELATIVE) {
continue; continue;
} }
if (child->line_index != i) { if (child->line_index != i) {
@@ -1174,7 +1262,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
for (ii = startIndex; ii < endIndex; ++ii) { for (ii = startIndex; ii < endIndex; ++ii) {
child = node->get_child(node->context, ii); child = node->get_child(node->context, ii);
if (getPositionType(child) != CSS_POSITION_RELATIVE) { if (child->style.position_type != CSS_POSITION_RELATIVE) {
continue; continue;
} }
@@ -1202,33 +1290,39 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// If the user didn't specify a width or height, and it has not been set // If the user didn't specify a width or height, and it has not been set
// by the container, then we set it via the children. // by the container, then we set it via the children.
if (isUndefined(node->layout.dimensions[dim[mainAxis]])) { if (!isMainDimDefined) {
node->layout.dimensions[dim[mainAxis]] = fmaxf( node->layout.dimensions[dim[mainAxis]] = fmaxf(
// We're missing the last padding at this point to get the final // We're missing the last padding at this point to get the final
// dimension // dimension
boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)), boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)),
// We can never assign a width smaller than the padding and borders // We can never assign a width smaller than the padding and borders
getPaddingAndBorderAxis(node, mainAxis) paddingAndBorderAxisMain
); );
needsMainTrailingPos = true; if (mainAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
mainAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
needsMainTrailingPos = true;
}
} }
if (isUndefined(node->layout.dimensions[dim[crossAxis]])) { if (!isCrossDimDefined) {
node->layout.dimensions[dim[crossAxis]] = fmaxf( node->layout.dimensions[dim[crossAxis]] = fmaxf(
// For the cross dim, we add both sides at the end because the value // For the cross dim, we add both sides at the end because the value
// is aggregate via a max function. Intermediate negative values // is aggregate via a max function. Intermediate negative values
// can mess this computation otherwise // can mess this computation otherwise
boundAxis(node, crossAxis, linesCrossDim + getPaddingAndBorderAxis(node, crossAxis)), boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross),
getPaddingAndBorderAxis(node, crossAxis) paddingAndBorderAxisCross
); );
needsCrossTrailingPos = true; if (crossAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
crossAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
needsCrossTrailingPos = true;
}
} }
// <Loop F> Set trailing position if necessary // <Loop F> Set trailing position if necessary
if (needsMainTrailingPos || needsCrossTrailingPos) { if (needsMainTrailingPos || needsCrossTrailingPos) {
for (i = 0; i < node->children_count; ++i) { for (i = 0; i < childCount; ++i) {
child = node->get_child(node->context, i); child = node->get_child(node->context, i);
if (needsMainTrailingPos) { if (needsMainTrailingPos) {
@@ -1242,40 +1336,41 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
} }
// <Loop G> Calculate dimensions for absolutely positioned elements // <Loop G> Calculate dimensions for absolutely positioned elements
for (i = 0; i < node->children_count; ++i) { currentAbsoluteChild = firstAbsoluteChild;
child = node->get_child(node->context, i); while (currentAbsoluteChild != NULL) {
if (getPositionType(child) == CSS_POSITION_ABSOLUTE) { // Pre-fill dimensions when using absolute position and both offsets for
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both // the axis are defined (either both left and right or top and bottom).
// left and right or top and bottom). for (ii = 0; ii < 2; ii++) {
for (ii = 0; ii < 2; ii++) { axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node->layout.dimensions[dim[axis]]) && if (!isUndefined(node->layout.dimensions[dim[axis]]) &&
!isDimDefined(child, axis) && !isDimDefined(currentAbsoluteChild, axis) &&
isPosDefined(child, leading[axis]) && isPosDefined(currentAbsoluteChild, leading[axis]) &&
isPosDefined(child, trailing[axis])) { isPosDefined(currentAbsoluteChild, trailing[axis])) {
child->layout.dimensions[dim[axis]] = fmaxf( currentAbsoluteChild->layout.dimensions[dim[axis]] = fmaxf(
boundAxis(child, axis, node->layout.dimensions[dim[axis]] - boundAxis(currentAbsoluteChild, axis, node->layout.dimensions[dim[axis]] -
getBorderAxis(node, axis) - getBorderAxis(node, axis) -
getMarginAxis(child, axis) - getMarginAxis(currentAbsoluteChild, axis) -
getPosition(child, leading[axis]) - getPosition(currentAbsoluteChild, leading[axis]) -
getPosition(child, trailing[axis]) getPosition(currentAbsoluteChild, trailing[axis])
), ),
// You never want to go smaller than padding // You never want to go smaller than padding
getPaddingAndBorderAxis(child, axis) getPaddingAndBorderAxis(currentAbsoluteChild, axis)
); );
}
} }
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; if (isPosDefined(currentAbsoluteChild, trailing[axis]) &&
if (isPosDefined(child, trailing[axis]) && !isPosDefined(currentAbsoluteChild, leading[axis])) {
!isPosDefined(child, leading[axis])) { currentAbsoluteChild->layout.position[leading[axis]] =
child->layout.position[leading[axis]] = node->layout.dimensions[dim[axis]] -
node->layout.dimensions[dim[axis]] - currentAbsoluteChild->layout.dimensions[dim[axis]] -
child->layout.dimensions[dim[axis]] - getPosition(currentAbsoluteChild, trailing[axis]);
getPosition(child, trailing[axis]);
}
} }
} }
child = currentAbsoluteChild;
currentAbsoluteChild = currentAbsoluteChild->next_absolute_child;
child->next_absolute_child = NULL;
} }
/** END_GENERATED **/ /** END_GENERATED **/
} }

BIN
dist/css-layout.jar vendored
View File

Binary file not shown.

458
dist/css-layout.js vendored
View File

@@ -39,7 +39,7 @@ var computeLayout = (function() {
var CSS_FLEX_DIRECTION_COLUMN = 'column'; var CSS_FLEX_DIRECTION_COLUMN = 'column';
var CSS_FLEX_DIRECTION_COLUMN_REVERSE = 'column-reverse'; var CSS_FLEX_DIRECTION_COLUMN_REVERSE = 'column-reverse';
// var CSS_JUSTIFY_FLEX_START = 'flex-start'; var CSS_JUSTIFY_FLEX_START = 'flex-start';
var CSS_JUSTIFY_CENTER = 'center'; var CSS_JUSTIFY_CENTER = 'center';
var CSS_JUSTIFY_FLEX_END = 'flex-end'; var CSS_JUSTIFY_FLEX_END = 'flex-end';
var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between'; var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
@@ -306,14 +306,10 @@ var computeLayout = (function() {
return 'relative'; return 'relative';
} }
function getFlex(node) {
return node.style.flex;
}
function isFlex(node) { function isFlex(node) {
return ( return (
getPositionType(node) === CSS_POSITION_RELATIVE && getPositionType(node) === CSS_POSITION_RELATIVE &&
getFlex(node) > 0 node.style.flex > 0
); );
} }
@@ -410,9 +406,9 @@ var computeLayout = (function() {
function layoutNode(node, parentMaxWidth, /*css_direction_t*/parentDirection) { function layoutNode(node, parentMaxWidth, /*css_direction_t*/parentDirection) {
var/*css_direction_t*/ direction = resolveDirection(node, parentDirection); var/*css_direction_t*/ direction = resolveDirection(node, parentDirection);
var/*css_flex_direction_t*/ mainAxis = resolveAxis(getFlexDirection(node), direction); var/*(c)!css_flex_direction_t*//*(java)!int*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
var/*css_flex_direction_t*/ crossAxis = getCrossFlexDirection(mainAxis, direction); var/*(c)!css_flex_direction_t*//*(java)!int*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
var/*css_flex_direction_t*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction); var/*(c)!css_flex_direction_t*//*(java)!int*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
// Handle width and height style attributes // Handle width and height style attributes
setDimensionFromStyle(node, mainAxis); setDimensionFromStyle(node, mainAxis);
@@ -432,23 +428,29 @@ var computeLayout = (function() {
node.layout[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) + node.layout[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) +
getRelativePosition(node, crossAxis); getRelativePosition(node, crossAxis);
// Inline immutable values from the target node to avoid excessive method
// invocations during the layout calculation.
var/*int*/ childCount = node.children.length;
var/*float*/ paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
if (isMeasureDefined(node)) { if (isMeasureDefined(node)) {
var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]);
var/*float*/ width = CSS_UNDEFINED; var/*float*/ width = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) { if (isDimDefined(node, resolvedRowAxis)) {
width = node.style.width; width = node.style.width;
} else if (!isUndefined(node.layout[dim[resolvedRowAxis]])) { } else if (isResolvedRowDimDefined) {
width = node.layout[dim[resolvedRowAxis]]; width = node.layout[dim[resolvedRowAxis]];
} else { } else {
width = parentMaxWidth - width = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis); getMarginAxis(node, resolvedRowAxis);
} }
width -= getPaddingAndBorderAxis(node, resolvedRowAxis); width -= paddingAndBorderAxisResolvedRow;
// We only need to give a dimension for the text if we haven't got any // 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 // for it computed yet. It can either be from the style attribute or because
// the element is flexible. // the element is flexible.
var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) && var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
isUndefined(node.layout[dim[resolvedRowAxis]]);
var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) && var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]); isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
@@ -461,66 +463,42 @@ var computeLayout = (function() {
); );
if (isRowUndefined) { if (isRowUndefined) {
node.layout.width = measureDim.width + node.layout.width = measureDim.width +
getPaddingAndBorderAxis(node, resolvedRowAxis); paddingAndBorderAxisResolvedRow;
} }
if (isColumnUndefined) { if (isColumnUndefined) {
node.layout.height = measureDim.height + node.layout.height = measureDim.height +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN); getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
} }
} }
if (node.children.length === 0) { if (childCount === 0) {
return; return;
} }
} }
var/*bool*/ isNodeFlexWrap = isFlexWrap(node);
var/*css_justify_t*/ justifyContent = getJustifyContent(node);
var/*float*/ leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
var/*float*/ leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
var/*float*/ paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
var/*float*/ paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
var/*bool*/ isMainDimDefined = !isUndefined(node.layout[dim[mainAxis]]);
var/*bool*/ isCrossDimDefined = !isUndefined(node.layout[dim[crossAxis]]);
var/*bool*/ isMainRowDirection = isRowDirection(mainAxis);
var/*int*/ i; var/*int*/ i;
var/*int*/ ii; var/*int*/ ii;
var/*css_node_t**/ child; var/*css_node_t**/ child;
var/*css_flex_direction_t*/ axis; var/*(c)!css_flex_direction_t*//*(java)!int*/ axis;
// Pre-fill some dimensions straight from the parent var/*css_node_t**/ firstAbsoluteChild = null;
for (i = 0; i < node.children.length; ++i) { var/*css_node_t**/ currentAbsoluteChild = null;
child = node.children[i];
// Pre-fill cross axis dimensions when the child is using stretch before
// we call the recursive layout pass
if (getAlignItem(node, child) === CSS_ALIGN_STRETCH &&
getPositionType(child) === CSS_POSITION_RELATIVE &&
!isUndefined(node.layout[dim[crossAxis]]) &&
!isDimDefined(child, crossAxis)) {
child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
getPaddingAndBorderAxis(node, crossAxis) -
getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
} else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// 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[dim[axis]]) &&
!isDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
isPosDefined(child, trailing[axis])) {
child.layout[dim[axis]] = fmaxf(
boundAxis(child, axis, node.layout[dim[axis]] -
getPaddingAndBorderAxis(node, axis) -
getMarginAxis(child, axis) -
getPosition(child, leading[axis]) -
getPosition(child, trailing[axis])),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, axis)
);
}
}
}
}
var/*float*/ definedMainDim = CSS_UNDEFINED; var/*float*/ definedMainDim = CSS_UNDEFINED;
if (!isUndefined(node.layout[dim[mainAxis]])) { if (isMainDimDefined) {
definedMainDim = node.layout[dim[mainAxis]] - definedMainDim = node.layout[dim[mainAxis]] - paddingAndBorderAxisMain;
getPaddingAndBorderAxis(node, mainAxis);
} }
// We want to execute the next two loops one per line with flex-wrap // We want to execute the next two loops one per line with flex-wrap
@@ -532,7 +510,7 @@ var computeLayout = (function() {
var/*float*/ linesCrossDim = 0; var/*float*/ linesCrossDim = 0;
var/*float*/ linesMainDim = 0; var/*float*/ linesMainDim = 0;
var/*int*/ linesCount = 0; var/*int*/ linesCount = 0;
while (endLine < node.children.length) { while (endLine < childCount) {
// <Loop A> Layout non flexible children and count children by type // <Loop A> Layout non flexible children and count children by type
// mainContentDim is accumulation of the dimensions and margin of all the // mainContentDim is accumulation of the dimensions and margin of all the
@@ -547,16 +525,99 @@ var computeLayout = (function() {
var/*float*/ totalFlexible = 0; var/*float*/ totalFlexible = 0;
var/*int*/ nonFlexibleChildrenCount = 0; var/*int*/ nonFlexibleChildrenCount = 0;
// Use the line loop to position children in the main axis for as long
// as they are using a simple stacking behaviour. Children that are
// immediately stacked in the initial loop will not be touched again
// in <Loop C>.
var/*bool*/ isSimpleStackMain =
(isMainDimDefined && justifyContent == CSS_JUSTIFY_FLEX_START) ||
(!isMainDimDefined && justifyContent != CSS_JUSTIFY_CENTER);
var/*int*/ firstComplexMain = (isSimpleStackMain ? childCount : startLine);
// Use the initial line loop to position children in the cross axis for
// as long as they are relatively positioned with alignment STRETCH or
// FLEX_START. Children that are immediately stacked in the initial loop
// will not be touched again in <Loop D>.
var/*bool*/ isSimpleStackCross = true;
var/*int*/ firstComplexCross = childCount;
var/*css_node_t**/ firstFlexChild = null;
var/*css_node_t**/ currentFlexChild = null;
var/*float*/ mainDim = leadingPaddingAndBorderMain;
var/*float*/ crossDim = 0;
var/*float*/ maxWidth; var/*float*/ maxWidth;
for (i = startLine; i < node.children.length; ++i) { for (i = startLine; i < childCount; ++i) {
child = node.children[i]; child = node.children[i];
child.lineIndex = linesCount;
child.nextAbsoluteChild = null;
child.nextFlexChild = null;
var/*css_align_t*/ alignItem = getAlignItem(node, child);
// Pre-fill cross axis dimensions when the child is using stretch before
// we call the recursive layout pass
if (alignItem === CSS_ALIGN_STRETCH &&
getPositionType(child) === CSS_POSITION_RELATIVE &&
isCrossDimDefined &&
!isDimDefined(child, crossAxis)) {
child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
} else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
// Store a private linked list of absolutely positioned children
// so that we can efficiently traverse them later.
if (firstAbsoluteChild === null) {
firstAbsoluteChild = child;
}
if (currentAbsoluteChild !== null) {
currentAbsoluteChild.nextAbsoluteChild = child;
}
currentAbsoluteChild = child;
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// 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[dim[axis]]) &&
!isDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
isPosDefined(child, trailing[axis])) {
child.layout[dim[axis]] = fmaxf(
boundAxis(child, axis, node.layout[dim[axis]] -
getPaddingAndBorderAxis(node, axis) -
getMarginAxis(child, axis) -
getPosition(child, leading[axis]) -
getPosition(child, trailing[axis])),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, axis)
);
}
}
}
var/*float*/ nextContentDim = 0; var/*float*/ nextContentDim = 0;
// It only makes sense to consider a child flexible if we have a computed // It only makes sense to consider a child flexible if we have a computed
// dimension for the node. // dimension for the node.
if (!isUndefined(node.layout[dim[mainAxis]]) && isFlex(child)) { if (isMainDimDefined && isFlex(child)) {
flexibleChildrenCount++; flexibleChildrenCount++;
totalFlexible += getFlex(child); totalFlexible += child.style.flex;
// Store a private linked list of flexible children so that we can
// efficiently traverse them later.
if (firstFlexChild === null) {
firstFlexChild = child;
}
if (currentFlexChild !== null) {
currentFlexChild.nextFlexChild = child;
}
currentFlexChild = child;
// Even if we don't know its exact size yet, we already know the padding, // Even if we don't know its exact size yet, we already know the padding,
// border and margin. We'll use this partial information, which represents // border and margin. We'll use this partial information, which represents
@@ -567,14 +628,14 @@ var computeLayout = (function() {
} else { } else {
maxWidth = CSS_UNDEFINED; maxWidth = CSS_UNDEFINED;
if (!isRowDirection(mainAxis)) { if (!isMainRowDirection) {
maxWidth = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis) -
getPaddingAndBorderAxis(node, resolvedRowAxis);
if (isDimDefined(node, resolvedRowAxis)) { if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] - maxWidth = node.layout[dim[resolvedRowAxis]] -
getPaddingAndBorderAxis(node, resolvedRowAxis); paddingAndBorderAxisResolvedRow;
} else {
maxWidth = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
} }
} }
@@ -593,8 +654,8 @@ var computeLayout = (function() {
} }
// The element we are about to add would make us go to the next line // The element we are about to add would make us go to the next line
if (isFlexWrap(node) && if (isNodeFlexWrap &&
!isUndefined(node.layout[dim[mainAxis]]) && isMainDimDefined &&
mainContentDim + nextContentDim > definedMainDim && mainContentDim + nextContentDim > definedMainDim &&
// If there's only one element, then it's bigger than the content // If there's only one element, then it's bigger than the content
// and needs its own line // and needs its own line
@@ -603,6 +664,44 @@ var computeLayout = (function() {
alreadyComputedNextLayout = 1; alreadyComputedNextLayout = 1;
break; break;
} }
// Disable simple stacking in the main axis for the current line as
// we found a non-trivial child. The remaining children will be laid out
// in <Loop C>.
if (isSimpleStackMain &&
(getPositionType(child) != CSS_POSITION_RELATIVE || isFlex(child))) {
isSimpleStackMain = false;
firstComplexMain = i;
}
// Disable simple stacking in the cross axis for the current line as
// we found a non-trivial child. The remaining children will be laid out
// in <Loop D>.
if (isSimpleStackCross &&
(getPositionType(child) != CSS_POSITION_RELATIVE ||
(alignItem !== CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) ||
isUndefined(child.layout[dim[crossAxis]]))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
if (isSimpleStackMain) {
child.layout[pos[mainAxis]] += mainDim;
if (isMainDimDefined) {
setTrailingPosition(node, child, mainAxis);
}
mainDim += getDimWithMargin(child, mainAxis);
crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
}
if (isSimpleStackCross) {
child.layout[pos[crossAxis]] += linesCrossDim + leadingPaddingAndBorderCross;
if (isCrossDimDefined) {
setTrailingPosition(node, child, crossAxis);
}
}
alreadyComputedNextLayout = 0; alreadyComputedNextLayout = 0;
mainContentDim += nextContentDim; mainContentDim += nextContentDim;
endLine = i + 1; endLine = i + 1;
@@ -618,7 +717,7 @@ var computeLayout = (function() {
// The remaining available space that needs to be allocated // The remaining available space that needs to be allocated
var/*float*/ remainingMainDim = 0; var/*float*/ remainingMainDim = 0;
if (!isUndefined(node.layout[dim[mainAxis]])) { if (isMainDimDefined) {
remainingMainDim = definedMainDim - mainContentDim; remainingMainDim = definedMainDim - mainContentDim;
} else { } else {
remainingMainDim = fmaxf(mainContentDim, 0) - mainContentDim; remainingMainDim = fmaxf(mainContentDim, 0) - mainContentDim;
@@ -631,21 +730,20 @@ var computeLayout = (function() {
var/*float*/ baseMainDim; var/*float*/ baseMainDim;
var/*float*/ boundMainDim; var/*float*/ boundMainDim;
// Iterate over every child in the axis. If the flex share of remaining // If the flex share of remaining space doesn't meet min/max bounds,
// space doesn't meet min/max bounds, remove this child from flex // remove this child from flex calculations.
// calculations. currentFlexChild = firstFlexChild;
for (i = startLine; i < endLine; ++i) { while (currentFlexChild !== null) {
child = node.children[i]; baseMainDim = flexibleMainDim * currentFlexChild.style.flex +
if (isFlex(child)) { getPaddingAndBorderAxis(currentFlexChild, mainAxis);
baseMainDim = flexibleMainDim * getFlex(child) + boundMainDim = boundAxis(currentFlexChild, mainAxis, baseMainDim);
getPaddingAndBorderAxis(child, mainAxis);
boundMainDim = boundAxis(child, mainAxis, baseMainDim);
if (baseMainDim !== boundMainDim) { if (baseMainDim !== boundMainDim) {
remainingMainDim -= boundMainDim; remainingMainDim -= boundMainDim;
totalFlexible -= getFlex(child); totalFlexible -= currentFlexChild.style.flex;
}
} }
currentFlexChild = currentFlexChild.nextFlexChild;
} }
flexibleMainDim = remainingMainDim / totalFlexible; flexibleMainDim = remainingMainDim / totalFlexible;
@@ -654,37 +752,37 @@ var computeLayout = (function() {
if (flexibleMainDim < 0) { if (flexibleMainDim < 0) {
flexibleMainDim = 0; flexibleMainDim = 0;
} }
// We iterate over the full array and only apply the action on flexible
// children. This is faster than actually allocating a new array that
// contains only flexible children.
for (i = startLine; i < endLine; ++i) {
child = node.children[i];
if (isFlex(child)) {
// At this point we know the final size of the element in the main
// dimension
child.layout[dim[mainAxis]] = boundAxis(child, mainAxis,
flexibleMainDim * getFlex(child) + getPaddingAndBorderAxis(child, mainAxis)
);
maxWidth = CSS_UNDEFINED; currentFlexChild = firstFlexChild;
if (isDimDefined(node, resolvedRowAxis)) { while (currentFlexChild !== null) {
maxWidth = node.layout[dim[resolvedRowAxis]] - // At this point we know the final size of the element in the main
getPaddingAndBorderAxis(node, resolvedRowAxis); // dimension
} else if (!isRowDirection(mainAxis)) { currentFlexChild.layout[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis,
maxWidth = parentMaxWidth - flexibleMainDim * currentFlexChild.style.flex +
getMarginAxis(node, resolvedRowAxis) - getPaddingAndBorderAxis(currentFlexChild, mainAxis)
getPaddingAndBorderAxis(node, resolvedRowAxis); );
}
// And we recursively call the layout algorithm for this child maxWidth = CSS_UNDEFINED;
layoutNode(/*(java)!layoutContext, */child, maxWidth, direction); if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else if (!isMainRowDirection) {
maxWidth = parentMaxWidth -
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
} }
// And we recursively call the layout algorithm for this child
layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, direction);
child = currentFlexChild;
currentFlexChild = currentFlexChild.nextFlexChild;
child.nextFlexChild = null;
} }
// We use justifyContent to figure out how to allocate the remaining // We use justifyContent to figure out how to allocate the remaining
// space available // space available
} else { } else if (justifyContent !== CSS_JUSTIFY_FLEX_START) {
var/*css_justify_t*/ justifyContent = getJustifyContent(node);
if (justifyContent === CSS_JUSTIFY_CENTER) { if (justifyContent === CSS_JUSTIFY_CENTER) {
leadingMainDim = remainingMainDim / 2; leadingMainDim = remainingMainDim / 2;
} else if (justifyContent === CSS_JUSTIFY_FLEX_END) { } else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
@@ -711,13 +809,10 @@ var computeLayout = (function() {
// find their position. In order to do that, we accumulate data in // find their position. In order to do that, we accumulate data in
// variables that are also useful to compute the total dimensions of the // variables that are also useful to compute the total dimensions of the
// container! // container!
var/*float*/ crossDim = 0; mainDim += leadingMainDim;
var/*float*/ mainDim = leadingMainDim +
getLeadingPaddingAndBorder(node, mainAxis);
for (i = startLine; i < endLine; ++i) { for (i = firstComplexMain; i < endLine; ++i) {
child = node.children[i]; child = node.children[i];
child.lineIndex = linesCount;
if (getPositionType(child) === CSS_POSITION_ABSOLUTE && if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[mainAxis])) { isPosDefined(child, leading[mainAxis])) {
@@ -733,37 +828,37 @@ var computeLayout = (function() {
child.layout[pos[mainAxis]] += mainDim; child.layout[pos[mainAxis]] += mainDim;
// Define the trailing position accordingly. // Define the trailing position accordingly.
if (!isUndefined(node.layout[dim[mainAxis]])) { if (isMainDimDefined) {
setTrailingPosition(node, child, mainAxis); setTrailingPosition(node, child, mainAxis);
} }
}
// Now that we placed the element, we need to update the variables // Now that we placed the element, we need to update the variables
// We only need to do that for relative elements. Absolute elements // We only need to do that for relative elements. Absolute elements
// do not take part in that phase. // do not take part in that phase.
if (getPositionType(child) === CSS_POSITION_RELATIVE) { if (getPositionType(child) === CSS_POSITION_RELATIVE) {
// The main dimension is the sum of all the elements dimension plus // The main dimension is the sum of all the elements dimension plus
// the spacing. // the spacing.
mainDim += betweenMainDim + getDimWithMargin(child, mainAxis); mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
// The cross dimension is the max of the elements dimension since there // The cross dimension is the max of the elements dimension since there
// can only be one element in that cross dimension. // can only be one element in that cross dimension.
crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis))); crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
}
} }
} }
var/*float*/ containerCrossAxis = node.layout[dim[crossAxis]]; var/*float*/ containerCrossAxis = node.layout[dim[crossAxis]];
if (isUndefined(node.layout[dim[crossAxis]])) { if (!isCrossDimDefined) {
containerCrossAxis = fmaxf( containerCrossAxis = fmaxf(
// For the cross dim, we add both sides at the end because the value // For the cross dim, we add both sides at the end because the value
// is aggregate via a max function. Intermediate negative values // is aggregate via a max function. Intermediate negative values
// can mess this computation otherwise // can mess this computation otherwise
boundAxis(node, crossAxis, crossDim + getPaddingAndBorderAxis(node, crossAxis)), boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross),
getPaddingAndBorderAxis(node, crossAxis) paddingAndBorderAxisCross
); );
} }
// <Loop D> Position elements in the cross axis // <Loop D> Position elements in the cross axis
for (i = startLine; i < endLine; ++i) { for (i = firstComplexCross; i < endLine; ++i) {
child = node.children[i]; child = node.children[i];
if (getPositionType(child) === CSS_POSITION_ABSOLUTE && if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
@@ -776,7 +871,7 @@ var computeLayout = (function() {
getLeadingMargin(child, crossAxis); getLeadingMargin(child, crossAxis);
} else { } else {
var/*float*/ leadingCrossDim = getLeadingPaddingAndBorder(node, crossAxis); var/*float*/ leadingCrossDim = leadingPaddingAndBorderCross;
// For a relative children, we're either using alignItems (parent) or // For a relative children, we're either using alignItems (parent) or
// alignSelf (child) in order to determine the position in the cross axis // alignSelf (child) in order to determine the position in the cross axis
@@ -785,11 +880,10 @@ var computeLayout = (function() {
if (alignItem === CSS_ALIGN_STRETCH) { 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 set
// previously. // previously.
if (!isDimDefined(child, crossAxis)) { if (isUndefined(child.layout[dim[crossAxis]])) {
child.layout[dim[crossAxis]] = fmaxf( child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, containerCrossAxis - boundAxis(child, crossAxis, containerCrossAxis -
getPaddingAndBorderAxis(node, crossAxis) - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding // You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis) getPaddingAndBorderAxis(child, crossAxis)
); );
@@ -798,8 +892,7 @@ var computeLayout = (function() {
// The remaining space between the parent dimensions+padding and child // The remaining space between the parent dimensions+padding and child
// dimensions+margin. // dimensions+margin.
var/*float*/ remainingCrossDim = containerCrossAxis - var/*float*/ remainingCrossDim = containerCrossAxis -
getPaddingAndBorderAxis(node, crossAxis) - paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis);
getDimWithMargin(child, crossAxis);
if (alignItem === CSS_ALIGN_CENTER) { if (alignItem === CSS_ALIGN_CENTER) {
leadingCrossDim += remainingCrossDim / 2; leadingCrossDim += remainingCrossDim / 2;
@@ -813,7 +906,7 @@ var computeLayout = (function() {
child.layout[pos[crossAxis]] += linesCrossDim + leadingCrossDim; child.layout[pos[crossAxis]] += linesCrossDim + leadingCrossDim;
// Define the trailing position accordingly. // Define the trailing position accordingly.
if (!isUndefined(node.layout[dim[crossAxis]])) { if (isCrossDimDefined) {
setTrailingPosition(node, child, crossAxis); setTrailingPosition(node, child, crossAxis);
} }
} }
@@ -838,14 +931,13 @@ var computeLayout = (function() {
// http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm // http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm
// section 9.4 // section 9.4
// //
if (linesCount > 1 && if (linesCount > 1 && isCrossDimDefined) {
!isUndefined(node.layout[dim[crossAxis]])) {
var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] - var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
getPaddingAndBorderAxis(node, crossAxis); paddingAndBorderAxisCross;
var/*float*/ remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim; var/*float*/ remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
var/*float*/ crossDimLead = 0; var/*float*/ crossDimLead = 0;
var/*float*/ currentLead = getLeadingPaddingAndBorder(node, crossAxis); var/*float*/ currentLead = leadingPaddingAndBorderCross;
var/*css_align_t*/ alignContent = getAlignContent(node); var/*css_align_t*/ alignContent = getAlignContent(node);
if (alignContent === CSS_ALIGN_FLEX_END) { if (alignContent === CSS_ALIGN_FLEX_END) {
@@ -864,7 +956,7 @@ var computeLayout = (function() {
// compute the line's height and find the endIndex // compute the line's height and find the endIndex
var/*float*/ lineHeight = 0; var/*float*/ lineHeight = 0;
for (ii = startIndex; ii < node.children.length; ++ii) { for (ii = startIndex; ii < childCount; ++ii) {
child = node.children[ii]; child = node.children[ii];
if (getPositionType(child) !== CSS_POSITION_RELATIVE) { if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
continue; continue;
@@ -912,33 +1004,39 @@ var computeLayout = (function() {
// If the user didn't specify a width or height, and it has not been set // If the user didn't specify a width or height, and it has not been set
// by the container, then we set it via the children. // by the container, then we set it via the children.
if (isUndefined(node.layout[dim[mainAxis]])) { if (!isMainDimDefined) {
node.layout[dim[mainAxis]] = fmaxf( node.layout[dim[mainAxis]] = fmaxf(
// We're missing the last padding at this point to get the final // We're missing the last padding at this point to get the final
// dimension // dimension
boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)), boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)),
// We can never assign a width smaller than the padding and borders // We can never assign a width smaller than the padding and borders
getPaddingAndBorderAxis(node, mainAxis) paddingAndBorderAxisMain
); );
needsMainTrailingPos = true; if (mainAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
mainAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
needsMainTrailingPos = true;
}
} }
if (isUndefined(node.layout[dim[crossAxis]])) { if (!isCrossDimDefined) {
node.layout[dim[crossAxis]] = fmaxf( node.layout[dim[crossAxis]] = fmaxf(
// For the cross dim, we add both sides at the end because the value // For the cross dim, we add both sides at the end because the value
// is aggregate via a max function. Intermediate negative values // is aggregate via a max function. Intermediate negative values
// can mess this computation otherwise // can mess this computation otherwise
boundAxis(node, crossAxis, linesCrossDim + getPaddingAndBorderAxis(node, crossAxis)), boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross),
getPaddingAndBorderAxis(node, crossAxis) paddingAndBorderAxisCross
); );
needsCrossTrailingPos = true; if (crossAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
crossAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
needsCrossTrailingPos = true;
}
} }
// <Loop F> Set trailing position if necessary // <Loop F> Set trailing position if necessary
if (needsMainTrailingPos || needsCrossTrailingPos) { if (needsMainTrailingPos || needsCrossTrailingPos) {
for (i = 0; i < node.children.length; ++i) { for (i = 0; i < childCount; ++i) {
child = node.children[i]; child = node.children[i];
if (needsMainTrailingPos) { if (needsMainTrailingPos) {
@@ -952,40 +1050,41 @@ var computeLayout = (function() {
} }
// <Loop G> Calculate dimensions for absolutely positioned elements // <Loop G> Calculate dimensions for absolutely positioned elements
for (i = 0; i < node.children.length; ++i) { currentAbsoluteChild = firstAbsoluteChild;
child = node.children[i]; while (currentAbsoluteChild !== null) {
if (getPositionType(child) === CSS_POSITION_ABSOLUTE) { // Pre-fill dimensions when using absolute position and both offsets for
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both // the axis are defined (either both left and right or top and bottom).
// left and right or top and bottom). for (ii = 0; ii < 2; ii++) {
for (ii = 0; ii < 2; ii++) { axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node.layout[dim[axis]]) && if (!isUndefined(node.layout[dim[axis]]) &&
!isDimDefined(child, axis) && !isDimDefined(currentAbsoluteChild, axis) &&
isPosDefined(child, leading[axis]) && isPosDefined(currentAbsoluteChild, leading[axis]) &&
isPosDefined(child, trailing[axis])) { isPosDefined(currentAbsoluteChild, trailing[axis])) {
child.layout[dim[axis]] = fmaxf( currentAbsoluteChild.layout[dim[axis]] = fmaxf(
boundAxis(child, axis, node.layout[dim[axis]] - boundAxis(currentAbsoluteChild, axis, node.layout[dim[axis]] -
getBorderAxis(node, axis) - getBorderAxis(node, axis) -
getMarginAxis(child, axis) - getMarginAxis(currentAbsoluteChild, axis) -
getPosition(child, leading[axis]) - getPosition(currentAbsoluteChild, leading[axis]) -
getPosition(child, trailing[axis]) getPosition(currentAbsoluteChild, trailing[axis])
), ),
// You never want to go smaller than padding // You never want to go smaller than padding
getPaddingAndBorderAxis(child, axis) getPaddingAndBorderAxis(currentAbsoluteChild, axis)
); );
}
} }
for (ii = 0; ii < 2; ii++) {
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; if (isPosDefined(currentAbsoluteChild, trailing[axis]) &&
if (isPosDefined(child, trailing[axis]) && !isPosDefined(currentAbsoluteChild, leading[axis])) {
!isPosDefined(child, leading[axis])) { currentAbsoluteChild.layout[leading[axis]] =
child.layout[leading[axis]] = node.layout[dim[axis]] -
node.layout[dim[axis]] - currentAbsoluteChild.layout[dim[axis]] -
child.layout[dim[axis]] - getPosition(currentAbsoluteChild, trailing[axis]);
getPosition(child, trailing[axis]);
}
} }
} }
child = currentAbsoluteChild;
currentAbsoluteChild = currentAbsoluteChild.nextAbsoluteChild;
child.nextAbsoluteChild = null;
} }
} }
@@ -1002,6 +1101,7 @@ if (typeof exports === 'object') {
module.exports = computeLayout; module.exports = computeLayout;
} }
return function(node) { return function(node) {
computeLayout.fillNodes(node); computeLayout.fillNodes(node);
computeLayout.computeLayout(node); computeLayout.computeLayout(node);

2
dist/css-layout.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css-layout.min.js.map vendored
View File

File diff suppressed because one or more lines are too long