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

do not infinite loop when there's an element bigger than the container with flex-wrap

Browse Source
This commit is contained in:
Christopher Chedeau
2014-12-12 12:24:26 +00:00
parent 10fb645777
commit 9001a3d2ac
2 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Layout.js
View File

@@ -311,11 +311,12 @@ var computeLayout = (function() {
// 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
var/*int*/ startLine = 0; var/*int*/ startLine = 0;
var/*int*/ endLine = 0; var/*int*/ endLine = 0;
var/*int*/ nextLine = 0; var/*int*/ nextOffset = 0;
var/*int*/ alreadyComputedNextLayout = 0;
// We aggregate the total dimensions of the container in those two variables // We aggregate the total dimensions of the container in those two variables
var/*float*/ linesCrossDim = 0; var/*float*/ linesCrossDim = 0;
var/*float*/ linesMainDim = 0; var/*float*/ linesMainDim = 0;
while (endLine !== node.children.length) { while (endLine < node.children.length) {
// <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
@@ -359,7 +360,7 @@ var computeLayout = (function() {
} }
// This is the main recursive call. We layout non flexible children. // This is the main recursive call. We layout non flexible children.
if (nextLine === 0) { if (alreadyComputedNextLayout === 0) {
layoutNode(child, maxWidth); layoutNode(child, maxWidth);
} }
@@ -375,11 +376,14 @@ 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 (isFlexWrap(node) &&
!isUndefined(node.layout[dim[mainAxis]]) && !isUndefined(node.layout[dim[mainAxis]]) &&
mainContentDim + nextContentDim > definedMainDim) { mainContentDim + nextContentDim > definedMainDim &&
nextLine = i + 1; // If there's only one element, then it's bigger than the content
// and needs its own line
i !== startLine) {
alreadyComputedNextLayout = 1;
break; break;
} }
nextLine = 0; alreadyComputedNextLayout = 0;
mainContentDim += nextContentDim; mainContentDim += nextContentDim;
endLine = i + 1; endLine = i + 1;
} }

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

@@ -104,7 +104,7 @@ describe('Layout', function() {
); );
}); });
it('should layout node with flex', function() { it('should layout node with just flex', function() {
testLayout( testLayout(
{style: {width: 1000, height: 1000}, children: [ {style: {width: 1000, height: 1000}, children: [
{style: {width: 100, height: 200}}, {style: {width: 100, height: 200}},
@@ -1159,6 +1159,19 @@ describe('Layout', function() {
); );
}); });
it('should layout flex wrap with a line bigger than container', function() {
testLayout(
{style: {height: 100, flexWrap: 'wrap'}, 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: 0, left: 0}
]}
);
});
xit('should layout text with alignItems: stretch', function() { xit('should layout text with alignItems: stretch', function() {
testLayout( testLayout(
{style: {width: 80, padding: 7, alignItems: 'stretch', measure: text(texts.big)}}, {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text(texts.big)}},