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

port changes to C

Browse Source
This commit is contained in:
Christopher Chedeau
2014-04-22 13:18:05 -07:00
parent 66096e2ca6
commit db510d590a
5 changed files with 575 additions and 25978 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/Layout.c
View File

@@ -133,6 +133,15 @@ void print_style(css_node_t *node, int level) {
print_number_0("paddingBottom", node->style.padding[CSS_BOTTOM]);
}
if (four_equal(node->style.border)) {
print_number_0("borderWidth", node->style.border[CSS_LEFT]);
} else {
print_number_0("borderLeftWidth", node->style.border[CSS_LEFT]);
print_number_0("borderRightWidth", node->style.border[CSS_RIGHT]);
print_number_0("borderTopWidth", node->style.border[CSS_TOP]);
print_number_0("borderBottomWidth", node->style.border[CSS_BOTTOM]);
}
print_number_nan("width", node->style.dimensions[CSS_WIDTH]);
print_number_nan("height", node->style.dimensions[CSS_HEIGHT]);
@@ -203,8 +212,34 @@ float getMargin(css_node_t *node, int location) {
}
float getPadding(css_node_t *node, int location) {
if (node->style.padding[location] >= 0) {
return node->style.padding[location];
}
return 0;
}
float getBorder(css_node_t *node, int location) {
if (node->style.border[location] >= 0) {
return node->style.border[location];
}
return 0;
}
float getPaddingAndBorder(css_node_t *node, int location) {
return getPadding(node, location) + getBorder(node, location);
}
float getMarginAxis(css_node_t *node, css_flex_direction_t axis) {
return getMargin(node, leading[axis]) + getMargin(node, trailing[axis]);
}
float getPaddingAndBorderAxis(css_node_t *node, css_flex_direction_t axis) {
return getPaddingAndBorder(node, leading[axis]) + getPaddingAndBorder(node, trailing[axis]);
}
css_position_type_t getPositionType(css_node_t *node) {
return node->style.position_type;
}
css_justify_t getJustifyContent(css_node_t *node) {
return node->style.justify_content;
@@ -235,6 +270,10 @@ bool isDimDefined(css_node_t *node, css_flex_direction_t axis) {
return !isUndefined(node->style.dimensions[dim[axis]]);
}
bool isPosDefined(css_node_t *node, css_position_t pos) {
return !isUndefined(node->style.position[pos]);
}
float getPosition(css_node_t *node, css_position_t pos) {
float result = node->style.position[pos];
if (!isUndefined(result)) {
@@ -261,23 +300,37 @@ void layoutNode(css_node_t *node) {
bool mainDimInStyle = isDimDefined(node, mainAxis);
if (isUndefined(node->layout.dimensions[dim[mainAxis]]) && mainDimInStyle) {
node->layout.dimensions[dim[mainAxis]] = node->style.dimensions[dim[mainAxis]];
node->layout.dimensions[dim[mainAxis]] = fmaxf(
node->style.dimensions[dim[mainAxis]],
getPaddingAndBorderAxis(node, mainAxis)
);
}
bool crossDimInStyle = isDimDefined(node, crossAxis);
if (isUndefined(node->layout.dimensions[dim[crossAxis]]) && crossDimInStyle) {
node->layout.dimensions[dim[crossAxis]] = node->style.dimensions[dim[crossAxis]];
node->layout.dimensions[dim[crossAxis]] = fmaxf(
node->style.dimensions[dim[crossAxis]],
getPaddingAndBorderAxis(node, crossAxis)
);
}
float mainContentDim = 0;
int flexibleChildrenCount = 0;
int absoluteChildrenCount = 0;
for (int i = 0; i < node->children_count; ++i) {
css_node_t* child = &node->children[i];
if (isUndefined(node->layout.dimensions[dim[mainAxis]]) || !getFlex(child)) {
if (isUndefined(node->layout.dimensions[dim[mainAxis]]) ||
getPositionType(child) == CSS_POSITION_ABSOLUTE ||
!getFlex(child)) {
layoutNode(child);
if (getPositionType(child) == CSS_POSITION_RELATIVE) {
mainContentDim += getDimWithMargin(child, mainAxis);
} else {
absoluteChildrenCount++;
}
} else {
flexibleChildrenCount++;
mainContentDim += getPaddingAndBorderAxis(child, mainAxis) + getMarginAxis(child, mainAxis);
}
}
@@ -285,16 +338,18 @@ void layoutNode(css_node_t *node) {
float betweenMainDim = 0;
if (!isUndefined(node->layout.dimensions[dim[mainAxis]])) {
float remainingMainDim = node->layout.dimensions[dim[mainAxis]] -
getPadding(node, leading[mainAxis]) -
getPadding(node, trailing[mainAxis]) -
getPaddingAndBorderAxis(node, mainAxis) -
mainContentDim;
if (flexibleChildrenCount) {
float flexibleMainDim = remainingMainDim / flexibleChildrenCount;
if (flexibleMainDim < 0) {
flexibleMainDim = 0;
}
for (int i = 0; i < node->children_count; ++i) {
css_node_t* child = &node->children[i];
if (getFlex(child)) {
child->layout.dimensions[dim[mainAxis]] = flexibleMainDim;
if (getPositionType(child) == CSS_POSITION_RELATIVE && getFlex(child)) {
child->layout.dimensions[dim[mainAxis]] = flexibleMainDim + getPaddingAndBorderAxis(child, mainAxis);
layoutNode(child);
}
}
@@ -307,19 +362,26 @@ void layoutNode(css_node_t *node) {
} else if (justifyContent == CSS_JUSTIFY_FLEX_END) {
leadingMainDim = remainingMainDim;
} else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) {
betweenMainDim = remainingMainDim / (node->children_count - 1);
betweenMainDim = remainingMainDim / (node->children_count - absoluteChildrenCount - 1);
} else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) {
betweenMainDim = remainingMainDim / node->children_count;
betweenMainDim = remainingMainDim / (node->children_count - absoluteChildrenCount);
leadingMainDim = betweenMainDim / 2;
}
}
}
float crossDim = 0;
float mainPos = getPadding(node, leading[mainAxis]) + leadingMainDim;
float mainPos = getPaddingAndBorder(node, leading[mainAxis]) + leadingMainDim;
for (int i = 0; i < node->children_count; ++i) {
css_node_t* child = &node->children[i];
if (getPositionType(child) == CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[mainAxis])) {
child->layout.position[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
getBorder(node, leading[mainAxis]) +
getMargin(child, leading[mainAxis]);
} else {
child->layout.position[pos[mainAxis]] += mainPos;
}
if (getPositionType(child) == CSS_POSITION_RELATIVE) {
mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim;
if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
@@ -329,9 +391,10 @@ void layoutNode(css_node_t *node) {
}
}
}
mainPos += getPadding(node, trailing[mainAxis]);
crossDim += getPadding(node, leading[crossAxis]) +
getPadding(node, trailing[crossAxis]);
}
mainPos += getPaddingAndBorder(node, trailing[mainAxis]);
crossDim += getPaddingAndBorder(node, leading[crossAxis]) +
getPaddingAndBorder(node, trailing[crossAxis]);
if (isUndefined(node->layout.dimensions[dim[mainAxis]]) && !mainDimInStyle) {
node->layout.dimensions[dim[mainAxis]] = mainPos > 0 ? mainPos : 0;
@@ -342,13 +405,14 @@ void layoutNode(css_node_t *node) {
for (int i = 0; i < node->children_count; ++i) {
css_node_t* child = &node->children[i];
if (getPositionType(child) == CSS_POSITION_RELATIVE) {
css_align_t alignItem = getAlignItem(node, child);
float remainingCrossDim = node->layout.dimensions[dim[crossAxis]] -
getDimWithMargin(child, crossAxis) -
getPadding(node, leading[crossAxis]) -
getPadding(node, trailing[crossAxis]);
getPaddingAndBorderAxis(node, crossAxis);
float leadingCrossDim = getPadding(node, leading[crossAxis]);
float leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]);
if (alignItem == CSS_ALIGN_FLEX_START) {
// Do nothing
} else if (alignItem == CSS_ALIGN_CENTER) {
@@ -356,13 +420,22 @@ void layoutNode(css_node_t *node) {
} else if (alignItem == CSS_ALIGN_FLEX_END) {
leadingCrossDim += remainingCrossDim;
} else if (alignItem == CSS_ALIGN_STRETCH) {
if (!isDimDefined(child, crossAxis)) {
child->layout.dimensions[dim[crossAxis]] = node->layout.dimensions[dim[crossAxis]] -
getPadding(node, leading[crossAxis]) -
getPadding(node, trailing[crossAxis]) -
getMargin(child, leading[crossAxis]) -
getMargin(child, trailing[crossAxis]);
getPaddingAndBorderAxis(node, crossAxis) -
getMarginAxis(child, crossAxis);
}
}
child->layout.position[pos[crossAxis]] += leadingCrossDim;
} else {
if (isPosDefined(child, leading[crossAxis])) {
child->layout.position[pos[crossAxis]] = getPosition(child, leading[crossAxis]) +
getBorder(node, leading[crossAxis]) +
getMargin(child, leading[crossAxis]);
} else {
child->layout.position[pos[crossAxis]] += getPaddingAndBorder(node, leading[crossAxis]);
}
}
}
node->layout.position[leading[mainAxis]] += getMargin(node, leading[mainAxis]) +

7
src/Layout.h
View File

@@ -30,6 +30,11 @@ typedef enum {
CSS_FLEX_ONE
} css_flex_t;
typedef enum {
CSS_POSITION_RELATIVE = 0,
CSS_POSITION_ABSOLUTE
} css_position_type_t;
// Note: left and top are shared between position[2] and position[4], so
// they have to be before right and bottom.
typedef enum {
@@ -56,8 +61,10 @@ typedef struct {
css_align_t align_items;
css_align_t align_self;
css_flex_t flex;
css_position_type_t position_type;
float margin[4];
float padding[4];
float border[4];
float position[4];
float dimensions[2];
} css_style_t;

50
src/Layout.js
View File

@@ -61,7 +61,7 @@ var computeLayout = (function() {
}
function isUndefined(value) {
return value == undefined;
return value === undefined;
}
function getMargin(node, location) {
@@ -120,7 +120,7 @@ var computeLayout = (function() {
}
function getFlex(node) {
return node.style.flex == 1;
return node.style.flex === 1;
}
function getDimWithMargin(node, axis) {
@@ -169,6 +169,13 @@ var computeLayout = (function() {
column: 'height'
};
function fmaxf(a, b) {
if (a > b) {
return a;
}
return b;
}
var CSS_FLEX_DIRECTION_ROW = 'row';
var CSS_FLEX_DIRECTION_COLUMN = 'column';
@@ -183,15 +190,18 @@ var computeLayout = (function() {
var CSS_ALIGN_FLEX_END = 'flex-end';
var CSS_ALIGN_STRETCH = 'stretch';
var CSS_POSITION_RELATIVE = 'relative';
var CSS_POSITION_ABSOLUTE = 'absolute';
function layoutNode(node) {
var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
var/*css_flex_direction_t*/ crossAxis = mainAxis == CSS_FLEX_DIRECTION_ROW ?
var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
CSS_FLEX_DIRECTION_COLUMN :
CSS_FLEX_DIRECTION_ROW;
var/*bool*/ mainDimInStyle = isDimDefined(node, mainAxis);
if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) {
node.layout[dim[mainAxis]] = Math.max(
node.layout[dim[mainAxis]] = fmaxf(
node.style[dim[mainAxis]],
getPaddingAndBorderAxis(node, mainAxis)
);
@@ -199,7 +209,7 @@ var computeLayout = (function() {
var/*bool*/ crossDimInStyle = isDimDefined(node, crossAxis);
if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) {
node.layout[dim[crossAxis]] = Math.max(
node.layout[dim[crossAxis]] = fmaxf(
node.style[dim[crossAxis]],
getPaddingAndBorderAxis(node, crossAxis)
);
@@ -211,10 +221,10 @@ var computeLayout = (function() {
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
if (isUndefined(node.layout[dim[mainAxis]]) ||
getPositionType(child) === 'absolute' ||
getPositionType(child) === CSS_POSITION_ABSOLUTE ||
!getFlex(child)) {
layoutNode(child);
if (getPositionType(child) === 'relative') {
if (getPositionType(child) === CSS_POSITION_RELATIVE) {
mainContentDim += getDimWithMargin(child, mainAxis);
} else {
absoluteChildrenCount++;
@@ -239,22 +249,22 @@ var computeLayout = (function() {
}
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
if (getPositionType(child) === 'relative' && getFlex(child)) {
if (getPositionType(child) === CSS_POSITION_RELATIVE && getFlex(child)) {
child.layout[dim[mainAxis]] = flexibleMainDim + getPaddingAndBorderAxis(child, mainAxis);
layoutNode(child);
}
}
} else {
var/*css_justify_t*/ justifyContent = getJustifyContent(node);
if (justifyContent == CSS_JUSTIFY_FLEX_START) {
if (justifyContent === CSS_JUSTIFY_FLEX_START) {
// Do nothing
} else if (justifyContent == CSS_JUSTIFY_CENTER) {
} else if (justifyContent === CSS_JUSTIFY_CENTER) {
leadingMainDim = remainingMainDim / 2;
} else if (justifyContent == CSS_JUSTIFY_FLEX_END) {
} else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
leadingMainDim = remainingMainDim;
} else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) {
} else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) {
betweenMainDim = remainingMainDim / (node.children.length - absoluteChildrenCount - 1);
} else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) {
} else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) {
betweenMainDim = remainingMainDim / (node.children.length - absoluteChildrenCount);
leadingMainDim = betweenMainDim / 2;
}
@@ -265,14 +275,14 @@ var computeLayout = (function() {
var/*float*/ mainPos = getPaddingAndBorder(node, leading[mainAxis]) + leadingMainDim;
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
if (getPositionType(child) === 'absolute' && isPosDefined(child, leading[mainAxis])) {
if (getPositionType(child) === CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[mainAxis])) {
child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
getBorder(node, leading[mainAxis]) +
getMargin(child, leading[mainAxis]);
} else {
child.layout[pos[mainAxis]] += mainPos;
}
if (getPositionType(child) === 'relative') {
if (getPositionType(child) === CSS_POSITION_RELATIVE) {
mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim;
if (!isUndefined(child.layout[dim[crossAxis]])) {
@@ -297,20 +307,20 @@ var computeLayout = (function() {
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
if (getPositionType(child) === 'relative') {
if (getPositionType(child) === CSS_POSITION_RELATIVE) {
var/*css_align_t*/ alignItem = getAlignItem(node, child);
var/*float*/ remainingCrossDim = node.layout[dim[crossAxis]] -
getDimWithMargin(child, crossAxis) -
getPaddingAndBorderAxis(node, crossAxis);
var/*float*/ leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]);
if (alignItem == CSS_ALIGN_FLEX_START) {
if (alignItem === CSS_ALIGN_FLEX_START) {
// Do nothing
} else if (alignItem == CSS_ALIGN_CENTER) {
} else if (alignItem === CSS_ALIGN_CENTER) {
leadingCrossDim += remainingCrossDim / 2;
} else if (alignItem == CSS_ALIGN_FLEX_END) {
} else if (alignItem === CSS_ALIGN_FLEX_END) {
leadingCrossDim += remainingCrossDim;
} else if (alignItem == CSS_ALIGN_STRETCH) {
} else if (alignItem === CSS_ALIGN_STRETCH) {
if (!isDimDefined(child, crossAxis)) {
child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] -
getPaddingAndBorderAxis(node, crossAxis) -

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

File diff suppressed because it is too large Load Diff

28
src/transpile.html
View File

@@ -23,6 +23,7 @@ document.getElementById('layout_code').value = computeLayout.layoutNode.toString
.replace(/node\./g, 'node->')
.replace(/child\./g, 'child->')
.replace(/var\/\*([^\/]+)\*\//g, '$1')
.replace(/ === /g, ' == ')
.replace(/\n /g, '\n');
</script>
@@ -75,16 +76,16 @@ function printLayout(test) {
}
}
function addSpacing(node, spacing) {
addFloat(node, spacing, spacing + '[CSS_LEFT]');
addFloat(node, spacing, spacing + '[CSS_TOP]');
addFloat(node, spacing, spacing + '[CSS_RIGHT]');
addFloat(node, spacing, spacing + '[CSS_BOTTOM]');
function addSpacing(node, spacing, suffix) {
addFloat(node, spacing + suffix, spacing + '[CSS_LEFT]');
addFloat(node, spacing + suffix, spacing + '[CSS_TOP]');
addFloat(node, spacing + suffix, spacing + '[CSS_RIGHT]');
addFloat(node, spacing + suffix, spacing + '[CSS_BOTTOM]');
addFloat(node, spacing + 'Left', spacing + '[CSS_LEFT]');
addFloat(node, spacing + 'Top', spacing + '[CSS_TOP]');
addFloat(node, spacing + 'Right', spacing + '[CSS_RIGHT]');
addFloat(node, spacing + 'Bottom', spacing + '[CSS_BOTTOM]');
addFloat(node, spacing + 'Left' + suffix, spacing + '[CSS_LEFT]');
addFloat(node, spacing + 'Top' + suffix, spacing + '[CSS_TOP]');
addFloat(node, spacing + 'Right' + suffix, spacing + '[CSS_RIGHT]');
addFloat(node, spacing + 'Bottom' + suffix, spacing + '[CSS_BOTTOM]');
}
add('{');
@@ -123,10 +124,15 @@ function printLayout(test) {
'none': 'CSS_FLEX_NONE',
'1': 'CSS_FLEX_ONE'
});
addEnum(node, 'position', 'position_type', {
'relative': 'CSS_POSITION_RELATIVE',
'absolute': 'CSS_POSITION_ABSOLUTE'
});
addFloat(node, 'width', 'dimensions[CSS_WIDTH]');
addFloat(node, 'height', 'dimensions[CSS_HEIGHT]');
addSpacing(node, 'margin');
addSpacing(node, 'padding');
addSpacing(node, 'margin', '');
addSpacing(node, 'padding', '');
addSpacing(node, 'border', 'Width');
addFloat(node, 'left', 'position[CSS_LEFT]');
addFloat(node, 'top', 'position[CSS_TOP]');
addFloat(node, 'right', 'position[CSS_RIGHT]');