Top and left coordinates issue

[no-ponomarev]

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!

[IjzerenHein]

So let me start by repeating the answer I also gave by email:

As for your question. In order for a view to calculate the the positions of the added sub-view, you need to set the width and height of the view:

autolayoutView.setSize(500, 200); //width, height

And as for how the constraints are evaluated. AutoLayout uses mathematical equations, so it can be best viewed from that perspective.
When you want to align the left part of a view 10px from the left-part of the superview, you have to use -10 instead of 10.
I know it can be a bit confusing though, but the equation looks like this:

view_id.left = button_id.left - 10

which, when you want to solve "button_id.left", becomes:

button_id.left = view_id.left + 10

The full equation looks like this:

view1.attr1 = (view2.attr2 * multiplier) + constant

In order to experimentally understand how it works, it's best to use the Visual Format Editor:
https://rawgit.com/IjzerenHein/visualformat-editor/master/dist/index.html

There you can input VFL, and see what kind constraints it produces.

Hope that helps.

[IjzerenHein]

Hi, to be honest (I read your question 5 times already), but I'm having a hard understanding what you are trying to convey. Could you try to explain again (perhaps with a more elaborate example) what it is that you are trying to achieve?

[no-ponomarev]

Ok, the problem is in defining new position of widget due to constraints.
if we have: < rect key="frame" x="50" y="50" width="40" height="40" /> in storyboard widget.
and constraint: attr1: "left", view2: "button_id", attr2: "left", constant: 10.
The button should update it's position in that way (on screen there is 70 points shifting but actually it have to be 90):
< rect key="frame" x="10" y="100" width="50" height="40" />

So, that's the way I thought AutoLayout works, but the values, that It gives to me rather strange.

[IjzerenHein]

I still don't understand what you mean..

Could you perhaps just paste the storyboard file here so I can understand the subviews and constraints that you have?