Merge pull request #1098 from adumesny/develop

Alain Dumesny · web-flow · commit e2369cf6295d · 2019-12-18T18:43:08.000-08:00
new setColumn() heuristics
diff --git a/demo/column.html b/demo/column.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Column grid demo</title>
+
+  <link rel="stylesheet" href="../demo/demo.css"/>
+  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="../dist/jquery-ui.min.js"></script>
+  <script src="../src/gridstack.js"></script>
+  <script src="../src/gridstack.jQueryUI.js"></script>
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>setColumn() grid demo</h1>
+    <a class="btn btn-primary" id="add-widget" href="#">Add Widget</a>
+    <a class="btn btn-primary" id="1column" href="#">1 Column</a>
+    <a class="btn btn-primary" id="2column" href="#">2 Column</a>
+    <a class="btn btn-primary" id="3column" href="#">3 Column</a>
+    <a class="btn btn-primary" id="4column" href="#">4 Column</a>
+    <a class="btn btn-primary" id="6column" href="#">6 Column</a>
+    <a class="btn btn-primary" id="8column" href="#">8 Column</a>
+    <a class="btn btn-primary" id="10column" href="#">10 Column</a>
+    <a class="btn btn-primary" id="12column" href="#">12 Column</a>
+    <br><br>
+    <div class="grid-stack"></div>
+  </div>
+
+  <script type="text/javascript">
+    $(function () {
+      var $grid = $('.grid-stack');
+      $grid.gridstack({float: true});
+      grid = $grid.data('gridstack');
+
+      $grid.on('added', (e, items) => log(' added ', items));
+      $grid.on('removed', (e, items) => log(' removed ', items));
+      $grid.on('change', (e, items) => log(' change ', items));
+      function log(type, items) {
+        if (!items) { return; }
+        var str = '';
+        for (let i=0; i<items.length && items[i]; i++) { str += ' (x,y)=' + items[i].x + ',' + items[i].y; }
+        console.log(type + items.length + ' items.' + str );
+      }
+
+      var items = [
+        {x: 0, y: 4, width: 12, height: 1},
+        {x: 5, y: 3, width: 2, height: 1},
+        {x: 1, y: 3, width: 4, height: 1},
+        {x: 0, y: 0, width: 1, height: 1},
+        {}, // autoPosition testing
+        {x: 5, y: 0, width: 1, height: 1},
+        {x: 2, y: 0, width: 2, height: 1},
+        {x: 0, y: 0, width: 2, height: 2}
+      ];
+      var count = 0;
+      grid.batchUpdate();
+      for (count=0; count<3; count++) {
+        grid.addWidget($('<div><div class="grid-stack-item-content">' + count + '</div></div>'), items.pop());
+      };
+      grid.commit();
+
+      $('#add-widget').click(() => {
+        var node = items.pop() || {
+          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++ + '</div></div>'), node);
+      });
+
+      $('#1column').click(() => { grid.setColumn(1); });
+      $('#2column').click(() => { grid.setColumn(2); });
+      $('#3column').click(() => { grid.setColumn(3); });
+      $('#4column').click(() => { grid.setColumn(4); });
+      $('#6column').click(() => { grid.setColumn(6); });
+      $('#6column').click(() => { grid.setColumn(6); });
+      $('#8column').click(() => { grid.setColumn(8); });
+      $('#10column').click(() => { grid.setColumn(10); });
+      $('#12column').click(() => { grid.setColumn(12); });
+    });
+  </script>
+</body>
+</html>
diff --git a/demo/float.html b/demo/float.html
@@ -28,10 +28,7 @@ <h1>Float grid demo</h1>
 
   <script type="text/javascript">
     $(function () {
-      var options = {
-        float: true
-      };
-      $('.grid-stack').gridstack(options);
+      $('.grid-stack').gridstack({float: true});
 
       new function () {
         this.items = [
@@ -46,10 +43,10 @@ <h1>Float grid demo</h1>
 
         this.addNewWidget = function() {
           var node = this.items.pop() || {
-                x: 12 * Math.random(),
-                y: 5 * Math.random(),
-                width: 1 + 3 * Math.random(),
-                height: 1 + 3 * Math.random()
+                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())
               };
           this.grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), node);
           return false;
diff --git a/demo/index.html b/demo/index.html
@@ -6,16 +6,17 @@
 </head>
 <body>
   <ul>
+    <li><a href="advance.html">Advance demo</a></li>
+    <li><a href="anijs.html">AniJS demo</a></li>
+    <li><a href="column.html">Column demo</a></li>
     <li><a href="float.html">Float grid demo</a></li>
     <li><a href="knockout.html">Knockout.js demo</a></li>
     <li><a href="knockout2.html">Knockout.js demo (2)</a></li>
     <li><a href="nested.html">Nested grids demo</a></li>
+    <li><a href="responsive.html">Resize grid (responsive) demo</a></li>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL) demo</a></li>
     <li><a href="serialization.html">Serialization demo</a></li>
     <li><a href="two.html">Two grids demo</a></li>
-    <li><a href="advance.html">Advance demo</a></li>
-    <li><a href="responsive.html">Resize grid (responsive) demo</a></li>
-    <li><a href="anijs.html">AniJS demo</a></li>
   </ul>
 </body>
 </html>
diff --git a/demo/responsive.html b/demo/responsive.html
@@ -43,11 +43,7 @@ <h1>Responsive grid demo</h1>
         return $('.device-' + alias).is(':visible');
       }
 
-
-      var options = {
-        float: false
-      };
-      $('.grid-stack').gridstack(options);
+      $('.grid-stack').gridstack();
       function resizeGrid() {
         var grid = $('.grid-stack').data('gridstack');
         if (isBreakpoint('xs')) {
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -32,7 +32,10 @@ Change log
 - 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).
 [#1096](https://github.com/gridstack/gridstack.js/pull/1096)
-- `removeAll()` is now much faster (no relayout) and calls `removed` event just once with a list
+- `removeAll()` is now much faster (no relayout) and calls `removed` event just once with a list [#1097](https://github.com/gridstack/gridstack.js/pull/1097)
+- `setColumn()` complete re-write and is no longer "Experimental". We now do a reasonable job at sizing/position the widgets (especially 1 column) and
+also now cache each column layout so you can go back to say 12 column and not loose original layout. [#1098](https://github.com/gridstack/gridstack.js/pull/1098)
+- fix bug where `addWidget(el)` (default values) would not render item at correct CSS location, and overlap item at (0,0) [#1098](https://github.com/gridstack/gridstack.js/pull/1098)
 
 ## v0.5.5 (2019-11-27)
 
diff --git a/doc/README.md b/doc/README.md
@@ -445,9 +445,12 @@ Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
 
 ### setColumn(column, doNotPropagate)
 
-(Experimental) Modify number of columns in the grid. Will attempt to update existing widgets to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css`.
+Modify number of columns in the grid. Will update existing widgets to conform to new number of columns,
+as well as cache the original layout so you can revert back to previous positions without loss.
+Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
+else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
 
-- `column` - Integer between 1 and 12.
+- `column` - Integer > 0 (default 12).
 - `doNotPropagate` - if true existing widgets will not be updated.
 
 ### setStatic(staticValue)
diff --git a/spec/e2e/html/column.html b/spec/e2e/html/column.html
diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js
@@ -295,7 +295,7 @@ describe('gridstack', function() {
       grid.setGridWidth(12); // old API
       expect(grid.opts.column).toBe(12);
     });
-    it('should change column number, no relayout', function() {
+    it('should SMALL change column number, no relayout', function() {
       var options = {
         column: 12
       };
@@ -314,21 +314,77 @@ describe('gridstack', function() {
       for (var j = 0; j < items.length; j++) {
         expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0);
       }
+      
+      grid.setColumn(12);
+      expect(grid.opts.column).toBe(12);
+      for (var j = 0; j < items.length; j++) {
+        expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0);
+      }
     });
     it('should change column number and relayout items', function() {
       var options = {
-        column: 12
+        column: 12,
+        float: true
       };
       $('.grid-stack').gridstack(options);
       var grid = $('.grid-stack').data('gridstack');
-      var items = $('.grid-stack-item');
+      var node1 = $('#item1').data('_gridstack_node');
+      var node2 = $('#item2').data('_gridstack_node');
+      // items start at 4x2 and 4x4
+      expect(node1.x).toBe(0);
+      expect(node1.y).toBe(0);
+      expect(node1.width).toBe(4);
+      expect(node1.height).toBe(2);
+
+      expect(node2.x).toBe(4);
+      expect(node2.y).toBe(0);
+      expect(node2.width).toBe(4);
+      expect(node2.height).toBe(4);
       
+      // one column will have item1, item2
       grid.setColumn(1);
+      node1 = $('#item1').data('_gridstack_node');
+      node2 = $('#item2').data('_gridstack_node');
       expect(grid.opts.column).toBe(1);
-      for (var j = 0; j < items.length; j++) {
-        expect(parseInt($(items[j]).attr('data-gs-x'), 10)).toBe(0);
-        // TODO: check Y position but I don't currently agree with order. [Alain]
-      }
+      expect(node1.x).toBe(0);
+      expect(node1.y).toBe(0);
+      expect(node1.width).toBe(1);
+      expect(node1.height).toBe(2);
+
+      expect(node2.x).toBe(0);
+      expect(node2.y).toBe(2);
+      expect(node2.width).toBe(1);
+      expect(node2.height).toBe(4);
+
+      // add default 1x1 item to the end (1 column)
+      var el3 = grid.addWidget(widgetHTML);
+      expect(el3).not.toBe(null);
+      var node3 = $(el3).data('_gridstack_node');
+      expect(node3.x).toBe(0);
+      expect(node3.y).toBe(6);
+      expect(node3.width).toBe(1);
+      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);
+      node1 = $('#item1').data('_gridstack_node');
+      node2 = $('#item2').data('_gridstack_node');
+      node3 = $('#item3').data('_gridstack_node');
+      expect(node1.x).toBe(0);
+      expect(node1.y).toBe(0);
+      expect(node1.width).toBe(4);
+      expect(node1.height).toBe(2);
+
+      expect(node2.x).toBe(4);
+      expect(node2.y).toBe(0);
+      expect(node2.width).toBe(4);
+      expect(node2.height).toBe(4);
+
+      expect(node3.x).toBe(0);
+      expect(node3.y).toBe(6);
+      expect(node3.width).toBe(12); // take entire row still
+      expect(node3.height).toBe(1);
     });
   });
 
@@ -1089,14 +1145,14 @@ describe('gridstack', function() {
       expect($widget.attr('data-gs-max-height')).toBe(undefined);
       expect($widget.attr('data-gs-id')).toBe('optionWidget');
     });
-    it('should not autoPosition (correct X, missing Y)', function() {
+    it('should autoPosition (correct X, missing Y)', function() {
       $('.grid-stack').gridstack();
       var grid = $('.grid-stack').data('gridstack');
       var widget = grid.addWidget(widgetHTML, {x: 8, height: 2, id: 'optionWidget'});
       var $widget = $(widget);
       expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
-      expect($widget.attr('data-gs-y')).toBe(undefined);
-      expect($widget.attr('data-gs-width')).toBe(undefined);
+      expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
+      expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
       expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(2);
       expect($widget.attr('data-gs-auto-position')).toBe(undefined);
       expect($widget.attr('data-gs-min-width')).toBe(undefined);
@@ -1105,6 +1161,21 @@ describe('gridstack', function() {
       expect($widget.attr('data-gs-max-height')).toBe(undefined);
       expect($widget.attr('data-gs-id')).toBe('optionWidget');
     });
+    it('should autoPosition (empty options)', function() {
+      $('.grid-stack').gridstack();
+      var grid = $('.grid-stack').data('gridstack');
+      var widget = grid.addWidget(widgetHTML, {});
+      var $widget = $(widget);
+      expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
+      expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
+      expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
+      expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(1);
+      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect($widget.attr('data-gs-min-width')).toBe(undefined);
+      expect($widget.attr('data-gs-max-width')).toBe(undefined);
+      expect($widget.attr('data-gs-min-height')).toBe(undefined);
+      expect($widget.attr('data-gs-max-height')).toBe(undefined);
+    });
 
   });
 
diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts
@@ -275,8 +275,9 @@ interface GridStack {
   setAnimation(doAnimate: boolean): void;
 
   /**
-   * (Experimental) Modify number of columns in the grid. Will attempt to update existing widgets
-   * to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
+   * Modify number of columns in the grid. Will update existing widgets to conform to new number of columns,
+   * as well as cache the original layout so you can revert back to previous positions without loss.
+   * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
    * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
    * @param column - Integer > 0 (default 12).
    * @param doNotPropagate if true existing widgets will not be updated (optional) 
diff --git a/src/gridstack.js b/src/gridstack.js
