Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated the public API to no-longer extract nodes #108

Merged
merged 1 commit into from
Aug 17, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why does it compute right and bottom?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"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