feat(enableResizeStyling): make temporary resizing of the element opt…

…-in by default so users can con BREAKING CHANGE: the element will no longer have its styles changed by default when dragging and resizing. You can now re-enable it by setting `[enableResizeStyling]="true"` on the element. Closes #5
mattlewis92 · Jun 26, 2016 · 4c59b05 · 4c59b05
1 parent d664038
commit 4c59b05
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git 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)">
         <img
           src="http://i.imgur.com/eqzz2dl.gif"

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -153,6 +153,7 @@ export class Resizable implements OnInit, AfterViewInit {
 
   @Input() validateResize: Function;
   @Input() resizeEdges: Edges = {};
+  @Input() enableResizeStyling: boolean = false;
   @Output() onResizeStart: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResize: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResizeEnd: EventEmitter<Object> = 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
@@ -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<TestCmp>) => {
+      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');
+    });
+
+  }));
+
 });