fix(week-view): allow dragging events to span multiple days

BREAKING CHANGE: the drag behaviour now mimicks the resize behaviour where you can drag an event down to move it into the next day. To restore the old behaviour you can use the new `validateEventTimesChanged` input to control where an event can be dragged.

Closes #1234

Author: mattlewis92

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

@@ -1,4 +1,4 @@
-import { isInside, isWithinThreshold } from './util';
+import { isInsideLeftAndRight, isWithinThreshold } from './util';
 import { ValidateDragParams } from 'angular-draggable-droppable';
 
 export class CalendarDragHelper {
@@ -24,20 +24,34 @@ export class CalendarDragHelper {
     dragAlreadyMoved: boolean;
     transform: ValidateDragParams['transform'];
   }): boolean {
+    const isDraggedWithinThreshold =
+      isWithinThreshold({ x, y }) || dragAlreadyMoved;
+
     if (snapDraggedEvents) {
-      const newRect: ClientRect = Object.assign({}, this.startPosition, {
+      const inner: ClientRect = Object.assign({}, this.startPosition, {
         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 (
-        (isWithinThreshold({ x, y }) || dragAlreadyMoved) &&
-        isInside(this.dragContainerElement.getBoundingClientRect(), newRect)
-      );
+      if (isDraggedWithinThreshold) {
+        const outer = this.dragContainerElement.getBoundingClientRect();
+
+        const isTopInside = outer.top < inner.top && inner.top < outer.bottom;
+
+        const isBottomInside =
+          outer.top < inner.bottom && inner.bottom < outer.bottom;
+
+        return (
+          isInsideLeftAndRight(outer, inner) && (isTopInside || isBottomInside)
+        );
+      }
+
+      /* istanbul ignore next */
+      return false;
     } else {
-      return isWithinThreshold({ x, y }) || dragAlreadyMoved;
+      return isDraggedWithinThreshold;
     }
   }
 }

projects/angular-calendar/src/modules/common/util.ts

@@ -15,19 +15,33 @@ export const validateEvents = (events: CalendarEvent[]) => {
   return validateEventsWithoutLog(events, warn);
 };
 
-export function isInside(outer: ClientRect, inner: ClientRect): boolean {
+export function isInsideLeftAndRight(
+  outer: ClientRect,
+  inner: ClientRect
+): boolean {
   return (
     Math.floor(outer.left) <= Math.ceil(inner.left) &&
     Math.floor(inner.left) <= Math.ceil(outer.right) &&
     Math.floor(outer.left) <= Math.ceil(inner.right) &&
-    Math.floor(inner.right) <= Math.ceil(outer.right) &&
+    Math.floor(inner.right) <= Math.ceil(outer.right)
+  );
+}
+
+function isInsideTopAndBottom(outer: ClientRect, inner: ClientRect): boolean {
+  return (
     Math.floor(outer.top) <= Math.ceil(inner.top) &&
     Math.floor(inner.top) <= Math.ceil(outer.bottom) &&
     Math.floor(outer.top) <= Math.ceil(inner.bottom) &&
     Math.floor(inner.bottom) <= Math.ceil(outer.bottom)
   );
 }
 
+export function isInside(outer: ClientRect, inner: ClientRect): boolean {
+  return (
+    isInsideLeftAndRight(outer, inner) && isInsideTopAndBottom(outer, inner)
+  );
+}
+
 export function roundToNearest(amount: number, precision: number) {
   return Math.round(amount / precision) * precision;
 }

projects/angular-calendar/test/calendar-week-view.component.spec.ts

@@ -2652,6 +2652,67 @@ describe('calendarWeekView component', () => {
     fixture.destroy();
   });
 
+  it('should drag a time event down and into another day', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(
+      CalendarWeekViewComponent
+    );
+    fixture.componentInstance.viewDate = new Date('2020-05-03');
+    fixture.componentInstance.daysInWeek = 2;
+    fixture.componentInstance.events = [
+      {
+        start: moment(new Date('2020-05-03')).startOf('day').hours(20).toDate(),
+        end: moment(new Date('2020-05-03')).startOf('day').hours(23).toDate(),
+        title: 'foo',
+        draggable: true,
+      },
+    ];
+    fixture.componentInstance.ngOnChanges({
+      viewDate: {},
+      events: {},
+    });
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const events = fixture.nativeElement.querySelectorAll(
+      '.cal-event-container'
+    );
+    const rect1: ClientRect = events[0].getBoundingClientRect();
+    let dragEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.pipe(take(1)).subscribe((e) => {
+      dragEvent = e;
+    });
+    triggerDomEvent('mousedown', events[0], {
+      clientX: 0,
+      clientY: rect1.bottom,
+      button: 0,
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', events[0], {
+      clientX: 0,
+      clientY: rect1.bottom + 95,
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mouseup', events[0], {
+      clientX: 0,
+      clientY: rect1.bottom + 95,
+      button: 0,
+    });
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(dragEvent).to.deep.equal({
+      type: 'drag',
+      allDay: false,
+      event: fixture.componentInstance.events[0],
+      newStart: moment(fixture.componentInstance.events[0].start)
+        .add(1, 'hour')
+        .add(30, 'minutes')
+        .toDate(),
+      newEnd: moment(fixture.componentInstance.events[0].end)
+        .add(1, 'hour')
+        .add(30, 'minutes')
+        .toDate(),
+    });
+  });
+
   describe('current time marker', () => {
     let clock: any;
     beforeEach(() => {