feat(resizeEdges): allow the resize edges to be customised

BREAKING CHANGE: by default the element is no longer resizable.

You must specify `[resizeEdges]={top: true, bottom: true, left: true, right: true}` to get the old behaviour back

Closes #8

demo/demo.ts

@@ -27,6 +27,7 @@ import {Resizable, ResizeEvent} from './../angular2-resizable';
         class="rectangle"
         [ngStyle]="style"
         mwl-resizeable
+        [resizeEdges]="{left: true, top: true}"
         [validateResize]="validate"
         (onResizeEnd)="onResizeEnd($event)">
       </div>

src/resizable.directive.ts

@@ -70,19 +70,19 @@ const getNewBoundingRectangle: Function =
 
 };
 
-const getResizeEdges: Function = ({mouseX, mouseY, elm}: {mouseX: number, mouseY: number, elm: ElementRef}): Edges => {
+const getResizeEdges: Function = ({mouseX, mouseY, elm, allowedEdges}): Edges => {
   const elmPosition: ClientRect = elm.nativeElement.getBoundingClientRect();
   const edges: Edges = {};
-  if (isNumberCloseTo(mouseX, elmPosition.left)) {
+  if (allowedEdges.left && isNumberCloseTo(mouseX, elmPosition.left)) {
     edges.left = true;
   }
-  if (isNumberCloseTo(mouseX, elmPosition.right)) {
+  if (allowedEdges.right && isNumberCloseTo(mouseX, elmPosition.right)) {
     edges.right = true;
   }
-  if (isNumberCloseTo(mouseY, elmPosition.top)) {
+  if (allowedEdges.top && isNumberCloseTo(mouseY, elmPosition.top)) {
     edges.top = true;
   }
-  if (isNumberCloseTo(mouseY, elmPosition.bottom)) {
+  if (allowedEdges.bottom && isNumberCloseTo(mouseY, elmPosition.bottom)) {
     edges.bottom = true;
   }
   return edges;
@@ -112,6 +112,7 @@ const getResizeCursor: Function = (edges: Edges): string => {
 export class Resizable implements OnInit {
 
   @Input() validateResize: Function;
+  @Input() resizeEdges: Edges = {};
   @Output() onResizeStart: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResize: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResizeEnd: EventEmitter<Object> = new EventEmitter(false);
@@ -149,7 +150,7 @@ export class Resizable implements OnInit {
 
     this.mousemove.subscribe(({mouseX, mouseY}) => {
 
-      const resizeEdges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm});
+      const resizeEdges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm, allowedEdges: this.resizeEdges});
       const cursor: string = getResizeCursor(resizeEdges);
       this.renderer.setElementStyle(this.elm.nativeElement, 'cursor', cursor);
 
@@ -190,7 +191,7 @@ export class Resizable implements OnInit {
     });
 
     this.mousedown.subscribe(({mouseX, mouseY}) => {
-      const edges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm});
+      const edges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm, allowedEdges: this.resizeEdges});
       if (Object.keys(edges).length > 0) {
         if (currentResize) {
           resetElementStyles();

test/resizable.spec.ts

@@ -1,6 +1,6 @@
 import {Component, ViewChild} from '@angular/core';
 import {NgStyle} from '@angular/common';
-import {Resizable, ResizeEvent} from './../angular2-resizable';
+import {Resizable, ResizeEvent, Edges} from './../angular2-resizable';
 import {
   describe,
   expect,
@@ -34,6 +34,7 @@ describe('resizable directive', () => {
         [ngStyle]="style"
         mwl-resizeable
         [validateResize]="validate"
+        [resizeEdges]="resizeEdges"
         (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 resizeEdges: Edges = {top: true, bottom: true, left: true, right: true};
 
     constructor() {
       this.validate.and.returnValue(true);
@@ -736,4 +738,66 @@ describe('resizable directive', () => {
     });
   }));
 
+  it('should only allow resizing of the element along the left side', async(() => {
+
+    componentPromise.then((fixture: ComponentFixture<TestCmp>) => {
+      const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+      fixture.componentInstance.resizeEdges = {left: true};
+      fixture.detectChanges();
+      triggerDomEvent('mousemove', elm, {
+        clientX: 100,
+        clientY: 200
+      });
+      expect(getComputedStyle(elm).cursor).toEqual('ew-resize');
+      triggerDomEvent('mousedown', elm, {
+        clientX: 100,
+        clientY: 200
+      });
+      expect(fixture.componentInstance.onResizeStart).toHaveBeenCalledWith({
+        edges: {
+          left: true
+        },
+        rectangle: {
+          top: 200,
+          left: 100,
+          width: 300,
+          height: 150,
+          right: 400,
+          bottom: 350
+        }
+      });
+    });
+
+  }));
+
+  it('should disable resizing of the element', async(() => {
+
+    componentPromise.then((fixture: ComponentFixture<TestCmp>) => {
+      const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+      fixture.componentInstance.resizeEdges = {};
+      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();
+    });
+
+  }));
+
 });