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

Style fixes ;

Browse Source
This commit is contained in:
Pierre Renaux
2015-05-09 11:46:28 +08:00
parent 9ca681ff28
commit cc5f772bff
5 changed files with 134 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -240,23 +240,23 @@ var layoutTestUtils = (function() {
return layout;
}
function inplaceRoundNumbersInObject(aObj) {
if (!testMeasurePrecision) // undefined/0, disables rounding
function inplaceRoundNumbersInObject(obj) {
if (!testMeasurePrecision) {
// undefined/0, disables rounding
return;
}
for (var key in aObj) {
if (!aObj.hasOwnProperty(key))
for (var key in obj) {
if (!obj.hasOwnProperty(key)) {
continue;
var val = aObj[key];
switch (typeof(val)) {
case 'number': {
aObj[key] = Math.floor((val*testMeasurePrecision)+0.5)/testMeasurePrecision;
break;
}
case 'object': {
var val = obj[key];
if (typeof val === 'number') {
obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) /testMeasurePrecision;
}
else if (typeof val === 'object') {
inplaceRoundNumbersInObject(val);
break;
}
}
}
}

57
src/Layout.c
View File

@@ -781,10 +781,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
startLine = endLine;
}
// <Loop DD>
// <Loop E>
//
// PIERRE: More than one line, we need to layout the crossAxis according to
// alignContent.
// Note(prenaux): More than one line, we need to layout the crossAxis
// according to alignContent.
//
// Note that we could probably remove <Loop D> and handle the one line case
// here too, but for the moment this is safer since it won't interfere with
@@ -795,25 +795,22 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// section 9.4
//
if (linesCount > 1 &&
(!isUndefined(node->layout.dimensions[dim[crossAxis]])))
{
!isUndefined(node->layout.dimensions[dim[crossAxis]])) {
float nodeCrossAxisInnerSize = node->layout.dimensions[dim[crossAxis]] -
getPaddingAndBorderAxis(node, crossAxis);
float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
float crossDimAdd = 0;
float crossDimLead = 0;
float currentLead = getPaddingAndBorder(node, leading[crossAxis]);
css_align_t alignContent = getAlignContent(node);
if (alignContent == CSS_ALIGN_FLEX_END) {
currentLead += remainingCrossDim;
}
else if (alignContent == CSS_ALIGN_CENTER) {
} else if (alignContent == CSS_ALIGN_CENTER) {
currentLead += remainingCrossDim / 2;
}
else if (alignContent == CSS_ALIGN_STRETCH) {
} else if (alignContent == CSS_ALIGN_STRETCH) {
if (nodeCrossAxisInnerSize > linesCrossDim) {
crossDimAdd = (remainingCrossDim / linesCount);
crossDimLead = (remainingCrossDim / linesCount);
}
}
@@ -823,14 +820,12 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
int lineIndex = -1;
// get the first child on the current line
{
child = node->get_child(node->context, i);
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
++i;
continue;
}
lineIndex = child->line_index;
}
// compute the line's height and find the endIndex
float lineHeight = 0;
@@ -843,12 +838,14 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
break;
}
if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
lineHeight = fmaxf(lineHeight,child->layout.dimensions[dim[crossAxis]] +
getMarginAxis(child,crossAxis));
lineHeight = fmaxf(
lineHeight,
child->layout.dimensions[dim[crossAxis]] + getMarginAxis(child, crossAxis)
);
}
}
int endIndex = ii;
lineHeight += crossDimAdd;
lineHeight += crossDimLead;
for (ii = startIndex; ii < endIndex; ++ii) {
child = node->get_child(node->context, ii);
@@ -857,25 +854,18 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
}
css_align_t alignItem = getAlignItem(node, child);
float crossPosition = child->layout.position[pos[crossAxis]]; // preserve current position if someting goes wrong with alignItem?
if (alignItem == CSS_ALIGN_FLEX_START) {
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
}
else if (alignItem == CSS_ALIGN_FLEX_END) {
crossPosition = currentLead + lineHeight -
getMargin(child,trailing[crossAxis]) -
child->layout.dimensions[dim[crossAxis]];
}
else if (alignItem == CSS_ALIGN_CENTER) {
child->layout.position[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
} else if (alignItem == CSS_ALIGN_FLEX_END) {
child->layout.position[pos[crossAxis]] = currentLead + lineHeight - getMargin(child,trailing[crossAxis]) - child->layout.dimensions[dim[crossAxis]];
} else if (alignItem == CSS_ALIGN_CENTER) {
float childHeight = child->layout.dimensions[dim[crossAxis]];
crossPosition = currentLead + ((lineHeight - childHeight)/2);
child->layout.position[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
} else if (alignItem == CSS_ALIGN_STRETCH) {
child->layout.position[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
// TODO(prenaux): Correctly set the height of items with undefined
// (auto) crossAxis dimension.
}
else if (alignItem == CSS_ALIGN_STRETCH) {
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
// TODO: Correctly set the height of items with undefined (auto)
// crossAxis dimension.
}
child->layout.position[pos[crossAxis]] = crossPosition;
}
currentLead += lineHeight;
@@ -905,8 +895,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
);
}
// <Loop E> Calculate dimensions for absolutely positioned elements
// <Loop F> Calculate dimensions for absolutely positioned elements
for (i = 0; i < node->children_count; ++i) {
child = node->get_child(node->context, i);
if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {

69
src/Layout.js
View File

@@ -667,10 +667,10 @@ var computeLayout = (function() {
startLine = endLine;
}
// <Loop DD>
// <Loop E>
//
// PIERRE: More than one line, we need to layout the crossAxis according to
// alignContent.
// Note(prenaux): More than one line, we need to layout the crossAxis
// according to alignContent.
//
// Note that we could probably remove <Loop D> and handle the one line case
// here too, but for the moment this is safer since it won't interfere with
@@ -681,25 +681,22 @@ var computeLayout = (function() {
// section 9.4
//
if (linesCount > 1 &&
(!isUndefined(node.layout[dim[crossAxis]])))
{
!isUndefined(node.layout[dim[crossAxis]])) {
var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
getPaddingAndBorderAxis(node, crossAxis);
var/*float*/ remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
var/*float*/ crossDimAdd = 0;
var/*float*/ crossDimLead = 0;
var/*float*/ currentLead = getPaddingAndBorder(node, leading[crossAxis]);
var/*css_align_t*/ alignContent = getAlignContent(node);
if (alignContent == CSS_ALIGN_FLEX_END) {
if (alignContent === CSS_ALIGN_FLEX_END) {
currentLead += remainingCrossDim;
}
else if (alignContent == CSS_ALIGN_CENTER) {
} else if (alignContent === CSS_ALIGN_CENTER) {
currentLead += remainingCrossDim / 2;
}
else if (alignContent == CSS_ALIGN_STRETCH) {
} else if (alignContent === CSS_ALIGN_STRETCH) {
if (nodeCrossAxisInnerSize > linesCrossDim) {
crossDimAdd = (remainingCrossDim / linesCount);
crossDimLead = (remainingCrossDim / linesCount);
}
}
@@ -709,59 +706,52 @@ var computeLayout = (function() {
var/*int*/ lineIndex = -1;
// get the first child on the current line
{
child = node.children[i];
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
++i;
continue;
}
lineIndex = child.lineIndex;
}
// compute the line's height and find the endIndex
var/*float*/ lineHeight = 0;
for (ii = startIndex; ii < node.children.length; ++ii) {
child = node.children[ii];
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
continue;
}
if (child.lineIndex != lineIndex) {
if (child.lineIndex !== lineIndex) {
break;
}
if (!isUndefined(child.layout[dim[crossAxis]])) {
lineHeight = fmaxf(lineHeight,child.layout[dim[crossAxis]] +
getMarginAxis(child,crossAxis));
lineHeight = fmaxf(
lineHeight,
child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis)
);
}
}
var/*int*/ endIndex = ii;
lineHeight += crossDimAdd;
lineHeight += crossDimLead;
for (ii = startIndex; ii < endIndex; ++ii) {
child = node.children[ii];
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
continue;
}
var/*css_align_t*/ alignItem = getAlignItem(node, child);
var/*float*/ crossPosition = child.layout[pos[crossAxis]]; // preserve current position if someting goes wrong with alignItem?
if (alignItem == CSS_ALIGN_FLEX_START) {
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
}
else if (alignItem == CSS_ALIGN_FLEX_END) {
crossPosition = currentLead + lineHeight -
getMargin(child,trailing[crossAxis]) -
child.layout[dim[crossAxis]];
}
else if (alignItem == CSS_ALIGN_CENTER) {
if (alignItem === CSS_ALIGN_FLEX_START) {
child.layout[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
} else if (alignItem === CSS_ALIGN_FLEX_END) {
child.layout[pos[crossAxis]] = currentLead + lineHeight - getMargin(child,trailing[crossAxis]) - child.layout[dim[crossAxis]];
} else if (alignItem === CSS_ALIGN_CENTER) {
var/*float*/ childHeight = child.layout[dim[crossAxis]];
crossPosition = currentLead + ((lineHeight - childHeight)/2);
child.layout[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
} else if (alignItem === CSS_ALIGN_STRETCH) {
child.layout[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
// TODO(prenaux): Correctly set the height of items with undefined
// (auto) crossAxis dimension.
}
else if (alignItem == CSS_ALIGN_STRETCH) {
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
// TODO: Correctly set the height of items with undefined (auto)
// crossAxis dimension.
}
child.layout[pos[crossAxis]] = crossPosition;
}
currentLead += lineHeight;
@@ -791,8 +781,7 @@ var computeLayout = (function() {
);
}
// <Loop E> Calculate dimensions for absolutely positioned elements
// <Loop F> Calculate dimensions for absolutely positioned elements
for (i = 0; i < node.children.length; ++i) {
child = node.children[i];
if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {

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

@@ -1594,49 +1594,49 @@ describe('Layout alignContent', function() {
var alignContentData = {
style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap'},
children: [
/* 0 */ { style: {width: 50, height: 50, margin: 10} },
/* 1 */ { style: {width: 50, height: 50, margin: 10} },
/* 2 */ { style: {width: 50, height: 50, margin: 10} },
/* 3 */ { style: {width: 50, height: 50, margin: 10} },
/* 4 */ { style: {width: 50, height: 100, margin: 10} },
/* 5 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} },
/* 6 */ { style: {width: 50, height: 50, margin: 10} },
/* 7 */ { style: {width: 50, height: 100, margin: 10} },
/* 8 */ { style: {width: 50, height: 50, margin: 10} },
/* 9 */ { style: {width: 50, height: 50, margin: 10} },
/* 10 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' } },
/* 11 */ { style: {width: 50, height: 50, margin: 10} },
/* 12 */ { style: {width: 50, height: 50, margin: 10} },
/* 13 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} },
/* 14 */ { style: {width: 50, height: 50, margin: 10} },
/* 0 */ {style: {width: 50, height: 50, margin: 10}},
/* 1 */ {style: {width: 50, height: 50, margin: 10}},
/* 2 */ {style: {width: 50, height: 50, margin: 10}},
/* 3 */ {style: {width: 50, height: 50, margin: 10}},
/* 4 */ {style: {width: 50, height: 100, margin: 10}},
/* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
/* 6 */ {style: {width: 50, height: 50, margin: 10}},
/* 7 */ {style: {width: 50, height: 100, margin: 10}},
/* 8 */ {style: {width: 50, height: 50, margin: 10}},
/* 9 */ {style: {width: 50, height: 50, margin: 10}},
/* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }},
/* 11 */ {style: {width: 50, height: 50, margin: 10}},
/* 12 */ {style: {width: 50, height: 50, margin: 10}},
/* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
/* 14 */ {style: {width: 50, height: 50, margin: 10}},
],
};
it('should layout with alignContent: stretch, and alignItems: flex-start', function() {
testLayout(
alignContentData,
{ width:300,height:380,top:0,left:0, children:[
{width:50,height:50,top:10,left:10},
{width:50,height:50,top:10,left:80},
{width:50,height:50,top:10,left:150},
{width:50,height:50,top:10,left:220},
{width:50,height:100,top:92.5,left:10},
{width:50,height:50,top:92.5,left:80},
{width:50,height:50,top:92.5,left:150},
{width:50,height:100,top:92.5,left:220},
{width:50,height:50,top:225,left:10},
{width:50,height:50,top:225,left:80},
{width:50,height:50,top:225,left:150},
{width:50,height:50,top:225,left:220},
{width:50,height:50,top:307.5,left:10},
{width:50,height:50,top:307.5,left:80},
{width:50,height:50,top:307.5,left:150}
{width: 300, height: 380, top: 0, left: 0, children: [
{width: 50, height: 50, top: 10, left: 10},
{width: 50, height: 50, top: 10, left: 80},
{width: 50, height: 50, top: 10, left: 150},
{width: 50, height: 50, top: 10, left: 220},
{width: 50, height: 100, top: 92.5, left: 10},
{width: 50, height: 50, top: 92.5, left: 80},
{width: 50, height: 50, top: 92.5, left: 150},
{width: 50, height: 100, top: 92.5, left: 220},
{width: 50, height: 50, top: 225, left: 10},
{width: 50, height: 50, top: 225, left: 80},
{width: 50, height: 50, top: 225, left: 150},
{width: 50, height: 50, top: 225, left: 220},
{width: 50, height: 50, top: 307.5, left: 10},
{width: 50, height: 50, top: 307.5, left: 80},
{width: 50, height: 50, top: 307.5, left: 150}
]}
);
});
function testAlignContent(aAlignContent, aAlignItems) {
it('should layout with alignContent: '+aAlignContent+', and alignItems: '+aAlignItems, function() {
function testAlignContent(alignContent, alignItems) {
it('should layout with alignContent: ' + alignContent + ', and alignItems: ' + alignItems, function() {
testLayoutAgainstDomOnly(alignContentData);
});
}

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

@@ -718,10 +718,10 @@ public class LayoutEngine {
startLine = endLine;
}
// <Loop DD>
// <Loop E>
//
// PIERRE: More than one line, we need to layout the crossAxis according to
// alignContent.
// Note(prenaux): More than one line, we need to layout the crossAxis
// according to alignContent.
//
// Note that we could probably remove <Loop D> and handle the one line case
// here too, but for the moment this is safer since it won't interfere with
@@ -732,25 +732,22 @@ public class LayoutEngine {
// section 9.4
//
if (linesCount > 1 &&
(!CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))))
{
!CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))) {
float nodeCrossAxisInnerSize = getLayoutDimension(node, getDim(crossAxis)) -
getPaddingAndBorderAxis(node, crossAxis);
float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
float crossDimAdd = 0;
float crossDimLead = 0;
float currentLead = getPaddingAndBorder(node, getLeading(crossAxis));
CSSAlign alignContent = getAlignContent(node);
if (alignContent == CSSAlign.FLEX_END) {
currentLead = currentLead + remainingCrossDim;
}
else if (alignContent == CSSAlign.CENTER) {
} else if (alignContent == CSSAlign.CENTER) {
currentLead = currentLead + remainingCrossDim / 2;
}
else if (alignContent == CSSAlign.STRETCH) {
} else if (alignContent == CSSAlign.STRETCH) {
if (nodeCrossAxisInnerSize > linesCrossDim) {
crossDimAdd = (remainingCrossDim / linesCount);
crossDimLead = (remainingCrossDim / linesCount);
}
}
@@ -760,14 +757,12 @@ public class LayoutEngine {
int lineIndex = -1;
// get the first child on the current line
{
child = node.getChildAt(i);
if (getPositionType(child) != CSSPositionType.RELATIVE) {
++i;
continue;
}
lineIndex = child.lineIndex;
}
// compute the line's height and find the endIndex
float lineHeight = 0;
@@ -780,12 +775,14 @@ public class LayoutEngine {
break;
}
if (!CSSConstants.isUndefined(getLayoutDimension(child, getDim(crossAxis)))) {
lineHeight = Math.max(lineHeight,getLayoutDimension(child, getDim(crossAxis)) +
getMarginAxis(child,crossAxis));
lineHeight = Math.max(
lineHeight,
getLayoutDimension(child, getDim(crossAxis)) + getMarginAxis(child, crossAxis)
);
}
}
int endIndex = ii;
lineHeight = lineHeight + crossDimAdd;
lineHeight = lineHeight + crossDimLead;
for (ii = startIndex; ii < endIndex; ++ii) {
child = node.getChildAt(ii);
@@ -794,25 +791,18 @@ public class LayoutEngine {
}
CSSAlign alignItem = getAlignItem(node, child);
float crossPosition = getLayoutPosition(child, getPos(crossAxis)); // preserve current position if someting goes wrong with alignItem?
if (alignItem == CSSAlign.FLEX_START) {
crossPosition = currentLead + getMargin(child,getLeading(crossAxis));
}
else if (alignItem == CSSAlign.FLEX_END) {
crossPosition = currentLead + lineHeight -
getMargin(child,getTrailing(crossAxis)) -
getLayoutDimension(child, getDim(crossAxis));
}
else if (alignItem == CSSAlign.CENTER) {
setLayoutPosition(child, getPos(crossAxis), currentLead + getMargin(child, getLeading(crossAxis)));
} else if (alignItem == CSSAlign.FLEX_END) {
setLayoutPosition(child, getPos(crossAxis), currentLead + lineHeight - getMargin(child,getTrailing(crossAxis)) - getLayoutDimension(child, getDim(crossAxis)));
} else if (alignItem == CSSAlign.CENTER) {
float childHeight = getLayoutDimension(child, getDim(crossAxis));
crossPosition = currentLead + ((lineHeight - childHeight)/2);
setLayoutPosition(child, getPos(crossAxis), currentLead + (lineHeight - childHeight) / 2);
} else if (alignItem == CSSAlign.STRETCH) {
setLayoutPosition(child, getPos(crossAxis), currentLead + getMargin(child, getLeading(crossAxis)));
// TODO(prenaux): Correctly set the height of items with undefined
// (auto) crossAxis dimension.
}
else if (alignItem == CSSAlign.STRETCH) {
crossPosition = currentLead + getMargin(child,getLeading(crossAxis));
// TODO: Correctly set the height of items with undefined (auto)
// crossAxis dimension.
}
setLayoutPosition(child, getPos(crossAxis), crossPosition);
}
currentLead = currentLead + lineHeight;
@@ -842,8 +832,7 @@ public class LayoutEngine {
));
}
// <Loop E> Calculate dimensions for absolutely positioned elements
// <Loop F> Calculate dimensions for absolutely positioned elements
for (i = 0; i < node.getChildCount(); ++i) {
child = node.getChildAt(i);
if (getPositionType(child) == CSSPositionType.ABSOLUTE) {