feat(validateDrag): add the validate drag input

Closes #8

Author: Matt Lewis

src/draggable.directive.ts

@@ -16,6 +16,8 @@ export type DragAxis = {x: boolean, y: boolean};
 
 export type SnapGrid = {x?: number, y?: number};
 
+export type ValidateDrag = (coordinates: Coordinates) => boolean;
+
 const MOVE_CURSOR: string = 'move';
 
 @Directive({
@@ -31,6 +33,8 @@ export class Draggable implements OnInit, OnDestroy {
 
   @Input() ghostDragEnabled: boolean = true;
 
+  @Input() validateDrag: ValidateDrag;
+
   @Output() dragStart: EventEmitter<Coordinates> = new EventEmitter<Coordinates>();
 
   @Output() dragging: EventEmitter<Coordinates> = new EventEmitter<Coordinates>();
@@ -113,7 +117,8 @@ export class Draggable implements OnInit, OnDestroy {
 
         return mouseMove;
 
-      });
+      })
+      .filter(({x, y}) => !this.validateDrag || this.validateDrag({x, y}));
 
     mouseDrag.subscribe(({x, y, currentDrag, clientX, clientY}) => {
       this.setCssTransform(`translate(${x}px, ${y}px)`);

test/draggable.directive.spec.ts

@@ -4,7 +4,7 @@ import {expect} from 'chai';
 import * as sinon from 'sinon';
 import {triggerDomEvent} from './util';
 import {DragAndDropModule} from '../src/index';
-import {Draggable} from '../src/draggable.directive';
+import {Draggable, ValidateDrag} from '../src/draggable.directive';
 
 describe('draggable directive', () => {
 
@@ -15,6 +15,7 @@ describe('draggable directive', () => {
         [dragAxis]="dragAxis"
         [dragSnapGrid]="dragSnapGrid"
         [ghostDragEnabled]="ghostDragEnabled"
+        [validateDrag]="validateDrag"
         (dragStart)="dragStart($event)" 
         (dragging)="dragging($event)"
         (dragEnd)="dragEnd($event)">
@@ -30,6 +31,7 @@ describe('draggable directive', () => {
     public dragAxis: any = {x: true, y: true};
     public dragSnapGrid: any = {};
     public ghostDragEnabled: boolean = true;
+    public validateDrag: ValidateDrag;
 
   }
 
@@ -227,4 +229,18 @@ describe('draggable directive', () => {
     expect(fixture.componentInstance.dragging).to.have.been.calledWith({x: 0, y: 10});
   });
 
+  it('should allow drags to be validated', () => {
+    fixture.componentInstance.validateDrag = ({x, y}) => x > 0 && y > 0;
+    fixture.detectChanges();
+    const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, {clientX: 5, clientY: 10});
+    expect(fixture.componentInstance.dragStart).to.have.been.calledWith({x: 0, y: 0});
+    triggerDomEvent('mousemove', draggableElement, {clientX: 3, clientY: 10});
+    expect(fixture.componentInstance.dragging).not.to.have.been.calledWith({x: -2, y: 0});
+    triggerDomEvent('mousemove', draggableElement, {clientX: 7, clientY: 8});
+    expect(fixture.componentInstance.dragging).not.to.have.been.calledWith({x: 2, y: -2});
+    triggerDomEvent('mousemove', draggableElement, {clientX: 7, clientY: 12});
+    expect(fixture.componentInstance.dragging).to.have.been.calledWith({x: 2, y: 2});
+  });
+
 });