feat: implement a functionality to enable boundary control for gridster items (#816)

Author: dogukan10

projects/angular-gridster2/src/lib/gridsterConfig.constant.ts

@@ -118,6 +118,7 @@ export const GridsterConfigService: GridsterConfig = {
   scrollToNewItems: false, // scroll to new items placed in a scrollable view
   disableScrollHorizontal: false, // disable horizontal scrolling
   disableScrollVertical: false, // disable vertical scrolling
+  enableBoundaryControl: false, // enable boundary control while dragging items
   disableAutoPositionOnConflict: false, // disable auto-position of items on conflict state,
   dirType: DirTypes.LTR // page direction, rtl=right to left ltr= left to right, if you use rtl language set dirType to rtl
 };

projects/angular-gridster2/src/lib/gridsterConfig.interface.ts

@@ -138,6 +138,7 @@ export interface GridsterConfig {
   scrollToNewItems?: boolean;
   disableScrollHorizontal?: boolean;
   disableScrollVertical?: boolean;
+  enableBoundaryControl?: boolean;
   enableEmptyCellClick?: boolean;
   enableEmptyCellContextMenu?: boolean;
   enableEmptyCellDrop?: boolean;

projects/angular-gridster2/src/lib/gridsterConfigS.interface.ts

@@ -64,6 +64,7 @@ export interface GridsterConfigS {
   scrollToNewItems: boolean;
   disableScrollHorizontal?: boolean;
   disableScrollVertical?: boolean;
+  enableBoundaryControl?: boolean;
   enableEmptyCellClick: boolean;
   enableEmptyCellContextMenu: boolean;
   enableEmptyCellDrop: boolean;

projects/angular-gridster2/src/lib/gridsterDraggable.service.ts

@@ -10,6 +10,13 @@ import { GridsterUtils } from './gridsterUtils.service';
 
 const GRIDSTER_ITEM_RESIZABLE_HANDLER_CLASS = 'gridster-item-resizable-handler';
 
+enum Direction {
+  UP = 'UP',
+  DOWN = 'DOWN',
+  LEFT = 'LEFT',
+  RIGHT = 'RIGHT'
+}
+
 export class GridsterDraggable {
   gridsterItem: GridsterItemComponentInterface;
   gridster: GridsterComponentInterface;
@@ -163,21 +170,86 @@ export class GridsterDraggable {
   dragMove = (e: MouseEvent): void => {
     e.stopPropagation();
     e.preventDefault();
-    GridsterUtils.checkTouchEvent(e);
-    this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-    this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-    scroll(
-      this.gridster,
-      this.left,
-      this.top,
-      this.width,
-      this.height,
-      e,
-      this.lastMouse,
-      this.calculateItemPositionFromMousePosition
-    );
 
-    this.calculateItemPositionFromMousePosition(e);
+    // get the directions of the mouse event
+    let directions = this.getDirections(e);
+
+    if (this.gridster.options.enableBoundaryControl) {
+      // prevent moving up at the top of gridster
+      if (
+        directions.includes(Direction.UP) &&
+        this.gridsterItem.el.getBoundingClientRect().top <=
+          this.gridster.el.getBoundingClientRect().top + this.margin
+      ) {
+        directions = directions.filter(direction => direction != Direction.UP);
+        e = new MouseEvent(e.type, {
+          clientX: e.clientX,
+          clientY: this.lastMouse.clientY
+        });
+      }
+      // prevent moving left at the leftmost column of gridster
+      if (
+        directions.includes(Direction.LEFT) &&
+        this.gridsterItem.el.getBoundingClientRect().left <=
+          this.gridster.el.getBoundingClientRect().left + this.margin
+      ) {
+        directions = directions.filter(
+          direction => direction != Direction.LEFT
+        );
+        e = new MouseEvent(e.type, {
+          clientX: this.lastMouse.clientX,
+          clientY: e.clientY
+        });
+      }
+      // prevent moving right at the rightmost column of gridster
+      if (
+        directions.includes(Direction.RIGHT) &&
+        this.gridsterItem.el.getBoundingClientRect().right >=
+          this.gridster.el.getBoundingClientRect().right - this.margin
+      ) {
+        directions = directions.filter(
+          direction => direction != Direction.RIGHT
+        );
+        e = new MouseEvent(e.type, {
+          clientX: this.lastMouse.clientX,
+          clientY: e.clientY
+        });
+      }
+      // prevent moving down at the bottom of gridster
+      if (
+        directions.includes(Direction.DOWN) &&
+        this.gridsterItem.el.getBoundingClientRect().bottom >=
+          this.gridster.el.getBoundingClientRect().bottom - this.margin
+      ) {
+        directions = directions.filter(
+          direction => direction != Direction.DOWN
+        );
+        e = new MouseEvent(e.type, {
+          clientX: e.clientX,
+          clientY: this.lastMouse.clientY
+        });
+      }
+    }
+
+    // do not change item location when there is no direction to go
+    if (directions.length) {
+      GridsterUtils.checkTouchEvent(e);
+      this.offsetLeft =
+        this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
+      this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
+      scroll(
+        this.gridster,
+        this.left,
+        this.top,
+        this.width,
+        this.height,
+        e,
+        this.lastMouse,
+        this.calculateItemPositionFromMousePosition
+      );
+
+      this.calculateItemPositionFromMousePosition(e);
+    }
   };
 
   calculateItemPositionFromMousePosition = (e: MouseEvent): void => {
@@ -472,4 +544,25 @@ export class GridsterDraggable {
       cancelTouchCancel();
     }
   };
+
+  /**
+   * Returns the list of directions for given mouse event
+   * @param e Mouse event
+   * */
+  private getDirections(e: MouseEvent) {
+    const directions: string[] = [];
+    if (this.lastMouse.clientY > e.clientY) {
+      directions.push(Direction.UP);
+    }
+    if (this.lastMouse.clientY < e.clientY) {
+      directions.push(Direction.DOWN);
+    }
+    if (this.lastMouse.clientX < e.clientX) {
+      directions.push(Direction.RIGHT);
+    }
+    if (this.lastMouse.clientX > e.clientX) {
+      directions.push(Direction.LEFT);
+    }
+    return directions;
+  }
 }

src/app/sections/drag/drag.component.html

@@ -47,6 +47,12 @@
   >
     Disable Horizontal Scroll
   </mat-checkbox>
+  <mat-checkbox
+    [(ngModel)]="options.enableBoundaryControl"
+    (ngModelChange)="changedOptions()"
+  >
+    Enable Boundary Control
+  </mat-checkbox>
   <mat-form-field>
     <input
       matInput

src/assets/drag.md

@@ -13,3 +13,4 @@
 | draggable.dropOverItemsCallback | callback when dragging an item drops over another item                              | Function(sourceItem, targetItem, grid) | undefined               |
 | disableScrollHorizontal         | enable/disable auto horizontal scrolling when on edge of grid                       | Boolean                                | false                   |
 | disableScrollVertical           | enable/disable auto vertical scrolling when on edge of grid                         | Boolean                                | false                   |
+| enableBoundaryControl           | enable/disable boundary control while dragging items                                | Boolean                                | false                   |