react-native-gesture-handler 2.6.0 → 2.6.2

package/src/web/handlers/PinchGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import ScaleGestureDetector, {
@@ -12,17 +12,14 @@ export default class PinchGestureHandler extends GestureHandler {
   private velocity = 0;
 
   private startingSpan = 0;
-  private spanSlop = 0;
+  private spanSlop = DEFAULT_TOUCH_SLOP;
 
   private scaleDetectorListener: ScaleGestureListener = {
     onScaleBegin: (detector: ScaleGestureDetector): boolean => {
       this.startingSpan = detector.getCurrentSpan();
       return true;
     },
-    onScale: (
-      detector: ScaleGestureDetector,
-      event: AdaptedPointerEvent
-    ): boolean => {
+    onScale: (detector: ScaleGestureDetector): boolean => {
       const prevScaleFactor: number = this.scale;
       this.scale *= detector.getScaleFactor(
         this.tracker.getTrackedPointersCount()
@@ -38,13 +35,12 @@ export default class PinchGestureHandler extends GestureHandler {
           this.spanSlop &&
         this.currentState === State.BEGAN
       ) {
-        this.activate(event);
+        this.activate();
       }
       return true;
     },
     onScaleEnd: (
-      _detector: ScaleGestureDetector,
-      _event: AdaptedPointerEvent
+      _detector: ScaleGestureDetector
       // eslint-disable-next-line @typescript-eslint/no-empty-function
     ): void => {},
   };
@@ -57,16 +53,15 @@ export default class PinchGestureHandler extends GestureHandler {
     super.init(ref, propsRef);
 
     this.setShouldCancelWhenOutside(false);
-    this.spanSlop = DEFAULT_TOUCH_SLOP;
   }
 
-  public updateGestureConfig({ enabled = true, ...props }): void {
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
     this.enabled = enabled;
   }
 
-  protected transformNativeEvent(_event: AdaptedPointerEvent) {
+  protected transformNativeEvent() {
     return {
       focalX: this.scaleGestureDetector.getFocusX(),
       focalY: this.scaleGestureDetector.getFocusY(),
@@ -75,44 +70,47 @@ export default class PinchGestureHandler extends GestureHandler {
     };
   }
 
-  protected onPointerDown(event: AdaptedPointerEvent): void {
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
     super.onPointerDown(event);
+  }
 
+  protected onPointerAdd(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+    this.tryBegin();
+    this.scaleGestureDetector.onTouchEvent(event, this.tracker);
+  }
 
-    if (this.tracker.getTrackedPointersCount() < 2) {
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.tracker.removeFromTracker(event.pointerId);
+    if (this.currentState !== State.ACTIVE) {
       return;
     }
+    this.scaleGestureDetector.onTouchEvent(event, this.tracker);
 
-    if (this.tracker.getTrackedPointersCount() > 1) {
-      this.tryBegin(event);
-      this.scaleGestureDetector.onTouchEvent(event, this.tracker);
-    }
-  }
-  protected onPointerUp(event: AdaptedPointerEvent): void {
-    if (this.tracker.getTrackedPointersCount() > 1) {
-      this.scaleGestureDetector.onTouchEvent(event, this.tracker);
-      this.tracker.removeFromTracker(event.pointerId);
+    if (this.currentState === State.ACTIVE) {
+      this.end();
     } else {
-      this.tracker.removeFromTracker(event.pointerId);
-      if (this.currentState !== State.ACTIVE) {
-        return;
-      }
-      this.scaleGestureDetector.onTouchEvent(event, this.tracker);
+      this.fail();
     }
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.scaleGestureDetector.onTouchEvent(event, this.tracker);
+    this.tracker.removeFromTracker(event.pointerId);
+
     if (
       this.currentState === State.ACTIVE &&
       this.tracker.getTrackedPointersCount() < 2
     ) {
-      this.end(event);
-    } else if (
-      event.eventType === EventTypes.UP &&
-      this.currentState !== State.BEGAN
-    ) {
-      this.fail(event);
+      this.end();
     }
   }
-  protected onPointerMove(event: AdaptedPointerEvent): void {
+
+  protected onPointerMove(event: AdaptedEvent): void {
     if (this.tracker.getTrackedPointersCount() < 2) {
       return;
     }
@@ -121,30 +119,36 @@ export default class PinchGestureHandler extends GestureHandler {
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
     super.onPointerMove(event);
   }
-  protected onPointerOutOfBounds(_event: AdaptedPointerEvent): void {
-    //
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    if (this.tracker.getTrackedPointersCount() < 2) {
+      return;
+    }
+    this.tracker.track(event);
+
+    this.scaleGestureDetector.onTouchEvent(event, this.tracker);
+    super.onPointerOutOfBounds(event);
   }
 
-  protected onPointerCancel(_event: AdaptedPointerEvent): void {
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
     this.reset();
   }
 
-  private tryBegin(event: AdaptedPointerEvent): void {
+  private tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;
     }
 
     this.resetProgress();
-
-    this.begin(event);
+    this.begin();
   }
 
-  protected activate(event: AdaptedPointerEvent, force?: boolean): void {
+  public activate(force?: boolean): void {
     if (this.currentState !== State.ACTIVE) {
       this.resetProgress();
     }
 
-    super.activate(event, force);
+    super.activate(force);
   }
 
   protected onReset(): void {
@@ -155,7 +159,6 @@ export default class PinchGestureHandler extends GestureHandler {
     if (this.currentState === State.ACTIVE) {
       return;
     }
-
     this.velocity = 0;
     this.scale = 1;
   }

package/src/web/handlers/RotationGestureHandler.ts

@@ -1,5 +1,5 @@
 import { State } from '../../State';
-import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import RotationGestureDetector, {
@@ -17,10 +17,7 @@ export default class RotationGestureHandler extends GestureHandler {
 
   private rotationGestureListener: RotationGestureListener = {
     onRotationBegin: (_detector: RotationGestureDetector): boolean => true,
-    onRotation: (
-      detector: RotationGestureDetector,
-      event: AdaptedPointerEvent
-    ): boolean => {
+    onRotation: (detector: RotationGestureDetector): boolean => {
       const previousRotation: number = this.rotation;
       this.rotation += detector.getRotation();
 
@@ -34,16 +31,13 @@ export default class RotationGestureHandler extends GestureHandler {
         Math.abs(this.rotation) >= ROTATION_RECOGNITION_THRESHOLD &&
         this.currentState === State.BEGAN
       ) {
-        this.activate(event);
+        this.activate();
       }
 
       return true;
     },
-    onRotationEnd: (
-      _detector: RotationGestureDetector,
-      event: AdaptedPointerEvent
-    ): void => {
-      this.end(event);
+    onRotationEnd: (_detector: RotationGestureDetector): void => {
+      this.end();
     },
   };
 
@@ -57,13 +51,13 @@ export default class RotationGestureHandler extends GestureHandler {
     this.setShouldCancelWhenOutside(false);
   }
 
-  public updateGestureConfig({ enabled = true, ...props }): void {
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
     this.enabled = enabled;
   }
 
-  protected transformNativeEvent(_event: AdaptedPointerEvent) {
+  protected transformNativeEvent() {
     return {
       rotation: this.rotation ? this.rotation : 0,
       anchorX: this.getAnchorX(),
@@ -84,24 +78,21 @@ export default class RotationGestureHandler extends GestureHandler {
     return anchorY ? anchorY : this.cachedAnchorY;
   }
 
-  protected onPointerDown(event: AdaptedPointerEvent): void {
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
     super.onPointerDown(event);
+  }
 
+  protected onPointerAdd(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
 
-    if (this.tracker.getTrackedPointersCount() <= 1) {
-      return;
-    }
-
-    this.tryBegin(event);
+    this.tryBegin();
     this.rotationGestureDetector.onTouchEvent(event, this.tracker);
   }
 
-  protected onPointerMove(event: AdaptedPointerEvent): void {
-    if (
-      this.tracker.getTrackedPointersCount() < 2 ||
-      !this.rotationGestureDetector
-    ) {
+  protected onPointerMove(event: AdaptedEvent): void {
+    if (this.tracker.getTrackedPointersCount() < 2) {
       return;
     }
 
@@ -119,55 +110,64 @@ export default class RotationGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
-  protected onPointerUp(event: AdaptedPointerEvent): void {
-    if (!this.rotationGestureDetector) {
-      this.tracker.resetTracker();
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    if (this.tracker.getTrackedPointersCount() < 2) {
       return;
     }
 
-    if (this.tracker.getTrackedPointersCount() > 1) {
-      this.rotationGestureDetector.onTouchEvent(event, this.tracker);
-      this.tracker.removeFromTracker(event.pointerId);
-    } else {
-      this.tracker.removeFromTracker(event.pointerId);
-      this.rotationGestureDetector.onTouchEvent(event, this.tracker);
-      if (this.currentState !== State.ACTIVE) {
-        return;
-      }
+    if (this.getAnchorX()) {
+      this.cachedAnchorX = this.getAnchorX();
+    }
+    if (this.getAnchorY()) {
+      this.cachedAnchorY = this.getAnchorY();
     }
 
-    if (event.eventType !== EventTypes.UP) {
+    this.tracker.track(event);
+
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+
+    super.onPointerOutOfBounds(event);
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.tracker.removeFromTracker(event.pointerId);
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+
+    if (this.currentState !== State.ACTIVE) {
       return;
     }
 
     if (this.currentState === State.ACTIVE) {
-      this.end(event);
+      this.end();
     } else {
-      this.fail(event);
+      this.fail();
     }
   }
 
-  protected onPointerCancel(event: AdaptedPointerEvent): void {
-    this.end(event);
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+    this.tracker.removeFromTracker(event.pointerId);
+  }
+
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
+    this.end();
+
     this.reset();
   }
 
-  protected tryBegin(event: AdaptedPointerEvent): void {
+  protected tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;
     }
 
-    this.resetProgress();
-
-    this.begin(event);
+    this.begin();
   }
 
-  protected activate(event: AdaptedPointerEvent, _force?: boolean): void {
-    if (this.currentState !== State.ACTIVE) {
-      this.resetProgress();
-    }
-
-    super.activate(event);
+  public activate(_force?: boolean): void {
+    super.activate();
   }
 
   protected onReset(): void {
@@ -177,5 +177,6 @@ export default class RotationGestureHandler extends GestureHandler {
 
     this.rotation = 0;
     this.velocity = 0;
+    this.rotationGestureDetector.reset();
   }
 }

package/src/web/handlers/TapGestureHandler.ts

@@ -1,10 +1,10 @@
 import { State } from '../../State';
-import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+import { AdaptedEvent, Config, EventTypes } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
 const DEFAULT_MAX_DURATION_MS = 500;
-const DEFAULT_MAX_DELAY_MS = 200;
+const DEFAULT_MAX_DELAY_MS = 500;
 const DEFAULT_NUMBER_OF_TAPS = 1;
 const DEFAULT_MIN_NUMBER_OF_POINTERS = 1;
 
@@ -36,7 +36,7 @@ export default class TapGestureHandler extends GestureHandler {
     this.setShouldCancelWhenOutside(true);
   }
 
-  public updateGestureConfig({ enabled = true, ...props }): void {
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
     this.enabled = enabled;
@@ -61,8 +61,8 @@ export default class TapGestureHandler extends GestureHandler {
       this.maxDeltaY = this.config.maxDeltaY;
     }
 
-    if (this.config.maxDistSq !== undefined) {
-      this.maxDistSq = this.config.maxDistSq;
+    if (this.config.maxDist !== undefined) {
+      this.maxDistSq = this.config.maxDist * this.config.maxDist;
     }
 
     if (this.config.minPointers !== undefined) {
@@ -82,12 +82,14 @@ export default class TapGestureHandler extends GestureHandler {
     this.minNumberOfPointers = DEFAULT_MIN_NUMBER_OF_POINTERS;
   }
 
-  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(),
     };
   }
 
@@ -96,68 +98,72 @@ export default class TapGestureHandler extends GestureHandler {
     clearTimeout(this.delayTimeout);
   }
 
-  private startTap(event: AdaptedPointerEvent): void {
+  private startTap(): void {
     this.clearTimeouts();
 
-    this.waitTimeout = setTimeout(() => this.fail(event), this.maxDurationMs);
+    this.waitTimeout = setTimeout(() => this.fail(), this.maxDurationMs);
   }
 
-  private endTap(event: AdaptedPointerEvent): void {
+  private endTap(): void {
     this.clearTimeouts();
 
     if (
       ++this.tapsSoFar === this.numberOfTaps &&
       this.currentMaxNumberOfPointers >= this.minNumberOfPointers
     ) {
-      this.activate(event);
+      this.activate();
     } else {
-      this.delayTimeout = setTimeout(() => this.fail(event), this.maxDelayMs);
+      this.delayTimeout = setTimeout(() => this.fail(), this.maxDelayMs);
     }
   }
 
   //Handling Events
-  protected onPointerDown(event: AdaptedPointerEvent): void {
-    super.onPointerDown(event);
+  protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
+    super.onPointerDown(event);
 
     this.trySettingPosition(event);
 
-    if (this.tracker.getTrackedPointersCount() > 1) {
-      this.onPointerAdd(event);
-    } else {
-      this.lastX = this.tracker.getLastAvgX();
-      this.lastY = this.tracker.getLastAvgY();
-    }
+    this.startX = event.x;
+    this.startY = event.y;
+
+    this.lastX = event.x;
+    this.lastY = event.y;
+
     this.updateState(event);
   }
 
-  protected onPointerAdd(_event: AdaptedPointerEvent): void {
+  protected onPointerAdd(event: AdaptedEvent): void {
+    super.onPointerAdd(event);
+    this.tracker.addToTracker(event);
+    this.trySettingPosition(event);
+
     this.offsetX += this.lastX - this.startX;
-    this.offsetY += this.lastY = this.startY;
+    this.offsetY += this.lastY - this.startY;
 
     this.lastX = this.tracker.getLastAvgX();
     this.lastY = this.tracker.getLastAvgY();
 
-    this.startX = this.lastX;
-    this.startY = this.lastY;
-  }
+    this.startX = this.tracker.getLastAvgX();
+    this.startY = this.tracker.getLastAvgY();
 
-  protected onPointerUp(event: AdaptedPointerEvent): void {
-    if (this.tracker.getTrackedPointersCount() > 1) {
-      this.tracker.removeFromTracker(event.pointerId);
+    this.updateState(event);
+  }
 
-      this.onPointerRemove(event);
-    } else {
-      this.lastX = this.tracker.getLastAvgX();
-      this.lastY = this.tracker.getLastAvgY();
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
 
-      this.tracker.removeFromTracker(event.pointerId);
-    }
+    this.tracker.removeFromTracker(event.pointerId);
 
     this.updateState(event);
   }
 
-  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;
 
@@ -166,31 +172,41 @@ export default class TapGestureHandler extends GestureHandler {
 
     this.startX = this.lastX;
     this.startY = this.lastY;
+
+    this.updateState(event);
   }
 
-  protected onPointerMove(event: AdaptedPointerEvent): void {
+  protected onPointerMove(event: AdaptedEvent): void {
     this.trySettingPosition(event);
+    this.tracker.track(event);
 
     this.lastX = this.tracker.getLastAvgX();
     this.lastY = this.tracker.getLastAvgY();
 
     this.updateState(event);
+
+    super.onPointerMove(event);
   }
-  protected onPointerOutOfBounds(event: AdaptedPointerEvent): void {
+
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
     this.trySettingPosition(event);
+    this.tracker.track(event);
 
     this.lastX = this.tracker.getLastAvgX();
     this.lastY = this.tracker.getLastAvgY();
 
     this.updateState(event);
+
+    super.onPointerOutOfBounds(event);
   }
 
-  protected onPointerCancel(event: AdaptedPointerEvent): void {
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
     this.tracker.resetTracker();
-    this.fail(event);
+    this.fail();
   }
 
-  private updateState(event: AdaptedPointerEvent): void {
+  private updateState(event: AdaptedEvent): void {
     if (
       this.currentMaxNumberOfPointers < this.tracker.getTrackedPointersCount()
     ) {
@@ -198,23 +214,23 @@ export default class TapGestureHandler extends GestureHandler {
     }
 
     if (this.shouldFail()) {
-      this.fail(event);
+      this.fail();
       return;
     }
 
     switch (this.currentState) {
       case State.UNDETERMINED:
         if (event.eventType === EventTypes.DOWN) {
-          this.begin(event);
+          this.begin();
         }
-        this.startTap(event);
+        this.startTap();
         break;
       case State.BEGAN:
         if (event.eventType === EventTypes.UP) {
-          this.endTap(event);
+          this.endTap();
         }
         if (event.eventType === EventTypes.DOWN) {
-          this.startTap(event);
+          this.startTap();
         }
         break;
       default:
@@ -222,7 +238,7 @@ export default class TapGestureHandler extends GestureHandler {
     }
   }
 
-  private trySettingPosition(event: AdaptedPointerEvent): void {
+  private trySettingPosition(event: AdaptedEvent): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;
     }
@@ -235,6 +251,7 @@ export default class TapGestureHandler extends GestureHandler {
 
   private shouldFail(): boolean {
     const dx = this.lastX - this.startX + this.offsetX;
+
     if (
       this.maxDeltaX !== Number.MIN_SAFE_INTEGER &&
       Math.abs(dx) > this.maxDeltaX
@@ -250,17 +267,17 @@ export default class TapGestureHandler extends GestureHandler {
       return true;
     }
 
-    const dist = dy * dy + dx * dx;
+    const distSq = dy * dy + dx * dx;
 
-    return this.maxDistSq !== Number.MIN_SAFE_INTEGER && dist > this.maxDistSq;
+    return (
+      this.maxDistSq !== Number.MIN_SAFE_INTEGER && distSq > this.maxDistSq
+    );
   }
 
-  protected activate(event: AdaptedPointerEvent): void {
-    super.activate(event);
+  public activate(): void {
+    super.activate();
 
-    if (!this.isAwaiting()) {
-      this.end(event);
-    }
+    this.end();
   }
 
   protected onCancel(): void {
@@ -269,6 +286,7 @@ export default class TapGestureHandler extends GestureHandler {
   }
 
   protected resetProgress(): void {
+    this.clearTimeouts();
     this.tapsSoFar = 0;
     this.currentMaxNumberOfPointers = 0;
   }