Repack sorts

Repack sorts Api

What are repack sorts in Gridifier?

Repack sorts are functions, that are used to sort items based on items sizes opposite to usual sorts, that are used to sort items by some data criteria.

var grid = new Gridifier(demoGrid, {
    rsort: function(connections) {
        // Connections is array with all current visible items data, sorted by item positions.
        // Each record has x1,x2,y1,y2 coords available, so each item sizes/area can be calculated.

        // ... Sort connections array by some criteria

        // If you will write your own repack sorts, don't forget to never return 0
        // from sort comparator functions.(In most browsers sorts are unstable)
        return connections;

When repack sorts should be used?

Why gaps can appear if enabled sort dispersion setting uses all grid empty space?
By default Gridifier will place items in the order they are inserted. When items with different sizes are used, in some cases they can be placed in such way, that gaps appear between them, and there are no more items to fill those gaps. The only way to exclude gaps in such cases is to repack all items in some way based on their sizes after each item insert/reposition. This is use-case, when repack sorts are useful.

What is the difference between sorts and repack sorts?

Repack sorts demo grid:

by area(1 batch):


by area(n batches):


by area(ordered):



append 20
repack: all

Sorts switch notice.
Switching sorts in demo grid can still produce 'gaps' in some cases.(For example when all big items are inserted under big. In such case there are not enough small items to fill those 'gaps') Best sort in each case depends on inserted items sizes and order. Per this grid 'evenly' sort will work in best way.

Sorts switch differences.
Switching sorts actually can place items in different ways, depending on sort select order. Remember that grid is in enabled sortDispersion mode? So, items are binded to their positions instead their insert order. So, for example, "byAreaEvenly5-1" sort first collects all grid items and sort them in their position order(per defaultAppend from left top corner to right bottom grid corner), and only after that repack sort is applied to that sorted collection.(as described in next sections)

Slow inserts on big grids.
By default Gridifier is repacking all grid items after each insert operation. This can be overhead on big grids. So you can pass repackSize setting to control repacked items count in the end of the grid.(controlled by repack button in demo grid)

Repack sorts demo grid simplified example
demonstration of repack sorts usage in demo grid

var grid = new Gridifier(demoGrid, {
    // Repack sorts are working only with enabled sort dispersion
    sortDispersion: true,

    // In most cases you can select one from built-in sorts(Described in next chapters)
    rsort: "byAreaEvenly"

    // Without repackSize setting, Gridifier will repack all grid items according
    // to selected repack sort after each item insert operation.
    // repackSize param is related only to item repack after inserts.
    // (after drags/resizes all items are always resorted)
    // repackSize: 20

TouchClickEvent.listen(changeRetransformSortButton, function() {

TouchClickEvent.listen(changeRepackSizeButton, function() {
    grid.set("repackSize", 20|40|60|10000);

How to select/pass built-in/custom repack sort?

rsort = function(repackSortName)

var grid = new Gridifier(targetGrid, {/* Pass sorts here, build custom version or use built-in sorts */});
repack sort setting with function
new Gridifier(grid, {rsort: function(connections) { ... }})

var grid = new Gridifier(targetGrid, {
    // Sort also can be passed as single function
    // (Will be enabled by default and available with name "userfn")
    rsort: function(connections) { /* ... sort connections here */ return connections; }

grid.rsort("userfn"); // You can select it later by "userfn" name
repack sort setting with multiple functions(object)
new Gridifier(grid, {rsort: {selected: "firstSort", "firstSort": function(...) { ... }})

var grid = new Gridifier(targetGrid, {
    // Sort can be passed as object with function name/function pairs
    rsort: {
        // You can set initial used function with 'selected' param
        selected: "firstSort", // ('default' sort(disabled) will be enabled by default)

        firstSort: function(connections) { /* Sort connections here */ return connections; },
        secondSort: function(connections) { /* Sort connections here */ return connections; },
        // ... More functions

grid.rsort("secondSort"); // You can switch sorts later
repack sort setting from custom version(or built-in)
new Gridifier(grid, {rsort: "customSort"})

// Extend src/api/settings.js class and build custom version with Grunt
var Settings = function() {
    this._settings = {
        // ...
        rsort: {
            // Define your custom sort fn inside rsort object
            customSort: function(first, second, sort) {
                // return comparator result here
        // ...
var grid = new Gridifier(targetGrid, {rsort: "customSort"});

// Or use one of built-in repack sorts
var grid = new Gridifier(targetGrid, {rsort: "byAreaEvenly"});

How to control repacked items count on inserts?

By default, Gridifier will repack all grid items after each insert operation according to selected repack sort. This can be slow on grid with big items count. You can set custom repacked items count from the end of the grid:

repackSize setting
new Gridifier(grid, {repackSize: 20})
set("repackSize", newSize)

Built-in repack sorts

built-in repack sorts

how areaEvenly sortings are working?

  1. sort items - all items are sorted by their current positions depending on used appendType.
  2. calculate areas - area per each item is calculated.
  3. if batchSize equals 1 - split all items to single group.
  4. if batchSize not equals 1 - split all items to groups. Each group contains batchSize items.
  5. sort items - sort items evenly in each group.
  6. if bigItemsCount equals 1 - than items are sorted evenly by areas in each group.
  7. evenly - means 'take 1 item from group with biggest area, 1 item from group with smaller area, than 1 with biggest area, 1 with smaller, etc...' (while all groups are not empty)
  8. if bigItemsCount not equals 1 - than items are sorted evenly by areas in each group too.
  9. bigItemsCount - means that bigItemsCount items from group with biggest area is taken on every step.

Or shorter:

Parameters notice.
batchSize parameter can be especially useful, when you want to ensure that items don't repack too far away from their original position on resizes/drags. bigItemsCount is helpful in some cases, when small items count is not enough to fill all empty grid space.(more big items are packed 'together')

Sorted by area evenly repack sorts:

Other repack sorts:

next: Dragifiers prev: Sort dispersion