feat: expose the amount each edge was resized on resize events

BREAKING CHANGE: the `$event.edges` object values now contain numbers instead of booleans Closes #11
mattlewis92 · Jun 26, 2016 · d664038 · d664038
1 parent c76be59
commit d664038
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 27 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -20,10 +20,10 @@ import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/operator/filter';
 
 export interface Edges {
-  top?: boolean;
-  bottom?: boolean;
-  left?: boolean;
-  right?: boolean;
+  top?: boolean | number;
+  bottom?: boolean | number;
+  left?: boolean | number;
+  right?: boolean | number;
 }
 
 export interface BoundingRectangle {
@@ -110,6 +110,16 @@ const getResizeCursor: Function = (edges: Edges): string => {
   }
 };
 
+const getEdgesDiff: Function = ({edges, initialRectangle, newRectangle}): Edges => {
+
+  const edgesDiff: Edges = {};
+  Object.keys(edges).forEach((edge: string) => {
+    edgesDiff[edge] = newRectangle[edge] - initialRectangle[edge];
+  });
+  return edgesDiff;
+
+};
+
 @Directive({
   selector: '[mwl-resize-handle]'
 })
@@ -204,7 +214,11 @@ export class Resizable implements OnInit, AfterViewInit {
     }).filter((newBoundingRect: BoundingRectangle) => {
       return this.validateResize ? this.validateResize({
         rectangle: newBoundingRect,
-        edges: currentResize.edges
+        edges: getEdgesDiff({
+          edges: currentResize.edges,
+          initialRectangle: currentResize.startingRect,
+          newRectangle: newBoundingRect
+        })
       }) : true;
     }).subscribe((newBoundingRect: BoundingRectangle) => {
 
@@ -214,7 +228,11 @@ export class Resizable implements OnInit, AfterViewInit {
       this.renderer.setElementStyle(this.elm.nativeElement, 'left', `${newBoundingRect.left}px`);
 
       this.onResize.emit({
-        edges: currentResize.edges,
+        edges: getEdgesDiff({
+          edges: currentResize.edges,
+          initialRectangle: currentResize.startingRect,
+          newRectangle: newBoundingRect
+        }),
         rectangle: newBoundingRect
       });
 
@@ -251,15 +269,19 @@ export class Resizable implements OnInit, AfterViewInit {
       this.renderer.setElementStyle(this.elm.nativeElement, 'user-drag', 'none');
       this.renderer.setElementStyle(this.elm.nativeElement, '-webkit-user-drag', 'none');
       this.onResizeStart.emit({
-        edges,
+        edges: getEdgesDiff({edges, initialRectangle: startingRect, newRectangle: startingRect}),
         rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
       });
     });
 
     this.mouseup.subscribe(() => {
       if (currentResize) {
         this.onResizeEnd.emit({
-          edges: currentResize.edges,
+          edges: getEdgesDiff({
+            edges: currentResize.edges,
+            initialRectangle: currentResize.startingRect,
+            newRectangle: currentResize.currentRect
+          }),
           rectangle: currentResize.currentRect
         });
         resetElementStyles();

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -214,7 +214,7 @@ describe('resizable directive', () => {
       spyName = 'onResizeStart';
       expectedEvent = {
         edges: {
-          top: true
+          top: 0
         },
         rectangle: {
           top: 200,
@@ -244,7 +244,7 @@ describe('resizable directive', () => {
       spyName = 'onResize';
       expectedEvent = {
         edges: {
-          top: true
+          top: -1
         },
         rectangle: {
           top: 199,
@@ -298,7 +298,7 @@ describe('resizable directive', () => {
       spyName = 'onResizeEnd';
       expectedEvent = {
         edges: {
-          top: true
+          top: -2
         },
         rectangle: {
           top: 198,
@@ -352,7 +352,7 @@ describe('resizable directive', () => {
       spyName = 'onResizeEnd';
       expectedEvent = {
         edges: {
-          left: true
+          left: -2
         },
         rectangle: {
           top: 200,
@@ -406,7 +406,7 @@ describe('resizable directive', () => {
       spyName = 'onResizeEnd';
       expectedEvent = {
         edges: {
-          bottom: true
+          bottom: 2
         },
         rectangle: {
           top: 200,
@@ -460,7 +460,7 @@ describe('resizable directive', () => {
       spyName = 'onResizeEnd';
       expectedEvent = {
         edges: {
-          right: true
+          right: 2
         },
         rectangle: {
           top: 200,
@@ -530,7 +530,7 @@ describe('resizable directive', () => {
       });
       expect(fixture.componentInstance.onResizeStart).toHaveBeenCalledWith({
         edges: {
-          left: true
+          left: 0
         },
         rectangle: {
           top: 200,
@@ -559,7 +559,7 @@ describe('resizable directive', () => {
       expect(elm.style.width).toEqual('300px');
       expect(fixture.componentInstance.onResizeStart).toHaveBeenCalledWith({
         edges: {
-          left: true
+          left: 0
         },
         rectangle: {
           top: 200,
@@ -580,7 +580,7 @@ describe('resizable directive', () => {
       });
       expect(fixture.componentInstance.onResizeEnd).toHaveBeenCalledWith({
         edges: {
-          left: true
+          left: 1
         },
         rectangle: {
           top: 200,
@@ -672,7 +672,7 @@ describe('resizable directive', () => {
       });
       expect(fixture.componentInstance.onResizeEnd).toHaveBeenCalledWith({
         edges: {
-          left: true
+          left: -1
         },
         rectangle: {
           top: 200,
@@ -700,7 +700,7 @@ describe('resizable directive', () => {
       });
       const firstResizeEvent: ResizeEvent = {
         edges: {
-          left: true
+          left: -1
         },
         rectangle: {
           top: 200,
@@ -722,7 +722,7 @@ describe('resizable directive', () => {
       });
       const secondResizeEvent: ResizeEvent = {
         edges: {
-          left: true
+          left: -2
         },
         rectangle: {
           top: 200,
@@ -760,7 +760,7 @@ describe('resizable directive', () => {
       });
       expect(fixture.componentInstance.onResizeStart).toHaveBeenCalledWith({
         edges: {
-          left: true
+          left: 0
         },
         rectangle: {
           top: 200,
@@ -831,8 +831,8 @@ describe('resizable directive', () => {
       });
       expect(fixture.componentInstance.onResizeStart).toHaveBeenCalledWith({
         edges: {
-          bottom: true,
-          right: true
+          bottom: 0,
+          right: 0
         },
         rectangle: {
           top: 200,
@@ -849,8 +849,8 @@ describe('resizable directive', () => {
       });
       expect(fixture.componentInstance.onResize).toHaveBeenCalledWith({
         edges: {
-          bottom: true,
-          right: true
+          bottom: 0,
+          right: 1
         },
         rectangle: {
           top: 200,
@@ -867,8 +867,8 @@ describe('resizable directive', () => {
       });
       expect(fixture.componentInstance.onResizeEnd).toHaveBeenCalledWith({
         edges: {
-          bottom: true,
-          right: true
+          bottom: 0,
+          right: 1
         },
         rectangle: {
           top: 200,