fix: set the resize cursor globally when resizing

Fixes #70
mattlewis92 · Dec 26, 2017 · 71d5a05 · 71d5a05
1 parent 705a589
commit 71d5a05
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <style>
+      body {
+        min-height: 100vh;
+      }
+    </style>
     <title>angular 4.0+ resizable element</title>
   </head>
   <body>

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -412,11 +412,16 @@ export class ResizableDirective implements OnInit, OnDestroy {
           DEFAULT_RESIZE_CURSORS,
           this.resizeCursors
         );
-        const cursor: string = currentResize
-          ? ''
-          : getResizeCursor(resizeEdges, resizeCursors);
-
-        this.renderer.setStyle(this.elm.nativeElement, 'cursor', cursor);
+        if (currentResize) {
+          const cursor: string = getResizeCursor(
+            currentResize.edges,
+            resizeCursors
+          );
+          this.renderer.setStyle(document.body, 'cursor', cursor);
+        } else {
+          const cursor: string = getResizeCursor(resizeEdges, resizeCursors);
+          this.renderer.setStyle(this.elm.nativeElement, 'cursor', cursor);
+        }
         this.setElementClass(this.elm, RESIZE_ACTIVE_CLASS, !!currentResize);
         this.setElementClass(
           this.elm,
@@ -679,6 +684,8 @@ export class ResizableDirective implements OnInit, OnDestroy {
     this.mouseup.subscribe(() => {
       if (currentResize) {
         this.renderer.removeClass(this.elm.nativeElement, RESIZE_ACTIVE_CLASS);
+        this.renderer.setStyle(document.body, 'cursor', '');
+        this.renderer.setStyle(this.elm.nativeElement, 'cursor', '');
         this.zone.run(() => {
           this.resizeEnd.emit({
             edges: getEdgesDiff({

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -1399,4 +1399,26 @@ describe('resizable directive', () => {
       }
     });
   });
+
+  it('should set the resize cursor on the body when resizing', () => {
+    const fixture: ComponentFixture<TestComponent> = createComponent();
+    fixture.componentInstance.enableGhostResize = false;
+    fixture.detectChanges();
+    const elm: HTMLElement =
+      fixture.componentInstance.resizable.elm.nativeElement;
+    triggerDomEvent('mousedown', elm, {
+      clientX: 100,
+      clientY: 200
+    });
+    triggerDomEvent('mousemove', elm, {
+      clientX: 101,
+      clientY: 200
+    });
+    expect(document.body.style.cursor).to.equal('nw-resize');
+    triggerDomEvent('mouseup', elm, {
+      clientX: 101,
+      clientY: 200
+    });
+    expect(document.body.style.cursor).to.equal('');
+  });
 });