fix(month-view): add 1px drag sensitivity

Fixes #1012

Author: mattlewis92

projects/angular-calendar/src/modules/common/calendar-drag-helper.provider.ts

@@ -1,8 +1,6 @@
-import { isInside } from './util';
+import { isInside, isWithinThreshold } from './util';
 import { ValidateDragParams } from 'angular-draggable-droppable';
 
-const DRAG_THRESHOLD = 1;
-
 export class CalendarDragHelper {
   private readonly startPosition: ClientRect;
 
@@ -26,9 +24,6 @@ export class CalendarDragHelper {
     dragAlreadyMoved: boolean;
     transform: ValidateDragParams['transform'];
   }): boolean {
-    const isWithinThreshold =
-      Math.abs(x) > DRAG_THRESHOLD || Math.abs(y) > DRAG_THRESHOLD;
-
     if (snapDraggedEvents) {
       const newRect: ClientRect = Object.assign({}, this.startPosition, {
         left: this.startPosition.left + transform.x,
@@ -38,11 +33,11 @@ export class CalendarDragHelper {
       });
 
       return (
-        (isWithinThreshold || dragAlreadyMoved) &&
+        (isWithinThreshold({ x, y }) || dragAlreadyMoved) &&
         isInside(this.dragContainerElement.getBoundingClientRect(), newRect)
       );
     } else {
-      return isWithinThreshold || dragAlreadyMoved;
+      return isWithinThreshold({ x, y }) || dragAlreadyMoved;
     }
   }
 }

projects/angular-calendar/src/modules/common/util.ts

@@ -169,3 +169,8 @@ export function getWeekViewPeriod(
     return { viewStart, viewEnd };
   }
 }
+
+export function isWithinThreshold({ x, y }: { x: number; y: number }) {
+  const DRAG_THRESHOLD = 1;
+  return Math.abs(x) > DRAG_THRESHOLD || Math.abs(y) > DRAG_THRESHOLD;
+}

projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts

@@ -6,7 +6,7 @@ import {
   TemplateRef
 } from '@angular/core';
 import { MonthViewDay, CalendarEvent } from 'calendar-utils';
-import { trackByEventId } from '../common/util';
+import { isWithinThreshold, trackByEventId } from '../common/util';
 import { PlacementArray } from 'positioning';
 
 @Component({
@@ -25,6 +25,7 @@ import { PlacementArray } from 'positioning';
       let-tooltipAppendToBody="tooltipAppendToBody"
       let-tooltipDelay="tooltipDelay"
       let-trackByEventId="trackByEventId"
+      let-validateDrag="validateDrag"
     >
       <div class="cal-cell-top">
         <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{
@@ -55,6 +56,7 @@ import { PlacementArray } from 'positioning';
           dragActiveClass="cal-drag-active"
           [dropData]="{ event: event, draggedFrom: day }"
           [dragAxis]="{ x: event.draggable, y: event.draggable }"
+          [validateDrag]="validateDrag"
           (mwlClick)="eventClicked.emit({ event: event })"
         ></div>
       </div>
@@ -72,7 +74,8 @@ import { PlacementArray } from 'positioning';
         tooltipTemplate: tooltipTemplate,
         tooltipAppendToBody: tooltipAppendToBody,
         tooltipDelay: tooltipDelay,
-        trackByEventId: trackByEventId
+        trackByEventId: trackByEventId,
+        validateDrag: validateDrag
       }"
     >
     </ng-template>
@@ -117,4 +120,6 @@ export class CalendarMonthCellComponent {
   }>();
 
   trackByEventId = trackByEventId;
+
+  validateDrag = isWithinThreshold;
 }

projects/angular-calendar/src/modules/month/calendar-open-day-events.component.ts

@@ -13,7 +13,7 @@ import {
   AnimationTriggerMetadata
 } from '@angular/animations';
 import { CalendarEvent } from 'calendar-utils';
-import { trackByEventId } from '../common/util';
+import { isWithinThreshold, trackByEventId } from '../common/util';
 
 export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
   transition('void => *', [
@@ -35,6 +35,7 @@ export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
       let-eventClicked="eventClicked"
       let-isOpen="isOpen"
       let-trackByEventId="trackByEventId"
+      let-validateDrag="validateDrag"
     >
       <div class="cal-open-day-events" [@collapse] *ngIf="isOpen">
         <div
@@ -45,6 +46,7 @@ export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
           dragActiveClass="cal-drag-active"
           [dropData]="{ event: event }"
           [dragAxis]="{ x: event.draggable, y: event.draggable }"
+          [validateDrag]="validateDrag"
         >
           <span
             class="cal-event"
@@ -74,7 +76,8 @@ export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
         events: events,
         eventClicked: eventClicked,
         isOpen: isOpen,
-        trackByEventId: trackByEventId
+        trackByEventId: trackByEventId,
+        validateDrag: validateDrag
       }"
     >
     </ng-template>
@@ -98,4 +101,6 @@ export class CalendarOpenDayEventsComponent {
   }>();
 
   trackByEventId = trackByEventId;
+
+  validateDrag = isWithinThreshold;
 }