Merge pull request #124 from xieziyu/dev

Release v2.1.9

Author: Xie, Ziyu

README.md

@@ -27,6 +27,9 @@ angular2-draggable has angular directives that make the DOM element draggable an
     + provided since v2.0, requires Angular >= 6
 
 # Latest Update
++ 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))
+
 + 2018.11.11: 2.1.8
   + **ngResizable**: add [preventDefaultEvent] flag to ngResizable mousedown ([by mecp](https://github.com/mecp) - [PR #119](https://github.com/xieziyu/angular2-draggable/pull/119))
 

projects/angular2-draggable/package.json

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

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

@@ -28,6 +28,11 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
    */
   private _helperBlock: HelperBlock = null;
 
+  /**
+   * Flag to indicate whether the element is dragged once after being initialised
+   */
+  private isDragged = false;
+
   @Output() started = new EventEmitter<any>();
   @Output() stopped = new EventEmitter<any>();
   @Output() edge = new EventEmitter<any>();
@@ -102,7 +107,6 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
       let element = this.handle ? this.handle : this.el.nativeElement;
       this.renderer.addClass(element, 'ng-draggable');
     }
-
     this.resetPosition();
   }
 
@@ -133,6 +137,11 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
         this.needTransform = true;
       }
     }
+
+    if (changes['scale'] && !changes['scale'].isFirstChange()) {
+      this.oldTrans.x = this.currTrans.x * this.scale;
+      this.oldTrans.y = this.currTrans.y * this.scale;
+    }
   }
 
   ngAfterViewInit() {
@@ -178,12 +187,23 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
       translateY = Math.round(translateY / this.gridSize) * this.gridSize;
     }
 
-    let value = `translate(${translateX}px, ${translateY}px)`;
+    // done to prevent the element from bouncing off when
+    // the parent element is scaled and element is dragged for first time
+    if (this.tempTrans.x !== 0 || this.tempTrans.y !== 0) {
+      if (this.isDragged === false) {
+        this.oldTrans.x = this.currTrans.x * this.scale;
+        this.oldTrans.y = this.currTrans.y * this.scale;
+      }
+      this.isDragged = true;
+    }
 
-    if (this.scale !== 1) {
-      value += ` scale(${this.scale})`;
+    if (this.scale && this.scale !== 0 && this.isDragged) {
+      translateX = translateX / this.scale;
+      translateY = translateY / this.scale;
     }
 
+    let value = `translate(${translateX}px, ${translateY}px)`;
+
     this.renderer.setStyle(this.el.nativeElement, 'transform', value);
     this.renderer.setStyle(this.el.nativeElement, '-webkit-transform', value);
     this.renderer.setStyle(this.el.nativeElement, '-ms-transform', value);

projects/angular2-draggable/src/lib/models/position.ts

@@ -36,7 +36,7 @@ export class Position implements IPosition {
     }
   }
 
-  static copy(p: Position) {
+  static copy(p: IPosition) {
     return new Position(0, 0).set(p);
   }
 

src/assets/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.1.9 (2018-11-29)
+
+#### Bugfix
++ **ngDraggable**: [#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))
+
+---
+
 ## 2.1.8 (2018-11-11)
 
 #### New
@@ -8,7 +15,7 @@
 ## 2.1.7 (2018-10-31)
 
 #### Bugfix
-+ **ngResizable**: ngResizable Locks Height When rzHandles Includes Only e, w. [#116](https://github.com/xieziyu/angular2-draggable/issues/116) (Thanks to [Yamazaki93](https://github.com/Yamazaki93))
++ **ngResizable**: [#116](https://github.com/xieziyu/angular2-draggable/issues/116) ngResizable Locks Height When rzHandles Includes Only e, w. (Thanks to [Yamazaki93](https://github.com/Yamazaki93))
 
 ---