diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 8be1a295d..2f3f2e0f7 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -110,6 +110,8 @@ Change log ## 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 diff --git a/doc/README.md b/doc/README.md index 76a7f1b5c..58a82820d 100644 --- a/doc/README.md +++ b/doc/README.md @@ -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) @@ -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) diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index 882245c32..0dd224907 100644 --- a/src/gridstack-engine.ts +++ b/src/gridstack-engine.ts @@ -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; } @@ -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). @@ -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 => { diff --git a/src/gridstack.ts b/src/gridstack.ts index debfce223..b69879403 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -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 diff --git a/src/utils.ts b/src/utils.ts index b4be65eb4..476c18154 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -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; }); }