Merge pull request gridstack#2643 from adumesny/master

adumesny · web-flow · commit c3f7648873c3 · 2024-03-29T16:10:54.000-07:00
sort() no longer takes column
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -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 
diff --git 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)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -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
@@ -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
@@ -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
@@ -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;
     });
   }
