addWidget() while in 1 column fix

* fix #1655
* `addWidget()` while in 1 column now remembers original wanted width
(saves in 12 column layout)
* removed uneeded _oneColumnMode (check for opts.column === 1)
* updated responsive demo to add a 4x1 widget
(test while in 1 column, size up back to 12 column)

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,6 +56,7 @@ Change log
 ## 4.1.0-dev
 
 - fix [#1704](https://github.com/gridstack/gridstack.js/issues/1704) scrollbar fix broken in 4.x
+- 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;
@@ -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;
@@ -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);