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

Closes #99

Author: Matt Lewis

src/components/week/calendarWeekView.component.ts

@@ -23,6 +23,7 @@ import {
 import { ResizeEvent } from 'angular-resizable-element';
 import addDays from 'date-fns/add_days';
 import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider';
+import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provider';
 import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface';
 
 @Component({
@@ -47,16 +48,17 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
           [style.marginLeft]="((100 / 7) * weekEvent.offset) + '%'"
           mwlResizable
           [resizeEdges]="{left: weekEvent.event?.resizable?.beforeStart, right: weekEvent.event?.resizable?.afterEnd}"
-          [resizeSnapGrid]="{left: getEventWidth(eventRowContainer), right: getEventWidth(eventRowContainer)}"
-          (resizeStart)="resizeStarted(weekEvent, $event)"
-          (resizing)="resizing(weekEvent, $event, getEventWidth(eventRowContainer))"
+          [resizeSnapGrid]="{left: getDayColumnWidth(eventRowContainer), right: getDayColumnWidth(eventRowContainer)}"
+          [validateResize]="validateResize"
+          (resizeStart)="resizeStarted(weekViewContainer, weekEvent, $event)"
+          (resizing)="resizing(weekEvent, $event, getDayColumnWidth(eventRowContainer))"
           (resizeEnd)="resizeEnded(weekEvent)"
           mwlDraggable
           [dragAxis]="{x: weekEvent.event.draggable && !currentResize, y: false}"
-          [dragSnapGrid]="{x: getEventWidth(eventRowContainer)}"
+          [dragSnapGrid]="{x: getDayColumnWidth(eventRowContainer)}"
           [validateDrag]="validateDrag"
           (dragStart)="dragStart(weekViewContainer, event)"
-          (dragEnd)="eventDragged(weekEvent, $event.x, getEventWidth(eventRowContainer))">
+          (dragEnd)="eventDragged(weekEvent, $event.x, getDayColumnWidth(eventRowContainer))">
           <mwl-calendar-week-view-event
             [weekEvent]="weekEvent"
             [tooltipPlacement]="tooltipPlacement"
@@ -143,6 +145,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   validateDrag: Function;
 
+  /**
+   * @private
+   */
+  validateResize: Function;
+
   /**
    * @private
    */
@@ -189,12 +196,15 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @private
    */
-  resizeStarted(weekEvent: WeekViewEvent, resizeEvent: ResizeEvent): void {
+  resizeStarted(weekViewContainer: HTMLElement, weekEvent: WeekViewEvent, resizeEvent: ResizeEvent): void {
     this.currentResize = {
       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();
   }
 
   /**
@@ -258,7 +268,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @private
    */
-  getEventWidth(eventRowContainer: HTMLElement): number {
+  getDayColumnWidth(eventRowContainer: HTMLElement): number {
     return Math.floor(eventRowContainer.offsetWidth / 7);
   }
 

src/providers/calendarDragHelper.provider.ts

@@ -1,13 +1,4 @@
-function isInside(outer: ClientRect, inner: ClientRect): boolean {
-  return outer.left <= inner.left &&
-    inner.left <= outer.right &&
-    outer.left <= inner.right &&
-    inner.right <= outer.right &&
-    outer.top <= inner.top &&
-    inner.top <= outer.bottom &&
-    outer.top <= inner.bottom &&
-    inner.bottom <= outer.bottom;
-}
+import { isInside } from './calendarUtils.provider';
 
 export class CalendarDragHelper {
 

src/providers/calendarResizeHelper.provider.ts

@@ -0,0 +1,11 @@
+import { isInside } from './calendarUtils.provider';
+
+export class CalendarResizeHelper {
+
+  constructor(private resizeContainerElement: HTMLElement, private dayColumnWidth: number) {}
+
+  validateResize({rectangle}: {rectangle: ClientRect}): boolean {
+    return isInside(this.resizeContainerElement.getBoundingClientRect(), rectangle) && rectangle.width >= this.dayColumnWidth;
+  }
+
+}

src/providers/calendarUtils.provider.ts

@@ -0,0 +1,10 @@
+export function isInside(outer: ClientRect, inner: ClientRect): boolean {
+  return outer.left <= inner.left &&
+    inner.left <= outer.right &&
+    outer.left <= inner.right &&
+    inner.right <= outer.right &&
+    outer.top <= inner.top &&
+    inner.top <= outer.bottom &&
+    outer.top <= inner.bottom &&
+    inner.bottom <= outer.bottom;
+}

test/calendarWeekView.component.spec.ts

@@ -329,4 +329,66 @@ describe('calendarWeekView component', () => {
     });
   });
 
+  it('should not allow events to be resized smaller than 1 day', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
+    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.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
+    const dayWidth: number = event.parentElement.offsetWidth / 7;
+    const rect: ClientRect = event.getBoundingClientRect();
+    triggerDomEvent('mousedown', document.body, {clientX: rect.left, clientY: rect.top});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientX: rect.left + dayWidth, clientY: rect.top});
+    fixture.detectChanges();
+    expect(Math.round(event.getBoundingClientRect().left)).to.equal(Math.round(rect.left));
+    expect(Math.round(event.getBoundingClientRect().width)).to.equal(Math.round(rect.width));
+    triggerDomEvent('mouseup', document.body, {clientX: rect.left - dayWidth, clientY: rect.top});
+    fixture.detectChanges();
+    fixture.destroy();
+  });
+
+  it('should not allow events to be resized outside of the current view', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
+    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.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
+    const dayWidth: number = event.parentElement.offsetWidth / 7;
+    const rect: ClientRect = event.getBoundingClientRect();
+    triggerDomEvent('mousedown', document.body, {clientX: rect.left, clientY: rect.top});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientX: rect.left - dayWidth, clientY: rect.top});
+    fixture.detectChanges();
+    expect(Math.round(event.getBoundingClientRect().left)).to.equal(Math.round(rect.left - dayWidth));
+    expect(Math.round(event.getBoundingClientRect().width)).to.equal(Math.round(rect.width + dayWidth));
+    triggerDomEvent('mousemove', document.body, {clientX: rect.left - (dayWidth * 2), clientY: rect.top});
+    fixture.detectChanges();
+    expect(Math.round(event.getBoundingClientRect().left)).to.equal(Math.round(rect.left - dayWidth));
+    expect(Math.round(event.getBoundingClientRect().width)).to.equal(Math.round(rect.width + dayWidth));
+    triggerDomEvent('mouseup', document.body, {clientX: rect.left - (dayWidth * 2), clientY: rect.top});
+    fixture.detectChanges();
+    fixture.destroy();
+  });
+
 });