From 71d5a052d09885e5d273ffb88157ef1f1e804d59 Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Tue, 26 Dec 2017 19:16:57 +0000 Subject: [PATCH] fix: set the resize cursor globally when resizing Fixes #70 --- demo/index.html | 5 +++++ src/resizable.directive.ts | 17 ++++++++++++----- test/resizable.spec.ts | 22 ++++++++++++++++++++++ 3 files changed, 39 insertions(+), 5 deletions(-) diff --git a/demo/index.html b/demo/index.html index 68eaad5..3693bb0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,6 +5,11 @@ + angular 4.0+ resizable element diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts index 6c3f966..59b840b 100644 --- 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 index 2e5ac5f..bae87ae 100644 --- 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 = 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(''); + }); });