diff --git a/src/Layout.c b/src/Layout.c index 95ed717e..181cdb69 100644 --- a/src/Layout.c +++ b/src/Layout.c @@ -301,8 +301,8 @@ float getRelativePosition(css_node_t *node, css_flex_direction_t axis) { void layoutNode(css_node_t *node) { css_flex_direction_t mainAxis = getFlexDirection(node); css_flex_direction_t crossAxis = mainAxis == CSS_FLEX_DIRECTION_ROW ? - CSS_FLEX_DIRECTION_COLUMN : - CSS_FLEX_DIRECTION_ROW; + CSS_FLEX_DIRECTION_COLUMN : + CSS_FLEX_DIRECTION_ROW; bool mainDimInStyle = isDimDefined(node, mainAxis); if (isUndefined(node->layout.dimensions[dim[mainAxis]]) && mainDimInStyle) { @@ -317,7 +317,7 @@ void layoutNode(css_node_t *node) { float mainContentDim = 0; unsigned int flexibleChildrenCount = 0; for (unsigned int i = 0; i < node->children_count; ++i) { - css_node_t *child = node->children[i]; + css_node_t* child = node->children[i]; if (isUndefined(node->layout.dimensions[dim[mainAxis]]) || !getFlex(child)) { layoutNode(child); mainContentDim += getDimWithMargin(child, mainAxis); @@ -337,7 +337,7 @@ void layoutNode(css_node_t *node) { if (flexibleChildrenCount) { float flexibleMainDim = remainingMainDim / flexibleChildrenCount; for (unsigned int i = 0; i < node->children_count; ++i) { - css_node_t *child = node->children[i]; + css_node_t* child = node->children[i]; if (getFlex(child)) { child->layout.dimensions[dim[mainAxis]] = flexibleMainDim; layoutNode(child); @@ -347,10 +347,10 @@ void layoutNode(css_node_t *node) { css_justify_t justifyContent = getJustifyContent(node); if (justifyContent == CSS_JUSTIFY_FLEX_START) { // Do nothing - } else if (justifyContent == CSS_JUSTIFY_FLEX_END) { - leadingMainDim = remainingMainDim; } else if (justifyContent == CSS_JUSTIFY_CENTER) { leadingMainDim = remainingMainDim / 2; + } else if (justifyContent == CSS_JUSTIFY_FLEX_END) { + leadingMainDim = remainingMainDim; } else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) { betweenMainDim = remainingMainDim / (node->children_count - 1); } else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) { @@ -363,7 +363,7 @@ void layoutNode(css_node_t *node) { float crossDim = 0; float mainPos = getPadding(node, leading[mainAxis]) + leadingMainDim; for (unsigned int i = 0; i < node->children_count; ++i) { - css_node_t *child = node->children[i]; + css_node_t* child = node->children[i]; child->layout.position[pos[mainAxis]] += mainPos; mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim; @@ -379,14 +379,14 @@ void layoutNode(css_node_t *node) { getPadding(node, trailing[crossAxis]); if (isUndefined(node->layout.dimensions[dim[mainAxis]]) && !mainDimInStyle) { - node->layout.dimensions[dim[mainAxis]] = fmaxf(mainPos, 0); + node->layout.dimensions[dim[mainAxis]] = mainPos > 0 ? mainPos : 0; } if (isUndefined(node->layout.dimensions[dim[crossAxis]])) { - node->layout.dimensions[dim[crossAxis]] = fmaxf(crossDim, 0); + node->layout.dimensions[dim[crossAxis]] = crossDim > 0 ? crossDim : 0; } for (unsigned int i = 0; i < node->children_count; ++i) { - css_node_t *child = node->children[i]; + css_node_t* child = node->children[i]; css_align_t alignItem = getAlignItem(node, child); float remainingCrossDim = node->layout.dimensions[dim[crossAxis]] - getDimWithMargin(child, crossAxis) - diff --git a/src/Layout.js b/src/Layout.js index 60dc3249..0ab9e083 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -8,6 +8,9 @@ function computeLayout(node) { top: 0, left: 0 }; + if (!node.style) { + node.style = {}; + } if (!node.children) { node.children = []; } @@ -140,127 +143,138 @@ function computeLayout(node) { var CSS_ALIGN_FLEX_END = 'flex-end'; var CSS_ALIGN_STRETCH = 'stretch'; - function layoutNode(node) { - var mainAxis = getFlexDirection(node); - var crossAxis = mainAxis == CSS_FLEX_DIRECTION_ROW ? - CSS_FLEX_DIRECTION_COLUMN : - CSS_FLEX_DIRECTION_ROW; +function layoutNode(node) { + var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node); + var/*css_flex_direction_t*/ crossAxis = mainAxis == CSS_FLEX_DIRECTION_ROW ? + CSS_FLEX_DIRECTION_COLUMN : + CSS_FLEX_DIRECTION_ROW; - var mainDimInStyle = isDimDefined(node, mainAxis); - if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) { - node.layout[dim[mainAxis]] = node.style[dim[mainAxis]]; - } - - var crossDimInStyle = isDimDefined(node, crossAxis); - if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) { - node.layout[dim[crossAxis]] = node.style[dim[crossAxis]]; - } - - var mainContentDim = 0; - var flexibleChildrenCount = 0; - for (var i = 0; i < node.children.length; ++i) { - var child = node.children[i]; - if (isUndefined(node.layout[dim[mainAxis]]) || !getFlex(child)) { - layoutNode(child); - mainContentDim += getDimWithMargin(child, mainAxis); - } else { - flexibleChildrenCount++; - } - }; - - var leadingMainDim = 0; - var betweenMainDim = 0; - if (!isUndefined(node.layout[dim[mainAxis]])) { - var remainingMainDim = node.layout[dim[mainAxis]] - - getPadding(node, leading[mainAxis]) - - getPadding(node, trailing[mainAxis]) - - mainContentDim; - - if (flexibleChildrenCount) { - var flexibleMainDim = remainingMainDim / flexibleChildrenCount; - for (var i = 0; i < node.children.length; ++i) { - var child = node.children[i]; - if (getFlex(child)) { - child.layout[dim[mainAxis]] = flexibleMainDim; - layoutNode(child); - } - } - } else { - var justifyContent = getJustifyContent(node); - if (justifyContent == CSS_JUSTIFY_FLEX_START) { - // Do nothing - } else if (justifyContent == CSS_JUSTIFY_CENTER) { - leadingMainDim = remainingMainDim / 2; - } else if (justifyContent == CSS_JUSTIFY_FLEX_END) { - leadingMainDim = remainingMainDim; - } else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) { - betweenMainDim = remainingMainDim / (node.children.length - 1); - } else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) { - betweenMainDim = remainingMainDim / node.children.length; - leadingMainDim = betweenMainDim / 2; - } - } - } - - var crossDim = 0; - var mainPos = getPadding(node, leading[mainAxis]) + leadingMainDim; - for (var i = 0; i < node.children.length; ++i) { - var child = node.children[i]; - child.layout[pos[mainAxis]] += mainPos; - mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim; - - if (!isUndefined(child.layout[dim[crossAxis]])) { - var childCrossDim = getDimWithMargin(child, crossAxis); - if (childCrossDim > crossDim) { - crossDim = childCrossDim; - } - } - } - mainPos += getPadding(node, trailing[mainAxis]); - crossDim += getPadding(node, leading[crossAxis]) + - getPadding(node, trailing[crossAxis]); - - if (isUndefined(node.layout[dim[mainAxis]]) && !mainDimInStyle) { - node.layout[dim[mainAxis]] = mainPos > 0 ? mainPos : 0; - } - if (isUndefined(node.layout[dim[crossAxis]])) { - node.layout[dim[crossAxis]] = crossDim > 0 ? crossDim : 0; - } - - for (var i = 0; i < node.children.length; ++i) { - var child = node.children[i]; - var alignItem = getAlignItem(node, child); - var remainingCrossDim = node.layout[dim[crossAxis]] - - getDimWithMargin(child, crossAxis) - - getPadding(node, leading[crossAxis]) - - getPadding(node, trailing[crossAxis]); - - var leadingCrossDim = getPadding(node, leading[crossAxis]); - if (alignItem == CSS_ALIGN_FLEX_START) { - // Do nothing - } else if (alignItem == CSS_ALIGN_CENTER) { - leadingCrossDim += remainingCrossDim / 2; - } else if (alignItem == CSS_ALIGN_FLEX_END) { - leadingCrossDim += remainingCrossDim; - } else if (alignItem == CSS_ALIGN_STRETCH) { - child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] - - getPadding(node, leading[crossAxis]) - - getPadding(node, trailing[crossAxis]) - - getMargin(child, leading[crossAxis]) - - getMargin(child, trailing[crossAxis]); - } - child.layout[pos[crossAxis]] += leadingCrossDim; - } - - node.layout[leading[mainAxis]] += getMargin(node, leading[mainAxis]) + - getRelativePosition(node, mainAxis); - node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) + - getRelativePosition(node, crossAxis); + var/*bool*/ mainDimInStyle = isDimDefined(node, mainAxis); + if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) { + node.layout[dim[mainAxis]] = node.style[dim[mainAxis]]; } - fillNodes(node); + var/*bool*/ crossDimInStyle = isDimDefined(node, crossAxis); + if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) { + node.layout[dim[crossAxis]] = node.style[dim[crossAxis]]; + } + var/*float*/ mainContentDim = 0; + var/*unsigned int*/ flexibleChildrenCount = 0; + for (var/*unsigned int*/ i = 0; i < node.children.length; ++i) { + var/*css_node_t**/ child = node.children[i]; + if (isUndefined(node.layout[dim[mainAxis]]) || !getFlex(child)) { + layoutNode(child); + mainContentDim += getDimWithMargin(child, mainAxis); + } else { + flexibleChildrenCount++; + } + } + + var/*float*/ leadingMainDim = 0; + var/*float*/ betweenMainDim = 0; + if (!isUndefined(node.layout[dim[mainAxis]])) { + var/*float*/ remainingMainDim = node.layout[dim[mainAxis]] - + getPadding(node, leading[mainAxis]) - + getPadding(node, trailing[mainAxis]) - + mainContentDim; + + if (flexibleChildrenCount) { + var/*float*/ flexibleMainDim = remainingMainDim / flexibleChildrenCount; + for (var/*unsigned int*/ i = 0; i < node.children.length; ++i) { + var/*css_node_t**/ child = node.children[i]; + if (getFlex(child)) { + child.layout[dim[mainAxis]] = flexibleMainDim; + layoutNode(child); + } + } + } else { + var/*css_justify_t*/ justifyContent = getJustifyContent(node); + if (justifyContent == CSS_JUSTIFY_FLEX_START) { + // Do nothing + } else if (justifyContent == CSS_JUSTIFY_CENTER) { + leadingMainDim = remainingMainDim / 2; + } else if (justifyContent == CSS_JUSTIFY_FLEX_END) { + leadingMainDim = remainingMainDim; + } else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) { + betweenMainDim = remainingMainDim / (node.children.length - 1); + } else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) { + betweenMainDim = remainingMainDim / node.children.length; + leadingMainDim = betweenMainDim / 2; + } + } + } + + var/*float*/ crossDim = 0; + var/*float*/ mainPos = getPadding(node, leading[mainAxis]) + leadingMainDim; + for (var/*unsigned int*/ i = 0; i < node.children.length; ++i) { + var/*css_node_t**/ child = node.children[i]; + child.layout[pos[mainAxis]] += mainPos; + mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim; + + if (!isUndefined(child.layout[dim[crossAxis]])) { + var/*float*/ childCrossDim = getDimWithMargin(child, crossAxis); + if (childCrossDim > crossDim) { + crossDim = childCrossDim; + } + } + } + mainPos += getPadding(node, trailing[mainAxis]); + crossDim += getPadding(node, leading[crossAxis]) + + getPadding(node, trailing[crossAxis]); + + if (isUndefined(node.layout[dim[mainAxis]]) && !mainDimInStyle) { + node.layout[dim[mainAxis]] = mainPos > 0 ? mainPos : 0; + } + if (isUndefined(node.layout[dim[crossAxis]])) { + node.layout[dim[crossAxis]] = crossDim > 0 ? crossDim : 0; + } + + for (var/*unsigned int*/ i = 0; i < node.children.length; ++i) { + var/*css_node_t**/ child = node.children[i]; + var/*css_align_t*/ alignItem = getAlignItem(node, child); + var/*float*/ remainingCrossDim = node.layout[dim[crossAxis]] - + getDimWithMargin(child, crossAxis) - + getPadding(node, leading[crossAxis]) - + getPadding(node, trailing[crossAxis]); + + var/*float*/ leadingCrossDim = getPadding(node, leading[crossAxis]); + if (alignItem == CSS_ALIGN_FLEX_START) { + // Do nothing + } else if (alignItem == CSS_ALIGN_CENTER) { + leadingCrossDim += remainingCrossDim / 2; + } else if (alignItem == CSS_ALIGN_FLEX_END) { + leadingCrossDim += remainingCrossDim; + } else if (alignItem == CSS_ALIGN_STRETCH) { + child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] - + getPadding(node, leading[crossAxis]) - + getPadding(node, trailing[crossAxis]) - + getMargin(child, leading[crossAxis]) - + getMargin(child, trailing[crossAxis]); + } + child.layout[pos[crossAxis]] += leadingCrossDim; + } + + node.layout[leading[mainAxis]] += getMargin(node, leading[mainAxis]) + + getRelativePosition(node, mainAxis); + node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) + + getRelativePosition(node, crossAxis); +} + + var c_code = layoutNode.toString() + .replace(/\.children\.length/g, '.children_count') + .replace(/layout\[dim/g, 'layout.dimensions[dim') + .replace(/layout\[pos/g, 'layout.position[pos') + .replace(/layout\[leading/g, 'layout.position[leading') + .replace(/style\[dim/g, 'style.dimensions[dim') + .replace(/node\./g, 'node->') + .replace(/child\./g, 'child->') + .replace(/var\/\*([^\/]+)\*\//g, '$1'); + console.log(c_code); + + fillNodes(node); layoutNode(node); return extractNodes(node); } +computeLayout({});