Merge pull request #2502 from adumesny/master

doContentResize called in load()

Author: adumesny

demo/sizeToContent.html

@@ -21,6 +21,8 @@ <h1>Cell sizeToContent options demo</h1>
     <p>new 9.x feature that size the items to fit their content height as to not have scroll bars
       (unless `sizeToContent:false` in C: case). Defaulting to different initial size (see code) to show grow/shrink behavior.</p>
     <div>
+      <a onClick="clearGrid()" class="btn btn-primary" href="#">clear</a>
+      <a onClick="load()" class="btn btn-primary" href="#">load</a>
       column:
       <a onClick="column(8)" class="btn btn-primary" href="#">8</a>
       <a onClick="column(12)" class="btn btn-primary" href="#">12</a>
@@ -46,14 +48,22 @@ <h1>Cell sizeToContent options demo</h1>
     let grid = GridStack.init(opts);
     let text ='some very large content that will normally not fit in the window.'
     text = text + text;
+    let count = 0;
     let items = [
       {x:0, y:0, w:2, content: `<div>A no h: ${text}</div>`},
       {x:2, y:0, w:1, h:2, content: '<div>B: shrink h=2</div>'}, // make taller than needed upfront
       {x:3, y:0, w:2, sizeToContent: false, content: `<div>C: WILL SCROLL. ${text}</div>`}, // prevent this from fitting testing
       {x:0, y:1, w:3, content: `<div>D no h: ${text} ${text}</div>`},
       {x:3, y:1, w:2, sizeToContent:3, content: `<div>E sizeToContent=3 <button onClick="more()">more</button><button onClick="less()">less</button><div id="dynContent">${text} ${text} ${text}</div></div>`}    ];
+    items.forEach(n => n.id = String(count++));
     grid.load(items);
 
+    function clearGrid() {
+      grid.removeAll();
+    }
+    function load() {
+      grid.load(items);
+    }
     function column(n) {
       grid.column(n, 'none');
     }
@@ -85,6 +95,10 @@ <h1>Cell sizeToContent options demo</h1>
       let el = cont.parentElement.parentElement.parentElement;
       grid.resizeToContent(el);
     }
+
+    // TEST
+    // grid.update(grid.engine.nodes[0].el, {x:7});
+    // load();
   </script>
 </body>
 </html>

src/gridstack.ts

@@ -693,6 +693,7 @@ export class GridStack {
     }
 
     // now add/update the widgets
+    let widthChanged = false;
     items.forEach(w => {
       let item = Utils.find(this.engine.nodes, w.id);
       if (item) {
@@ -702,6 +703,7 @@ export class GridStack {
           w.h = w.h || item.h;
           this.engine.findEmptyPosition(w);
         }
+        widthChanged = widthChanged || (w.w !== undefined && w.w !== item.w);
         this.update(item.el, w);
         if (w.subGridOpts?.children) { // update any sub grid as well
           let sub = item.el.querySelector('.grid-stack') as GridHTMLElement;
@@ -716,6 +718,7 @@ export class GridStack {
     });
 
     this.engine.removedNodes = removed;
+    this.doContentResize(widthChanged, true); // we only need to wait for animation if we changed any widths
     this.batchUpdate(false);
 
     // after commit, clear that flag
@@ -1220,12 +1223,13 @@ export class GridStack {
       // check for content changing
       if (w.content !== undefined) {
         const itemContent = el.querySelector('.grid-stack-item-content');
-        if (!itemContent || itemContent.innerHTML === w.content) return;
-        itemContent.innerHTML = w.content;
-        // restore any sub-grid back
-        if (n.subGrid?.el) {
-          itemContent.appendChild(n.subGrid.el);
-          if (!n.subGrid.opts.styleInHead) n.subGrid._updateStyles(true); // force create
+        if (itemContent && itemContent.innerHTML !== w.content) {
+          itemContent.innerHTML = w.content;
+          // restore any sub-grid back
+          if (n.subGrid?.el) {
+            itemContent.appendChild(n.subGrid.el);
+            if (!n.subGrid.opts.styleInHead) n.subGrid._updateStyles(true); // force create
+          }
         }
         delete w.content;
       }