react-native-gesture-handler 2.18.1 → 2.19.0

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;
 }