diff --git a/demo/demo.ts b/demo/demo.ts index eeee3d7..8df8d16 100644 --- a/demo/demo.ts +++ b/demo/demo.ts @@ -35,6 +35,7 @@ import {Resizable, ResizeEvent, ResizeHandle} from './../angular2-resizable'; mwl-resizable [validateResize]="validate" [resizeEdges]="{bottom: true, right: true, top: true, left: true}" + [enableResizeStyling]="true" (onResizeEnd)="onResizeEnd($event)"> = new EventEmitter(false); @Output() onResize: EventEmitter = new EventEmitter(false); @Output() onResizeEnd: EventEmitter = new EventEmitter(false); @@ -182,10 +183,12 @@ export class Resizable implements OnInit, AfterViewInit { }; const resetElementStyles: Function = (): void => { - for (let key in currentResize.originalStyles) { - const value: string = currentResize.originalStyles[key]; - if (typeof value !== 'undefined') { - this.renderer.setElementStyle(this.elm.nativeElement, key, currentResize.originalStyles[key]); + if (this.enableResizeStyling) { + for (let key in currentResize.originalStyles) { + const value: string = currentResize.originalStyles[key]; + if (typeof value !== 'undefined') { + this.renderer.setElementStyle(this.elm.nativeElement, key, currentResize.originalStyles[key]); + } } } }; @@ -222,10 +225,12 @@ export class Resizable implements OnInit, AfterViewInit { }) : true; }).subscribe((newBoundingRect: BoundingRectangle) => { - this.renderer.setElementStyle(this.elm.nativeElement, 'height', `${newBoundingRect.height}px`); - this.renderer.setElementStyle(this.elm.nativeElement, 'width', `${newBoundingRect.width}px`); - this.renderer.setElementStyle(this.elm.nativeElement, 'top', `${newBoundingRect.top}px`); - this.renderer.setElementStyle(this.elm.nativeElement, 'left', `${newBoundingRect.left}px`); + if (this.enableResizeStyling) { + this.renderer.setElementStyle(this.elm.nativeElement, 'height', `${newBoundingRect.height}px`); + this.renderer.setElementStyle(this.elm.nativeElement, 'width', `${newBoundingRect.width}px`); + this.renderer.setElementStyle(this.elm.nativeElement, 'top', `${newBoundingRect.top}px`); + this.renderer.setElementStyle(this.elm.nativeElement, 'left', `${newBoundingRect.left}px`); + } this.onResize.emit({ edges: getEdgesDiff({ @@ -263,11 +268,13 @@ export class Resizable implements OnInit, AfterViewInit { '-webkit-user-drag': this.elm.nativeElement.style['-webkit-user-drag'] } }; - this.renderer.setElementStyle(this.elm.nativeElement, 'position', 'fixed'); - this.renderer.setElementStyle(this.elm.nativeElement, 'left', `${currentResize.startingRect.left}px`); - this.renderer.setElementStyle(this.elm.nativeElement, 'top', `${currentResize.startingRect.top}px`); - this.renderer.setElementStyle(this.elm.nativeElement, 'user-drag', 'none'); - this.renderer.setElementStyle(this.elm.nativeElement, '-webkit-user-drag', 'none'); + if (this.enableResizeStyling) { + this.renderer.setElementStyle(this.elm.nativeElement, 'position', 'fixed'); + this.renderer.setElementStyle(this.elm.nativeElement, 'left', `${currentResize.startingRect.left}px`); + this.renderer.setElementStyle(this.elm.nativeElement, 'top', `${currentResize.startingRect.top}px`); + this.renderer.setElementStyle(this.elm.nativeElement, 'user-drag', 'none'); + this.renderer.setElementStyle(this.elm.nativeElement, '-webkit-user-drag', 'none'); + } this.onResizeStart.emit({ edges: getEdgesDiff({edges, initialRectangle: startingRect, newRectangle: startingRect}), rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0) diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts index d4780a4..7fb020a 100644 --- a/test/resizable.spec.ts +++ b/test/resizable.spec.ts @@ -35,6 +35,7 @@ describe('resizable directive', () => { mwl-resizable [validateResize]="validate" [resizeEdges]="resizeEdges" + [enableResizeStyling]="enableResizeStyling" (onResizeStart)="onResizeStart($event)" (onResize)="onResize($event)" (onResizeEnd)="onResizeEnd($event)"> @@ -50,6 +51,7 @@ describe('resizable directive', () => { public onResizeEnd: jasmine.Spy = jasmine.createSpy('onResizeEnd'); public validate: jasmine.Spy = jasmine.createSpy('validate'); public resizeEdges: Edges = {top: true, bottom: true, left: true, right: true}; + public enableResizeStyling: boolean = true; constructor() { this.validate.and.returnValue(true); @@ -884,4 +886,28 @@ describe('resizable directive', () => { })); + it('should disable the temporary resize effect applied to the element', async(() => { + + createComponent().then((fixture: ComponentFixture) => { + fixture.componentInstance.enableResizeStyling = false; + fixture.detectChanges(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 200 + }); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 201 + }); + const style: CSSStyleDeclaration = getComputedStyle(elm); + expect(style.position).toEqual('relative'); + expect(style.width).toEqual('300px'); + expect(style.height).toEqual('150px'); + expect(style.top).toEqual('200px'); + expect(style.left).toEqual('100px'); + }); + + })); + });