Fix scroll interactions

src/web/handlers/FlingGestureHandler.ts

@@ -120,13 +120,22 @@ export default class FlingGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerMove(event: AdaptedEvent): void {
+  protected onPointerMove(
+    event: AdaptedEvent,
+    sourceEvent: PointerEvent | TouchEvent
+  ): void {
     this.tracker.track(event);
 
     if (this.currentState !== State.BEGAN) {
       return;
     }
 
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    } else if (sourceEvent) {
+      this.fail();
+    }
+
     this.tryEndFling();
 
     super.onPointerMove(event);

src/web/handlers/GestureHandler.ts

@@ -277,7 +277,10 @@ export default abstract class GestureHandler {
   // Event actions
   //
 
-  protected onPointerDown(event: AdaptedEvent): void {
+  protected onPointerDown(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
     this.pointerType = event.pointerType;
 
@@ -290,29 +293,44 @@ export default abstract class GestureHandler {
     }
   }
   // Adding another pointer to existing ones
-  protected onPointerAdd(event: AdaptedEvent): void {
+  protected onPointerAdd(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
   }
-  protected onPointerUp(event: AdaptedEvent): void {
+  protected onPointerUp(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
   }
   // Removing pointer, when there is more than one pointers
-  protected onPointerRemove(event: AdaptedEvent): void {
+  protected onPointerRemove(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
   }
-  protected onPointerMove(event: AdaptedEvent): void {
+  protected onPointerMove(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     this.tryToSendMoveEvent(false);
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
   }
-  protected onPointerLeave(event: AdaptedEvent): void {
+  protected onPointerLeave(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     if (this.shouldCancellWhenOutside) {
       switch (this.currentState) {
         case State.ACTIVE:
@@ -329,31 +347,47 @@ export default abstract class GestureHandler {
       this.sendTouchEvent(event);
     }
   }
-  protected onPointerEnter(event: AdaptedEvent): void {
+  protected onPointerEnter(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
   }
-  protected onPointerCancel(event: AdaptedEvent): void {
+  protected onPointerCancel(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
 
     this.cancel();
     this.reset();
   }
-  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+  protected onPointerOutOfBounds(
+    event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     this.tryToSendMoveEvent(true);
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
   }
-  protected onPointerMoveOver(_event: AdaptedEvent): void {
+  protected onPointerMoveOver(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     // used only by hover gesture handler atm
   }
-  protected onPointerMoveOut(_event: AdaptedEvent): void {
+  protected onPointerMoveOut(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     // used only by hover gesture handler atm
   }
+
   private tryToSendMoveEvent(out: boolean): void {
     if (
       this.enabled &&

src/web/handlers/ManualGestureHandler.ts

@@ -21,12 +21,30 @@ export default class ManualGestureHandler extends GestureHandler {
     super.onPointerAdd(event);
   }
 
-  protected onPointerMove(event: AdaptedEvent): void {
+  protected onPointerMove(
+    event: AdaptedEvent,
+    sourceEvent: PointerEvent | TouchEvent
+  ): void {
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    } else if (sourceEvent) {
+      this.fail();
+    }
+
     this.tracker.track(event);
     super.onPointerMove(event);
   }
 
-  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+  protected onPointerOutOfBounds(
+    event: AdaptedEvent,
+    sourceEvent: PointerEvent | TouchEvent
+  ): void {
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    } else if (sourceEvent) {
+      this.fail();
+    }
+
     this.tracker.track(event);
     super.onPointerOutOfBounds(event);
   }

src/web/handlers/PanGestureHandler.ts

@@ -250,9 +250,16 @@ export default class PanGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerUp(event: AdaptedEvent): void {
+  protected onPointerUp(
+    event: AdaptedEvent,
+    sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     super.onPointerUp(event);
 
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    }
+
     if (this.currentState === State.ACTIVE) {
       this.lastX = this.tracker.getLastAvgX();
       this.lastY = this.tracker.getLastAvgY();
@@ -267,7 +274,14 @@ export default class PanGestureHandler extends GestureHandler {
       this.fail();
     }
   }
-  protected onPointerRemove(event: AdaptedEvent): void {
+  protected onPointerRemove(
+    event: AdaptedEvent,
+    sourceEvent?: TouchEvent | PointerEvent
+  ): void {
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    }
+
     super.onPointerRemove(event);
     this.tracker.removeFromTracker(event.pointerId);
 
@@ -290,7 +304,22 @@ export default class PanGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerMove(event: AdaptedEvent): void {
+  protected onPointerMove(
+    event: AdaptedEvent,
+    sourceEvent?: TouchEvent | PointerEvent
+  ): void {
+    if (sourceEvent) {
+      const state = this.getState();
+      if (sourceEvent.cancelable && state === State.ACTIVE) {
+        sourceEvent.preventDefault();
+      }
+
+      if (!sourceEvent.cancelable && state === State.ACTIVE) {
+        this.fail();
+        return;
+      }
+    }
+
     this.tracker.track(event);
 
     this.lastX = this.tracker.getLastAvgX();
@@ -303,11 +332,26 @@ export default class PanGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
-  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+  protected onPointerOutOfBounds(
+    event: AdaptedEvent,
+    sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     if (this.getShouldCancelWhenOutside()) {
       return;
     }
 
+    if (sourceEvent) {
+      const state = this.getState();
+      if (sourceEvent.cancelable && state === State.ACTIVE) {
+        sourceEvent.preventDefault();
+      }
+
+      if (!sourceEvent.cancelable && state === State.ACTIVE) {
+        this.fail();
+        return;
+      }
+    }
+
     this.tracker.track(event);
 
     this.lastX = this.tracker.getLastAvgX();
@@ -470,6 +514,10 @@ export default class PanGestureHandler extends GestureHandler {
     super.activate(force);
   }
 
+  public fail(_sendIfDisabled?: boolean): void {
+    super.fail();
+  }
+
   protected onCancel(): void {
     this.clearActivationTimeout();
   }

src/web/handlers/PinchGestureHandler.ts

@@ -108,19 +108,39 @@ export default class PinchGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerMove(event: AdaptedEvent): void {
+  protected onPointerMove(
+    event: AdaptedEvent,
+    sourceEvent: PointerEvent | TouchEvent
+  ): void {
     if (this.tracker.getTrackedPointersCount() < 2) {
       return;
     }
+
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    } else if (sourceEvent) {
+      this.fail();
+    }
+
     this.tracker.track(event);
 
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
     super.onPointerMove(event);
   }
-  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+  protected onPointerOutOfBounds(
+    event: AdaptedEvent,
+    sourceEvent: PointerEvent | TouchEvent
+  ): void {
     if (this.tracker.getTrackedPointersCount() < 2) {
       return;
     }
+
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    } else if (sourceEvent) {
+      this.fail();
+    }
+
     this.tracker.track(event);
 
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);

src/web/handlers/RotationGestureHandler.ts

@@ -88,11 +88,20 @@ export default class RotationGestureHandler extends GestureHandler {
     this.rotationGestureDetector.onTouchEvent(event, this.tracker);
   }
 
-  protected onPointerMove(event: AdaptedEvent): void {
+  protected onPointerMove(
+    event: AdaptedEvent,
+    sourceEvent: PointerEvent | TouchEvent
+  ): void {
     if (this.tracker.getTrackedPointersCount() < 2) {
       return;
     }
 
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    } else if (sourceEvent) {
+      this.fail();
+    }
+
     if (this.getAnchorX()) {
       this.cachedAnchorX = this.getAnchorX();
     }
@@ -107,11 +116,20 @@ export default class RotationGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
-  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+  protected onPointerOutOfBounds(
+    event: AdaptedEvent,
+    sourceEvent: PointerEvent | TouchEvent
+  ): void {
     if (this.tracker.getTrackedPointersCount() < 2) {
       return;
     }
 
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    } else if (sourceEvent) {
+      this.fail();
+    }
+
     if (this.getAnchorX()) {
       this.cachedAnchorX = this.getAnchorX();
     }