diff --git a/README.md b/README.md index 88c3f2b..dfa02cd 100644 --- a/README.md +++ b/README.md @@ -32,22 +32,32 @@ Then use it in your app like so: ```typescript import {Component} from '@angular/core'; -import {Resizable} from 'angular2-resizable'; +import {ResizeEvent} from 'angular2-resizable'; @Component({ selector: 'demo-app', - directives: [Resizable], // you should add some styles to the element. See the demo folder for a more fleshed out example template: '
' }) -export class DemoApp { +export class MyComponent { - onResizeEnd(event: any): void { + onResizeEnd(event: ResizeEvent): void { console.log('Element was resized', event); } } +// now use within your apps module +import {NgModule} from '@angular/core'; +import {ResizableModule} from 'angular2-resizable'; + +@NgModule({ + declarations: [MyComponent], + imports: [ResizableModule], + bootstrap: [MyComponent] +}) +class MyModule {} + ``` You may also find it useful to view the [demo source](https://github.com/mattlewis92/angular2-resizable/blob/master/demo/demo.ts). diff --git a/angular2-resizable.ts b/angular2-resizable.ts index 10a2e93..063f26b 100644 --- a/angular2-resizable.ts +++ b/angular2-resizable.ts @@ -1,8 +1,2 @@ -import {Resizable} from './src/resizable.directive'; - -export * from './src/resizable.directive'; - -// for angular-cli -export default { - directives: [Resizable] -}; +export * from './src/resizable.module'; +export {ResizeEvent} from './src/resizable.directive'; \ No newline at end of file diff --git a/demo/demo.ts b/demo/demo.component.ts similarity index 89% rename from demo/demo.ts rename to demo/demo.component.ts index a6b2bd0..acbe4d5 100644 --- a/demo/demo.ts +++ b/demo/demo.component.ts @@ -1,10 +1,8 @@ import {Component} from '@angular/core'; -import {NgStyle} from '@angular/common'; -import {Resizable, ResizeEvent, ResizeHandle} from './../angular2-resizable'; +import {ResizeEvent} from './../angular2-resizable'; @Component({ selector: 'demo-app', - directives: [Resizable, ResizeHandle, NgStyle], styles: [` .rectangle { position: relative; @@ -47,7 +45,7 @@ import {Resizable, ResizeEvent, ResizeHandle} from './../angular2-resizable'; ` }) -export class DemoApp { +export class Demo { public style: Object = {}; diff --git a/demo/demo.module.ts b/demo/demo.module.ts new file mode 100644 index 0000000..092a1e0 --- /dev/null +++ b/demo/demo.module.ts @@ -0,0 +1,11 @@ +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {ResizableModule} from './../angular2-resizable'; +import {Demo} from './demo.component'; + +@NgModule({ + declarations: [Demo], + imports: [BrowserModule, ResizableModule], + bootstrap: [Demo] +}) +export class DemoModule {} \ No newline at end of file diff --git a/demo/entry.ts b/demo/entry.ts index fffa372..04fc083 100644 --- a/demo/entry.ts +++ b/demo/entry.ts @@ -1,12 +1,12 @@ import 'reflect-metadata'; import 'zone.js/dist/zone'; import {enableProdMode} from '@angular/core'; -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {DemoApp} from './demo'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {DemoModule} from './demo.module'; declare var ENV: string; if (ENV === 'production') { enableProdMode(); } -bootstrap(DemoApp); \ No newline at end of file +platformBrowserDynamic().bootstrapModule(DemoModule); \ No newline at end of file diff --git a/package.json b/package.json index 8fc24a8..4d789d2 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "url": "git+https://github.com/mattlewis92/angular2-resizable.git" }, "keywords": [ - "angular2" + "angular2", + "resizable" ], "author": "Matt Lewis", "license": "MIT", @@ -35,11 +36,11 @@ }, "homepage": "https://github.com/mattlewis92/angular2-resizable#readme", "devDependencies": { - "@angular/common": "2.0.0-rc.4", - "@angular/compiler": "2.0.0-rc.4", - "@angular/core": "2.0.0-rc.4", - "@angular/platform-browser": "2.0.0-rc.4", - "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/common": "2.0.0-rc.5", + "@angular/compiler": "2.0.0-rc.5", + "@angular/core": "2.0.0-rc.5", + "@angular/platform-browser": "2.0.0-rc.5", + "@angular/platform-browser-dynamic": "2.0.0-rc.5", "chai": "~3.5.0", "commitizen": "~2.8.1", "concurrently": "~2.2.0", @@ -78,7 +79,7 @@ "zone.js": "~0.6.12" }, "peerDependencies": { - "@angular/core": "2.0.0-rc.4" + "@angular/core": "2.0.0-rc.5" }, "files": [ "angular2-resizable.js", diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts index f0d7e11..94623d6 100644 --- a/src/resizable.directive.ts +++ b/src/resizable.directive.ts @@ -288,7 +288,7 @@ export class Resizable implements OnInit, AfterViewInit { /** * @private */ - constructor(private renderer: Renderer, private elm: ElementRef) {} + constructor(private renderer: Renderer, public elm: ElementRef) {} /** * @private diff --git a/src/resizable.module.ts b/src/resizable.module.ts new file mode 100644 index 0000000..590cc8d --- /dev/null +++ b/src/resizable.module.ts @@ -0,0 +1,8 @@ +import {NgModule} from '@angular/core'; +import {Resizable, ResizeHandle} from './resizable.directive'; + +@NgModule({ + declarations: [Resizable, ResizeHandle], + exports: [Resizable, ResizeHandle] +}) +export class ResizableModule {} \ No newline at end of file diff --git a/test/entry.ts b/test/entry.ts index e59bc90..fae480e 100644 --- a/test/entry.ts +++ b/test/entry.ts @@ -4,17 +4,19 @@ import 'zone.js/dist/zone'; import 'zone.js/dist/long-stack-trace-zone'; import 'zone.js/dist/async-test'; import 'rxjs'; -import {setBaseTestProviders} from '@angular/core/testing'; import { - TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, - TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS + TestBed +} from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; import {use} from 'chai'; import * as sinonChai from 'sinon-chai'; use(sinonChai); -setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); +TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); declare var require: any; const testsContext: any = require.context('./', true, /\.spec/); diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts index d3fda8a..3c9adb3 100644 --- a/test/resizable.spec.ts +++ b/test/resizable.spec.ts @@ -1,19 +1,13 @@ import {Component, ViewChild} from '@angular/core'; -import {NgStyle} from '@angular/common'; -import {Resizable, ResizeEvent, Edges, ResizeHandle} from './../angular2-resizable'; -import { - inject, - async, - TestComponentBuilder, - ComponentFixture -} from '@angular/core/testing'; +import {Edges, Resizable} from './../src/resizable.directive'; +import {ResizeEvent, ResizableModule} from './../angular2-resizable'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; import {expect} from 'chai'; import * as sinon from 'sinon'; describe('resizable directive', () => { @Component({ - directives: [Resizable, NgStyle, ResizeHandle], styles: [` .rectangle { position: relative; @@ -42,10 +36,10 @@ describe('resizable directive', () => { @ViewChild(Resizable) public resizable: Resizable; public style: Object = {}; - public resizeStart: Function = sinon.spy(); - public resize: Function = sinon.spy(); - public resizeEnd: Function = sinon.spy(); - public validate: Function = sinon.stub().returns(true); + public resizeStart: Sinon.SinonSpy = sinon.spy(); + public resize: Sinon.SinonSpy = sinon.spy(); + public resizeEnd: Sinon.SinonSpy = sinon.spy(); + public validate: Sinon.SinonStub = sinon.stub().returns(true); public resizeEdges: Edges = {top: true, bottom: true, left: true, right: true}; public enableGhostResize: boolean = true; public resizeSnapGrid: Object = {}; @@ -59,28 +53,31 @@ describe('resizable directive', () => { target.dispatchEvent(event); }; - let componentPromise: Promise>, createComponent: Function; - beforeEach(inject([TestComponentBuilder], (builder) => { + beforeEach(() => { + TestBed.configureTestingModule({imports: [ResizableModule], declarations: [TestCmp]}); + }); + + let component: ComponentFixture, createComponent: Function; + beforeEach(() => { document.body.style.margin = '0px'; - createComponent = (template?: String) => { - const componentBuilder: TestComponentBuilder = template ? builder.overrideTemplate(TestCmp, template) : builder; - componentPromise = componentBuilder.createAsync(TestCmp).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - document.body.appendChild(fixture.componentInstance.resizable.elm.nativeElement); - return fixture; - }); - return componentPromise; + createComponent = (template?: string) => { + if (template) { + TestBed.overrideComponent(TestCmp, {set: {template}}); + } + const fixture: ComponentFixture = TestBed.createComponent(TestCmp); + fixture.detectChanges(); + document.body.appendChild(fixture.nativeElement.children[0]); + component = fixture; + return fixture; }; - })); + }); - afterEach(async(() => { - if (componentPromise) { - componentPromise.then((fixture: ComponentFixture) => { - fixture.destroy(); - document.body.innerHTML = ''; - }); + afterEach(() => { + if (component) { + component.destroy(); + document.body.innerHTML = ''; } - })); + }); describe('cursor changes', () => { @@ -182,15 +179,14 @@ describe('resizable directive', () => { }]; }); - afterEach(async(() => { - createComponent().then((fixture: ComponentFixture) => { - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - assertions.forEach(({coords, cursor}: {coords: Object, cursor: string}) => { - triggerDomEvent('mousemove', elm, coords); - expect(elm.style.cursor).to.equal(cursor); - }); + afterEach(() => { + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + assertions.forEach(({coords, cursor}: {coords: Object, cursor: string}) => { + triggerDomEvent('mousemove', elm, coords); + expect(elm.style.cursor).to.equal(cursor); }); - })); + }); }); @@ -468,332 +464,324 @@ describe('resizable directive', () => { }; }); - afterEach(async(() => { - createComponent().then((fixture: ComponentFixture) => { - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - domEvents.forEach(event => { - triggerDomEvent(event.name, elm, event.data); - if (event.name !== 'mouseup') { - expect(elm.nextSibling['style'].position).to.equal('fixed'); - } - if (event.style) { - Object.keys(event.style).forEach(styleKey => { - expect(elm.nextSibling['style'][styleKey]).to.equal(event.style[styleKey]); - }); - } - }); - expect(fixture.componentInstance[spyName]).to.have.been.calledWith(expectedEvent); + afterEach(() => { + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + domEvents.forEach(event => { + triggerDomEvent(event.name, elm, event.data); + if (event.name !== 'mouseup') { + expect(elm.nextSibling['style'].position).to.equal('fixed'); + } + if (event.style) { + Object.keys(event.style).forEach(styleKey => { + expect(elm.nextSibling['style'][styleKey]).to.equal(event.style[styleKey]); + }); + } }); - })); + expect(fixture.componentInstance[spyName]).to.have.been.calledWith(expectedEvent); + }); }); - it('should not resize when clicking and dragging outside of the element edges', async(() => { + it('should not resize when clicking and dragging outside of the element edges', () => { - createComponent().then((fixture: ComponentFixture) => { - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm, { - clientX: 10, - clientY: 20 - }); - triggerDomEvent('mousemove', elm, { - clientX: 11, - clientY: 20 - }); - triggerDomEvent('mousemove', elm, { - clientX: 12, - clientY: 20 - }); - triggerDomEvent('mouseup', elm, { - clientX: 12, - clientY: 20 - }); - expect(fixture.componentInstance.resizeStart).not.to.have.been.called; - expect(fixture.componentInstance.resize).not.to.have.been.called; - expect(fixture.componentInstance.resizeEnd).not.to.have.been.called; + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 10, + clientY: 20 + }); + triggerDomEvent('mousemove', elm, { + clientX: 11, + clientY: 20 + }); + triggerDomEvent('mousemove', elm, { + clientX: 12, + clientY: 20 }); + triggerDomEvent('mouseup', elm, { + clientX: 12, + clientY: 20 + }); + expect(fixture.componentInstance.resizeStart).not.to.have.been.called; + expect(fixture.componentInstance.resize).not.to.have.been.called; + expect(fixture.componentInstance.resizeEnd).not.to.have.been.called; - })); + }); - it('should cancel an existing resize event', async(() => { + it('should cancel an existing resize event', () => { - createComponent().then((fixture: ComponentFixture) => { - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 205 - }); - expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ - edges: { - left: 0 - }, - rectangle: { - top: 200, - left: 100, - width: 300, - height: 150, - right: 400, - bottom: 350 - } - }); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 205 - }); - triggerDomEvent('mousemove', elm, { - clientX: 98, - clientY: 205 - }); - expect(elm.nextSibling['style'].width).to.equal('302px'); - fixture.componentInstance.resizeEnd.reset(); - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 205 - }); - expect(fixture.componentInstance.resizeEnd).not.to.have.been.called; - expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ - edges: { - left: 0 - }, - rectangle: { - top: 200, - left: 100, - width: 300, - height: 150, - right: 400, - bottom: 350 - } - }); - triggerDomEvent('mousemove', elm, { - clientX: 101, - clientY: 205 - }); - triggerDomEvent('mouseup', elm, { - clientX: 101, - clientY: 205 - }); - expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ - edges: { - left: 1 - }, - rectangle: { - top: 200, - left: 101, - width: 299, - height: 150, - right: 400, - bottom: 350 - } - }); + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 205 + }); + expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ + edges: { + left: 0 + }, + rectangle: { + top: 200, + left: 100, + width: 300, + height: 150, + right: 400, + bottom: 350 + } + }); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 205 + }); + triggerDomEvent('mousemove', elm, { + clientX: 98, + clientY: 205 + }); + expect(elm.nextSibling['style'].width).to.equal('302px'); + fixture.componentInstance.resizeEnd.reset(); + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 205 + }); + expect(fixture.componentInstance.resizeEnd).not.to.have.been.called; + expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ + edges: { + left: 0 + }, + rectangle: { + top: 200, + left: 100, + width: 300, + height: 150, + right: 400, + bottom: 350 + } + }); + triggerDomEvent('mousemove', elm, { + clientX: 101, + clientY: 205 + }); + triggerDomEvent('mouseup', elm, { + clientX: 101, + clientY: 205 + }); + expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ + edges: { + left: 1 + }, + rectangle: { + top: 200, + left: 101, + width: 299, + height: 150, + right: 400, + bottom: 350 + } }); - })); + }); - it('should reset existing styles after a resize', async(() => { + it('should reset existing styles after a resize', () => { - createComponent().then((fixture: ComponentFixture) => { - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 200 - }); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 200 - }); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 199 - }); - let elmStyle: CSSStyleDeclaration = getComputedStyle(elm); - expect(elmStyle.visibility).to.equal('hidden'); - triggerDomEvent('mouseup', elm, { - clientX: 99, - clientY: 199 - }); - elmStyle = getComputedStyle(elm); - expect(elmStyle.visibility).to.equal('visible'); + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 200 }); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 200 + }); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 199 + }); + let elmStyle: CSSStyleDeclaration = getComputedStyle(elm); + expect(elmStyle.visibility).to.equal('hidden'); + triggerDomEvent('mouseup', elm, { + clientX: 99, + clientY: 199 + }); + elmStyle = getComputedStyle(elm); + expect(elmStyle.visibility).to.equal('visible'); - })); + }); - it('should cancel the mousedrag observable when the mouseup event fires', async(() => { - createComponent().then((fixture: ComponentFixture) => { - 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.resize.reset(); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 199 - }); - expect(fixture.componentInstance.resize).not.to.have.been.called; + it('should cancel the mousedrag observable when the mouseup event fires', () => { + + const fixture: ComponentFixture = createComponent(); + 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.resize.reset(); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 199 + }); + expect(fixture.componentInstance.resize).not.to.have.been.called; + }); - it('should fire the resize end event with the last valid bounding rectangle', async(() => { - createComponent().then((fixture: ComponentFixture) => { - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 210 - }); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 210 - }); - triggerDomEvent('mouseup', elm, { - clientX: 500, - clientY: 210 - }); - expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ - edges: { - left: -1 - }, - rectangle: { - top: 200, - left: 99, - width: 301, - height: 150, - right: 400, - bottom: 350 - } - }); + it('should fire the resize end event with the last valid bounding rectangle', () => { + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 210 + }); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 210 + }); + triggerDomEvent('mouseup', elm, { + clientX: 500, + clientY: 210 + }); + expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ + edges: { + left: -1 + }, + rectangle: { + top: 200, + left: 99, + width: 301, + height: 150, + right: 400, + bottom: 350 + } }); - })); + }); - it('should allow invalidating of resize events', async(() => { - createComponent().then((fixture: ComponentFixture) => { - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 210 - }); - fixture.componentInstance.validate.returns(true); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 210 - }); - const firstResizeEvent: ResizeEvent = { - edges: { - left: -1 - }, - rectangle: { - top: 200, - left: 99, - width: 301, - height: 150, - right: 400, - bottom: 350 - } - }; - expect(fixture.componentInstance.validate).to.have.been.calledWith(firstResizeEvent); - expect(fixture.componentInstance.resize).to.have.been.calledWith(firstResizeEvent); - fixture.componentInstance.validate.returns(false); - fixture.componentInstance.validate.reset(); - fixture.componentInstance.resize.reset(); - triggerDomEvent('mousemove', elm, { - clientX: 98, - clientY: 210 - }); - const secondResizeEvent: ResizeEvent = { - edges: { - left: -2 - }, - rectangle: { - top: 200, - left: 98, - width: 302, - height: 150, - right: 400, - bottom: 350 - } - }; - expect(fixture.componentInstance.validate).to.have.been.calledWith(secondResizeEvent); - expect(fixture.componentInstance.resize).not.to.have.been.called; - triggerDomEvent('mouseup', elm, { - clientX: 98, - clientY: 210 - }); - expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith(firstResizeEvent); + it('should allow invalidating of resize events', () => { + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 210 }); - })); + fixture.componentInstance.validate.returns(true); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 210 + }); + const firstResizeEvent: ResizeEvent = { + edges: { + left: -1 + }, + rectangle: { + top: 200, + left: 99, + width: 301, + height: 150, + right: 400, + bottom: 350 + } + }; + expect(fixture.componentInstance.validate).to.have.been.calledWith(firstResizeEvent); + expect(fixture.componentInstance.resize).to.have.been.calledWith(firstResizeEvent); + fixture.componentInstance.validate.returns(false); + fixture.componentInstance.validate.reset(); + fixture.componentInstance.resize.reset(); + triggerDomEvent('mousemove', elm, { + clientX: 98, + clientY: 210 + }); + const secondResizeEvent: ResizeEvent = { + edges: { + left: -2 + }, + rectangle: { + top: 200, + left: 98, + width: 302, + height: 150, + right: 400, + bottom: 350 + } + }; + expect(fixture.componentInstance.validate).to.have.been.calledWith(secondResizeEvent); + expect(fixture.componentInstance.resize).not.to.have.been.called; + triggerDomEvent('mouseup', elm, { + clientX: 98, + clientY: 210 + }); + expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith(firstResizeEvent); + }); - it('should only allow resizing of the element along the left side', async(() => { + it('should only allow resizing of the element along the left side', () => { - createComponent().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).to.equal('ew-resize'); - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 200 - }); - expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ - edges: { - left: 0 - }, - rectangle: { - top: 200, - left: 100, - width: 300, - height: 150, - right: 400, - bottom: 350 - } - }); + const fixture: ComponentFixture = createComponent(); + 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).to.equal('ew-resize'); + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 200 + }); + expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ + edges: { + left: 0 + }, + rectangle: { + top: 200, + left: 100, + width: 300, + height: 150, + right: 400, + bottom: 350 + } }); - })); + }); - it('should disable resizing of the element', async(() => { + it('should disable resizing of the element', () => { - createComponent().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).to.equal('auto'); - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 210 - }); - expect(fixture.componentInstance.resizeStart).not.to.have.been.called; - triggerDomEvent('mousemove', elm, { - clientX: 101, - clientY: 210 - }); - expect(fixture.componentInstance.resize).not.to.have.been.called; - triggerDomEvent('mouseup', elm, { - clientX: 101, - clientY: 210 - }); - expect(fixture.componentInstance.resizeEnd).not.to.have.been.called; + const fixture: ComponentFixture = createComponent(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + fixture.componentInstance.resizeEdges = {}; + fixture.detectChanges(); + triggerDomEvent('mousemove', elm, { + clientX: 100, + clientY: 210 }); + expect(getComputedStyle(elm).cursor).to.equal('auto'); + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 210 + }); + expect(fixture.componentInstance.resizeStart).not.to.have.been.called; + triggerDomEvent('mousemove', elm, { + clientX: 101, + clientY: 210 + }); + expect(fixture.componentInstance.resize).not.to.have.been.called; + triggerDomEvent('mouseup', elm, { + clientX: 101, + clientY: 210 + }); + expect(fixture.componentInstance.resizeEnd).not.to.have.been.called; - })); + }); - it('should support drag handles to resize the element', async(() => { + it('should support drag handles to resize the element', () => { - createComponent(` + const template: string = `
{ [resizeEdges]="{bottom: true, right: true}">
- `).then((fixture: ComponentFixture) => { - - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm.querySelector('.resize-handle'), { - clientX: 395, - clientY: 345 - }); - expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ - edges: { - bottom: 0, - right: 0 - }, - rectangle: { - top: 200, - left: 100, - width: 300, - height: 150, - right: 400, - bottom: 350 - } - }); - triggerDomEvent('mousemove', elm.querySelector('.resize-handle'), { - clientX: 396, - clientY: 345 - }); - expect(fixture.componentInstance.resize).to.have.been.calledWith({ - edges: { - bottom: 0, - right: 1 - }, - rectangle: { - top: 200, - left: 100, - width: 301, - height: 150, - right: 401, - bottom: 350 - } - }); - triggerDomEvent('mouseup', elm.querySelector('.resize-handle'), { - clientX: 396, - clientY: 345 - }); - expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ - edges: { - bottom: 0, - right: 1 - }, - rectangle: { - top: 200, - left: 100, - width: 301, - height: 150, - right: 401, - bottom: 350 - } - }); + `; + const fixture: ComponentFixture = createComponent(template); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm.querySelector('.resize-handle'), { + clientX: 395, + clientY: 345 + }); + expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({ + edges: { + bottom: 0, + right: 0 + }, + rectangle: { + top: 200, + left: 100, + width: 300, + height: 150, + right: 400, + bottom: 350 + } + }); + triggerDomEvent('mousemove', elm.querySelector('.resize-handle'), { + clientX: 396, + clientY: 345 + }); + expect(fixture.componentInstance.resize).to.have.been.calledWith({ + edges: { + bottom: 0, + right: 1 + }, + rectangle: { + top: 200, + left: 100, + width: 301, + height: 150, + right: 401, + bottom: 350 + } + }); + triggerDomEvent('mouseup', elm.querySelector('.resize-handle'), { + clientX: 396, + clientY: 345 + }); + expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ + edges: { + bottom: 0, + right: 1 + }, + rectangle: { + top: 200, + left: 100, + width: 301, + height: 150, + right: 401, + bottom: 350 + } }); - })); + }); - it('should disable the temporary resize effect applied to the element', async(() => { + it('should disable the temporary resize effect applied to the element', () => { - createComponent().then((fixture: ComponentFixture) => { - fixture.componentInstance.enableGhostResize = false; - fixture.detectChanges(); - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 200 - }); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 201 - }); - 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'); + const fixture: ComponentFixture = createComponent(); + fixture.componentInstance.enableGhostResize = false; + fixture.detectChanges(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 200 }); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 201 + }); + 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'); - })); + }); - it('should support resizing to a snap grid', async(() => { + it('should support resizing to a snap grid', () => { - createComponent().then((fixture: ComponentFixture) => { - fixture.componentInstance.resizeSnapGrid = {left: 10}; - fixture.detectChanges(); - const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; - triggerDomEvent('mousedown', elm, { - clientX: 100, - clientY: 205 - }); - triggerDomEvent('mousemove', elm, { - clientX: 99, - clientY: 205 - }); - expect(fixture.componentInstance.resize).to.have.been.calledWith({ - edges: { - left: 0 - }, - rectangle: { - top: 200, - left: 100, - width: 300, - height: 150, - right: 400, - bottom: 350 - } - }); - triggerDomEvent('mousemove', elm, { - clientX: 95, - clientY: 205 - }); - expect(fixture.componentInstance.resize).to.have.been.calledOnce; - triggerDomEvent('mousemove', elm, { - clientX: 89, - clientY: 205 - }); - expect(fixture.componentInstance.resize).to.have.been.calledWith({ - edges: { - left: -10 - }, - rectangle: { - top: 200, - left: 90, - width: 310, - height: 150, - right: 400, - bottom: 350 - } - }); - expect(fixture.componentInstance.resize).to.have.been.calledTwice; - triggerDomEvent('mouseup', elm, { - clientX: 89, - clientY: 205 - }); - expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ - edges: { - left: -10 - }, - rectangle: { - top: 200, - left: 90, - width: 310, - height: 150, - right: 400, - bottom: 350 - } - }); + const fixture: ComponentFixture = createComponent(); + fixture.componentInstance.resizeSnapGrid = {left: 10}; + fixture.detectChanges(); + const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement; + triggerDomEvent('mousedown', elm, { + clientX: 100, + clientY: 205 + }); + triggerDomEvent('mousemove', elm, { + clientX: 99, + clientY: 205 + }); + expect(fixture.componentInstance.resize).to.have.been.calledWith({ + edges: { + left: 0 + }, + rectangle: { + top: 200, + left: 100, + width: 300, + height: 150, + right: 400, + bottom: 350 + } + }); + triggerDomEvent('mousemove', elm, { + clientX: 95, + clientY: 205 + }); + expect(fixture.componentInstance.resize).to.have.been.calledOnce; + triggerDomEvent('mousemove', elm, { + clientX: 89, + clientY: 205 + }); + expect(fixture.componentInstance.resize).to.have.been.calledWith({ + edges: { + left: -10 + }, + rectangle: { + top: 200, + left: 90, + width: 310, + height: 150, + right: 400, + bottom: 350 + } + }); + expect(fixture.componentInstance.resize).to.have.been.calledTwice; + triggerDomEvent('mouseup', elm, { + clientX: 89, + clientY: 205 + }); + expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({ + edges: { + left: -10 + }, + rectangle: { + top: 200, + left: 90, + width: 310, + height: 150, + right: 400, + bottom: 350 + } }); - })); + }); - it('should not resize when the mouse is parallel with an edge but not inside the bounding rectangle', async(() => { + it('should not resize when the mouse is parallel with an edge but not inside the bounding rectangle', () => { - 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'); + const fixture: ComponentFixture = createComponent(); + 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'); - })); + }); });