diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index 9e1cce8b..61c1582e 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -35,6 +35,10 @@ function computeDOMLayout(node) { transfer(div, node, 'width', 'px'); transfer(div, node, 'height', 'px'); transfer(div, node, 'margin', 'px'); + transfer(div, node, 'marginLeft', 'px'); + transfer(div, node, 'marginTop', 'px'); + transfer(div, node, 'marginBottom', 'px'); + transfer(div, node, 'marginRight', 'px'); transfer(div, node, 'flexDirection'); transfer(div, node, 'flex'); parent.appendChild(div); @@ -249,5 +253,23 @@ describe('Layout', function() { }] }); }); + + it('should layout node with targetted margin', function() { + testLayout({ + style: {width: 1000, height: 1000, marginTop: 10, marginLeft: 5}, + children: [ + {style: {width: 100, height: 100, + marginTop: 50, marginLeft: 15, marginBottom: 20}}, + {style: {width: 100, height: 100, marginLeft: 30}} + ] + }, { + width: 1000, height: 1000, top: 10, left: 5, + children: [ + {width: 100, height: 100, top: 50, left: 15}, + {width: 100, height: 100, top: 170, left: 30} + ] + }); + }); + }); diff --git a/src/Layout.js b/src/Layout.js index c83eceb6..0116bea8 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -20,13 +20,42 @@ function computeLayout(node) { return layout; } - function getMargin(node) { + function capitalizeFirst(str) { + return str.charAt(0).toUpperCase() + str.slice(1); + } + + function getMargin(location, node) { + var key = 'margin' + capitalizeFirst(location); + if (key in node.style) { + return node.style[key]; + } + + key = 'margin' + capitalizeFirst(axis[location]); + if (key in node.style) { + return node.style[key]; + } + if ('margin' in node.style) { return node.style.margin; } + return 0; } + var axis = { + left: 'horizontal', + right: 'horizontal', + top: 'vertical', + bottom: 'vertical' + }; + var leading = { + row: 'left', + column: 'top' + }; + var trailing = { + row: 'right', + column: 'bottom' + }; var pos = { row: 'left', column: 'top' @@ -71,15 +100,17 @@ function computeLayout(node) { var mainPos = 0; children.forEach(function(child) { child.layout[pos[mainAxis]] += mainPos; - mainPos += child.layout[dim[mainAxis]] + 2 * getMargin(child); + mainPos += child.layout[dim[mainAxis]] + + getMargin(leading[mainAxis], child) + + getMargin(trailing[mainAxis], child); }); if (node.layout[dim[mainAxis]] === undefined && !mainDimInStyle) { node.layout[dim[mainAxis]] = mainPos; } node.layout[dim[crossAxis]] = node.style[dim[crossAxis]]; - node.layout.top += getMargin(node); - node.layout.left += getMargin(node); + node.layout[leading[mainAxis]] += getMargin(leading[mainAxis], node); + node.layout[leading[crossAxis]] += getMargin(leading[crossAxis], node); } fillNodes(node);