feat(draggable): allow the draggable cursor to be customised

Author: Matt Lewis

src/draggable.directive.ts

@@ -62,6 +62,8 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
 
   @Input() validateDrag: ValidateDrag;
 
+  @Input() dragCursor = MOVE_CURSOR;
+
   @Output()
   dragStart: EventEmitter<Coordinates> = new EventEmitter<Coordinates>();
 
@@ -120,7 +122,7 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
           this.dragStart.next({ x: 0, y: 0 });
         });
 
-        this.setCursor(MOVE_CURSOR);
+        this.setCursor(this.dragCursor);
 
         const currentDrag: Subject<any> = new Subject();
 
@@ -369,7 +371,7 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
   }
 
   private onMouseEnter(): void {
-    this.setCursor(MOVE_CURSOR);
+    this.setCursor(this.dragCursor);
   }
 
   private onMouseLeave(): void {

test/draggable.directive.spec.ts

@@ -15,21 +15,23 @@ describe('draggable directive', () => {
         [dragSnapGrid]="dragSnapGrid"
         [ghostDragEnabled]="ghostDragEnabled"
         [validateDrag]="validateDrag"
+        [dragCursor]="dragCursor"
         (dragStart)="dragStart($event)"
         (dragging)="dragging($event)"
         (dragEnd)="dragEnd($event)">
         Drag me!
       </div>`
   })
   class TestComponent {
-    @ViewChild(DraggableDirective) public draggable: DraggableDirective;
-    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 };
-    public dragSnapGrid: any = {};
-    public ghostDragEnabled: boolean = true;
-    public validateDrag: ValidateDrag;
+    @ViewChild(DraggableDirective) draggable: DraggableDirective;
+    dragStart: sinon.SinonSpy = sinon.spy();
+    dragging: sinon.SinonSpy = sinon.spy();
+    dragEnd: sinon.SinonSpy = sinon.spy();
+    dragAxis: any = { x: true, y: true };
+    dragSnapGrid: any = {};
+    ghostDragEnabled: boolean = true;
+    validateDrag: ValidateDrag;
+    dragCursor = 'move';
   }
 
   beforeEach(() => {
@@ -533,4 +535,15 @@ describe('draggable directive', () => {
     });
     expect(draggableElement.style.transform).not.to.be.ok;
   });
+
+  it('should disable the mouse move cursor', () => {
+    fixture.componentInstance.dragCursor = '';
+    fixture.detectChanges();
+    const draggableElement: HTMLElement =
+      fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mouseenter', draggableElement);
+    expect(draggableElement.style.cursor).not.to.be.ok;
+    triggerDomEvent('mouseleave', draggableElement);
+    expect(draggableElement.style.cursor).not.to.be.ok;
+  });
 });