gridstack 8.2.3 → 8.4.0

package/dist/es5/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/es5/gridstack-engine.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * gridstack-engine.ts 8.2.3
+ * gridstack-engine.ts 8.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 var __assign = (this && this.__assign) || function () {
@@ -34,8 +34,9 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
         this.nodes = opts.nodes || [];
         this.onChange = opts.onChange;
     }
-    GridStackEngine.prototype.batchUpdate = function (flag) {
+    GridStackEngine.prototype.batchUpdate = function (flag, doPack) {
         if (flag === void 0) { flag = true; }
+        if (doPack === void 0) { doPack = true; }
         if (!!this.batchMode === flag)
             return this;
         this.batchMode = flag;
@@ -47,7 +48,9 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
         else {
             this._float = this._prevFloat;
             delete this._prevFloat;
-            this._packNodes()._notify();
+            if (doPack)
+                this._packNodes();
+            this._notify();
         }
         return this;
     };
@@ -254,23 +257,37 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
         var 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 */
-    GridStackEngine.prototype.compact = function () {
+    /** 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 */
+    GridStackEngine.prototype.compact = function (layout, doSort) {
         var _this = this;
+        if (layout === void 0) { layout = 'compact'; }
+        if (doSort === void 0) { doSort = true; }
         if (this.nodes.length === 0)
             return this;
-        this.batchUpdate()
-            .sortNodes();
+        if (doSort)
+            this.sortNodes();
+        var wasBatch = this.batchMode;
+        if (!wasBatch)
+            this.batchUpdate();
+        var wasColumnResize = this._inColumnResize;
+        if (!wasColumnResize)
+            this._inColumnResize = true; // faster addNode()
         var copyNodes = this.nodes;
         this.nodes = []; // pretend we have no nodes to conflict layout to start with...
-        copyNodes.forEach(function (node) {
-            if (!node.locked) {
-                node.autoPosition = true;
+        copyNodes.forEach(function (n, index, list) {
+            var 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;
     };
     Object.defineProperty(GridStackEngine.prototype, "float", {
         /** float getter method */
@@ -288,8 +305,10 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
         configurable: true
     });
     /** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */
-    GridStackEngine.prototype.sortNodes = function (dir) {
-        this.nodes = utils_1.Utils.sort(this.nodes, dir, this.column);
+    GridStackEngine.prototype.sortNodes = function (dir, column) {
+        if (dir === void 0) { dir = 1; }
+        if (column === void 0) { column = this.column; }
+        this.nodes = utils_1.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 */
@@ -509,11 +528,12 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
     };
     /** 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
      */
-    GridStackEngine.prototype.findEmptyPosition = function (node, nodeList, column) {
+    GridStackEngine.prototype.findEmptyPosition = function (node, nodeList, column, after) {
         if (nodeList === void 0) { nodeList = this.nodes; }
         if (column === void 0) { column = this.column; }
-        nodeList = utils_1.Utils.sort(nodeList, -1, column);
+        var start = after ? after.y * column + (after.x + after.w) : 0;
         var found = false;
         var _loop_1 = function (i) {
             var x = i % column;
@@ -523,19 +543,21 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
             }
             var box = { x: x, y: y, w: node.w, h: node.h };
             if (!nodeList.find(function (n) { return utils_1.Utils.isIntercepted(box, n); })) {
+                if (node.x !== x || node.y !== y)
+                    node._dirty = true;
                 node.x = x;
                 node.y = y;
                 delete node.autoPosition;
                 found = true;
             }
         };
-        for (var i = 0; !found; ++i) {
+        for (var i = start; !found; ++i) {
             _loop_1(i);
         }
         return found;
     };
     /** call to add the given node to our list, fixing collision and re-packing */
-    GridStackEngine.prototype.addNode = function (node, triggerAddEvent) {
+    GridStackEngine.prototype.addNode = function (node, triggerAddEvent, after) {
         if (triggerAddEvent === void 0) { triggerAddEvent = false; }
         var dup = this.nodes.find(function (n) { return n._id === node._id; });
         if (dup)
@@ -544,14 +566,17 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
         node = this._inColumnResize ? this.nodeBoundFix(node) : this.prepareNode(node);
         delete node._temporaryRemoved;
         delete node._removeDOM;
-        if (node.autoPosition && this.findEmptyPosition(node)) {
+        var 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();
         }
@@ -571,8 +596,10 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
             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(function (n) { return 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;
     };
     GridStackEngine.prototype.removeAll = function (removeDOM) {
         if (removeDOM === void 0) { removeDOM = true; }
@@ -848,17 +875,23 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
      * @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
      */
-    GridStackEngine.prototype.updateNodeWidths = function (prevColumn, column, nodes, layout) {
+    GridStackEngine.prototype.columnChanged = function (prevColumn, column, nodes, layout) {
         var _this = this;
         var _a;
         if (layout === void 0) { 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
+        var 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
         var 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
         var domOrder = false;
         if (column === 1 && (nodes === null || nodes === void 0 ? void 0 : nodes.length)) {
             domOrder = true;
@@ -873,13 +906,12 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
             nodes = [];
         }
         else {
-            nodes = utils_1.Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
+            nodes = doCompact ? this.nodes : utils_1.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).
-        var cacheNodes = [];
-        if (column > prevColumn) {
-            cacheNodes = this._layouts[column] || [];
+        if (column > prevColumn && this._layouts) {
+            var 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
             var lastIndex = this._layouts.length - 1;
@@ -889,59 +921,71 @@ var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
                     var n = nodes.find(function (n) { return 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(function (cacheNode) {
+                var j = nodes.findIndex(function (n) { return 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);
+                }
+            });
         }
-        // if we found cache re-use those nodes that are still current
-        cacheNodes.forEach(function (cacheNode) {
-            var j = nodes.findIndex(function (n) { return 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);
+        // much simpler layout that just compacts
+        if (doCompact) {
+            this.compact(layout, false);
+        }
+        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) {
+                    var ratio_2 = (doCompact || layout === 'none') ? 1 : column / prevColumn;
+                    var move_1 = (layout === 'move' || layout === 'moveScale');
+                    var scale_1 = (layout === 'scale' || layout === 'moveScale');
+                    nodes.forEach(function (node) {
+                        // NOTE: x + w could be outside of the grid, but addNode() below will handle that
+                        node.x = (column === 1 ? 0 : (move_1 ? Math.round(node.x * ratio_2) : Math.min(node.x, column - 1)));
+                        node.w = ((column === 1 || prevColumn === 1) ? 1 : scale_1 ? (Math.round(node.w * ratio_2) || 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) {
-                var ratio_2 = column / prevColumn;
-                var move_1 = (layout === 'move' || layout === 'moveScale');
-                var scale_1 = (layout === 'scale' || layout === 'moveScale');
-                nodes.forEach(function (node) {
-                    // NOTE: x + w could be outside of the grid, but addNode() below will handle that
-                    node.x = (column === 1 ? 0 : (move_1 ? Math.round(node.x * ratio_2) : Math.min(node.x, column - 1)));
-                    node.w = ((column === 1 || prevColumn === 1) ? 1 :
-                        scale_1 ? (Math.round(node.w * ratio_2) || 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_1.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(function (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_1.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(function (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(function (n) { return 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;
     };