fix(weekView): revert allowDragOutside feature

BREAKING CHANGE: The `allowDragOutside` option has been removed from the week view as this can be implemented in user land. Please see this plunker for how to introduce it yourself: TODO
mattlewis92 · Jun 25, 2017 · ac70656 · ac70656
1 parent e0ef467
commit ac70656
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 126 deletions.
diff --git a/demos/demo-modules/draggable-external-events/component.ts b/demos/demo-modules/draggable-external-events/component.ts
@@ -1,6 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { CalendarEvent, CalendarEventTimesChangedEvent } from 'angular-calendar';
-import { Subject } from 'rxjs/Subject';
 import { colors } from '../demo-utils/colors';
 
 @Component({
@@ -29,7 +28,6 @@ export class DemoComponent {
   events: CalendarEvent[] = [];
 
   activeDayIsOpen: boolean = false;
-  refresh: Subject<any> = new Subject();
 
   eventDropped({event, newStart, newEnd}: CalendarEventTimesChangedEvent): void {
     const externalIndex: number = this.externalEvents.indexOf(event);
@@ -45,16 +43,5 @@ export class DemoComponent {
     this.activeDayIsOpen = true;
   }
 
-  droppedBack(event: CalendarEvent): void {
-
-    const internalIndex: number = this.events.indexOf(event);
-
-    if (internalIndex > -1) {
-      this.events.splice(internalIndex, 1);
-      this.externalEvents.push(event);
-
-      this.refresh.next();
-    }
-  }
 }
 
diff --git a/demos/demo-modules/draggable-external-events/template.html b/demos/demo-modules/draggable-external-events/template.html
@@ -1,9 +1,7 @@
 <div class="row">
 
   <div class="col-md-3">
-    <div class="card"
-         mwlDroppable
-         (drop)="droppedBack($event.dropData.event)">
+    <div class="card">
       <div class="card-block">
         <ul>
           <li
@@ -34,23 +32,19 @@
         [viewDate]="viewDate"
         [events]="events"
         [activeDayIsOpen]="activeDayIsOpen"
-        (eventTimesChanged)="eventDropped($event)"
-        [refresh]="refresh">
+        (eventTimesChanged)="eventDropped($event)">
       </mwl-calendar-month-view>
       <mwl-calendar-week-view
         *ngSwitchCase="'week'"
         [viewDate]="viewDate"
         [events]="events"
-        (eventTimesChanged)="eventDropped($event)"
-        [refresh]="refresh"
-        [allowDragOutside]="true">
+        (eventTimesChanged)="eventDropped($event)">
       </mwl-calendar-week-view>
       <mwl-calendar-day-view
         *ngSwitchCase="'day'"
         [viewDate]="viewDate"
         [events]="events"
-        (eventTimesChanged)="eventDropped($event)"
-        [refresh]="refresh">
+        (eventTimesChanged)="eventDropped($event)">
       </mwl-calendar-day-view>
     </div>
   </div>

diff --git a/src/components/week/calendarWeekView.component.ts b/src/components/week/calendarWeekView.component.ts
@@ -21,8 +21,6 @@ import {
 } from 'calendar-utils';
 import { ResizeEvent } from 'angular-resizable-element';
 import addDays from 'date-fns/add_days';
-import differenceInDays from 'date-fns/difference_in_days';
-import startOfDay from 'date-fns/start_of_day';
 import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider';
 import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provider';
 import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface';
@@ -55,7 +53,7 @@ export interface WeekViewEventResize {
         (dayClicked)="dayClicked.emit($event)"
         (eventDropped)="eventTimesChanged.emit($event)">
       </mwl-calendar-week-view-header>
-      <div *ngFor="let eventRow of eventRows" #eventRowContainer class="cal-events-row">
+      <div *ngFor="let eventRow of eventRows" #eventRowContainer>
         <div
           class="cal-event-container"
           #event
@@ -71,12 +69,11 @@ export interface WeekViewEventResize {
           (resizing)="resizing(weekEvent, $event, getDayColumnWidth(eventRowContainer))"
           (resizeEnd)="resizeEnded(weekEvent)"
           mwlDraggable
-          [dragSnapGrid]="{x: allowDragOutside ? 0 : getDayColumnWidth(eventRowContainer)}"
+          [dragAxis]="{x: weekEvent.event.draggable && currentResizes.size === 0, y: false}"
+          [dragSnapGrid]="{x: getDayColumnWidth(eventRowContainer)}"
           [validateDrag]="validateDrag"
           (dragStart)="dragStart(weekViewContainer, event)"
-          [dragAxis]="{x: weekEvent.event.draggable && currentResizes.size === 0, y: allowDragOutside}"
-          (dragEnd)="eventDragged(weekEvent, $event.x, getDayColumnWidth(eventRowContainer))"
-          [dropData]="{event: weekEvent.event}">
+          (dragEnd)="eventDragged(weekEvent, $event.x, getDayColumnWidth(eventRowContainer))">
           <mwl-calendar-week-view-event
             [weekEvent]="weekEvent"
             [tooltipPlacement]="tooltipPlacement"
@@ -142,11 +139,6 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() precision: 'days' | 'minutes' = 'days';
 
-  /**
-   * Allow events to be dragged outside of the calendar
-   */
-  @Input() allowDragOutside: boolean = false;
-
   /**
    * Called when a header week day is clicked
    */
@@ -302,22 +294,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   eventDragged(weekEvent: WeekViewEvent, draggedByPx: number, dayWidth: number): void {
 
-    let daysDragged: number = Math.round(draggedByPx / dayWidth);
-    let newStart: Date = addDays(weekEvent.event.start, daysDragged);
-
-    if (this.allowDragOutside) {
-      // Restrict start to first and last day on current week
-      if (newStart < this.days[0].date) {
-        daysDragged += differenceInDays(startOfDay(this.days[0].date), startOfDay(newStart));
-      }
-      const lastDate: Date = this.days[this.days.length - 1].date;
-      if (newStart > lastDate) {
-        daysDragged -= differenceInDays(startOfDay(newStart), startOfDay(lastDate));
-      }
-    }
-
-    newStart = addDays(weekEvent.event.start, daysDragged);
-
+    const daysDragged: number = draggedByPx / dayWidth;
+    const newStart: Date = addDays(weekEvent.event.start, daysDragged);
     let newEnd: Date;
     if (weekEvent.event.end) {
       newEnd = addDays(weekEvent.event.end, daysDragged);
@@ -338,11 +316,9 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    * @hidden
    */
   dragStart(weekViewContainer: HTMLElement, event: HTMLElement): void {
-    if (!this.allowDragOutside) {
-      const dragHelper: CalendarDragHelper = new CalendarDragHelper(weekViewContainer, event);
-      this.validateDrag = ({x, y}) => this.currentResizes.size === 0 && dragHelper.validateDrag({x, y});
-      this.cdr.markForCheck();
-    }
+    const dragHelper: CalendarDragHelper = new CalendarDragHelper(weekViewContainer, event);
+    this.validateDrag = ({x, y}) => this.currentResizes.size === 0 && dragHelper.validateDrag({x, y});
+    this.cdr.markForCheck();
   }
 
   private refreshHeader(): void {

diff --git a/test/calendarWeekView.component.spec.ts b/test/calendarWeekView.component.spec.ts
@@ -530,74 +530,4 @@ describe('calendarWeekView component', () => {
     });
   });
 
-  it('should allow the events to be dragged outside of the week view to the left', () => {
-    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
-    fixture.componentInstance.viewDate = new Date('2016-12-08');
-    fixture.componentInstance.events = [{
-      title: 'foo',
-      color: {primary: '', secondary: ''},
-      start: moment('2016-12-08').add(4, 'hours').toDate(),
-      end: moment('2016-12-08').add(6, 'hours').toDate(),
-      draggable: true
-    }];
-    fixture.componentInstance.allowDragOutside = 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 eventPosition: ClientRect = event.getBoundingClientRect();
-    let dragEvent: CalendarEventTimesChangedEvent;
-    fixture.componentInstance.eventTimesChanged.subscribe(event => {
-      dragEvent = event;
-    });
-    triggerDomEvent('mousedown', event, {clientX: eventPosition.left, clientY: eventPosition.top});
-    fixture.detectChanges();
-    triggerDomEvent('mousemove', document.body, {clientX: -10000, clientY: eventPosition.top});
-    fixture.detectChanges();
-    triggerDomEvent('mouseup', document.body, {clientX: -1000, clientY: eventPosition.top});
-    fixture.detectChanges();
-    fixture.destroy();
-    expect(dragEvent).to.deep.equal({
-      event: fixture.componentInstance.events[0],
-      newStart: moment('2016-12-07').startOf('week').add(4, 'hours').toDate(),
-      newEnd: moment('2016-12-07').startOf('week').add(6, 'hours').toDate()
-    });
-  });
-
-  it('should allow the events to be dragged outside of the week view to the right', () => {
-    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
-    fixture.componentInstance.viewDate = new Date('2016-12-08');
-    fixture.componentInstance.events = [{
-      title: 'foo',
-      color: {primary: '', secondary: ''},
-      start: moment('2016-12-08').add(4, 'hours').toDate(),
-      end: moment('2016-12-08').add(6, 'hours').toDate(),
-      draggable: true
-    }];
-    fixture.componentInstance.allowDragOutside = 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 eventPosition: ClientRect = event.getBoundingClientRect();
-    let dragEvent: CalendarEventTimesChangedEvent;
-    fixture.componentInstance.eventTimesChanged.subscribe(event => {
-      dragEvent = event;
-    });
-    triggerDomEvent('mousedown', event, {clientX: eventPosition.left, clientY: eventPosition.top});
-    fixture.detectChanges();
-    triggerDomEvent('mousemove', document.body, {clientX: document.body.clientWidth + 1000, clientY: eventPosition.top});
-    fixture.detectChanges();
-    triggerDomEvent('mouseup', document.body, {clientX: document.body.clientWidth + 1000, clientY: eventPosition.top});
-    fixture.detectChanges();
-    fixture.destroy();
-    expect(dragEvent).to.deep.equal({
-      event: fixture.componentInstance.events[0],
-      newStart: moment('2016-12-07').startOf('week').add(6, 'days').add(4, 'hours').toDate(),
-      newEnd: moment('2016-12-07').startOf('week').add(6, 'days').add(6, 'hours').toDate()
-    });
-  });
-
 });