feat(core-js): refine swipe event handling and update SwipeEvent type

Updated the SwipeEvent type in swiperia-core to include 'cancel' as a possible event type. Enhanced the swipe detection logic in swiperia-js for both MouseSwipeDetector and TouchSwipeDetector, ensuring that events are properly bound and unbound during the swipe lifecycle. Added cancellation handling to provide more robust feedback for incomplete or invalid swipes.

packages/swiperia-core/src/lib/event/SwipeEvent.type.ts

@@ -8,5 +8,5 @@ export interface SwipeEvent extends MovementEvent {
   /**
    * type of the event
    */
-  type: 'start' | 'move' | 'end';
+  type: 'start' | 'move' | 'end' | 'cancel';
 }

packages/swiperia-js/src/lib/AbstractSwipeDetector.ts

@@ -22,9 +22,13 @@ export abstract class AbstractSwipeDetector {
         ...config,
       };
     }
+    this._start = this._start.bind(this);
+    this._move = this._move.bind(this);
+    this._end = this._end.bind(this);
   }
 
   abstract point(e: UIEvent): Point;
+
   protected _start(e: UIEvent) {
     const _source = this.point(e);
     this._source = _source;
@@ -65,12 +69,19 @@ export abstract class AbstractSwipeDetector {
     const threshold = this._config?.threshold || 10;
     const constraint =
       _duration <= allowedTime && _movement.distance >= threshold;
-    if (!constraint) return;
-    this._callback({
-      event: e,
-      type: 'end',
-      ..._movement,
-    });
+    if (constraint) {
+      this._callback({
+        event: e,
+        type: 'end',
+        ..._movement,
+      });
+    } else {
+      this._callback({
+        event: e,
+        type: 'cancel',
+        ..._movement,
+      });
+    }
   }
 
   abstract listen(callback: SwipeCallback): void;

packages/swiperia-js/src/lib/MouseSwipeDetector.ts

@@ -10,16 +10,26 @@ export class MouseSwipeDetector extends AbstractSwipeDetector {
     return [e.pageX, e.pageY];
   }
 
+  protected override _start(e: UIEvent): void {
+    super._start(e);
+    window.addEventListener('mousemove', this._move, false);
+    window.addEventListener('mouseup', this._end, false);
+  }
+
+  protected override _end(e: UIEvent): void {
+      super._end(e);
+      window.removeEventListener('mousemove', this._move, false);
+      window.removeEventListener('mouseup', this._end, false);
+  }
+
   listen(callback: SwipeCallback): void {
     this._callback = callback;
     this.el.addEventListener('mousedown', this._start, false);
-    this.el.addEventListener('mousemove', this._move, false);
-    this.el.addEventListener('mouseup', this._end, false);
   }
 
   destroy(): void {
     this.el.removeEventListener('mousedown', this._start, false);
-    this.el.removeEventListener('mousemove', this._move, false);
-    this.el.removeEventListener('mouseup', this._end, false);
+    window.removeEventListener('mousemove', this._move, false);
+    window.removeEventListener('mouseup', this._end, false);
   }
 }

packages/swiperia-js/src/lib/TouchSwipeDetector.ts

@@ -7,20 +7,30 @@ export class TouchSwipeDetector extends AbstractSwipeDetector {
   }
 
   point(e: TouchEvent): Point {
-    const touch = e.touches[0];
+    const touch = e.changedTouches[0];
     return [touch.pageX, touch.pageY];
   }
 
+  protected override _start(e: UIEvent): void {
+    super._start(e);
+    window.addEventListener('touchmove', this._move, false);
+    window.addEventListener('touchend', this._end, false);
+  }
+
+  protected override _end(e: UIEvent): void {
+    super._end(e);
+    window.removeEventListener('touchmove', this._move, false);
+    window.removeEventListener('touchend', this._end, false);
+  }
+
   listen(callback: SwipeCallback): void {
     this._callback = callback;
     this.el.addEventListener('touchstart', this._start, false);
-    this.el.addEventListener('touchmove', this._move, false);
-    this.el.addEventListener('touchend', this._end, false);
   }
 
   destroy(): void {
     this.el.removeEventListener('touchstart', this._start, false);
-    this.el.removeEventListener('touchmove', this._move, false);
-    this.el.removeEventListener('touchend', this._end, false);
+    window.removeEventListener('touchmove', this._move, false);
+    window.removeEventListener('touchend', this._end, false);
   }
 }