loding nested grids small then growing

* fix #1538
* we now call resize on nested grids when window changes size
* we also call nested grid of the currently being resized item as it happens (live)
* updated nested.html to show more complete case, with custom column and different oneColumn constrain

Author: adumesny

demo/nested.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Nested grids demo (ES6)</title>
   <link rel="stylesheet" href="demo.css"/>
+  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
   <script src="../dist/gridstack-jq.js"></script>
   <style type="text/css">
     .grid-stack .grid-stack {
@@ -20,32 +21,34 @@
   <div class="container-fluid">
     <h1>Nested grids demo</h1>
     <p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
-    <p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now, otherwise recommend you use h5 version.</p>
+    <p>Note: initial v3 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now, otherwise recommend you use h5 version.</p>
     <a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
     <a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
     <br><br>
     <!-- grid will be added here -->
   </div>
 
   <script type="text/javascript">
-    let sub1 = [ {w:3}, {w:3}, {w:3}, {w:3}, {w:3}, {w:3}];
-    let sub2 = [ {w:3}, {x:0, y:1, w:3}];
+    let sub1 = [ {x:0, y:0}, {x:1, y:0}, {x:2, y:0}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
+    let sub2 = [ {x:0, y:0}, {x:0, y:1, w:2}];
     let count = 0;
     [...sub1, ...sub2].forEach(d => d.content = String(count++));
     let subOptions = {
+      cellHeight: 30,
+      column: 4, // make sure to include gridstack-extra.min.css
       itemClass: 'sub', // style sub items differently and use to prevent dragging in/out
       acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted, otherwise grid-items causes all sort of issues
-      disableOneColumnMode: true, // nested are small, but still want N columns
+      minWidth: 300, // min to go 1 column mode
       margin: 1
     };
-    let layout = {cellHeight: 70, children: [
-      {w:1, content: 'regular item'},
+    let opts = {cellHeight: 70, children: [
+      {y:0, content: 'regular item'},
       {x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}},
       {x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, class: 'nested2', ...subOptions}},
     ]};
 
     // create and load it all from JSON above
-    GridStack.addGrid(document.querySelector('.container-fluid'), layout);
+    GridStack.addGrid(document.querySelector('.container-fluid'), opts);
 
     addNewWidget = function(selector) {
       grid = document.querySelector(selector).gridstack;

doc/CHANGES.md

@@ -54,6 +54,7 @@ Change log
 - new `cellHeight:initial` which makes the cell squares initially, but doesn't change as windows resizes (better performance)
 - new grid option `cellHeightThrottle` (100ms) to control throttle of auto sizing triggers
 - fix [1600](https://github.com/gridstack/gridstack.js/issues/1600) height too small with `cellHeight:auto` loading in 1 column. Now detect we load at 1 column and size accordingly (default 'auto' could make big 700x700 cells, so explicit px might still be wanted)
+- fix [1538](https://github.com/gridstack/gridstack.js/issues/1538) loading nested into small size and sizing back up
 
 ## 3.2.0 (2021-1-25)
 

src/gridstack-dd.ts

@@ -395,6 +395,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
     let y = Math.round(ui.position.top / cellHeight);
     let w: number;
     let h: number;
+    let resizing: boolean;
 
     if (event.type === 'drag') {
       let distance = ui.position.top - node._prevYPix;
@@ -437,6 +438,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       w = Math.round(ui.size.width / cellWidth);
       h = Math.round(ui.size.height / cellHeight);
       if (w === node.w && h === node.h) return;
+      resizing = true;
     }
 
     if (!this.engine.canMoveNode(node, x, y, w, h)) return;
@@ -445,6 +447,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
     node._lastTriedW = w;
     node._lastTriedH = h;
     this.engine.moveNode(node, x, y, w, h);
+    if (resizing && node.subGrid) { (node.subGrid as GridStack).onParentResize(); }
     this._updateContainerHeight();
   }
 
@@ -495,10 +498,12 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
 
     this.engine.endUpdate();
 
+    /* doing it on live resize instead
     // if we re-sized a nested grid item, let the children resize as well
     if (event.type === 'resizestop') {
-      this._resizeNestedGrids(target);
+      if (target.gridstackNode.subGrid) {(target.gridstackNode.subGrid as GridStack).onParentResize()}
     }
+    */
   }
 
   GridStackDD.get()

src/gridstack.ts

@@ -618,7 +618,6 @@ export class GridStack {
     if (update) {
       this._updateStyles(true, this.getRow()); // true = force re-create, for that # of rows
     }
-    this._resizeNestedGrids(this.el);
     return this;
   }
 
@@ -1222,16 +1221,6 @@ export class GridStack {
     return this;
   }
 
-  /** called to resize children nested grids when we/item resizes */
-  private _resizeNestedGrids(target: HTMLElement): GridStack {
-    target.querySelectorAll('.grid-stack').forEach((el: GridHTMLElement) => {
-      if (el.gridstack) {
-        el.gridstack.onParentResize();
-      }});
-    return this;
-  }
-
-
   /** @internal */
   private _prepareElement(el: GridItemHTMLElement, triggerAddEvent = false, node?: GridStackNode): GridStack {
     if (!node) {
@@ -1337,15 +1326,14 @@ export class GridStack {
    */
   public onParentResize(): GridStack {
     if (!this.el || !this.el.clientWidth) return; // return if we're gone or no size yet (will get called again)
-    let changedOneColumn = false;
     let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.minWidth;
+    let changedOneColumn = false;
 
     if (!this._oneColumnMode !== !oneColumn) { // use ! (negate) so we can check undefined == false vs true
       this._oneColumnMode = oneColumn;
       changedOneColumn = true;
       if (this.opts.animate) { this.setAnimation(false); } // 1 <-> 12 is too radical, turn off animation
       this.column(oneColumn ? 1 : this._prevColumn);
-      this._resizeNestedGrids(this.el);
       if (this.opts.animate) { this.setAnimation(true); }
     }
 
@@ -1362,6 +1350,11 @@ export class GridStack {
       }
     }
 
+    // finally update any nested grids
+    this.engine.nodes.forEach(n => {
+      if (n.subGrid) {(n.subGrid as GridStack).onParentResize()}
+    });
+
     return this;
   }