Merge pull request #123 from rathodsanjay/bug/31-fix-issues-with-scale

Fix for the issues when parent element has a CSS scale transform applied to it

Author: Xie, Ziyu

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: boolean = 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,13 @@ export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges,
         this.needTransform = true;
       }
     }
+
+    if (changes['scale'] && !changes['scale'].isFirstChange()) {
+      let temp = this.currTrans.value;
+      temp.x = temp.x * this.scale;
+      temp.y = temp.y * this.scale;
+      this.oldTrans.set(new Position(temp.x, temp.y));
+    }
   }
 
   ngAfterViewInit() {
@@ -178,12 +189,25 @@ 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) {
+        let temp = this.currTrans.value;
+        temp.x = temp.x * this.scale;
+        temp.y = temp.y * this.scale;
+        this.oldTrans.set(new Position(temp.x, temp.y));
+      }
+      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);