gridstack 9.3.0 → 9.5.0

package/dist/es5/gridstack.js

@@ -36,7 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 9.3.0
+ * GridStack 9.5.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -592,12 +592,14 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * @example
      * see http://gridstackjs.com/demo/serialization.html
      */
-    GridStack.prototype.load = function (layout, addRemove) {
+    GridStack.prototype.load = function (items, addRemove) {
         var _this = this;
         if (addRemove === void 0) { addRemove = GridStack.addRemoveCB || true; }
+        items = utils_1.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
-        var haveCoord = layout.some(function (w) { return w.x !== undefined || w.y !== undefined; });
-        var items = haveCoord ? utils_1.Utils.sort(layout, -1, this._prevColumn || this.getColumn()) : layout;
+        var haveCoord = items.some(function (w) { return w.x !== undefined || w.y !== undefined; });
+        if (haveCoord)
+            items = utils_1.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
@@ -613,9 +615,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.batchUpdate();
         // see if any items are missing from new layout and need to be removed first
         if (addRemove) {
-            var copyNodes_1 = __spreadArray([], this.engine.nodes, true); // don't loop through array you modify
-            copyNodes_1.forEach(function (n) {
-                var item = items.find(function (w) { return n.id === w.id; });
+            var copyNodes = __spreadArray([], this.engine.nodes, true); // don't loop through array you modify
+            copyNodes.forEach(function (n) {
+                if (!n.id)
+                    return;
+                var item = utils_1.Utils.find(items, n.id);
                 if (!item) {
                     if (GridStack.addRemoveCB)
                         GridStack.addRemoveCB(_this.el, n, false, false);
@@ -624,20 +628,37 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 }
             });
         }
-        // now add/update the widgets - starting with an empty list to reduce collision and add no-coord ones at next available spot
-        var 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
+        var updateNodes = [];
+        this.engine.nodes = this.engine.nodes.filter(function (n) {
+            if (utils_1.Utils.find(items, n.id)) {
+                updateNodes.push(n);
+                return false;
+            } // remove if found from list
+            return true;
+        });
+        var widthChanged = false;
         items.forEach(function (w) {
             var _a;
-            var item = (w.id !== undefined) ? copyNodes.find(function (n) { return n.id === w.id; }) : undefined;
+            var item = utils_1.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_1.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_1.Utils.samePos(item, w)) {
+                    _this.moveNode(item, __assign(__assign({}, w), { forceCollide: true }));
+                    utils_1.Utils.copyPos(w, item, true);
+                }
                 _this.update(item.el, w);
                 if ((_a = w.subGridOpts) === null || _a === void 0 ? void 0 : _a.children) { // update any sub grid as well
                     var sub = item.el.querySelector('.grid-stack');
@@ -652,6 +673,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
         });
         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;
@@ -775,9 +797,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!column || column < 1 || this.opts.column === column)
             return this;
         var 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 {
@@ -1131,6 +1153,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 return;
             var w = utils_1.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
             var keys = ['x', 'y', 'w', 'h'];
             var m;
@@ -1148,14 +1171,14 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             // check for content changing
             if (w.content !== undefined) {
                 var itemContent = el.querySelector('.grid-stack-item-content');
-                if (!itemContent || itemContent.innerHTML === w.content)
-                    return;
-                itemContent.innerHTML = w.content;
-                // restore any sub-grid back
-                if ((_a = n.subGrid) === null || _a === void 0 ? void 0 : _a.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 ((_a = n.subGrid) === null || _a === void 0 ? void 0 : _a.el) {
+                        itemContent.appendChild(n.subGrid.el);
+                        if (!n.subGrid.opts.styleInHead)
+                            n.subGrid._updateStyles(true); // force create
+                    }
                 }
                 delete w.content;
             }
@@ -1171,7 +1194,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             utils_1.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);
@@ -1647,7 +1670,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             || this.engine.nodes.find(function (n) { return n.sizeToContent; }));
         if (!forceRemove && trackSize && !this.resizeObserver) {
             this._sizeThrottle = utils_1.Utils.throttle(function () { return _this.onResize(); }, this.opts.cellHeightThrottle);
-            this.resizeObserver = new ResizeObserver(function (entries) { return _this._sizeThrottle(); });
+            this.resizeObserver = new ResizeObserver(function () { return _this._sizeThrottle(); });
             this.resizeObserver.observe(this.el);
             this._skipInitialResize = true; // makeWidget will originally have called on startup
         }
@@ -1893,16 +1916,15 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // vars shared across all methods
         var cellHeight, cellWidth;
         var onDrag = function (event, el, helper) {
-            var _a, _b;
+            var _a;
             var node = el.gridstackNode;
             if (!node)
                 return;
             helper = helper || el;
             var parent = _this.el.getBoundingClientRect();
-            var scaleX = (_a = utils_1.Utils.getScaleForElement(helper), _a.scaleX), scaleY = _a.scaleY;
-            var top = (_b = helper.getBoundingClientRect(), _b.top), left = _b.left;
-            left = (left - parent.left) / scaleX;
-            top = (top - parent.top) / scaleY;
+            var top = (_a = helper.getBoundingClientRect(), _a.top), left = _a.left;
+            left -= parent.left;
+            top -= parent.top;
             var ui = { position: { top: top, left: left } };
             if (node._temporaryRemoved) {
                 node.x = Math.max(0, Math.round(left / cellWidth));
@@ -2066,6 +2088,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _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
@@ -2096,6 +2119,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 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
@@ -2104,17 +2128,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (_this._gsEventHandler['dropped']) {
                 _this._gsEventHandler['dropped'](__assign(__assign({}, 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(function () {
-                // 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;
@@ -2397,7 +2410,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.Utils = utils_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '9.3.0';
+    GridStack.GDRev = '9.5.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map