Arranging objects is a simple, but boring and very repetitive task. Usually, most of the view’s code is about alignment and positioning of objects on the screen.

Thinking of a way to avoid this repetition I've been coding Arrange for a long time.

We also have a great redesign made by cassiozen

At the beginning Arrange was a static class but after the last year I realize that the most times I called Arrange twice at least, and after some benchmarks I remade it completely because a lot of math and loops could be avoided using instances instead of static.

It’s very simple with only one objective: arrange things on the screen!

Arrange works in a very simple and straight way. The very first item in the given list (Array or Vector) will be anchor for the others, so the anchor never changes the position.

Example: if you have this list [obj1,obj2,obj3] and call toBottom, it will place obj2 under obj1 and obj3 under obj2. This is how it works for all methods!

Before:

Arrange.byRight([sprite1,sprite2,...spriteN])
Arrange.toBottom([sprite1,sprite2,...spriteN])

After

place([sprite1,sprite2,...spriteN]).toRight().toBottom();

I kept all methods and special properties in this version, just the API is a bit different and beauty :D

• toLeft
• byLeft
• toRight
• byRight
• toTop
• byTop
• toBottom
• byBottom
• center (wrapper centerX and centerY)
• centerX
• centerY
• round (rounds x and y)
• vGrid (creates a vertical grid)
• hGrid (creates an horizontal grid)
• byDepth
• simulate (see above)
• chain (see above)

Every method accepts an ArrangeProperties object (or any object with allowed properties ArrangeProperties.ALLOWED_PROPERTIES)

place( [sp1,sp2,spN] ).toRight( {padding_x:10} );

In this example the given list will be arranged placing every item to right side of the previous and adding a padding with 10px.

place( [sp1,sp2,spN] ).toRight( {step:0.5} );

In this example the given list will be arranged placing every item at the 50% of the "real" right side. If you have 2 objects with 50px (at 0,0 position) and call the method above, the second object will be placed at x=25 and not at x=50 as if you had called toRight without any step.

But if your object has a timeline in which the object's size changes during this time, you can also pass an optional object with width and height and the engine will ignore the real size and use the given one.

You have also some alias for this properties:

• padding_x = x = px = paddingX
• padding_y = y = py = paddingY
• width = w
• height = h
• step = steps

• You can also add/remove items after its creation

• Now we have a wrapper called place to create a new Arrange:
  

new Arrange([sprite1,sprite2,...spriteN]).toRight();
place([sprite1,sprite2,...spriteN]).toRight();

• Before, all grid method (horizontalGrid and verticalGrid) returned a Grid instance, now, following this new chain design, after calling these methods you can grab your grid instance at the grid property. Example:
  

var myGrid : Grid = place( array-with-stuff ).vGrid(3).grid;

• The simulate is a brand new feature for Arrange. Actually it was made after Rinaldi asked me a way of not changing the position but getting a list with the result if they had been arranged. After calling simulate the engine will stop changing the position and start "faking" it. You can get this simulation result at list property, and all objects will have a target and point which you can use to figure where to put it. You can also stop faking it by calling place(list).simulate(false). This is a great feature because you can use Arrange to know where you should place your objects and use your preferred tween engine to animate it. Let's see how does it work:

place(list).simulate().toRight().byTop().list.forEach( function(o:Object,...rest):void{
	Tweener.addTween(o.target,{x:o.point.x,y:o.point.y})
} );

• A new method called chain is a very cool feature. It grabs the last item in the current list and concatenates with the given parameter

place( [a,b] ).toRight({x:5}).chain([c,d]).toRight()

//This is the same as:

place( [a,b] ).toRight({x:5})
place( [b,c,d] ).toRight()

That's it! Happy coding!