diff --git a/src/Layout.js b/src/Layout.js index 0ab9e083..0c70280e 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -1,5 +1,5 @@ -function computeLayout(node) { +var computeLayout = (function() { function fillNodes(node) { node.layout = { @@ -143,138 +143,143 @@ function computeLayout(node) { var CSS_ALIGN_FLEX_END = 'flex-end'; var CSS_ALIGN_STRETCH = 'stretch'; -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; + 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/*bool*/ mainDimInStyle = isDimDefined(node, mainAxis); - if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) { - node.layout[dim[mainAxis]] = node.style[dim[mainAxis]]; - } - - 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/*bool*/ mainDimInStyle = isDimDefined(node, mainAxis); + if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) { + node.layout[dim[mainAxis]] = node.style[dim[mainAxis]]; } - } - 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; + var/*bool*/ crossDimInStyle = isDimDefined(node, crossAxis); + if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) { + node.layout[dim[crossAxis]] = node.style[dim[crossAxis]]; + } - 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); + 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; } } - } 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; + } } } - } - - 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]) - + mainPos += getPadding(node, trailing[mainAxis]); + crossDim += 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]); + if (isUndefined(node.layout[dim[mainAxis]]) && !mainDimInStyle) { + node.layout[dim[mainAxis]] = mainPos > 0 ? mainPos : 0; } - child.layout[pos[crossAxis]] += leadingCrossDim; + 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); } - node.layout[leading[mainAxis]] += getMargin(node, leading[mainAxis]) + - getRelativePosition(node, mainAxis); - node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) + - getRelativePosition(node, crossAxis); -} + var fn = function(node) { + fillNodes(node); + layoutNode(node); + return extractNodes(node); + }; + fn.layoutNode = layoutNode; + return fn; +})(); - 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); -} +var c_code = computeLayout.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') + .replace(/\n /g, '\n'); -computeLayout({}); +console.log(c_code);