gridstack 11.0.1 → 11.1.1

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 11.0.1
+ * GridStack 11.1.1
  * 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;
@@ -399,7 +401,12 @@ class GridStack {
             grid = grid.parentGridNode?.grid;
         }
         //... and set the create options
-        ops = Utils.cloneDeep({ ...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts || {}) });
+        ops = Utils.cloneDeep({
+            // by default sub-grid inherit from us | parent, other than id, children, etc...
+            ...this.opts, id: undefined, children: undefined, column: 'auto', columnOpts: undefined, layout: 'list', subGridOpts: undefined,
+            ...(subGridTemplate || {}),
+            ...(ops || node.subGridOpts || {})
+        });
         node.subGridOpts = ops;
         // if column special case it set, remember that flag and set default
         let autoColumn;
@@ -459,6 +466,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 +583,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 +640,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 +941,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 +1147,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 +1165,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 +1191,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) {
@@ -1236,8 +1253,11 @@ class GridStack {
         const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
         let wantedH;
         if (n.subGrid) {
-            // sub-grid - use their actual row count * their cell height
+            // sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text)
             wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
+            const subRec = n.subGrid.el.getBoundingClientRect();
+            const parentRec = n.subGrid.el.parentElement.getBoundingClientRect();
+            wantedH += subRec.top - parentRec.top;
         }
         else if (n.subGridOpts?.children?.length) {
             // not sub-grid just yet (case above) wait until we do
@@ -1607,19 +1627,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 +1668,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 +2485,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.1';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map