Support AutoLayout/cassowary constraints

[IjzerenHein]

Add support for Apple-style Autolayout / cassowary constraints.
The support shall be implemented as a LayoutHelper function and is not part of the core.
Additionally, layout-literals can be used to set constraints using a visual language:
https://developer.apple.com/Library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html

var layoutController = new LayoutController({
  layout: {
    autoLayout: [
      'button(>=50)',
      '|-[find]-[findNext]-[findField(>=20)]-|'
    ]
  }.
  dataSource: ...
});

[markmarijnissen]

+1 this would be awesome!

[markmarijnissen]

I think this would really show the strength of what you've build here. (Unlike effects, which seem to complicate the core to me)

[kabriel]

+1 would love this!

[fractallian]

+1 this would be the best thing to happen to famo.us

[thomasfl]

Here's a javascript implementation of cassowary constraints. Doesn't use famo.us. Made from scratch.

https://github.com/iamralpht/slalom

[IjzerenHein]

Nice!

[IjzerenHein]

It would be great if someone else than me could make a start with this. I will support/help in any way I can.

[IjzerenHein]

+1

[IjzerenHein]

I've begun work on this feature. It will be supported on famo.us v0.3.x through famous-flex, and also on mixed mode.
It is still work in progress, but documentation should follow soon:
https://github.com/IjzerenHein/autolayout.js
https://rawgit.com/IjzerenHein/visualformat-editor/master/dist/index.html

Oh and star if you like :)

[IjzerenHein]

Hi guys, a quick note on this. I've been hard at work bringing autolayout and the visual format language to famo.us. Because the standard Visual Format Language prefers good notation over completeness of expressibility, I've had to create a extended visual format (EVFL) notation, which is a superset of VFL. It contains z-ordering, view stacking, and much more useful features you'll need doing layouts with famo.us.
You can read about it here: https://github.com/IjzerenHein/autolayout.js#extended-visual-format-language-evfl

I will be releasing this as part of famous-flex soon, but if you want to get started today, this is how you can do it:

• Include autolayout.js in your project

Include this function in your project:

var AutoLayout = require('autolayout.js');

function vflToLayout(visualFormat, options) {
    var view = new AutoLayout.View(options);
    try {
        var constraints = AutoLayout.VisualFormat.parse(visualFormat, {extended: true, strict: false});
        view.addConstraints(constraints);
        return function(context) {
            view.setSize(context.size[0], context.size[1]);
            var subView;
            for (var key in view.subViews) {
                if (key.indexOf('_') !== 0) {
                    subView = view.subViews[key];
                    context.set(subView.name, {
                        size: [subView.width, subView.height],
                        translate: [subView.left, subView.top, subView.zIndex * 5]
                    });
                }
            }
        };
    }
    catch (err) {
        console.log(err); //eslint-disable-line no-console
    }
}

You can now use the vfl with a LayoutController, like this:

var layoutController = new LayoutController({
    layout: vflToLayout([
       '|-[row:[child(==child2/2)]-[child2]]-|',
       'V:|-[row]-|'
    ]),
    ...
});

Or when you're using ES6, the back-tick symbol (template strings) makes it really easy to cut & paste layouts between the Visual Format Editor and your code:

var layoutController = new LayoutController({
    layout: vflToLayout(`
|-[row:[child(==child2/2)]-[child2]]-|
V:|-[row]-|
    `),
    ...
});

You can even decorate the VFL with meta info, which the Visual Format Editor then renders accordingly. This can be useful if you have lots of views, and colouring them or setting the shape makes it easier to edit.

//viewport aspect-ratio:3/1 max-height:300
//colors red:#FF0000 green:#00FF00 blue:#0000FF
//shapes red:circle green:circle blue:circle
H:|-[row:[red(green,blue)]-[green]-[blue]]-|
V:|[row]|

View this RGB example online

[IjzerenHein]

Hi, I've officially released autolayout for famo.us v0.3. Mixed mode integration will follow in the near future:
https://github.com/IjzerenHein/famous-autolayout

[mcbain]

+1 for the Famous Engine integration

[IjzerenHein]

I've got it up & running, should be real soon now.

[IjzerenHein]

Alright, mixed mode is now supported through the AutoLayoutController class :)
https://github.com/IjzerenHein/famous-autolayout

[peacechen]

This is terrific! Thanks for the great work Hein