feat: add a class to the ghost element

mattlewis92 · May 12, 2017 · 54be6b7 · 54be6b7
1 parent 1eb4c18
commit 54be6b7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -193,6 +193,7 @@ const RESIZE_LEFT_HOVER_CLASS: string = 'resize-left-hover';
 const RESIZE_RIGHT_HOVER_CLASS: string = 'resize-right-hover';
 const RESIZE_TOP_HOVER_CLASS: string = 'resize-top-hover';
 const RESIZE_BOTTOM_HOVER_CLASS: string = 'resize-bottom-hover';
+const RESIZE_GHOST_ELEMENT_CLASS: string = 'resize-ghost-element';
 
 export const MOUSE_MOVE_THROTTLE_MS: number = 50;
 
@@ -487,6 +488,7 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
         this.renderer.setStyle(currentResize.clonedNode, 'height', `${currentResize.startingRect.height}px`);
         this.renderer.setStyle(currentResize.clonedNode, 'width', `${currentResize.startingRect.width}px`);
         this.renderer.setStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges, resizeCursors));
+        this.renderer.addClass(currentResize.clonedNode, RESIZE_GHOST_ELEMENT_CLASS);
       }
       this.zone.run(() => {
         this.resizeStart.emit({

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -1100,6 +1100,20 @@ describe('resizable directive', () => {
 
   });
 
+  it('should add a class to the ghost element', () => {
+
+    const fixture: ComponentFixture<TestCmp> = createComponent();
+    fixture.detectChanges();
+    const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+    triggerDomEvent('mousedown', elm, {
+      clientX: 100,
+      clientY: 200
+    });
+    expect(elm.classList.contains('resize-ghost-element')).to.be.false;
+    expect(elm.nextSibling['classList'].contains('resize-ghost-element')).to.be.true;
+
+  });
+
   describe('absolute positioning', () => {
     let domEvents: Array<any>;
     beforeEach(() => {