feat(auto-scrolling): Added auto scrolling feature (vertical & horizontal).

When dragging a grid item, an auto scroll is performed if the pointer is near it's scrollParent borders. ScrollParent needs to be provided in order to enable scroll. Scroll vertical is always performed but scroll horizontal is only performed if the scrollParent has explicitly a current horizontal overflowing.

Author: llorenspujol

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

@@ -42,3 +42,9 @@ export interface KtdGridItemRenderData<T = number | string> {
 export type KtdGridItemRenderDataTokenType = (id: string) => KtdGridItemRenderData<string>;
 export const GRID_ITEM_GET_RENDER_DATA_TOKEN: InjectionToken<KtdGridItemRenderDataTokenType> = new InjectionToken('GRID_ITEM_GET_RENDER_DATA_TOKEN');
 
+export interface KtdDraggingData {
+    pointerDownEvent: MouseEvent | TouchEvent;
+    pointerDragEvent: MouseEvent | TouchEvent;
+    parentElemClientRect: ClientRect;
+    dragElemClientRect: ClientRect;
+}

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

@@ -0,0 +1,71 @@
+
+// tslint:disable
+
+/**
+ * Client rect utilities.
+ * This file is taken from Angular Material repository. This is the reason why the tslint is disabled on this case.
+ * Don't enable it until some custom change is done on this file.
+ */
+
+
+/** Gets a mutable version of an element's bounding `ClientRect`. */
+export function getMutableClientRect(element: Element): ClientRect {
+  const clientRect = element.getBoundingClientRect();
+
+  // We need to clone the `clientRect` here, because all the values on it are readonly
+  // and we need to be able to update them. Also we can't use a spread here, because
+  // the values on a `ClientRect` aren't own properties. See:
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
+  return {
+    top: clientRect.top,
+    right: clientRect.right,
+    bottom: clientRect.bottom,
+    left: clientRect.left,
+    width: clientRect.width,
+    height: clientRect.height
+  };
+}
+
+/**
+ * Checks whether some coordinates are within a `ClientRect`.
+ * @param clientRect ClientRect that is being checked.
+ * @param x Coordinates along the X axis.
+ * @param y Coordinates along the Y axis.
+ */
+export function isInsideClientRect(clientRect: ClientRect, x: number, y: number) {
+  const {top, bottom, left, right} = clientRect;
+  return y >= top && y <= bottom && x >= left && x <= right;
+}
+
+/**
+ * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
+ * @param clientRect `ClientRect` that should be updated.
+ * @param top Amount to add to the `top` position.
+ * @param left Amount to add to the `left` position.
+ */
+export function adjustClientRect(clientRect: ClientRect, top: number, left: number) {
+  clientRect.top += top;
+  clientRect.bottom = clientRect.top + clientRect.height;
+
+  clientRect.left += left;
+  clientRect.right = clientRect.left + clientRect.width;
+}
+
+/**
+ * Checks whether the pointer coordinates are close to a ClientRect.
+ * @param rect ClientRect to check against.
+ * @param threshold Threshold around the ClientRect.
+ * @param pointerX Coordinates along the X axis.
+ * @param pointerY Coordinates along the Y axis.
+ */
+export function isPointerNearClientRect(rect: ClientRect,
+                                        threshold: number,
+                                        pointerX: number,
+                                        pointerY: number): boolean {
+  const {top, right, bottom, left, width, height} = rect;
+  const xThreshold = width * threshold;
+  const yThreshold = height * threshold;
+
+  return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
+         pointerX > left - xThreshold && pointerX < right + xThreshold;
+}

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

@@ -1,5 +1,5 @@
 import { compact, CompactType, LayoutItem, moveElement } from './react-grid-layout.utils';
-import { KtdGridCfg, KtdGridCompactType, KtdGridItemRect, KtdGridLayout, KtdGridLayoutItem } from '../grid.definitions';
+import { KtdDraggingData, KtdGridCfg, KtdGridCompactType, KtdGridItemRect, KtdGridLayout, KtdGridLayoutItem } from '../grid.definitions';
 import { ktdPointerClientX, ktdPointerClientY } from './pointer.utils';
 import { KtdDictionary } from '../../types';
 
@@ -53,7 +53,7 @@ export function ktdGetGridLayoutDiff(gridLayoutA: KtdGridLayoutItem[], gridLayou
  * @param compactionType type of compaction that will be performed
  * @param draggingData contains all the information about the drag
  */
-export function ktdGridItemDragging(gridItemId: string, config: KtdGridCfg, compactionType: CompactType, draggingData: { pointerDownEvent: MouseEvent | TouchEvent, pointerDragEvent: MouseEvent | TouchEvent, parentElemClientRect: ClientRect, dragElemClientRect: ClientRect }): { layout: KtdGridLayoutItem[]; draggedItemPos: KtdGridItemRect } {
+export function ktdGridItemDragging(gridItemId: string, config: KtdGridCfg, compactionType: CompactType, draggingData: KtdDraggingData): { layout: KtdGridLayoutItem[]; draggedItemPos: KtdGridItemRect } {
     const {pointerDownEvent, pointerDragEvent, parentElemClientRect, dragElemClientRect} = draggingData;
 
     const draggingElemPrevItem = config.layout.find(item => item.id === gridItemId)!;
@@ -120,7 +120,7 @@ export function ktdGridItemDragging(gridItemId: string, config: KtdGridCfg, comp
  * @param compactionType type of compaction that will be performed
  * @param draggingData contains all the information about the drag
  */
-export function ktdGridItemResizing(gridItemId: string, config: KtdGridCfg, compactionType: CompactType, draggingData: { pointerDownEvent: MouseEvent | TouchEvent, pointerDragEvent: MouseEvent | TouchEvent, parentElemClientRect: ClientRect, dragElemClientRect: ClientRect }): { layout: KtdGridLayoutItem[]; draggedItemPos: KtdGridItemRect } {
+export function ktdGridItemResizing(gridItemId: string, config: KtdGridCfg, compactionType: CompactType, draggingData: KtdDraggingData): { layout: KtdGridLayoutItem[]; draggedItemPos: KtdGridItemRect } {
     const {pointerDownEvent, pointerDragEvent, parentElemClientRect, dragElemClientRect} = draggingData;
 
     const clientStartX = ktdPointerClientX(pointerDownEvent);