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

Redo layout of 'stretch' aligned items for correct positioning of nested

Browse Source 
items

Fixes facebook/css-layout#83, facebook/css-layout#100,
facebook/css-layout#127.
This commit is contained in:
Alex Bogomazov
2015-10-15 01:30:33 +03:00
parent dd8e5cd65d
commit 425345aa8d
15 changed files with 847 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
dist/css-layout.js vendored
View File

@@ -2,7 +2,7 @@
// See https://github.com/umdjs/umd for reference
//
// This file uses the following specific UMD implementation:
// https://github.com/umdjs/umd/blob/master/returnExports.js
// https://github.com/umdjs/umd/blob/master/templates/returnExports.js
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
@@ -380,10 +380,14 @@ var computeLayout = (function() {
return node.layout[dim[axis]] + getMarginAxis(node, axis);
}
function isDimDefined(node, axis) {
function isStyleDimDefined(node, axis) {
return node.style[dim[axis]] !== undefined && node.style[dim[axis]] >= 0;
}
function isLayoutDimDefined(node, axis) {
return node.layout[dim[axis]] !== undefined && node.layout[dim[axis]] >= 0;
}
function isPosDefined(node, pos) {
return node.style[pos] !== undefined;
}
@@ -434,11 +438,11 @@ var computeLayout = (function() {
// When the user specifically sets a value for width or height
function setDimensionFromStyle(node, axis) {
// The parent already computed us a width or height. We just skip it
if (node.layout[dim[axis]] !== undefined) {
if (isLayoutDimDefined(node, axis)) {
return;
}
// We only run if there's a width or height defined
if (!isDimDefined(node, axis)) {
if (!isStyleDimDefined(node, axis)) {
return;
}
@@ -494,10 +498,10 @@ var computeLayout = (function() {
var/*float*/ paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
if (isMeasureDefined(node)) {
var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]);
var/*bool*/ isResolvedRowDimDefined = isLayoutDimDefined(node, resolvedRowAxis);
var/*float*/ width = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) {
if (isStyleDimDefined(node, resolvedRowAxis)) {
width = node.style.width;
} else if (isResolvedRowDimDefined) {
width = node.layout[dim[resolvedRowAxis]];
@@ -508,9 +512,9 @@ var computeLayout = (function() {
width -= paddingAndBorderAxisResolvedRow;
var/*float*/ height = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node.style.height;
} else if (!isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]])) {
} else if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]];
} else {
height = parentMaxHeight -
@@ -521,8 +525,8 @@ var computeLayout = (function() {
// 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, resolvedRowAxis) && !isResolvedRowDimDefined;
var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
var/*bool*/ isRowUndefined = !isStyleDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
var/*bool*/ isColumnUndefined = !isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
// Let's not measure the text if we already know both dimensions
@@ -556,8 +560,8 @@ var computeLayout = (function() {
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*/ isMainDimDefined = isLayoutDimDefined(node, mainAxis);
var/*bool*/ isCrossDimDefined = isLayoutDimDefined(node, crossAxis);
var/*bool*/ isMainRowDirection = isRowDirection(mainAxis);
var/*int*/ i;
@@ -619,8 +623,8 @@ var computeLayout = (function() {
var/*float*/ mainDim = leadingPaddingAndBorderMain;
var/*float*/ crossDim = 0;
var/*float*/ maxWidth;
var/*float*/ maxHeight;
var/*float*/ maxWidth = CSS_UNDEFINED;
var/*float*/ maxHeight = CSS_UNDEFINED;
for (i = startLine; i < childCount; ++i) {
child = node.children[i];
child.lineIndex = linesCount;
@@ -635,7 +639,7 @@ var computeLayout = (function() {
if (alignItem === CSS_ALIGN_STRETCH &&
getPositionType(child) === CSS_POSITION_RELATIVE &&
isCrossDimDefined &&
!isDimDefined(child, crossAxis)) {
!isStyleDimDefined(child, crossAxis)) {
child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
@@ -657,8 +661,8 @@ var computeLayout = (function() {
// 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) &&
if (isLayoutDimDefined(node, axis) &&
!isStyleDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
isPosDefined(child, trailing[axis])) {
child.layout[dim[axis]] = fmaxf(
@@ -704,7 +708,7 @@ var computeLayout = (function() {
maxHeight = CSS_UNDEFINED;
if (!isMainRowDirection) {
if (isDimDefined(node, resolvedRowAxis)) {
if (isLayoutDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else {
@@ -713,7 +717,7 @@ var computeLayout = (function() {
paddingAndBorderAxisResolvedRow;
}
} else {
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else {
@@ -764,7 +768,7 @@ var computeLayout = (function() {
if (isSimpleStackCross &&
(getPositionType(child) !== CSS_POSITION_RELATIVE ||
(alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START) ||
isUndefined(child.layout[dim[crossAxis]]))) {
(alignItem == CSS_ALIGN_STRETCH && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -847,7 +851,7 @@ var computeLayout = (function() {
);
maxWidth = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) {
if (isLayoutDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else if (!isMainRowDirection) {
@@ -856,7 +860,7 @@ var computeLayout = (function() {
paddingAndBorderAxisResolvedRow;
}
maxHeight = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else if (isMainRowDirection) {
@@ -974,15 +978,31 @@ var computeLayout = (function() {
var/*css_align_t*/ alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem === CSS_ALIGN_STRETCH) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (isUndefined(child.layout[dim[crossAxis]])) {
if (!isStyleDimDefined(child, crossAxis)) {
var/*float*/ dimCrossAxis = child.layout[dim[crossAxis]];
child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child.layout[dim[crossAxis]] && child.children.length > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child.layout[leading[mainAxis]] -= getLeadingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child.layout[trailing[mainAxis]] -= getTrailingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child.layout[leading[crossAxis]] -= getLeadingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
child.layout[trailing[crossAxis]] -= getTrailingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
layoutNode(/*(java)!layoutContext, */child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem !== CSS_ALIGN_FLEX_START) {
// The remaining space between the parent dimensions+padding and child
@@ -1060,7 +1080,7 @@ var computeLayout = (function() {
if (child.lineIndex !== i) {
break;
}
if (!isUndefined(child.layout[dim[crossAxis]])) {
if (isLayoutDimDefined(child, crossAxis)) {
lineHeight = fmaxf(
lineHeight,
child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis)
@@ -1153,8 +1173,8 @@ var computeLayout = (function() {
for (ii = 0; ii < 2; ii++) {
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node.layout[dim[axis]]) &&
!isDimDefined(currentAbsoluteChild, axis) &&
if (isLayoutDimDefined(node, axis) &&
!isStyleDimDefined(currentAbsoluteChild, axis) &&
isPosDefined(currentAbsoluteChild, leading[axis]) &&
isPosDefined(currentAbsoluteChild, trailing[axis])) {
currentAbsoluteChild.layout[dim[axis]] = fmaxf(