constraint documentation is quite thin

[aspiers]

Some of the examples use various types of constraints but other than trawling through them there doesn't seem to be any way to find out all the different types available. So far I found:

• gap
• alignment

but are there others?

Also for alignment constraints it's not clear what the offset value means. Is it just the distance in pixels from the left (or top, depending on the axis of orientation)?

Thanks!

[tgdwyer]

A separation constraint is either an equality or inequality relation between a pair of x or y node (center) positions requiring them to be separated precisely (equality) or at least (inequality) by "gap".

An alignment specifies fixed separations between any number of node centers. An "offset" of zero will make all the nodes in the alignment be precisely aligned by their centers. Non-zero offsets can be specified to make nodes align by displacements from their centers. For example, to force a bunch of nodes of different widths to be aligned by their left-hand-sides, specify an offset for each node proportional to half its width.

Make sense?

I should improve this example to better document this!

[aspiers]

Thanks for the reply, and your explanation of offsets is useful and yes, it makes perfect sense. However the main point of this issue was to highlight the fact that there is no single place which a) lists all constraint types and b) explains how to use them all. I think that really needs to be on the wiki; examples are good, but they are not really sufficient by themselves. So I would suggest leaving this issue open until there is such a wiki page - but it's up to you of course. Thanks again!

[aspiers]

Also, it's not clear how to make a separation constraint based on equality. The only documentation I can find is near the bottom of the homepage which only covers inequality, and as I just posted in #60, I have no idea how the downward edges example works.

[tgdwyer]

regarding creating equality constraints, you create a constraint nodes[0].x + 30 = nodes[1].x like so:

{"axis":"x", "left":0, "right":1, "gap":30,"equality":"true"}

I agree, all this needs to be documented in the wiki. I'm absolutely swamped at the moment though, your questions and comments are much appreciated. Any chance you could make some notes about this stuff as you learn it in the wiki? Do you have access to create wiki pages? I'm happy to give you such access if you need it :-).

[aspiers]

Looks like I already have wiki access. I'm totally swamped too unfortunately however I'll certainly bear this in mind and although I'm having to take a break from my git-deps project for now, next time I'm messing with all this code hopefully I'll find a few spare minutes to add a wiki page. Let's leave this open until then - who knows, maybe someone else will come along and rescue us both ;-)

[aspiers]

Note: the wiki page will need to cover these points.

[aspiers]

I've created https://github.com/tgdwyer/WebCola/wiki/Constraints as a stub page for proper constraints documentation.

[aspiers]

I have now expanded the wiki page so it's reasonably comprehensive.

[tgdwyer]

you're a star! Thanks :-).

[codethief]

As a follow-up question: Can I also pass the node objects instead of their list indices when specifying constraints? E.g.

{"axis":"x", "left": nodeOnTheLeft, "right": nodeOnTheRight, "gap":30, "equality":"true"}

instead of

{"axis":"x", "left":0, "right":1, "gap":30, "equality":"true"}

If so, this should probably be documented as well.