Merge pull request #1641 from adumesny/develop

collision: more fixes

Author: adumesny

demo/column.html

@@ -72,9 +72,8 @@ <h1>column() grid demo (fix cellHeight)</h1>
       {x: 0, y: 4, w: 12}
     ];
     let count = 0;
-    grid.batchUpdate();
-    addWidget(); addWidget(); addWidget(); addWidget();
-    grid.commit();
+    items.forEach(n => n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : ''));
+    grid.load(items);
 
     function addWidget() {
       let n = items[count] || {

spec/e2e/html/141_1534_swap.html

@@ -18,6 +18,9 @@ <h1>Swap collision demo</h1>
       <a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#"></a>
       <a class="btn btn-primary" onclick="toggleMax()" id="max" href="#"></a>
       <a class="btn btn-primary" onclick="toggleBigger()" id="big" href="#"></a>
+      with layouts:
+      <a class="btn btn-primary" onclick="load(0)" href="#">load 0</a>
+      <a class="btn btn-primary" onclick="load(1)" href="#">load 1</a>
     </div>
     <br><br>
     <div class="grid-stack"></div>
@@ -28,31 +31,45 @@ <h1>Swap collision demo</h1>
     let maxButton = document.getElementById('max');
     let bigButton = document.getElementById('big');
     let size = 1;
+    let layout = 0;
 
     let grid = GridStack.init({float: false, cellHeight: 70, maxRow: 0});
     addEvents(grid);
 
-    let count = 0;
-    let items = [
+    let items = [[
       {x:0, y:0}, {x:0, y:1}, {x:0, y:2},{x:1, y:0}, {x:1, y:1}, {x:1, y:2, h:2, w:2},
       {x:5, y:0}, {x:4, y:1, w:3, locked: false, _content: 'locked'}, {x:5, y:2},
       {x:7, y:0}, {x:8, y:0}, {x:9, y:0}, {x:7, y:1, w:3}, {x:8, y:2},
       {x:11, y:0}, {x:11, y:1, h:2},
-    ];
-    items.forEach(n => {n.id = count; n.content = n.content || String(count); count++})
-    grid.load(items);
+    ], [
+      {x: 1, y: 0},
+      {x: 1, y: 1},
+      {x: 1, y: 2, w: 2},
+      {x: 0, y: 3, w: 3},
+      {x: 1, y: 4, h: 2},
+    ]];
+    items.forEach(layout => {
+      let count = 0;
+      layout.forEach(n => {n.id = count; n.content = n.content || String(count); count++})
+    });
+    grid.load(items[layout]);
 
     addNewWidget = function() {
       let n = {
         x: Math.round(12 * Math.random()),
         y: Math.round(5 * Math.random()),
         w: Math.round(1 + 3 * Math.random()),
         h: Math.round(1 + 3 * Math.random()),
-        content: String(count++)
+        content: String(grid.engine.nodes.length+1)
       };
       grid.addWidget(n);
     };
 
+    load = function(i) {
+      grid.removeAll();
+      grid.load(items[i]);
+    }
+
     toggleFloat = function() {
       grid.float(! grid.getFloat());
       floatButton.innerHTML = 'float: ' + grid.getFloat();

src/gridstack-engine.ts

@@ -83,6 +83,7 @@ export class GridStackEngine {
     }
 
     let didMove = false;
+    let yOffset = 0;
     let newOpt: GridStackMoveOpts = {nested: true, pack: false, sanitize: false};
     while (collide = collide || this.collide(node, nn)) { // could collide with more than 1 item... so repeat for each
       let moved: boolean;
@@ -103,8 +104,9 @@ export class GridStackEngine {
         }
         didMove = didMove || moved;
       } else {
-        // move collide down *after* us
-        moved = this.moveNode(collide, {...collide, y: nn.y + nn.h, ...newOpt});
+        // move collide down *after* where we will be
+        moved = this.moveNode(collide, {...collide, y: nn.y + nn.h + yOffset, ...newOpt});
+        if (moved) yOffset += collide.h; // during while loop put next one after this one
       }
       if (!moved) { return didMove; } // break inf loop if we couldn't move after all (ex: maxRow, fixed)
       collide = undefined;
@@ -192,8 +194,9 @@ export class GridStackEngine {
       return true;
     }
 
-    // same size and same row or column
-    if (a.w === b.w && a.h === b.h && (a.x === b.x || a.y === b.y) /*&& Utils.isIntercepted(b, {x: a.x-0.5, y:a.y-0.5, w: a.w+1, h: a.h+1})*/)
+    // same size and same row/column and touching
+    if (a.w === b.w && a.h === b.h && (a.x === b.x || a.y === b.y)
+      && Utils.isIntercepted(b, {x: a.x-0.5, y:a.y-0.5, w: a.w+1, h: a.h+1}))
       return _doSwap();
     /* different X will be weird (expect vertical swap) and different height overlap, so too complex. user regular layout instead
     // else check if swapping would not collide with anything else (requiring a re-layout)