fix(resizeHandle): allow handles to be dynamically shown

Fixes mattlewis92#68
AndersTornkvist · Dec 26, 2017 · 34342aa · 34342aa
1 parent 8838f6a
commit 34342aa
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 38 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -3,12 +3,9 @@ import {
   Renderer2,
   ElementRef,
   OnInit,
-  AfterViewInit,
   Output,
   Input,
   EventEmitter,
-  ContentChildren,
-  QueryList,
   OnDestroy,
   NgZone
 } from '@angular/core';
@@ -25,7 +22,6 @@ import 'rxjs/add/operator/pairwise';
 import 'rxjs/add/operator/take';
 import 'rxjs/add/operator/throttle';
 import 'rxjs/add/operator/share';
-import { ResizeHandleDirective } from './resize-handle.directive';
 import { Edges } from './interfaces/edges.interface';
 import { BoundingRectangle } from './interfaces/bounding-rectangle.interface';
 import { ResizeEvent } from './interfaces/resize-event.interface';
@@ -257,7 +253,7 @@ export const MOUSE_MOVE_THROTTLE_MS: number = 50;
 @Directive({
   selector: '[mwlResizable]'
 })
-export class ResizableDirective implements OnInit, OnDestroy, AfterViewInit {
+export class ResizableDirective implements OnInit, OnDestroy {
   /**
    * A function that will be called before each resize event. Return `true` to allow the resize event to propagate or `false` to cancel it
    */
@@ -338,12 +334,6 @@ export class ResizableDirective implements OnInit, OnDestroy, AfterViewInit {
     event: MouseEvent | TouchEvent;
   }>();
 
-  /**
-   * @hidden
-   */
-  @ContentChildren(ResizeHandleDirective)
-  resizeHandles: QueryList<ResizeHandleDirective>;
-
   private pointerEventListeners: PointerEventListeners;
 
   private pointerEventListenerSubscriptions: any = {};
@@ -705,15 +695,6 @@ export class ResizableDirective implements OnInit, OnDestroy, AfterViewInit {
     });
   }
 
-  /**
-   * @hidden
-   */
-  ngAfterViewInit(): void {
-    this.resizeHandles.forEach((handle: ResizeHandleDirective) => {
-      handle.resizable = this;
-    });
-  }
-
   /**
    * @hidden
    */

diff --git a/src/resize-handle.directive.ts b/src/resize-handle.directive.ts
@@ -30,11 +30,6 @@ export class ResizeHandleDirective implements OnDestroy {
    */
   @Input() resizeEdges: Edges = {};
 
-  /**
-   * @private
-   */
-  public resizable: ResizableDirective; // set by the parent mwlResizable directive
-
   private eventListeners: {
     touchmove?: () => void;
     mousemove?: () => void;
@@ -43,7 +38,8 @@ export class ResizeHandleDirective implements OnDestroy {
   constructor(
     private renderer: Renderer2,
     private element: ElementRef,
-    private zone: NgZone
+    private zone: NgZone,
+    private resizable: ResizableDirective
   ) {}
 
   ngOnDestroy(): void {

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -39,23 +39,24 @@ describe('resizable directive', () => {
     `
   })
   class TestComponent {
-    @ViewChild(ResizableDirective) public resizable: ResizableDirective;
-    public style: object = {};
-    public resizeStart: sinon.SinonSpy = sinon.spy();
-    public resizing: sinon.SinonSpy = sinon.spy();
-    public resizeEnd: sinon.SinonSpy = sinon.spy();
-    public validate: sinon.SinonStub = sinon.stub().returns(true);
-    public resizeEdges: Edges = {
+    @ViewChild(ResizableDirective) resizable: ResizableDirective;
+    style: object = {};
+    resizeStart: sinon.SinonSpy = sinon.spy();
+    resizing: sinon.SinonSpy = sinon.spy();
+    resizeEnd: sinon.SinonSpy = sinon.spy();
+    validate: sinon.SinonStub = sinon.stub().returns(true);
+    resizeEdges: Edges = {
       top: true,
       bottom: true,
       left: true,
       right: true
     };
-    public enableGhostResize: boolean = true;
-    public resizeSnapGrid: object = {};
-    public resizeCursors: object = {};
-    public resizeCursorPrecision: number;
-    public ghostElementPositioning: 'fixed' | 'absolute' = 'fixed';
+    enableGhostResize: boolean = true;
+    resizeSnapGrid: object = {};
+    resizeCursors: object = {};
+    resizeCursorPrecision: number;
+    ghostElementPositioning: 'fixed' | 'absolute' = 'fixed';
+    showResizeHandle = false;
   }
 
   function triggerDomEvent(
@@ -1355,4 +1356,47 @@ describe('resizable directive', () => {
       });
     });
   });
+
+  it('should handle the drag handle being shown via an ngIf', () => {
+    const template: string = `
+      <div
+        class="rectangle"
+        [ngStyle]="style"
+        mwlResizable
+        (resizeStart)="resizeStart($event)"
+        (resizing)="resizing($event)"
+        (resizeEnd)="resizeEnd($event)">
+        <span
+          style="width: 5px; height: 5px; position: absolute; bottom: 5px; right: 5px"
+          class="resize-handle"
+          mwlResizeHandle
+          *ngIf="showResizeHandle"
+          [resizeEdges]="{bottom: true, right: true}">
+        </span>
+      </div>
+    `;
+    const fixture: ComponentFixture<TestComponent> = createComponent(template);
+
+    const elm: any = fixture.componentInstance.resizable.elm.nativeElement;
+    fixture.componentInstance.showResizeHandle = true;
+    fixture.detectChanges();
+    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
+      }
+    });
+  });
 });