chore(grid): fix enormous shink on resize if collision detected

Author: Jakub Bialas

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

@@ -1,4 +1,4 @@
-import { compact, CompactType, getAllCollisions, LayoutItem, moveElement } from './react-grid-layout.utils';
+import { compact, CompactType, getFirstCollision, Layout, LayoutItem, moveElement } from './react-grid-layout.utils';
 import { KtdDraggingData, KtdGridCfg, KtdGridCompactType, KtdGridItemRect, KtdGridLayout, KtdGridLayoutItem } from '../grid.definitions';
 import { ktdPointerClientX, ktdPointerClientY } from './pointer.utils';
 import { KtdDictionary } from '../../types';
@@ -154,22 +154,37 @@ export function ktdGridItemResizing(gridItemId: string, config: KtdGridCfg, comp
     }
 
     if (config.preventCollision) {
-        const collisions = getAllCollisions(config.layout, layoutItem);
-
-        // If we're colliding, we need adjust the placeholder.
-        if (collisions.length > 0) {
-            // adjust w && h to maximum allowed space
-            let leastX = Infinity;
-            let leastY = Infinity;
-            collisions.forEach((collision) => {
-                if (collision.id === layoutItem.id) { return; }
-                if (collision.x > layoutItem.x) { leastX = Math.min(leastX, collision.x); }
-                if (collision.y > layoutItem.y) { leastY = Math.min(leastY, collision.y); }
-            });
-
-            if (Number.isFinite(leastX)) { layoutItem.w = leastX - layoutItem.x; }
-            if (Number.isFinite(leastY)) { layoutItem.h = leastY - layoutItem.y; }
+        const maxW = layoutItem.w;
+        const maxH = layoutItem.h;
+
+        let colliding = hasCollision(config.layout, layoutItem);
+        let shrunkDimension: 'w' | 'h' | undefined;
+
+        while (colliding) {
+            shrunkDimension = getDimensionToShrink(layoutItem, shrunkDimension);
+            layoutItem[shrunkDimension]--;
+            colliding = hasCollision(config.layout, layoutItem);
+        }
+
+        if (shrunkDimension === 'w') {
+            layoutItem.h = maxH;
+
+            colliding = hasCollision(config.layout, layoutItem);
+            while (colliding) {
+                layoutItem.h--;
+                colliding = hasCollision(config.layout, layoutItem);
+            }
+        }
+        if (shrunkDimension === 'h') {
+            layoutItem.w = maxW;
+
+            colliding = hasCollision(config.layout, layoutItem);
+            while (colliding) {
+                layoutItem.w--;
+                colliding = hasCollision(config.layout, layoutItem);
+            }
         }
+
     }
 
     const newLayoutItems: LayoutItem[] = config.layout.map((item) => {
@@ -186,3 +201,18 @@ export function ktdGridItemResizing(gridItemId: string, config: KtdGridCfg, comp
         }
     };
 }
+
+function hasCollision(layout: Layout, layoutItem: LayoutItem): boolean {
+    return !!getFirstCollision(layout, layoutItem);
+}
+
+function getDimensionToShrink(layoutItem, lastShrunk): 'w' | 'h' {
+    if (layoutItem.h <= 1) {
+        return 'w';
+    }
+    if (layoutItem.w <= 1) {
+        return 'h';
+    }
+
+    return lastShrunk === 'w' ? 'h' : 'w';
+}