Merge pull request #133 from xieziyu/patch-2.2.0

Release v2.2.0

README.md

@@ -27,6 +27,14 @@ 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.
+    + Fix [issue #128](https://github.com/xieziyu/angular2-draggable/issues/128): Multiple phone draggables at the same time.
+    + New `[lockAxis]` input.
+  + **ngResizable**:
+    + Fix [issue #132](https://github.com/xieziyu/angular2-draggable/issues/132): Aspect ratio feature exits Y-Axis boundary on resize.
+
 + 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 +53,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
 ```
@@ -140,7 +138,8 @@ Well you can use both directives concurrently if you wish:
     | gridSize | number | 1 | Use it for snapping to grid. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/advance/snap-grid) |
     | preventDefaultEvent | boolean | `false` | Whether to prevent default mouse event |
     | scale | number | 1 | Set it when parent element has CSS transform scale |
-
+    | lockAxis | `'x' | 'y'` | null | Restrict dragging to a specific axis by locking another one |
+
 + `ngResizable` directive support following input porperties:
 
     | Input | Type | Default | Description |

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
@@ -77,6 +80,9 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
   /** Set initial position by offsets */
   @Input() position: IPosition = { x: 0, y: 0 };
 
+  /** Lock axis: 'x' or 'y' */
+  @Input() lockAxis: string = null;
+
   /** Emit position offsets when moving */
   @Output() movingOffset = new EventEmitter<IPosition>();
 
@@ -88,7 +94,7 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
     if (setting !== undefined && setting !== null && setting !== '') {
       this.allowDrag = !!setting;
 
-      let element = this.handle ? this.handle : this.el.nativeElement;
+      let element = this.getDragEl();
 
       if (this.allowDrag) {
         this.renderer.addClass(element, 'ng-draggable');
@@ -104,7 +110,7 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
 
   ngOnInit() {
     if (this.allowDrag) {
-      let element = this.handle ? this.handle : this.el.nativeElement;
+      let element = this.getDragEl();
       this.renderer.addClass(element, 'ng-draggable');
     }
     this.resetPosition();
@@ -119,6 +125,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) {
@@ -152,6 +162,10 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
     }
   }
 
+  private getDragEl() {
+    return this.handle ? this.handle : this.el.nativeElement;
+  }
+
   resetPosition() {
     if (Position.isIPosition(this.position)) {
       this.oldTrans.set(this.position);
@@ -177,10 +191,17 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
   }
 
   private transform() {
-
     let translateX = this.tempTrans.x + this.oldTrans.x;
     let translateY = this.tempTrans.y + this.oldTrans.y;
 
+    if (this.lockAxis === 'x') {
+      translateX = this.oldTrans.x;
+      this.tempTrans.x = 0;
+    } else if (this.lockAxis === 'y') {
+      translateY = this.oldTrans.y;
+      this.tempTrans.y = 0;
+    }
+
     // Snap to grid: by grid size
     if (this.gridSize > 1) {
       translateX = Math.round(translateX / this.gridSize) * this.gridSize;
@@ -230,9 +251,30 @@ 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', { passive: false }).subscribe(event => this.onMouseMove(event as MouseEvent));
+    this.draggingSub.add(fromEvent(document, 'touchmove', { passive: false }).subscribe(event => this.onMouseMove(event as TouchEvent)));
+    this.draggingSub.add(fromEvent(document, 'mouseup', { passive: false }).subscribe(() => this.putBack()));
+    this.draggingSub.add(fromEvent(document, 'mouseleave', { passive: false }).subscribe(() => this.putBack()));
+    this.draggingSub.add(fromEvent(document, 'touchend', { passive: false }).subscribe(() => this.putBack()));
+    this.draggingSub.add(fromEvent(document, 'touchcancel', { passive: false }).subscribe(() => this.putBack()));
+
+  }
+
+  private unsubscribeEvents() {
+    this.draggingSub.unsubscribe();
+    this.draggingSub = null;
+  }
+
   boundsCheck() {
     if (this.bounds) {
       let boundary = this.bounds.getBoundingClientRect();
@@ -317,6 +359,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();
     }
   }
 
@@ -366,20 +414,10 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
       event.preventDefault();
     }
 
-    this.orignal = Position.fromEvent(event);
+    this.orignal = Position.fromEvent(event, this.getDragEl());
     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) {
@@ -389,7 +427,7 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
 
       // Add a transparent helper div:
       this._helperBlock.add();
-      this.moveTo(Position.fromEvent(event));
+      this.moveTo(Position.fromEvent(event, this.getDragEl()));
     }
   }
 }

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

@@ -1,10 +1,10 @@
 import {
   Directive, ElementRef, Renderer2,
-  Input, Output, OnInit, HostListener,
-  EventEmitter, OnChanges, SimpleChanges,
+  Input, Output, OnInit, EventEmitter, OnChanges, SimpleChanges,
   OnDestroy, AfterViewInit
 } from '@angular/core';
 
+import { Subscription, fromEvent } from 'rxjs';
 import { HelperBlock } from './widgets/helper-block';
 import { ResizeHandle } from './widgets/resize-handle';
 import { ResizeHandleType } from './models/resize-handle-type';
@@ -49,6 +49,8 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
    */
   private _helperBlock: HelperBlock = null;
 
+  private draggingSub: Subscription = null;
+
   /** Disables the resizable if set to false. */
   @Input() set ngResizable(v: any) {
     if (v !== undefined && v !== null && v !== '') {
@@ -296,22 +298,33 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
     if (!this._handleResizing) {
       this._origMousePos = Position.fromEvent(event);
       this.startResize(handle);
+
+      this.subscribeEvents();
     }
   }
 
-  @HostListener('document:mouseup')
-  @HostListener('document:mouseleave')
-  @HostListener('document:touchend')
-  @HostListener('document:touchcancel')
+  private subscribeEvents() {
+    this.draggingSub = fromEvent(document, 'mousemove', { passive: false }).subscribe(event => this.onMouseMove(event as MouseEvent));
+    this.draggingSub.add(fromEvent(document, 'touchmove', { passive: false }).subscribe(event => this.onMouseMove(event as TouchEvent)));
+    this.draggingSub.add(fromEvent(document, 'mouseup', { passive: false }).subscribe(() => this.onMouseLeave()));
+    this.draggingSub.add(fromEvent(document, 'mouseleave', { passive: false }).subscribe(() => this.onMouseLeave()));
+    this.draggingSub.add(fromEvent(document, 'touchend', { passive: false }).subscribe(() => this.onMouseLeave()));
+    this.draggingSub.add(fromEvent(document, 'touchcancel', { passive: false }).subscribe(() => this.onMouseLeave()));
+  }
+
+  private unsubscribeEvents() {
+    this.draggingSub.unsubscribe();
+    this.draggingSub = null;
+  }
+
   onMouseLeave() {
     if (this._handleResizing) {
       this.stopResize();
       this._origMousePos = null;
+      this.unsubscribeEvents();
     }
   }
 
-  @HostListener('document:mousemove', ['$event'])
-  @HostListener('document:touchmove', ['$event'])
   onMouseMove(event: MouseEvent | TouchEvent) {
     if (this._handleResizing && this._resizable && this._origMousePos && this._origPos && this._origSize) {
       this.resizeTo(Position.fromEvent(event));
@@ -434,8 +447,10 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
     if (this._containment) {
       const maxWidth = this._bounding.width - this._bounding.pr - this.el.nativeElement.offsetLeft - this._bounding.translateX;
       const maxHeight = this._bounding.height - this._bounding.pb - this.el.nativeElement.offsetTop - this._bounding.translateY;
+      const minHeight = !this.rzMinHeight ? 1 : this.rzMinHeight;
+      const minWidth = !this.rzMinWidth ? 1 : this.rzMinWidth;
 
-      if (this._direction.n && (this._currPos.y + this._bounding.translateY) < 0) {
+      if (this._direction.n && (this._currPos.y + this._bounding.translateY < 0)) {
         this._currPos.y = -this._bounding.translateY;
         this._currSize.height = this._origSize.height + this._origPos.y + this._bounding.translateY;
       }
@@ -452,6 +467,28 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
       if (this._currSize.height > maxHeight) {
         this._currSize.height = maxHeight;
       }
+
+      /**
+       * Fix Issue: Additional check for aspect ratio
+       * https://github.com/xieziyu/angular2-draggable/issues/132
+       */
+      if (this._aspectRatio) {
+        if ((this._currSize.width / this._aspectRatio) > maxHeight) {
+          this._currSize.width = maxHeight * this._aspectRatio;
+
+          if (this._direction.w) {
+            this._currPos.x = this._origPos.x;
+          }
+        }
+
+        if ((this._currSize.height * this._aspectRatio) > maxWidth) {
+          this._currSize.height = maxWidth / this._aspectRatio;
+
+          if (this._direction.n) {
+            this._currPos.y = this._origPos.y;
+          }
+        }
+      }
     }
   }