new compact() method

* relayout grid items to reclaim any empty space
* update two.html demo to have a compact buton, and test case

Author: Alain Dumesny

demo/two.html

@@ -74,11 +74,13 @@ <h1>Two grids demo</h1>
     <div class="row">
       <div class="col-md-6">
         <a class="btn btn-primary" id="float1" href="#">float: false</a>
+        <a class="btn btn-primary" id="compact1" href="#">Compact</a>
         <div class="grid-stack grid-stack-6" id="grid1">
         </div>
       </div>
       <div class="col-md-6">
         <a class="btn btn-primary" id="float2" href="#">float: true</a>
+        <a class="btn btn-primary" id="compact2" href="#">Compact</a>
         <div class="grid-stack grid-stack-6" id="grid2">
           </div>
       </div>
@@ -136,13 +138,21 @@ <h1>Two grids demo</h1>
         appendTo: 'body',
       });
 
-      $('#float1').click(function() { toggleFloat('#float1', '#grid1'); });
-      $('#float2').click(function() { toggleFloat('#float2', '#grid2'); });
+      $('#float1').click(function() { toggleFloat('#float1', '#grid1') });
+      $('#float2').click(function() { toggleFloat('#float2', '#grid2') });
       function toggleFloat(button, grid) {
         var grid = $(grid).data('gridstack');
         grid.float(! grid.float());
         $(button).html('float: ' + grid.float());
       }
+
+      $('#compact1').click(function() { compact('#grid1') });
+      $('#compact2').click(function() { compact('#grid2') });
+      function compact(grid) {
+        var grid = $(grid).data('gridstack');
+        grid.compact();
+      }
+
     });
   </script>
 </body>

doc/CHANGES.md

@@ -28,6 +28,7 @@ Change log
 ## v0.5.5-dev (upcoming changes)
 
 - add `float(val)` to set/get the grid float mode [#1088](https://github.com/gridstack/gridstack.js/pull/1088)
+- add `compact()` relayout grid items to reclaim any empty space [#1101](https://github.com/gridstack/gridstack.js/pull/1101)
 - Allow percentage as a valid unit for height [#1093](https://github.com/gridstack/gridstack.js/pull/1093)
 - fixed callbacks to get either `added, removed, change` or combination if adding a node require also to change its (x,y) for example.
 Also you can now call `batchUpdate()` before calling a bunch of `addWidget()` and get a single event callback (more efficient).

doc/README.md

@@ -23,6 +23,7 @@ gridstack.js API
   - [addWidget(el, [options])](#addwidgetel-options)
   - [addWidget(el, [x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])](#addwidgetel-x-y-width-height-autoposition-minwidth-maxwidth-minheight-maxheight-id)
   - [batchUpdate()](#batchupdate)
+  - [compact()](#compact)
   - [cellHeight()](#cellheight)
   - [cellHeight(val, noUpdate)](#cellheightval-noupdate)
   - [cellWidth()](#cellwidth)
@@ -252,6 +253,10 @@ grid.addWidget(el, 0, 0, 3, 2, true);
 
 starts batch updates. You will see no changes until `commit()` method is called.
 
+### compact()
+
+relayout grid items to reclaim any empty space.
+
 ### cellHeight()
 
 Gets current cell height.

spec/gridstack-spec.js

@@ -1251,4 +1251,38 @@ describe('gridstack', function() {
       }
     });
   });
+
+  describe('grid.compact', function() {
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('should move all 3 items to top-left with no space', function() {
+      $('.grid-stack').gridstack({float: true});
+      var grid = $('.grid-stack').data('gridstack');
+
+      var el3 = grid.addWidget(widgetHTML, {x: 3, y: 5});
+      expect(parseInt(el3.attr('data-gs-x'))).toBe(3);
+      expect(parseInt(el3.attr('data-gs-y'))).toBe(5);
+
+      grid.compact();
+      expect(parseInt(el3.attr('data-gs-x'))).toBe(8);
+      expect(parseInt(el3.attr('data-gs-y'))).toBe(0);
+    });
+    it('not move locked item', function() {
+      $('.grid-stack').gridstack({float: true});
+      var grid = $('.grid-stack').data('gridstack');
+
+      var el3 = grid.addWidget(widgetHTML, {x: 3, y: 5, locked: true, noMove: true});
+      expect(parseInt(el3.attr('data-gs-x'))).toBe(3);
+      expect(parseInt(el3.attr('data-gs-y'))).toBe(5);
+
+      grid.compact();
+      expect(parseInt(el3.attr('data-gs-x'))).toBe(3);
+      expect(parseInt(el3.attr('data-gs-y'))).toBe(5);
+    });
+
+  });
 });

src/gridstack.d.ts

@@ -96,6 +96,11 @@ interface GridStack {
    */
   commit(): void;
 
+  /**
+   * relayout grid items to reclaim any empty space
+   */
+  compact(): void;
+
   /**
    * Destroys a grid instance.
    * @param detachGrid if false nodes and grid will not be removed from the DOM (Optional. Default true).

src/gridstack.js

@@ -476,7 +476,7 @@
     if (node.minWidth !== undefined) { node.width = Math.max(node.width, node.minWidth); }
     if (node.minHeight !== undefined) { node.height = Math.max(node.height, node.minHeight); }
 
-    node._id = ++idSeq;
+    node._id = node._id || ++idSeq;
     // node._dirty = true; will be addEvent instead, unless it changes below...
 
     if (node.autoPosition) {
@@ -489,10 +489,10 @@
           continue;
         }
         if (!this.nodes.find(Utils._isAddNodeIntercepted, {x: x, y: y, node: node})) {
+          node._dirty = (node.x !== x || node.y !== y);
           node.x = x;
           node.y = y;
           delete node.autoPosition; // found our slot
-          node._dirty = (node.x !== x || node.y !== y);
           break;
         }
       }
@@ -1697,6 +1697,24 @@
     });
   };
 
+  /**
+   * relayout grid items to reclaim any empty space
+   */
+  GridStack.prototype.compact = function() {
+    if (this.grid.nodes.length === 0) { return; }
+    this.batchUpdate();
+    this.grid._sortNodes();
+    var nodes = this.grid.nodes;
+    this.grid.nodes = []; // pretend we have no nodes to conflict layout to start with...
+    nodes.forEach(function(n) {
+      if (!n.noMove && !n.locked) {
+        n.autoPosition = true;
+      }
+      this.grid.addNode(n, false); // 'false' for add event trigger
+    }, this);
+    this.commit();
+  };
+
   GridStack.prototype.verticalMargin = function(val, noUpdate) {
     if (val === undefined) {
       return this.opts.verticalMargin;