diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index 9f369380..e96f7b15 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -24,17 +24,18 @@ var iframe = null; function computeDOMLayout(node) { var body = iframe.contentDocument.body; - function transferPx(div, node, name) { + function transfer(div, node, name, ext) { if (name in node.style) { - div.style[name] = node.style[name] + 'px'; + div.style[name] = node.style[name] + (ext || ''); } } function renderNode(parent, node) { var div = document.createElement('div'); - transferPx(div, node, 'width'); - transferPx(div, node, 'height'); - transferPx(div, node, 'margin'); + transfer(div, node, 'width', 'px'); + transfer(div, node, 'height', 'px'); + transfer(div, node, 'margin', 'px'); + transfer(div, node, 'flexDirection'); parent.appendChild(div); (node.children || []).forEach(function(child) { renderNode(div, child); @@ -161,5 +162,21 @@ describe('Layout', function() { ] }); }); + + it('should layout node with row flex direction', function() { + testLayout({ + style: {width: 1000, height: 1000, flexDirection: 'row'}, + children: [ + {style: {width: 100, height: 200}}, + {style: {width: 300, height: 150}} + ] + }, { + width: 1000, height: 1000, top: 0, left: 0, + children: [ + {width: 100, height: 200, top: 0, left: 0}, + {width: 300, height: 150, top: 0, left: 100} + ] + }); + }); }); diff --git a/src/Layout.js b/src/Layout.js index 9351bd9b..64a15906 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -8,22 +8,35 @@ function computeLayout(node) { return 0; } + var pos = { + row: 'left', + column: 'top' + }; + var dim = { + row: 'width', + column: 'height' + }; + function layoutNode(node, parent) { - var top = 0; + var mainAxis = node.style.flexDirection === 'row' ? 'row' : 'column'; + var crossAxis = mainAxis === 'row' ? 'column' : 'row'; + + var mainPos = 0; var children = []; (node.children || []).forEach(function(child) { - children.push(layoutNode(child, { - top: top, - left: 0 - })); - top += child.style.height + 2 * getMargin(child); + var offset = {}; + offset[pos[mainAxis]] = mainPos; + offset[pos[crossAxis]] = 0; + children.push(layoutNode(child, offset)); + + mainPos += child.style[dim[mainAxis]] + 2 * getMargin(child); }); var result = { width: node.style.width, height: node.style.height, - top: getMargin(node) + parent.top + 0, - left: getMargin(node) + parent.left + 0 + top: getMargin(node) + parent.top, + left: getMargin(node) + parent.left }; if (children.length > 0) {