diff --git a/projects/angular2-draggable/src/lib/angular-draggable.directive.ts b/projects/angular2-draggable/src/lib/angular-draggable.directive.ts index 94824a7..f90050f 100644 --- a/projects/angular2-draggable/src/lib/angular-draggable.directive.ts +++ b/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(); @Output() stopped = new EventEmitter(); @Output() edge = new EventEmitter(); @@ -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);