fix: set ghost element width and height on resize start

Fixes #53
mattlewis92 · May 21, 2017 · be5d727 · be5d727
1 parent da46f7b
commit be5d727
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -76,6 +76,8 @@ function getNewBoundingRectangle(startingRect: BoundingRectangle, edges: Edges,
 function getElementRect(element: ElementRef, ghostElementPositioning: string): BoundingRectangle {
   if (ghostElementPositioning === 'absolute') {
     return {
+      height: element.nativeElement.offsetHeight,
+      width: element.nativeElement.offsetWidth,
       top: element.nativeElement.offsetTop,
       bottom: element.nativeElement.offsetHeight + element.nativeElement.offsetTop,
       left: element.nativeElement.offsetLeft,
@@ -84,6 +86,8 @@ function getElementRect(element: ElementRef, ghostElementPositioning: string): B
   } else {
     const boundingRect: BoundingRectangle = element.nativeElement.getBoundingClientRect();
     return {
+      height: boundingRect.height,
+      width: boundingRect.width,
       top: boundingRect.top,
       bottom: boundingRect.bottom,
       left: boundingRect.left,

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -604,6 +604,19 @@ describe('resizable directive', () => {
 
   });
 
+  it('should set the cloned elements width and height on the resize start', () => {
+
+    const fixture: ComponentFixture<TestCmp> = createComponent();
+    const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+    triggerDomEvent('mousedown', elm, {
+      clientX: 100,
+      clientY: 200
+    });
+    expect(elm.nextSibling['style'].width).to.equal('300px');
+    expect(elm.nextSibling['style'].height).to.equal('150px');
+
+  });
+
   it('should reset existing styles after a resize', () => {
 
     const fixture: ComponentFixture<TestCmp> = createComponent();