Added CompactType.CompactDown with variants (#736)

* feat: add compact down variants * chore: update demo to include compact down variants
tiberiuzuld · May 12, 2021 · 0c7eafe · 0c7eafe
1 parent 676e740
commit 0c7eafe
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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'