react-native-gesture-handler 2.20.2 → 2.21.0

package/src/findNodeHandle.ts

@@ -0,0 +1,3 @@
+import { findNodeHandle } from 'react-native';
+
+export default findNodeHandle;

package/src/findNodeHandle.web.ts

@@ -0,0 +1,35 @@
+import type { GestureHandlerRef, SVGRef } from './web/interfaces';
+import { isRNSVGElement } from './web/utils';
+
+export default function findNodeHandle(
+  viewRef: GestureHandlerRef | SVGRef | HTMLElement | SVGElement
+): HTMLElement | SVGElement | number {
+  // Old API assumes that child handler is HTMLElement.
+  // However, if we nest handlers, we will get ref to another handler.
+  // In that case, we want to recursively call findNodeHandle with new handler viewTag (which can also be ref to another handler).
+  if ((viewRef as GestureHandlerRef)?.viewTag !== undefined) {
+    return findNodeHandle((viewRef as GestureHandlerRef).viewTag);
+  }
+
+  if (viewRef instanceof Element) {
+    if (viewRef.style.display === 'contents') {
+      return findNodeHandle(viewRef.firstChild as HTMLElement);
+    }
+
+    return viewRef;
+  }
+
+  if (isRNSVGElement(viewRef)) {
+    return (viewRef as SVGRef).elementRef.current;
+  }
+
+  // In new API, we receive ref object which `current` field points to  wrapper `div` with `display: contents;`.
+  // We want to return the first descendant (in DFS order) that doesn't have this property.
+  let element = (viewRef as GestureHandlerRef)?.current;
+
+  while (element && element.style.display === 'contents') {
+    element = element.firstChild as HTMLElement;
+  }
+
+  return element;
+}

package/src/handlers/createHandler.tsx

@@ -16,7 +16,8 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
 } from './gestureHandlerCommon';
-import { filterConfig, findNodeHandle, scheduleFlushOperations } from './utils';
+import { filterConfig, scheduleFlushOperations } from './utils';
+import findNodeHandle from '../findNodeHandle';
 import { ValueOf } from '../typeUtils';
 import { deepEqual, isFabric, isJestEnv, tagMessage } from '../utils';
 import { ActionType } from '../ActionType';

package/src/handlers/gestures/GestureDetector/Wrap.web.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef } from 'react';
+import type { LegacyRef, PropsWithChildren } from 'react';
+import { tagMessage } from '../../../utils';
+
+export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
+  ({ children }, ref) => {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const child: any = React.Children.only(children);
+
+      const isRNSVGNode =
+        Object.getPrototypeOf(child?.type)?.name === 'WebShape';
+
+      if (isRNSVGNode) {
+        const clone = React.cloneElement(
+          child,
+          { ref },
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          child.props.children
+        );
+
+        return clone;
+      }
+
+      return (
+        <div
+          ref={ref as LegacyRef<HTMLDivElement>}
+          style={{ display: 'contents' }}>
+          {child}
+        </div>
+      );
+    } catch (e) {
+      throw new Error(
+        tagMessage(
+          `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
+        )
+      );
+    }
+  }
+);
+
+// On web we never take a path with Reanimated,
+// therefore we can simply export Wrap
+export const AnimatedWrap = Wrap;

package/src/handlers/gestures/GestureDetector/index.tsx

@@ -6,7 +6,8 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { Platform, findNodeHandle } from 'react-native';
+import { Platform } from 'react-native';
+import findNodeHandle from '../../../findNodeHandle';
 import { GestureType } from '../gesture';
 import { UserSelect, TouchAction } from '../../gestureHandlerCommon';
 import { ComposedGesture } from '../gestureComposition';

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

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import { findNodeHandle } from 'react-native';
 import { GestureType } from '../gesture';
 import { ComposedGesture } from '../gestureComposition';
 
@@ -13,6 +12,7 @@ import { updateHandlers } from './updateHandlers';
 import { needsToReattach } from './needsToReattach';
 import { dropHandlers } from './dropHandlers';
 import { useForceRender, validateDetectorChildren } from './utils';
+import findNodeHandle from '../../../findNodeHandle';
 
 // Returns a function that's responsible for updating the attached gestures
 // If the view has changed, it will reattach the handlers to the new view

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

@@ -3,7 +3,7 @@ import { getShadowNodeFromRef } from '../../../getShadowNodeFromRef';
 
 import { GestureDetectorState } from './types';
 import React, { useCallback } from 'react';
-import { findNodeHandle } from 'react-native';
+import findNodeHandle from '../../../findNodeHandle';
 
 declare const global: {
   isFormsStackingContext: (node: unknown) => boolean | null; // JSI function

package/src/web/handlers/GestureHandler.ts

@@ -74,6 +74,7 @@ export default abstract class GestureHandler implements IGestureHandler {
     manager.setOnPointerOutOfBounds(this.onPointerOutOfBounds.bind(this));
     manager.setOnPointerMoveOver(this.onPointerMoveOver.bind(this));
     manager.setOnPointerMoveOut(this.onPointerMoveOut.bind(this));
+    manager.setOnWheel(this.onWheel.bind(this));
 
     manager.registerListeners();
   }
@@ -338,7 +339,10 @@ export default abstract class GestureHandler implements IGestureHandler {
   protected onPointerMoveOut(_event: AdaptedEvent): void {
     // Used only by hover gesture handler atm
   }
-  private tryToSendMoveEvent(out: boolean, event: AdaptedEvent): void {
+  protected onWheel(_event: AdaptedEvent): void {
+    // Used only by pan gesture handler
+  }
+  protected tryToSendMoveEvent(out: boolean, event: AdaptedEvent): void {
     if ((out && this.shouldCancelWhenOutside) || !this.enabled) {
       return;
     }

package/src/web/handlers/PanGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config, StylusData } from '../interfaces';
+import { AdaptedEvent, Config, StylusData, WheelDevice } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -57,6 +57,10 @@ export default class PanGestureHandler extends GestureHandler {
   private activateAfterLongPress = 0;
   private activationTimeout = 0;
 
+  private enableTrackpadTwoFingerGesture = false;
+  private endWheelTimeout = 0;
+  private wheelDevice = WheelDevice.UNDETERMINED;
+
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
   }
@@ -161,6 +165,11 @@ export default class PanGestureHandler extends GestureHandler {
         this.failOffsetYStart = Number.MIN_SAFE_INTEGER;
       }
     }
+
+    if (this.config.enableTrackpadTwoFingerGesture !== undefined) {
+      this.enableTrackpadTwoFingerGesture =
+        this.config.enableTrackpadTwoFingerGesture;
+    }
   }
 
   protected resetConfig(): void {
@@ -351,6 +360,65 @@ export default class PanGestureHandler extends GestureHandler {
     }
   }
 
+  private scheduleWheelEnd(event: AdaptedEvent) {
+    clearTimeout(this.endWheelTimeout);
+
+    this.endWheelTimeout = setTimeout(() => {
+      if (this.currentState === State.ACTIVE) {
+        this.end();
+        this.tracker.removeFromTracker(event.pointerId);
+        this.currentState = State.UNDETERMINED;
+      }
+
+      this.wheelDevice = WheelDevice.UNDETERMINED;
+    }, 30);
+  }
+
+  protected onWheel(event: AdaptedEvent): void {
+    if (
+      this.wheelDevice === WheelDevice.MOUSE ||
+      !this.enableTrackpadTwoFingerGesture
+    ) {
+      return;
+    }
+
+    if (this.currentState === State.UNDETERMINED) {
+      this.wheelDevice =
+        event.wheelDeltaY! % 120 !== 0
+          ? WheelDevice.TOUCHPAD
+          : WheelDevice.MOUSE;
+
+      if (this.wheelDevice === WheelDevice.MOUSE) {
+        this.scheduleWheelEnd(event);
+        return;
+      }
+
+      this.tracker.addToTracker(event);
+
+      const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+      this.lastX = lastCoords.x;
+      this.lastY = lastCoords.y;
+
+      this.startX = this.lastX;
+      this.startY = this.lastY;
+
+      this.begin();
+      this.activate();
+    }
+    this.tracker.track(event);
+
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
+
+    const velocity = this.tracker.getVelocity(event.pointerId);
+    this.velocityX = velocity.x;
+    this.velocityY = velocity.y;
+
+    this.tryToSendMoveEvent(false, event);
+    this.scheduleWheelEnd(event);
+  }
+
   private shouldActivate(): boolean {
     const dx: number = this.getTranslationX();
 

package/src/web/interfaces.ts

@@ -78,6 +78,7 @@ export interface Config extends Record<string, ConfigArgs> {
   shouldActivateOnStart?: boolean;
   disallowInterruption?: boolean;
   direction?: Directions;
+  enableTrackpadTwoFingerGesture?: boolean;
 }
 
 type NativeEventArgs = number | State | boolean | undefined;
@@ -151,6 +152,7 @@ export interface AdaptedEvent {
   time: number;
   button?: MouseButton;
   stylusData?: StylusData;
+  wheelDeltaY?: number;
 }
 
 export enum EventTypes {
@@ -171,3 +173,18 @@ export enum TouchEventType {
   UP,
   CANCELLED,
 }
+
+export enum WheelDevice {
+  UNDETERMINED,
+  MOUSE,
+  TOUCHPAD,
+}
+
+export type GestureHandlerRef = {
+  viewTag: GestureHandlerRef;
+  current: HTMLElement;
+};
+
+export type SVGRef = {
+  elementRef: { current: SVGElement };
+};

package/src/web/tools/EventManager.ts

@@ -37,6 +37,7 @@ export default abstract class EventManager<T> {
   protected onPointerOutOfBounds(_event: AdaptedEvent): void {}
   protected onPointerMoveOver(_event: AdaptedEvent): void {}
   protected onPointerMoveOut(_event: AdaptedEvent): void {}
+  protected onWheel(_event: AdaptedEvent): void {}
 
   public setOnPointerDown(callback: PointerEventCallback): void {
     this.onPointerDown = callback;
@@ -71,6 +72,9 @@ export default abstract class EventManager<T> {
   public setOnPointerMoveOut(callback: PointerEventCallback): void {
     this.onPointerMoveOut = callback;
   }
+  public setOnWheel(callback: PointerEventCallback): void {
+    this.onWheel = callback;
+  }
 
   protected markAsInBounds(pointerId: number): void {
     if (this.pointersInBounds.indexOf(pointerId) >= 0) {

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -343,13 +343,7 @@ export default class GestureHandlerOrchestrator {
       );
     };
 
-    const handlerPointers: number[] = handler.getTrackedPointersID();
-    const otherPointers: number[] = otherHandler.getTrackedPointersID();
-
-    return (
-      handlerPointers.some(isPointerWithinBothBounds) ||
-      otherPointers.some(isPointerWithinBothBounds)
-    );
+    return handler.getTrackedPointersID().some(isPointerWithinBothBounds);
   }
 
   private isFinished(state: State): boolean {

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -1,4 +1,4 @@
-import { findNodeHandle } from 'react-native';
+import findNodeHandle from '../../findNodeHandle';
 import type IGestureHandler from '../handlers/IGestureHandler';
 import {
   GestureHandlerDelegate,
@@ -11,6 +11,7 @@ import EventManager from './EventManager';
 import { Config } from '../interfaces';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import KeyboardEventManager from './KeyboardEventManager';
+import WheelEventManager from './WheelEventManager';
 
 interface DefaultViewStyles {
   userSelect: string;
@@ -58,6 +59,7 @@ export class GestureHandlerWebDelegate
 
     this.eventManagers.push(new PointerEventManager(this.view));
     this.eventManagers.push(new KeyboardEventManager(this.view));
+    this.eventManagers.push(new WheelEventManager(this.view));
 
     this.eventManagers.forEach((manager) =>
       this.gestureHandler.attachEventManager(manager)

package/src/web/tools/KeyboardEventManager.ts

@@ -57,8 +57,8 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
   }
 
   public unregisterListeners(): void {
-    this.view.addEventListener('keydown', this.keyDownCallback);
-    this.view.addEventListener('keyup', this.keyUpCallback);
+    this.view.removeEventListener('keydown', this.keyDownCallback);
+    this.view.removeEventListener('keyup', this.keyUpCallback);
   }
 
   protected mapEvent(

package/src/web/tools/PointerTracker.ts

@@ -22,8 +22,8 @@ export default class PointerTracker {
 
   private lastMovedPointerId: number;
 
-  private cachedAbsoluteAverages: { x: number; y: number } = { x: 0, y: 0 };
-  private cachedRelativeAverages: { x: number; y: number } = { x: 0, y: 0 };
+  private cachedAbsoluteAverages: Point = { x: 0, y: 0 };
+  private cachedRelativeAverages: Point = { x: 0, y: 0 };
 
   public constructor() {
     this.lastMovedPointerId = NaN;
@@ -121,35 +121,13 @@ export default class PointerTracker {
   }
 
   public getLastAbsoluteCoords(pointerId?: number) {
-    if (pointerId !== undefined) {
-      return {
-        x: this.trackedPointers.get(pointerId)?.abosoluteCoords.x as number,
-        y: this.trackedPointers.get(pointerId)?.abosoluteCoords.y as number,
-      };
-    } else {
-      return {
-        x: this.trackedPointers.get(this.lastMovedPointerId)?.abosoluteCoords
-          .x as number,
-        y: this.trackedPointers.get(this.lastMovedPointerId)?.abosoluteCoords
-          .y as number,
-      };
-    }
+    return this.trackedPointers.get(pointerId ?? this.lastMovedPointerId)
+      ?.abosoluteCoords as Point;
   }
 
   public getLastRelativeCoords(pointerId?: number) {
-    if (pointerId !== undefined) {
-      return {
-        x: this.trackedPointers.get(pointerId)?.relativeCoords.x as number,
-        y: this.trackedPointers.get(pointerId)?.relativeCoords.y as number,
-      };
-    } else {
-      return {
-        x: this.trackedPointers.get(this.lastMovedPointerId)?.relativeCoords
-          .x as number,
-        y: this.trackedPointers.get(this.lastMovedPointerId)?.relativeCoords
-          .y as number,
-      };
-    }
+    return this.trackedPointers.get(pointerId ?? this.lastMovedPointerId)
+      ?.relativeCoords as Point;
   }
 
   // Some handlers use these methods to send average values in native event.

package/src/web/tools/WheelEventManager.ts

@@ -0,0 +1,48 @@
+import EventManager from './EventManager';
+import { AdaptedEvent, EventTypes } from '../interfaces';
+import { PointerType } from '../../PointerType';
+
+export default class WheelEventManager extends EventManager<HTMLElement> {
+  private wheelDelta = { x: 0, y: 0 };
+
+  private resetDelta = (_event: PointerEvent) => {
+    this.wheelDelta = { x: 0, y: 0 };
+  };
+
+  private wheelCallback = (event: WheelEvent) => {
+    this.wheelDelta.x += event.deltaX;
+    this.wheelDelta.y += event.deltaY;
+
+    const adaptedEvent = this.mapEvent(event);
+    this.onWheel(adaptedEvent);
+  };
+
+  public registerListeners(): void {
+    this.view.addEventListener('pointermove', this.resetDelta);
+    this.view.addEventListener('wheel', this.wheelCallback);
+  }
+
+  public unregisterListeners(): void {
+    this.view.removeEventListener('pointermove', this.resetDelta);
+    this.view.removeEventListener('wheel', this.wheelCallback);
+  }
+
+  protected mapEvent(event: WheelEvent): AdaptedEvent {
+    return {
+      x: event.clientX + this.wheelDelta.x,
+      y: event.clientY + this.wheelDelta.y,
+      offsetX: event.offsetX - event.deltaX,
+      offsetY: event.offsetY - event.deltaY,
+      pointerId: -1,
+      eventType: EventTypes.MOVE,
+      pointerType: PointerType.OTHER,
+      time: event.timeStamp,
+      // @ts-ignore It does exist, but it's deprecated
+      wheelDeltaY: event.wheelDeltaY,
+    };
+  }
+
+  public resetManager(): void {
+    super.resetManager();
+  }
+}

package/src/web/utils.ts

@@ -1,5 +1,10 @@
 import { PointerType } from '../PointerType';
-import type { Point, StylusData } from './interfaces';
+import type {
+  GestureHandlerRef,
+  Point,
+  StylusData,
+  SVGRef,
+} from './interfaces';
 
 export function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {
   const rect: DOMRect = view.getBoundingClientRect();
@@ -227,3 +232,44 @@ function spherical2tilt(altitudeAngle: number, azimuthAngle: number) {
 
   return { tiltX, tiltY };
 }
+
+const RNSVGElements = [
+  'Circle',
+  'ClipPath',
+  'Ellipse',
+  'ForeignObject',
+  'G',
+  'Image',
+  'Line',
+  'Marker',
+  'Mask',
+  'Path',
+  'Pattern',
+  'Polygon',
+  'Polyline',
+  'Rect',
+  'Svg',
+  'Symbol',
+  'TSpan',
+  'Text',
+  'TextPath',
+  'Use',
+];
+
+// This function helps us determine whether given node is SVGElement or not. In our implementation of
+// findNodeHandle, we can encounter such element in 2 forms - SVG tag or ref to SVG Element. Since Gesture Handler
+// does not depend on SVG, we use our simplified SVGRef type that has `elementRef` field. This is something that is present
+// in actual SVG ref object.
+//
+// In order to make sure that node passed into this function is in fact SVG element, first we check if its constructor name
+// corresponds to one of the possible SVG elements. Then we also check if `elementRef` field exists.
+// By doing both steps we decrease probability of detecting situations where, for example, user makes custom `Circle` and
+// we treat it as SVG.
+export function isRNSVGElement(viewRef: SVGRef | GestureHandlerRef) {
+  const componentClassName = Object.getPrototypeOf(viewRef).constructor.name;
+
+  return (
+    RNSVGElements.indexOf(componentClassName) >= 0 &&
+    Object.hasOwn(viewRef, 'elementRef')
+  );
+}