From 60c2e08393676963a28c46808afef899f8aba827 Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Sat, 25 Jun 2016 17:31:25 +0100 Subject: [PATCH] feat(resizeEdges): allow the resize edges to be customised BREAKING CHANGE: by default the element is no longer resizable. You must specify `[resizeEdges]={top: true, bottom: true, left: true, right: true}` to get the old behaviour back Closes #8 --- demo/demo.ts | 1 + src/resizable.directive.ts | 15 +++++---- test/resizable.spec.ts | 66 +++++++++++++++++++++++++++++++++++++- 3 files changed, 74 insertions(+), 8 deletions(-) diff --git a/demo/demo.ts b/demo/demo.ts index bdab153..eb2d273 100644 --- a/demo/demo.ts +++ b/demo/demo.ts @@ -27,6 +27,7 @@ import {Resizable, ResizeEvent} from './../angular2-resizable'; class="rectangle" [ngStyle]="style" mwl-resizeable + [resizeEdges]="{left: true, top: true}" [validateResize]="validate" (onResizeEnd)="onResizeEnd($event)"> diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts index 96a6d05..354b9e4 100644 --- a/src/resizable.directive.ts +++ b/src/resizable.directive.ts @@ -70,19 +70,19 @@ const getNewBoundingRectangle: Function = }; -const getResizeEdges: Function = ({mouseX, mouseY, elm}: {mouseX: number, mouseY: number, elm: ElementRef}): Edges => { +const getResizeEdges: Function = ({mouseX, mouseY, elm, allowedEdges}): Edges => { const elmPosition: ClientRect = elm.nativeElement.getBoundingClientRect(); const edges: Edges = {}; - if (isNumberCloseTo(mouseX, elmPosition.left)) { + if (allowedEdges.left && isNumberCloseTo(mouseX, elmPosition.left)) { edges.left = true; } - if (isNumberCloseTo(mouseX, elmPosition.right)) { + if (allowedEdges.right && isNumberCloseTo(mouseX, elmPosition.right)) { edges.right = true; } - if (isNumberCloseTo(mouseY, elmPosition.top)) { + if (allowedEdges.top && isNumberCloseTo(mouseY, elmPosition.top)) { edges.top = true; } - if (isNumberCloseTo(mouseY, elmPosition.bottom)) { + if (allowedEdges.bottom && isNumberCloseTo(mouseY, elmPosition.bottom)) { edges.bottom = true; } return edges; @@ -112,6 +112,7 @@ const getResizeCursor: Function = (edges: Edges): string => { export class Resizable implements OnInit { @Input() validateResize: Function; + @Input() resizeEdges: Edges = {}; @Output() onResizeStart: EventEmitter = new EventEmitter(false); @Output() onResize: EventEmitter = new EventEmitter(false); @Output() onResizeEnd: EventEmitter = new EventEmitter(false); @@ -149,7 +150,7 @@ export class Resizable implements OnInit { this.mousemove.subscribe(({mouseX, mouseY}) => { - const resizeEdges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm}); + const resizeEdges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm, allowedEdges: this.resizeEdges}); const cursor: string = getResizeCursor(resizeEdges); this.renderer.setElementStyle(this.elm.nativeElement, 'cursor', cursor); @@ -190,7 +191,7 @@ export class Resizable implements OnInit { }); this.mousedown.subscribe(({mouseX, mouseY}) => { - const edges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm}); + const edges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm, allowedEdges: this.resizeEdges}); if (Object.keys(edges).length > 0) { if (currentResize) { resetElementStyles(); diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts index 7bb7fc1..406bbf9 100644 --- a/test/resizable.spec.ts +++ b/test/resizable.spec.ts @@ -1,6 +1,6 @@ import {Component, ViewChild} from '@angular/core'; import {NgStyle} from '@angular/common'; -import {Resizable, ResizeEvent} from './../angular2-resizable'; +import {Resizable, ResizeEvent, Edges} from './../angular2-resizable'; import { describe, expect, @@ -34,6 +34,7 @@ describe('resizable directive', () => { [ngStyle]="style" mwl-resizeable [validateResize]="validate" + [resizeEdges]="resizeEdges" (onResizeStart)="onResizeStart($event)" (onResize)="onResize($event)" (onResizeEnd)="onResizeEnd($event)"> @@ -48,6 +49,7 @@ describe('resizable directive', () => { public onResize: jasmine.Spy = jasmine.createSpy('onResize'); public onResizeEnd: jasmine.Spy = jasmine.createSpy('onResizeEnd'); public validate: jasmine.Spy = jasmine.createSpy('validate'); + public resizeEdges: Edges = {top: true, bottom: true, left: true, right: true}; constructor() { this.validate.and.returnValue(true); @@ -736,4 +738,66 @@ describe('resizable directive', () => { }); })); + it('should only allow resizing of the element along the left side', async(() => { + + componentPromise.then((fixture: ComponentFixture) => { + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + fixture.componentInstance.resizeEdges = {left: true}; + fixture.detectChanges(); + triggerDomEvent('mousemove', elm, { + clientX: 100, + clientY: 200 + }); + expect(getComputedStyle(elm).cursor).toEqual('ew-resize'); + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 200 + }); + expect(fixture.componentInstance.onResizeStart).toHaveBeenCalledWith({ + edges: { + left: true + }, + rectangle: { + top: 200, + left: 100, + width: 300, + height: 150, + right: 400, + bottom: 350 + } + }); + }); + + })); + + it('should disable resizing of the element', async(() => { + + componentPromise.then((fixture: ComponentFixture) => { + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + fixture.componentInstance.resizeEdges = {}; + fixture.detectChanges(); + triggerDomEvent('mousemove', elm, { + clientX: 100, + clientY: 210 + }); + expect(getComputedStyle(elm).cursor).toEqual('auto'); + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 210 + }); + expect(fixture.componentInstance.onResizeStart).not.toHaveBeenCalled(); + triggerDomEvent('mousemove', elm, { + clientX: 101, + clientY: 210 + }); + expect(fixture.componentInstance.onResize).not.toHaveBeenCalled(); + triggerDomEvent('mouseup', elm, { + clientX: 101, + clientY: 210 + }); + expect(fixture.componentInstance.onResizeEnd).not.toHaveBeenCalled(); + }); + + })); + });