fix(draggable): support scrolling when dragging events

Fixes #838
Fixes #909

Author: mattlewis92

package-lock.json

@@ -133,7 +133,7 @@
     "@angular/core": ">=6.0.0 <9.0.0"
   },
   "dependencies": {
-    "angular-draggable-droppable": "^4.2.0",
+    "angular-draggable-droppable": "^4.3.0",
     "angular-resizable-element": "^3.2.4",
     "calendar-utils": "^0.3.1",
     "positioning": "^1.4.0"

package.json

@@ -1,4 +1,5 @@
 import { isInside } from './util';
+import { ValidateDragParams } from 'angular-draggable-droppable';
 
 const DRAG_THRESHOLD = 1;
 
@@ -16,22 +17,24 @@ export class CalendarDragHelper {
     x,
     y,
     snapDraggedEvents,
-    dragAlreadyMoved
+    dragAlreadyMoved,
+    transform
   }: {
     x: number;
     y: number;
     snapDraggedEvents: boolean;
     dragAlreadyMoved: boolean;
+    transform: ValidateDragParams['transform'];
   }): boolean {
     const isWithinThreshold =
       Math.abs(x) > DRAG_THRESHOLD || Math.abs(y) > DRAG_THRESHOLD;
 
     if (snapDraggedEvents) {
       const newRect: ClientRect = Object.assign({}, this.startPosition, {
-        left: this.startPosition.left + x,
-        right: this.startPosition.right + x,
-        top: this.startPosition.top + y,
-        bottom: this.startPosition.bottom + y
+        left: this.startPosition.left + transform.x,
+        right: this.startPosition.right + transform.x,
+        top: this.startPosition.top + transform.y,
+        bottom: this.startPosition.bottom + transform.y
       });
 
       return (

projects/angular-calendar/src/modules/common/calendar-drag-helper.provider.ts

@@ -42,7 +42,7 @@ import {
   shouldFireDroppedEvent
 } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
-import { DragEndEvent } from 'angular-draggable-droppable';
+import { DragEndEvent, ValidateDrag } from 'angular-draggable-droppable';
 import { PlacementArray } from 'positioning';
 
 export interface CalendarDayViewBeforeRenderEvent {
@@ -389,7 +389,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @hidden
    */
-  validateDrag: (args: any) => boolean;
+  validateDrag: ValidateDrag;
 
   /**
    * @hidden
@@ -577,13 +577,14 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
       dayEventsContainer,
       event
     );
-    this.validateDrag = ({ x, y }) =>
+    this.validateDrag = ({ x, y, transform }) =>
       this.currentResizes.size === 0 &&
       dragHelper.validateDrag({
         x,
         y,
         snapDraggedEvents: this.snapDraggedEvents,
-        dragAlreadyMoved: this.dragAlreadyMoved
+        dragAlreadyMoved: this.dragAlreadyMoved,
+        transform
       });
     this.eventDragEnter = 0;
     this.dragAlreadyMoved = false;

projects/angular-calendar/src/modules/day/calendar-day-view.component.ts

@@ -51,7 +51,8 @@ import { DateAdapter } from '../../date-adapters/date-adapter';
 import {
   DragEndEvent,
   DropEvent,
-  DragMoveEvent
+  DragMoveEvent,
+  ValidateDrag
 } from 'angular-draggable-droppable';
 import { PlacementArray } from 'positioning';
 
@@ -576,7 +577,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @hidden
    */
-  validateDrag: (args: any) => boolean;
+  validateDrag: ValidateDrag;
 
   /**
    * @hidden
@@ -893,14 +894,15 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       eventsContainer,
       event
     );
-    this.validateDrag = ({ x, y }) =>
+    this.validateDrag = ({ x, y, transform }) =>
       this.allDayEventResizes.size === 0 &&
       this.timeEventResizes.size === 0 &&
       dragHelper.validateDrag({
         x,
         y,
         snapDraggedEvents: this.snapDraggedEvents,
-        dragAlreadyMoved: this.dragAlreadyMoved
+        dragAlreadyMoved: this.dragAlreadyMoved,
+        transform
       });
     this.dragActive = true;
     this.dragAlreadyMoved = false;

projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

@@ -125,7 +125,11 @@
 
 <div class="container-fluid">
   <div class="row fill-height">
-    <div class="col-md-9 col-xl-10 fill-height scroll-y" perfectScrollbar>
+    <div
+      class="col-md-9 col-xl-10 fill-height scroll-y"
+      perfectScrollbar
+      mwlDraggableScrollContainer
+    >
       <div class="card" *ngIf="firstDemoLoaded; else loading">
         <div class="card-header">
           <div class="row">

projects/demos/app/demo-app.html

@@ -8,6 +8,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbTabsetModule, NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { Angulartics2Module } from 'angulartics2';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { DragAndDropModule } from 'angular-draggable-droppable';
 import { DemoAppComponent } from './demo-app.component';
 import { DemoComponent as DefaultDemoComponent } from './demo-modules/kitchen-sink/component';
 import { DemoModule as DefaultDemoModule } from './demo-modules/kitchen-sink/module';
@@ -23,6 +24,7 @@ import { FormsModule } from '@angular/forms';
     FormsModule,
     NgbTabsetModule,
     NgbCollapseModule,
+    DragAndDropModule,
     DefaultDemoModule,
     RouterModule.forRoot(
       [