chore(grid): added prevent collision flag

Author: Jakub Bialas

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

@@ -129,6 +129,9 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     /** Whether or not to update the internal layout when some dependent property change. */
     @Input() compactOnPropsChange = true;
 
+    /** Prevent collision, consider setting it to true if in no compaction */
+    @Input() preventCollision: boolean = false;
+
     /** Type of compaction that will be applied to the layout (vertical, horizontal or free). Defaults to 'vertical' */
     @Input()
     get compactType(): KtdGridCompactType {
@@ -184,7 +187,8 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         return {
             cols: this.cols,
             rowHeight: this.rowHeight,
-            layout: this.layout
+            layout: this.layout,
+            preventCollision: this.preventCollision,
         };
     }
 
@@ -385,7 +389,8 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                         const {layout, draggedItemPos} = calcNewStateFunc(gridItem.id, {
                             layout: currentLayout,
                             rowHeight: this.rowHeight,
-                            cols: this.cols
+                            cols: this.cols,
+                            preventCollision: this.preventCollision
                         }, this.compactType, {
                             pointerDownEvent,
                             pointerDragEvent,
@@ -400,7 +405,8 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                         this._gridItemsRenderData = layoutToRenderItems({
                             cols: this.cols,
                             rowHeight: this.rowHeight,
-                            layout: newLayout
+                            layout: newLayout,
+                            preventCollision: this.preventCollision,
                         }, gridElemClientRect.width, gridElemClientRect.height);
 
                         const placeholderStyles = parseRenderItemToPixels(this._gridItemsRenderData[gridItem.id]);

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

@@ -15,6 +15,7 @@ export interface KtdGridCfg {
     cols: number;
     rowHeight: number; // row height in pixels
     layout: KtdGridLayoutItem[];
+    preventCollision: boolean;
 }
 
 export type KtdGridLayout = KtdGridLayoutItem[];

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

@@ -1,4 +1,4 @@
-import { compact, CompactType, LayoutItem, moveElement } from './react-grid-layout.utils';
+import { compact, CompactType, getAllCollisions, 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';
@@ -98,7 +98,7 @@ export function ktdGridItemDragging(gridItemId: string, config: KtdGridCfg, comp
         layoutItem.x,
         layoutItem.y,
         true,
-        false,
+        config.preventCollision,
         compactionType,
         config.cols
     );
@@ -153,6 +153,25 @@ export function ktdGridItemResizing(gridItemId: string, config: KtdGridCfg, comp
         layoutItem.w = Math.max(1, config.cols - layoutItem.x);
     }
 
+    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 newLayoutItems: LayoutItem[] = config.layout.map((item) => {
         return item.id === gridItemId ? layoutItem : item;
     });

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

@@ -56,6 +56,11 @@ <h1>Angular Grid Layout - Playground</h1>
                       (change)="onAutoResizeChange($event.checked)">
             Auto resize
         </mat-checkbox>
+        <mat-checkbox color="accent"
+                      [checked]="preventCollision"
+                      (change)="onPreventCollisionChange($event.checked)">
+            Prevent Collision
+        </mat-checkbox>
         <mat-chip-list>
             <mat-chip color="accent" [selected]="isDragging">isDragging</mat-chip>
             <mat-chip color="accent" [selected]="isResizing">isResizing</mat-chip>
@@ -67,6 +72,7 @@ <h1>Angular Grid Layout - Playground</h1>
                   [rowHeight]="rowHeight"
                   [layout]="layout"
                   [compactType]="compactType"
+                  [preventCollision]="preventCollision"
                   [scrollableParent]="autoScroll ? document : null"
                   (dragStarted)="onDragStarted($event)"
                   (resizeStarted)="onResizeStarted($event)"

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

@@ -55,6 +55,7 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
     disableResize = false;
     disableRemove = false;
     autoResize = true;
+    preventCollision = false;
     isDragging = false;
     isResizing = false;
     resizeSubscription: Subscription;
@@ -130,6 +131,10 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
         this.autoResize = checked;
     }
 
+    onPreventCollisionChange(checked: boolean) {
+        this.preventCollision = checked;
+    }
+
     onColsChange(event: Event) {
         this.cols = coerceNumberProperty((event.target as HTMLInputElement).value);
     }