fix(mousedrag): cancel the previous mousedrag observable when startin…

…g a new drag Closes #9
mattlewis92 · Jun 25, 2016 · 149c1a4 · 149c1a4
1 parent 85835ba
commit 149c1a4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 17 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -11,6 +11,8 @@ import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/mergeMap';
+import 'rxjs/add/operator/takeUntil';
+import 'rxjs/add/operator/filter';
 
 export interface Edges {
   top?: boolean;
@@ -160,27 +162,23 @@ export class Resizable implements OnInit {
           mouseX: moveCoords.mouseX - startCoords.mouseX,
           mouseY: moveCoords.mouseY - startCoords.mouseY
         };
-      });
-    });
+      }).takeUntil(this.mouseup);
+    }).filter(() => !!currentResize);
 
     mousedrag.subscribe(({mouseX, mouseY}) => {
-      if (currentResize) {
-
-        const newBoundingRect: BoundingRectangle = getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, mouseX, mouseY);
-
-        if (newBoundingRect.height > 0 && newBoundingRect.width > 0) {
-          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: currentResize.edges,
-          rectangle: newBoundingRect
-        });
+      const newBoundingRect: BoundingRectangle = getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, mouseX, mouseY);
 
+      if (newBoundingRect.height > 0 && newBoundingRect.width > 0) {
+        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: currentResize.edges,
+        rectangle: newBoundingRect
+      });
     });
 
     this.mousedown.subscribe(({mouseX, mouseY}) => {

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -624,4 +624,28 @@ describe('resizable directive', () => {
 
   }));
 
+  it('should cancel the mousedrag observable when the mouseup event fires', async(() => {
+    componentPromise.then((fixture: ComponentFixture<TestCmp>) => {
+      const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+      triggerDomEvent('mousedown', elm, {
+        clientX: 100,
+        clientY: 200
+      });
+      triggerDomEvent('mousemove', elm, {
+        clientX: 99,
+        clientY: 200
+      });
+      triggerDomEvent('mouseup', elm, {
+        clientX: 99,
+        clientY: 200
+      });
+      fixture.componentInstance.onResize.calls.reset();
+      triggerDomEvent('mousemove', elm, {
+        clientX: 99,
+        clientY: 199
+      });
+      expect(fixture.componentInstance.onResize).not.toHaveBeenCalled();
+    });
+  }));
+
 });
diff --git a/webpack.config.dist.js b/webpack.config.dist.js
@@ -41,6 +41,18 @@ module.exports = {
       commonjs: 'rxjs/operator/mergeMap',
       commonjs2: 'rxjs/operator/mergeMap',
       amd: 'rxjs/operator/mergeMap'
+    },
+    'rxjs/add/operator/takeUntil': {
+      root: ['rx', 'Observable'],
+      commonjs: 'rxjs/operator/takeUntil',
+      commonjs2: 'rxjs/operator/takeUntil',
+      amd: 'rxjs/operator/takeUntil'
+    },
+    'rxjs/add/operator/filter': {
+      root: ['rx', 'Observable'],
+      commonjs: 'rxjs/operator/filter',
+      commonjs2: 'rxjs/operator/filter',
+      amd: 'rxjs/operator/filter'
     }
   },
   devtool: 'source-map',