1 column edit propagation fixes

* re-order in 1 column no longer affect other layouts (hard to predict). only resize/add/remove carry over.
* more fix #37 and part2 of #1120
* column.html demo has been updated to support item delete.

Author: Alain Dumesny

demo/column.html

@@ -63,22 +63,21 @@ <h1>setColumn() grid demo</h1>
       ];
       var count = 0;
       grid.batchUpdate();
-      for (count=0; count<4;) {
-        var n = items[count];
-        grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + (n.text ? n.text : '') + '</div></div>'), n);
-      };
+      addWidget(); addWidget(); addWidget(); addWidget();
       grid.commit();
 
-      $('#add-widget').click(function() {
+      function addWidget() {
         var n = items[count] || {
           x: Math.round(12 * Math.random()),
           y: Math.round(5 * Math.random()),
           width: Math.round(1 + 3 * Math.random()),
           height: Math.round(1 + 3 * Math.random())
         };
-        grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + (n.text ? n.text : '') + '</div></div>'), n);
-      });
+        grid.addWidget($('<div><div class="grid-stack-item-content"><button onclick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>'
+          + count++ + (n.text ? n.text : '') + '</div></div>'), n);
+      };
 
+      $('#add-widget').click(function() { addWidget() });
       $('#1column').click(function() { delete grid.opts.oneColumnModeDomSort; grid.setColumn(1); $text.text(1);});
       $('#1columnDOM').click(function() { grid.opts.oneColumnModeDomSort = true; grid.setColumn(1); $text.text('1 DOM');});
       $('#2column').click(function() { grid.setColumn(2); $text.text(2);});

doc/CHANGES.md

@@ -31,6 +31,7 @@ Change log
 
 - add `oneColumnModeDomSort` true|false to let you specify a custom layout (use dom order instead of x,y) for oneColumnMode `setColumn(1)` [#713](https://github.com/gridstack/gridstack.js/issues/713)
 - fix oneColumnMode to only restore if we auto went to it as window sizes up [#1125](https://github.com/gridstack/gridstack.js/pull/1125)
+- re-order in 1 column no longer affect other layouts (hard to predict). only resize/add/remove carry over [#1127](https://github.com/gridstack/gridstack.js/pull/1127)
 
 ## v0.6.1 (2020-02-02)
 

src/gridstack.js

@@ -1801,20 +1801,21 @@
   GridStackEngine.prototype._layoutsNodesChange = function(nodes) {
     if (!this._layouts || this._ignoreLayoutsNodeChange) return;
     // remove smaller layouts - we will re-generate those on the fly... larger ones need to update
-    this._layouts.forEach(function(layout, i) {
-      if (!layout || i === this.column) return;
-      if (i < this.column) {
-        this._layouts[i] = undefined;
+    this._layouts.forEach(function(layout, column) {
+      if (!layout || column === this.column) return;
+      if (column < this.column) {
+        this._layouts[column] = undefined;
       }
-      else {
+      // move in 1 column don't propagate (hard to do right thing). height are re-used and add/remove carry over
+      else if (this.column !== 1) {
         // TODO: save the original x,y,w (h isn't cached) and see what actually changed to propagate correctly ?
         nodes.forEach(function(node) {
           var n = layout.find(function(l) { return l._id === node._id });
           if (!n) return;
-          var ratio = i / this.column;
+          var ratio = column / this.column;
           n.y = node.y;
           n.x = Math.round(node.x * ratio);
-          // width ???
+          n.width = Math.round(node.width * ratio);
         }, this);
       }
     }, this);