fix(grid): fixed compact horizontal method not moving items to the left sometimes

Compact horizontal method was not moving grid items as left as possible in cases where those items
where overflowing to the right. Right now this is fixed, and compact horizontal puts
overflowing-right elements as bottom as needed without colliding and as left as possible

fix #21

Author: llorenspujol

projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts

@@ -274,6 +274,11 @@ export function compactItem(
         if (compactH && l.x + l.w > cols) {
             l.x = cols - l.w;
             l.y++;
+
+            // ALso move element as left as much as we can (ktd-custom-change)
+            while (l.x > 0 && !getFirstCollision(compareWith, l)) {
+                l.x--;
+            }
         }
     }
 

projects/angular-grid-layout/src/lib/utils/tests/grid.spec.ts

@@ -61,4 +61,38 @@ describe('compact (custom tests)', () => {
             {y: 10, x: 0, h: 2, w: 1, id: '2', moved: false, static: false}
         ]);
     });
+
+    it('compact horizontal should move all the elements to the left as much as possible', () => {
+        const cols = 6
+        const layout = [
+            {y: 0, x: 0, h: 2, w: 2, id: '1'},
+            {y: 0, x: 2, h: 2, w: 2, id: '2'},
+            {y: 0, x: 4, h: 2, w: 2, id: '3'},
+            {y: 2, x: 4, h: 2, w: 2, id: '4'}
+        ];
+
+        expect(compact(layout, 'horizontal', cols)).toEqual([
+            {y: 0, x: 0, h: 2, w: 2, id: '1', moved: false, static: false},
+            {y: 0, x: 2, h: 2, w: 2, id: '2', moved: false, static: false},
+            {y: 0, x: 4, h: 2, w: 2, id: '3', moved: false, static: false},
+            {y: 2, x: 0, h: 2, w: 2, id: '4', moved: false, static: false}
+        ]);
+    });
+
+    it('compact horizontal should put overflowing-right elements as bottom needed without colliding and as left as possible', () => {
+        const cols = 6
+        const layout = [
+            {y: 0, x: 0, h: 2, w: 2, id: '1'},
+            {y: 0, x: 2, h: 2, w: 2, id: '2'},
+            {y: 0, x: 4, h: 2, w: 2, id: '3'},
+            {y: -2, x: -2, h: 2, w: 2, id: '4'}
+        ];
+
+        expect(compact(layout, 'horizontal', cols)).toEqual([
+            {y: 0, x: 2, h: 2, w: 2, id: '1', moved: false, static: false},
+            {y: 0, x: 4, h: 2, w: 2, id: '2', moved: false, static: false},
+            {y: 2, x: 0, h: 2, w: 2, id: '3', moved: false, static: false},
+            {y: 0, x: 0, h: 2, w: 2, id: '4', moved: false, static: false},
+        ]);
+    });
 })

projects/demo-app/src/app/playground/playground.component.ts

@@ -118,7 +118,6 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
     onCompactTypeChange(change: MatSelectChange) {
         console.log('onCompactTypeChange', change);
         this.compactType = change.value;
-        this.layout = ktdGridCompact(this.layout, this.compactType, this.cols);
     }
 
     onTransitionChange(change: MatSelectChange) {