perf(resizable): only register mouse move events when a rezize is active

src/resizable.directive.ts

@@ -247,6 +247,11 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
    */
   @ContentChildren(ResizeHandle) resizeHandles: QueryList<ResizeHandle>;
 
+  private eventListeners: {
+    touchmove?: Function,
+    mousemove?: Function
+  } = {};
+
   /**
    * @private
    */
@@ -470,6 +475,7 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
     this.mousedown.complete();
     this.mouseup.complete();
     this.mousemove.complete();
+    this.unsubscribeEventListeners();
   }
 
   /**
@@ -479,21 +485,20 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
   @HostListener('document:mousedown', ['$event.clientX', '$event.clientY'])
   onMousedown(mouseX: number, mouseY: number): void {
     this.zone.runOutsideAngular(() => {
+      if (!this.eventListeners.touchmove) {
+        this.eventListeners.touchmove = this.renderer.listenGlobal('document', 'touchmove', (event: any) => {
+          this.onMousemove(event, event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+        });
+      }
+      if (!this.eventListeners.mousemove) {
+        this.eventListeners.mousemove = this.renderer.listenGlobal('document', 'mousemove', (event: any) => {
+          this.onMousemove(event, event.clientX, event.clientY);
+        });
+      }
       this.mousedown.next({mouseX, mouseY});
     });
   }
 
-  /**
-   * @private
-   */
-  @HostListener('document:touchmove', ['$event', '$event.targetTouches[0].clientX', '$event.targetTouches[0].clientY'])
-  @HostListener('document:mousemove', ['$event', '$event.clientX', '$event.clientY'])
-  onMousemove(event: any, mouseX: number, mouseY: number): void {
-    this.zone.runOutsideAngular(() => {
-      this.mousemove.next({mouseX, mouseY, event});
-    });
-  }
-
   /**
    * @private
    */
@@ -506,4 +511,17 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
     });
   }
 
+  private onMousemove(event: any, mouseX: number, mouseY: number): void {
+    this.zone.runOutsideAngular(() => {
+      this.mousemove.next({mouseX, mouseY, event});
+    });
+  }
+
+  private unsubscribeEventListeners(): void {
+    Object.keys(this.eventListeners).forEach(type => {
+      this.eventListeners[type]();
+      delete this.eventListeners[type];
+    });
+  }
+
 }