IMPORTANT CHANGES

Arrange worked together with Grid all this time and I was not giving the proper importance to it. Grid is very good to manipulate bidimensional arrays and I've decided to keep it into a new git repository.

If you have the intention of cloning this repository keep in mind that the Grid package is not longer inside classses/redneck/grid but inside the submodule "submoldule-grid".

So, if you clone it and want to see what is inside you must do this:

• git clone git@github.com:hankpillow/arrange.git arrange
• cd arrange
• git submodule init
• git submodule update

Now all files are there and you can check everything out.

Once you just want to use it I rather recommend grabbing the swc/arrange.swc file which contains everything you need to use.

To see more about Grid click here.

To see more examples using Arrange click here.

Arrange

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!

What's is different:

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

Available methods:

• 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)
• fromGrid (uses the given Grid as data source)
• byDepth
• simulate (see above)
• chain (see above)

The ArrangeProperties

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.

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

What's new?

• 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!