fix(dayView): dont allow events to be resized outside of the calendar

Closes #99

Author: Matt Lewis

src/calendar.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ResizableModule } from 'angular-resizable-element';
 import { DragAndDropModule } from 'angular-draggable-droppable';
@@ -54,14 +54,20 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
 })
 export class CalendarModule {
 
-  static forRoot(): ModuleWithProviders {
+  static forRoot({eventTitleFormatter, dateFormatter}:
+    {eventTitleFormatter?: Provider, dateFormatter?: Provider} = {}): ModuleWithProviders {
+
+    eventTitleFormatter = eventTitleFormatter || CalendarEventTitleProvider;
+    dateFormatter = dateFormatter || CalendarDateFormatter;
+
     return {
       ngModule: CalendarModule,
       providers: [
-        CalendarEventTitleProvider,
-        CalendarDateFormatter
+        eventTitleFormatter,
+        dateFormatter
       ]
     };
+
   }
 
 }

src/components/day/calendarDayViewEvent.component.ts

@@ -3,6 +3,7 @@ import { DayViewEvent } from 'calendar-utils';
 import { ResizeEvent } from 'angular-resizable-element';
 import addMinutes from 'date-fns/add_minutes';
 import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider';
+import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provider';
 
 @Component({
   selector: 'mwl-calendar-day-view-event',
@@ -25,6 +26,7 @@ import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider'
       mwlResizable
       [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"
       [resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"
+      [validateResize]="validateResize"
       (resizeStart)="resizeStarted(dayEvent, $event)"
       (resizing)="resizing(dayEvent, $event)"
       (resizeEnd)="resizeEnded(dayEvent)"
@@ -67,6 +69,8 @@ export class CalendarDayViewEventComponent {
 
   validateDrag: Function;
 
+  validateResize: Function;
+
   constructor(private cdr: ChangeDetectorRef) {}
 
   resizeStarted(event: DayViewEvent, resizeEvent: ResizeEvent): void {
@@ -75,6 +79,9 @@ export class CalendarDayViewEventComponent {
       originalHeight: event.height,
       edge: typeof resizeEvent.edges.top !== 'undefined' ? 'top' : 'bottom'
     };
+    const resizeHelper: CalendarResizeHelper = new CalendarResizeHelper(this.dayViewContainer);
+    this.validateResize = ({rectangle}) => resizeHelper.validateResize({rectangle});
+    this.cdr.markForCheck();
   }
 
   resizing(event: DayViewEvent, resizeEvent: ResizeEvent): void {

src/providers/calendarResizeHelper.provider.ts

@@ -2,10 +2,15 @@ import { isInside } from './calendarUtils.provider';
 
 export class CalendarResizeHelper {
 
-  constructor(private resizeContainerElement: HTMLElement, private dayColumnWidth: number) {}
+  constructor(private resizeContainerElement: HTMLElement, private minWidth?: number) {}
 
   validateResize({rectangle}: {rectangle: ClientRect}): boolean {
-    return isInside(this.resizeContainerElement.getBoundingClientRect(), rectangle) && rectangle.width >= this.dayColumnWidth;
+
+    if (this.minWidth && rectangle.width < this.minWidth) {
+      return false;
+    }
+
+    return isInside(this.resizeContainerElement.getBoundingClientRect(), rectangle);
   }
 
 }

test/calendarDayView.component.spec.ts

@@ -266,6 +266,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
+    event.style.position = 'absolute';
     const rect: ClientRect = event.getBoundingClientRect();
     let resizeEvent: CalendarEventTimesChangedEvent;
     fixture.componentInstance.eventTimesChanged.subscribe(event => {
@@ -303,6 +304,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
+    event.style.position = 'absolute';
     const rect: ClientRect = event.getBoundingClientRect();
     let resizeEvent: CalendarEventTimesChangedEvent;
     fixture.componentInstance.eventTimesChanged.subscribe(event => {
@@ -443,4 +445,37 @@ describe('CalendarDayViewComponent component', () => {
     fixture.destroy();
   });
 
+  it('should not allow events to be resized outside of the container', () => {
+    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(1, 'hours').toDate(),
+      end: moment('2016-06-27').add(6, 'hours').toDate(),
+      resizable: {
+        beforeStart: true
+      }
+    }];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
+    event.style.position = 'absolute';
+    const rect: ClientRect = event.getBoundingClientRect();
+    triggerDomEvent('mousedown', document.body, {clientY: rect.top, clientX: rect.left + 10});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientY: rect.top - 60, clientX: rect.left + 10});
+    fixture.detectChanges();
+    expect(event.getBoundingClientRect().top).to.equal(rect.top - 60);
+    expect(event.getBoundingClientRect().height).to.equal(rect.height + 60);
+    triggerDomEvent('mousemove', document.body, {clientY: rect.top - 120, clientX: rect.left + 10});
+    fixture.detectChanges();
+    expect(event.getBoundingClientRect().top).to.equal(rect.top - 60);
+    expect(event.getBoundingClientRect().height).to.equal(rect.height + 60);
+    triggerDomEvent('mouseup', document.body, {clientY: rect.top - 60, clientX: rect.left + 10});
+    fixture.detectChanges();
+    fixture.destroy();
+  });
+
 });

test/calendarModule.spec.ts

@@ -1,22 +1,53 @@
-import {
-  inject,
-  TestBed
-} from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { expect } from 'chai';
 import {
   CalendarModule,
-  CalendarDateFormatter
+  CalendarDateFormatter,
+  CalendarEventTitle
 } from './../src';
 
 describe('calendar module', () => {
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({imports: [CalendarModule.forRoot()]});
+  it('should not require providers to be specified when using CalendarModule.forRoot()', () => {
+    TestBed.configureTestingModule({
+      imports: [
+        CalendarModule.forRoot()
+      ]
+    });
+    const dateFormatter: CalendarDateFormatter = TestBed.get(CalendarDateFormatter);
+    expect(dateFormatter instanceof CalendarDateFormatter).to.be.true;
   });
 
-  it('should not require providers to be specified when using CalendarModule.forRoot()',
-    inject([CalendarDateFormatter], (dateFormatter) => {
-    expect(dateFormatter instanceof CalendarDateFormatter).to.be.true;
-  }));
+  it('should allow a custom date formatter to be used', () => {
+    class MyDateFormatter extends CalendarDateFormatter {}
+    TestBed.configureTestingModule({
+      imports: [
+        CalendarModule.forRoot({
+          dateFormatter: {
+            provide: CalendarDateFormatter,
+            useClass: MyDateFormatter
+          }
+        })
+      ]
+    });
+    const dateFormatter: MyDateFormatter = TestBed.get(CalendarDateFormatter);
+    expect(dateFormatter instanceof MyDateFormatter).to.be.true;
+  });
+
+  it('should allow a custom title formatter to be used', () => {
+    class MyEventTitle extends CalendarEventTitle {}
+    TestBed.configureTestingModule({
+      imports: [
+        CalendarModule.forRoot({
+          dateFormatter: {
+            provide: CalendarEventTitle,
+            useClass: MyEventTitle
+          }
+        })
+      ]
+    });
+    const eventTitle: MyEventTitle = TestBed.get(CalendarEventTitle);
+    expect(eventTitle instanceof MyEventTitle).to.be.true;
+  });
 
 });