diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index 61c1582e..b68e6d86 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -41,6 +41,7 @@ function computeDOMLayout(node) { transfer(div, node, 'marginRight', 'px'); transfer(div, node, 'flexDirection'); transfer(div, node, 'flex'); + transfer(div, node, 'justifyContent'); parent.appendChild(div); (node.children || []).forEach(function(child) { renderNode(div, child); @@ -254,7 +255,7 @@ describe('Layout', function() { }); }); - it('should layout node with targetted margin', function() { + it('should layout node with targeted margin', function() { testLayout({ style: {width: 1000, height: 1000, marginTop: 10, marginLeft: 5}, children: [ @@ -271,5 +272,85 @@ describe('Layout', function() { }); }); + it('should layout node with justifyContent: flex-start', function() { + testLayout({ + style: {width: 1000, height: 1000, justifyContent: 'flex-start'}, + children: [ + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}} + ] + }, { + width: 1000, height: 1000, top: 0, left: 0, + children: [ + {width: 100, height: 100, top: 0, left: 0}, + {width: 100, height: 100, top: 100, left: 0} + ] + }); + }); + + it('should layout node with justifyContent: flex-end', function() { + testLayout({ + style: {width: 1000, height: 1000, justifyContent: 'flex-end'}, + children: [ + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}} + ] + }, { + width: 1000, height: 1000, top: 0, left: 0, + children: [ + {width: 100, height: 100, top: 800, left: 0}, + {width: 100, height: 100, top: 900, left: 0} + ] + }); + }); + + it('should layout node with justifyContent: space-between', function() { + testLayout({ + style: {width: 1000, height: 1000, justifyContent: 'space-between'}, + children: [ + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}} + ] + }, { + width: 1000, height: 1000, top: 0, left: 0, + children: [ + {width: 100, height: 100, top: 0, left: 0}, + {width: 100, height: 100, top: 900, left: 0} + ] + }); + }); + + it('should layout node with justifyContent: space-around', function() { + testLayout({ + style: {width: 1000, height: 1000, justifyContent: 'space-around'}, + children: [ + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}} + ] + }, { + width: 1000, height: 1000, top: 0, left: 0, + children: [ + {width: 100, height: 100, top: 200, left: 0}, + {width: 100, height: 100, top: 700, left: 0} + ] + }); + }); + + it('should layout node with justifyContent: center', function() { + testLayout({ + style: {width: 1000, height: 1000, justifyContent: 'center'}, + children: [ + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}} + ] + }, { + width: 1000, height: 1000, top: 0, left: 0, + children: [ + {width: 100, height: 100, top: 400, left: 0}, + {width: 100, height: 100, top: 500, left: 0} + ] + }); + }); + }); diff --git a/src/Layout.js b/src/Layout.js index 0116bea8..1e45ae02 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -42,6 +42,13 @@ function computeLayout(node) { return 0; } + function getJustifyContent(node) { + if ('justifyContent' in node.style) { + return node.style.justifyContent; + } + return 'flex-start'; + } + var axis = { left: 'horizontal', right: 'horizontal', @@ -88,21 +95,40 @@ function computeLayout(node) { } }); - var flexibleMainDim = - (node.layout[dim[mainAxis]] - mainContentDim) / flexibleChildrenCount; - children.forEach(function(child) { - if (child.style.flex) { - child.layout[dim[mainAxis]] = flexibleMainDim; - layoutNode(child); + var remainingMainDim = node.layout[dim[mainAxis]] - mainContentDim; + var leadingMainDim = 0; + var betweenMainDim = 0; + if (flexibleChildrenCount) { + var flexibleMainDim = remainingMainDim / flexibleChildrenCount; + children.forEach(function(child) { + if (child.style.flex) { + child.layout[dim[mainAxis]] = flexibleMainDim; + layoutNode(child); + } + }); + } else { + var justifyContent = getJustifyContent(node); + if (justifyContent == 'flex-start') { + // Do nothing + } else if (justifyContent === 'flex-end') { + leadingMainDim = remainingMainDim; + } else if (justifyContent === 'center') { + leadingMainDim = remainingMainDim / 2; + } else if (justifyContent === 'space-between') { + betweenMainDim = remainingMainDim / (children.length - 1); + } else if (justifyContent === 'space-around') { + betweenMainDim = remainingMainDim / children.length; + leadingMainDim = betweenMainDim / 2; } - }); + } - var mainPos = 0; + var mainPos = leadingMainDim; children.forEach(function(child) { child.layout[pos[mainAxis]] += mainPos; mainPos += child.layout[dim[mainAxis]] + getMargin(leading[mainAxis], child) + - getMargin(trailing[mainAxis], child); + getMargin(trailing[mainAxis], child) + + betweenMainDim; }); if (node.layout[dim[mainAxis]] === undefined && !mainDimInStyle) {