Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions doc/CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@ Change log
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## 10.1.1-dev (TBD)
* fix: [#2628](https://github.com/gridstack/gridstack.js/issues/2628) `removeAll()` does not trigger Angular's ngOnDestroy
* fix: [#2503](https://github.com/gridstack/gridstack.js/issues/2503) Drag and drop a widget on top of a locked widget - Thank you [JakubEleniuk](https://github.com/JakubEleniuk)
* fix: [#2584](https://github.com/gridstack/gridstack.js/issues/2584) wrong sort order during 1 column resize - Thank you [JakubEleniuk](https://github.com/JakubEleniuk) again.

## 10.1.1 (2024-03-03)
* fix: [#2620](https://github.com/gridstack/gridstack.js/pull/2620) allow resizing with sizeToContent:NUMBER is uses
Expand Down
7 changes: 3 additions & 4 deletions doc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ gridstack.js API
- [`update(el: GridStackElement, opts: GridStackWidget)`](#updateel-gridstackelement-opts-gridstackwidget)
- [`willItFit(x, y, width, height, autoPosition)`](#willitfitx-y-width-height-autoposition)
- [Utils](#utils)
- [`GridStack.Utils.sort(nodes[, dir[, width]])`](#gridstackutilssortnodes-dir-width)
- [`GridStack.Utils.sort(nodes[, dir])`](#gridstackutilssortnodes-dir)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

Expand Down Expand Up @@ -628,10 +628,9 @@ else {

## Utils

### `GridStack.Utils.sort(nodes[, dir[, width]])`
### `GridStack.Utils.sort(nodes[, dir])`

Sorts array of nodes

- `nodes` - array to sort
- `dir` - `1` for asc, `-1` for desc (optional)
- `width` - width of the grid. If `undefined` the width will be calculated automatically (optional).
- `dir` - `1` for ascending, `-1` for descending (optional)
10 changes: 5 additions & 5 deletions src/gridstack-engine.ts
Original file line number Diff line number Diff line change
Expand Up @@ -299,8 +299,8 @@ export class GridStackEngine {
public get float(): boolean { return this._float || false; }

/** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */
public sortNodes(dir: 1 | -1 = 1, column = this.column): GridStackEngine {
this.nodes = Utils.sort(this.nodes, dir, column);
public sortNodes(dir: 1 | -1 = 1): GridStackEngine {
this.nodes = Utils.sort(this.nodes, dir);
return this;
}

Expand Down Expand Up @@ -812,14 +812,14 @@ export class GridStackEngine {
// simpler shortcuts layouts
const doCompact = layout === 'compact' || layout === 'list';
if (doCompact) {
this.sortNodes(1, prevColumn); // sort with original layout once and only once (new column will affect order otherwise)
this.sortNodes(1); // sort with original layout once and only once (new column will affect order otherwise)
}

// cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data IFF we're sizing down (see below)
if (column < prevColumn) this.cacheLayout(this.nodes, prevColumn);
this.batchUpdate(); // do this EARLY as it will call saveInitial() so we can detect where we started for _dirty and collision
let newNodes: GridStackNode[] = [];
let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1); // current column reverse sorting so we can insert last to front (limit collision)

// see if we have cached previous layout IFF we are going up in size (restore) otherwise always
// generate next size down from where we are (looks more natural as you gradually size down).
Expand Down Expand Up @@ -891,7 +891,7 @@ export class GridStackEngine {
}

// finally re-layout them in reverse order (to get correct placement)
newNodes = Utils.sort(newNodes, -1, column);
newNodes = Utils.sort(newNodes, -1);
this._inColumnResize = true; // prevent cache update
this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout
newNodes.forEach(node => {
Expand Down
2 changes: 1 addition & 1 deletion src/gridstack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -701,7 +701,7 @@ export class GridStack {

// if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else keep widget order
const haveCoord = items.some(w => w.x !== undefined || w.y !== undefined);
if (haveCoord) items = Utils.sort(items, -1, column);
if (haveCoord) items = Utils.sort(items, -1);
this._insertNotAppend = haveCoord; // if we create in reverse order...

// if we're loading a layout into for example 1 column and items don't fit, make sure to save
Expand Down
11 changes: 5 additions & 6 deletions src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,14 +145,13 @@ export class Utils {
/**
* Sorts array of nodes
* @param nodes array to sort
* @param dir 1 for asc, -1 for desc (optional)
* @param column number of columns in the grid. If undefined columns will be calculated automatically (optional).
* @param dir 1 for ascending, -1 for descending (optional)
**/
static sort(nodes: GridStackNode[], dir: 1 | -1 = 1, column?: number): GridStackNode[] {
column = column || nodes.reduce((col, n) => Math.max(n.x + n.w, col), 0) || 12;
static sort(nodes: GridStackNode[], dir: 1 | -1 = 1): GridStackNode[] {
const und = 10000;
return nodes.sort((a, b) => {
let diffY = dir * (a.y - b.y);
if (diffY === 0) return dir * column * (a.x - b.x);
let diffY = dir * ((a.y ?? und) - (b.y ?? und));
if (diffY === 0) return dir * ((a.x ?? und) - (b.x ?? und));
return diffY;
});
}
Expand Down