fix(draggable): only emit the dragEnd event once

Author: Matt Lewis

src/draggable.directive.ts

@@ -8,6 +8,7 @@ import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/operator/take';
 import 'rxjs/add/operator/takeLast';
 import 'rxjs/add/operator/pairwise';
+import 'rxjs/add/operator/share';
 import {DraggableHelper} from './draggableHelper.provider';
 
 export type Coordinates = {x: number, y: number};
@@ -118,16 +119,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)`);
-      currentDrag.next({
-        clientX,
-        clientY,
-        dropData: this.dropData
-      });
-    });
+      .filter(({x, y}) => !this.validateDrag || this.validateDrag({x, y}))
+      .share();
 
     Observable
       .merge(
@@ -142,8 +135,14 @@ export class Draggable implements OnInit, OnDestroy {
       })
       .map(([previous, next]) => next)
       .filter(({x, y}) => x !== 0 || y !== 0)
-      .subscribe(({x, y}) => {
+      .subscribe(({x, y, currentDrag, clientX, clientY}) => {
         this.dragging.next({x, y});
+        this.setCssTransform(`translate(${x}px, ${y}px)`);
+        currentDrag.next({
+          clientX,
+          clientY,
+          dropData: this.dropData
+        });
       });
 
   }

test/draggable.directive.spec.ts

@@ -243,4 +243,12 @@ describe('draggable directive', () => {
     expect(fixture.componentInstance.dragging).to.have.been.calledWith({x: 2, y: 2});
   });
 
+  it('should only call the dragEnd event once', () => {
+    const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, {clientX: 5, clientY: 10});
+    triggerDomEvent('mousemove', draggableElement, {clientX: 7, clientY: 8});
+    triggerDomEvent('mouseup', draggableElement, {clientX: 7, clientY: 8});
+    expect(fixture.componentInstance.dragEnd).to.have.been.calledOnce;
+  });
+
 });

webpack.config.umd.js

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