react-native-gesture-handler 2.6.0 → 2.6.2

package/src/web/handlers/LongPressGestureHandler.ts

@@ -1,5 +1,5 @@
 import { State } from '../../State';
-import { AdaptedPointerEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -25,17 +25,19 @@ export default class LongPressGestureHandler extends GestureHandler {
     this.setShouldCancelWhenOutside(true);
   }
 
-  protected transformNativeEvent(event: AdaptedPointerEvent) {
+  protected transformNativeEvent() {
+    const rect: DOMRect = this.view.getBoundingClientRect();
+
     return {
-      x: event.offsetX,
-      y: event.offsetY,
-      absoluteX: event.x,
-      absoluteY: event.y,
+      x: this.tracker.getLastAvgX() - rect.left,
+      y: this.tracker.getLastAvgY() - rect.top,
+      absoluteX: this.tracker.getLastAvgX(),
+      absoluteY: this.tracker.getLastAvgY(),
       duration: Date.now() - this.startTime,
     };
   }
 
-  public updateGestureConfig({ enabled = true, ...props }): void {
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
     this.enabled = enabled;
@@ -59,28 +61,32 @@ export default class LongPressGestureHandler extends GestureHandler {
     clearTimeout(this.activationTimeout);
   }
 
-  protected onPointerDown(event: AdaptedPointerEvent): void {
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.tryBegin(event);
-    this.tryActivate(event);
+    this.tryActivate();
+    this.checkDistanceFail(event);
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    super.onPointerMove(event);
+    this.tracker.track(event);
     this.checkDistanceFail(event);
   }
 
-  protected onPointerUp(event: AdaptedPointerEvent): void {
+  protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
+    this.tracker.removeFromTracker(event.pointerId);
 
     if (this.currentState === State.ACTIVE) {
-      this.end(event);
+      this.end();
     } else {
-      this.fail(event);
+      this.fail();
     }
   }
 
-  protected onPointerMove(event: AdaptedPointerEvent): void {
-    this.checkDistanceFail(event);
-  }
-
-  private tryBegin(event: AdaptedPointerEvent): void {
+  private tryBegin(event: AdaptedEvent): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;
     }
@@ -88,23 +94,23 @@ export default class LongPressGestureHandler extends GestureHandler {
     this.previousTime = Date.now();
     this.startTime = this.previousTime;
 
-    this.begin(event);
+    this.begin();
 
     this.startX = event.x;
     this.startY = event.y;
   }
 
-  private tryActivate(event: AdaptedPointerEvent): void {
+  private tryActivate(): void {
     if (this.minDurationMs > 0) {
       this.activationTimeout = setTimeout(() => {
-        this.activate(event);
+        this.activate();
       }, this.minDurationMs);
     } else if (this.minDurationMs === 0) {
-      this.activate(event);
+      this.activate();
     }
   }
 
-  private checkDistanceFail(event: AdaptedPointerEvent): void {
+  private checkDistanceFail(event: AdaptedEvent): void {
     const dx = event.x - this.startX;
     const dy = event.y - this.startY;
     const distSq = dx * dx + dy * dy;
@@ -114,9 +120,9 @@ export default class LongPressGestureHandler extends GestureHandler {
     }
 
     if (this.currentState === State.ACTIVE) {
-      this.cancel(event);
+      this.cancel();
     } else {
-      this.fail(event);
+      this.fail();
     }
   }
 }

package/src/web/handlers/ManualGestureHandler.ts

@@ -0,0 +1,39 @@
+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);
+  }
+
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+    this.begin();
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerMove(event);
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.tracker.removeFromTracker(event.pointerId);
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+  }
+
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
+    this.reset();
+  }
+}

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -1,24 +1,26 @@
 import { State } from '../../State';
-import { AdaptedPointerEvent } from '../interfaces';
+import { DEFAULT_TOUCH_SLOP } from '../constants';
+import { AdaptedEvent, Config } from '../interfaces';
 
 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
+  private shouldActivateOnStart = false;
   private disallowInterruption = false;
 
+  private startX = 0;
+  private startY = 0;
+  private minDistSq = DEFAULT_TOUCH_SLOP * DEFAULT_TOUCH_SLOP;
+
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
 
     this.setShouldCancelWhenOutside(true);
 
-    if (!this.view) {
-      return;
-    }
-
     this.view.style['touchAction'] = 'auto';
-    this.view.style['webkitUserSelect'] = 'auto';
-    this.view.style['userSelect'] = 'auto';
 
     //@ts-ignore Turns on defualt touch behavior on Safari
     this.view.style['WebkitTouchCallout'] = 'auto';
@@ -28,44 +30,99 @@ export default class NativeViewGestureHandler extends GestureHandler {
     } else {
       this.buttonRole = false;
     }
+
+    if (this.view.tagName.toLowerCase() === 'input') {
+      //Enables text input on Safari
+      this.view.style['webkitUserSelect'] = 'auto';
+    }
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+
+    if (this.config.shouldActivateOnStart !== undefined) {
+      this.shouldActivateOnStart = this.config.shouldActivateOnStart;
+    }
+    if (this.config.disallowInterruption !== undefined) {
+      this.disallowInterruption = this.config.disallowInterruption;
+    }
   }
 
   protected resetConfig(): void {
     super.resetConfig();
   }
 
-  protected onPointerDown(event: AdaptedPointerEvent): void {
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
     super.onPointerDown(event);
+    this.newPointerAction();
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+    this.newPointerAction();
+  }
 
-    if (this.currentState === State.UNDETERMINED) {
-      this.begin(event);
-      if (this.buttonRole) {
-        this.activate(event);
-      }
+  private newPointerAction(): void {
+    this.startX = this.tracker.getLastAvgX();
+    this.startY = this.tracker.getLastAvgY();
+
+    if (this.currentState !== State.UNDETERMINED) {
+      return;
+    }
+
+    this.begin();
+    if (this.buttonRole) {
+      this.activate();
+    }
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+
+    const dx = this.startX - this.tracker.getLastAvgX();
+    const dy = this.startY - this.tracker.getLastAvgY();
+    const distSq = dx * dx + dy * dy;
+
+    if (
+      !this.buttonRole &&
+      distSq >= this.minDistSq &&
+      this.currentState === State.BEGAN
+    ) {
+      this.activate();
     }
   }
 
-  protected onPointerMove(_event: AdaptedPointerEvent): void {
-    //
+  protected onPointerOut(): void {
+    this.cancel();
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.onUp(event);
   }
 
-  protected onPointerOut(event: AdaptedPointerEvent): void {
-    this.cancel(event);
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.onUp(event);
   }
 
-  protected onPointerUp(event: AdaptedPointerEvent): void {
+  private onUp(event: AdaptedEvent): void {
     this.tracker.removeFromTracker(event.pointerId);
-    if (!this.buttonRole) {
-      this.activate(event);
-    }
+
     if (this.tracker.getTrackedPointersCount() === 0) {
-      this.end(event);
+      if (this.currentState === State.ACTIVE) {
+        this.end();
+      } else {
+        this.fail();
+      }
     }
   }
 
-  protected onPointerCancel(event: AdaptedPointerEvent): void {
-    this.cancel(event);
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
+    this.cancel();
     this.reset();
   }
 

package/src/web/handlers/PanGestureHandler.ts

@@ -1,7 +1,7 @@
 import { PixelRatio } from 'react-native';
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedPointerEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -42,8 +42,8 @@ export default class PanGestureHandler extends GestureHandler {
   private minVelocityY = Number.MAX_SAFE_INTEGER;
   private minVelocitySq = Number.MAX_SAFE_INTEGER;
 
-  private minPointers = 1;
-  private maxPointers = 10;
+  private minPointers = DEFAULT_MIN_POINTERS;
+  private maxPointers = DEFAULT_MAX_POINTERS;
 
   private startX = 0;
   private startY = 0;
@@ -52,14 +52,14 @@ export default class PanGestureHandler extends GestureHandler {
   private lastX = 0;
   private lastY = 0;
 
-  // TODO: Implement logic required for activateAfterLongPress
   private activateAfterLongPress = 0;
+  private activationTimeout = 0;
 
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
   }
 
-  public updateGestureConfig({ enabled = true, ...props }): void {
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this.resetConfig();
 
     super.updateGestureConfig({ enabled: enabled, ...props });
@@ -94,6 +94,10 @@ export default class PanGestureHandler extends GestureHandler {
       this.minVelocityY = this.config.minVelocityY;
     }
 
+    if (this.config.activateAfterLongPress !== undefined) {
+      this.activateAfterLongPress = this.config.activateAfterLongPress;
+    }
+
     if (this.config.shouldCancelWhenOutside) {
       this.setShouldCancelWhenOutside(false);
     }
@@ -188,22 +192,22 @@ export default class PanGestureHandler extends GestureHandler {
     this.activateAfterLongPress = 0;
   }
 
-  protected transformNativeEvent(event: AdaptedPointerEvent) {
-    if (!this.view) {
-      return {};
-    }
-
+  protected transformNativeEvent() {
+    const rect: DOMRect = this.view.getBoundingClientRect();
     const ratio = PixelRatio.get();
 
+    const translationX: number = this.getTranslationX();
+    const translationY: number = this.getTranslationY();
+
     return {
-      translationX: this.getTranslationX(),
-      translationY: this.getTranslationY(),
-      absoluteX: event.x,
-      absoluteY: event.y,
+      translationX: isNaN(translationX) ? 0 : translationX,
+      translationY: isNaN(translationY) ? 0 : translationY,
+      absoluteX: this.tracker.getLastAvgX(),
+      absoluteY: this.tracker.getLastAvgY(),
       velocityX: this.velocityX * ratio * 10,
       velocityY: this.velocityY * ratio * 10,
-      x: event.offsetX,
-      y: event.offsetY,
+      x: this.tracker.getLastAvgX() - rect.left,
+      y: this.tracker.getLastAvgY() - rect.top,
     };
   }
 
@@ -214,23 +218,25 @@ export default class PanGestureHandler extends GestureHandler {
     return this.lastY - this.startY + this.offsetY;
   }
 
+  private clearActivationTimeout(): void {
+    clearTimeout(this.activationTimeout);
+  }
+
   //EventsHandling
-  protected onPointerDown(event: AdaptedPointerEvent): void {
-    super.onPointerDown(event);
+  protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
-
-    if (this.tracker.getTrackedPointersCount() > 1) {
-      this.onPointerAdd(event);
-      return;
-    }
+    super.onPointerDown(event);
 
     this.lastX = this.tracker.getLastAvgX();
     this.lastY = this.tracker.getLastAvgY();
 
     this.tryBegin(event);
-    this.checkBegan(event);
+    this.checkBegan();
   }
-  protected onPointerAdd(event: AdaptedPointerEvent): void {
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
     this.tryBegin(event);
 
     this.offsetX += this.lastX - this.startX;
@@ -244,25 +250,18 @@ export default class PanGestureHandler extends GestureHandler {
 
     if (this.tracker.getTrackedPointersCount() > this.maxPointers) {
       if (this.currentState === State.ACTIVE) {
-        this.cancel(event);
+        this.cancel();
       } else {
-        this.fail(event);
+        this.fail();
       }
     } else {
-      this.checkBegan(event);
+      this.checkBegan();
     }
   }
 
-  protected onPointerUp(event: AdaptedPointerEvent): void {
+  protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
 
-    if (this.tracker.getTrackedPointersCount() > 1) {
-      this.tracker.removeFromTracker(event.pointerId);
-
-      this.onPointerRemove(event);
-      return;
-    }
-
     if (this.currentState === State.ACTIVE) {
       this.lastX = this.tracker.getLastAvgX();
       this.lastY = this.tracker.getLastAvgY();
@@ -271,13 +270,16 @@ export default class PanGestureHandler extends GestureHandler {
     this.tracker.removeFromTracker(event.pointerId);
 
     if (this.currentState === State.ACTIVE) {
-      this.end(event);
+      this.end();
     } else {
       this.resetProgress();
-      this.fail(event);
+      this.fail();
     }
   }
-  protected onPointerRemove(event: AdaptedPointerEvent): void {
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY - this.startY;
 
@@ -293,11 +295,11 @@ export default class PanGestureHandler extends GestureHandler {
         this.tracker.getTrackedPointersCount() < this.minPointers
       )
     ) {
-      this.checkBegan(event);
+      this.checkBegan();
     }
   }
 
-  protected onPointerMove(event: AdaptedPointerEvent): void {
+  protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
 
     this.lastX = this.tracker.getLastAvgX();
@@ -305,17 +307,17 @@ export default class PanGestureHandler extends GestureHandler {
     this.velocityX = this.tracker.getVelocityX(event.pointerId);
     this.velocityY = this.tracker.getVelocityY(event.pointerId);
 
-    this.checkBegan(event);
+    this.checkBegan();
 
     super.onPointerMove(event);
   }
 
-  protected onPointerCancel(event: AdaptedPointerEvent): void {
+  protected onPointerCancel(event: AdaptedEvent): void {
     super.onPointerCancel(event);
 
     this.reset();
   }
-  protected onPointerOutOfBounds(event: AdaptedPointerEvent): void {
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
     if (this.getShouldCancelWhenOutside()) {
       return;
     }
@@ -327,7 +329,7 @@ export default class PanGestureHandler extends GestureHandler {
     this.velocityX = this.tracker.getVelocityX(event.pointerId);
     this.velocityY = this.tracker.getVelocityY(event.pointerId);
 
-    this.checkBegan(event);
+    this.checkBegan();
 
     if (this.currentState === State.ACTIVE) {
       super.onPointerOutOfBounds(event);
@@ -409,6 +411,7 @@ export default class PanGestureHandler extends GestureHandler {
     const distanceSq = dx * dx + dy * dy;
 
     if (this.activateAfterLongPress > 0 && distanceSq > DEFAULT_MIN_DIST_SQ) {
+      this.clearActivationTimeout();
       return true;
     }
 
@@ -439,7 +442,7 @@ export default class PanGestureHandler extends GestureHandler {
     );
   }
 
-  private tryBegin(event: AdaptedPointerEvent): void {
+  private tryBegin(event: AdaptedEvent): void {
     if (
       this.currentState === State.UNDETERMINED &&
       this.tracker.getTrackedPointersCount() >= this.minPointers
@@ -450,31 +453,43 @@ export default class PanGestureHandler extends GestureHandler {
       this.velocityX = 0;
       this.velocityY = 0;
 
-      this.begin(event);
+      this.begin();
 
-      //Long press
+      if (this.activateAfterLongPress > 0) {
+        this.activationTimeout = setTimeout(() => {
+          this.activate();
+        }, this.activateAfterLongPress);
+      }
     } else {
       this.velocityX = this.tracker.getVelocityX(event.pointerId);
       this.velocityY = this.tracker.getVelocityY(event.pointerId);
     }
   }
 
-  private checkBegan(event: AdaptedPointerEvent): void {
+  private checkBegan(): void {
     if (this.currentState === State.BEGAN) {
       if (this.shouldFail()) {
-        this.fail(event);
+        this.fail();
       } else if (this.shouldActivate()) {
-        this.activate(event);
+        this.activate();
       }
     }
   }
 
-  protected activate(event: AdaptedPointerEvent, force = false): void {
+  public activate(force = false): void {
     if (this.currentState !== State.ACTIVE) {
       this.resetProgress();
     }
 
-    super.activate(event, force);
+    super.activate(force);
+  }
+
+  protected onCancel(): void {
+    this.clearActivationTimeout();
+  }
+
+  protected onReset(): void {
+    this.clearActivationTimeout();
   }
 
   protected resetProgress(): void {