gridstack 8.2.3 → 8.4.0

package/dist/gridstack-engine.d.ts

@@ -1,8 +1,8 @@
 /**
- * gridstack-engine.ts 8.2.3
+ * gridstack-engine.ts 8.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-import { GridStackNode, GridStackPosition, GridStackMoveOpts, SaveFcn } from './types';
+import { GridStackNode, GridStackPosition, GridStackMoveOpts, SaveFcn, CompactOptions } from './types';
 /** callback to update the DOM attributes since this class is generic (no HTML or other info) for items that changed - see _notify() */
 type OnChangeCB = (nodes: GridStackNode[]) => void;
 /** options used during creation - similar to GridStackOptions */
@@ -27,7 +27,7 @@ export declare class GridStackEngine {
     removedNodes: GridStackNode[];
     batchMode: boolean;
     constructor(opts?: GridStackEngineOptions);
-    batchUpdate(flag?: boolean): GridStackEngine;
+    batchUpdate(flag?: boolean, doPack?: boolean): GridStackEngine;
     protected _useEntireRowArea(node: GridStackNode, nn: GridStackPosition): boolean;
     /** return the nodes that intercept the given node. Optionally a different area can be used, as well as a second node to skip */
     collide(skip: GridStackNode, area?: GridStackNode, skip2?: GridStackNode): GridStackNode;
@@ -40,14 +40,14 @@ export declare class GridStackEngine {
     /** called to possibly swap between 2 nodes (same size or column, not locked, touching), returning true if successful */
     swap(a: GridStackNode, b: GridStackNode): boolean;
     isAreaEmpty(x: number, y: number, w: number, h: number): boolean;
-    /** re-layout grid items to reclaim any empty space */
-    compact(): GridStackEngine;
+    /** re-layout grid items to reclaim any empty space - optionally keeping the sort order exactly the same ('list' mode) vs truly finding an empty spaces */
+    compact(layout?: CompactOptions, doSort?: boolean): GridStackEngine;
     /** enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html) */
     set float(val: boolean);
     /** float getter method */
     get float(): boolean;
     /** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */
-    sortNodes(dir?: -1 | 1): GridStackEngine;
+    sortNodes(dir?: 1 | -1, column?: number): GridStackEngine;
     /**
      * given a random node, makes sure it's coordinates/values are valid in the current grid
      * @param node to adjust
@@ -60,10 +60,11 @@ export declare class GridStackEngine {
     getDirtyNodes(verify?: boolean): GridStackNode[];
     /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
      * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+     * Optionally pass a widget to start search AFTER, meaning the order will remain the same but possibly have empty slots we skipped
      */
-    findEmptyPosition(node: GridStackNode, nodeList?: GridStackNode[], column?: number): boolean;
+    findEmptyPosition(node: GridStackNode, nodeList?: GridStackNode[], column?: number, after?: GridStackNode): boolean;
     /** call to add the given node to our list, fixing collision and re-packing */
-    addNode(node: GridStackNode, triggerAddEvent?: boolean): GridStackNode;
+    addNode(node: GridStackNode, triggerAddEvent?: boolean, after?: GridStackNode): GridStackNode;
     removeNode(node: GridStackNode, removeDOM?: boolean, triggerEvent?: boolean): GridStackEngine;
     removeAll(removeDOM?: boolean): GridStackEngine;
     /** checks if item can be moved (layout constrain) vs moveNode(), returning true if was able to move.

package/dist/gridstack-engine.js

@@ -1,5 +1,5 @@
 /**
- * gridstack-engine.ts 8.2.3
+ * gridstack-engine.ts 8.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 import { Utils } from './utils';
@@ -19,7 +19,7 @@ class GridStackEngine {
         this.nodes = opts.nodes || [];
         this.onChange = opts.onChange;
     }
-    batchUpdate(flag = true) {
+    batchUpdate(flag = true, doPack = true) {
         if (!!this.batchMode === flag)
             return this;
         this.batchMode = flag;
@@ -31,7 +31,9 @@ class GridStackEngine {
         else {
             this._float = this._prevFloat;
             delete this._prevFloat;
-            this._packNodes()._notify();
+            if (doPack)
+                this._packNodes();
+            this._notify();
         }
         return this;
     }
@@ -232,22 +234,34 @@ class GridStackEngine {
         let nn = { x: x || 0, y: y || 0, w: w || 1, h: h || 1 };
         return !this.collide(nn);
     }
-    /** re-layout grid items to reclaim any empty space */
-    compact() {
+    /** re-layout grid items to reclaim any empty space - optionally keeping the sort order exactly the same ('list' mode) vs truly finding an empty spaces */
+    compact(layout = 'compact', doSort = true) {
         if (this.nodes.length === 0)
             return this;
-        this.batchUpdate()
-            .sortNodes();
+        if (doSort)
+            this.sortNodes();
+        const wasBatch = this.batchMode;
+        if (!wasBatch)
+            this.batchUpdate();
+        const wasColumnResize = this._inColumnResize;
+        if (!wasColumnResize)
+            this._inColumnResize = true; // faster addNode()
         let copyNodes = this.nodes;
         this.nodes = []; // pretend we have no nodes to conflict layout to start with...
-        copyNodes.forEach(node => {
-            if (!node.locked) {
-                node.autoPosition = true;
+        copyNodes.forEach((n, index, list) => {
+            let after;
+            if (!n.locked) {
+                n.autoPosition = true;
+                if (layout === 'list' && index)
+                    after = list[index - 1];
             }
-            this.addNode(node, false); // 'false' for add event trigger
-            node._dirty = true; // will force attr update
+            this.addNode(n, false, after); // 'false' for add event trigger
         });
-        return this.batchUpdate(false);
+        if (!wasColumnResize)
+            delete this._inColumnResize;
+        if (!wasBatch)
+            this.batchUpdate(false);
+        return this;
     }
     /** enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html) */
     set float(val) {
@@ -261,8 +275,8 @@ class GridStackEngine {
     /** float getter method */
     get float() { return this._float || false; }
     /** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */
-    sortNodes(dir) {
-        this.nodes = Utils.sort(this.nodes, dir, this.column);
+    sortNodes(dir = 1, column = this.column) {
+        this.nodes = Utils.sort(this.nodes, dir, column);
         return this;
     }
     /** @internal called to top gravity pack the items back OR revert back to original Y positions when floating */
@@ -480,11 +494,12 @@ class GridStackEngine {
     }
     /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
      * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+     * Optionally pass a widget to start search AFTER, meaning the order will remain the same but possibly have empty slots we skipped
      */
-    findEmptyPosition(node, nodeList = this.nodes, column = this.column) {
-        nodeList = Utils.sort(nodeList, -1, column);
+    findEmptyPosition(node, nodeList = this.nodes, column = this.column, after) {
+        let start = after ? after.y * column + (after.x + after.w) : 0;
         let found = false;
-        for (let i = 0; !found; ++i) {
+        for (let i = start; !found; ++i) {
             let x = i % column;
             let y = Math.floor(i / column);
             if (x + node.w > column) {
@@ -492,6 +507,8 @@ class GridStackEngine {
             }
             let box = { x, y, w: node.w, h: node.h };
             if (!nodeList.find(n => Utils.isIntercepted(box, n))) {
+                if (node.x !== x || node.y !== y)
+                    node._dirty = true;
                 node.x = x;
                 node.y = y;
                 delete node.autoPosition;
@@ -501,7 +518,7 @@ class GridStackEngine {
         return found;
     }
     /** call to add the given node to our list, fixing collision and re-packing */
-    addNode(node, triggerAddEvent = false) {
+    addNode(node, triggerAddEvent = false, after) {
         let dup = this.nodes.find(n => n._id === node._id);
         if (dup)
             return dup; // prevent inserting twice! return it instead.
@@ -509,14 +526,17 @@ class GridStackEngine {
         node = this._inColumnResize ? this.nodeBoundFix(node) : this.prepareNode(node);
         delete node._temporaryRemoved;
         delete node._removeDOM;
-        if (node.autoPosition && this.findEmptyPosition(node)) {
+        let skipCollision;
+        if (node.autoPosition && this.findEmptyPosition(node, this.nodes, this.column, after)) {
             delete node.autoPosition; // found our slot
+            skipCollision = true;
         }
         this.nodes.push(node);
         if (triggerAddEvent) {
             this.addedNodes.push(node);
         }
-        this._fixCollisions(node);
+        if (!skipCollision)
+            this._fixCollisions(node);
         if (!this.batchMode) {
             this._packNodes()._notify();
         }
@@ -534,8 +554,10 @@ class GridStackEngine {
             node._removeDOM = true; // let CB remove actual HTML (used to set _id to null, but then we loose layout info)
         // don't use 'faster' .splice(findIndex(),1) in case node isn't in our list, or in multiple times.
         this.nodes = this.nodes.filter(n => n._id !== node._id);
-        return this._packNodes()
-            ._notify([node]);
+        if (!node._isAboutToRemove)
+            this._packNodes(); // if dragged out, no need to relayout as already done...
+        this._notify([node]);
+        return this;
     }
     removeAll(removeDOM = true) {
         delete this._layouts;
@@ -805,14 +827,20 @@ class GridStackEngine {
      * @param layout specify the type of re-layout that will happen (position, size, etc...).
      * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
      */
-    updateNodeWidths(prevColumn, column, nodes, layout = 'moveScale') {
+    columnChanged(prevColumn, column, nodes, layout = 'moveScale') {
         if (!this.nodes.length || !column || prevColumn === column)
             return this;
-        // cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data
-        this.cacheLayout(this.nodes, prevColumn);
+        // 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)
+        }
+        // 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 = [];
-        // if we're going to 1 column and using DOM order rather than default sorting, then generate that layout
+        // if we're going to 1 column and using DOM order (item passed in) rather than default sorting, then generate that layout
         let domOrder = false;
         if (column === 1 && nodes?.length) {
             domOrder = true;
@@ -827,13 +855,12 @@ class GridStackEngine {
             nodes = [];
         }
         else {
-            nodes = Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
+            nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // 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).
-        let cacheNodes = [];
-        if (column > prevColumn) {
-            cacheNodes = this._layouts[column] || [];
+        if (column > prevColumn && this._layouts) {
+            const cacheNodes = this._layouts[column] || [];
             // ...if not, start with the largest layout (if not already there) as down-scaling is more accurate
             // by pretending we came from that larger column by assigning those values as starting point
             let lastIndex = this._layouts.length - 1;
@@ -843,59 +870,71 @@ class GridStackEngine {
                     let n = nodes.find(n => n._id === cacheNode._id);
                     if (n) {
                         // still current, use cache info positions
-                        n.x = cacheNode.x;
-                        n.y = cacheNode.y;
+                        if (!doCompact) {
+                            n.x = cacheNode.x;
+                            n.y = cacheNode.y;
+                        }
                         n.w = cacheNode.w;
                     }
                 });
             }
+            // if we found cache re-use those nodes that are still current
+            cacheNodes.forEach(cacheNode => {
+                let j = nodes.findIndex(n => n._id === cacheNode._id);
+                if (j !== -1) {
+                    // still current, use cache info positions
+                    if (doCompact) {
+                        nodes[j].w = cacheNode.w; // only w is used, and don't trim the list
+                        return;
+                    }
+                    if (cacheNode.autoPosition || isNaN(cacheNode.x) || isNaN(cacheNode.y)) {
+                        this.findEmptyPosition(cacheNode, newNodes);
+                    }
+                    if (!cacheNode.autoPosition) {
+                        nodes[j].x = cacheNode.x;
+                        nodes[j].y = cacheNode.y;
+                        nodes[j].w = cacheNode.w;
+                        newNodes.push(nodes[j]);
+                    }
+                    nodes.splice(j, 1);
+                }
+            });
+        }
+        // much simpler layout that just compacts
+        if (doCompact) {
+            this.compact(layout, false);
         }
-        // if we found cache re-use those nodes that are still current
-        cacheNodes.forEach(cacheNode => {
-            let j = nodes.findIndex(n => n._id === cacheNode._id);
-            if (j !== -1) {
-                // still current, use cache info positions
-                if (cacheNode.autoPosition || isNaN(cacheNode.x) || isNaN(cacheNode.y)) {
-                    this.findEmptyPosition(cacheNode, newNodes);
+        else {
+            // ...and add any extra non-cached ones
+            if (nodes.length) {
+                if (typeof layout === 'function') {
+                    layout(column, prevColumn, newNodes, nodes);
                 }
-                if (!cacheNode.autoPosition) {
-                    nodes[j].x = cacheNode.x;
-                    nodes[j].y = cacheNode.y;
-                    nodes[j].w = cacheNode.w;
-                    newNodes.push(nodes[j]);
+                else if (!domOrder) {
+                    let ratio = (doCompact || layout === 'none') ? 1 : column / prevColumn;
+                    let move = (layout === 'move' || layout === 'moveScale');
+                    let scale = (layout === 'scale' || layout === 'moveScale');
+                    nodes.forEach(node => {
+                        // NOTE: x + w could be outside of the grid, but addNode() below will handle that
+                        node.x = (column === 1 ? 0 : (move ? Math.round(node.x * ratio) : Math.min(node.x, column - 1)));
+                        node.w = ((column === 1 || prevColumn === 1) ? 1 : scale ? (Math.round(node.w * ratio) || 1) : (Math.min(node.w, column)));
+                        newNodes.push(node);
+                    });
+                    nodes = [];
                 }
-                nodes.splice(j, 1);
-            }
-        });
-        // ...and add any extra non-cached ones
-        if (nodes.length) {
-            if (typeof layout === 'function') {
-                layout(column, prevColumn, newNodes, nodes);
-            }
-            else if (!domOrder) {
-                let ratio = column / prevColumn;
-                let move = (layout === 'move' || layout === 'moveScale');
-                let scale = (layout === 'scale' || layout === 'moveScale');
-                nodes.forEach(node => {
-                    // NOTE: x + w could be outside of the grid, but addNode() below will handle that
-                    node.x = (column === 1 ? 0 : (move ? Math.round(node.x * ratio) : Math.min(node.x, column - 1)));
-                    node.w = ((column === 1 || prevColumn === 1) ? 1 :
-                        scale ? (Math.round(node.w * ratio) || 1) : (Math.min(node.w, column)));
-                    newNodes.push(node);
-                });
-                nodes = [];
             }
+            // finally re-layout them in reverse order (to get correct placement)
+            if (!domOrder)
+                newNodes = Utils.sort(newNodes, -1, column);
+            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 => {
+                this.addNode(node, false); // 'false' for add event trigger
+                delete node._orig; // make sure the commit doesn't try to restore things back to original
+            });
         }
-        // finally re-layout them in reverse order (to get correct placement)
-        if (!domOrder)
-            newNodes = Utils.sort(newNodes, -1, column);
-        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 => {
-            this.addNode(node, false); // 'false' for add event trigger
-            delete node._orig; // make sure the commit doesn't try to restore things back to original
-        });
-        this.batchUpdate(false);
+        this.nodes.forEach(n => delete n._orig); // clear _orig before batch=false so it doesn't handle float=true restore
+        this.batchUpdate(false, !doCompact);
         delete this._inColumnResize;
         return this;
     }