fix: use correct touch event properties

Closes #39
mattlewis92 · Jan 30, 2017 · 0ab7d40 · 0ab7d40
1 parent 3f90d94
commit 0ab7d40
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -438,29 +438,29 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
   /**
    * @private
    */
-  @HostListener('document:touchend', ['$event.clientX', '$event.clientY'])
-  @HostListener('document:touchcancel', ['$event.clientX', '$event.clientY'])
-  @HostListener('document:mouseup', ['$event.clientX', '$event.clientY'])
-  onMouseup(mouseX: number, mouseY: number): void {
-    this.mouseup.next({mouseX, mouseY});
+  @HostListener('document:touchstart', ['$event.touches[0].clientX', '$event.touches[0].clientY'])
+  @HostListener('document:mousedown', ['$event.clientX', '$event.clientY'])
+  onMousedown(mouseX: number, mouseY: number): void {
+    this.mousedown.next({mouseX, mouseY});
   }
 
   /**
    * @private
    */
-  @HostListener('document:touchstart', ['$event.clientX', '$event.clientY'])
-  @HostListener('document:mousedown', ['$event.clientX', '$event.clientY'])
-  onMousedown(mouseX: number, mouseY: number): void {
-    this.mousedown.next({mouseX, mouseY});
+  @HostListener('document:touchmove', ['$event', '$event.targetTouches[0].clientX', '$event.targetTouches[0].clientY'])
+  @HostListener('document:mousemove', ['$event', '$event.clientX', '$event.clientY'])
+  onMousemove(event: MouseEvent, mouseX: number, mouseY: number): void {
+    this.mousemove.next({mouseX, mouseY, event});
   }
 
   /**
    * @private
    */
-  @HostListener('document:touchmove', ['$event'])
-  @HostListener('document:mousemove', ['$event'])
-  onMousemove(event: MouseEvent): void {
-    this.mousemove.next({mouseX: event.clientX, mouseY: event.clientY, event});
+  @HostListener('document:touchend', ['$event.changedTouches[0].clientX', '$event.changedTouches[0].clientY'])
+  @HostListener('document:touchcancel', ['$event.changedTouches[0].clientX', '$event.changedTouches[0].clientY'])
+  @HostListener('document:mouseup', ['$event.clientX', '$event.clientY'])
+  onMouseup(mouseX: number, mouseY: number): void {
+    this.mouseup.next({mouseX, mouseY});
   }
 
 }
diff --git a/src/resizeHandle.directive.ts b/src/resizeHandle.directive.ts
@@ -30,29 +30,29 @@ export class ResizeHandle {
   /**
    * @private
    */
-  @HostListener('touchend', ['$event.clientX', '$event.clientY'])
-  @HostListener('touchcancel', ['$event.clientX', '$event.clientY'])
-  @HostListener('mouseup', ['$event.clientX', '$event.clientY'])
-  onMouseup(mouseX: number, mouseY: number): void {
-    this.resizable.mouseup.next({mouseX, mouseY, edges: this.resizeEdges});
+  @HostListener('touchstart', ['$event.touches[0].clientX', '$event.touches[0].clientY'])
+  @HostListener('mousedown', ['$event.clientX', '$event.clientY'])
+  onMousedown(mouseX: number, mouseY: number): void {
+    this.resizable.mousedown.next({mouseX, mouseY, edges: this.resizeEdges});
   }
 
   /**
    * @private
    */
-  @HostListener('touchstart', ['$event.clientX', '$event.clientY'])
-  @HostListener('mousedown', ['$event.clientX', '$event.clientY'])
-  onMousedown(mouseX: number, mouseY: number): void {
-    this.resizable.mousedown.next({mouseX, mouseY, edges: this.resizeEdges});
+  @HostListener('touchmove', ['$event', '$event.targetTouches[0].clientX', '$event.targetTouches[0].clientY'])
+  @HostListener('mousemove', ['$event', '$event.clientX', '$event.clientY'])
+  onMousemove(event: MouseEvent, mouseX: number, mouseY: number): void {
+    this.resizable.mousemove.next({mouseX, mouseY, edges: this.resizeEdges, event});
   }
 
   /**
    * @private
    */
-  @HostListener('touchmove', ['$event'])
-  @HostListener('mousemove', ['$event'])
-  onMousemove(event: MouseEvent): void {
-    this.resizable.mousemove.next({mouseX: event.clientX, mouseY: event.clientY, edges: this.resizeEdges, event});
+  @HostListener('touchend', ['$event.changedTouches[0].clientX', '$event.changedTouches[0].clientY'])
+  @HostListener('touchcancel', ['$event.changedTouches[0].clientX', '$event.changedTouches[0].clientY'])
+  @HostListener('mouseup', ['$event.clientX', '$event.clientY'])
+  onMouseup(mouseX: number, mouseY: number): void {
+    this.resizable.mouseup.next({mouseX, mouseY, edges: this.resizeEdges});
   }
 
 }