From 38fd4b50eeff5c238ff4dd963d82b110f9619c44 Mon Sep 17 00:00:00 2001
From: Matt Lewis <matthew.lewis@socialsignin.co.uk>
Date: Sun, 27 Nov 2016 14:25:12 +0000
Subject: [PATCH] feat(dragAxix): allow the drag axis to be locked to just x
 and y

Closes #2
---
 src/draggable.directive.ts       | 13 ++++++++++
 test/draggable.directive.spec.ts | 42 ++++++++++++++++++++++++++++++--
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/draggable.directive.ts b/src/draggable.directive.ts
index 076b151..feaaab4 100644
--- a/src/draggable.directive.ts
+++ b/src/draggable.directive.ts
@@ -10,6 +10,8 @@ import {DraggableHelper} from './draggableHelper.provider';
 
 type Coordinates = {x: number, y: number};
 
+type DragAxis = {x: boolean, y: boolean};
+
 @Directive({
   selector: '[mwlDraggable]'
 })
@@ -17,6 +19,8 @@ export class Draggable implements OnInit, OnDestroy {
 
   @Input() dropData: any;
 
+  @Input() dragAxis: DragAxis = {x: true, y: true};
+
   @Output() dragStart: EventEmitter<Coordinates> = new EventEmitter<Coordinates>();
 
   @Output() dragging: EventEmitter<Coordinates> = new EventEmitter<Coordinates>();
@@ -49,6 +53,15 @@ export class Draggable implements OnInit, OnDestroy {
             y: mouseMoveEvent.clientY - mouseDownEvent.clientY
           };
         })
+        .map((moveData: Coordinates) => {
+          if (!this.dragAxis.x) {
+            moveData.x = 0;
+          }
+          if (!this.dragAxis.y) {
+            moveData.y = 0;
+          }
+          return moveData;
+        })
         .takeUntil(Observable.merge(this.mouseUp, this.mouseDown));
 
       mouseMove.takeLast(1).subscribe(({x, y}) => {
diff --git a/test/draggable.directive.spec.ts b/test/draggable.directive.spec.ts
index 5b6f642..c13d87f 100644
--- a/test/draggable.directive.spec.ts
+++ b/test/draggable.directive.spec.ts
@@ -11,10 +11,11 @@ describe('draggable directive', () => {
   @Component({
     template: `
       <div 
-        mwlDraggable 
+        mwlDraggable
+        [dragAxis]="dragAxis"
         (dragStart)="dragStart($event)" 
         (dragging)="dragging($event)"
-        (dragEnd)="dragEnd($event)" >
+        (dragEnd)="dragEnd($event)">
         Drag me!
       </div>`,
   })
@@ -24,6 +25,7 @@ describe('draggable directive', () => {
     public dragStart: sinon.SinonSpy = sinon.spy();
     public dragging: sinon.SinonSpy = sinon.spy();
     public dragEnd: sinon.SinonSpy = sinon.spy();
+    public dragAxis: any = {x: true, y: true};
 
   }
 
@@ -80,4 +82,40 @@ describe('draggable directive', () => {
     expect(complete).to.have.been.calledOnce;
   });
 
+  it('should disable dragging along the x axis', () => {
+    fixture.componentInstance.dragAxis = {x: false, y: true};
+    fixture.detectChanges();
+    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: 2});
+    expect(draggableElement.style.transform).to.equal('translate(0px, 2px)');
+    triggerDomEvent('mouseup', draggableElement, {clientX: 7, clientY: 12});
+    expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 0, y: 2});
+  });
+
+  it('should disable dragging along the y axis', () => {
+    fixture.componentInstance.dragAxis = {x: true, y: false};
+    fixture.detectChanges();
+    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: 2, y: 0});
+    expect(draggableElement.style.transform).to.equal('translate(2px, 0px)');
+    triggerDomEvent('mouseup', draggableElement, {clientX: 7, clientY: 12});
+    expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 2, y: 0});
+  });
+
+  it('should disable dragging', () => {
+    fixture.componentInstance.dragAxis = {x: false, y: false};
+    fixture.detectChanges();
+    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)');
+    triggerDomEvent('mouseup', draggableElement, {clientX: 7, clientY: 12});
+    expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 0, y: 0});
+  });
+
 });
\ No newline at end of file