2014-03-30 17:12:38 -07:00
|
|
|
|
|
|
|
function computeLayout(node) {
|
2014-03-30 19:33:24 -07:00
|
|
|
|
2014-04-05 11:25:58 -07:00
|
|
|
function fillNodes(node) {
|
|
|
|
node.layout = {
|
|
|
|
width: undefined,
|
2014-04-05 22:23:00 -07:00
|
|
|
height: undefined,
|
|
|
|
top: 0,
|
|
|
|
left: 0
|
2014-04-05 11:25:58 -07:00
|
|
|
};
|
|
|
|
(node.children || []).forEach(fillNodes);
|
|
|
|
}
|
|
|
|
|
|
|
|
function extractNodes(node) {
|
|
|
|
var layout = node.layout;
|
|
|
|
delete node.layout;
|
|
|
|
if (node.children) {
|
|
|
|
layout.children = node.children.map(extractNodes);
|
|
|
|
}
|
|
|
|
return layout;
|
|
|
|
}
|
|
|
|
|
2014-03-30 19:51:14 -07:00
|
|
|
function getMargin(node) {
|
|
|
|
if ('margin' in node.style) {
|
|
|
|
return node.style.margin;
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
2014-03-31 11:09:33 -07:00
|
|
|
var pos = {
|
|
|
|
row: 'left',
|
|
|
|
column: 'top'
|
|
|
|
};
|
|
|
|
var dim = {
|
|
|
|
row: 'width',
|
|
|
|
column: 'height'
|
|
|
|
};
|
|
|
|
|
2014-04-05 12:33:12 -07:00
|
|
|
function layoutNode(node) {
|
2014-03-31 11:09:33 -07:00
|
|
|
var mainAxis = node.style.flexDirection === 'row' ? 'row' : 'column';
|
|
|
|
var crossAxis = mainAxis === 'row' ? 'column' : 'row';
|
|
|
|
|
2014-04-05 11:41:21 -07:00
|
|
|
var mainDimInStyle = dim[mainAxis] in node.style;
|
|
|
|
if (mainDimInStyle) {
|
|
|
|
node.layout[dim[mainAxis]] = node.style[dim[mainAxis]];
|
|
|
|
}
|
2014-04-05 11:25:58 -07:00
|
|
|
|
2014-04-05 22:23:00 -07:00
|
|
|
var fixedChildren = [];
|
|
|
|
var flexibleChildren = [];
|
|
|
|
var mainContentDim = 0;
|
2014-03-30 19:33:24 -07:00
|
|
|
(node.children || []).forEach(function(child) {
|
2014-04-05 22:23:00 -07:00
|
|
|
if (child.style.flex) {
|
|
|
|
flexibleChildren.push(child);
|
|
|
|
} else {
|
|
|
|
fixedChildren.push(child);
|
|
|
|
layoutNode(child);
|
|
|
|
mainContentDim += child.layout[dim[mainAxis]];
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var flexibleMainDim =
|
|
|
|
(node.layout[dim[mainAxis]] - mainContentDim) / flexibleChildren.length;
|
|
|
|
flexibleChildren.forEach(function(child) {
|
2014-04-05 12:33:12 -07:00
|
|
|
layoutNode(child);
|
2014-04-05 22:23:00 -07:00
|
|
|
child.layout[dim[mainAxis]] = flexibleMainDim;
|
|
|
|
});
|
2014-03-31 11:09:33 -07:00
|
|
|
|
2014-04-05 22:23:00 -07:00
|
|
|
var mainPos = 0;
|
|
|
|
var children = [];
|
|
|
|
(node.children || []).forEach(function(child) {
|
|
|
|
child.layout[pos[mainAxis]] += mainPos;
|
2014-04-05 11:25:58 -07:00
|
|
|
mainPos += child.layout[dim[mainAxis]] + 2 * getMargin(child);
|
2014-03-30 19:18:06 -07:00
|
|
|
});
|
|
|
|
|
2014-04-05 11:41:21 -07:00
|
|
|
if (!mainDimInStyle) {
|
|
|
|
node.layout[dim[mainAxis]] = mainPos;
|
|
|
|
}
|
|
|
|
node.layout[dim[crossAxis]] = node.style[dim[crossAxis]];
|
2014-04-05 12:33:12 -07:00
|
|
|
node.layout.top += getMargin(node);
|
|
|
|
node.layout.left += getMargin(node);
|
2014-03-30 19:18:06 -07:00
|
|
|
}
|
2014-03-30 19:33:24 -07:00
|
|
|
|
2014-04-05 11:25:58 -07:00
|
|
|
fillNodes(node);
|
2014-04-05 12:33:12 -07:00
|
|
|
node.layout.top = 0;
|
|
|
|
node.layout.left = 0;
|
|
|
|
|
|
|
|
layoutNode(node);
|
2014-04-05 11:25:58 -07:00
|
|
|
return extractNodes(node);
|
2014-03-30 17:12:38 -07:00
|
|
|
}
|
|
|
|
|