gridstack 10.1.1 → 10.2.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 10.1.1
+ * GridStack 10.2.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -231,7 +231,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 this.load(children); // don't load empty
         }
         // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
-        this.setAnimation(opts.animate);
+        this.setAnimation();
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
             dd_manager_1.DDManager.pauseDrag = true;
@@ -634,13 +634,21 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      */
     GridStack.prototype.load = function (items, addRemove) {
         var _this = this;
+        var _a;
         if (addRemove === void 0) { addRemove = GridStack.addRemoveCB || true; }
         items = utils_1.Utils.cloneDeep(items); // so we can mod
         var column = this.getColumn();
+        // if we have a mix of new items without coordinates and existing items, separate them out so they can be added after #2639
+        var addAfter = items.filter(function (n) { return (n.x === undefined || n.y === undefined) && !utils_1.Utils.find(_this.engine.nodes, n.id); });
+        if (addAfter.length && addAfter.length !== items.length) {
+            items = items.filter(function (n) { return !utils_1.Utils.find(addAfter, n.id); });
+        }
+        else
+            addAfter = [];
         // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else keep widget order
         var haveCoord = items.some(function (w) { return w.x !== undefined || w.y !== undefined; });
         if (haveCoord)
-            items = utils_1.Utils.sort(items, -1, column);
+            items = utils_1.Utils.sort(items, -1);
         this._insertNotAppend = haveCoord; // if we create in reverse order...
         // if we're loading a layout into for example 1 column and items don't fit, make sure to save
         // the original wanted layout so we can scale back up correctly #1471
@@ -715,6 +723,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this.addWidget(w);
             }
         });
+        // finally append any separate ones that didn't have explicit coordinates last so they can find next empty spot
+        if (addRemove) {
+            addAfter.forEach(function (w) { return _this.addWidget(w); });
+        }
         this.engine.removedNodes = removed;
         this.batchUpdate(false);
         // after commit, clear that flag
@@ -722,8 +734,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         delete this._insertNotAppend;
         prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
         // delay adding animation back
-        if (noAnim && this.opts.animate)
-            setTimeout(function () { return _this.setAnimation(_this.opts.animate); });
+        if (noAnim && ((_a = this.opts) === null || _a === void 0 ? void 0 : _a.animate))
+            this.setAnimation(this.opts.animate, true);
         return this;
     };
     /**
@@ -1113,7 +1125,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             if (!node)
                 return;
-            if (GridStack.addRemoveCB) {
+            if (removeDOM && GridStack.addRemoveCB) {
                 GridStack.addRemoveCB(_this.el, node, false, false);
             }
             // remove our DOM data (circular link) and drag&drop permanently
@@ -1133,25 +1145,40 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * Removes all widgets from the grid.
      * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
+     * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
      */
-    GridStack.prototype.removeAll = function (removeDOM) {
+    GridStack.prototype.removeAll = function (removeDOM, triggerEvent) {
         var _this = this;
         if (removeDOM === void 0) { removeDOM = true; }
+        if (triggerEvent === void 0) { triggerEvent = true; }
         // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
         this.engine.nodes.forEach(function (n) {
+            if (removeDOM && GridStack.addRemoveCB) {
+                GridStack.addRemoveCB(_this.el, n, false, false);
+            }
             delete n.el.gridstackNode;
-            _this._removeDD(n.el);
+            if (!_this.opts.staticGrid)
+                _this._removeDD(n.el);
         });
-        this.engine.removeAll(removeDOM);
-        this._triggerRemoveEvent();
+        this.engine.removeAll(removeDOM, triggerEvent);
+        if (triggerEvent)
+            this._triggerRemoveEvent();
         return this;
     };
     /**
      * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
      * @param doAnimate if true the grid will animate.
+     * @param delay if true setting will be set on next event loop.
      */
-    GridStack.prototype.setAnimation = function (doAnimate) {
-        if (doAnimate) {
+    GridStack.prototype.setAnimation = function (doAnimate, delay) {
+        var _this = this;
+        if (doAnimate === void 0) { doAnimate = this.opts.animate; }
+        if (delay) {
+            // delay, but check to make sure grid (opt) is still around
+            setTimeout(function () { if (_this.opts)
+                _this.setAnimation(doAnimate); });
+        }
+        else if (doAnimate) {
             this.el.classList.add('grid-stack-animate');
         }
         else {
@@ -1266,12 +1293,15 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         return this;
     };
     GridStack.prototype.moveNode = function (n, m) {
-        this.engine.cleanNodes()
-            .beginUpdate(n)
-            .moveNode(n, m);
+        var wasUpdating = n._updating;
+        if (!wasUpdating)
+            this.engine.cleanNodes().beginUpdate(n);
+        this.engine.moveNode(n, m);
         this._updateContainerHeight();
-        this._triggerChangeEvent();
-        this.engine.endUpdate();
+        if (!wasUpdating) {
+            this._triggerChangeEvent();
+            this.engine.endUpdate();
+        }
     };
     /**
      * Updates widget height to match the content height to avoid v-scrollbar or dead space.
@@ -1345,6 +1375,28 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         else
             this.resizeToContent(el);
     };
+    /** rotate (by swapping w & h) the passed in node - called when user press 'r' during dragging
+     * @param els  widget or selector of objects to modify
+     * @param relative optional pixel coord relative to upper/left corner to rotate around (will keep that cell under cursor)
+     */
+    GridStack.prototype.rotate = function (els, relative) {
+        var _this = this;
+        GridStack.getElements(els).forEach(function (el) {
+            var n = el.gridstackNode;
+            if (!n || n.w === n.h)
+                return;
+            var rot = { w: n.h, h: n.w, minH: n.minW, minW: n.minH, maxH: n.maxW, maxW: n.maxH };
+            // if given an offset, adjust x/y by column/row bounds when user presses 'r' during dragging
+            if (relative) {
+                var pivotX = relative.left > 0 ? Math.floor(relative.left / _this.cellWidth()) : 0;
+                var pivotY = relative.top > 0 ? Math.floor(relative.top / _this.opts.cellHeight) : 0;
+                rot.x = n.x + pivotX - (n.h - (pivotY + 1));
+                rot.y = (n.y + pivotY) - pivotX;
+            }
+            _this.update(el, rot);
+        });
+        return this;
+    };
     /**
      * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
      * @param value margin value
@@ -1413,8 +1465,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             // prevent added nodes from also triggering 'change' event (which is called next)
             this.engine.addedNodes.forEach(function (n) { delete n._dirty; });
-            this._triggerEvent('added', this.engine.addedNodes);
+            var addedNodes = __spreadArray([], this.engine.addedNodes, true);
             this.engine.addedNodes = [];
+            this._triggerEvent('added', addedNodes);
         }
         return this;
     };
@@ -1424,8 +1477,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (this.engine.batchMode)
             return this;
         if ((_a = this.engine.removedNodes) === null || _a === void 0 ? void 0 : _a.length) {
-            this._triggerEvent('removed', this.engine.removedNodes);
+            var removedNodes = __spreadArray([], this.engine.removedNodes, true);
             this.engine.removedNodes = [];
+            this._triggerEvent('removed', removedNodes);
         }
         return this;
     };
@@ -2025,7 +2079,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         };
         dd.droppable(this.el, {
             accept: function (el) {
-                var node = el.gridstackNode;
+                var node = el.gridstackNode || _this._readAttr(el, false);
                 // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
                 if ((node === null || node === void 0 ? void 0 : node.grid) === _this)
                     return true;
@@ -2040,7 +2094,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                     var selector = (_this.opts.acceptWidgets === true ? '.grid-stack-item' : _this.opts.acceptWidgets);
                     canAccept = el.matches(selector);
                 }
-                // finally check to make sure we actually have space left #1571
+                // finally check to make sure we actually have space left #1571 #2633
                 if (canAccept && node && _this.opts.maxRow) {
                     var n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
                     canAccept = _this.engine.willItFit(n);
@@ -2102,7 +2156,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 node._temporaryRemoved = true; // so we can insert it
             }
             // clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)
-            _this._itemRemoving(node.el, false);
+            GridStack._itemRemoving(node.el, false);
             dd.on(el, 'drag', onDrag);
             // make sure this is called at least once when going fast #1578
             onDrag(event, el, helper);
@@ -2131,7 +2185,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
              * end - releasing the mouse
              */
             .on(this.el, 'drop', function (event, el, helper) {
-            var _a, _b;
+            var _a, _b, _c;
             var node = el.gridstackNode;
             // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
             if ((node === null || node === void 0 ? void 0 : node.grid) === _this && !node._isExternal)
@@ -2163,7 +2217,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this.engine.cleanupNode(node); // removes all internal _xyz values
                 node.grid = _this;
             }
-            delete node.grid._isTemp;
+            (_a = node.grid) === null || _a === void 0 ? true : delete _a._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
@@ -2182,7 +2236,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 return false;
             el.gridstackNode = node;
             node.el = el;
-            var subGrid = (_b = (_a = node.subGrid) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.gridstack; // set when actual sub-grid present
+            var subGrid = (_c = (_b = node.subGrid) === null || _b === void 0 ? void 0 : _b.el) === null || _c === void 0 ? void 0 : _c.gridstack; // set when actual sub-grid present
             // @ts-ignore
             utils_1.Utils.copyPos(node, _this._readAttr(_this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
             utils_1.Utils.removePositioningStyles(el); // @ts-ignore
@@ -2203,34 +2257,33 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             // delay adding animation back
             if (noAnim)
-                setTimeout(function () { return _this.setAnimation(_this.opts.animate); });
+                _this.setAnimation(_this.opts.animate, true);
             return false; // prevent parent from receiving msg (which may be grid as well)
         });
         return this;
     };
     /** @internal mark item for removal */
-    GridStack.prototype._itemRemoving = function (el, remove) {
+    GridStack._itemRemoving = function (el, remove) {
         var node = el ? el.gridstackNode : undefined;
-        if (!node || !node.grid || el.classList.contains(this.opts.removableOptions.decline))
+        if (!(node === null || node === void 0 ? void 0 : node.grid) || el.classList.contains(node.grid.opts.removableOptions.decline))
             return;
         remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;
         remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');
     };
     /** @internal called to setup a trash drop zone if the user specifies it */
     GridStack.prototype._setupRemoveDrop = function () {
-        var _this = this;
-        if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {
-            var trashEl = document.querySelector(this.opts.removable);
-            if (!trashEl)
-                return this;
-            // only register ONE drop-over/dropout callback for the 'trash', and it will
-            // update the passed in item and parent grid because the 'trash' is a shared resource anyway,
-            // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)
-            if (!dd.isDroppable(trashEl)) {
-                dd.droppable(trashEl, this.opts.removableOptions)
-                    .on(trashEl, 'dropover', function (event, el) { return _this._itemRemoving(el, true); })
-                    .on(trashEl, 'dropout', function (event, el) { return _this._itemRemoving(el, false); });
-            }
+        if (typeof this.opts.removable !== 'string')
+            return this;
+        var trashEl = document.querySelector(this.opts.removable);
+        if (!trashEl)
+            return this;
+        // only register ONE static drop-over/dropout callback for the 'trash', and it will
+        // update the passed in item and parent grid because the '.trash' is a shared resource anyway,
+        // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)
+        if (!this.opts.staticGrid && !dd.isDroppable(trashEl)) {
+            dd.droppable(trashEl, this.opts.removableOptions)
+                .on(trashEl, 'dropover', function (event, el) { return GridStack._itemRemoving(el, true); })
+                .on(trashEl, 'dropout', function (event, el) { return GridStack._itemRemoving(el, false); });
         }
         return this;
     };
@@ -2338,6 +2391,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // @ts-ignore
         this._writePosAttr(this.placeholder, node);
         this.el.appendChild(this.placeholder);
+        this.placeholder.gridstackNode = node;
         // console.log('_onStartMoving placeholder') // TEST
         // if the element is inside a grid, it has already been scaled
         // we can use that as a scale reference
@@ -2369,11 +2423,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved
             node._moving = true; // AFTER, mark as moving object (wanted fix location before)
         }
-        // set the min/max resize info
+        // set the min/max resize info taking into account the column count and position (so we don't resize outside the grid)
         this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft);
         if (event.type === 'resizestart') {
-            dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))
-                .resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
+            dd.resizable(el, 'option', 'minWidth', cellWidth * Math.min(node.minW || 1, this.getColumn() - node.x))
+                .resizable(el, 'option', 'minHeight', cellHeight * Math.min(node.minH || 1, (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - node.y));
             if (node.maxW) {
                 dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
             }
@@ -2487,7 +2541,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged
         if (this.opts.removable === true) { // boolean vs a class string
             // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so
-            this._itemRemoving(el, true);
+            GridStack._itemRemoving(el, true);
         }
         // finally if item originally came from another grid, but left us, restore things back to prev info
         if (el._gridstackNodeOrig) {
@@ -2511,7 +2565,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 = '10.1.1';
+    GridStack.GDRev = '10.2.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map