Skip to content

Commit

Permalink
Updated the public API to no-longer extract nodes
Browse files Browse the repository at this point in the history
  • Loading branch information
ColinEberhardt committed Aug 13, 2015
1 parent 0de0186 commit f9bb74a
Show file tree
Hide file tree
Showing 9 changed files with 121 additions and 88 deletions.
68 changes: 57 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,68 @@ The JavaScript version has been implemented in a way that can be easily transpil
Usage
-----

A single function `computeLayout` is exposed and
A single function `computeLayout` is exposed that
- takes a tree of nodes: `{ style: { ... }, children: [ nodes ] }`
- returns a tree of rectangles: `{ width: ..., height: ..., top: ..., left: ..., children: [ rects ] }`
- computes the layout and writes it back to the node tree.

For example,

```javascript
computeLayout(
{style: {padding: 50}, children: [
{style: {padding: 10, alignSelf: 'stretch'}}
]}
);
// =>
{width: 120, height: 120, top: 0, left: 0, children: [
{width: 20, height: 20, top: 50, left: 50}
]}
// create an initial tree of nodes
var nodeTree = {
"style": {
"padding": 50
},
"children": [
{
"style": {
"padding": 10,
"alignSelf": "stretch"
}
}
]
};

// compute the layout
computeLayout(tree);

// the layout information is written back to the node tree, with
// each node now having a layout property:

// JSON.stringify(tree, null, 2);
{
"style": {
"padding": 50
},
"children": [
{
"style": {
"padding": 10,
"alignSelf": "stretch"
},
"layout": {
"width": 20,
"height": 20,
"top": 50,
"left": 50,
"right": 50,
"bottom": 50,
"direction": "ltr"
},
"children": [],
"lineIndex": 0
}
],
"layout": {
"width": 120,
"height": 120,
"top": 0,
"left": 0,
"right": 0,
"bottom": 0,
"direction": "ltr"
}
}
```

Supported Attributes
Expand Down
Binary file modified dist/css-layout.jar
Binary file not shown.
51 changes: 21 additions & 30 deletions dist/css-layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,42 +99,33 @@ var computeLayout = (function() {

return 0;
}

// When transpiled to Java / C the node type has layout, children and style
// properties. For the JavaScript version this function adds these properties
// if they don't already exist.
function fillNodes(node) {
node.layout = {
width: undefined,
height: undefined,
top: 0,
left: 0,
right: 0,
bottom: 0
};
if (!node.layout) {
node.layout = {
width: undefined,
height: undefined,
top: 0,
left: 0,
right: 0,
bottom: 0
};
}

if (!node.style) {
node.style = {};
}

if (!node.children || node.style.measure) {
if (!node.children) {
node.children = [];
}
node.children.forEach(fillNodes);
return node;
}

function extractNodes(node) {
var layout = node.layout;
delete node.layout;
if (node.children && node.children.length > 0) {
layout.children = node.children.map(extractNodes);
} else {
delete node.children;
}

delete layout.right;
delete layout.bottom;
delete layout.direction;

return layout;
}

function getPositiveSpacing(node, type, suffix, locations) {
for (var i = 0; i < locations.length; ++i) {
var location = locations[i];
Expand Down Expand Up @@ -1000,19 +991,19 @@ var computeLayout = (function() {

return {
computeLayout: layoutNode,
fillNodes: fillNodes,
extractNodes: extractNodes
fillNodes: fillNodes
};
})();

// This module export is only used for the purposes of unit testing this file. When
// the library is packaged this file is included within css-layout.js which forms
// the public API.
if (typeof exports === 'object') {
module.exports = computeLayout;
}

return function(node) {
node = computeLayout.fillNodes(node);
computeLayout.fillNodes(node);
computeLayout.computeLayout(node);
node = computeLayout.extractNodes(node);
return node;
};
}));
2 changes: 1 addition & 1 deletion dist/css-layout.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/css-layout.min.js.map

Large diffs are not rendered by default.

17 changes: 16 additions & 1 deletion src/Layout-test-utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,25 @@ var layoutTestUtils = (function() {

if (typeof computeLayout === 'object') {
var fillNodes = computeLayout.fillNodes;
var extractNodes = computeLayout.extractNodes;
var realComputeLayout = computeLayout.computeLayout;
}

function extractNodes(node) {
var layout = node.layout;
delete node.layout;
if (node.children && node.children.length > 0) {
layout.children = node.children.map(extractNodes);
} else {
delete node.children;
}

delete layout.right;
delete layout.bottom;
delete layout.direction;

return layout;
}

function roundLayout(layout) {
// Chrome rounds all the numbers with a precision of 1/64
// Reproduce the same behavior
Expand Down
Loading

0 comments on commit f9bb74a

Please sign in to comment.