fix: only resize when the cursor is within the bounding rectangle

mattlewis92 · Jul 15, 2016 · dedc3bb · dedc3bb
1 parent 06de400
commit dedc3bb
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -99,22 +99,30 @@ const getNewBoundingRectangle: Function =
 
 };
 
+const isWithinBoundingY: Function = ({mouseY, rect}: {mouseY: number, rect: ClientRect}) => {
+  return mouseY >= rect.top && mouseY <= rect.bottom;
+};
+
+const isWithinBoundingX: Function = ({mouseX, rect}: {mouseX: number, rect: ClientRect}) => {
+  return mouseX >= rect.left && mouseX <= rect.right;
+};
+
 /**
  * @private
  */
 const getResizeEdges: Function = ({mouseX, mouseY, elm, allowedEdges}): Edges => {
   const elmPosition: ClientRect = elm.nativeElement.getBoundingClientRect();
   const edges: Edges = {};
-  if (allowedEdges.left && isNumberCloseTo(mouseX, elmPosition.left)) {
+  if (allowedEdges.left && isNumberCloseTo(mouseX, elmPosition.left) && isWithinBoundingY({mouseY, rect: elmPosition})) {
     edges.left = true;
   }
-  if (allowedEdges.right && isNumberCloseTo(mouseX, elmPosition.right)) {
+  if (allowedEdges.right && isNumberCloseTo(mouseX, elmPosition.right) && isWithinBoundingY({mouseY, rect: elmPosition})) {
     edges.right = true;
   }
-  if (allowedEdges.top && isNumberCloseTo(mouseY, elmPosition.top)) {
+  if (allowedEdges.top && isNumberCloseTo(mouseY, elmPosition.top) && isWithinBoundingX({mouseX, rect: elmPosition})) {
     edges.top = true;
   }
-  if (allowedEdges.bottom && isNumberCloseTo(mouseY, elmPosition.bottom)) {
+  if (allowedEdges.bottom && isNumberCloseTo(mouseY, elmPosition.bottom) && isWithinBoundingX({mouseX, rect: elmPosition})) {
     edges.bottom = true;
   }
   return edges;

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -974,4 +974,27 @@ describe('resizable directive', () => {
 
   }));
 
+  it('should not resize when the mouse is parallel with an edge but not inside the bounding rectangle', async(() => {
+
+    createComponent().then((fixture: ComponentFixture<TestCmp>) => {
+      fixture.detectChanges();
+      const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+      triggerDomEvent('mousedown', elm, {
+        clientX: 100,
+        clientY: 100
+      });
+      triggerDomEvent('mousemove', elm, {
+        clientX: 99,
+        clientY: 101
+      });
+      const style: CSSStyleDeclaration = getComputedStyle(elm);
+      expect(style.position).to.equal('relative');
+      expect(style.width).to.equal('300px');
+      expect(style.height).to.equal('150px');
+      expect(style.top).to.equal('200px');
+      expect(style.left).to.equal('100px');
+    });
+
+  }));
+
 });