Add touch events support

projects/ngx-resizable/src/lib/resizable/drag.directive.ts

@@ -1,34 +1,60 @@
 import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
 
+export type Point = {x: number, y: number};
+
 @Directive({
   selector: '[rszDragHandle]'
 })
 export class DragDirective {
 
-  @Output() DragStart = new EventEmitter();
-  @Output() Drag = new EventEmitter();
-  @Output() DragEnd = new EventEmitter();
+  @Output() DragStart = new EventEmitter<Point>();
+  @Output() Drag = new EventEmitter<Point>();
+  @Output() DragEnd = new EventEmitter<Point>();
 
   private dragging = false;
 
   @HostListener('mousedown', ['$event'])
-  onMousedown(event) {
-    if (event.which === 1) {
+  onMousedown(e: MouseEvent) {
+    if (e.which === 1) {
       this.dragging = true;
-      this.DragStart.emit({ originalEvent: event });
+      this.DragStart.emit({ x: e.clientX, y: e.clientY });
     }
   }
+  @HostListener('touchstart', ['$event'])
+  onTouchstart(e: TouchEvent) {
+    const touch = e.touches[0];
+    this.dragging = true;
+    this.DragStart.emit({ x: touch.clientX, y: touch.clientY });
+  }
+
   @HostListener('document:mouseup', ['$event'])
-  onMouseup(event) {
+  onMouseup(e: MouseEvent) {
     if (this.dragging) {
-      this.DragEnd.emit({ originalEvent: event });
+      this.DragEnd.emit({ x: e.clientX, y: e.clientY });
     }
     this.dragging = false;
   }
+  @HostListener('document:touchend', ['$event'])
+  @HostListener('document:touchcancel', ['$event'])
+  onTouchend(e: TouchEvent) {
+    if (this.dragging) {
+      const touch = e.changedTouches[0];
+      this.DragEnd.emit({ x: touch.clientX, y: touch.clientY });
+    }
+    this.dragging = false;
+  }
+
   @HostListener('document:mousemove', ['$event'])
-  onMousemove(event: MouseEvent) {
+  onMousemove(e: MouseEvent) {
+    if (this.dragging) {
+      this.Drag.emit({ x: e.clientX, y: e.clientY });
+    }
+  }
+  @HostListener('document:touchmove', ['$event'])
+  onTouchmove(e: TouchEvent) {
     if (this.dragging) {
-      this.Drag.emit({ originalEvent: event });
+      const touch = e.touches[0];
+      this.Drag.emit({ x: touch.clientX, y: touch.clientY });
     }
   }
 }

projects/ngx-resizable/src/lib/resizable/resizable.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, HostBinding, Input, ElementRef, ViewEncapsulation, Output, EventEmitter, AfterViewInit } from '@angular/core';
 import { NgxResizeableWindowRef } from '../window.service';
+import { Point } from './drag.directive';
 
 @Component({
   selector: 'rsz-layout',
@@ -56,23 +57,21 @@ export class ResizableComponent implements OnInit, AfterViewInit {
     this.style = this.windowRef.nativeWindow.getComputedStyle(this.nativeElement);
   }
 
-  private updateInfo(e) {
+  private updateInfo(p: Point) {
     this.info['width'] = false; this.info['height'] = false;
     if (this.axis === 'x') {
       this.info['width'] = parseInt(this.nativeElement.style[this.rFlex ? this.flexBasis : 'width'], 10);
     } else {
       this.info['height'] = parseInt(this.nativeElement.style[this.rFlex ? this.flexBasis : 'height'], 10);
     }
     this.info['id'] = this.nativeElement.id;
-    this.info['evt'] = e;
+    this.info['point'] = p;
   }
 
-  public dragStart(e, direction) {
-    const mouseEvent = e.originalEvent;
-
+  public dragStart(p: Point, direction) {
     this.dragDir = direction;
     this.axis = (this.dragDir === 'left' || this.dragDir === 'right') ? 'x' : 'y';
-    this.start = (this.axis === 'x' ? mouseEvent.clientX : mouseEvent.clientY);
+    this.start = (this.axis === 'x' ? p.x : p.y);
     this.w = parseInt(this.style.getPropertyValue('width'), 10);
     this.h = parseInt(this.style.getPropertyValue('height'), 10);
 
@@ -82,17 +81,14 @@ export class ResizableComponent implements OnInit, AfterViewInit {
     this.noTransition = true;
   }
 
-  public dragEnd(e) {
-    const mouseEvent = e.originalEvent;
-
-    this.updateInfo(mouseEvent);
+  public dragEnd(p: Point) {
+    this.updateInfo(p);
     this.resizeEnd.emit({ info: this.info });
     this.noTransition = false;
   }
 
-  public dragging(e) {
-    const mouseEvent = e.originalEvent;
-    const offset = (this.axis === 'x') ? this.start - mouseEvent.clientX : this.start - mouseEvent.clientY;
+  public dragging(p: Point) {
+    const offset = (this.axis === 'x') ? this.start - p.x : this.start - p.y;
 
     let operand = 1;
     switch (this.dragDir) {
@@ -119,7 +115,7 @@ export class ResizableComponent implements OnInit, AfterViewInit {
         }
         break;
     }
-    this.updateInfo(mouseEvent);
+    this.updateInfo(p);
     this.resizing.emit({ info: this.info });
   }
 }