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;
}
});
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.
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)
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() {
grid.rsort("newSortName");
});
TouchClickEvent.listen(changeRepackSizeButton, function() {
grid.set("repackSize", 20|40|60|10000);
);
var grid = new Gridifier(targetGrid, {/* Pass sorts here, build custom version or use built-in sorts */});
grid.rsort('byAreaEvenly');
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("default");
grid.rsort("userfn"); // You can select it later by "userfn" name
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
// 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"});
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:
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')