facebook / yoga

Yoga is an embeddable layout engine targeting web standards.

Yoga

Yoga is an embeddable and performant flexbox layout engine with bindings for multiple languages.

Building

Yoga's main implementation targets C++ 20 with accompanying build logic in CMake. A wrapper is provided to build the main library and run unit tests.

./unit_tests <Debug|Release>

While not required, this script will use ninja if it is installed for faster builds.

Yoga is additionally part of the vcpkg collection of ports maintained by Microsoft and community contributors. If the version is out of date, please create an issue or pull request on the vcpkg repository.

Adding Tests

Many of Yoga's tests are automatically generated, using HTML fixtures describing node structure. These are rendered in Chrome to generate an expected layout result for the tree. New fixtures can be added to gentest/fixtures.

<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
  <div style="width: 50px; height: 50px;"></div>
</div>

To generate new tests from added fixtures:

1. Ensure you have yarn classic installed.
2. Run yarn install to install dependencies for the test generator.
3. Run yarn gentest in the yoga directory.

Debugging

Yoga provides a VSCode "launch.json" configuration which allows debugging unit tests. Simply add your breakpoints, and run "Debug C++ Unit tests (lldb)" (or "Debug C++ Unit tests (vsdbg)" on Windows).

yoga's Issues

Document measure method

css-layout looks for a measure method on the node.style object. Can you please describe how this is used within the library and whether it is required?

Tests failing on Chrome OS X 40.0.2214.94 (64-bit)

101 specs, 3 failures, 5 pending specs
Spec List | Failures
Layout should layout text with flexDirection row
Expected {name: 'expected-dom', width: 200, height: 58, top: 0, left: 0, children: [{width: 200, height: 58, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 56, top: 0, left: 0, children: [{width: 200, height: 56, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]}.
Error: Expected {name: 'expected-dom', width: 200, height: 58, top: 0, left: 0, children: [{width: 200, height: 58, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 56, top: 0, left: 0, children: [{width: 200, height: 56, top: 0, left: 0, children: [{width: 172.421875, height: 16, top: 20, left: 20}]}]}.
    at stack (https://jasmine.github.io/2.0/lib/jasmine.js:1293:17)
    at buildExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:1270:14)
    at Spec.Env.expectationResultFactory (https://jasmine.github.io/2.0/lib/jasmine.js:484:18)
    at Spec.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:260:46)
    at Expectation.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:442:21)
    at Expectation.toEqual (https://jasmine.github.io/2.0/lib/jasmine.js:1209:12)
    at testNamedLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:248:8)
    at layoutTestUtils.testLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:387:7)
    at Object.<anonymous> (file:///Users/fabian/dev/css-layout/src/__tests__/Layout-test.js:895:56)
    at attemptSync (https://jasmine.github.io/2.0/lib/jasmine.js:1510:12)
Layout should layout with text and margin
Expected {name: 'expected-dom', width: 200, height: 76, top: 0, left: 0, children: [{width: 200, height: 76, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 72, top: 0, left: 0, children: [{width: 200, height: 72, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]}.
Error: Expected {name: 'expected-dom', width: 200, height: 76, top: 0, left: 0, children: [{width: 200, height: 76, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]} 
to equal {name: 'expected-dom', width: 200, height: 72, top: 0, left: 0, children: [{width: 200, height: 72, top: 0, left: 0, children: [{width: 160, height: 32, top: 20, left: 20}]}]}.
    at stack (https://jasmine.github.io/2.0/lib/jasmine.js:1293:17)
    at buildExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:1270:14)
    at Spec.Env.expectationResultFactory (https://jasmine.github.io/2.0/lib/jasmine.js:484:18)
    at Spec.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:260:46)
    at Expectation.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:442:21)
    at Expectation.toEqual (https://jasmine.github.io/2.0/lib/jasmine.js:1209:12)
    at testNamedLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:248:8)
    at layoutTestUtils.testLayout (file:///Users/fabian/dev/css-layout/src/Layout-test-utils.js:387:7)
    at Object.<anonymous> (file:///Users/fabian/dev/css-layout/src/__tests__/Layout-test.js:910:41)
    at attemptSync (https://jasmine.github.io/2.0/lib/jasmine.js:1510:12)
Layout tests consts keeps browser text measurements in sync with predefined consts
Expected {smallWidth: 34.671875, smallHeight: 18, bigWidth: 172.421875, bigHeight: 36, bigMinWidth: 100.453125} 
to equal {smallWidth: 34.671875, smallHeight: 16, bigWidth: 172.421875, bigHeight: 32, bigMinWidth: 100.453125}, 'Looks like browser has updated its text measurements functions. You need to update `preDefinedTextSizes` in Layout-test-utils.js'.
Error: Expected {smallWidth: 34.671875, smallHeight: 18, bigWidth: 172.421875, bigHeight: 36, bigMinWidth: 100.453125} 
to equal {smallWidth: 34.671875, smallHeight: 16, bigWidth: 172.421875, bigHeight: 32, bigMinWidth: 100.453125}, 'Looks like browser has updated its text measurements functions. You need to update `preDefinedTextSizes` in Layout-test-utils.js'.
    at stack (https://jasmine.github.io/2.0/lib/jasmine.js:1293:17)
    at buildExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:1270:14)
    at Spec.Env.expectationResultFactory (https://jasmine.github.io/2.0/lib/jasmine.js:484:18)
    at Spec.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:260:46)
    at Expectation.addExpectationResult (https://jasmine.github.io/2.0/lib/jasmine.js:442:21)
    at Expectation.toEqual (https://jasmine.github.io/2.0/lib/jasmine.js:1209:12)
    at Object.<anonymous> (file:///Users/fabian/dev/css-layout/src/__tests__/Layout-consts-test.js:16:33)
    at attemptSync (https://jasmine.github.io/2.0/lib/jasmine.js:1510:12)
    at QueueRunner.run (https://jasmine.github.io/2.0/lib/jasmine.js:1498:9)
    at QueueRunner.execute (https://jasmine.github.io/2.0/lib/jasmine.js:1485:10)
    at Spec.Env.queueRunnerFactory (https://jasmine.github.io/2.0/lib/jasmine.js:518:35)

flexStart is same as flexEnd

I noticed this while playing around with my live editor. Check this out: http://layout.jlongster.com/#node%2528%250A%2520%2520%257B%2520padding%253A%252050%252C%2520flexDirection%253A%2520%2527column%2527%2520%257D%252C%250A%2520%2520%2520node%2528%257B%2520padding%253A%252010%2520%257D%2529%252C%250A%2520%2520%2520node%2528%257B%2520padding%253A%252010%252C%2520alignSelf%253A%2520%2527flexStart%2527%2520%257D%2529%252C%250A%2520%2520%2520node%2528%257B%2520padding%253A%252010%252C%2520alignSelf%253A%2520%2527center%2527%2520%257D%2529%252C%250A%2520%2520%2520node%2528%257B%2520padding%253A%252010%252C%2520alignSelf%253A%2520%2527flexEnd%2527%2520%257D%2529%250A%2529

The elements with flexStart and flexEnd are the same. Shouldn't flexStart be all the way to the left, not the right?

Edit: if you want to see how I use the lib, see https://github.com/jlongster/live-css-layout/blob/master/static/js/render.js

Percentage widths support

This issue has been brought up before (#57) and has been closed, which I think should not be the case.

It's currently not possible to give an element a width of 50% without creating an empty dummy element next to it and assigning appropriate flexbox properties to both of them, which is of course a very weird solution. (http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid)

Also the lack of percentage support, makes it really hard to use proper media queries. Example:
You have 12 elements in a single container. On a small screen with you want to align them in 6 rows of 2 columns. On a bigger screen, you want them to align in 4 rows of 3 columns, using media queries.

Normally you'd like to give the elements a width of 50% in the first scenarios and 33.33% when the media query kicks in. This is not possible since we can only 'fake' percentage widths when we introduce a 'row container'. So in order to make the app responsive, we'd need to use Javascript to dynamically move the items around between the row containers, which is less than ideal.

Add C# version to the grunt build (and CI)

Currently the build does the following:

• Runs static code analysis on the JS code
• Runs the JS tests
• Transpiles to Java and runs tests
• Transpiles to C and runs tests
• Packages / bundles all of the above.

The CI runs all of the above too.

The C# code is very much absent from this process!

Example in readme does not run.

Running the example in the readme will result in "node.layout is undefined" error.

computeLayout(
  {style: {padding: 50}, children: [
    {style: {padding: 10, alignSelf: 'stretch'}}
  ]}
);

This doesn't occur in the tests because of the preprocessing the node goes through in the testing suite. Particularly in the computeCSSLayout function.

I'm not sure if this is the expected behavior for the library or if the preprocessing should be moved internally, but either way the readme example should change to reflect this.

Dead code

dead code in Layout.c at line 1121
eq(layout->last_direction, direction);

Update npm package

Looks like I might finally get some time to work on my project using css-layout. And of course I can clone it to use the updated js api. But, it would be nice if the npm package was updated.

Thanks for the awesome work on react and this library.

Padding on parent container interacting strangely with absolute positioned child

Original issue: facebook/react-native#4240 (comment)

You can see it in action here: https://rnplay.org/apps/gtEDqA

Notice that the child view with the light-blue background is being given a width equal to screen width minus 2x the padding. Seems related to #74, but changing the parent container to absolute positioning doesn't fix it.

Labels and image views baseline alignment support

Hi all,

Flexbox natively supports baseline alignment, but it seems like react-native has not implemented this yet.
I suppose that it would be awesome if css-layout could offer controls like labels or image views to work with baseline mode. Plus, the native auto layout tech supports baseline alignment too.

Many thanks. I appreciate all you excellent work.

measure should be on node, not style.

The measure callback seems to be designed for text, but the text is stored in the node itself not in the style of a node, which means to use the node.style.measure callback you need to create a new closure for every node that reflects back to the node's value.

node.style.measure = function(width) {
var text = node.textContent;
return measureText(text, width);
};

instead if the method was placed on node itself you wouldn't need a closure for every node which is better for memory usage and startup performance.

Node.prototype.measure = function(width) {
return measureText(this.textContent, width);
};

Centering

With flexbox, what is the way to create a header layout like found in a navigation bar? E.g, [< Navigation Title ], where inside the container there is a back button followed by a centered title. I assume that the container would be set to align:items:center and justify-content: center and the back arrow would be set to align-self: flex-start. This is not working for me, I have to make the back button position set to absolute to get it work. Is there no way to make a single item always align to it's container center despite the size of it's siblings?

Polyfill

Is there potential for a flexbox polyfill for IE8 and IE9 (and IE10)?

extractNodes puts objects into slow mode

extractNodes calls delete on objects which puts them into slow mode in v8 and other JS engines. Specifically calling delete node.layout; and delete node.children; is bad.

It also adds a children property to the layout objects which means that the code inside the layout algorithm and the code outside are using two different "kinds" of objects in terms of what the JS engine thinks the types are.

It seems like if the layout algorithm wants to create a separate tree of objects it should do that during layout instead of trying to mutate the node tree after the layout. There's also no reason to try to "clean up" the children property if it's empty, just leave the empty arrays. It's better to make all the objects look consistent.

View not stretching vertically in column layout

@corbt said in facebook/react-native#2724 (comment)

I think I may have found a couple of inconsistencies that are related to my problem. I've created what I believe are equivalent layouts in React Native and HTML/CSS that appear to demonstrate different flexbox behavior. Am I just crazy or is this a bug?

HTML

JSFiddle here

React Native

<View style={{flexDirection: 'row', alignItems: 'stretch', width: 150}}>
  <View style={{backgroundColor: 'red'}}>
    <View style={{backgroundColor: 'green'}}>
      <Text style={{backgroundColor: 'purple', alignSelf: 'center'}}>
        Column 1
      </Text>
    </View>
  </View>
  <Text style={{backgroundColor: '#B2DBFF', height: 150}}>Column 2</Text>
</View>

Output on my Android device:

Differences

In React Native the intermediary green div doesn't expand to fill the column vertically, and the "Column 1" text is not centered vertically either. On my machine (OS X/Chrome 45) the HTML version does.

Different behavior for flex child in css-layout implementation

The following html and css: http://jsfiddle.net/mme911he/2/ when implemented via css-layout (layout.h) result in the "broken" div's height being reduced to zero. In other words, we see a red box on the web and a purple box in our c code. The bug seem to occur when a flex child (broken) is inside a flex container and that container's sibling has a fixed size. If we set the min height, the same as fixedChild, for the broken div, in the c code, the output is identical to the web version.

Here's the corresponding c-code:

        css_node_t *topNode = new_test_css_node();
        setNodeDimensions(topNode, OSView::GetFullScreenResolution());
        topNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN;       // defines main axis
        topNode->style.align_items = CSS_ALIGN_STRETCH;              // defines alignment along cross axis

            init_css_node_children(topNode, 1);
            css_node_t *rootNode = topNode->get_child(topNode->context, 0);
            rootNode->style.flex = 1.0f;
            rootNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN;       // defines main axis
            init_css_node_children(rootNode, 1);

                css_node_t *row = rootNode->get_child(rootNode->context, 0);
                row->style.flex_direction = CSS_FLEX_DIRECTION_ROW;       // defines main axis
                init_css_node_children(row, 2);

                    css_node_t *flexChild = row->get_child(row->context, 0);
                    flexChild->style.flex = 1.0f;
                    init_css_node_children(flexChild, 1);

                        css_node_t *broken = flexChild->get_child(flexChild->context, 0);
                        broken->style.flex = 1.0f;

                    css_node_t *fixedChild = row->get_child(row->context, 1);
                    fixedChild->style.dimensions[CSS_WIDTH] = 50;
                    fixedChild->style.dimensions[CSS_HEIGHT] = 50;

Here's the output from print_css_node (notice the 0 height child):

{layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 640, height: 1136, children: [
  {layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [
    {layout: {width: 640, height: 50, top: 0, left: 0}, flexDirection: 'row', alignItems: 'stretch', flex: 0, children: [
      {layout: {width: 590, height: 50, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [
        {layout: {width: 590, height: 0, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, },
      ]},
      {layout: {width: 50, height: 50, top: 0, left: 590}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 50, height: 50, },
    ]},
  ]},
]},

fillNodes overwrites the layout and children properties

If node already has a layout object it should leave it alone, this just means allocating new Rect like objects each time this is called even if layout has been done before.

Also if you define node.style.measure it clears the children property, but that's bad if the measure function wanted to be able to look at the children or call layout on them.

can css-layout use as a polyfill for flex 2012

for example,
display:flex is not fully supported on some device such as webview on android 4.1
can i use this as a polyfill on that device

Implement percentage- and em-based widths

Question: performance of reusing layout object.

I am writing a Mac app that use Layout.c wrapped in Obj-C with a React like component virtual rendering model. I am wondering how much performance is gained by reusing the same Layout object on subsequent layouts. I am trying to evaluate whether it's worth it to keep a stateful Layout.c backed object between renders or not. I notice there is logic in Layout.c that check dirty bits and previous dimensions and the like. Is the performance consideration substantial (e.g. akin to auto layout incremental calculations) or perhaps not worth it, compared to the ease of programming of not having to track adding, removing, renaming and updating of layout params on a stateful layout object? My own intuition is leaning towards keeping layout stateful.

How to make element display:none?

How to make element display:none?

Support for percentage width/height for cross-axis dimension?

Currently only pixels are supported for lengths (e.g., min-height, max-height, height).
While flex can be used to handle percentage-like calculations along the primary axis (see #57 #27), there's currently no way to do percentage-like calculations along the cross-axis. (Just align-items: stretch on the parent, which corresponds to width: 100% or height: 100% on the child.)

Would ya'll be open to a pull request adding percentage support?
If so, is there a writeup of the code architecture/algorithm beyond the source?

Children items are not vertically aligned properly when the height of the parent is undefined

Sample input:
{  
  style:{  
    flexDirection:"row"
  },
  children:[  
    {  
      style:{  
        width:100,
        flexDirection:"row"
      },
      children:[  
        {  
          style:{  
            width:20,
            height:20,
            alignSelf:"flex-end"
          }
        }
      ]
    },
    {  
      style:{  
        width:100,
        height:200
      }
    }
  ]
}

"flex-end" in the sample is not doing anything.

npm run pretest fails

There are currently a number of eslint issues

$ npm run pretest

> [email protected] pretest /Users/colineberhardt/Projects/css-layout
> ./node_modules/eslint/bin/eslint.js src


src/Layout-test-utils.js
  418:42  error  'navigator' is not defined                no-undef
  453:45  error  expectedLayout is defined but never used  no-unused-vars

src/__tests__/Layout-test.js
  2125:10  error  Trailing comma                           no-comma-dangle
  2140:10  error  Trailing comma                           no-comma-dangle
  2155:10  error  Trailing comma                           no-comma-dangle
  2198:42  error  Trailing comma                           no-comma-dangle
  2206:54  error  Trailing comma                           no-comma-dangle
  2333:18  error  Multiple spaces found before '{'         no-multi-spaces
  2334:18  error  Multiple spaces found before '{'         no-multi-spaces
  2335:18  error  Multiple spaces found before '{'         no-multi-spaces
  2336:18  error  Multiple spaces found before '{'         no-multi-spaces
  2337:18  error  Multiple spaces found before '{'         no-multi-spaces
  2338:18  error  Multiple spaces found before '{'         no-multi-spaces
  2339:18  error  Multiple spaces found before '{'         no-multi-spaces
  2340:18  error  Multiple spaces found before '{'         no-multi-spaces
  2341:18  error  Multiple spaces found before '{'         no-multi-spaces
  2342:18  error  Multiple spaces found before '{'         no-multi-spaces
  2347:62  error  Trailing comma                           no-comma-dangle
  2348:8   error  Trailing comma                           no-comma-dangle
  2350:50  error  Multiple spaces found before 'children'  no-multi-spaces
  2376:20  error  Multiple spaces found before '{'         no-multi-spaces
  2377:20  error  Multiple spaces found before '{'         no-multi-spaces
  2378:20  error  Multiple spaces found before '{'         no-multi-spaces
  2379:20  error  Multiple spaces found before '{'         no-multi-spaces
  2380:20  error  Multiple spaces found before '{'         no-multi-spaces
  2381:20  error  Multiple spaces found before '{'         no-multi-spaces
  2382:20  error  Multiple spaces found before '{'         no-multi-spaces
  2383:20  error  Multiple spaces found before '{'         no-multi-spaces
  2384:20  error  Multiple spaces found before '{'         no-multi-spaces
  2385:20  error  Multiple spaces found before '{'         no-multi-spaces
  2390:64  error  Trailing comma                           no-comma-dangle
  2391:10  error  Trailing comma                           no-comma-dangle

src/transpile.js
   23:37  error    node is defined but never used    no-unused-vars
  277:29  warning  Multiple spaces found before '+'  no-multi-spaces
  278:29  warning  Multiple spaces found before '+'  no-multi-spaces
  279:29  warning  Multiple spaces found before '+'  no-multi-spaces
  280:29  warning  Multiple spaces found before '+'  no-multi-spaces
  282:29  warning  Multiple spaces found before '+'  no-multi-spaces
  283:29  warning  Multiple spaces found before '+'  no-multi-spaces

✖ 39 problems (33 errors, 6 warnings)

And linting / hinting should probably be added to the build. I'll have a look at this alongside #101

npm release

Last npm release was in September, but some changes have happened since then. Can someone release a new version to npm? Thanks!

This test don't do what it says

https://github.com/facebook/css-layout/blob/master/src/__tests__/Layout-test.js#L326-L331

Maybe change it to should layout empty view to center? 😸

how to run java version

import into java project ,but error with :the import javax.annotation.Nullable cannot be resolved, The import com.facebook.infer cannot be resolved

Publish to npm

You have a beautiful package.json, but it seems like css-layout is not in the npm registry registry.

Could you publish this to npm, please?

Incorrect implementation of the UMD pattern for browser clients

Currently main.js and Layout.js implement the UMD pattern based on this variant:

https://github.com/umdjs/umd/blob/master/returnExports.js

However, both implementations have the following lines:

// Browser globals (root is window)
root.returnExports = factory(); 

This means that in the absence of an AMD or CommonJS environment, the module will be added as a returnExports function on the window object.

When using UMD this property name should be edited!

Contents stop respecting parent's top

I've made a small renderer for turning the generated boxes into an SVG image, and it seems that children within one of my elements keep being positioned relative to the top of the image, rather than the top of their parent.

Specifically, in my example, the content element's children keep being positioned relative to the top. Their width and height seem to be working properly, but the top and left aren't.

I've tried fiddling with the style extensively: removing the flex from them content and setting a height on the children, removing the elements beside content, changing the flexDirection, and it keeps happening.

The weird part is that the header element seems to be working properly.

Any idea what might be up? Is my input just malformed, or is this a bug?

(You can change the JSON in the textarea and click update to re-render)

Style checks force code to go polymorphic or worse

width/height/top/left use isDimDefined and isPosDefined which checks for undefined. margin and padding properties use the "in" operator which isn't fast and also means you need to totally omit those properties from your object if you want them to have "no value" for layout.

ex.

if (pos in node.style) {
    return node.style[pos];
}
return 0;

should just be return node.style[pos] || 0;

For getSpacing it should do:

return node.style[key] || node.style[type + suffix] || 0;

This means your style object can have that property all the time and just use the value undefined to get the default. The current code forces you to have many different "types" of Style objects which makes v8 and other JS engines go slow.

Does this handle text?

The example in the JSFiddle seems to imply that <Text> tags automatically size based on their content, but I don't see text content being mentioned in the supported attributes

Could you clarify how this library should be used when the size of the text content is not known in advance?

Nested children bug?

Look at this: http://layout.jlongster.com/#node%2528%250A%2520%2520%257B%2520padding%253A%252050%252C%2520flexDirection%253A%2520%2527column%2527%2520%257D%252C%250A%2520%2520%2520node%2528%257B%2520padding%253A%252010%2520%257D%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520node%2528%257B%2520padding%253A%252010%2520%257D%2529%2529%250A%2529

The boxes should be nested, not outside of each other, right?

Current NPM installation fails due wrong package.json reference

The package.json references "main": "src/main.js",- this file does not exists (anymore), thus an npm install will fail. I changed the reference to "main": "dist/css-layout.js", then it works.

How to debug or log in javascript test?

Or is it possible to provide a standalone html based test driver, so as to eliminate the steep learning curve?

Tests are failing on firefox 31.3.0

To reproduce: open RunLayoutTests.html in firefox.

add another properities

This project implements a subset of CSS ，can add another properities

version

the css-layout Supports cross-platform ? including anrdoid and ios ?

Create a release process

This has turned into a really popular library, which I have seen used in a number of interesting ways - 👍 - however, it currently seems to lack a release process.

I am interested in this because I am contributor to a library, http://d3fc.io/, which depends on css-layout. As a result, I am primarily interested in the JavaScript version of css-layout.

I'd really like to give our users options for obtaining dependencies (d3 and css-layout) other than npm, simply because there will be many front-end devs who do not use npm.

What I'd really love to see is the following:

• minified JavaScript files
• more frequent releases to npm
• GitHub releases with associated source-code
• the JavaScript code available via CDNJS

Minification could be achieved by adding a very simple grunt build (you already have test and pre-tests steps in package.json, having them in grunt would be cleaner in my opinion).

The release process could all be managed via travis, see our deploy configuration here:

https://github.com/ScottLogic/d3fc/blob/master/.travis.yml

See: d3fc/d3fc#467

QUESTION: Are the tests in C redundant?

Just a quick question, the tests in 'C' look like they are all transpiled from the JS tests. Would it be OK if these were removed if the JavaScript tests were run through Travis instead?

I'm just looking to simplify things as much as possible :-)

CSS Grids: Is there any interest in integrating a grid implementation?

Hi,

I'm the maintainer of the CSS Grid Polyfill https://github.com/FremyCompany/css-grid-polyfill/blob/master/src/css-grid/lib/grid-layout.js and I think your probject is awesome. I was wondering whether you would be interested to incorporate a css grid implementation in your project.

My implementation is independent of the fact it polyfills real CSS+DOM as the layout is performed on pure JS objects (which are imported from the DOM, and then exported to it), which is a good thing given your layout system doesn't use a similar DOM.

However, to the contrary of css flexbox (which you implemented), the syntax for defining css grids is rather complex and requires some kind of parser. If we want to avoid a dependency on a real css parser, a new (more JS-like) input format will have to be defined; it would be different (but could be similar) to how grids are defined in CSS (and it would require some work).

My questions for you are thus the following ones: Would you be interested by integrating css grid layout into your project? Is that matching your current interests at the moment? Given the code will require customizations to adapt to your needs, are you ready to spend some time defining with me the specifications of the input/output interfaces you would prefer, and possibly spend some time implementing or testing those interfaces with me?

Best regards,
François

constraint solver

Have you guys though of building in a constraint solver? I believe this is how Apple does layout. This way you can do things like set two elements equidistant from the center, or set the distance between to items. I think this would really take the web to the next level.

https://www.npmjs.com/package/cassowary

Percentage widths and heights

Hi, this is an awesome library and I wrapped it easily in Objective-C and am loving the easy layout. One thing I ran into today, my third day with the lib, was how to update the bounding box of a layout when it's used in a different situation since the library doesn't support percentage based widths? E.g, an orientation change. How to specify that a layout should fill it's container at 100%? Is there a simple heuristic you all use in React Native or elsewhere for this? I assume I can recurse into the layout and update the widths and heights manually as I need but just want to make sure that I get your official position before I think about this too much.

How does it fit into React?

Any exmaples by now? I don't think such grammar is easy to be used in React:

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}
]}

default for flexDirection is CSS_FLEX_DIRECTION_COLUMN in layout.c, but in real CSS it is CSS_FLEX_DIRECTION_ROW

fillNodes should be an optional step

The current public JS API adapts computeLayout to add a fillNodes step, which tramples over any existing layout properties, see #62

I think the public API should make this optional ...

computeLayout(..., false); // fillNodes turned off

Currently within d3fc we do not use the adapted version of the API.

Integratation with React

The API requires passing a node tree but walking React component tree doesn't give you what you need to pass to this API in one go . Walking through a component's _renderedChildren gives you the nodebut not the props.style, walking through props.children gives you props.style but not node.

Supporting Browser?

Hi, what browsers is this intended to support?

must run examples in Chrome

From the readme:

For the JS tests: Open RunLayoutTests.html and RunLayoutRandomTests.html in Chrome

I'm curious, why do the examples/tests depend on one browser?

The children items are not vertically 'stretched' properly when the height of the parent is defined.

The children items are not vertically 'stretched' properly when the height of the parent is defined.

in Chrome

in React Native

Sample HTML used in Chrome

<style>
/*=== Normalize ========================================================*/
* { margin: 0; padding: 0; border: none; outline: none; }
* {
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
}
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body, button, input, select, textarea {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #111;
}
html, body { height: 100%; width: 100%; margin: 0; }

/*=== Flex box everywhere ==============================================*/
div, span {
  background-color: #fff;

  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;

  border: 0 solid black;
  margin: 0;
  padding: 0;
}

/*=== Our Styles =======================================================*/
.container {
  background-color: #333333;
  width: 300px;
  height: 300px;
  flex-direction: row;
  flex-wrap: wrap;
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
}
</style>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>