Fix scroll interactions

src/web/handlers/GestureHandler.ts

@@ -272,7 +272,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;
 
@@ -285,29 +288,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:
@@ -324,31 +342,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 &&
@@ -770,6 +804,10 @@ export default abstract class GestureHandler {
     return this.currentState;
   }
 
+  public getLastSentState(): State | null {
+    return this.lastSentState;
+  }
+
   public isEnabled(): boolean {
     return this.enabled;
   }

src/web/handlers/PanGestureHandler.ts

@@ -246,9 +246,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();
@@ -263,7 +270,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);
 
@@ -286,7 +300,14 @@ export default class PanGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerMove(event: AdaptedEvent): void {
+  protected onPointerMove(
+    event: AdaptedEvent,
+    sourceEvent?: TouchEvent | PointerEvent
+  ): void {
+    if (sourceEvent?.cancelable) {
+      sourceEvent.preventDefault();
+    }
+
     this.tracker.track(event);
 
     this.lastX = this.tracker.getLastAvgX();
@@ -299,11 +320,18 @@ 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?.cancelable) {
+      sourceEvent.preventDefault();
+    }
+
     this.tracker.track(event);
 
     this.lastX = this.tracker.getLastAvgX();

src/web/tools/EventManager.ts

@@ -19,56 +19,142 @@ export default abstract class EventManager<T> {
     touchEventType?: TouchEventType
   ): AdaptedEvent;
 
-  protected onPointerDown(_event: AdaptedEvent): void {}
-  protected onPointerAdd(_event: AdaptedEvent): void {}
-  protected onPointerUp(_event: AdaptedEvent): void {}
-  protected onPointerRemove(_event: AdaptedEvent): void {}
-  protected onPointerMove(_event: AdaptedEvent): void {}
-  protected onPointerLeave(_event: AdaptedEvent): void {} // called only when pointer is pressed (or touching)
-  protected onPointerEnter(_event: AdaptedEvent): void {} // called only when pointer is pressed (or touching)
-  protected onPointerCancel(_event: AdaptedEvent): void {
+  protected onPointerDown(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
+  protected onPointerAdd(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
+  protected onPointerUp(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
+  protected onPointerRemove(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
+  protected onPointerMove(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
+  protected onPointerLeave(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {} // called only when pointer is pressed (or touching)
+  protected onPointerEnter(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {} // called only when pointer is pressed (or touching)
+  protected onPointerCancel(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {
     // When pointer cancel is triggered and there are more pointers on the view, only one pointer is cancelled
     // Because we want all pointers to be cancelled by that event, we are doing it manually by reseting handler and changing activePointersCounter to 0
     // Events that correspond to removing the pointer (pointerup, touchend) have condition, that they don't perform any action when activePointersCounter
     // is equal to 0. This prevents counter from going to negative values, when pointers are removed from view after one of them has been cancelled
   }
-  protected onPointerOutOfBounds(_event: AdaptedEvent): void {}
-  protected onPointerMoveOver(_event: AdaptedEvent): void {}
-  protected onPointerMoveOut(_event: AdaptedEvent): void {}
+  protected onPointerOutOfBounds(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
+  protected onPointerMoveOver(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
+  protected onPointerMoveOut(
+    _event: AdaptedEvent,
+    _sourceEvent?: TouchEvent | PointerEvent
+  ): void {}
 
-  public setOnPointerDown(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerDown(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerDown = callback;
   }
-  public setOnPointerAdd(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerAdd(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerAdd = callback;
   }
-  public setOnPointerUp(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerUp(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerUp = callback;
   }
-  public setOnPointerRemove(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerRemove(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerRemove = callback;
   }
-  public setOnPointerMove(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerMove(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerMove = callback;
   }
-  public setOnPointerLeave(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerLeave(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerLeave = callback;
   }
-  public setOnPointerEnter(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerEnter(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerEnter = callback;
   }
-  public setOnPointerCancel(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerCancel(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerCancel = callback;
   }
   public setOnPointerOutOfBounds(
-    callback: (event: AdaptedEvent) => void
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
   ): void {
     this.onPointerOutOfBounds = callback;
   }
-  public setOnPointerMoveOver(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerMoveOver(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerMoveOver = callback;
   }
-  public setOnPointerMoveOut(callback: (event: AdaptedEvent) => void): void {
+  public setOnPointerMoveOut(
+    callback: (
+      event: AdaptedEvent,
+      sourceEvent?: TouchEvent | PointerEvent
+    ) => void
+  ): void {
     this.onPointerMoveOut = callback;
   }
 

src/web/tools/GestureHandlerOrchestrator.ts

@@ -287,10 +287,7 @@ export default class GestureHandlerOrchestrator {
       return false;
     }
 
-    if (
-      handler !== otherHandler &&
-      (handler.isAwaiting() || handler.getState() === State.ACTIVE)
-    ) {
+    if (handler.isAwaiting() || handler.getState() === State.ACTIVE) {
       // For now it always returns false
       return handler.shouldBeCancelledByOther(otherHandler);
     }

src/web/tools/GestureHandlerWebDelegate.ts

@@ -31,10 +31,6 @@ export class GestureHandlerWebDelegate
     this.gestureHandler = handler;
     this.view = findNodeHandle(viewRef) as unknown as HTMLElement;
 
-    this.view.style['touchAction'] = 'none';
-    //@ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = 'none';
-
     const config = handler.getConfig();
 
     if (!config.userSelect) {