I'm working on a project with a component that displays child sprites of
different sites and allows the user to arrange them. The sprites are all
rectangles of different sizes.
What I'm trying to do is create an auto-align which will crunch the
children down into the smallest possible arrangement.
I'm wondering if anyone has heard of or has some kind of logic that would
help with this. FYI, I'm not looking for a handout. I've already gone
through 2 different iterations of the logic and each has a bug once in a
Where I run into issues is when I have one really tall sprite and a bunch
of shorter ones. I get things aligned in a single row and then create
another row on top and start lining up the additional ones, but really what
should happen is I should have the larger sprite have a "rowspan" like you
can with html tables.
I've attached an illustration from the app. The top 2 images is start and
after the auto align. This works well when the sprites are about the same
size. The 2nd row is what happens with a taller sprite and much smaller
sprites, and finally below is what I would like to have happen but am
having issues getting there.