center-out layout algorithm

[desandro]

@metafizzyco would packery work placing items outwards from the centre rather than from the top left? have you tried it (or seen it tried)?

– @noii

I've been thinking about this and I think I can pull it off.

Currently the algorithm works by sorting the available spaces by the closest to the top left corner. Switching corners is easy enough.

In order to support a layout where there's is a fixed point, and stuff is laid-out around it would work by sorting spaces based on their distance from the 'center point'.

[pyronaur]

+1 wants this

[Skaidon]

+1

[jide]

Would be so useful for one of my projets !

[alevals]

This would be great!
Any progress or idea on how to implement it ?

[thecoleorton]

+1

[jbravar]

+1

[loginx]

👍

[thecoleorton]

Any update on this? My attempts on doing something similar has created WAY too many edge cases...

Thanks in advance!

[desandro]

In the works.

Development is on the center-out-corner branch. It's in an experimental phase. While this is a neat visual demo, I'm unsure how practical its application is.

[jbravar]

For what it's worth, I came across this issue while developing a site where the designer wanted to have a layout with items expanding infinitely in every direction. Didn't end up implementing it that way, but I thought it was an interesting idea.

[dhowe]

Curious as to the status of this branch, and whether it will get integrated into Packery itself... ?

[desandro]

This branch is still an experiment and will likely continue to be so. It's a neat feature, but I don't think it has enough popularity to build into Packery.

[dhowe]

I see -- any reason why events would not work as usual on this branch?
(see issue #235)

[desandro]

The center-out-corner branch is experimental. Things are likely to break. Sorry, but I won't be able to devote time to look in to broken events.

[streiten]

+1

[pzelchenko]

Very nice, Desandro. Just what we are looking for. How painful would it be to make this hierarchical? This would be far more space-efficient than regular circle packing. (See D3 Bostock/Heer example with circle packing, at http://bl.ocks.org/mbostock/4063530.) I'm worried that what you'd end up with is a lot of space unless you had some fill flex in the parent as well as (perhaps) the possibility of a nonrectangular polygon as the parent. That's the only way to make it very space efficient.

[workmanw]

@desandro This actually works really great. I'm adopting this "center-out" algorithm implementation for a commercial product I'm working on. While we're not using packery code directly at the moment, I'm still buying an 8 pack of developer licenses to support the project. Thank you!