gridstack 10.1.2 → 10.2.1

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.2
+ * GridStack 10.2.1
  * 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;
@@ -638,6 +638,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (addRemove === void 0) { addRemove = GridStack.addRemoveCB || true; }
         items = utils_1.Utils.cloneDeep(items); // so we can mod
         var column = this.getColumn();
+        // make sure size 1x1 (default) is present as it may need to override current sizes
+        items.forEach(function (n) { n.w = n.w || 1; n.h = n.h || 1; });
         // 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) {
@@ -733,10 +735,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         delete this._ignoreLayoutsNodeChange;
         delete this._insertNotAppend;
         prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
-        // delay adding animation back, but check to make sure grid (opt) is still around
+        // delay adding animation back
         if (noAnim && ((_a = this.opts) === null || _a === void 0 ? void 0 : _a.animate))
-            setTimeout(function () { if (_this.opts)
-                _this.setAnimation(_this.opts.animate); });
+            this.setAnimation(this.opts.animate, true);
         return this;
     };
     /**
@@ -1169,9 +1170,17 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * 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 {
@@ -1275,6 +1284,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 var widthChanged = (m.w !== undefined && m.w !== n.w);
                 _this.moveNode(n, m);
                 _this.resizeToContentCheck(widthChanged, n); // wait for animation if we changed width
+                delete n._orig; // clear out original position now that we moved #2669
             }
             if (m || changed) {
                 _this._writeAttr(el, n);
@@ -1286,12 +1296,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.
@@ -1365,6 +1378,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 (!utils_1.Utils.canBeRotated(n))
+                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
@@ -2153,7 +2188,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)
@@ -2185,7 +2220,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
@@ -2204,7 +2239,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
@@ -2223,10 +2258,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (_this._gsEventHandler['dropped']) {
                 _this._gsEventHandler['dropped'](__assign(__assign({}, event), { type: 'dropped' }), origNode && origNode.grid ? origNode : undefined, node);
             }
-            // delay adding animation back, but check to make sure grid (opt) is still around
+            // delay adding animation back
             if (noAnim)
-                setTimeout(function () { if (_this.opts)
-                    _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;
@@ -2360,6 +2394,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
@@ -2391,17 +2426,15 @@ 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));
-            if (node.maxW) {
-                dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
-            }
-            if (node.maxH) {
-                dd.resizable(el, 'option', 'maxHeight', cellHeight * node.maxH);
-            }
+            var colLeft = this.getColumn() - node.x;
+            var rowLeft = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - node.y;
+            dd.resizable(el, 'option', 'minWidth', cellWidth * Math.min(node.minW || 1, colLeft))
+                .resizable(el, 'option', 'minHeight', cellHeight * Math.min(node.minH || 1, rowLeft))
+                .resizable(el, 'option', 'maxWidth', cellWidth * Math.min(node.maxW || Number.MAX_SAFE_INTEGER, colLeft))
+                .resizable(el, 'option', 'maxHeight', cellHeight * Math.min(node.maxH || Number.MAX_SAFE_INTEGER, rowLeft));
         }
     };
     /** @internal handles actual drag/resize */
@@ -2533,7 +2566,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.2';
+    GridStack.GDRev = '10.2.1';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map