fix(weekView): allow events to be resized that are next to each other

Author: Matt Lewis

src/components/week/calendarWeekView.component.ts

@@ -28,6 +28,12 @@ import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provi
 import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface';
 import { CalendarUtils } from '../../providers/calendarUtils.provider';
 
+interface CurrentResize {
+  originalOffset: number;
+  originalSpan: number;
+  edge: string;
+}
+
 /**
  * Shows all events on a given week. Example usage:
  *
@@ -68,7 +74,7 @@ import { CalendarUtils } from '../../providers/calendarUtils.provider';
           [dragSnapGrid]="{x: allowDragOutside ? 0 : getDayColumnWidth(eventRowContainer)}"
           [validateDrag]="validateDrag"
           (dragStart)="dragStart(weekViewContainer, event)"
-          [dragAxis]="{x: weekEvent.event.draggable && !currentResize, y: allowDragOutside}"
+          [dragAxis]="{x: weekEvent.event.draggable && currentResizes.size === 0, y: allowDragOutside}"
           (dragEnd)="eventDragged(weekEvent, $event.x, getDayColumnWidth(eventRowContainer))"
           [dropData]="{event: weekEvent.event}">
           <mwl-calendar-week-view-event
@@ -173,11 +179,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @hidden
    */
-  currentResize: {
-    originalOffset: number,
-    originalSpan: number,
-    edge: string
-  };
+  currentResizes: Map<WeekViewEvent, CurrentResize> = new Map();
 
   /**
    * @hidden
@@ -236,11 +238,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    * @hidden
    */
   resizeStarted(weekViewContainer: HTMLElement, weekEvent: WeekViewEvent, resizeEvent: ResizeEvent): void {
-    this.currentResize = {
+    this.currentResizes.set(weekEvent, {
       originalOffset: weekEvent.offset,
       originalSpan: weekEvent.span,
       edge: typeof resizeEvent.edges.left !== 'undefined' ? 'left' : 'right'
-    };
+    });
     const resizeHelper: CalendarResizeHelper = new CalendarResizeHelper(weekViewContainer, this.getDayColumnWidth(weekViewContainer));
     this.validateResize = ({rectangle}) => resizeHelper.validateResize({rectangle});
     this.cdr.markForCheck();
@@ -250,41 +252,47 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    * @hidden
    */
   resizing(weekEvent: WeekViewEvent, resizeEvent: ResizeEvent, dayWidth: number): void {
+
+    const currentResize: CurrentResize = this.currentResizes.get(weekEvent);
+
     if (resizeEvent.edges.left) {
       const diff: number = Math.round(+resizeEvent.edges.left / dayWidth);
-      weekEvent.offset = this.currentResize.originalOffset + diff;
-      weekEvent.span = this.currentResize.originalSpan - diff;
+      weekEvent.offset = currentResize.originalOffset + diff;
+      weekEvent.span = currentResize.originalSpan - diff;
     } else if (resizeEvent.edges.right) {
       const diff: number = Math.round(+resizeEvent.edges.right / dayWidth);
-      weekEvent.span = this.currentResize.originalSpan + diff;
+      weekEvent.span = currentResize.originalSpan + diff;
     }
+
   }
 
   /**
    * @hidden
    */
   resizeEnded(weekEvent: WeekViewEvent): void {
 
+    const currentResize: CurrentResize = this.currentResizes.get(weekEvent);
+
     let daysDiff: number;
-    if (this.currentResize.edge === 'left') {
-      daysDiff = weekEvent.offset - this.currentResize.originalOffset;
+    if (currentResize.edge === 'left') {
+      daysDiff = weekEvent.offset - currentResize.originalOffset;
     } else {
-      daysDiff = weekEvent.span - this.currentResize.originalSpan;
+      daysDiff = weekEvent.span - currentResize.originalSpan;
     }
 
-    weekEvent.offset = this.currentResize.originalOffset;
-    weekEvent.span = this.currentResize.originalSpan;
+    weekEvent.offset = currentResize.originalOffset;
+    weekEvent.span = currentResize.originalSpan;
 
     let newStart: Date = weekEvent.event.start;
     let newEnd: Date = weekEvent.event.end;
-    if (this.currentResize.edge === 'left') {
+    if (currentResize.edge === 'left') {
       newStart = addDays(newStart, daysDiff);
     } else if (newEnd) {
       newEnd = addDays(newEnd, daysDiff);
     }
 
     this.eventTimesChanged.emit({newStart, newEnd, event: weekEvent.event});
-    this.currentResize = null;
+    this.currentResizes.delete(weekEvent);
 
   }
 
@@ -331,7 +339,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   dragStart(weekViewContainer: HTMLElement, event: HTMLElement): void {
     if (!this.allowDragOutside) {
       const dragHelper: CalendarDragHelper = new CalendarDragHelper(weekViewContainer, event);
-      this.validateDrag = ({x, y}) => !this.currentResize && dragHelper.validateDrag({x, y});
+      this.validateDrag = ({x, y}) => this.currentResizes.size === 0 && dragHelper.validateDrag({x, y});
       this.cdr.markForCheck();
     }
   }

test/calendarWeekView.component.spec.ts

@@ -337,6 +337,63 @@ describe('calendarWeekView component', () => {
     });
   });
 
+  it('should allow 2 events next to each other to be resized at the same time', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [{
+      title: 'event 1',
+      color: {primary: '', secondary: ''},
+      start: moment('2016-06-27').add(4, 'hours').toDate(),
+      end: moment('2016-06-27').add(6, 'hours').toDate(),
+      resizable: {
+        beforeStart: true,
+        afterEnd: true
+      }
+    }, {
+      title: 'event 2',
+      color: {primary: '', secondary: ''},
+      start: moment('2016-06-28').add(4, 'hours').toDate(),
+      end: moment('2016-06-29').add(6, 'hours').toDate(),
+      resizable: {
+        beforeStart: true,
+        afterEnd: true
+      }
+    }];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event1: HTMLElement = fixture.nativeElement.querySelectorAll('.cal-event-container')[0];
+    const event2: HTMLElement = fixture.nativeElement.querySelectorAll('.cal-event-container')[1];
+    const dayWidth: number = event1.parentElement.offsetWidth / 7;
+    const event1Rect: ClientRect = event1.getBoundingClientRect();
+    const event2Rect: ClientRect = event2.getBoundingClientRect();
+    const resizeEvents: CalendarEventTimesChangedEvent[] = [];
+    fixture.componentInstance.eventTimesChanged.subscribe(event => {
+      resizeEvents.push(event);
+    });
+    triggerDomEvent('mousedown', document.body, {clientX: event1Rect.right, clientY: event1Rect.top});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientX: event1Rect.right + dayWidth, clientY: event1Rect.top});
+    fixture.detectChanges();
+    expect(Math.round(event1.getBoundingClientRect().left)).to.equal(Math.round(event1Rect.left));
+    expect(Math.round(event1.getBoundingClientRect().width)).to.equal(Math.round(event1Rect.width + dayWidth));
+    expect(Math.round(event2.getBoundingClientRect().left)).to.equal(Math.round(event2Rect.left + dayWidth));
+    expect(Math.round(event2.getBoundingClientRect().width)).to.equal(Math.round(event2Rect.width - dayWidth));
+    triggerDomEvent('mouseup', document.body, {clientX: event1Rect.right + dayWidth, clientY: event1Rect.top});
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(resizeEvents[0]).to.deep.equal({
+      event: fixture.componentInstance.events[0],
+      newStart: moment('2016-06-27').add(4, 'hours').toDate(),
+      newEnd: moment('2016-06-27').add(6, 'hours').add(1, 'day').toDate()
+    });
+    expect(resizeEvents[1]).to.deep.equal({
+      event: fixture.componentInstance.events[1],
+      newStart: moment('2016-06-28').add(1, 'day').add(4, 'hours').toDate(),
+      newEnd: moment('2016-06-29').add(6, 'hours').toDate(),
+    });
+  });
+
   it('should allow the event to be dragged and dropped', () => {
     const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
     fixture.componentInstance.viewDate = new Date('2016-12-08');