Merge pull request #108 from ColinEberhardt/api-update

Updated the public API to no-longer extract nodes

README.md

@@ -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

dist/css-layout.js

@@ -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];
@@ -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;
   };
 }));

src/Layout-test-utils.js

@@ -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

src/Layout.js

@@ -80,42 +80,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];
@@ -981,11 +972,13 @@ 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;
 }

src/__tests__/Layout-test.js

@@ -31,20 +31,10 @@ describe('Javascript Only', function() {
       ]}
     );
   });
-  it('should pull out just the layout object from root', function() {
-    testExtractNodes(
-      {layout: {width: undefined, height: undefined, top: 0, left: 0}},
-      {width: undefined, height: undefined, top: 0, left: 0}
-    );
-  });
-  it('should pull out just the layout object from root and children', function() {
-    testExtractNodes(
-      {layout: {width: undefined, height: undefined, top: 0, left: 0}, children: [
-        {layout: {width: undefined, height: undefined, top: 0, left: 0}}
-      ]},
-      {width: undefined, height: undefined, top: 0, left: 0, children: [
-        {width: undefined, height: undefined, top: 0, left: 0}
-      ]}
+  it('should not replace user-provided layout information', function() {
+    testFillNodes(
+      {layout: {width: 200}},
+      {layout: {width: 200}, style: {}, children: []}
     );
   });
 });

src/css-layout.js

@@ -20,9 +20,7 @@
     // @@include('./Layout.js')
 
     return function(node) {
-      node = computeLayout.fillNodes(node);
+      computeLayout.fillNodes(node);
       computeLayout.computeLayout(node);
-      node = computeLayout.extractNodes(node);
-      return node;
   };
 }));