gridstack 11.0.1 → 11.1.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 11.0.1
+ * GridStack 11.1.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -154,6 +154,8 @@ class GridStack {
     constructor(el, opts = {}) {
         this.el = el;
         this.opts = opts;
+        /** time to wait for animation (if enabled) to be done so content sizing can happen */
+        this.animationDelay = 300 + 10;
         /** @internal */
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
@@ -161,7 +163,7 @@ class GridStack {
         /** @internal meant to store the scale of the active grid */
         this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 };
         el.gridstack = this;
-        opts = opts || {}; // handles null/undefined/0
+        this.opts = opts = opts || {}; // handles null/undefined/0
         if (!el.classList.contains('grid-stack')) {
             this.el.classList.add('grid-stack');
         }
@@ -370,7 +372,7 @@ class GridStack {
         const domAttr = this._readAttr(el);
         Utils.defaults(w, domAttr);
         this.engine.prepareNode(w);
-        this._writeAttr(el, w);
+        // this._writeAttr(el, w); why write possibly incorrect values back when makeWidget() will ?
         this.el.appendChild(el);
         this.makeWidget(el, w);
         return el;
@@ -459,6 +461,8 @@ class GridStack {
                 subGrid.makeWidget(node.el, node);
             }
         }
+        // if sizedToContent, we need to re-calc the size of ourself
+        this.resizeToContentCheck(false, node);
         return subGrid;
     }
     /**
@@ -574,6 +578,8 @@ class GridStack {
         // the original wanted layout so we can scale back up correctly #1471
         let maxColumn = 0;
         items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w); });
+        if (maxColumn > this.engine.defaultColumn)
+            this.engine.defaultColumn = maxColumn;
         if (maxColumn > column) {
             this._ignoreLayoutsNodeChange = true; // skip layout update
             this.engine.cacheLayout(items, maxColumn, true);
@@ -629,8 +635,9 @@ class GridStack {
                 }
                 // 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)) {
+                if (Utils.samePos(item, w) && this.engine.nodes.length > 1) {
                     this.moveNode(item, { ...w, forceCollide: true });
+                    Utils.copyPos(w, item); // use possily updated values before update() is called next (no-op since already moved)
                 }
                 this.update(item.el, w);
                 if (w.subGridOpts?.children) { // update any sub grid as well
@@ -929,8 +936,7 @@ class GridStack {
      *
      * @example
      * const grid = GridStack.init();
-     * grid.el.appendChild('<div id="1" gs-w="3"></div>');
-     * grid.el.appendChild('<div id="2"></div>');
+     * grid.el.innerHtml = '<div id="1" gs-w="3"></div><div id="2"></div>';
      * grid.makeWidget('1');
      * grid.makeWidget('2', {w:2, content: 'hello'});
      */
@@ -1136,7 +1142,6 @@ class GridStack {
             const w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
             this.engine.nodeBoundFix(w);
             delete w.autoPosition;
-            delete w.id;
             // move/resize widget if anything changed
             const keys = ['x', 'y', 'w', 'h'];
             let m;
@@ -1155,6 +1160,7 @@ class GridStack {
             if (w.content !== undefined) {
                 const itemContent = el.querySelector('.grid-stack-item-content');
                 if (itemContent && itemContent.textContent !== w.content) {
+                    n.content = w.content;
                     GridStack.renderCB(itemContent, w);
                     // restore any sub-grid back
                     if (n.subGrid?.el) {
@@ -1180,7 +1186,13 @@ class GridStack {
             if (m) {
                 const widthChanged = (m.w !== undefined && m.w !== n.w);
                 this.moveNode(n, m);
-                this.resizeToContentCheck(widthChanged, n); // wait for animation if we changed width
+                if (widthChanged && n.subGrid) {
+                    // if we're animating the client size hasn't changed yet, so force a change (not exact size)
+                    n.subGrid.onResize(this.hasAnimationCSS() ? n.w : undefined);
+                }
+                else {
+                    this.resizeToContentCheck(widthChanged, n);
+                }
                 delete n._orig; // clear out original position now that we moved #2669
             }
             if (m || changed) {
@@ -1607,19 +1619,19 @@ class GridStack {
      * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
      * or `sizeToContent` gridItem options.
      */
-    onResize() {
-        if (!this.el?.clientWidth)
+    onResize(clientWidth = this.el?.clientWidth) {
+        if (!clientWidth)
             return; // return if we're gone or no size yet (will get called again)
-        if (this.prevWidth === this.el.clientWidth)
+        if (this.prevWidth === clientWidth)
             return; // no-op
-        this.prevWidth = this.el.clientWidth;
-        // console.log('onResize ', this.el.clientWidth);
+        this.prevWidth = clientWidth;
+        // console.log('onResize ', clientWidth);
         this.batchUpdate();
         // see if we're nested and take our column count from our parent....
         let columnChanged = false;
         if (this._autoColumn && this.parentGridNode) {
             if (this.opts.column !== this.parentGridNode.w) {
-                this.column(this.parentGridNode.w, 'none');
+                this.column(this.parentGridNode.w, this.opts.layout || 'list');
                 columnChanged = true;
             }
         }
@@ -1648,7 +1660,7 @@ class GridStack {
         // update any gridItem height with sizeToContent, but wait for DOM $animation_speed to settle if we changed column count
         // TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ?
         if (delay && this.hasAnimationCSS())
-            return setTimeout(() => this.resizeToContentCheck(false, n), 300 + 10);
+            return setTimeout(() => this.resizeToContentCheck(false, n), this.animationDelay);
         if (n) {
             if (Utils.shouldSizeToContent(n))
                 this.resizeToContentCBCheck(n.el);
@@ -2465,6 +2477,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 = '11.0.1';
+GridStack.GDRev = '11.1.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map