diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts index 144a994..2e53cf5 100644 --- 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 index 993c7f8..3c9815c 100644 --- 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) => { + 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'); + }); + + })); + });