gridstack 8.2.0 → 8.2.2

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 8.2.0
+ * GridStack 8.2.2
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -327,6 +327,10 @@ class GridStack {
         }
         if (!el)
             return;
+        // if the caller ended up initializing the widget in addRemoveCB, or we stared with one already, skip the rest
+        node = el.gridstackNode;
+        if (node && el.parentElement === this.el && this.engine.nodes.find(n => n._id === node._id))
+            return el;
         // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
         // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
         // So make sure we load any DOM attributes that are not specified in passed in options (which override)
@@ -341,21 +345,7 @@ class GridStack {
         else {
             this.el.appendChild(el);
         }
-        // similar to makeWidget() that doesn't read attr again and worse re-create a new node and loose any _id
-        this._prepareElement(el, true, options);
-        this._updateContainerHeight();
-        // see if there is a sub-grid to create
-        if (node.subGridOpts) {
-            this.makeSubGrid(node.el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass
-        }
-        // if we're adding an item into 1 column (_prevColumn is set only when going to 1) make sure
-        // we don't override the larger 12 column layout that was already saved. #1985
-        if (this._prevColumn && this.opts.column === 1) {
-            this._ignoreLayoutsNodeChange = true;
-        }
-        this._triggerAddEvent();
-        this._triggerChangeEvent();
-        delete this._ignoreLayoutsNodeChange;
+        this.makeWidget(el, options);
         return el;
     }
     /**
@@ -580,7 +570,7 @@ class GridStack {
         }
         // now add/update the widgets
         items.forEach(w => {
-            let item = (w.id || w.id === 0) ? this.engine.nodes.find(n => n.id === w.id) : undefined;
+            let item = (w.id !== undefined) ? this.engine.nodes.find(n => n.id === w.id) : undefined;
             if (item) {
                 this.update(item.el, w);
                 if (w.subGridOpts?.children) { // update any sub grid as well
@@ -627,7 +617,7 @@ class GridStack {
         // else get first cell height
         let el = this.el.querySelector('.' + this.opts.itemClass);
         if (el) {
-            let height = Utils.toNumber(el.getAttribute('gs-h'));
+            let height = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
             return Math.round(el.offsetHeight / height);
         }
         // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)
@@ -854,8 +844,19 @@ class GridStack {
         let el = GridStack.getElement(els);
         this._prepareElement(el, true, options);
         this._updateContainerHeight();
+        // see if there is a sub-grid to create
+        const node = el.gridstackNode;
+        if (node.subGridOpts) {
+            this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass
+        }
+        // if we're adding an item into 1 column (_prevColumn is set only when going to 1) make sure
+        // we don't override the larger 12 column layout that was already saved. #1985
+        if (this._prevColumn && this.opts.column === 1) {
+            this._ignoreLayoutsNodeChange = true;
+        }
         this._triggerAddEvent();
         this._triggerChangeEvent();
+        delete this._ignoreLayoutsNodeChange;
         return el;
     }
     /**
@@ -996,9 +997,9 @@ class GridStack {
      * @param recurse true (default) if sub-grids also get updated
      */
     setStatic(val, updateClass = true, recurse = true) {
-        if (this.opts.staticGrid === val)
+        if (!!this.opts.staticGrid === val)
             return this;
-        this.opts.staticGrid = val;
+        val ? this.opts.staticGrid = true : delete this.opts.staticGrid;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this.engine.nodes.forEach(n => {
@@ -1313,16 +1314,12 @@ class GridStack {
         return this;
     }
     /** @internal call to read any default attributes from element */
-    _readAttr(el) {
+    _readAttr(el, clearDefaultAttr = true) {
         let n = {};
         n.x = Utils.toNumber(el.getAttribute('gs-x'));
         n.y = Utils.toNumber(el.getAttribute('gs-y'));
         n.w = Utils.toNumber(el.getAttribute('gs-w'));
         n.h = Utils.toNumber(el.getAttribute('gs-h'));
-        if (!(n.w > 1))
-            el.removeAttribute('gs-w');
-        if (!(n.h > 1))
-            el.removeAttribute('gs-h');
         n.autoPosition = Utils.toBool(el.getAttribute('gs-auto-position'));
         n.noResize = Utils.toBool(el.getAttribute('gs-no-resize'));
         n.noMove = Utils.toBool(el.getAttribute('gs-no-move'));
@@ -1330,17 +1327,24 @@ class GridStack {
         n.id = el.getAttribute('gs-id');
         // read but never written out
         n.maxW = Utils.toNumber(el.getAttribute('gs-max-w'));
-        if (n.maxW)
-            el.removeAttribute('gs-max-w');
         n.minW = Utils.toNumber(el.getAttribute('gs-min-w'));
-        if (n.minW)
-            el.removeAttribute('gs-min-w');
         n.maxH = Utils.toNumber(el.getAttribute('gs-max-h'));
-        if (n.maxH)
-            el.removeAttribute('gs-max-h');
         n.minH = Utils.toNumber(el.getAttribute('gs-min-h'));
-        if (n.minH)
-            el.removeAttribute('gs-min-h');
+        // v8.x optimization to reduce un-needed attr that don't render or are default CSS
+        if (clearDefaultAttr) {
+            if (n.w === 1)
+                el.removeAttribute('gs-w');
+            if (n.h === 1)
+                el.removeAttribute('gs-h');
+            if (n.maxW)
+                el.removeAttribute('gs-max-w');
+            if (n.minW)
+                el.removeAttribute('gs-min-w');
+            if (n.maxH)
+                el.removeAttribute('gs-max-h');
+            if (n.minH)
+                el.removeAttribute('gs-min-h');
+        }
         // remove any key not found (null or false which is default)
         for (const key in n) {
             if (!n.hasOwnProperty(key))
@@ -1531,40 +1535,34 @@ class GridStack {
      * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
      * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
      * @param els widget or selector to modify.
-     * @param val if true widget will be draggable.
+     * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static.
      */
     movable(els, val) {
         if (this.opts.staticGrid)
             return this; // can't move a static grid!
         GridStack.getElements(els).forEach(el => {
-            let node = el.gridstackNode;
-            if (!node)
+            let n = el.gridstackNode;
+            if (!n)
                 return;
-            if (val)
-                delete node.noMove;
-            else
-                node.noMove = true;
-            this._prepareDragDropByNode(node); // init DD if need be, and adjust
+            val ? delete n.noMove : n.noMove = true;
+            this._prepareDragDropByNode(n); // init DD if need be, and adjust
         });
         return this;
     }
     /**
      * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
      * @param els  widget or selector to modify
-     * @param val  if true widget will be resizable.
+     * @param val  if true widget will be resizable, assuming the parent grid isn't noResize or static.
      */
     resizable(els, val) {
         if (this.opts.staticGrid)
             return this; // can't resize a static grid!
         GridStack.getElements(els).forEach(el => {
-            let node = el.gridstackNode;
-            if (!node)
+            let n = el.gridstackNode;
+            if (!n)
                 return;
-            if (val)
-                delete node.noResize;
-            else
-                node.noResize = true;
-            this._prepareDragDropByNode(node); // init DD if need be, and adjust
+            val ? delete n.noResize : n.noResize = true;
+            this._prepareDragDropByNode(n); // init DD if need be, and adjust
         });
         return this;
     }
@@ -1582,7 +1580,7 @@ class GridStack {
         if (this.opts.staticGrid)
             return;
         this.enableMove(false, recurse);
-        this.enableResize(false, recurse); // @ts-ignore
+        this.enableResize(false, recurse);
         this._triggerEvent('disable');
         return this;
     }
@@ -1599,20 +1597,20 @@ class GridStack {
         if (this.opts.staticGrid)
             return;
         this.enableMove(true, recurse);
-        this.enableResize(true, recurse); // @ts-ignore
+        this.enableResize(true, recurse);
         this._triggerEvent('enable');
         return this;
     }
     /**
-     * Enables/disables widget moving. No-op for static grids.
+     * Enables/disables widget moving. No-op for static grids, and locally defined items still overrule
      * @param recurse true (default) if sub-grids also get updated
      */
     enableMove(doEnable, recurse = true) {
         if (this.opts.staticGrid)
             return this; // can't move a static grid!
-        this.opts.disableDrag = !doEnable; // FIRST before we update children as grid overrides #1658
+        doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658
         this.engine.nodes.forEach(n => {
-            this.movable(n.el, doEnable);
+            this._prepareDragDropByNode(n);
             if (n.subGrid && recurse)
                 n.subGrid.enableMove(doEnable, recurse);
         });
@@ -1625,9 +1623,9 @@ class GridStack {
     enableResize(doEnable, recurse = true) {
         if (this.opts.staticGrid)
             return this; // can't size a static grid!
-        this.opts.disableResize = !doEnable; // FIRST before we update children as grid overrides #1658
+        doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658
         this.engine.nodes.forEach(n => {
-            this.resizable(n.el, doEnable);
+            this._prepareDragDropByNode(n);
             if (n.subGrid && recurse)
                 n.subGrid.enableResize(doEnable, recurse);
         });
@@ -1733,8 +1731,8 @@ class GridStack {
             cellWidth = this.cellWidth();
             cellHeight = this.getCellHeight(true);
             // load any element attributes if we don't have a node
-            if (!node) { // @ts-ignore private read only on ourself
-                node = this._readAttr(el);
+            if (!node) {
+                node = this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354
             }
             if (!node.grid) {
                 node._isExternal = true;
@@ -2147,6 +2145,6 @@ class GridStack {
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '8.2.0';
+GridStack.GDRev = '8.2.2';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map