perf(draggable): lazily create the mouse move listener

Author: Matt Lewis

src/draggable.directive.ts

@@ -1,4 +1,14 @@
-import {Directive, HostListener, OnInit, ElementRef, Renderer, Output, EventEmitter, Input, OnDestroy} from '@angular/core';
+import {
+  Directive,
+  HostListener,
+  OnInit,
+  ElementRef,
+  Renderer,
+  Output,
+  EventEmitter,
+  Input,
+  OnDestroy
+} from '@angular/core';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/observable/merge';
@@ -57,6 +67,8 @@ export class Draggable implements OnInit, OnDestroy {
    */
   mouseUp: Subject<any> = new Subject();
 
+  private mouseMoveEventListenerUnsubscribe: Function;
+
   /**
    * @hidden
    */
@@ -158,6 +170,9 @@ export class Draggable implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    if (this.mouseMoveEventListenerUnsubscribe) {
+      this.mouseMoveEventListenerUnsubscribe();
+    }
     this.mouseDown.complete();
     this.mouseMove.complete();
     this.mouseUp.complete();
@@ -168,22 +183,23 @@ export class Draggable implements OnInit, OnDestroy {
    */
   @HostListener('mousedown', ['$event'])
   onMouseDown(event: MouseEvent): void {
+    if (!this.mouseMoveEventListenerUnsubscribe) {
+      this.mouseMoveEventListenerUnsubscribe = this.renderer.listenGlobal('document', 'mousemove', (event: MouseEvent) => {
+        this.mouseMove.next(event);
+      });
+    }
     this.mouseDown.next(event);
   }
 
-  /**
-   * @hidden
-   */
-  @HostListener('document:mousemove', ['$event'])
-  onMouseMove(event: MouseEvent): void {
-    this.mouseMove.next(event);
-  }
-
   /**
    * @hidden
    */
   @HostListener('document:mouseup', ['$event'])
   onMouseUp(event: MouseEvent): void {
+    if (this.mouseMoveEventListenerUnsubscribe) {
+      this.mouseMoveEventListenerUnsubscribe();
+      this.mouseMoveEventListenerUnsubscribe = null;
+    }
     this.mouseUp.next(event);
   }
 

test/draggable.directive.spec.ts

@@ -243,4 +243,18 @@ describe('draggable directive', () => {
     expect(fixture.componentInstance.dragEnd).to.have.been.calledOnce;
   });
 
+  it('should only unregister the mouse move listener if it exists', () => {
+    const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mouseup', draggableElement, {clientX: 7, clientY: 8});
+    expect(fixture.componentInstance.draggable['mouseMoveEventListenerUnsubscribe']).not.to.be.ok;
+  });
+
+  it('should not register multiple mouse move listeners', () => {
+    const draggableElement: HTMLElement = fixture.componentInstance.draggable.element.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, {clientX: 7, clientY: 8});
+    const mouseMoveUnsubscribe: Function = fixture.componentInstance.draggable['mouseMoveEventListenerUnsubscribe'];
+    triggerDomEvent('mousedown', draggableElement, {clientX: 7, clientY: 8});
+    expect(fixture.componentInstance.draggable['mouseMoveEventListenerUnsubscribe']).to.equal(mouseMoveUnsubscribe);
+  });
+
 });