feat(disableResize): support completely disabling resizing an element

Closes #13

src/resizable.directive.ts

@@ -112,6 +112,7 @@ const getResizeCursor: Function = (edges: Edges): string => {
 export class Resizable implements OnInit {
 
   @Input() validateResize: Function;
+  @Input() disableResize: boolean = false;
   @Output() onResizeStart: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResize: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResizeEnd: EventEmitter<Object> = new EventEmitter(false);
@@ -147,7 +148,7 @@ export class Resizable implements OnInit {
       }
     };
 
-    this.mousemove.subscribe(({mouseX, mouseY}) => {
+    this.mousemove.filter(() => !this.disableResize).subscribe(({mouseX, mouseY}) => {
 
       const resizeEdges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm});
       const cursor: string = getResizeCursor(resizeEdges);
@@ -189,7 +190,7 @@ export class Resizable implements OnInit {
 
     });
 
-    this.mousedown.subscribe(({mouseX, mouseY}) => {
+    this.mousedown.filter(() => !this.disableResize).subscribe(({mouseX, mouseY}) => {
       const edges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm});
       if (Object.keys(edges).length > 0) {
         if (currentResize) {

test/resizable.spec.ts

@@ -34,6 +34,7 @@ describe('resizable directive', () => {
         [ngStyle]="style"
         mwl-resizeable
         [validateResize]="validate"
+        [disableResize]="disableResize"
         (onResizeStart)="onResizeStart($event)"
         (onResize)="onResize($event)"
         (onResizeEnd)="onResizeEnd($event)">
@@ -48,6 +49,7 @@ describe('resizable directive', () => {
     public onResize: jasmine.Spy = jasmine.createSpy('onResize');
     public onResizeEnd: jasmine.Spy = jasmine.createSpy('onResizeEnd');
     public validate: jasmine.Spy = jasmine.createSpy('validate');
+    public disableResize: boolean = false;
 
     constructor() {
       this.validate.and.returnValue(true);
@@ -736,4 +738,34 @@ describe('resizable directive', () => {
     });
   }));
 
+  it('should disable resizing of the element', async(() => {
+
+    componentPromise.then((fixture: ComponentFixture<TestCmp>) => {
+      const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+      fixture.componentInstance.disableResize = true;
+      fixture.detectChanges();
+      triggerDomEvent('mousemove', elm, {
+        clientX: 100,
+        clientY: 210
+      });
+      expect(getComputedStyle(elm).cursor).toEqual('auto');
+      triggerDomEvent('mousedown', elm, {
+        clientX: 100,
+        clientY: 210
+      });
+      expect(fixture.componentInstance.onResizeStart).not.toHaveBeenCalled();
+      triggerDomEvent('mousemove', elm, {
+        clientX: 101,
+        clientY: 210
+      });
+      expect(fixture.componentInstance.onResize).not.toHaveBeenCalled();
+      triggerDomEvent('mouseup', elm, {
+        clientX: 101,
+        clientY: 210
+      });
+      expect(fixture.componentInstance.onResizeEnd).not.toHaveBeenCalled();
+    });
+
+  }));
+
 });