react-native-gesture-handler 2.15.0 → 2.16.0

package/src/web/handlers/FlingGestureHandler.ts

@@ -1,25 +1,28 @@
 import { State } from '../../State';
-import { Direction } from '../constants';
+import { DiagonalDirections, Directions } from '../../Directions';
 import { AdaptedEvent, Config } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
+import Vector from '../tools/Vector';
+import { coneToDeviation } from '../utils';
 
 const DEFAULT_MAX_DURATION_MS = 800;
-const DEFAULT_MIN_ACCEPTABLE_DELTA = 32;
-const DEFAULT_DIRECTION = Direction.RIGHT;
+const DEFAULT_MIN_VELOCITY = 700;
+const DEFAULT_ALIGNMENT_CONE = 30;
+const DEFAULT_DIRECTION = Directions.RIGHT;
 const DEFAULT_NUMBER_OF_TOUCHES_REQUIRED = 1;
 
+const AXIAL_DEVIATION_COSINE = coneToDeviation(DEFAULT_ALIGNMENT_CONE);
+const DIAGONAL_DEVIATION_COSINE = coneToDeviation(90 - DEFAULT_ALIGNMENT_CONE);
+
 export default class FlingGestureHandler extends GestureHandler {
   private numberOfPointersRequired = DEFAULT_NUMBER_OF_TOUCHES_REQUIRED;
-  private direction = DEFAULT_DIRECTION;
+  private direction: Directions = DEFAULT_DIRECTION;
 
   private maxDurationMs = DEFAULT_MAX_DURATION_MS;
-  private minAcceptableDelta = DEFAULT_MIN_ACCEPTABLE_DELTA;
+  private minVelocity = DEFAULT_MIN_VELOCITY;
   private delayTimeout!: number;
 
-  private startX = 0;
-  private startY = 0;
-
   private maxNumberOfPointersSimultaneously = 0;
   private keyPointer = NaN;
 
@@ -40,9 +43,6 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   private startFling(): void {
-    this.startX = this.tracker.getLastX(this.keyPointer);
-    this.startY = this.tracker.getLastY(this.keyPointer);
-
     this.begin();
 
     this.maxNumberOfPointersSimultaneously = 1;
@@ -51,21 +51,43 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   private tryEndFling(): boolean {
+    const velocityVector = Vector.fromVelocity(this.tracker, this.keyPointer);
+
+    const getAlignment = (
+      direction: Directions | DiagonalDirections,
+      minimalAlignmentCosine: number
+    ) => {
+      return (
+        (direction & this.direction) === direction &&
+        velocityVector.isSimilar(
+          Vector.fromDirection(direction),
+          minimalAlignmentCosine
+        )
+      );
+    };
+
+    const axialDirectionsList = Object.values(Directions);
+    const diagonalDirectionsList = Object.values(DiagonalDirections);
+
+    // list of alignments to all activated directions
+    const axialAlignmentList = axialDirectionsList.map((direction) =>
+      getAlignment(direction, AXIAL_DEVIATION_COSINE)
+    );
+
+    const diagonalAlignmentList = diagonalDirectionsList.map((direction) =>
+      getAlignment(direction, DIAGONAL_DEVIATION_COSINE)
+    );
+
+    const isAligned =
+      axialAlignmentList.some(Boolean) || diagonalAlignmentList.some(Boolean);
+
+    const isFast = velocityVector.magnitude > this.minVelocity;
+
     if (
       this.maxNumberOfPointersSimultaneously ===
         this.numberOfPointersRequired &&
-      ((this.direction & Direction.RIGHT &&
-        this.tracker.getLastX(this.keyPointer) - this.startX >
-          this.minAcceptableDelta) ||
-        (this.direction & Direction.LEFT &&
-          this.startX - this.tracker.getLastX(this.keyPointer) >
-            this.minAcceptableDelta) ||
-        (this.direction & Direction.UP &&
-          this.startY - this.tracker.getLastY(this.keyPointer) >
-            this.minAcceptableDelta) ||
-        (this.direction & Direction.DOWN &&
-          this.tracker.getLastY(this.keyPointer) - this.startY >
-            this.minAcceptableDelta))
+      isAligned &&
+      isFast
     ) {
       clearTimeout(this.delayTimeout);
       this.activate();
@@ -120,7 +142,7 @@ export default class FlingGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerMove(event: AdaptedEvent): void {
+  private pointerMoveAction(event: AdaptedEvent): void {
     this.tracker.track(event);
 
     if (this.currentState !== State.BEGAN) {
@@ -128,10 +150,18 @@ export default class FlingGestureHandler extends GestureHandler {
     }
 
     this.tryEndFling();
+  }
 
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.pointerMoveAction(event);
     super.onPointerMove(event);
   }
 
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.pointerMoveAction(event);
+    super.onPointerOutOfBounds(event);
+  }
+
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.onUp(event);

package/src/web/handlers/GestureHandler.ts

@@ -7,18 +7,19 @@ import {
   ResultEvent,
   PointerData,
   ResultTouchEvent,
-  PointerType,
   TouchEventType,
   EventTypes,
-  MouseButton,
 } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import InteractionManager from '../tools/InteractionManager';
 import PointerTracker, { TrackerElement } from '../tools/PointerTracker';
 import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import IGestureHandler from './IGestureHandler';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import { PointerType } from '../../PointerType';
 
-export default abstract class GestureHandler {
+export default abstract class GestureHandler implements IGestureHandler {
   private lastSentState: State | null = null;
   protected currentState: State = State.UNDETERMINED;
 
@@ -38,11 +39,13 @@ export default abstract class GestureHandler {
   protected awaiting = false;
   protected active = false;
   protected shouldResetProgress = false;
-  protected pointerType: PointerType = PointerType.NONE;
+  protected pointerType: PointerType = PointerType.MOUSE;
 
-  protected delegate: GestureHandlerDelegate<unknown>;
+  protected delegate: GestureHandlerDelegate<unknown, IGestureHandler>;
 
-  public constructor(delegate: GestureHandlerDelegate<unknown>) {
+  public constructor(
+    delegate: GestureHandlerDelegate<unknown, IGestureHandler>
+  ) {
     this.delegate = delegate;
   }
 
@@ -71,7 +74,8 @@ export default abstract class GestureHandler {
     manager.setOnPointerOutOfBounds(this.onPointerOutOfBounds.bind(this));
     manager.setOnPointerMoveOver(this.onPointerMoveOver.bind(this));
     manager.setOnPointerMoveOut(this.onPointerMoveOut.bind(this));
-    manager.setListeners();
+
+    manager.registerListeners();
   }
 
   //
@@ -229,7 +233,7 @@ export default abstract class GestureHandler {
     this.activationIndex = value;
   }
 
-  public shouldWaitForHandlerFailure(handler: GestureHandler): boolean {
+  public shouldWaitForHandlerFailure(handler: IGestureHandler): boolean {
     if (handler === this) {
       return false;
     }
@@ -240,7 +244,7 @@ export default abstract class GestureHandler {
     );
   }
 
-  public shouldRequireToWaitForFailure(handler: GestureHandler): boolean {
+  public shouldRequireToWaitForFailure(handler: IGestureHandler): boolean {
     if (handler === this) {
       return false;
     }
@@ -251,7 +255,7 @@ export default abstract class GestureHandler {
     );
   }
 
-  public shouldRecognizeSimultaneously(handler: GestureHandler): boolean {
+  public shouldRecognizeSimultaneously(handler: IGestureHandler): boolean {
     if (handler === this) {
       return true;
     }
@@ -262,7 +266,7 @@ export default abstract class GestureHandler {
     );
   }
 
-  public shouldBeCancelledByOther(handler: GestureHandler): boolean {
+  public shouldBeCancelledByOther(handler: IGestureHandler): boolean {
     if (handler === this) {
       return false;
     }
@@ -421,6 +425,7 @@ export default abstract class GestureHandler {
         handlerTag: this.handlerTag,
         target: this.viewRef,
         oldState: newState !== oldState ? oldState : undefined,
+        pointerType: this.pointerType,
       },
       timeStamp: Date.now(),
     };
@@ -771,7 +776,7 @@ export default abstract class GestureHandler {
     return this.config;
   }
 
-  public getDelegate(): GestureHandlerDelegate<unknown> {
+  public getDelegate(): GestureHandlerDelegate<unknown, IGestureHandler> {
     return this.delegate;
   }
 

package/src/web/handlers/IGestureHandler.ts

@@ -0,0 +1,50 @@
+import type { PointerType } from '../../PointerType';
+import type { MouseButton } from '../../handlers/gestureHandlerCommon';
+import type { State } from '../../State';
+import type { Config } from '../interfaces';
+import type EventManager from '../tools/EventManager';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import type PointerTracker from '../tools/PointerTracker';
+
+export default interface IGestureHandler {
+  getTag: () => number;
+  getState: () => State;
+  getConfig: () => Config;
+  getDelegate: () => GestureHandlerDelegate<unknown, this>;
+
+  attachEventManager: (manager: EventManager<unknown>) => void;
+
+  isButtonInConfig: (
+    mouseButton: MouseButton | undefined
+  ) => boolean | number | undefined;
+  getPointerType: () => PointerType;
+
+  getTracker: () => PointerTracker;
+  getTrackedPointersID: () => number[];
+
+  begin: () => void;
+  activate: () => void;
+  end: () => void;
+  fail: () => void;
+  cancel: () => void;
+
+  reset: () => void;
+  isEnabled: () => boolean;
+  isActive: () => boolean;
+  setActive: (value: boolean) => void;
+  isAwaiting: () => boolean;
+  setAwaiting: (value: boolean) => void;
+  setActivationIndex: (value: number) => void;
+  setShouldResetProgress: (value: boolean) => void;
+
+  shouldWaitForHandlerFailure: (handler: IGestureHandler) => boolean;
+  shouldRequireToWaitForFailure: (handler: IGestureHandler) => boolean;
+  shouldRecognizeSimultaneously: (handler: IGestureHandler) => boolean;
+  shouldBeCancelledByOther: (handler: IGestureHandler) => boolean;
+
+  sendEvent: (newState: State, oldState: State) => void;
+
+  updateGestureConfig: (config: Config) => void;
+
+  isButton?: () => boolean;
+}

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -28,15 +28,10 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const view = this.delegate.getView() as HTMLElement;
 
     view.style['touchAction'] = 'auto';
-
     //@ts-ignore Turns on defualt touch behavior on Safari
     view.style['WebkitTouchCallout'] = 'auto';
 
-    if (view.hasAttribute('role')) {
-      this.buttonRole = true;
-    } else {
-      this.buttonRole = false;
-    }
+    this.buttonRole = view.getAttribute('role') === 'button';
   }
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
@@ -164,4 +159,8 @@ export default class NativeViewGestureHandler extends GestureHandler {
   public disallowsInterruption(): boolean {
     return this.disallowInterruption;
   }
+
+  public isButton(): boolean {
+    return this.buttonRole;
+  }
 }

package/src/web/interfaces.ts

@@ -1,6 +1,12 @@
-import { UserSelect, ActiveCursor } from '../handlers/gestureHandlerCommon';
+import {
+  UserSelect,
+  ActiveCursor,
+  MouseButton,
+  TouchAction,
+} from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
+import { PointerType } from '../PointerType';
 
 export interface HitSlop {
   left?: number;
@@ -22,6 +28,7 @@ type ConfigArgs =
   | boolean
   | HitSlop
   | UserSelect
+  | TouchAction
   | ActiveCursor
   | Directions
   | Handler[]
@@ -39,6 +46,7 @@ export interface Config extends Record<string, ConfigArgs> {
   activeCursor?: ActiveCursor;
   mouseButton?: MouseButton;
   enableContextMenu?: boolean;
+  touchAction?: TouchAction;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;
@@ -79,6 +87,12 @@ interface NativeEvent extends Record<string, NativeEventArgs> {
   handlerTag: number;
   target: number;
   oldState?: State;
+  pointerType: PointerType;
+}
+
+export interface Point {
+  x: number;
+  y: number;
 }
 
 export interface PointerData {
@@ -131,15 +145,6 @@ export interface AdaptedEvent {
   touchEventType?: TouchEventType;
 }
 
-export enum MouseButton {
-  LEFT = 1,
-  MIDDLE = 2,
-  RIGHT = 4,
-  BUTTON_4 = 8,
-  BUTTON_5 = 16,
-  ALL = 31,
-}
-
 export enum EventTypes {
   DOWN,
   ADDITIONAL_POINTER_DOWN,
@@ -158,10 +163,3 @@ export enum TouchEventType {
   UP,
   CANCELLED,
 }
-
-export enum PointerType {
-  NONE = 'none',
-  MOUSE = 'mouse',
-  TOUCH = 'touch',
-  PEN = 'pen',
-}

package/src/web/tools/EventManager.ts

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 
+type PointerEventCallback = (event: AdaptedEvent) => void;
+
 export default abstract class EventManager<T> {
   protected readonly view: T;
   protected pointersInBounds: number[] = [];
@@ -11,7 +13,9 @@ export default abstract class EventManager<T> {
     this.activePointersCounter = 0;
   }
 
-  public abstract setListeners(): void;
+  public abstract registerListeners(): void;
+  public abstract unregisterListeners(): void;
+
   protected abstract mapEvent(
     event: Event,
     eventType: EventTypes,
@@ -36,39 +40,37 @@ export default abstract class EventManager<T> {
   protected onPointerMoveOver(_event: AdaptedEvent): void {}
   protected onPointerMoveOut(_event: AdaptedEvent): void {}
 
-  public setOnPointerDown(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerDown(callback: PointerEventCallback): void {
     this.onPointerDown = callback;
   }
-  public setOnPointerAdd(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerAdd(callback: PointerEventCallback): void {
     this.onPointerAdd = callback;
   }
-  public setOnPointerUp(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerUp(callback: PointerEventCallback): void {
     this.onPointerUp = callback;
   }
-  public setOnPointerRemove(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerRemove(callback: PointerEventCallback): void {
     this.onPointerRemove = callback;
   }
-  public setOnPointerMove(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerMove(callback: PointerEventCallback): void {
     this.onPointerMove = callback;
   }
-  public setOnPointerLeave(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerLeave(callback: PointerEventCallback): void {
     this.onPointerLeave = callback;
   }
-  public setOnPointerEnter(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerEnter(callback: PointerEventCallback): void {
     this.onPointerEnter = callback;
   }
-  public setOnPointerCancel(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerCancel(callback: PointerEventCallback): void {
     this.onPointerCancel = callback;
   }
-  public setOnPointerOutOfBounds(
-    callback: (event: AdaptedEvent) => void
-  ): void {
+  public setOnPointerOutOfBounds(callback: PointerEventCallback): void {
     this.onPointerOutOfBounds = callback;
   }
-  public setOnPointerMoveOver(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerMoveOver(callback: PointerEventCallback): void {
     this.onPointerMoveOver = callback;
   }
-  public setOnPointerMoveOut(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerMoveOut(callback: PointerEventCallback): void {
     this.onPointerMoveOut = callback;
   }
 

package/src/web/tools/GestureHandlerDelegate.ts

@@ -1,4 +1,3 @@
-import type GestureHandler from '../handlers/GestureHandler';
 import { Config } from '../interfaces';
 
 export interface MeasureResult {
@@ -8,10 +7,10 @@ export interface MeasureResult {
   height: number;
 }
 
-export interface GestureHandlerDelegate<T> {
-  getView(): T;
+export interface GestureHandlerDelegate<TComponent, THandler> {
+  getView(): TComponent;
 
-  init(viewRef: number, handler: GestureHandler): void;
+  init(viewRef: number, handler: THandler): void;
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean;
   measureView(): MeasureResult;
   reset(): void;