swap items of different width if they are the same row/height

Author: adumesny

doc/CHANGES.md

@@ -63,6 +63,7 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 4.2.7-dev (TBD)
+* you can now swap items of different width if they are the same row/height. Thanks to [spektrummedia](http://spektrummedia.com) for sponsoring it.
 * fix [#1860](https://github.com/gridstack/gridstack.js/issues/1860) nested grid save inf loop fix
 * use latest `dart-sass`, updated comments
 

spec/e2e/html/141_1534_swap.html

@@ -37,7 +37,7 @@ <h1>Swap collision demo</h1>
     let maxButton = document.getElementById('max');
     let bigButton = document.getElementById('big');
     let size = 1;
-    let layout = 3;
+    let layout = 5;
 
     let opt = {
       float: false,
@@ -66,6 +66,10 @@ <h1>Swap collision demo</h1>
       // {x:0, y:0, w:1, h:1, content:'drag down past 2'}, {x:1, y:0, w:2, h:1}, {x:0, y:3, w:2, h:1}, {x:0, y:5, w:1, h:1}, // BETTER but quick flicker to end
     ], [ // load 4
       {x:0, y:0, w:6, h:2, content:'drag down past 2, re-orders 3'}, {x:6, y:0, w:6, h:2}, {x:0, y:3, w:8, h:1}, {x:0, y:5, w:4, h:1},
+    ],[ // load 5 swap different size
+      {x:0, y:0}, {x:1, y:0, w: 2}, {x:3, y:0, w: 2},
+      {x:0, y:1}, {x:1, y:1}, {x:2, y:1, w: 2}, {x:4, y:1}, 
+      {x:1, y:2, h: 2}, {x:1, y:4}
     ],[ // web1.html demo
       {x:0, y:0, w:4, h:2},
       {x:4, y:0, w:4, h:4, id: 'big'},

src/gridstack-engine.ts

@@ -201,6 +201,8 @@ export class GridStackEngine {
       b.x = a.x; b.y = a.y; // b -> a position
       if (a.h != b.h) {
         a.x = x; a.y = b.y + b.h; // a -> goes after b
+      } else if (a.w != b.w) {
+        a.x = b.x + b.w; a.y = y; // a -> goes after b
       } else {
         a.x = x; a.y = y; // a -> old b position
       }
@@ -212,19 +214,20 @@ export class GridStackEngine {
     // same size and same row or column, and touching
     if (a.w === b.w && a.h === b.h && (a.x === b.x || a.y === b.y) && (touching = Utils.isTouching(a, b)))
       return _doSwap();
-    if (touching === false) return; // ran test and fail, bail out
+    if (touching === false) return; // IFF ran test and fail, bail out
 
     // check for taking same columns (but different height) and touching
-    if (a.w === b.w && a.x === b.x && (touching || Utils.isTouching(a, b))) {
+    if (a.w === b.w && a.x === b.x && (touching || (touching = Utils.isTouching(a, b)))) {
       if (b.y < a.y) { let t = a; a = b; b = t; } // swap a <-> b vars so a is first
       return _doSwap();
     }
+    if (touching === false) return;
 
-    /* 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)
-    if (!this.collide(a, {x: a.x, y: a.y, w: b.w, h: b.h}, b) &&
-        !this.collide(a, {x: b.x, y: b.y, w: a.w, h: a.h}, b))
-      return _doSwap(); */
+    // check if taking same row (but different width) and touching
+    if (a.h === b.h && a.y === b.y && (touching || (touching = Utils.isTouching(a, b)))) {
+      if (b.x < a.x) { let t = a; a = b; b = t; } // swap a <-> b vars so a is first
+      return _doSwap();
+    }
     return false;
   }