react-native-gesture-handler 2.12.0 → 2.13.0

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -0,0 +1,115 @@
+import { findNodeHandle } from 'react-native';
+import type GestureHandler from '../handlers/GestureHandler';
+import {
+  GestureHandlerDelegate,
+  MeasureResult,
+} from './GestureHandlerDelegate';
+import PointerEventManager from './PointerEventManager';
+import TouchEventManager from './TouchEventManager';
+import { State } from '../../State';
+import { isPointerInBounds } from '../utils';
+import EventManager from './EventManager';
+
+export class GestureHandlerWebDelegate
+  implements GestureHandlerDelegate<HTMLElement>
+{
+  private view!: HTMLElement;
+  private gestureHandler!: GestureHandler;
+  private eventManagers: EventManager<unknown>[] = [];
+
+  getView(): HTMLElement {
+    return this.view;
+  }
+
+  init(viewRef: number, handler: GestureHandler): void {
+    if (!viewRef) {
+      throw new Error(
+        `Cannot find HTML Element for handler ${handler.getTag()}`
+      );
+    }
+
+    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) {
+      this.view.style['webkitUserSelect'] = 'none';
+      this.view.style['userSelect'] = 'none';
+    } else {
+      this.view.style['webkitUserSelect'] = config.userSelect;
+      this.view.style['userSelect'] = config.userSelect;
+    }
+
+    this.eventManagers.push(new PointerEventManager(this.view));
+    this.eventManagers.push(new TouchEventManager(this.view));
+
+    this.eventManagers.forEach((manager) =>
+      this.gestureHandler.attachEventManager(manager)
+    );
+  }
+
+  isPointerInBounds({ x, y }: { x: number; y: number }): boolean {
+    return isPointerInBounds(this.view, { x, y });
+  }
+
+  measureView(): MeasureResult {
+    const rect = this.view.getBoundingClientRect();
+
+    return {
+      pageX: rect.left,
+      pageY: rect.top,
+      width: rect.width,
+      height: rect.height,
+    };
+  }
+
+  reset(): void {
+    this.eventManagers.forEach((manager: EventManager<unknown>) =>
+      manager.resetManager()
+    );
+  }
+
+  tryResetCursor() {
+    const config = this.gestureHandler.getConfig();
+
+    if (
+      config.activeCursor &&
+      config.activeCursor !== 'auto' &&
+      this.gestureHandler.getState() === State.ACTIVE
+    ) {
+      this.view.style.cursor = 'auto';
+    }
+  }
+
+  onBegin(): void {
+    // no-op for now
+  }
+
+  onActivate(): void {
+    const config = this.gestureHandler.getConfig();
+
+    if (
+      (!this.view.style.cursor || this.view.style.cursor === 'auto') &&
+      config.activeCursor
+    ) {
+      this.view.style.cursor = config.activeCursor;
+    }
+  }
+
+  onEnd(): void {
+    this.tryResetCursor();
+  }
+
+  onCancel(): void {
+    this.tryResetCursor();
+  }
+
+  onFail(): void {
+    this.tryResetCursor();
+  }
+}

package/src/web/tools/PointerEventManager.ts

@@ -1,13 +1,8 @@
-import {
-  AdaptedEvent,
-  EventTypes,
-  MouseButtons,
-  PointerType,
-} from '../interfaces';
+import { AdaptedEvent, EventTypes, PointerType } from '../interfaces';
 import EventManager from './EventManager';
 import { isPointerInBounds } from '../utils';
 
-export default class PointerEventManager extends EventManager {
+export default class PointerEventManager extends EventManager<HTMLElement> {
   private trackedPointers = new Set<number>();
 
   public setListeners(): void {
@@ -69,14 +64,24 @@ export default class PointerEventManager extends EventManager {
         return;
       }
 
-      if (
-        event.pointerType === PointerType.MOUSE &&
-        event.buttons !== MouseButtons.LEFT
-      ) {
-        return;
-      }
-
       const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.MOVE);
+      const target = event.target as HTMLElement;
+
+      // You may be wondering why are we setting pointer capture here, when we
+      // already set it in `pointerdown` handler. Well, that's a great question,
+      // for which I don't have an answer. Specification (https://www.w3.org/TR/pointerevents2/#dom-element-setpointercapture)
+      // says that the requirement for `setPointerCapture` to work is that pointer
+      // must be in 'active buttons state`, otherwise it will fail silently, which
+      // is lovely. Obviously, when `pointerdown` is fired, one of the buttons
+      // (when using mouse) is pressed, but that doesn't mean that `setPointerCapture`
+      // will succeed, for some reason. Since it fails silently, we don't actually know
+      // if it worked or not (there's `gotpointercapture` event, but the complexity of
+      // incorporating it here seems stupid), so we just call it again here, every time
+      // pointer moves until it succeeds.
+      // God, I do love web development.
+      if (!target.hasPointerCapture(event.pointerId)) {
+        target.setPointerCapture(event.pointerId);
+      }
 
       const inBounds: boolean = isPointerInBounds(this.view, {
         x: adaptedEvent.x,
@@ -97,8 +102,8 @@ export default class PointerEventManager extends EventManager {
         }
       } else {
         if (pointerIndex >= 0) {
-          adaptedEvent.eventType = EventTypes.OUT;
-          this.onPointerOut(adaptedEvent);
+          adaptedEvent.eventType = EventTypes.LEAVE;
+          this.onPointerLeave(adaptedEvent);
           this.markAsOutOfBounds(adaptedEvent.pointerId);
         } else {
           this.onPointerOutOfBounds(adaptedEvent);
@@ -122,6 +127,31 @@ export default class PointerEventManager extends EventManager {
       this.trackedPointers.clear();
     });
 
+    // onPointerEnter and onPointerLeave are triggered by a custom logic responsible for
+    // handling shouldCancelWhenOutside flag, and are unreliable unless the pointer is down.
+    // We therefore use pointerenter and pointerleave events to handle the hover gesture,
+    // mapping them to onPointerMoveOver and onPointerMoveOut respectively.
+
+    this.view.addEventListener('pointerenter', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
+
+      this.onPointerMoveOver(adaptedEvent);
+    });
+
+    this.view.addEventListener('pointerleave', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
+
+      this.onPointerMoveOut(adaptedEvent);
+    });
+
     this.view.addEventListener(
       'lostpointercapture',
       (event: PointerEvent): void => {

package/src/web/tools/TouchEventManager.ts

@@ -8,7 +8,7 @@ import {
 import EventManager from './EventManager';
 import { isPointerInBounds } from '../utils';
 
-export default class TouchEventManager extends EventManager {
+export default class TouchEventManager extends EventManager<HTMLElement> {
   public setListeners(): void {
     this.view.addEventListener('touchstart', (event: TouchEvent) => {
       for (let i = 0; i < event.changedTouches.length; ++i) {
@@ -75,8 +75,8 @@ export default class TouchEventManager extends EventManager {
           }
         } else {
           if (pointerIndex >= 0) {
-            adaptedEvent.eventType = EventTypes.OUT;
-            this.onPointerOut(adaptedEvent);
+            adaptedEvent.eventType = EventTypes.LEAVE;
+            this.onPointerLeave(adaptedEvent);
             this.markAsOutOfBounds(adaptedEvent.pointerId);
           } else {
             this.onPointerOutOfBounds(adaptedEvent);