gridstack 9.3.0 → 9.5.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 9.3.0
+ * GridStack 9.5.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -542,10 +542,12 @@ class GridStack {
      * @example
      * see http://gridstackjs.com/demo/serialization.html
      */
-    load(layout, addRemove = GridStack.addRemoveCB || true) {
+    load(items, addRemove = GridStack.addRemoveCB || true) {
+        items = Utils.cloneDeep(items); // so we can mod
         // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else force widget same order
-        const haveCoord = layout.some(w => w.x !== undefined || w.y !== undefined);
-        let items = haveCoord ? Utils.sort(layout, -1, this._prevColumn || this.getColumn()) : layout;
+        const haveCoord = items.some(w => w.x !== undefined || w.y !== undefined);
+        if (haveCoord)
+            items = Utils.sort(items, -1, this._prevColumn || this.getColumn());
         this._insertNotAppend = haveCoord; // if we create in reverse order...
         // if we're loading a layout into for example 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
         // the original wanted layout so we can scale back up correctly #1471
@@ -563,7 +565,9 @@ class GridStack {
         if (addRemove) {
             let copyNodes = [...this.engine.nodes]; // don't loop through array you modify
             copyNodes.forEach(n => {
-                let item = items.find(w => n.id === w.id);
+                if (!n.id)
+                    return;
+                let item = Utils.find(items, n.id);
                 if (!item) {
                     if (GridStack.addRemoveCB)
                         GridStack.addRemoveCB(this.el, n, false, false);
@@ -572,19 +576,36 @@ class GridStack {
                 }
             });
         }
-        // now add/update the widgets - starting with an empty list to reduce collision and add no-coord ones at next available spot
-        let copyNodes = this.engine.nodes;
-        this.engine.nodes = [];
+        // now add/update the widgets - starting with removing items in the new layout we will reposition
+        // to reduce collision and add no-coord ones at next available spot
+        let updateNodes = [];
+        this.engine.nodes = this.engine.nodes.filter(n => {
+            if (Utils.find(items, n.id)) {
+                updateNodes.push(n);
+                return false;
+            } // remove if found from list
+            return true;
+        });
+        let widthChanged = false;
         items.forEach(w => {
-            let item = (w.id !== undefined) ? copyNodes.find(n => n.id === w.id) : undefined;
+            let item = Utils.find(updateNodes, w.id);
             if (item) {
+                // if item sizes to content, re-use the exiting height so it's a better guess at the final size 9same if width doesn't change)
+                if (Utils.shouldSizeToContent(item))
+                    w.h = item.h;
                 // check if missing coord, in which case find next empty slot with new (or old if missing) sizes
                 if (w.autoPosition || w.x === undefined || w.y === undefined) {
                     w.w = w.w || item.w;
                     w.h = w.h || item.h;
                     this.engine.findEmptyPosition(w);
                 }
-                this.engine.nodes.push(item); // now back to current list...
+                widthChanged = widthChanged || (w.w !== undefined && w.w !== item.w);
+                // add back to current list BUT force a collision check if it 'appears' we didn't change to make sure we don't overlap others now
+                this.engine.nodes.push(item);
+                if (Utils.samePos(item, w)) {
+                    this.moveNode(item, { ...w, forceCollide: true });
+                    Utils.copyPos(w, item, true);
+                }
                 this.update(item.el, w);
                 if (w.subGridOpts?.children) { // update any sub grid as well
                     let sub = item.el.querySelector('.grid-stack');
@@ -599,6 +620,7 @@ class GridStack {
             }
         });
         this.engine.removedNodes = removed;
+        this.doContentResize(widthChanged, true); // we only need to wait for animation if we changed any widths
         this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
@@ -716,9 +738,9 @@ class GridStack {
         if (!column || column < 1 || this.opts.column === column)
             return this;
         let oldColumn = this.getColumn();
-        // if we go into 1 column mode (which happens if we're sized less than minW unless disableOneColumnMode is on)
+        // if we go into 1 column mode due to size change (disableOneColumnMode is off and we hit min width)
         // then remember the original columns so we can restore.
-        if (column === 1) {
+        if (column === 1 && !this.opts.disableOneColumnMode) {
             this._prevColumn = oldColumn;
         }
         else {
@@ -1056,6 +1078,7 @@ class GridStack {
                 return;
             let w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
             delete w.autoPosition;
+            delete w.id;
             // move/resize widget if anything changed
             let keys = ['x', 'y', 'w', 'h'];
             let m;
@@ -1073,14 +1096,14 @@ class GridStack {
             // check for content changing
             if (w.content !== undefined) {
                 const itemContent = el.querySelector('.grid-stack-item-content');
-                if (!itemContent || itemContent.innerHTML === w.content)
-                    return;
-                itemContent.innerHTML = w.content;
-                // restore any sub-grid back
-                if (n.subGrid?.el) {
-                    itemContent.appendChild(n.subGrid.el);
-                    if (!n.subGrid.opts.styleInHead)
-                        n.subGrid._updateStyles(true); // force create
+                if (itemContent && itemContent.innerHTML !== w.content) {
+                    itemContent.innerHTML = w.content;
+                    // restore any sub-grid back
+                    if (n.subGrid?.el) {
+                        itemContent.appendChild(n.subGrid.el);
+                        if (!n.subGrid.opts.styleInHead)
+                            n.subGrid._updateStyles(true); // force create
+                    }
                 }
                 delete w.content;
             }
@@ -1096,7 +1119,7 @@ class GridStack {
             }
             Utils.sanitizeMinMax(n);
             // finally move the widget
-            if (m)
+            if (m !== undefined)
                 this.moveNode(n, m);
             if (changed) { // move will only update x,y,w,h so update the rest too
                 this._writeAttr(el, n);
@@ -1557,7 +1580,7 @@ class GridStack {
             || this.engine.nodes.find(n => n.sizeToContent));
         if (!forceRemove && trackSize && !this.resizeObserver) {
             this._sizeThrottle = Utils.throttle(() => this.onResize(), this.opts.cellHeightThrottle);
-            this.resizeObserver = new ResizeObserver(entries => this._sizeThrottle());
+            this.resizeObserver = new ResizeObserver(() => this._sizeThrottle());
             this.resizeObserver.observe(this.el);
             this._skipInitialResize = true; // makeWidget will originally have called on startup
         }
@@ -1792,10 +1815,9 @@ class GridStack {
                 return;
             helper = helper || el;
             let parent = this.el.getBoundingClientRect();
-            const { scaleX, scaleY } = Utils.getScaleForElement(helper);
             let { top, left } = helper.getBoundingClientRect();
-            left = (left - parent.left) / scaleX;
-            top = (top - parent.top) / scaleY;
+            left -= parent.left;
+            top -= parent.top;
             let ui = { position: { top, left } };
             if (node._temporaryRemoved) {
                 node.x = Math.max(0, Math.round(left / cellWidth));
@@ -1958,6 +1980,7 @@ class GridStack {
                 this.engine.cleanupNode(node); // removes all internal _xyz values
                 node.grid = this;
             }
+            delete node.grid._isTemp;
             dd.off(el, 'drag');
             // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
             // as the helper will be nuked by jquery-ui otherwise. TODO: update old code path
@@ -1988,6 +2011,7 @@ class GridStack {
                 if (!subGrid.opts.styleInHead)
                     subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
             }
+            this._prepareDragDropByNode(node);
             this._updateContainerHeight();
             this.engine.addedNodes.push(node); // @ts-ignore
             this._triggerAddEvent(); // @ts-ignore
@@ -1996,17 +2020,6 @@ class GridStack {
             if (this._gsEventHandler['dropped']) {
                 this._gsEventHandler['dropped']({ ...event, type: 'dropped' }, origNode && origNode.grid ? origNode : undefined, node);
             }
-            // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up
-            window.setTimeout(() => {
-                // IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())
-                if (node.el && node.el.parentElement) {
-                    this._prepareDragDropByNode(node);
-                }
-                else {
-                    this.engine.removeNode(node);
-                }
-                delete node.grid._isTemp;
-            });
             return false; // prevent parent from receiving msg (which may be grid as well)
         });
         return this;
@@ -2288,6 +2301,6 @@ GridStack.resizeToContentParent = '.grid-stack-item-content';
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '9.3.0';
+GridStack.GDRev = '9.5.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map