fix(draggable): when dragging is disabled, no drag events should be emitted

Author: Matt Lewis

src/draggable.directive.ts

@@ -43,68 +43,70 @@ export class Draggable implements OnInit, OnDestroy {
 
   ngOnInit(): void {
 
-    const mouseDrag: Observable<any> = this.mouseDown.flatMap((mouseDownEvent: MouseEvent) => {
+    const mouseDrag: Observable<any> = this.mouseDown
+      .filter(() => this.canDrag())
+      .flatMap((mouseDownEvent: MouseEvent) => {
 
-      this.dragStart.next({x: 0, y: 0});
+        this.dragStart.next({x: 0, y: 0});
 
-      if (this.ghostDragEnabled) {
-        this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', 'none');
-      }
+        if (this.ghostDragEnabled) {
+          this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', 'none');
+        }
 
-      const currentDrag: Subject<any> = new Subject();
+        const currentDrag: Subject<any> = new Subject();
 
-      this.draggableHelper.currentDrag.next(currentDrag);
+        this.draggableHelper.currentDrag.next(currentDrag);
 
-      const mouseMove: Observable<Coordinates> = this.mouseMove
-        .map((mouseMoveEvent: MouseEvent) => {
+        const mouseMove: Observable<Coordinates> = this.mouseMove
+          .map((mouseMoveEvent: MouseEvent) => {
 
-          mouseMoveEvent.preventDefault();
+            mouseMoveEvent.preventDefault();
 
-          return {
-            currentDrag,
-            x: mouseMoveEvent.clientX - mouseDownEvent.clientX,
-            y: mouseMoveEvent.clientY - mouseDownEvent.clientY
-          };
+            return {
+              currentDrag,
+              x: mouseMoveEvent.clientX - mouseDownEvent.clientX,
+              y: mouseMoveEvent.clientY - mouseDownEvent.clientY
+            };
 
-        })
-        .map((moveData: Coordinates) => {
+          })
+          .map((moveData: Coordinates) => {
 
-          if (this.dragSnapGrid.x) {
-            moveData.x = Math.floor(moveData.x / this.dragSnapGrid.x) * this.dragSnapGrid.x;
-          }
+            if (this.dragSnapGrid.x) {
+              moveData.x = Math.floor(moveData.x / this.dragSnapGrid.x) * this.dragSnapGrid.x;
+            }
 
-          if (this.dragSnapGrid.y) {
-            moveData.y = Math.floor(moveData.y / this.dragSnapGrid.y) * this.dragSnapGrid.y;
-          }
+            if (this.dragSnapGrid.y) {
+              moveData.y = Math.floor(moveData.y / this.dragSnapGrid.y) * this.dragSnapGrid.y;
+            }
 
-          return moveData;
-        })
-        .map((moveData: Coordinates) => {
+            return moveData;
+          })
+          .map((moveData: Coordinates) => {
 
-          if (!this.dragAxis.x) {
-            moveData.x = 0;
-          }
+            if (!this.dragAxis.x) {
+              moveData.x = 0;
+            }
 
-          if (!this.dragAxis.y) {
-            moveData.y = 0;
-          }
+            if (!this.dragAxis.y) {
+              moveData.y = 0;
+            }
 
-          return moveData;
-        })
-        .takeUntil(Observable.merge(this.mouseUp, this.mouseDown));
+            return moveData;
+          })
+          .takeUntil(Observable.merge(this.mouseUp, this.mouseDown));
 
-      mouseMove.takeLast(1).subscribe(({x, y}) => {
-        this.dragEnd.next({x, y});
-        currentDrag.complete();
-        this.setCssTransform('');
-        if (this.ghostDragEnabled) {
-          this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', 'auto');
-        }
-      });
+        mouseMove.takeLast(1).subscribe(({x, y}) => {
+          this.dragEnd.next({x, y});
+          currentDrag.complete();
+          this.setCssTransform('');
+          if (this.ghostDragEnabled) {
+            this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', 'auto');
+          }
+        });
 
-      return mouseMove;
+        return mouseMove;
 
-    });
+      });
 
     mouseDrag.subscribe(({x, y, currentDrag}) => {
       this.dragging.next({x, y});
@@ -154,4 +156,8 @@ export class Draggable implements OnInit, OnDestroy {
     }
   }
 
+  private canDrag(): boolean {
+    return this.dragAxis.x || this.dragAxis.y;
+  }
+
 }

test/draggable.directive.spec.ts

@@ -116,10 +116,11 @@ describe('draggable directive', () => {
     const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
     triggerDomEvent('mousedown', draggableElement, {clientX: 5, clientY: 10});
     triggerDomEvent('mousemove', draggableElement, {clientX: 7, clientY: 12});
-    expect(fixture.componentInstance.dragging).to.have.been.calledWith({x: 0, y: 0});
-    expect(draggableElement.style.transform).to.equal('translate(0px, 0px)');
+    expect(fixture.componentInstance.dragStart).not.to.have.been.called;
+    expect(fixture.componentInstance.dragging).not.to.have.been.called;
+    expect(draggableElement.style.transform).not.to.be.ok;
     triggerDomEvent('mouseup', draggableElement, {clientX: 7, clientY: 12});
-    expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 0, y: 0});
+    expect(fixture.componentInstance.dragEnd).not.to.have.been.called;
   });
 
   it('should snap all horizontal drags to a grid', () => {