react-native-gesture-handler 2.18.0 → 2.19.0

package/src/handlers/gestures/GestureDetector/utils.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-import { tagMessage } from '../../../utils';
+import { isJestEnv, tagMessage } from '../../../utils';
 import { GestureRef, BaseGesture, GestureType } from '../gesture';
 
 import { flingGestureHandlerProps } from '../../FlingGestureHandler';
@@ -100,7 +100,7 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   const areAllNotWorklets = !areSomeWorklets && areSomeNotWorklets;
   // If none of the callbacks are worklets and the gesture is not explicitly marked with
   // `.runOnJS(true)` show a warning
-  if (areAllNotWorklets) {
+  if (areAllNotWorklets && !isJestEnv()) {
     console.warn(
       tagMessage(
         `None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread.`

package/src/handlers/gestures/longPressGesture.ts

@@ -31,6 +31,15 @@ export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPa
     this.config.maxDist = distance;
     return this;
   }
+
+  /**
+   * Determine exact number of points required to handle the long press gesture.
+   * @param pointers
+   */
+  numberOfPointers(pointers: number) {
+    this.config.numberOfPointers = pointers;
+    return this;
+  }
 }
 
 export type LongPressGestureType = InstanceType<typeof LongPressGesture>;

package/src/{mocks.ts → mocks.tsx}

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   TouchableHighlight,
   TouchableNativeFeedback,
@@ -30,9 +31,13 @@ const LongPressGestureHandler = View;
 const PinchGestureHandler = View;
 const RotationGestureHandler = View;
 const FlingGestureHandler = View;
-const RawButton = TouchableNativeFeedback;
-const BaseButton = TouchableNativeFeedback;
-const RectButton = TouchableNativeFeedback;
+const RawButton = ({ enabled, ...rest }: any) => (
+  <TouchableNativeFeedback disabled={!enabled} {...rest}>
+    <View />
+  </TouchableNativeFeedback>
+);
+const BaseButton = RawButton;
+const RectButton = RawButton;
 const BorderlessButton = TouchableNativeFeedback;
 
 export default {

package/src/utils.ts

@@ -98,3 +98,5 @@ export function deepEqual(obj1: any, obj2: any) {
 
   return true;
 }
+
+export const INT32_MAX = 2 ** 31 - 1;

package/src/web/constants.ts

@@ -1,2 +1,2 @@
 export const DEFAULT_TOUCH_SLOP = 15;
-export const MINIMAL_FLING_VELOCITY = 0.1;
+export const MINIMAL_RECOGNIZABLE_MAGNITUDE = 0.1;

package/src/web/handlers/GestureHandler.ts

@@ -14,10 +14,10 @@ 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';
+import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 
 export default abstract class GestureHandler implements IGestureHandler {
   private lastSentState: State | null = null;
@@ -589,6 +589,8 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.config = { enabled: enabled, ...props };
     this.enabled = enabled;
 
+    this.delegate.onEnabledChange(enabled);
+
     if (this.config.shouldCancelWhenOutside !== undefined) {
       this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
     }

package/src/web/handlers/LongPressGestureHandler.ts

@@ -12,6 +12,7 @@ export default class LongPressGestureHandler extends GestureHandler {
   private defaultMaxDistSq = DEFAULT_MAX_DIST_DP * SCALING_FACTOR;
 
   private maxDistSq = this.defaultMaxDistSq;
+  private numberOfPointers = 1;
   private startX = 0;
   private startY = 0;
 
@@ -45,6 +46,10 @@ export default class LongPressGestureHandler extends GestureHandler {
     if (this.config.maxDist !== undefined) {
       this.maxDistSq = this.config.maxDist * this.config.maxDist;
     }
+
+    if (this.config.numberOfPointers !== undefined) {
+      this.numberOfPointers = this.config.numberOfPointers;
+    }
   }
 
   protected resetConfig(): void {
@@ -64,17 +69,36 @@ export default class LongPressGestureHandler extends GestureHandler {
 
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
-    this.tryBegin(event);
+
+    this.startX = event.x;
+    this.startY = event.y;
+
+    this.tryBegin();
     this.tryActivate();
-    this.checkDistanceFail(event);
 
     this.tryToSendTouchEvent(event);
   }
+  protected onPointerAdd(event: AdaptedEvent): void {
+    super.onPointerAdd(event);
+    this.tracker.addToTracker(event);
+
+    if (this.tracker.getTrackedPointersCount() > this.numberOfPointers) {
+      this.fail();
+      return;
+    }
+
+    const absoluteCoordsAverage = this.tracker.getAbsoluteCoordsAverage();
+
+    this.startX = absoluteCoordsAverage.x;
+    this.startY = absoluteCoordsAverage.y;
+
+    this.tryActivate();
+  }
 
   protected onPointerMove(event: AdaptedEvent): void {
     super.onPointerMove(event);
     this.tracker.track(event);
-    this.checkDistanceFail(event);
+    this.checkDistanceFail();
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
@@ -88,7 +112,19 @@ export default class LongPressGestureHandler extends GestureHandler {
     }
   }
 
-  private tryBegin(event: AdaptedEvent): void {
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+
+    if (
+      this.tracker.getTrackedPointersCount() < this.numberOfPointers &&
+      this.getState() !== State.ACTIVE
+    ) {
+      this.fail();
+    }
+  }
+
+  private tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;
     }
@@ -97,12 +133,13 @@ export default class LongPressGestureHandler extends GestureHandler {
     this.startTime = this.previousTime;
 
     this.begin();
-
-    this.startX = event.x;
-    this.startY = event.y;
   }
 
   private tryActivate(): void {
+    if (this.tracker.getTrackedPointersCount() !== this.numberOfPointers) {
+      return;
+    }
+
     if (this.minDurationMs > 0) {
       this.activationTimeout = setTimeout(() => {
         this.activate();
@@ -112,9 +149,11 @@ export default class LongPressGestureHandler extends GestureHandler {
     }
   }
 
-  private checkDistanceFail(event: AdaptedEvent): void {
-    const dx = event.x - this.startX;
-    const dy = event.y - this.startY;
+  private checkDistanceFail(): void {
+    const absoluteCoordsAverage = this.tracker.getAbsoluteCoordsAverage();
+
+    const dx = absoluteCoordsAverage.x - this.startX;
+    const dy = absoluteCoordsAverage.y - this.startY;
     const distSq = dx * dx + dy * dy;
 
     if (distSq <= this.maxDistSq) {

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -27,10 +27,7 @@ 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';
-
+    this.restoreViewStyles(view);
     this.buttonRole = view.getAttribute('role') === 'button';
   }
 
@@ -43,6 +40,19 @@ export default class NativeViewGestureHandler extends GestureHandler {
     if (this.config.disallowInterruption !== undefined) {
       this.disallowInterruption = this.config.disallowInterruption;
     }
+
+    const view = this.delegate.getView() as HTMLElement;
+    this.restoreViewStyles(view);
+  }
+
+  private restoreViewStyles(view: HTMLElement) {
+    if (!view) {
+      return;
+    }
+
+    view.style['touchAction'] = 'auto';
+    // @ts-ignore Turns on defualt touch behavior on Safari
+    view.style['WebkitTouchCallout'] = 'auto';
   }
 
   protected resetConfig(): void {

package/src/web/handlers/PanGestureHandler.ts

@@ -268,6 +268,10 @@ export default class PanGestureHandler extends GestureHandler {
 
     this.tracker.removeFromTracker(event.pointerId);
 
+    if (this.tracker.getTrackedPointersCount() === 0) {
+      this.clearActivationTimeout();
+    }
+
     if (this.currentState === State.ACTIVE) {
       this.end();
     } else {

package/src/web/interfaces.ts

@@ -36,7 +36,7 @@ type ConfigArgs =
   | undefined;
 
 export interface Config extends Record<string, ConfigArgs> {
-  enabled?: boolean;
+  enabled: boolean;
   simultaneousHandlers?: Handler[] | null;
   waitFor?: Handler[] | null;
   blocksHandlers?: Handler[] | null;

package/src/web/tools/GestureHandlerDelegate.ts

@@ -20,6 +20,7 @@ export interface GestureHandlerDelegate<TComponent, THandler> {
   onEnd(): void;
   onCancel(): void;
   onFail(): void;
+  onEnabledChange(enabled: boolean): void;
 
   destroy(config: Config): void;
 }

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -11,13 +11,24 @@ import { isPointerInBounds } from '../utils';
 import EventManager from './EventManager';
 import { Config } from '../interfaces';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import KeyboardEventManager from './KeyboardEventManager';
+
+interface DefaultViewStyles {
+  userSelect: string;
+  touchAction: string;
+}
 
 export class GestureHandlerWebDelegate
   implements GestureHandlerDelegate<HTMLElement, IGestureHandler>
 {
+  private isInitialized = false;
   private view!: HTMLElement;
   private gestureHandler!: IGestureHandler;
   private eventManagers: EventManager<unknown>[] = [];
+  private defaultViewStyles: DefaultViewStyles = {
+    userSelect: '',
+    touchAction: '',
+  };
 
   getView(): HTMLElement {
     return this.view;
@@ -30,22 +41,25 @@ export class GestureHandlerWebDelegate
       );
     }
 
+    this.isInitialized = true;
+
     this.gestureHandler = handler;
     this.view = findNodeHandle(viewRef) as unknown as HTMLElement;
 
-    const config = handler.getConfig();
+    this.defaultViewStyles = {
+      userSelect: this.view.style.userSelect,
+      touchAction: this.view.style.touchAction,
+    };
 
-    this.addContextMenuListeners(config);
+    const config = handler.getConfig();
 
-    this.view.style['userSelect'] = config.userSelect ?? 'none';
-    this.view.style['webkitUserSelect'] = config.userSelect ?? 'none';
-
-    this.view.style['touchAction'] = config.touchAction ?? 'none';
-    // @ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = 'none';
+    this.setUserSelect(config.enabled);
+    this.setTouchAction(config.enabled);
+    this.setContextMenu(config.enabled);
 
     this.eventManagers.push(new PointerEventManager(this.view));
     this.eventManagers.push(new TouchEventManager(this.view));
+    this.eventManagers.push(new KeyboardEventManager(this.view));
 
     this.eventManagers.forEach((manager) =>
       this.gestureHandler.attachEventManager(manager)
@@ -117,6 +131,51 @@ export class GestureHandlerWebDelegate
     e.stopPropagation();
   }
 
+  private setUserSelect(isHandlerEnabled: boolean) {
+    const { userSelect } = this.gestureHandler.getConfig();
+
+    this.view.style['userSelect'] = isHandlerEnabled
+      ? userSelect ?? 'none'
+      : this.defaultViewStyles.userSelect;
+
+    this.view.style['webkitUserSelect'] = isHandlerEnabled
+      ? userSelect ?? 'none'
+      : this.defaultViewStyles.userSelect;
+  }
+
+  private setTouchAction(isHandlerEnabled: boolean) {
+    const { touchAction } = this.gestureHandler.getConfig();
+
+    this.view.style['touchAction'] = isHandlerEnabled
+      ? touchAction ?? 'none'
+      : this.defaultViewStyles.touchAction;
+
+    // @ts-ignore This one disables default events on Safari
+    this.view.style['WebkitTouchCallout'] = isHandlerEnabled
+      ? touchAction ?? 'none'
+      : this.defaultViewStyles.touchAction;
+  }
+
+  private setContextMenu(isHandlerEnabled: boolean) {
+    const config = this.gestureHandler.getConfig();
+
+    if (isHandlerEnabled) {
+      this.addContextMenuListeners(config);
+    } else {
+      this.removeContextMenuListeners(config);
+    }
+  }
+
+  onEnabledChange(enabled: boolean): void {
+    if (!this.isInitialized) {
+      return;
+    }
+
+    this.setUserSelect(enabled);
+    this.setTouchAction(enabled);
+    this.setContextMenu(enabled);
+  }
+
   onBegin(): void {
     // no-op for now
   }

package/src/web/tools/KeyboardEventManager.ts

@@ -0,0 +1,91 @@
+import { AdaptedEvent, EventTypes } from '../interfaces';
+import EventManager from './EventManager';
+import { PointerType } from '../../PointerType';
+
+export default class KeyboardEventManager extends EventManager<HTMLElement> {
+  private activationKeys = ['Enter', ' '];
+  private cancelationKeys = ['Tab'];
+  private isPressed = false;
+
+  private keyDownCallback = (event: KeyboardEvent): void => {
+    if (this.cancelationKeys.indexOf(event.key) !== -1 && this.isPressed) {
+      this.dispatchEvent(event, EventTypes.CANCEL);
+      return;
+    }
+
+    if (this.activationKeys.indexOf(event.key) === -1) {
+      return;
+    }
+
+    this.dispatchEvent(event, EventTypes.DOWN);
+  };
+
+  private keyUpCallback = (event: KeyboardEvent): void => {
+    if (this.activationKeys.indexOf(event.key) === -1 || !this.isPressed) {
+      return;
+    }
+
+    this.dispatchEvent(event, EventTypes.UP);
+  };
+
+  private dispatchEvent(event: KeyboardEvent, eventType: EventTypes) {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    const adaptedEvent = this.mapEvent(event, eventType);
+
+    switch (eventType) {
+      case EventTypes.UP:
+        this.isPressed = false;
+        this.onPointerUp(adaptedEvent);
+        break;
+      case EventTypes.DOWN:
+        this.isPressed = true;
+        this.onPointerDown(adaptedEvent);
+        break;
+      case EventTypes.CANCEL:
+        this.isPressed = false;
+        this.onPointerCancel(adaptedEvent);
+        break;
+    }
+  }
+
+  public registerListeners(): void {
+    this.view.addEventListener('keydown', this.keyDownCallback);
+    this.view.addEventListener('keyup', this.keyUpCallback);
+  }
+
+  public unregisterListeners(): void {
+    this.view.addEventListener('keydown', this.keyDownCallback);
+    this.view.addEventListener('keyup', this.keyUpCallback);
+  }
+
+  protected mapEvent(
+    event: KeyboardEvent,
+    eventType: EventTypes
+  ): AdaptedEvent {
+    const viewRect = (event.target as HTMLElement).getBoundingClientRect();
+
+    const viewportPosition = {
+      x: viewRect?.x + viewRect?.width / 2,
+      y: viewRect?.y + viewRect?.height / 2,
+    };
+
+    const relativePosition = {
+      x: viewRect?.width / 2,
+      y: viewRect?.height / 2,
+    };
+
+    return {
+      x: viewportPosition.x,
+      y: viewportPosition.y,
+      offsetX: relativePosition.x,
+      offsetY: relativePosition.y,
+      pointerId: 0,
+      eventType: eventType,
+      pointerType: PointerType.KEY,
+      time: event.timeStamp,
+    };
+  }
+}

package/src/web/tools/Vector.ts

@@ -1,5 +1,5 @@
 import { DiagonalDirections, Directions } from '../../Directions';
-import { MINIMAL_FLING_VELOCITY } from '../constants';
+import { MINIMAL_RECOGNIZABLE_MAGNITUDE } from '../constants';
 import PointerTracker from './PointerTracker';
 
 export default class Vector {
@@ -14,14 +14,15 @@ export default class Vector {
     this.y = y;
 
     this._magnitude = Math.hypot(this.x, this.y);
-    const isMagnitudeSufficient = this._magnitude > MINIMAL_FLING_VELOCITY;
+    const isMagnitudeSufficient =
+      this._magnitude > MINIMAL_RECOGNIZABLE_MAGNITUDE;
 
     this.unitX = isMagnitudeSufficient ? this.x / this._magnitude : 0;
     this.unitY = isMagnitudeSufficient ? this.y / this._magnitude : 0;
   }
 
   static fromDirection(direction: Directions | DiagonalDirections): Vector {
-    return DirectionToVectorMappings.get(direction)!;
+    return DirectionToVectorMappings.get(direction) ?? new Vector(0, 0);
   }
 
   static fromVelocity(tracker: PointerTracker, pointerId: number) {

package/src/web/utils.ts

@@ -27,28 +27,30 @@ export function calculateViewScale(view: HTMLElement) {
     scaleY: 1,
   };
 
-  const scales = styles.scale.split(' ');
+  // Get scales from scale property
+  if (styles.scale !== undefined && styles.scale !== 'none') {
+    const scales = styles.scale.split(' ');
 
-  if (scales[0] !== 'none') {
-    resultScales.scaleX = parseFloat(scales[0]);
-  }
+    if (scales[0]) {
+      resultScales.scaleX = parseFloat(scales[0]);
+    }
 
-  if (scales[1]) {
-    resultScales.scaleY = parseFloat(scales[1]);
+    resultScales.scaleY = scales[1]
+      ? parseFloat(scales[1])
+      : parseFloat(scales[0]);
   }
 
+  // Get scales from transform property
   const matrixElements = new RegExp(/matrix\((.+)\)/).exec(
     styles.transform
   )?.[1];
 
-  if (!matrixElements) {
-    return resultScales;
-  }
-
-  const matrixElementsArray = matrixElements.split(', ');
+  if (matrixElements) {
+    const matrixElementsArray = matrixElements.split(', ');
 
-  resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
-  resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
+    resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
+    resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
+  }
 
   return resultScales;
 }