feat(validate): provide a way for resize events to be validated

Closes #12
mattlewis92 · Jun 25, 2016 · 4da938d · 4da938d
1 parent e921438
commit 4da938d
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 7 deletions.
diff --git a/demo/demo.ts b/demo/demo.ts
@@ -23,14 +23,28 @@ import {Resizable, ResizeEvent} from './../angular2-resizable';
   template: `
     <div class="text-center">
       <h1>Drag and pull the edges of the rectangle</h1>
-      <div class="rectangle" [ngStyle]="style" mwl-resizeable (onResizeEnd)="onResizeEnd($event)"></div>
+      <div
+        class="rectangle"
+        [ngStyle]="style"
+        mwl-resizeable
+        [validateResize]="validate"
+        (onResizeEnd)="onResizeEnd($event)">
+      </div>
     </div>
   `
 })
 export class DemoApp {
 
   public style: Object = {};
 
+  validate(event: ResizeEvent): boolean {
+    const MIN_DIMENSIONS_PX: number = 50;
+    if (event.rectangle.width < MIN_DIMENSIONS_PX || event.rectangle.height < MIN_DIMENSIONS_PX) {
+      return false;
+    }
+    return true;
+  }
+
   onResizeEnd(event: ResizeEvent): void {
     this.style = {
       position: 'fixed',

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -5,6 +5,7 @@ import {
   ElementRef,
   OnInit,
   Output,
+  Input,
   EventEmitter
 } from '@angular/core';
 import {Subject} from 'rxjs/Subject';
@@ -110,6 +111,7 @@ const getResizeCursor: Function = (edges: Edges): string => {
 })
 export class Resizable implements OnInit {
 
+  @Input() validateResize: Function;
   @Output() onResizeStart: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResize: EventEmitter<Object> = new EventEmitter(false);
   @Output() onResizeEnd: EventEmitter<Object> = new EventEmitter(false);
@@ -170,6 +172,11 @@ export class Resizable implements OnInit {
       return getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, mouseX, mouseY);
     }).filter((newBoundingRect: BoundingRectangle) => {
       return newBoundingRect.height > 0 && newBoundingRect.width > 0;
+    }).filter((newBoundingRect: BoundingRectangle) => {
+      return this.validateResize ? this.validateResize({
+        rectangle: newBoundingRect,
+        edges: currentResize.edges
+      }) : true;
     }).subscribe((newBoundingRect: BoundingRectangle) => {
 
       this.renderer.setElementStyle(this.elm.nativeElement, 'height', `${newBoundingRect.height}px`);

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -33,6 +33,7 @@ describe('resizable directive', () => {
         class="rectangle"
         [ngStyle]="style"
         mwl-resizeable
+        [validateResize]="validate"
         (onResizeStart)="onResizeStart($event)"
         (onResize)="onResize($event)"
         (onResizeEnd)="onResizeEnd($event)">
@@ -43,14 +44,13 @@ describe('resizable directive', () => {
 
     @ViewChild(Resizable) public resizable: Resizable;
     public style: Object = {};
-    public onResizeStart: jasmine.Spy;
-    public onResize: jasmine.Spy;
-    public onResizeEnd: jasmine.Spy;
+    public onResizeStart: jasmine.Spy = jasmine.createSpy('onResizeStart');
+    public onResize: jasmine.Spy = jasmine.createSpy('onResize');
+    public onResizeEnd: jasmine.Spy = jasmine.createSpy('onResizeEnd');
+    public validate: jasmine.Spy = jasmine.createSpy('validate');
 
     constructor() {
-      this.onResizeStart = jasmine.createSpy('onResizeStart');
-      this.onResize = jasmine.createSpy('onResize');
-      this.onResizeEnd = jasmine.createSpy('onResizeEnd');
+      this.validate.and.returnValue(true);
     }
 
   }
@@ -679,4 +679,61 @@ describe('resizable directive', () => {
     });
   }));
 
+  it('should allow invalidating of resize events', async(() => {
+    componentPromise.then((fixture: ComponentFixture<TestCmp>) => {
+      const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+      triggerDomEvent('mousedown', elm, {
+        clientX: 100,
+        clientY: 210
+      });
+      fixture.componentInstance.validate.and.returnValue(true);
+      triggerDomEvent('mousemove', elm, {
+        clientX: 99,
+        clientY: 210
+      });
+      const firstResizeEvent: ResizeEvent = {
+        edges: {
+          left: true
+        },
+        rectangle: {
+          top: 200,
+          left: 99,
+          width: 301,
+          height: 150,
+          right: 400,
+          bottom: 350
+        }
+      };
+      expect(fixture.componentInstance.validate).toHaveBeenCalledWith(firstResizeEvent);
+      expect(fixture.componentInstance.onResize).toHaveBeenCalledWith(firstResizeEvent);
+      fixture.componentInstance.validate.and.returnValue(false);
+      fixture.componentInstance.validate.calls.reset();
+      fixture.componentInstance.onResize.calls.reset();
+      triggerDomEvent('mousemove', elm, {
+        clientX: 98,
+        clientY: 210
+      });
+      const secondResizeEvent: ResizeEvent = {
+        edges: {
+          left: true
+        },
+        rectangle: {
+          top: 200,
+          left: 98,
+          width: 302,
+          height: 150,
+          right: 400,
+          bottom: 350
+        }
+      };
+      expect(fixture.componentInstance.validate).toHaveBeenCalledWith(secondResizeEvent);
+      expect(fixture.componentInstance.onResize).not.toHaveBeenCalled();
+      triggerDomEvent('mouseup', elm, {
+        clientX: 98,
+        clientY: 210
+      });
+      expect(fixture.componentInstance.onResizeEnd).toHaveBeenCalledWith(firstResizeEvent);
+    });
+  }));
+
 });