feat: add touch support for reorderable and resizable features (#181)

* feat: port touch events to newest version

* test(draggable): use MouseEvent constructor to simulate dragging

* style(draggable): run prettier

Author: ColinFrick

projects/swimlane/ngx-datatable/src/lib/components/header/header-cell.component.scss

@@ -49,6 +49,19 @@
     visibility: visible;
   }
 }
+:host {
+  @media (hover: none) {
+    touch-action: none;
+
+    .resize-handle {
+      visibility: visible;
+    }
+
+    .datatable-header-cell-label.draggable {
+      user-select: none;
+    }
+  }
+}
 
 .resize-handle--not-resizable {
   :host(:hover) {

projects/swimlane/ngx-datatable/src/lib/components/header/header-cell.component.ts

@@ -24,6 +24,7 @@ import {
 import { NgTemplateOutlet } from '@angular/common';
 import { InnerSortEvent, TableColumnInternal } from '../../types/internal.types';
 import { fromEvent, Subscription, takeUntil } from 'rxjs';
+import { getPositionFromEvent } from '../../utils/events';
 
 @Component({
   selector: 'datatable-header-cell',
@@ -55,7 +56,11 @@ import { fromEvent, Subscription, takeUntil } from 'rxjs';
       <span (click)="onSort()" [class]="sortClass"> </span>
     </div>
     @if (column.resizeable) {
-    <span class="resize-handle" (mousedown)="onMousedown($event)"></span>
+    <span
+      class="resize-handle"
+      (mousedown)="onMousedown($event)"
+      (touchstart)="onMousedown($event)"
+    ></span>
     }
   `,
   host: {
@@ -217,6 +222,9 @@ export class DataTableHeaderCellComponent implements OnInit, OnDestroy {
   @HostListener('contextmenu', ['$event'])
   onContextmenu($event: MouseEvent): void {
     this.columnContextmenu.emit({ event: $event, column: this.column });
+    if (this.column.draggable) {
+      $event.preventDefault();
+    }
   }
 
   @HostListener('keydown.enter')
@@ -281,17 +289,21 @@ export class DataTableHeaderCellComponent implements OnInit, OnDestroy {
     }
   }
 
-  protected onMousedown(event: MouseEvent): void {
+  protected onMousedown(event: MouseEvent | TouchEvent): void {
+    const isMouse = event instanceof MouseEvent;
     const initialWidth = this.element.clientWidth;
-    const mouseDownScreenX = event.screenX;
+    const { screenX } = getPositionFromEvent(event);
     event.stopPropagation();
 
-    const mouseup = fromEvent(document, 'mouseup');
+    const mouseup = fromEvent<MouseEvent | TouchEvent>(document, isMouse ? 'mouseup' : 'touchend');
     this.subscription = mouseup.subscribe(() => this.onMouseup());
 
-    const mouseMoveSub = fromEvent(document, 'mousemove')
+    const mouseMoveSub = fromEvent<MouseEvent | TouchEvent>(
+      document,
+      isMouse ? 'mousemove' : 'touchmove'
+    )
       .pipe(takeUntil(mouseup))
-      .subscribe((e: Event) => this.move(e, initialWidth, mouseDownScreenX));
+      .subscribe((e: MouseEvent | TouchEvent) => this.move(e, initialWidth, screenX));
 
     this.subscription.add(mouseMoveSub);
   }
@@ -303,8 +315,12 @@ export class DataTableHeaderCellComponent implements OnInit, OnDestroy {
     }
   }
 
-  private move(event: Event, initialWidth: number, mouseDownScreenX: number): void {
-    const movementX = (event as MouseEvent).screenX - mouseDownScreenX;
+  private move(
+    event: MouseEvent | TouchEvent,
+    initialWidth: number,
+    mouseDownScreenX: number
+  ): void {
+    const movementX = getPositionFromEvent(event).screenX - mouseDownScreenX;
     const newWidth = initialWidth + movementX;
     this.resizing.emit({ width: newWidth, column: this.column });
   }

projects/swimlane/ngx-datatable/src/lib/components/header/header.component.ts

@@ -133,7 +133,7 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges {
   @Input() reorderable: boolean;
   @Input() verticalScrollVisible = false;
 
-  dragEventTarget?: MouseEvent;
+  dragEventTarget?: MouseEvent | TouchEvent;
 
   @HostBinding('style.height')
   @Input()
@@ -212,7 +212,13 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges {
     this.destroyed = true;
   }
 
-  onLongPressStart({ event, model }: { event: MouseEvent; model: TableColumnInternal<unknown> }) {
+  onLongPressStart({
+    event,
+    model
+  }: {
+    event: MouseEvent | TouchEvent;
+    model: TableColumnInternal<unknown>;
+  }) {
     model.dragging = true;
     this.dragEventTarget = event;
   }

projects/swimlane/ngx-datatable/src/lib/directives/draggable.directive.spec.ts

@@ -44,10 +44,8 @@ describe('DraggableDirective', () => {
 
       beforeEach(() => {
         element.classList.add('draggable');
-        mouseDown = <MouseEvent>{
-          target: element,
-          preventDefault: () => {}
-        };
+        mouseDown = new MouseEvent('mousedown');
+        Object.defineProperty(mouseDown, 'target', { value: element });
       });
 
       // or else the document:mouseup event can fire again when resizing.

projects/swimlane/ngx-datatable/src/lib/directives/draggable.directive.ts

@@ -13,6 +13,7 @@ import {
 import { fromEvent, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DraggableDragEvent, TableColumnInternal } from '../types/internal.types';
+import { getPositionFromEvent } from '../utils/events';
 
 /**
  * Draggable Directive for Angular2
@@ -53,7 +54,7 @@ export class DraggableDirective implements OnDestroy, OnChanges {
     this._destroySubscription();
   }
 
-  onMouseup(event: MouseEvent): void {
+  onMouseup(event: MouseEvent | TouchEvent): void {
     if (!this.isDragging) {
       return;
     }
@@ -71,20 +72,27 @@ export class DraggableDirective implements OnDestroy, OnChanges {
     }
   }
 
-  onMousedown(event: MouseEvent): void {
+  onMousedown(event: MouseEvent | TouchEvent): void {
+    const isMouse = event instanceof MouseEvent;
     // we only want to drag the inner header text
     const isDragElm = (<HTMLElement>event.target).classList.contains('draggable');
 
     if (isDragElm && (this.dragX || this.dragY)) {
       event.preventDefault();
       this.isDragging = true;
 
-      const mouseDownPos = { x: event.clientX, y: event.clientY };
+      const mouseDownPos = getPositionFromEvent(event);
 
-      const mouseup = fromEvent<MouseEvent>(document, 'mouseup');
+      const mouseup = fromEvent<MouseEvent | TouchEvent>(
+        document,
+        isMouse ? 'mouseup' : 'touchend'
+      );
       this.subscription = mouseup.subscribe(ev => this.onMouseup(ev));
 
-      const mouseMoveSub = fromEvent<MouseEvent>(document, 'mousemove')
+      const mouseMoveSub = fromEvent<MouseEvent | TouchEvent>(
+        document,
+        isMouse ? 'mousemove' : 'touchmove'
+      )
         .pipe(takeUntil(mouseup))
         .subscribe(ev => this.move(ev, mouseDownPos));
 
@@ -98,13 +106,14 @@ export class DraggableDirective implements OnDestroy, OnChanges {
     }
   }
 
-  move(event: MouseEvent, mouseDownPos: { x: number; y: number }): void {
+  move(event: MouseEvent | TouchEvent, mouseDownPos: { clientX: number; clientY: number }): void {
     if (!this.isDragging) {
       return;
     }
 
-    const x = event.clientX - mouseDownPos.x;
-    const y = event.clientY - mouseDownPos.y;
+    const { clientX, clientY } = getPositionFromEvent(event);
+    const x = clientX - mouseDownPos.clientX;
+    const y = clientY - mouseDownPos.clientY;
 
     if (this.dragX) {
       this.element.style.left = `${x}px`;

projects/swimlane/ngx-datatable/src/lib/directives/long-press.directive.ts

@@ -2,47 +2,46 @@ import {
   booleanAttribute,
   Directive,
   EventEmitter,
-  HostBinding,
-  HostListener,
   Input,
   numberAttribute,
   OnDestroy,
-  Output
+  Output,
+  signal
 } from '@angular/core';
 import { fromEvent, Subscription } from 'rxjs';
 import { TableColumnInternal } from '../types/internal.types';
 
 @Directive({
-  selector: '[long-press]'
+  selector: '[long-press]',
+  host: {
+    '(touchstart)': 'onMouseDown($event)',
+    '(mousedown)': 'onMouseDown($event)',
+    '[class.press]': 'pressing()',
+    '[class.longpress]': 'isLongPressing()'
+  }
 })
 export class LongPressDirective implements OnDestroy {
   @Input({ transform: booleanAttribute }) pressEnabled = true;
   @Input() pressModel: TableColumnInternal;
   @Input({ transform: numberAttribute }) duration = 500;
 
-  @Output() longPressStart = new EventEmitter<{ event: MouseEvent; model: TableColumnInternal }>();
+  @Output() longPressStart = new EventEmitter<{
+    event: MouseEvent | TouchEvent;
+    model: TableColumnInternal;
+  }>();
   @Output() longPressEnd = new EventEmitter<{ model: TableColumnInternal }>();
 
-  pressing: boolean;
-  isLongPressing: boolean;
+  pressing = signal(false);
+  isLongPressing = signal(false);
   timeout: any;
 
   subscription: Subscription;
 
-  @HostBinding('class.press')
-  get press(): boolean {
-    return this.pressing;
-  }
-
-  @HostBinding('class.longpress')
-  get isLongPress(): boolean {
-    return this.isLongPressing;
-  }
+  onMouseDown(event: MouseEvent | TouchEvent): void {
+    const isMouse = event instanceof MouseEvent;
 
-  @HostListener('mousedown', ['$event'])
-  onMouseDown(event: MouseEvent): void {
     // don't do right/middle clicks
-    if (event.which !== 1 || !this.pressEnabled) {
+    if (!this.pressEnabled || (isMouse && event.button !== 0)) {
       return;
     }
 
@@ -52,14 +51,14 @@ export class LongPressDirective implements OnDestroy {
       return;
     }
 
-    this.pressing = true;
-    this.isLongPressing = false;
+    this.pressing.set(true);
+    this.isLongPressing.set(false);
 
-    const mouseup = fromEvent(document, 'mouseup');
+    const mouseup = fromEvent(document, isMouse ? 'mouseup' : 'touchend');
     this.subscription = mouseup.subscribe(() => this.endPress());
 
     this.timeout = setTimeout(() => {
-      this.isLongPressing = true;
+      this.isLongPressing.set(true);
       this.longPressStart.emit({
         event,
         model: this.pressModel
@@ -69,8 +68,8 @@ export class LongPressDirective implements OnDestroy {
 
   endPress(): void {
     clearTimeout(this.timeout);
-    this.isLongPressing = false;
-    this.pressing = false;
+    this.isLongPressing.set(false);
+    this.pressing.set(false);
     this._destroySubscription();
 
     this.longPressEnd.emit({

projects/swimlane/ngx-datatable/src/lib/directives/orderable.directive.ts

@@ -19,6 +19,7 @@ import {
   TableColumnInternal,
   TargetChangedEvent
 } from '../types/internal.types';
+import { getPositionFromEvent } from '../utils/events';
 
 interface OrderPosition {
   left: number;
@@ -140,11 +141,10 @@ export class OrderableDirective implements AfterContentInit, OnDestroy {
     element.style.left = 'auto';
   }
 
-  isTarget(model: TableColumnInternal, event: MouseEvent) {
+  isTarget(model: TableColumnInternal, event: MouseEvent | TouchEvent) {
     let i = 0;
-    const x = event.x || event.clientX;
-    const y = event.y || event.clientY;
-    const targets = this.document.elementsFromPoint(x, y);
+    const { clientX, clientY } = getPositionFromEvent(event);
+    const targets = this.document.elementsFromPoint(clientX, clientY);
 
     for (const id in this.positions) {
       // current column position which throws event.

projects/swimlane/ngx-datatable/src/lib/types/internal.types.ts

@@ -40,7 +40,7 @@ export interface Page {
 }
 
 export interface DraggableDragEvent {
-  event: MouseEvent;
+  event: MouseEvent | TouchEvent;
   element: HTMLElement;
   model: TableColumnInternal;
 }

projects/swimlane/ngx-datatable/src/lib/utils/events.ts

@@ -0,0 +1,14 @@
+/**
+ * Extracts the position (x, y coordinates) from a MouseEvent or TouchEvent.
+ *
+ * @param {MouseEvent | TouchEvent} event - The event object from which to extract the position. Can be either a MouseEvent or a TouchEvent.
+ * @return {{ x: number, y: number }} An object containing the x and y coordinates of the event relative to the viewport.
+ */
+export function getPositionFromEvent(event: MouseEvent | TouchEvent): {
+  clientX: number;
+  clientY: number;
+  screenX: number;
+  screenY: number;
+} {
+  return event instanceof MouseEvent ? (event as MouseEvent) : (event.changedTouches[0] as Touch);
+}