Merge pull request #1720 from adumesny/master

`addWidget()` while in 1 column fix

Author: adumesny

demo/responsive.html

@@ -24,6 +24,8 @@ <h1>Responsive grid demo</h1>
         <option value="scale">scale</option>
         <option value="none">none</option>
       </select>
+      <a onClick="grid.removeAll()" class="btn btn-primary" href="#">Clear</a>
+      <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
     </div>
     <br/>
     <div class="grid-stack">
@@ -58,6 +60,10 @@ <h1>Responsive grid demo</h1>
         text.innerHTML = 12;
       }
     };
+
+    function addWidget() {
+      grid.addWidget({x:0, y:0, w:4, content: '4x1'});
+    };
 
     let items = [ // our initial 12 column layout loaded first so we can compare
       {x: 0, y: 0, w: 2, content: '0'},

doc/CHANGES.md

@@ -56,7 +56,8 @@ Change log
 ## 4.1.0-dev
 
 - fix [#1704](https://github.com/gridstack/gridstack.js/issues/1704) scrollbar fix broken in 4.x
-- add [#1682](https://github.com/gridstack/gridstack.js/issues/1682) `addWidget()` now supports recursive grids like init/addGrid() does.
+- fix [#1655](https://github.com/gridstack/gridstack.js/issues/1655) `addWidget()` while in 1 column now remembers original wanted width
+- add [#1682](https://github.com/gridstack/gridstack.js/issues/1682) `addWidget()` now supports nested grids like init/addGrid() does.
 
 ## 4.1.0 (2021-4-7)
 

src/gridstack-engine.ts

@@ -349,6 +349,12 @@ export class GridStackEngine {
     if (node.minH) { node.h = Math.max(node.h, node.minH); }
 
     if (node.w > this.column) {
+      // if user loaded a larger than allowed widget for current # of columns,
+      // remember it's full width so we can restore back (1 -> 12 column) #1655
+      if (this.column < 12) {
+        node.w = Math.min(12, node.w);
+        this.cacheOneLayout(node, 12);
+      }
       node.w = this.column;
     } else if (node.w < 1) {
       node.w = 1;
@@ -484,7 +490,7 @@ export class GridStackEngine {
     // don't use 'faster' .splice(findIndex(),1) in case node isn't in our list, or in multiple times.
     this.nodes = this.nodes.filter(n => n !== node);
     return this._packNodes()
-      ._notify(node, removeDOM);
+      ._notify(node);
   }
 
   public removeAll(removeDOM = true): GridStackEngine {
@@ -493,7 +499,7 @@ export class GridStackEngine {
     removeDOM && this.nodes.forEach(n => n._removeDOM = true); // let CB remove actual HTML (used to set _id to null, but then we loose layout info)
     this.removedNodes = this.nodes;
     this.nodes = [];
-    return this._notify(this.removedNodes, removeDOM);
+    return this._notify(this.removedNodes);
   }
 
   /** checks if item can be moved (layout constrain) vs moveNode(), returning true if was able to move.
@@ -691,8 +697,9 @@ export class GridStackEngine {
         // we save the original x,y,w (h isn't cached) to see what actually changed to propagate better.
         // Note: we don't need to check against out of bound scaling/moving as that will be done when using those cache values.
         nodes.forEach(node => {
+          if (!node._orig) return; // didn't change (newly added ?)
           let n = layout.find(l => l._id === node._id);
-          if (!n) return this; // no cache for new nodes. Will use those values.
+          if (!n) return; // no cache for new nodes. Will use those values.
           let ratio = column / this.column;
           // Y changed, push down same amount
           // TODO: detect doing item 'swaps' will help instead of move (especially in 1 column mode)
@@ -828,6 +835,21 @@ export class GridStackEngine {
     return this;
   }
 
+  /**
+   * call to cache the given node layout internally to the given location so we can restore back when column changes size
+   * @param node single node to cache
+   * @param column corresponding column index to save it under
+   */
+  public cacheOneLayout(n: GridStackNode, column: number): GridStackEngine {
+    n._id = n._id || GridStackEngine._idSeq++;
+    let layout: Layout = {x: n.x, y: n.y, w: n.w, _id: n._id}
+    this._layouts = this._layouts || [];
+    this._layouts[column] = this._layouts[column] || [];
+    let index = this._layouts[column].findIndex(l => l._id === n._id);
+    index === -1 ? this._layouts[column].push(layout) : this._layouts[column][index] = layout;
+    return this;
+  }
+
 
   /** called to remove all internal values but the _id */
   public cleanupNode(node: GridStackNode): GridStackEngine {

src/gridstack.ts

@@ -211,8 +211,6 @@ export class GridStack {
   /** @internal */
   private _placeholder: HTMLElement;
   /** @internal */
-  private _oneColumnMode: boolean;
-  /** @internal */
   private _prevColumn: number;
   /** @internal */
   private _ignoreLayoutsNodeChange: boolean;
@@ -314,12 +312,12 @@ export class GridStack {
       column: this.opts.column,
       float: this.opts.float,
       maxRow: this.opts.maxRow,
-      onChange: (cbNodes, removeDOM = true) => {
+      onChange: (cbNodes) => {
         let maxH = 0;
         this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });
         cbNodes.forEach(n => {
           let el = n.el;
-          if (removeDOM && n._removeDOM) { // TODO: do we need to pass 'removeDOM' ?
+          if (n._removeDOM) {
             if (el) el.remove();
             delete n._removeDOM;
           } else {
@@ -498,7 +496,7 @@ export class GridStack {
    * see http://gridstackjs.com/demo/serialization.html
    **/
   public load(layout: GridStackWidget[], addAndRemove: boolean | ((g: GridStack, w: GridStackWidget, add: boolean) => GridItemHTMLElement)  = true): GridStack {
-    let items = GridStack.Utils.sort(layout, -1, this._prevColumn || this.opts.column);
+    let items = GridStack.Utils.sort([...layout], -1, this._prevColumn || this.opts.column); // make copy before we mod/sort
     this._insertNotAppend = true; // since create in reverse order...
 
     // if we're loading a layout into 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
@@ -1334,8 +1332,7 @@ export class GridStack {
     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;
+    if ((this.opts.column === 1) !== oneColumn) {
       changedOneColumn = true;
       if (this.opts.animate) { this.setAnimation(false); } // 1 <-> 12 is too radical, turn off animation
       this.column(oneColumn ? 1 : this._prevColumn);