feat(dragAxix): allow the drag axis to be locked to just x and y

Closes #2
mattlewis92 · Nov 27, 2016 · 38fd4b5 · 38fd4b5
1 parent fcace6a
commit 38fd4b5
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 2 deletions.
diff --git a/src/draggable.directive.ts b/src/draggable.directive.ts
@@ -10,13 +10,17 @@ import {DraggableHelper} from './draggableHelper.provider';
 
 type Coordinates = {x: number, y: number};
 
+type DragAxis = {x: boolean, y: boolean};
+
 @Directive({
   selector: '[mwlDraggable]'
 })
 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
@@ -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});
+  });
+
 });