Subscribe to document events only when dragging

Author: Xie, Ziyu

README.md

@@ -27,6 +27,10 @@ angular2-draggable has angular directives that make the DOM element draggable an
     + provided since v2.0, requires Angular >= 6
 
 # Latest Update
++ 2018.12.22: 2.2.0
+  + **ngDraggable**: Performance update. Fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events.
+  
+
 + 2018.11.29: 2.1.9
   + **ngDraggable**: fix [issue #31](https://github.com/xieziyu/angular2-draggable/issues/31): Problems when scale transform applied to parent. ([by rathodsanjay](https://github.com/rathodsanjay) - [PR #123](https://github.com/xieziyu/angular2-draggable/pull/123))
 
@@ -45,16 +49,6 @@ angular2-draggable has angular directives that make the DOM element draggable an
 + 2018.08.03: 2.0.0
   + Fix [issue #84](https://github.com/xieziyu/angular2-draggable/issues/84): iFrames, and context unrelated elements block all events, and are unusable
 
-+ 2018.07.02: 2.0.0-beta.2
-  + **ngResizable**: Provide `[rzAspectRatio]`, whether the element should be constrained to a specific aspect ratio. [demo](https://xieziyu.github.io/angular2-draggable/#/resizable/aspect-ratio)
-  + **ngResizable**: Provide `[rzContainment]`, constrains resizing to within the bounds of the specified element or region. [demo](https://xieziyu.github.io/angular2-draggable/#/resizable/containment)
-
-+ 2018.06.26: 2.0.0-beta.1
-  + **ngResizable**: Provide `(rzStart)`, `(rzResizing)`, `(rzStop)` event emitters
-  + **ngResizable**: Provide `resetSize()`, `getStatus()` methods
-
-+ 2018.06.25: 2.0.0-beta.0
-  + New: `ngResizable` directive which you can use to make the element resizable! More resizable options are planning. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/resizable/default)
 
 # Installation
 ```

package.json

@@ -21,35 +21,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.3",
-    "@angular/common": "^6.0.3",
-    "@angular/compiler": "^6.0.3",
-    "@angular/core": "^6.0.3",
-    "@angular/forms": "^6.0.3",
-    "@angular/http": "^6.0.3",
-    "@angular/platform-browser": "^6.0.3",
-    "@angular/platform-browser-dynamic": "^6.0.3",
-    "@angular/router": "^6.0.3",
+    "@angular/animations": "^7.1.4",
+    "@angular/common": "^7.1.4",
+    "@angular/compiler": "^7.1.4",
+    "@angular/core": "^7.1.4",
+    "@angular/forms": "^7.1.4",
+    "@angular/http": "^7.1.4",
+    "@angular/platform-browser": "^7.1.4",
+    "@angular/platform-browser-dynamic": "^7.1.4",
+    "@angular/router": "^7.1.4",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
     "ngx-bootstrap": "3.0.1",
-    "ngx-markdown": "^1.6.0",
-    "rxjs": "^6.0.0",
+    "ngx-markdown": "^7.0.3",
+    "rxjs": "^6.3.3",
+    "tslib": "^1.9.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.8",
-    "@angular-devkit/build-ng-packagr": "~0.6.8",
-    "@angular/cli": "~6.0.8",
-    "@angular/compiler-cli": "^6.0.3",
-    "@angular/language-service": "^6.0.3",
+    "@angular-devkit/build-angular": "~0.11.0",
+    "@angular-devkit/build-ng-packagr": "~0.11.0",
+    "@angular/cli": "~7.1.4",
+    "@angular/compiler-cli": "^7.1.4",
+    "@angular/language-service": "^7.1.4",
     "@compodoc/compodoc": "^1.1.2",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "bootstrap": "^4.1.1",
-    "codelyzer": "~4.2.1",
+    "codelyzer": "~4.5.0",
     "cpr": "^3.0.1",
     "html-loader": "^0.5.5",
     "jasmine-core": "~2.99.1",
@@ -59,14 +60,13 @@
     "karma-coverage-istanbul-reporter": "~2.0.0",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^3.0.0-rc.2",
+    "ng-packagr": "^4.2.0",
     "npm-run-all": "^4.1.3",
     "protractor": "~5.3.0",
     "raw-loader": "^0.5.1",
-    "ts-node": "~5.0.1",
-    "tsickle": ">=0.25.5",
-    "tslib": "^1.7.1",
-    "tslint": "~5.9.1",
-    "typescript": "~2.7.2"
+    "ts-node": "~7.0.0",
+    "tsickle": ">=0.29.0",
+    "tslint": "~5.11.0",
+    "typescript": "~3.1.6"
   }
 }

projects/angular2-draggable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-draggable",
-  "version": "2.1.9",
+  "version": "2.2.0",
   "author": "Xie, Ziyu",
   "license": "MIT",
   "keywords": [

projects/angular2-draggable/src/lib/angular-draggable.directive.ts

@@ -4,6 +4,7 @@ import {
   EventEmitter, OnChanges, SimpleChanges, OnDestroy, AfterViewInit
 } from '@angular/core';
 
+import { Subscription, fromEvent } from 'rxjs';
 import { IPosition, Position } from './models/position';
 import { HelperBlock } from './widgets/helper-block';
 
@@ -22,6 +23,8 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
   private _zIndex = '';
   private needTransform = false;
 
+  private draggingSub: Subscription = null;
+
   /**
    * Bugfix: iFrames, and context unrelated elements block all events, and are unusable
    * https://github.com/xieziyu/angular2-draggable/issues/84
@@ -119,6 +122,10 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
     this.currTrans = null;
     this._helperBlock.dispose();
     this._helperBlock = null;
+
+    if (this.draggingSub) {
+      this.draggingSub.unsubscribe();
+    }
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -230,9 +237,28 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
     if (!this.moving) {
       this.started.emit(this.el.nativeElement);
       this.moving = true;
+
+      /**
+       * Fix performance issue:
+       * https://github.com/xieziyu/angular2-draggable/issues/112
+       */
+      this.subscribeEvents();
     }
   }
 
+  private subscribeEvents() {
+    this.draggingSub = fromEvent(document, 'mousemove').subscribe(event => this.onMouseMove(event as MouseEvent));
+    this.draggingSub.add(fromEvent(document, 'touchmove').subscribe(event => this.onMouseMove(event as TouchEvent)));
+    this.draggingSub.add(fromEvent(document, 'mouseup').subscribe(() => this.putBack()));
+    this.draggingSub.add(fromEvent(document, 'mouseleave').subscribe(() => this.putBack()));
+    this.draggingSub.add(fromEvent(document, 'touchend').subscribe(() => this.putBack()));
+  }
+
+  private unsubscribeEvents() {
+    this.draggingSub.unsubscribe();
+    this.draggingSub = null;
+  }
+
   boundsCheck() {
     if (this.bounds) {
       let boundary = this.bounds.getBoundingClientRect();
@@ -317,6 +343,12 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
       if (!this.trackPosition) {
         this.transform();
       }
+
+      /**
+       * Fix performance issue:
+       * https://github.com/xieziyu/angular2-draggable/issues/112
+       */
+      this.unsubscribeEvents();
     }
   }
 
@@ -370,16 +402,6 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
     this.pickUp();
   }
 
-  @HostListener('document:mouseup')
-  @HostListener('document:mouseleave')
-  @HostListener('document:touchend')
-  @HostListener('document:touchcancel')
-  onMouseLeave() {
-    this.putBack();
-  }
-
-  @HostListener('document:mousemove', ['$event'])
-  @HostListener('document:touchmove', ['$event'])
   onMouseMove(event: MouseEvent | TouchEvent) {
     if (this.moving && this.allowDrag) {
       if (this.preventDefaultEvent) {

src/assets/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.2.0 (2018-12-22)
+
+#### Bugfix
++ **ngDraggable**: Performance update. Fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events.
+
+---
+
 ## 2.1.9 (2018-11-29)
 
 #### Bugfix