gridstack 4.2.6 → 4.4.0

package/dist/gridstack-engine.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * gridstack-engine.ts 4.2.6
+ * gridstack-engine.ts 4.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -173,6 +173,10 @@ class GridStackEngine {
                 a.x = x;
                 a.y = b.y + b.h; // a -> goes after b
             }
+            else if (a.w != b.w) {
+                a.x = b.x + b.w;
+                a.y = y; // a -> goes after b
+            }
             else {
                 a.x = x;
                 a.y = y; // a -> old b position
@@ -185,9 +189,9 @@ class GridStackEngine {
         if (a.w === b.w && a.h === b.h && (a.x === b.x || a.y === b.y) && (touching = utils_1.Utils.isTouching(a, b)))
             return _doSwap();
         if (touching === false)
-            return; // ran test and fail, bail out
+            return; // IFF ran test and fail, bail out
         // check for taking same columns (but different height) and touching
-        if (a.w === b.w && a.x === b.x && (touching || utils_1.Utils.isTouching(a, b))) {
+        if (a.w === b.w && a.x === b.x && (touching || (touching = utils_1.Utils.isTouching(a, b)))) {
             if (b.y < a.y) {
                 let t = a;
                 a = b;
@@ -195,11 +199,17 @@ class GridStackEngine {
             } // swap a <-> b vars so a is first
             return _doSwap();
         }
-        /* different X will be weird (expect vertical swap) and different height overlap, so too complex. user regular layout instead
-        // else check if swapping would not collide with anything else (requiring a re-layout)
-        if (!this.collide(a, {x: a.x, y: a.y, w: b.w, h: b.h}, b) &&
-            !this.collide(a, {x: b.x, y: b.y, w: a.w, h: a.h}, b))
-          return _doSwap(); */
+        if (touching === false)
+            return;
+        // check if taking same row (but different width) and touching
+        if (a.h === b.h && a.y === b.y && (touching || (touching = utils_1.Utils.isTouching(a, b)))) {
+            if (b.x < a.x) {
+                let t = a;
+                a = b;
+                b = t;
+            } // swap a <-> b vars so a is first
+            return _doSwap();
+        }
         return false;
     }
     isAreaEmpty(x, y, w, h) {
@@ -241,6 +251,9 @@ class GridStackEngine {
     }
     /** @internal called to top gravity pack the items back OR revert back to original Y positions when floating */
     _packNodes() {
+        if (this.batchMode) {
+            return;
+        }
         this._sortNodes(); // first to last
         if (this.float) {
             // restore original Y pos
@@ -333,13 +346,14 @@ class GridStackEngine {
     }
     /** part2 of preparing a node to fit inside our grid - checks  for x,y from grid dimensions */
     nodeBoundFix(node, resizing) {
+        let before = node._orig || utils_1.Utils.copyPos({}, node);
         if (node.maxW) {
             node.w = Math.min(node.w, node.maxW);
         }
         if (node.maxH) {
             node.h = Math.min(node.h, node.maxH);
         }
-        if (node.minW) {
+        if (node.minW && node.minW <= this.column) {
             node.w = Math.max(node.w, node.minW);
         }
         if (node.minH) {
@@ -348,7 +362,8 @@ class GridStackEngine {
         if (node.w > this.column) {
             // if user loaded a larger than allowed widget for current # of columns,
             // remember it's full width so we can restore back (1 -> 12 column) #1655
-            if (this.column < 12) {
+            // IFF we're not in the middle of column resizing!
+            if (this.column < 12 && !this._inColumnResize) {
                 node.w = Math.min(12, node.w);
                 this.cacheOneLayout(node, 12);
             }
@@ -385,6 +400,9 @@ class GridStackEngine {
                 node.y = this.maxRow - node.h;
             }
         }
+        if (!utils_1.Utils.samePos(node, before)) {
+            node._dirty = true;
+        }
         return node;
     }
     getDirtyNodes(verify) {
@@ -437,10 +455,11 @@ class GridStackEngine {
     }
     /** call to add the given node to our list, fixing collision and re-packing */
     addNode(node, triggerAddEvent = false) {
-        let dup;
-        if (dup = this.nodes.find(n => n._id === node._id))
+        let dup = this.nodes.find(n => n._id === node._id);
+        if (dup)
             return dup; // prevent inserting twice! return it instead.
-        node = this.prepareNode(node);
+        // skip prepareNode if we're in middle of column resize (not new) but do check for bounds!
+        node = this._inColumnResize ? this.nodeBoundFix(node) : this.prepareNode(node);
         delete node._temporaryRemoved;
         delete node._removeDOM;
         if (node.autoPosition) {
@@ -461,10 +480,13 @@ class GridStackEngine {
             }
         }
         this.nodes.push(node);
-        triggerAddEvent && this.addedNodes.push(node);
+        if (triggerAddEvent) {
+            this.addedNodes.push(node);
+        }
         this._fixCollisions(node);
-        this._packNodes()
-            ._notify();
+        if (!this.batchMode) {
+            this._packNodes()._notify();
+        }
         return node;
     }
     removeNode(node, removeDOM = true, triggerEvent = false) {
@@ -522,8 +544,8 @@ class GridStackEngine {
         // if maxRow make sure we are still valid size
         if (this.maxRow && canMove) {
             canMove = (clone.getRow() <= this.maxRow);
-            // turns out we can't grow, then see if we can swap instead (ex: full grid)
-            if (!canMove) {
+            // turns out we can't grow, then see if we can swap instead (ex: full grid) if we're not resizing
+            if (!canMove && !o.resizing) {
                 let collide = this.collide(node, o);
                 if (collide && this.swap(node, collide)) {
                     this._notify();
@@ -667,17 +689,29 @@ class GridStackEngine {
         }
         return this;
     }
-    /** saves a copy of the current layout returning a list of widgets for serialization */
+    /** saves a copy of the largest column layout (eg 12 even when rendering oneColumnMode, so we don't loose orig layout),
+     * returning a list of widgets for serialization */
     save(saveElement = true) {
+        var _a;
+        // use the highest layout for any saved info so we can have full detail on reload #1849
+        let len = (_a = this._layouts) === null || _a === void 0 ? void 0 : _a.length;
+        let layout = len && this.column !== (len - 1) ? this._layouts[len - 1] : null;
         let list = [];
         this._sortNodes();
         this.nodes.forEach(n => {
-            let w = {};
-            for (let key in n) {
-                if (key[0] !== '_' && n[key] !== null && n[key] !== undefined)
-                    w[key] = n[key];
+            let wl = layout === null || layout === void 0 ? void 0 : layout.find(l => l._id === n._id);
+            let w = Object.assign({}, n);
+            // use layout info instead if set
+            if (wl) {
+                w.x = wl.x;
+                w.y = wl.y;
+                w.w = wl.w;
+            }
+            // delete internals
+            for (let key in w) {
+                if (key[0] === '_' || w[key] === null || w[key] === undefined)
+                    delete w[key];
             }
-            // delete other internals
             delete w.grid;
             if (!saveElement)
                 delete w.el;
@@ -696,7 +730,7 @@ class GridStackEngine {
     }
     /** @internal called whenever a node is added or moved - updates the cached layouts */
     layoutsNodesChange(nodes) {
-        if (!this._layouts || this._ignoreLayoutsNodeChange)
+        if (!this._layouts || this._inColumnResize)
             return this;
         // remove smaller layouts - we will re-generate those on the fly... larger ones need to update
         this._layouts.forEach((layout, column) => {
@@ -707,14 +741,14 @@ class GridStackEngine {
             }
             else {
                 // we save the original x,y,w (h isn't cached) to see what actually changed to propagate better.
-                // Note: we don't need to check against out of bound scaling/moving as that will be done when using those cache values.
+                // NOTE: we don't need to check against out of bound scaling/moving as that will be done when using those cache values. #1785
+                let ratio = column / this.column;
                 nodes.forEach(node => {
                     if (!node._orig)
                         return; // didn't change (newly added ?)
                     let n = layout.find(l => l._id === node._id);
                     if (!n)
                         return; // no cache for new nodes. Will use those values.
-                    let ratio = column / this.column;
                     // Y changed, push down same amount
                     // TODO: detect doing item 'swaps' will help instead of move (especially in 1 column mode)
                     if (node.y !== node._orig.y) {
@@ -739,19 +773,24 @@ class GridStackEngine {
      * Note we store previous layouts (especially original ones) to make it possible to go
      * from say 12 -> 1 -> 12 and get back to where we were.
      *
-     * @param oldColumn previous number of columns
+     * @param prevColumn previous number of columns
      * @param column  new column number
      * @param nodes different sorted list (ex: DOM order) instead of current list
      * @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(oldColumn, column, nodes, layout = 'moveScale') {
-        if (!this.nodes.length || oldColumn === column)
+    updateNodeWidths(prevColumn, column, nodes, layout = 'moveScale') {
+        var _a;
+        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, oldColumn);
+        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 (column === 1 && nodes && nodes.length) {
+        let domOrder = false;
+        if (column === 1 && (nodes === null || nodes === void 0 ? void 0 : nodes.length)) {
+            domOrder = true;
             let top = 0;
             nodes.forEach(n => {
                 n.x = 0;
@@ -759,33 +798,34 @@ class GridStackEngine {
                 n.y = Math.max(n.y, top);
                 top = n.y + n.h;
             });
+            newNodes = nodes;
+            nodes = [];
         }
         else {
-            nodes = utils_1.Utils.sort(this.nodes, -1, oldColumn); // current column reverse sorting so we can insert last to front (limit collision)
-        }
-        // see if we have cached previous layout.
-        let cacheNodes = this._layouts[column] || [];
-        // if not AND we are going up in size start with the largest layout as down-scaling is more accurate
-        let lastIndex = this._layouts.length - 1;
-        if (cacheNodes.length === 0 && column > oldColumn && column < lastIndex) {
-            cacheNodes = this._layouts[lastIndex] || [];
-            if (cacheNodes.length) {
-                // pretend we came from that larger column by assigning those values as starting point
-                oldColumn = lastIndex;
-                cacheNodes.forEach(cacheNode => {
-                    let j = nodes.findIndex(n => n._id === cacheNode._id);
-                    if (j !== -1) {
+            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).
+        let cacheNodes = [];
+        if (column > prevColumn) {
+            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;
+            if (!cacheNodes.length && prevColumn !== lastIndex && ((_a = this._layouts[lastIndex]) === null || _a === void 0 ? void 0 : _a.length)) {
+                prevColumn = lastIndex;
+                this._layouts[lastIndex].forEach(cacheNode => {
+                    let n = nodes.find(n => n._id === cacheNode._id);
+                    if (n) {
                         // still current, use cache info positions
-                        nodes[j].x = cacheNode.x;
-                        nodes[j].y = cacheNode.y;
-                        nodes[j].w = cacheNode.w;
+                        n.x = cacheNode.x;
+                        n.y = cacheNode.y;
+                        n.w = cacheNode.w;
                     }
                 });
-                cacheNodes = []; // we still don't have new column cached data... will generate from larger one.
             }
         }
         // if we found cache re-use those nodes that are still current
-        let newNodes = [];
         cacheNodes.forEach(cacheNode => {
             let j = nodes.findIndex(n => n._id === cacheNode._id);
             if (j !== -1) {
@@ -800,15 +840,16 @@ class GridStackEngine {
         // ...and add any extra non-cached ones
         if (nodes.length) {
             if (typeof layout === 'function') {
-                layout(column, oldColumn, newNodes, nodes);
+                layout(column, prevColumn, newNodes, nodes);
             }
-            else {
-                let ratio = column / oldColumn;
+            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 || oldColumn === 1) ? 1 :
+                    node.w = ((column === 1 || prevColumn === 1) ? 1 :
                         scale ? (Math.round(node.w * ratio) || 1) : (Math.min(node.w, column)));
                     newNodes.push(node);
                 });
@@ -817,15 +858,14 @@ class GridStackEngine {
         }
         // finally re-layout them in reverse order (to get correct placement)
         newNodes = utils_1.Utils.sort(newNodes, -1, column);
-        this._ignoreLayoutsNodeChange = true;
-        this.batchUpdate();
-        this.nodes = []; // pretend we have no nodes to start with (we use same structures) to simplify layout
+        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
-            node._dirty = true; // force attr update
-        }, this);
+            delete node._orig; // make sure the commit doesn't try to restore things back to original
+        });
         this.commit();
-        delete this._ignoreLayoutsNodeChange;
+        delete this._inColumnResize;
         return this;
     }
     /**