Example in readme does not run. about yoga

[dashed]

This is how I run them 😄

var computeLayout = testLayout = require('./Layout.js');

// Utils -- ripped from tests

  if (typeof computeLayout === 'function') {
    var realComputeLayout = computeLayout;
  }

  function roundLayout(layout) {
    // Chrome rounds all the numbers with a precision of 1/64
    // Reproduce the same behavior
    function round(number) {
      var floored = Math.floor(number);
      var decimal = number - floored;
      if (decimal === 0) {
        return number;
      }
      var minDifference = Infinity;
      var minDecimal = Infinity;
      for (var i = 1; i < 64; ++i) {
        var roundedDecimal = i / 64;
        var difference = Math.abs(roundedDecimal - decimal);
        if (difference < minDifference) {
          minDifference = difference;
          minDecimal = roundedDecimal;
        }
      }
      return floored + minDecimal;
    }

    function rec(layout) {
      layout.top = round(layout.top);
      layout.left = round(layout.left);
      layout.width = round(layout.width);
      layout.height = round(layout.height);
      if (layout.children) {
        for (var i = 0; i < layout.children.length; ++i) {
          rec(layout.children[i]);
        }
      }
    }

    rec(layout);
    return layout;
  }

  function computeCSSLayout(rootNode) {
    function fillNodes(node) {
      node.layout = {
        width: undefined,
        height: undefined,
        top: 0,
        left: 0
      };
      if (!node.style) {
        node.style = {};
      }

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

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

    fillNodes(rootNode);
    realComputeLayout(rootNode);
    return roundLayout(extractNodes(rootNode));
  }

///////

var node = {
    style: {padding: 50},
    children: [{style: {padding: 10, alignSelf: 'stretch'}}]
};

var result = computeCSSLayout(node);

[vjeux]

Woops. We're not actually using the JS version anywhere so the code isn't in a very good shape. Wanna submit a pull request to make it cleaner?

[ColinEberhardt]

I was just about to raise exactly this issue! The computeLayout function relies on the nodes having a layout property. This is ensures within the tests as a result of the fillNodes function.

Personally I think the API would be better if computeLayout was a bit more flexible - adding the layout property if it is not already present.

[vjeux]

@ColinEberhardt: happy to take pull requests to improve the JS API. It's indeed not great in the current form

[ColinEberhardt]

@vjeux - I'll see what I can do :-)

By the way, I'm using code from this project to apply flexbox layout to SVG - it's great for creating chart layouts. You can see this in practice here:

http://www.scottlogic.com/blog/2015/02/02/svg-layout-flexbox.html

Thanks for making this open source.

[dashed]

There seems to be more missing pieces, like text sizing. At the moment these are hardcoded in tests, and rely on some iframe hack to get initial values.

[vjeux]

@dashed: in the test files there's a function that is able to measure text. Unfortunately, the browser support for that is pretty bad. You can either use canvas, but then you don't have line wrapping, or create a dom node yourself but it's pretty slow.

[vjeux]

@ColinEberhardt this is really exciting, thanks for letting me know :) I had no idea that anyone else would be using it to do interesting things

[1genius]

I would like to try and fix the bug?

[amirouche]

The layout will fail if a child miss "style" attribute cf. https://gist.github.com/amirouche/c756a6bb4de2aa95e958#file-app-js-L18

[fczuardi]

the workaround for now is to use @jimmyhmiller's fork that includes the fillNodes function in the library and exposes it, it would be better to also have the extractNodes from @dashed in there as well so that the result is consistent with what the README says the output will be…

So, here is what I am doing as a workaround for using css-layout in a javascript project:

$ npm uninstall css-layout
$ npm install -D jimmyhmiller/css-layout

Then, in the javascript:

var CSSLayout = require('css-layout'),
    computeLayout = CSSLayout.computeLayout,
    fillNodes = CSSLayout.fillNodes;

var rootNode = {
    style: {padding: 50},
    children: [
        {style: {padding: 10, alignSelf: 'stretch'}}
    ]
};

fillNodes(rootNode);
computeLayout(rootNode);

console.log(rootNode);

[jimmyhmiller]

My goal is to have my repo in a state where I can make a pull request this weekend. I'm hoping to have some time Sunday to work on it.

[pandeiro]

+1 @jimmyhmiller @dashed @ColinEberhardt

Glad I found this issue -- we'd like to use css-layout from clojurescript so a fix for easier use from JS is most welcome!

[jimmyhmiller]

Since my PR was merged this example now runs. @pandeiro let me know if there is anything you find you. I'm excited to see what everyone is building with this, got some ideas myself.

[dashed]

@jimmyhmiller Thanks for the refactor 👍

[amirouche]

was the PR merged?