ijzerenhein/autolayout.js

Apple's Auto Layout and Visual Format Language for javascript (using cassowary constraints)

autolayout.js's Issues

Test are failing on Safari 10.1

After the latest update to safari, tests are failing in the attribute section

Attributes on the left side in EVFL

Modifying constraints

Hiya - this really is an awesome library - thx for this.

Quick one - I see in the API docs that constraints can be added, however it looks like modifying / removing isn't a use case that's covered. Is this correct ?

If this is the case I'll try to wade through the code to see if I can figure out how to add this. I just thought I'd ask before hacking stuff since I'm lazy that way ;-P

How to manually set the Superview

I understand that the pipe character '|' is used to represent the superview. Is there a way to specify the superview in the EVFL.

I've tried many times using the live editor live editor but so far, no luck.

Some silly pseudo code to get my point across :)

HV:|~[parent(100)~|
[child]:superview=parent 
HV:|-(50)-[child]

In the above scenario, child would be 50px away from parent's 0,0.
Visually it'd have an X and Y that is 50px larger than parent, but in actual fact, it's X and Y would be 50, because it is a child of parent.

tl;dr How do I set the superview of a element.

Percentage constraints produces fractional extends

Applied to a size of e.g. 101 produces 50.5 as width for 'a'. Allow settings to force integer values only.

H:|-[a(==50%)]-[b]-|
V:|-[a(b),b]-|

Do you know slalom?

Is also about ui-constraints but taking a step further using it for animation too - quite impressive.

http://iamralpht.github.io/constraints/

Everything without famous.

Please Support Famous Engine

As the famous 0.3x is actuslly dead, please provide a version for famous engine.

How to do something like media queries and size breakpoints?

How can we change the layout at differing container sizes? f.e., maybe when window width is bigger than some value I want to have a different layout.

react-autolayout has something like this, see in the README example.

Is there something like this with AutoLayout.js?

Maybe switch to use slightlyoff/cassowary.js?!

Seems to be a replacement for the old version, claims to be very fast and future safe :)
https://github.com/slightlyoff/cassowary.js

idea: items outside of the layout.

It'd be neat if we could place items outside of a layout, anchored to the layout edge. f.e.

H:|-[inside]-|-[outside(inside)]

In that example, the outside object is laid outside the edge of the layout, with a default spacer, and same width as the inside object.

Fatality on iPhone 7

Hello,
I am using v0.7.0
applying the following lines below:

//spacing:2
V:|~[box]~|
H:|-(20)-[box(170)]~|
V:[box:-[r0(40)][r1(r0)][r2(r0)][r3(r0)][r4(r0)]-[r5(r0)][r6(70)]-[r7(r0)][r8(r6)]-]
H:[r1:-[x0]-[y0(x0)]-]
H:[r2:-[x1]-[y1(x1)]-]
H:[r3:-[x2]-[y2(x2)]-]
H:[r4:-[x3]-[y3(x3)]-]
H:[r6:[A][B(A)]]
H:[r8:[C][D(C)]]

on this editor :
https://rawgit.com/IjzerenHein/visualformat-editor/master/dist/index.html?vfl=example

result is :

so that is pretty fine, until I try it on iphone7 and my heart gets broken into little tiny pieces 💔

I tried many variances but it always threw these errors on iPhone7

1. Undefined is not an object (evaluating 'a.isResricted')
2. Undefined is not an object (evaluating 'a.hashCode' )
3. #21 (same issue same workaround so no problem)

So it could be either me writing it the wrong way or there is a bug in the library. or bitter truth both of us which is most likely to be happening.

Also, my vfl could be messed up, it will be much appreciated if you could tell me a better way of writing it as am not so vfl savvy

Thank you in advance,
keep the good work up 👍

idea: CSS units

I'm inching closer to circling back to this. It'd be neat to have CSS units.

But before this, I'd like to tackle 3D in #31.

Flow layout

Is it somehow possible to define a flow layout, i.e. define that view2 should be right to view1 but could potentially wrap if needed and place itself on the next row/column ?

Objective function is unbounded in optimize

I have currently passed by a weird bug in VFL and I think that it is not just something that I am doing wrong. The issue appears when I try to maintain aspect ratio of a subview and it gives me this error :
"Objective function is unbounded in optimize"

using vfl below :

let evf= [
    "H:|~[car(<=80%)]~|",
    "V:|~[car(<=50%)]~|",
    "H:|~[car(car.height*1.531)]~|",
    "V:|~[car(car.width/1.531)]~|"
] 

Applied to these 2 snippets :

Snippet 1: Throws an error

//Snippet 1 : Erroneous Code
let layoutView = new AutoLayout.View( {
            constraints: AutoLayout.VisualFormat.parse( evfl ,{extended: true}), 
            width : 2000,   //<--- it is 2000  here         
            height : 1400,          
            spacing: 0   
        });

Snippet 2: Works fine, no error

//Snippet 2 : Fine Code
let layoutView = new AutoLayout.View( {
            constraints: AutoLayout.VisualFormat.parse( evfl ,{extended: true}), 
            width : 1000,  // <--- it is 1000 now     
            height : 1400,          
            spacing: 0   
        });
//it even still works fine when I change its size later, to the latter width of 2000
layoutView.setSize(2000,1400)

I dont know if you use common libraries as with react-gss but they have same issue as well.
petehunt/react-gss#5

Thanks in advance

Any live examples?

I'm still curious about this auto layout stuff, it seems really cool. (I wonder why it hasn't been adopted so much though?).

Do you have any production examples online somewhere to take a look at (besides the ones in README)?

Example for nested stack view

Hey Hein,

Can you give an EVFL example for the Nested Stack View seen here?
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW1

convert constraint back to VFL

Autolayout.js creates constraints by parsing VFL. Is there any system that works the other way around? ie can generate VFL by analysing existing constraints?

How to set the subviews height to superviews width?

I think if I can use this like SnapKit?
and another question is how to set the subview's height equal superview's width
and subview's width equal superview's height?

Does autolayout.js support child views?

I read about View Stacks but I think the problem can be more complicated as just rows or stacks.. The easiest way to explain what I'm asking is to say that I'm looking for subViews on subViews, etc. I thought about trying to manage multiple views but this is problematic as the child view size might be determined by it's own constraints, the parents constraints or both so you'd want the solver to consider the entire page as one layout. Am I making sense, or missing something? Thanks.

Performance issue using View.parse

I've created a grid layout that looks something like this

V:|-[child1,child2,child3]-[child4]-|
H:|-[child1,child4]-[child2]-[child3]-|

I use View.parse to get the constraints and apply it to my view (I'm using React). Whenever I add a child I re-parse the VFL. With each child the performance degrades. It becomes unusable at around 30 elements.

Am I doing something wrong? Can I parse part of the VFL to obtain the constraints that I need? Any other suggestions are more than welcome.

Thanks

Is it possible to generate iOS autolayout code?

Hi, this js lib looks very interesting. Just a question, I'm wondering if iOS code can be generated, either swift for obj-c version. So that we can write a web application and generate views can be used in iOS app. Any thoughts about it?

Top and left coordinates issue

If you don`t mind, I repeat the question, that I wrote you by email and add some material!
I am working on a personal project related with iOS "Storyboard" design.
As a core layout system, I chose your AutoLayout.js library, because it is claimed as the Apple's algorithm which they use in Xcode and iOS applications.
However, the lack of examples makes it difficult to understand how to use it.

In particular the problem is: my program loads ".storyboard" file which has some widgets and constraints tags defined in View. Then I add constraints directly from storyboard to autolayout library in that way:

from:

constraint firstItem="first_id" firstAttribute="left" secondItem="button_id" secondAttribute="left" constant="10" id="constraint_id"

to:

autolayoutView.addConstraint({
view1: "view_id",
attr1: "left",
relation: "equ",
view2: "button_id",
attr2: "left",
constant: 10,
multiplier: 1
});

and then set the size of subView and View:

autolayoutView.setSize(600, 600);
autolayoutView.subViews.button_id.intrinsicWidth = 100;
autolayoutView.subViews.button_id.intrinsicHeight = 100;

So, after that the solver gives me some strange values:
bottom: 0 centerX: 40 centerY: -50 height: 100 intrinsicHeight: 100 intrinsicWidth: 100 left: -10 name: "child1" right: 90 top: -100 type: undefined width: 100 zIndex: 0

That's not the information that is useful for me, since the solver don't know anything about current position of an element in order for me to reposition them.
And it is not suitable for me to use VFL implementation.

The main problem, that I faced, that I can not re-position my widgets due to the lack of initial coordinates (top and left are similar to x and y). For example, if I have left button constraint to the parent view left with 10 value (like in constraint tag), then the position of the element will be the same, only left part will change from the current position to the position which has 10 margin from the parent view. Could this somehow be resolved?

Could you, please, explain, maybe I miss something? Thank you!! Your help would be great!

What are underscored subview names for?

I see a check in the Famous AutoLayoutController for

if ((key.indexOf('_') !== 0) && (subView.type !== 'stack')) {

(here)

Why does it check for the underscore? I don't see it in the docs. Maybe the data structure should have a more meaningful property like type for that purpose, instead of relying on a string prefix?

[Question] Method for nesting views into others

I'm trying to work out whether it is possible to add Views to SubViews in order to create a nested view structure, but I'm struggling to work out whether this is possible or if I would have to extend the library in some way to achieve this

I am looking to do this with code directly, not with VFL

3D layout

I'd like to extend this to 3D.

I see there's lines starting with Z to indicate z-index, but I suppose that isn't really depth.

I'd like to lay things out depth-wise too.

f.e. put items at opposite corners of the 3D layout:

H:|-[child1(child3)]-[child3]-|
V:|-[child1(child3)]-[child3]-|
D:|-[child1(child3)]-[child3]-|

where D is for depth. Or maybe we can extend Z for that, and set the Z size to work in that space.

But if we use Z, maybe X and Y could work in place of H and V, for consistency (and D as alias for Z).