react-native-gesture-handler 2.12.0 → 2.13.0

package/src/web/handlers/GestureHandler.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { findNodeHandle } from 'react-native';
 import { State } from '../../State';
 import {
   Config,
@@ -15,26 +14,22 @@ import {
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import InteractionManager from '../tools/InteractionManager';
-import PointerEventManager from '../tools/PointerEventManager';
 import PointerTracker, { TrackerElement } from '../tools/PointerTracker';
-import TouchEventManager from '../tools/TouchEventManager';
-import { isPointerInBounds } from '../utils';
+import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 
 export default abstract class GestureHandler {
   private lastSentState: State | null = null;
   protected currentState: State = State.UNDETERMINED;
 
   protected shouldCancellWhenOutside = false;
-  protected hasCustomActivationCriteria: boolean;
+  protected hasCustomActivationCriteria = false;
   protected enabled = false;
 
-  private ref!: number;
+  private viewRef!: number;
   private propsRef!: React.RefObject<unknown>;
   private handlerTag!: number;
   protected config: Config = { enabled: false };
-  protected view!: HTMLElement;
 
-  protected eventManagers: EventManager[] = [];
   protected tracker: PointerTracker = new PointerTracker();
 
   // Orchestrator properties
@@ -44,59 +39,38 @@ export default abstract class GestureHandler {
   protected shouldResetProgress = false;
   protected pointerType: PointerType = PointerType.NONE;
 
-  public constructor() {
-    this.hasCustomActivationCriteria = false;
+  protected delegate: GestureHandlerDelegate<unknown>;
+
+  public constructor(delegate: GestureHandlerDelegate<unknown>) {
+    this.delegate = delegate;
   }
 
   //
   // Initializing handler
   //
 
-  protected init(ref: number, propsRef: React.RefObject<unknown>) {
+  protected init(viewRef: number, propsRef: React.RefObject<unknown>) {
     this.propsRef = propsRef;
-    this.ref = ref;
+    this.viewRef = viewRef;
 
     this.currentState = State.UNDETERMINED;
 
-    this.setView();
-    this.addEventManager(new PointerEventManager(this.view));
-    this.addEventManager(new TouchEventManager(this.view));
+    this.delegate.init(viewRef, this);
   }
 
-  private setView() {
-    if (!this.ref) {
-      throw new Error(
-        `Cannot find HTML Element for handler ${this.handlerTag}`
-      );
-    }
-
-    this.view = findNodeHandle(this.ref) as unknown as HTMLElement;
-    this.view.style['touchAction'] = 'none';
-    //@ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = 'none';
-
-    if (!this.config.userSelect) {
-      this.view.style['webkitUserSelect'] = 'none';
-      this.view.style['userSelect'] = 'none';
-    } else {
-      this.view.style['webkitUserSelect'] = this.config.userSelect;
-      this.view.style['userSelect'] = this.config.userSelect;
-    }
-  }
-
-  private addEventManager(manager: EventManager): void {
+  public attachEventManager(manager: EventManager<unknown>): void {
     manager.setOnPointerDown(this.onPointerDown.bind(this));
     manager.setOnPointerAdd(this.onPointerAdd.bind(this));
     manager.setOnPointerUp(this.onPointerUp.bind(this));
     manager.setOnPointerRemove(this.onPointerRemove.bind(this));
     manager.setOnPointerMove(this.onPointerMove.bind(this));
     manager.setOnPointerEnter(this.onPointerEnter.bind(this));
-    manager.setOnPointerOut(this.onPointerOut.bind(this));
+    manager.setOnPointerLeave(this.onPointerLeave.bind(this));
     manager.setOnPointerCancel(this.onPointerCancel.bind(this));
     manager.setOnPointerOutOfBounds(this.onPointerOutOfBounds.bind(this));
+    manager.setOnPointerMoveOver(this.onPointerMoveOver.bind(this));
+    manager.setOnPointerMoveOut(this.onPointerMoveOut.bind(this));
     manager.setListeners();
-
-    this.eventManagers.push(manager);
   }
 
   //
@@ -111,9 +85,7 @@ export default abstract class GestureHandler {
     this.tracker.resetTracker();
     this.onReset();
     this.resetProgress();
-    this.eventManagers.forEach((manager: EventManager) =>
-      manager.resetManager()
-    );
+    this.delegate.reset();
     this.currentState = State.UNDETERMINED;
   }
 
@@ -167,8 +139,11 @@ export default abstract class GestureHandler {
       this.currentState === State.ACTIVE ||
       this.currentState === State.BEGAN
     ) {
+      // Here the order of calling the delegate and moveToState is important.
+      // At this point we can use currentState as previuos state, because immediately after changing cursor we call moveToState method.
+      this.delegate.onFail();
+
       this.moveToState(State.FAILED, sendIfDisabled);
-      this.view.style.cursor = 'auto';
     }
 
     this.resetProgress();
@@ -184,8 +159,11 @@ export default abstract class GestureHandler {
       this.currentState === State.BEGAN
     ) {
       this.onCancel();
+
+      // Same as above - order matters
+      this.delegate.onCancel();
+
       this.moveToState(State.CANCELLED, sendIfDisabled);
-      this.view.style.cursor = 'auto';
     }
   }
 
@@ -194,8 +172,9 @@ export default abstract class GestureHandler {
       this.currentState === State.UNDETERMINED ||
       this.currentState === State.BEGAN
     ) {
+      this.delegate.onActivate();
+
       this.moveToState(State.ACTIVE);
-      this.view.style.cursor = 'grab';
     }
   }
 
@@ -204,8 +183,10 @@ export default abstract class GestureHandler {
       this.currentState === State.BEGAN ||
       this.currentState === State.ACTIVE
     ) {
+      // Same as above - order matters
+      this.delegate.onEnd();
+
       this.moveToState(State.END);
-      this.view.style.cursor = 'auto';
     }
 
     this.resetProgress();
@@ -326,7 +307,7 @@ export default abstract class GestureHandler {
       this.sendTouchEvent(event);
     }
   }
-  protected onPointerOut(event: AdaptedEvent): void {
+  protected onPointerLeave(event: AdaptedEvent): void {
     if (this.shouldCancellWhenOutside) {
       switch (this.currentState) {
         case State.ACTIVE:
@@ -362,6 +343,12 @@ export default abstract class GestureHandler {
       this.sendTouchEvent(event);
     }
   }
+  protected onPointerMoveOver(_event: AdaptedEvent): void {
+    // used only by hover gesture handler atm
+  }
+  protected onPointerMoveOut(_event: AdaptedEvent): void {
+    // used only by hover gesture handler atm
+  }
   private tryToSendMoveEvent(out: boolean): void {
     if (
       this.enabled &&
@@ -421,13 +408,13 @@ export default abstract class GestureHandler {
       nativeEvent: {
         numberOfPointers: this.tracker.getTrackedPointersCount(),
         state: newState,
-        pointerInside: isPointerInBounds(this.view, {
+        pointerInside: this.delegate.isPointerInBounds({
           x: this.tracker.getLastAvgX(),
           y: this.tracker.getLastAvgY(),
         }),
         ...this.transformNativeEvent(),
         handlerTag: this.handlerTag,
-        target: this.ref,
+        target: this.viewRef,
         oldState: newState !== oldState ? oldState : undefined,
       },
       timeStamp: Date.now(),
@@ -437,7 +424,7 @@ export default abstract class GestureHandler {
   private transformTouchEvent(
     event: AdaptedEvent
   ): ResultTouchEvent | undefined {
-    const rect = this.view.getBoundingClientRect();
+    const rect = this.delegate.measureView();
 
     const all: PointerData[] = [];
     const changed: PointerData[] = [];
@@ -457,8 +444,8 @@ export default abstract class GestureHandler {
 
       all.push({
         id: id,
-        x: element.lastX - rect.left,
-        y: element.lastY - rect.top,
+        x: element.lastX - rect.pageX,
+        y: element.lastY - rect.pageY,
         absoluteX: element.lastX,
         absoluteY: element.lastY,
       });
@@ -469,8 +456,8 @@ export default abstract class GestureHandler {
     if (event.eventType !== EventTypes.CANCEL) {
       changed.push({
         id: this.tracker.getMappedTouchEventId(event.pointerId),
-        x: event.x - rect.left,
-        y: event.y - rect.top,
+        x: event.x - rect.pageX,
+        y: event.y - rect.pageY,
         absoluteX: event.x,
         absoluteY: event.y,
       });
@@ -480,8 +467,8 @@ export default abstract class GestureHandler {
 
         changed.push({
           id: id,
-          x: element.lastX - rect.left,
-          y: element.lastY - rect.top,
+          x: element.lastX - rect.pageX,
+          y: element.lastY - rect.pageY,
           absoluteX: element.lastX,
           absoluteY: element.lastY,
         });
@@ -533,7 +520,7 @@ export default abstract class GestureHandler {
   }
 
   private cancelTouches(): void {
-    const rect = this.view.getBoundingClientRect();
+    const rect = this.delegate.measureView();
 
     const all: PointerData[] = [];
     const changed: PointerData[] = [];
@@ -549,16 +536,16 @@ export default abstract class GestureHandler {
 
       all.push({
         id: id,
-        x: element.lastX - rect.left,
-        y: element.lastY - rect.top,
+        x: element.lastX - rect.pageX,
+        y: element.lastY - rect.pageY,
         absoluteX: element.lastX,
         absoluteY: element.lastY,
       });
 
       changed.push({
         id: id,
-        x: element.lastX - rect.left,
-        y: element.lastY - rect.top,
+        x: element.lastX - rect.pageX,
+        y: element.lastY - rect.pageY,
         absoluteX: element.lastX,
         absoluteY: element.lastY,
       });
@@ -582,8 +569,16 @@ export default abstract class GestureHandler {
     invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
   }
 
-  protected transformNativeEvent() {
-    return {};
+  protected transformNativeEvent(): Record<string, unknown> {
+    // those properties are shared by most handlers and if not this method will be overriden
+    const rect = this.delegate.measureView();
+
+    return {
+      x: this.tracker.getLastAvgX() - rect.pageX,
+      y: this.tracker.getLastAvgY() - rect.pageY,
+      absoluteX: this.tracker.getLastAvgX(),
+      absoluteY: this.tracker.getLastAvgY(),
+    };
   }
 
   //
@@ -678,8 +673,7 @@ export default abstract class GestureHandler {
       return true;
     }
 
-    const width = this.view.getBoundingClientRect().width;
-    const height = this.view.getBoundingClientRect().height;
+    const { width, height } = this.delegate.measureView();
 
     let left = 0;
     let top = 0;
@@ -727,9 +721,9 @@ export default abstract class GestureHandler {
       }
     }
 
-    const rect: DOMRect = this.view.getBoundingClientRect();
-    const offsetX: number = this.tracker.getLastX() - rect.left;
-    const offsetY: number = this.tracker.getLastY() - rect.top;
+    const rect = this.delegate.measureView();
+    const offsetX: number = this.tracker.getLastX() - rect.pageX;
+    const offsetY: number = this.tracker.getLastY() - rect.pageY;
 
     if (
       offsetX >= left &&
@@ -742,14 +736,6 @@ export default abstract class GestureHandler {
     return false;
   }
 
-  public isPointerInBounds({ x, y }: { x: number; y: number }): boolean {
-    const rect: DOMRect = this.view.getBoundingClientRect();
-
-    return (
-      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
-    );
-  }
-
   protected resetConfig(): void {}
 
   //
@@ -759,24 +745,17 @@ export default abstract class GestureHandler {
   public getTag(): number {
     return this.handlerTag;
   }
+
   public setTag(tag: number): void {
     this.handlerTag = tag;
   }
 
-  protected getConfig() {
+  public getConfig() {
     return this.config;
   }
 
-  public getShouldEnableGestureOnSetup(): boolean {
-    throw new Error('Must override GestureHandler.shouldEnableGestureOnSetup');
-  }
-
-  public getView(): HTMLElement {
-    return this.view;
-  }
-
-  public getEventManagers(): EventManager[] {
-    return this.eventManagers;
+  public getDelegate(): GestureHandlerDelegate<unknown> {
+    return this.delegate;
   }
 
   public getTracker(): PointerTracker {
@@ -806,6 +785,7 @@ export default abstract class GestureHandler {
   protected setShouldCancelWhenOutside(shouldCancel: boolean) {
     this.shouldCancellWhenOutside = shouldCancel;
   }
+
   protected getShouldCancelWhenOutside(): boolean {
     return this.shouldCancellWhenOutside;
   }

package/src/web/handlers/HoverGestureHandler.ts

@@ -0,0 +1,43 @@
+import { State } from '../../../src/State';
+import { AdaptedEvent, Config } 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);
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+  }
+
+  protected onPointerMoveOver(event: AdaptedEvent): void {
+    GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
+
+    this.tracker.addToTracker(event);
+    super.onPointerMoveOver(event);
+
+    if (this.getState() === State.UNDETERMINED) {
+      this.begin();
+      this.activate();
+    }
+  }
+
+  protected onPointerMoveOut(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerMoveOut(event);
+
+    this.end();
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerMove(event);
+  }
+
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
+    this.reset();
+  }
+}

package/src/web/handlers/LongPressGestureHandler.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { State } from '../../State';
 import { AdaptedEvent, Config } from '../interfaces';
 
@@ -23,17 +24,14 @@ export default class LongPressGestureHandler extends GestureHandler {
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     super.init(ref, propsRef);
 
-    this.view.oncontextmenu = () => false;
+    if (Platform.OS === 'web') {
+      (this.delegate.getView() as HTMLElement).oncontextmenu = () => false;
+    }
   }
 
   protected transformNativeEvent() {
-    const rect: DOMRect = this.view.getBoundingClientRect();
-
     return {
-      x: this.tracker.getLastAvgX() - rect.left,
-      y: this.tracker.getLastAvgY() - rect.top,
-      absoluteX: this.tracker.getLastAvgX(),
-      absoluteY: this.tracker.getLastAvgY(),
+      ...super.transformNativeEvent(),
       duration: Date.now() - this.startTime,
     };
   }

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
 import { AdaptedEvent, Config } from '../interfaces';
@@ -20,12 +21,18 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
     this.setShouldCancelWhenOutside(true);
 
-    this.view.style['touchAction'] = 'auto';
+    if (Platform.OS !== 'web') {
+      return;
+    }
+
+    const view = this.delegate.getView() as HTMLElement;
+
+    view.style['touchAction'] = 'auto';
 
     //@ts-ignore Turns on defualt touch behavior on Safari
-    this.view.style['WebkitTouchCallout'] = 'auto';
+    view.style['WebkitTouchCallout'] = 'auto';
 
-    if (this.view.hasAttribute('role')) {
+    if (view.hasAttribute('role')) {
       this.buttonRole = true;
     } else {
       this.buttonRole = false;
@@ -89,7 +96,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerOut(): void {
+  protected onPointerLeave(): void {
     if (
       this.currentState === State.BEGAN ||
       this.currentState === State.ACTIVE

package/src/web/handlers/PanGestureHandler.ts

@@ -186,20 +186,15 @@ export default class PanGestureHandler extends GestureHandler {
   }
 
   protected transformNativeEvent() {
-    const rect: DOMRect = this.view.getBoundingClientRect();
-
     const translationX: number = this.getTranslationX();
     const translationY: number = this.getTranslationY();
 
     return {
+      ...super.transformNativeEvent(),
       translationX: isNaN(translationX) ? 0 : translationX,
       translationY: isNaN(translationY) ? 0 : translationY,
-      absoluteX: this.tracker.getLastAvgX(),
-      absoluteY: this.tracker.getLastAvgY(),
       velocityX: this.velocityX,
       velocityY: this.velocityY,
-      x: this.tracker.getLastAvgX() - rect.left,
-      y: this.tracker.getLastAvgY() - rect.top,
     };
   }
 

package/src/web/handlers/TapGestureHandler.ts

@@ -79,17 +79,6 @@ export default class TapGestureHandler extends GestureHandler {
     this.minNumberOfPointers = DEFAULT_MIN_NUMBER_OF_POINTERS;
   }
 
-  protected transformNativeEvent() {
-    const rect: DOMRect = this.view.getBoundingClientRect();
-
-    return {
-      x: this.tracker.getLastAvgX() - rect.left,
-      y: this.tracker.getLastAvgY() - rect.top,
-      absoluteX: this.tracker.getLastAvgX(),
-      absoluteY: this.tracker.getLastAvgY(),
-    };
-  }
-
   private clearTimeouts(): void {
     clearTimeout(this.waitTimeout);
     clearTimeout(this.delayTimeout);

package/src/web/interfaces.ts

@@ -1,4 +1,4 @@
-import { UserSelect } from '../handlers/gestureHandlerCommon';
+import { UserSelect, ActiveCursor } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
 
@@ -22,6 +22,7 @@ type ConfigArgs =
   | boolean
   | HitSlop
   | UserSelect
+  | ActiveCursor
   | Directions
   | Handler[]
   | null
@@ -34,6 +35,7 @@ export interface Config extends Record<string, ConfigArgs> {
   hitSlop?: HitSlop;
   shouldCancelWhenOutside?: boolean;
   userSelect?: UserSelect;
+  activeCursor?: ActiveCursor;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;
@@ -144,7 +146,7 @@ export enum EventTypes {
   ADDITIONAL_POINTER_UP,
   MOVE,
   ENTER,
-  OUT,
+  LEAVE,
   CANCEL,
 }
 

package/src/web/tools/EventManager.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 
-export default abstract class EventManager {
-  protected readonly view: HTMLElement;
+export default abstract class EventManager<T> {
+  protected readonly view: T;
   protected pointersInBounds: number[] = [];
   protected activePointersCounter: number;
 
-  constructor(view: HTMLElement) {
+  constructor(view: T) {
     this.view = view;
     this.activePointersCounter = 0;
   }
@@ -24,8 +24,8 @@ export default abstract class EventManager {
   protected onPointerUp(_event: AdaptedEvent): void {}
   protected onPointerRemove(_event: AdaptedEvent): void {}
   protected onPointerMove(_event: AdaptedEvent): void {}
-  protected onPointerOut(_event: AdaptedEvent): void {}
-  protected onPointerEnter(_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 {
     // 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
@@ -33,6 +33,8 @@ export default abstract class EventManager {
     // 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 {}
 
   public setOnPointerDown(callback: (event: AdaptedEvent) => void): void {
     this.onPointerDown = callback;
@@ -49,8 +51,8 @@ export default abstract class EventManager {
   public setOnPointerMove(callback: (event: AdaptedEvent) => void): void {
     this.onPointerMove = callback;
   }
-  public setOnPointerOut(callback: (event: AdaptedEvent) => void): void {
-    this.onPointerOut = callback;
+  public setOnPointerLeave(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerLeave = callback;
   }
   public setOnPointerEnter(callback: (event: AdaptedEvent) => void): void {
     this.onPointerEnter = callback;
@@ -63,6 +65,12 @@ export default abstract class EventManager {
   ): void {
     this.onPointerOutOfBounds = callback;
   }
+  public setOnPointerMoveOver(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerMoveOver = callback;
+  }
+  public setOnPointerMoveOut(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerMoveOut = callback;
+  }
 
   protected markAsInBounds(pointerId: number): void {
     if (this.pointersInBounds.indexOf(pointerId) >= 0) {

package/src/web/tools/GestureHandlerDelegate.ts

@@ -0,0 +1,23 @@
+import type GestureHandler from '../handlers/GestureHandler';
+
+export interface MeasureResult {
+  pageX: number;
+  pageY: number;
+  width: number;
+  height: number;
+}
+
+export interface GestureHandlerDelegate<T> {
+  getView(): T;
+
+  init(viewRef: number, handler: GestureHandler): void;
+  isPointerInBounds({ x, y }: { x: number; y: number }): boolean;
+  measureView(): MeasureResult;
+  reset(): void;
+
+  onBegin(): void;
+  onActivate(): void;
+  onEnd(): void;
+  onCancel(): void;
+  onFail(): void;
+}

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -3,7 +3,6 @@ import { PointerType } from '../interfaces';
 
 import GestureHandler from '../handlers/GestureHandler';
 import PointerTracker from './PointerTracker';
-import { isPointerInBounds } from '../utils';
 
 export default class GestureHandlerOrchestrator {
   private static instance: GestureHandlerOrchestrator;
@@ -301,7 +300,7 @@ export default class GestureHandlerOrchestrator {
 
     if (
       !PointerTracker.shareCommonPointers(handlerPointers, otherPointers) &&
-      handler.getView() !== otherHandler.getView()
+      handler.getDelegate().getView() !== otherHandler.getDelegate().getView()
     ) {
       return this.checkOverlap(handler, otherHandler);
     }
@@ -329,8 +328,10 @@ export default class GestureHandlerOrchestrator {
       const handlerY: number = handler.getTracker().getLastY(pointer);
 
       if (
-        isPointerInBounds(handler.getView(), { x: handlerX, y: handlerY }) &&
-        isPointerInBounds(otherHandler.getView(), { x: handlerX, y: handlerY })
+        handler.getDelegate().isPointerInBounds({ x: handlerX, y: handlerY }) &&
+        otherHandler
+          .getDelegate()
+          .isPointerInBounds({ x: handlerX, y: handlerY })
       ) {
         overlap = true;
       }
@@ -341,8 +342,8 @@ export default class GestureHandlerOrchestrator {
       const otherY: number = otherHandler.getTracker().getLastY(pointer);
 
       if (
-        isPointerInBounds(handler.getView(), { x: otherX, y: otherY }) &&
-        isPointerInBounds(otherHandler.getView(), { x: otherX, y: otherY })
+        handler.getDelegate().isPointerInBounds({ x: otherX, y: otherY }) &&
+        otherHandler.getDelegate().isPointerInBounds({ x: otherX, y: otherY })
       ) {
         overlap = true;
       }