@amazon-devices/react-native-gesture-handler 2.0.1759135970 → 4.0.0

package/src/web/handlers/HoverGestureHandler.ts

@@ -1,31 +1,35 @@
-import { State } from '../../../src/State';
-import { AdaptedEvent, Config } from '../interfaces';
+import { State } from '../../State';
+import { AdaptedEvent, StylusData } from '../interfaces';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import GestureHandler from './GestureHandler';
 
 export default class HoverGestureHandler extends GestureHandler {
-  public init(ref: number, propsRef: React.RefObject<unknown>) {
-    super.init(ref, propsRef);
-  }
+  private stylusData: StylusData | undefined;
 
-  public updateGestureConfig({ enabled = true, ...props }: Config): void {
-    super.updateGestureConfig({ enabled: enabled, ...props });
+  protected transformNativeEvent(): Record<string, unknown> {
+    return {
+      ...super.transformNativeEvent(),
+      stylusData: this.stylusData,
+    };
   }
 
   protected onPointerMoveOver(event: AdaptedEvent): void {
-    GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
+    GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(this);
 
     this.tracker.addToTracker(event);
+    this.stylusData = event.stylusData;
     super.onPointerMoveOver(event);
 
-    if (this.getState() === State.UNDETERMINED) {
+    if (this.state === State.UNDETERMINED) {
       this.begin();
       this.activate();
     }
   }
 
   protected onPointerMoveOut(event: AdaptedEvent): void {
-    this.tracker.addToTracker(event);
+    this.tracker.removeFromTracker(event.pointerId);
+    this.stylusData = event.stylusData;
+
     super.onPointerMoveOut(event);
 
     this.end();
@@ -33,6 +37,8 @@ export default class HoverGestureHandler extends GestureHandler {
 
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
+
     super.onPointerMove(event);
   }
 

package/src/web/handlers/IGestureHandler.ts

@@ -0,0 +1,49 @@
+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 {
+  active: boolean;
+  activationIndex: number;
+  awaiting: boolean;
+  handlerTag: number;
+  readonly config: Config;
+  readonly delegate: GestureHandlerDelegate<unknown, this>;
+  readonly tracker: PointerTracker;
+  state: State;
+  shouldCancelWhenOutside: boolean;
+  shouldResetProgress: boolean;
+  enabled: boolean;
+  pointerType: PointerType;
+
+  attachEventManager: (manager: EventManager<unknown>) => void;
+
+  isButtonInConfig: (
+    mouseButton: MouseButton | undefined
+  ) => boolean | number | undefined;
+
+  getTrackedPointersID: () => number[];
+
+  begin: () => void;
+  activate: (force: boolean) => void;
+  end: () => void;
+  fail: () => void;
+  cancel: () => void;
+
+  reset: () => 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/LongPressGestureHandler.ts

@@ -1,4 +1,3 @@
-import { Platform } from 'react-native';
 import { State } from '../../State';
 import { AdaptedEvent, Config } from '../interfaces';
 
@@ -13,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;
 
@@ -22,11 +22,11 @@ export default class LongPressGestureHandler extends GestureHandler {
   private activationTimeout: number | undefined;
 
   public init(ref: number, propsRef: React.RefObject<unknown>) {
-    super.init(ref, propsRef);
-
-    if (Platform.OS === 'web') {
-      (this.delegate.getView() as HTMLElement).oncontextmenu = () => false;
+    if (this.config.enableContextMenu === undefined) {
+      this.config.enableContextMenu = false;
     }
+
+    super.init(ref, propsRef);
   }
 
   protected transformNativeEvent() {
@@ -46,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 {
@@ -59,32 +63,75 @@ export default class LongPressGestureHandler extends GestureHandler {
   }
 
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
-    this.tryBegin(event);
+
+    this.startX = event.x;
+    this.startY = event.y;
+
+    this.tryBegin();
+    this.tryActivate();
+
+    this.tryToSendTouchEvent(event);
+  }
+  protected onPointerAdd(event: AdaptedEvent): void {
+    super.onPointerAdd(event);
+    this.tracker.addToTracker(event);
+
+    if (this.tracker.trackedPointersCount > this.numberOfPointers) {
+      this.fail();
+      return;
+    }
+
+    const absoluteCoordsAverage = this.tracker.getAbsoluteCoordsAverage();
+
+    this.startX = absoluteCoordsAverage.x;
+    this.startY = absoluteCoordsAverage.y;
+
     this.tryActivate();
-    this.checkDistanceFail(event);
   }
 
   protected onPointerMove(event: AdaptedEvent): void {
     super.onPointerMove(event);
     this.tracker.track(event);
-    this.checkDistanceFail(event);
+    this.checkDistanceFail();
+  }
+
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    super.onPointerOutOfBounds(event);
+    this.tracker.track(event);
+    this.checkDistanceFail();
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.tracker.removeFromTracker(event.pointerId);
 
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       this.end();
     } else {
       this.fail();
     }
   }
 
-  private tryBegin(event: AdaptedEvent): void {
-    if (this.currentState !== State.UNDETERMINED) {
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+
+    if (
+      this.tracker.trackedPointersCount < this.numberOfPointers &&
+      this.state !== State.ACTIVE
+    ) {
+      this.fail();
+    }
+  }
+
+  private tryBegin(): void {
+    if (this.state !== State.UNDETERMINED) {
       return;
     }
 
@@ -92,12 +139,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.trackedPointersCount !== this.numberOfPointers) {
+      return;
+    }
+
     if (this.minDurationMs > 0) {
       this.activationTimeout = setTimeout(() => {
         this.activate();
@@ -107,16 +155,18 @@ 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) {
       return;
     }
 
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       this.cancel();
     } else {
       this.fail();

package/src/web/handlers/ManualGestureHandler.ts

@@ -1,19 +1,13 @@
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
-  public init(ref: number, propsRef: React.RefObject<unknown>) {
-    super.init(ref, propsRef);
-  }
-
-  public updateGestureConfig({ enabled = true, ...props }: Config): void {
-    super.updateGestureConfig({ enabled: enabled, ...props });
-  }
-
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.begin();
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -7,8 +7,8 @@ import GestureHandler from './GestureHandler';
 export default class NativeViewGestureHandler extends GestureHandler {
   private buttonRole!: boolean;
 
-  //TODO: Implement logic for activation on start
-  //@ts-ignore Logic yet to be implemented
+  // TODO: Implement logic for activation on start
+  // @ts-ignore Logic yet to be implemented
   private shouldActivateOnStart = false;
   private disallowInterruption = false;
 
@@ -19,24 +19,16 @@ export default class NativeViewGestureHandler extends GestureHandler {
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
 
-    this.setShouldCancelWhenOutside(true);
+    this.shouldCancelWhenOutside = true;
 
     if (Platform.OS !== 'web') {
       return;
     }
 
-    const view = this.delegate.getView() as HTMLElement;
+    const view = this.delegate.view 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.restoreViewStyles(view);
+    this.buttonRole = view.getAttribute('role') === 'button';
   }
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
@@ -48,16 +40,27 @@ export default class NativeViewGestureHandler extends GestureHandler {
     if (this.config.disallowInterruption !== undefined) {
       this.disallowInterruption = this.config.disallowInterruption;
     }
+
+    const view = this.delegate.view as HTMLElement;
+    this.restoreViewStyles(view);
   }
 
-  protected resetConfig(): void {
-    super.resetConfig();
+  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 onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.newPointerAction();
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -67,15 +70,20 @@ export default class NativeViewGestureHandler extends GestureHandler {
   }
 
   private newPointerAction(): void {
-    this.startX = this.tracker.getLastAvgX();
-    this.startY = this.tracker.getLastAvgY();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.startX = lastCoords.x;
+    this.startY = lastCoords.y;
 
-    if (this.currentState !== State.UNDETERMINED) {
+    if (this.state !== State.UNDETERMINED) {
       return;
     }
 
     this.begin();
-    if (this.buttonRole) {
+
+    const view = this.delegate.view as HTMLElement;
+    const isRNGHText = view.hasAttribute('rnghtext');
+
+    if (this.buttonRole || isRNGHText) {
       this.activate();
     }
   }
@@ -83,24 +91,22 @@ export default class NativeViewGestureHandler extends GestureHandler {
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
 
-    const dx = this.startX - this.tracker.getLastAvgX();
-    const dy = this.startY - this.tracker.getLastAvgY();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    const dx = this.startX - lastCoords.x;
+    const dy = this.startY - lastCoords.y;
     const distSq = dx * dx + dy * dy;
 
     if (distSq >= this.minDistSq) {
-      if (this.buttonRole && this.currentState === State.ACTIVE) {
+      if (this.buttonRole && this.state === State.ACTIVE) {
         this.cancel();
-      } else if (!this.buttonRole && this.currentState === State.BEGAN) {
+      } else if (!this.buttonRole && this.state === State.BEGAN) {
         this.activate();
       }
     }
   }
 
   protected onPointerLeave(): void {
-    if (
-      this.currentState === State.BEGAN ||
-      this.currentState === State.ACTIVE
-    ) {
+    if (this.state === State.BEGAN || this.state === State.ACTIVE) {
       this.cancel();
     }
   }
@@ -118,8 +124,8 @@ export default class NativeViewGestureHandler extends GestureHandler {
   private onUp(event: AdaptedEvent): void {
     this.tracker.removeFromTracker(event.pointerId);
 
-    if (this.tracker.getTrackedPointersCount() === 0) {
-      if (this.currentState === State.ACTIVE) {
+    if (this.tracker.trackedPointersCount === 0) {
+      if (this.state === State.ACTIVE) {
         this.end();
       } else {
         this.fail();
@@ -134,7 +140,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
     if (
       handler instanceof NativeViewGestureHandler &&
-      handler.getState() === State.ACTIVE &&
+      handler.state === State.ACTIVE &&
       handler.disallowsInterruption()
     ) {
       return false;
@@ -143,17 +149,15 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const canBeInterrupted = !this.disallowInterruption;
 
     if (
-      this.currentState === State.ACTIVE &&
-      handler.getState() === State.ACTIVE &&
+      this.state === State.ACTIVE &&
+      handler.state === State.ACTIVE &&
       canBeInterrupted
     ) {
       return false;
     }
 
     return (
-      this.currentState === State.ACTIVE &&
-      canBeInterrupted &&
-      handler.getTag() > 0
+      this.state === State.ACTIVE && canBeInterrupted && handler.handlerTag > 0
     );
   }
 
@@ -164,4 +168,8 @@ export default class NativeViewGestureHandler extends GestureHandler {
   public disallowsInterruption(): boolean {
     return this.disallowInterruption;
   }
+
+  public isButton(): boolean {
+    return this.buttonRole;
+  }
 }