more setColumn() tweaks

* use a higher res layout when going up and cache is missing
(better to downsample say from 12 then up-sample from 1!)

Author: Alain Dumesny

spec/gridstack-spec.js

@@ -276,7 +276,7 @@ describe('gridstack', function() {
     });
   });
 
-  describe('grid.column', function() {
+  describe('grid.setColumn', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
     });
@@ -341,7 +341,7 @@ describe('gridstack', function() {
       expect(node2.width).toBe(4);
       expect(node2.height).toBe(4);
 
-      // one column will have item1, item2
+      // 1 column will have item1, item2
       grid.setColumn(1);
       node1 = $('#item1').data('_gridstack_node');
       node2 = $('#item2').data('_gridstack_node');
@@ -365,6 +365,27 @@ describe('gridstack', function() {
       expect(node3.width).toBe(1);
       expect(node3.height).toBe(1);
 
+      // 2 column will have item1, item2, item3 in 1 column still
+      grid.setColumn(2);
+      node1 = $('#item1').data('_gridstack_node');
+      node2 = $('#item2').data('_gridstack_node');
+      node3 = $('#item3').data('_gridstack_node');
+      expect(grid.opts.column).toBe(2);
+      expect(node1.x).toBe(0);
+      expect(node1.y).toBe(0);
+      expect(node1.width).toBe(1);
+      expect(node1.height).toBe(2);
+
+      expect(node2.x).toBe(1);
+      expect(node2.y).toBe(0);
+      expect(node2.width).toBe(1);
+      expect(node2.height).toBe(4);
+
+      expect(node3.x).toBe(0);
+      expect(node3.y).toBe(6);
+      expect(node3.width).toBe(1); // ??? could stay at 1 or take entire width still ?
+      expect(node3.height).toBe(1);      
+
       // back to 12 column and initial layout (other than new item3)
       grid.setColumn(12);
       expect(grid.opts.column).toBe(12);
@@ -383,7 +404,7 @@ describe('gridstack', function() {
 
       expect(node3.x).toBe(0);
       expect(node3.y).toBe(6);
-      expect(node3.width).toBe(12); // take entire row still
+      expect(node3.width).toBe(6); // ??? could 6 or taken entire width if it did above
       expect(node3.height).toBe(1);
     });
   });

src/gridstack.js

@@ -1833,18 +1833,39 @@
     //
     // now update the nodes positions, using the original ones with new ratio
     //
+
     if (doNotPropagate === true || this.grid.nodes.length === 0) { return; }
     var nodes = Utils.sort(this.grid.nodes, -1, oldColumn); // current column reverse sorting so we can insert last to front (limit collision)
 
     // cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data
     var copy = [nodes.length];
-    nodes.forEach(function(n, i) {copy[i] = {x: n.x, y: n.y, width: n.width, _id: n._id}}); // clone to preserve changing x,y,w,h live objects
-    this.grid._layouts = this.grid._layouts || {};
+    nodes.forEach(function(n, i) {copy[i] = {x: n.x, y: n.y, width: n.width, _id: n._id}}); // only thing we use change is x,y,w and need id to find it back
+    this.grid._layouts = this.grid._layouts || []; // use array to find larger quick
     this.grid._layouts[oldColumn] = copy;
 
-    // see if we have cached prev values and if so re-use those nodes that are still current...
-    var newNodes = [];
+    // see if we have cached previous layout. if NOT and we are going up in size (up-sampling) start with the largest layout we have (down-sampling) instead
+    var lastIndex = this.grid._layouts.length - 1;
     var cacheNodes = this.grid._layouts[column] || [];
+    if (cacheNodes.length === 0 && column > oldColumn && lastIndex > column) {
+      cacheNodes = this.grid._layouts[lastIndex] || [];
+      if (cacheNodes.length) {
+        // pretend we came from that larger column by assigning those values at starting point)
+        oldColumn = lastIndex;
+        cacheNodes.forEach(function(cacheNode) {
+          var j = nodes.findIndex(function(n) {return n && n._id === cacheNode._id});
+          if (j !== -1) {
+            // still current, use cache info positions
+            nodes[j].x = cacheNode.x;
+            nodes[j].y = cacheNode.y;
+            nodes[j].width = cacheNode.width;
+          }
+        });
+        cacheNodes = []; // we still don't have new column cached data... will generate from larger one.
+      }
+    }
+
+    // if we found cache re-use those nodes that are still current
+    var newNodes = [];
     cacheNodes.forEach(function(cacheNode) {
       var j = nodes.findIndex(function(n) {return n && n._id === cacheNode._id});
       if (j !== -1) {
@@ -1853,7 +1874,7 @@
         nodes[j].y = cacheNode.y;
         nodes[j].width = cacheNode.width;
         newNodes.push(nodes[j]);
-        nodes[j] = null;
+        nodes[j] = null; // erase it so we know what's left
       }
     });
     // ...and add any extra non-cached ones