perf: run all event listeners outside of angulars zone

Author: Matt Lewis

src/draggable.directive.ts

@@ -7,7 +7,8 @@ import {
   Output,
   EventEmitter,
   Input,
-  OnDestroy
+  OnDestroy,
+  NgZone
 } from '@angular/core';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
@@ -72,15 +73,23 @@ export class Draggable implements OnInit, OnDestroy {
   /**
    * @hidden
    */
-  constructor(public element: ElementRef, private renderer: Renderer, private draggableHelper: DraggableHelper) {}
+  constructor(
+    public element: ElementRef,
+    private renderer: Renderer,
+    private draggableHelper: DraggableHelper,
+    private zone: NgZone
+  ) {}
 
   ngOnInit(): void {
 
     const mouseDrag: Observable<any> = this.mouseDown
       .filter(() => this.canDrag())
       .flatMap((mouseDownEvent: MouseEvent) => {
 
-        this.dragStart.next({x: 0, y: 0});
+        this.zone.run(() => {
+          this.dragStart.next({x: 0, y: 0});
+        });
+
         this.setCursor(MOVE_CURSOR);
 
         const currentDrag: Subject<any> = new Subject();
@@ -129,7 +138,9 @@ export class Draggable implements OnInit, OnDestroy {
           .takeUntil(Observable.merge(this.mouseUp, this.mouseDown));
 
         mouseMove.takeLast(1).subscribe(({x, y}) => {
-          this.dragEnd.next({x, y});
+          this.zone.run(() => {
+            this.dragEnd.next({x, y});
+          });
           currentDrag.complete();
           this.setCssTransform(null);
           if (this.ghostDragEnabled) {
@@ -155,7 +166,9 @@ export class Draggable implements OnInit, OnDestroy {
       })
       .map(([previous, next]) => next)
       .subscribe(({x, y, currentDrag, clientX, clientY}) => {
-        this.dragging.next({x, y});
+        this.zone.run(() => {
+          this.dragging.next({x, y});
+        });
         if (this.ghostDragEnabled) {
           this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', 'none');
         }
@@ -183,42 +196,50 @@ 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);
+    this.zone.runOutsideAngular(() => {
+      if (!this.mouseMoveEventListenerUnsubscribe) {
+        this.mouseMoveEventListenerUnsubscribe = this.renderer.listenGlobal('document', 'mousemove', (event: MouseEvent) => {
+          this.mouseMove.next(event);
+        });
+      }
+      this.mouseDown.next(event);
+    });
   }
 
   /**
    * @hidden
    */
   @HostListener('document:mouseup', ['$event'])
   onMouseUp(event: MouseEvent): void {
-    if (this.mouseMoveEventListenerUnsubscribe) {
-      this.mouseMoveEventListenerUnsubscribe();
-      this.mouseMoveEventListenerUnsubscribe = null;
-    }
-    this.mouseUp.next(event);
+    this.zone.runOutsideAngular(() => {
+      if (this.mouseMoveEventListenerUnsubscribe) {
+        this.mouseMoveEventListenerUnsubscribe();
+        this.mouseMoveEventListenerUnsubscribe = null;
+      }
+      this.mouseUp.next(event);
+    });
   }
 
   /**
    * @hidden
    */
   @HostListener('mouseenter')
   onMouseEnter(): void {
-    if (this.canDrag()) {
-      this.setCursor(MOVE_CURSOR);
-    }
+    this.zone.runOutsideAngular(() => {
+      if (this.canDrag()) {
+        this.setCursor(MOVE_CURSOR);
+      }
+    });
   }
 
   /**
    * @hidden
    */
   @HostListener('mouseleave')
   onMouseLeave(): void {
-    this.setCursor(null);
+    this.zone.runOutsideAngular(() => {
+      this.setCursor(null);
+    });
   }
 
   private setCssTransform(value: string): void {

src/droppable.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, OnInit, ElementRef, OnDestroy, Output, EventEmitter} from '@angular/core';
+import {Directive, OnInit, ElementRef, OnDestroy, Output, EventEmitter, NgZone} from '@angular/core';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
 import {Observable} from 'rxjs/Observable';
@@ -28,7 +28,7 @@ export class Droppable implements OnInit, OnDestroy {
 
   currentDragSubscription: Subscription;
 
-  constructor(private element: ElementRef, private draggableHelper: DraggableHelper) {}
+  constructor(private element: ElementRef, private draggableHelper: DraggableHelper, private zone: NgZone) {}
 
   ngOnInit(): void {
 
@@ -54,14 +54,18 @@ export class Droppable implements OnInit, OnDestroy {
 
       overlapsChanged.filter(overlapsNow => overlapsNow).subscribe(() => {
         dragOverActive = true;
-        this.dragEnter.next({
-          dropData: currentDragDropData
+        this.zone.run(() => {
+          this.dragEnter.next({
+            dropData: currentDragDropData
+          });
         });
       });
 
       overlaps.filter(overlapsNow => overlapsNow).subscribe(() => {
-        this.dragOver.next({
-          dropData: currentDragDropData
+        this.zone.run(() => {
+          this.dragOver.next({
+            dropData: currentDragDropData
+          });
         });
       });
 
@@ -70,16 +74,20 @@ export class Droppable implements OnInit, OnDestroy {
         .filter(([didOverlap, overlapsNow]) => didOverlap && !overlapsNow)
         .subscribe(() => {
           dragOverActive = false;
-          this.dragLeave.next({
-            dropData: currentDragDropData
+          this.zone.run(() => {
+            this.dragLeave.next({
+              dropData: currentDragDropData
+            });
           });
         });
 
       drag.flatMap(() => overlaps).subscribe({
         complete: () => {
           if (dragOverActive) {
-            this.drop.next({
-              dropData: currentDragDropData
+            this.zone.run(() => {
+              this.drop.next({
+                dropData: currentDragDropData
+              });
             });
           }
         }