fix(draggable): dont fire duplicate dragging events with the same coordinates

Closes #6

Author: Matt Lewis

src/draggable.directive.ts

@@ -5,7 +5,9 @@ import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/mergeMap';
 import 'rxjs/add/operator/takeUntil';
+import 'rxjs/add/operator/take';
 import 'rxjs/add/operator/takeLast';
+import 'rxjs/add/operator/pairwise';
 import {DraggableHelper} from './draggableHelper.provider';
 
 export type Coordinates = {x: number, y: number};
@@ -112,11 +114,24 @@ export class Draggable implements OnInit, OnDestroy {
       });
 
     mouseDrag.subscribe(({x, y, currentDrag}) => {
-      this.dragging.next({x, y});
       this.setCssTransform(`translate(${x}px, ${y}px)`);
       currentDrag.next({rectangle: this.element.nativeElement.getBoundingClientRect(), dropData: this.dropData});
     });
 
+    Observable.merge(
+      mouseDrag.take(1).map(value => [, value]),
+      mouseDrag.pairwise()
+    ).filter(([previous, next]) => {
+      if (!previous) {
+        return true;
+      }
+      return previous.x !== next.x || previous.y !== next.y;
+    })
+    .map(([previous, next]) => next)
+    .subscribe(({x, y}) => {
+      this.dragging.next({x, y});
+    });
+
   }
 
   ngOnDestroy(): void {

test/draggable.directive.spec.ts

@@ -207,4 +207,17 @@ describe('draggable directive', () => {
     expect(draggableElement.style.cursor).not.to.be.ok;
   });
 
+  it('should not call the dragging event multiple times with the same values', () => {
+    fixture.componentInstance.dragSnapGrid = {y: 10, x: 10};
+    fixture.detectChanges();
+    const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, {clientX: 10, clientY: 5});
+    triggerDomEvent('mousemove', draggableElement, {clientX: 12, clientY: 7});
+    expect(fixture.componentInstance.dragging).to.have.been.calledOnce;
+    expect(fixture.componentInstance.dragging).to.have.been.calledWith({x: 0, y: 0});
+    triggerDomEvent('mousemove', draggableElement, {clientX: 18, clientY: 14});
+    expect(fixture.componentInstance.dragging).to.have.been.calledOnce;
+    expect(fixture.componentInstance.dragging).to.have.been.calledWith({x: 0, y: 0});
+  });
+
 });

webpack.config.umd.js

@@ -86,6 +86,12 @@ module.exports = {
       commonjs: 'rxjs/add/operator/filter',
       commonjs2: 'rxjs/add/operator/filter',
       amd: 'rxjs/add/operator/filter'
+    },
+    'rxjs/add/operator/take': {
+      root: ['rx', 'Observable'],
+      commonjs: 'rxjs/add/operator/take',
+      commonjs2: 'rxjs/add/operator/take',
+      amd: 'rxjs/add/operator/take'
     }
   },
   devtool: 'source-map',