From 0c7eafed69ebd160b902cb20ca97cd557c45c8f4 Mon Sep 17 00:00:00 2001
From: Basti Hoffmann <bo.hoffi@gmail.com>
Date: Wed, 12 May 2021 18:39:41 +0200
Subject: [PATCH] Added CompactType.CompactDown with variants (#736)

* feat: add compact down variants

* chore: update demo to include compact down variants
---
 .../src/lib/gridsterCompact.service.ts        | 28 +++++++++++++++++++
 .../src/lib/gridsterConfig.interface.ts       | 12 +++++++-
 .../sections/compact/compact.component.html   |  5 ++++
 src/app/sections/compact/compact.component.ts |  1 +
 src/assets/compact.md                         |  2 +-
 5 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/projects/angular-gridster2/src/lib/gridsterCompact.service.ts b/projects/angular-gridster2/src/lib/gridsterCompact.service.ts
index 25d92e2c..c1969fac 100644
--- a/projects/angular-gridster2/src/lib/gridsterCompact.service.ts
+++ b/projects/angular-gridster2/src/lib/gridsterCompact.service.ts
@@ -32,6 +32,20 @@ export class GridsterCompact {
       } else if (this.gridster.$options.compactType === CompactType.CompactRightAndUp) {
         this.checkCompactMovement('x', 1);
         this.checkCompactMovement('y', -1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactDown) {
+        this.checkCompactMovement('y', 1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndLeft) {
+        this.checkCompactMovement('y', 1);
+        this.checkCompactMovement('x', -1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndRight) {
+        this.checkCompactMovement('y', 1);
+        this.checkCompactMovement('x', 1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactLeftAndDown) {
+        this.checkCompactMovement('x', -1);
+        this.checkCompactMovement('y', 1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactRightAndDown) {
+        this.checkCompactMovement('x', 1);
+        this.checkCompactMovement('y', 1);
       }
     }
   }
@@ -51,6 +65,20 @@ export class GridsterCompact {
       } else if (this.gridster.$options.compactType === CompactType.CompactUpAndRight) {
         this.moveTillCollision(item, 'y', -1);
         this.moveTillCollision(item, 'x', 1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactDown) {
+        this.moveTillCollision(item, 'y', 1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndLeft) {
+        this.moveTillCollision(item, 'y', 1);
+        this.moveTillCollision(item, 'x', -1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactLeftAndDown) {
+        this.moveTillCollision(item, 'x', -1);
+        this.moveTillCollision(item, 'y', 1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndRight) {
+        this.moveTillCollision(item, 'y', 1);
+        this.moveTillCollision(item, 'x', 1);
+      } else if (this.gridster.$options.compactType === CompactType.CompactRightAndDown) {
+        this.moveTillCollision(item, 'x', 1);
+        this.moveTillCollision(item, 'y', 1);
       }
     }
   }
diff --git a/projects/angular-gridster2/src/lib/gridsterConfig.interface.ts b/projects/angular-gridster2/src/lib/gridsterConfig.interface.ts
index eb642a52..ae7b00ff 100644
--- a/projects/angular-gridster2/src/lib/gridsterConfig.interface.ts
+++ b/projects/angular-gridster2/src/lib/gridsterConfig.interface.ts
@@ -11,7 +11,12 @@ export type compactTypes =
   | 'compactLeft&Up'
   | 'compactRight'
   | 'compactUp&Right'
-  | 'compactRight&Up';
+  | 'compactRight&Up'
+  | 'compactDown'
+  | 'compactDown&Left'
+  | 'compactLeft&Down'
+  | 'compactDown&Right'
+  | 'compactRight&Down';
 
 export enum GridType {
   Fit = 'fit',
@@ -37,6 +42,11 @@ export enum CompactType {
   CompactRight = 'compactRight',
   CompactUpAndRight = 'compactUp&Right',
   CompactRightAndUp = 'compactRight&Up',
+  CompactDown = 'compactDown',
+  CompactDownAndLeft = 'compactDown&Left',
+  CompactLeftAndDown = 'compactLeft&Down',
+  CompactDownAndRight = 'compactDown&Right',
+  CompactRightAndDown = 'compactRight&Down'
 }
 
 export enum DirTypes {
diff --git a/src/app/sections/compact/compact.component.html b/src/app/sections/compact/compact.component.html
index f440acd2..63db5279 100644
--- a/src/app/sections/compact/compact.component.html
+++ b/src/app/sections/compact/compact.component.html
@@ -18,6 +18,11 @@
       <mat-option value="compactRight">Compact Right</mat-option>
       <mat-option value="compactUp&Right">Compact Up & Right</mat-option>
       <mat-option value="compactRight&Up">Compact Right & Up</mat-option>
+      <mat-option value="compactDown">Compact Down</mat-option>
+      <mat-option value="compactDown&Left">Compact Down & Left</mat-option>
+      <mat-option value="compactLeft&Down">Compact Left & Down</mat-option>
+      <mat-option value="compactDown&Right">Compact Down & Right</mat-option>
+      <mat-option value="compactRight&Down">Compact Right & Down</mat-option>
     </mat-select>
   </mat-form-field>
   <button mat-mini-fab (click)="addItem()" class="add-button cols-2">
diff --git a/src/app/sections/compact/compact.component.ts b/src/app/sections/compact/compact.component.ts
index b27347c8..79831a8a 100644
--- a/src/app/sections/compact/compact.component.ts
+++ b/src/app/sections/compact/compact.component.ts
@@ -17,6 +17,7 @@ export class CompactComponent implements OnInit {
       gridType: GridType.Fit,
       compactType: CompactType.None,
       maxCols: 10,
+      maxRows: 10,
       pushItems: true,
       draggable: {
         enabled: true
diff --git a/src/assets/compact.md b/src/assets/compact.md
index b0d1c99c..a58a5963 100644
--- a/src/assets/compact.md
+++ b/src/assets/compact.md
@@ -2,4 +2,4 @@
 
 Option | Description | Type | Default | Options
 ------------ | ------------- | ------------- | ------------- | -------------
-compactType | compact items | String | 'none' | 'none', 'compactUp', 'compactLeft', 'compactUp&Left', 'compactLeft&Up', 'compactRight', 'compactUp&Right', 'compactRight&Up'
+compactType | compact items | String | 'none' | 'none', 'compactUp', 'compactLeft', 'compactUp&Left', 'compactLeft&Up', 'compactRight', 'compactUp&Right', 'compactRight&Up', 'compactDown', 'compactDown&Left', 'compactLeft&Down', 'compactDown&Right', 'compactRight&Down'