add event listeners inside runOutsideAngular

bertrandg · bertrandg · commit 4ddca0921049 · 2018-01-13T09:29:51.000+01:00
diff --git a/src/components/split.component.ts b/src/components/split.component.ts
@@ -1,5 +1,5 @@
 import { Component, ChangeDetectorRef, Input, Output, HostBinding, ChangeDetectionStrategy, 
-    EventEmitter, Renderer2, OnDestroy, ElementRef, AfterViewInit } from '@angular/core';
+    EventEmitter, Renderer2, OnDestroy, ElementRef, AfterViewInit, NgZone } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/debounceTime';
@@ -269,7 +269,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
         sizePercentB: 0,
     };
 
-    constructor(private elRef: ElementRef,
+    constructor(private ngZone: NgZone,
+                private elRef: ElementRef,
                 private cdRef: ChangeDetectorRef,
                 private renderer: Renderer2) {}
 
@@ -453,9 +454,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
         // Place code here to allow '(gutterClick)' event even if '[disabled]="true"'.
         this.currentGutterNum = gutterNum;
         this.draggingWithoutMove = true;
-        this.dragListeners.push( this.renderer.listen('document', 'mouseup', (e: MouseEvent) => this.stopDragging()) );
-        this.dragListeners.push( this.renderer.listen('document', 'touchend', (e: TouchEvent) => this.stopDragging()) );
-        this.dragListeners.push( this.renderer.listen('document', 'touchcancel', (e: TouchEvent) => this.stopDragging()) );
+        this.ngZone.runOutsideAngular(() => {
+            this.dragListeners.push( this.renderer.listen('document', 'mouseup', (e: MouseEvent) => this.stopDragging()) );
+            this.dragListeners.push( this.renderer.listen('document', 'touchend', (e: TouchEvent) => this.stopDragging()) );
+            this.dragListeners.push( this.renderer.listen('document', 'touchcancel', (e: TouchEvent) => this.stopDragging()) );
+        });
 
         if(this.disabled) {
             return;
@@ -492,8 +495,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
             return;
         }
 
-        this.dragListeners.push( this.renderer.listen('document', 'mousemove', (e: MouseEvent) => this.dragEvent(e, start, areaA, areaB)) );
-        this.dragListeners.push( this.renderer.listen('document', 'touchmove', (e: TouchEvent) => this.dragEvent(e, start, areaA, areaB)) );
+        this.ngZone.runOutsideAngular(() => {
+            this.dragListeners.push( this.renderer.listen('document', 'mousemove', (e: MouseEvent) => this.dragEvent(e, start, areaA, areaB)) );
+            this.dragListeners.push( this.renderer.listen('document', 'touchmove', (e: TouchEvent) => this.dragEvent(e, start, areaA, areaB)) );
+        });
 
         areaA.comp.lockEvents();
         areaB.comp.lockEvents();
diff --git a/src/components/splitArea.directive.ts b/src/components/splitArea.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Input, ElementRef, Renderer2, OnInit, OnDestroy } from '@angular/core';
+import { Directive, Input, ElementRef, Renderer2, OnInit, OnDestroy, NgZone } from '@angular/core';
 
 import { SplitComponent } from './split.component';
 
@@ -75,7 +75,8 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
     private transitionListener: Function;
     private readonly lockListeners: Array<Function> = [];
 
-    constructor(private elRef: ElementRef,
+    constructor(private ngZone: NgZone,
+                private elRef: ElementRef,
                 private renderer: Renderer2,
                 private split: SplitComponent) {}
 
@@ -85,7 +86,9 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
         this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', '0');
         this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', '0');
 
-        this.transitionListener = this.renderer.listen(this.elRef.nativeElement, 'transitionend', (e: TransitionEvent) => this.onTransitionEnd(e));
+        this.ngZone.runOutsideAngular(() => {
+            this.transitionListener = this.renderer.listen(this.elRef.nativeElement, 'transitionend', (e: TransitionEvent) => this.onTransitionEnd(e));
+        });
     }
 
     public getSizePixel(prop: 'offsetWidth' | 'offsetHeight'): number {
@@ -152,8 +155,10 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
     }
     
     public lockEvents(): void {
-        this.lockListeners.push( this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false) );
-        this.lockListeners.push( this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false) );
+        this.ngZone.runOutsideAngular(() => {
+            this.lockListeners.push( this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false) );
+            this.lockListeners.push( this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false) );
+        });
     }
 
     public unlockEvents(): void {
