fix(compact-horizontal): fixed compact horizontal bug that was compac…

…ting also vertically

Compact horizontal was performing some vertical compaction in some circumstances. This led to bugs
and strange behaviours. One noticeable change is that now, with horizontal compaction, grid items
can be put as bottom as we want, before this was not possible.

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

@@ -1,4 +1,3 @@
-
 /**
  * IMPORTANT:
  * This utils are taken from the project: https://github.com/STRML/react-grid-layout.
@@ -257,7 +256,6 @@ export function compactItem(
             l.y--;
         }
     } else if (compactH) {
-        l.y = Math.min(bottom(compareWith), l.y);
         // Move the element left as far as it can go without colliding.
         while (l.x > 0 && !getFirstCollision(compareWith, l)) {
             l.x--;
@@ -268,26 +266,21 @@ export function compactItem(
     let collides;
     while ((collides = getFirstCollision(compareWith, l))) {
         if (compactH) {
-            resolveCompactionCollision(
-                fullLayout,
-                l,
-                collides.x + collides.w,
-                'x',
-            );
+            resolveCompactionCollision(fullLayout, l, collides.x + collides.w, 'x');
         } else {
-            resolveCompactionCollision(
-                fullLayout,
-                l,
-                collides.y + collides.h,
-                'y',
-            );
+            resolveCompactionCollision(fullLayout, l, collides.y + collides.h, 'y',);
         }
         // Since we can't grow without bounds horizontally, if we've overflown, let's move it down and try again.
         if (compactH && l.x + l.w > cols) {
             l.x = cols - l.w;
             l.y++;
         }
     }
+
+    // Ensure that there are no negative positions
+    l.y = Math.max(l.y, 0);
+    l.x = Math.max(l.x, 0);
+
     return l;
 }
 
@@ -433,8 +426,8 @@ export function moveElement(
         compactType === 'vertical' && typeof y === 'number'
             ? oldY >= y
             : compactType === 'horizontal' && typeof x === 'number'
-            ? oldX >= x
-            : false;
+                ? oldX >= x
+                : false;
     if (movingUp) {
         sorted = sorted.reverse();
     }
@@ -614,7 +607,7 @@ export function sortLayoutItems(
 }
 
 export function sortLayoutItemsByRowCol(layout: Layout): Layout {
-    return ([] as any[]).concat(layout).sort(function (a, b) {
+    return ([] as any[]).concat(layout).sort(function(a, b) {
         if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
             return 1;
         } else if (a.y === b.y && a.x === b.x) {
@@ -626,7 +619,7 @@ export function sortLayoutItemsByRowCol(layout: Layout): Layout {
 }
 
 export function sortLayoutItemsByColRow(layout: Layout): Layout {
-    return ([] as any[]).concat(layout).sort(function (a, b) {
+    return ([] as any[]).concat(layout).sort(function(a, b) {
         if (a.x > b.x || (a.x === b.x && a.y > b.y)) {
             return 1;
         }

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

@@ -1,4 +1,5 @@
 import { ktdGetGridLayoutDiff } from '../grid.utils';
+import { compact } from '../react-grid-layout.utils';
 
 describe('Grid utils', () => {
 
@@ -47,3 +48,17 @@ describe('Grid utils', () => {
     });
 
 });
+
+// Custom compact test
+describe('compact (custom tests)', () => {
+    it('compact horizontal should not compact items vertically', () => {
+        const layout = [
+            {y: 0, x: 0, h: 2, w: 5, id: '1'},
+            {y: 10, x: 0, h: 2, w: 1, id: '2'}
+        ];
+        expect(compact(layout, 'horizontal', 10)).toEqual([
+            {y: 0, x: 0, h: 2, w: 5, id: '1', moved: false, static: false},
+            {y: 10, x: 0, h: 2, w: 1, id: '2', moved: false, static: false}
+        ]);
+    });
+})

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

@@ -372,7 +372,7 @@ describe('compact horizontal', () => {
     it('compact horizontal should remove empty horizontal space to left of item', () => {
         const layout = [{x: 5, y: 5, w: 1, h: 1, id: '1'}];
         expect(compact(layout, 'horizontal', 10)).toEqual([
-            {x: 0, y: 0, w: 1, h: 1, id: '1', moved: false, static: false}
+            {x: 0, y: 5, w: 1, h: 1, id: '1', moved: false, static: false}
         ]);
     });
 

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

@@ -3,7 +3,7 @@ import { MatSelectChange } from '@angular/material/select';
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
 import {
-    KtdDragEnd, KtdDragStart, KtdGridComponent, KtdGridLayout, KtdGridLayoutItem, KtdResizeEnd, KtdResizeStart, ktdTrackById
+    KtdDragEnd, KtdDragStart, ktdGridCompact, KtdGridComponent, KtdGridLayout, KtdGridLayoutItem, KtdResizeEnd, KtdResizeStart, ktdTrackById
 } from '@katoid/angular-grid-layout';
 import { ktdArrayRemoveItem } from '../utils';
 import { DOCUMENT } from '@angular/common';
@@ -118,6 +118,7 @@ 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) {
@@ -190,8 +191,8 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
                 // static: Math.random() < 0.05
             });
         }
-        console.log('layout', layout);
-        this.layout = layout;
+        this.layout = ktdGridCompact(layout, this.compactType, this.cols);
+        console.log('generateLayout', this.layout);
     }
 
     /** Adds a grid item to the layout */
@@ -201,8 +202,8 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
 
         const newLayoutItem: KtdGridLayoutItem = {
             id: nextId.toString(),
-            x: 0,
-            y: 0,
+            x: -1,
+            y: -1,
             w: 2,
             h: 2
         };
@@ -212,6 +213,8 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
             newLayoutItem,
             ...this.layout
         ];
+
+        this.layout = ktdGridCompact(this.layout, this.compactType, this.cols);
     }
 
     /**