feat(draggable): auto change the cursor to the move icon on hover

Closes #9
mattlewis92 · Dec 10, 2016 · 50d1962 · 50d1962
1 parent 3445337
commit 50d1962
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/demo/demo.component.ts b/demo/demo.component.ts
@@ -24,7 +24,6 @@ import {Component} from '@angular/core';
       background-color: red;
       width: 200px;
       height: 200px;
-      cursor: move;
       position: relative;
       z-index: 1;
       float: left;

diff --git a/src/draggable.directive.ts b/src/draggable.directive.ts
@@ -14,6 +14,8 @@ export type DragAxis = {x: boolean, y: boolean};
 
 export type SnapGrid = {x?: number, y?: number};
 
+const MOVE_CURSOR: string = 'move';
+
 @Directive({
   selector: '[mwlDraggable]'
 })
@@ -48,6 +50,7 @@ export class Draggable implements OnInit, OnDestroy {
       .flatMap((mouseDownEvent: MouseEvent) => {
 
         this.dragStart.next({x: 0, y: 0});
+        this.setCursor(MOVE_CURSOR);
 
         if (this.ghostDragEnabled) {
           this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', 'none');
@@ -146,6 +149,24 @@ export class Draggable implements OnInit, OnDestroy {
     this.mouseUp.next(event);
   }
 
+  /**
+   * @private
+   */
+  @HostListener('mouseenter')
+  onMouseEnter(): void {
+    if (this.canDrag()) {
+      this.setCursor(MOVE_CURSOR);
+    }
+  }
+
+  /**
+   * @private
+   */
+  @HostListener('mouseleave')
+  onMouseLeave(): void {
+    this.setCursor(null);
+  }
+
   private setCssTransform(value: string): void {
     if (this.ghostDragEnabled) {
       this.renderer.setElementStyle(this.element.nativeElement, 'transform', value);
@@ -160,4 +181,8 @@ export class Draggable implements OnInit, OnDestroy {
     return this.dragAxis.x || this.dragAxis.y;
   }
 
+  private setCursor(value: string): void {
+    this.renderer.setElementStyle(this.element.nativeElement, 'cursor', value);
+  }
+
 }
diff --git a/test/draggable.directive.spec.ts b/test/draggable.directive.spec.ts
@@ -191,4 +191,20 @@ describe('draggable directive', () => {
     expect(draggableElement.style.transform).not.to.ok;
   });
 
+  it('should auto set the mouse cursor to the move icon on hover', () => {
+    const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mouseenter', draggableElement);
+    expect(draggableElement.style.cursor).to.equal('move');
+    triggerDomEvent('mouseleave', draggableElement);
+    expect(draggableElement.style.cursor).not.to.be.ok;
+  });
+
+  it('should not set the mouse cursor when the element cant be dragged', () => {
+    fixture.componentInstance.dragAxis = {x: false, y: false};
+    fixture.detectChanges();
+    const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mouseenter', draggableElement);
+    expect(draggableElement.style.cursor).not.to.be.ok;
+  });
+
 });