fix(dayView): respect eventSnapSize when resizing events

Fixes #188

Author: Matt Lewis

src/components/day/calendarDayView.component.ts

@@ -33,6 +33,11 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
  */
 const SEGMENT_HEIGHT: number = 30;
 
+/**
+ * @hidden
+ */
+const MINUTES_IN_HOUR: number = 60;
+
 /**
  * Shows all events on a given day. Example usage:
  *
@@ -325,18 +330,18 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
 
   resizeEnded(dayEvent: DayViewEvent): void {
 
-    let segments: number;
+    let pixelsMoved: number;
     if (this.currentResize.edge === 'top') {
-      segments = (dayEvent.top - this.currentResize.originalTop) / this.eventSnapSize;
+      pixelsMoved = (dayEvent.top - this.currentResize.originalTop);
     } else {
-      segments = (dayEvent.height - this.currentResize.originalHeight) / this.eventSnapSize;
+      pixelsMoved = (dayEvent.height - this.currentResize.originalHeight);
     }
 
     dayEvent.top = this.currentResize.originalTop;
     dayEvent.height = this.currentResize.originalHeight;
 
-    const segmentAmountInMinutes: number = 60 / this.hourSegments;
-    const minutesMoved: number = segments * segmentAmountInMinutes;
+    const pixelAmountInMinutes: number = MINUTES_IN_HOUR / (this.hourSegments * SEGMENT_HEIGHT);
+    const minutesMoved: number = pixelsMoved * pixelAmountInMinutes;
     let newStart: Date = dayEvent.event.start;
     let newEnd: Date = dayEvent.event.end;
     if (this.currentResize.edge === 'top') {
@@ -358,7 +363,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
 
   eventDragged(dayEvent: DayViewEvent, draggedInPixels: number): void {
     const segments: number = draggedInPixels / this.eventSnapSize;
-    const segmentAmountInMinutes: number = 60 / this.hourSegments;
+    const segmentAmountInMinutes: number = MINUTES_IN_HOUR / this.hourSegments;
     const minutesMoved: number = segments * segmentAmountInMinutes;
     const newStart: Date = addMinutes(dayEvent.event.start, minutesMoved);
     let newEnd: Date;

test/calendarDayView.component.spec.ts

@@ -333,6 +333,44 @@ describe('CalendarDayViewComponent component', () => {
     });
   });
 
+  it('should resize the event and respect the event snap size', () => {
+    const fixture: ComponentFixture<CalendarDayViewComponent> = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [{
+      title: 'foo',
+      color: {primary: '', secondary: ''},
+      start: moment('2016-06-27').add(4, 'hours').toDate(),
+      end: moment('2016-06-27').add(6, 'hours').toDate(),
+      resizable: {
+        beforeStart: true
+      }
+    }];
+    fixture.componentInstance.eventSnapSize = 1;
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
+    const rect: ClientRect = event.getBoundingClientRect();
+    let resizeEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.subscribe(event => {
+      resizeEvent = event;
+    });
+    triggerDomEvent('mousedown', document.body, {clientY: rect.top, clientX: rect.left + 10});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientY: rect.top - 10, clientX: rect.left + 10});
+    fixture.detectChanges();
+    expect(event.getBoundingClientRect().top).to.equal(rect.top - 10);
+    expect(event.getBoundingClientRect().height).to.equal(rect.height + 10);
+    triggerDomEvent('mouseup', document.body, {clientY: rect.top - 10, clientX: rect.left + 10});
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(resizeEvent).to.deep.equal({
+      event: fixture.componentInstance.events[0],
+      newStart: moment('2016-06-27').add(4, 'hours').subtract(10, 'minutes').toDate(),
+      newEnd: moment('2016-06-27').add(6, 'hours').toDate()
+    });
+  });
+
   it('should show a tooltip on mouseover of the event', () => {
 
     const fixture: ComponentFixture<CalendarDayViewComponent> = TestBed.createComponent(CalendarDayViewComponent);