Remove circular dependencies on web

package.json

@@ -98,6 +98,7 @@
     "husky": "^8.0.1",
     "jest": "^26.6.3",
     "lint-staged": "^12.3.2",
+    "madge": "^6.1.0",
     "prettier": "^2.7.1",
     "react": "18.2.0",
     "react-dom": "^16.12.0",

src/RNGestureHandlerModule.web.ts

@@ -1,55 +1,14 @@
 import React from 'react';
 
-import { ActionType } from './ActionType';
+import type { ActionType } from './ActionType';
 import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
-
-//GestureHandlers
+import { Gestures, HammerGestures } from './web/Gestures';
+import type { Config } from './web/interfaces';
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
-import PanGestureHandler from './web/handlers/PanGestureHandler';
-import TapGestureHandler from './web/handlers/TapGestureHandler';
-import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
-import PinchGestureHandler from './web/handlers/PinchGestureHandler';
-import RotationGestureHandler from './web/handlers/RotationGestureHandler';
-import FlingGestureHandler from './web/handlers/FlingGestureHandler';
-import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
-import ManualGestureHandler from './web/handlers/ManualGestureHandler';
-import HoverGestureHandler from './web/handlers/HoverGestureHandler';
-
-//Hammer Handlers
 import * as HammerNodeManager from './web_hammer/NodeManager';
-import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
-import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
-import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
-import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
-import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
-import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
-import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
-import { Config } from './web/interfaces';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
-export const Gestures = {
-  NativeViewGestureHandler,
-  PanGestureHandler,
-  TapGestureHandler,
-  LongPressGestureHandler,
-  PinchGestureHandler,
-  RotationGestureHandler,
-  FlingGestureHandler,
-  ManualGestureHandler,
-  HoverGestureHandler,
-};
-
-export const HammerGestures = {
-  NativeViewGestureHandler: HammerNativeViewGestureHandler,
-  PanGestureHandler: HammerPanGestureHandler,
-  TapGestureHandler: HammerTapGestureHandler,
-  LongPressGestureHandler: HammerLongPressGestureHandler,
-  PinchGestureHandler: HammerPinchGestureHandler,
-  RotationGestureHandler: HammerRotationGestureHandler,
-  FlingGestureHandler: HammerFlingGestureHandler,
-};
-
 export default {
   handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
     console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
@@ -109,7 +68,7 @@
 
     if (isNewWebImplementationEnabled()) {
       //@ts-ignore Types should be HTMLElement or React.Component
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
       //@ts-ignore Types should be HTMLElement or React.Component
       HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);

src/components/DrawerLayout.tsx

@@ -28,6 +28,7 @@
   HandlerStateChangeEvent,
   UserSelect,
   ActiveCursor,
+  MouseButton,
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
@@ -38,7 +39,6 @@
   TapGestureHandlerEventPayload,
 } from '../handlers/TapGestureHandler';
 import { State } from '../State';
-import { MouseButton } from '../web/interfaces';
 
 const DRAG_TOSS = 0.05;
 
@@ -332,7 +332,7 @@
       );
 
       const dragOffsetFromOnStartPosition = startPositionX.interpolate({
         inputRange: [drawerWidth! - 1, drawerWidth!, drawerWidth! + 1],
         outputRange: [0, 0, 1],
       });
       translationX = Animated.add(
@@ -342,7 +342,7 @@
     }
 
     this.openValue = Animated.add(translationX, drawerTranslation).interpolate({
       inputRange: [0, drawerWidth!],
       outputRange: [0, 1],
       extrapolate: 'clamp',
     });
@@ -354,7 +354,7 @@
         ev: NativeSyntheticEvent<PanGestureHandlerEventPayload>
       ) => void;
     } = {
       useNativeDriver: props.useNativeAnimations!,
     };
 
     if (this.props.onDrawerSlide) {
@@ -432,11 +432,11 @@
 
     if (drawerType === 'front') {
       dragOffsetBasedOnStart =
         gestureStartX > drawerWidth! ? gestureStartX - drawerWidth! : 0;
     }
 
     const startOffsetX =
       dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth! : 0);
     const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
 
     const shouldOpen = projOffsetX > drawerWidth! / 2;

src/handlers/createHandler.tsx

@@ -9,7 +9,6 @@ import { customDirectEventTypes } from './customDirectEventTypes';
 // @ts-ignore - it isn't typed by TS & don't have definitelyTyped types
 import deepEqual from 'lodash/isEqual';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import type RNGestureHandlerModuleWeb from '../RNGestureHandlerModule.web';
 import { State } from '../State';
 import {
   handlerIDToTag,
@@ -154,6 +153,14 @@ type InternalEventHandlers = {
   onGestureHandlerStateChange?: (event: any) => void;
 };
 
+type AttachGestureHandlerWeb = (
+  handlerTag: number,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  newView: any,
+  _actionType: ActionType,
+  propsRef: React.RefObject<unknown>
+) => void;
+
 const UNRESOLVED_REFS_RETRY_LIMIT = 1;
 
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
@@ -320,7 +327,7 @@ export default function createHandler<
       if (Platform.OS === 'web') {
         // typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
         (
-          RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler
+          RNGestureHandlerModule.attachGestureHandler as AttachGestureHandlerWeb
         )(
           this.handlerTag,
           newViewTag,

src/handlers/gestureHandlerCommon.ts

@@ -12,7 +12,6 @@ import { handlerIDToTag } from './handlersRegistry';
 import { toArray } from '../utils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
-import { MouseButton } from '../web/interfaces';
 import { PointerType } from '../PointerType';
 
 const commonProps = [
@@ -114,6 +113,15 @@ export type ActiveCursor =
   | 'zoom-in'
   | 'zoom-out';
 
+export enum MouseButton {
+  LEFT = 1,
+  RIGHT = 2,
+  MIDDLE = 4,
+  BUTTON_4 = 8,
+  BUTTON_5 = 16,
+  ALL = 31,
+}
+
 export type TouchAction =
   | 'auto'
   | 'none'

src/handlers/gestures/gesture.ts

@@ -7,6 +7,7 @@ import {
   GestureStateChangeEvent,
   GestureUpdateEvent,
   ActiveCursor,
+  MouseButton,
 } from '../gestureHandlerCommon';
 import { getNextHandlerTag } from '../handlersRegistry';
 import { GestureStateManagerType } from './gestureStateManager';
@@ -17,7 +18,6 @@ import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
 import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
 import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
 import { isRemoteDebuggingEnabled } from '../../utils';
-import { MouseButton } from '../../web/interfaces';
 
 export type GestureType =
   | BaseGesture<Record<string, unknown>>

src/index.ts

@@ -2,7 +2,6 @@ import { initialize } from './init';
 
 export { Directions } from './Directions';
 export { State } from './State';
-export { MouseButton } from './web/interfaces';
 export { PointerType } from './PointerType';
 export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
 export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
@@ -19,6 +18,7 @@ export type {
   // new api event types
   GestureUpdateEvent,
   GestureStateChangeEvent,
+  MouseButton,
 } from './handlers/gestureHandlerCommon';
 export type { GestureType } from './handlers/gestures/gesture';
 export type {

src/web/Gestures.ts

@@ -0,0 +1,41 @@
+// Gesture Handlers
+import PanGestureHandler from './handlers/PanGestureHandler';
+import TapGestureHandler from './handlers/TapGestureHandler';
+import LongPressGestureHandler from './handlers/LongPressGestureHandler';
+import PinchGestureHandler from './handlers/PinchGestureHandler';
+import RotationGestureHandler from './handlers/RotationGestureHandler';
+import FlingGestureHandler from './handlers/FlingGestureHandler';
+import NativeViewGestureHandler from './handlers/NativeViewGestureHandler';
+import ManualGestureHandler from './handlers/ManualGestureHandler';
+import HoverGestureHandler from './handlers/HoverGestureHandler';
+
+//Hammer Handlers
+import HammerNativeViewGestureHandler from '../web_hammer/NativeViewGestureHandler';
+import HammerPanGestureHandler from '../web_hammer/PanGestureHandler';
+import HammerTapGestureHandler from '../web_hammer/TapGestureHandler';
+import HammerLongPressGestureHandler from '../web_hammer/LongPressGestureHandler';
+import HammerPinchGestureHandler from '../web_hammer/PinchGestureHandler';
+import HammerRotationGestureHandler from '../web_hammer/RotationGestureHandler';
+import HammerFlingGestureHandler from '../web_hammer/FlingGestureHandler';
+
+export const Gestures = {
+  NativeViewGestureHandler,
+  PanGestureHandler,
+  TapGestureHandler,
+  LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
+  FlingGestureHandler,
+  ManualGestureHandler,
+  HoverGestureHandler,
+};
+
+export const HammerGestures = {
+  NativeViewGestureHandler: HammerNativeViewGestureHandler,
+  PanGestureHandler: HammerPanGestureHandler,
+  TapGestureHandler: HammerTapGestureHandler,
+  LongPressGestureHandler: HammerLongPressGestureHandler,
+  PinchGestureHandler: HammerPinchGestureHandler,
+  RotationGestureHandler: HammerRotationGestureHandler,
+  FlingGestureHandler: HammerFlingGestureHandler,
+};

src/web/handlers/GestureHandler.ts

@@ -9,16 +9,17 @@ import {
   ResultTouchEvent,
   TouchEventType,
   EventTypes,
-  MouseButton,
 } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import InteractionManager from '../tools/InteractionManager';
 import PointerTracker, { TrackerElement } from '../tools/PointerTracker';
 import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import GestureHandlerType from './GestureHandlerType';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import { PointerType } from '../../PointerType';
 
-export default abstract class GestureHandler {
+export default abstract class GestureHandler implements GestureHandlerType {
   private lastSentState: State | null = null;
   protected currentState: State = State.UNDETERMINED;
 
@@ -40,9 +41,11 @@ export default abstract class GestureHandler {
   protected shouldResetProgress = false;
   protected pointerType: PointerType = PointerType.MOUSE;
 
-  protected delegate: GestureHandlerDelegate<unknown>;
+  protected delegate: GestureHandlerDelegate<unknown, GestureHandlerType>;
 
-  public constructor(delegate: GestureHandlerDelegate<unknown>) {
+  public constructor(
+    delegate: GestureHandlerDelegate<unknown, GestureHandlerType>
+  ) {
     this.delegate = delegate;
   }
 
@@ -229,7 +232,7 @@ export default abstract class GestureHandler {
     this.activationIndex = value;
   }
 
-  public shouldWaitForHandlerFailure(handler: GestureHandler): boolean {
+  public shouldWaitForHandlerFailure(handler: GestureHandlerType): boolean {
     if (handler === this) {
       return false;
     }
@@ -240,7 +243,7 @@ export default abstract class GestureHandler {
     );
   }
 
-  public shouldRequireToWaitForFailure(handler: GestureHandler): boolean {
+  public shouldRequireToWaitForFailure(handler: GestureHandlerType): boolean {
     if (handler === this) {
       return false;
     }
@@ -251,7 +254,7 @@ export default abstract class GestureHandler {
     );
   }
 
-  public shouldRecognizeSimultaneously(handler: GestureHandler): boolean {
+  public shouldRecognizeSimultaneously(handler: GestureHandlerType): boolean {
     if (handler === this) {
       return true;
     }
@@ -262,7 +265,7 @@ export default abstract class GestureHandler {
     );
   }
 
-  public shouldBeCancelledByOther(handler: GestureHandler): boolean {
+  public shouldBeCancelledByOther(handler: GestureHandlerType): boolean {
     if (handler === this) {
       return false;
     }
@@ -772,7 +775,7 @@ export default abstract class GestureHandler {
     return this.config;
   }
 
-  public getDelegate(): GestureHandlerDelegate<unknown> {
+  public getDelegate(): GestureHandlerDelegate<unknown, GestureHandlerType> {
     return this.delegate;
   }
 

src/web/handlers/GestureHandlerType.ts

@@ -0,0 +1,48 @@
+import type { PointerType } from '../../PointerType';
+import type { MouseButton } from '../../handlers/gestureHandlerCommon';
+import type { State } from '../../State';
+import type { Config } from '../interfaces';
+import type EventManager from '../tools/EventManager';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import type PointerTracker from '../tools/PointerTracker';
+
+export default interface GestureHandlerType {
+  getTag: () => number;
+  getState: () => State;
+  getConfig: () => Config;
+  getDelegate: () => GestureHandlerDelegate<unknown, this>;
+
+  attachEventManager: (manager: EventManager<unknown>) => void;
+
+  isButtonInConfig: (
+    mouseButton: MouseButton | undefined
+  ) => boolean | number | undefined;
+  getPointerType: () => PointerType;
+
+  getTracker: () => PointerTracker;
+  getTrackedPointersID: () => number[];
+
+  begin: () => void;
+  activate: () => void;
+  end: () => void;
+  fail: () => void;
+  cancel: () => void;
+
+  reset: () => void;
+  isEnabled: () => boolean;
+  isActive: () => boolean;
+  setActive: (value: boolean) => void;
+  isAwaiting: () => boolean;
+  setAwaiting: (value: boolean) => void;
+  setActivationIndex: (value: number) => void;
+  setShouldResetProgress: (value: boolean) => void;
+
+  shouldWaitForHandlerFailure: (handler: GestureHandlerType) => boolean;
+  shouldRequireToWaitForFailure: (handler: GestureHandlerType) => boolean;
+  shouldRecognizeSimultaneously: (handler: GestureHandlerType) => boolean;
+  shouldBeCancelledByOther: (handler: GestureHandlerType) => boolean;
+
+  sendEvent: (newState: State, oldState: State) => void;
+
+  updateGestureConfig: (config: Config) => void;
+}

src/web/interfaces.ts

@@ -1,6 +1,7 @@
 import {
   UserSelect,
   ActiveCursor,
+  MouseButton,
   TouchAction,
 } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
@@ -139,15 +140,6 @@ export interface AdaptedEvent {
   touchEventType?: TouchEventType;
 }
 
-export enum MouseButton {
-  LEFT = 1,
-  RIGHT = 2,
-  MIDDLE = 4,
-  BUTTON_4 = 8,
-  BUTTON_5 = 16,
-  ALL = 31,
-}
-
 export enum EventTypes {
   DOWN,
   ADDITIONAL_POINTER_DOWN,

src/web/tools/GestureHandlerDelegate.ts

@@ -1,4 +1,3 @@
-import type GestureHandler from '../handlers/GestureHandler';
 import { Config } from '../interfaces';
 
 export interface MeasureResult {
@@ -8,10 +7,10 @@ export interface MeasureResult {
   height: number;
 }
 
-export interface GestureHandlerDelegate<T> {
+export interface GestureHandlerDelegate<T, S> {
   getView(): T;
 
-  init(viewRef: number, handler: GestureHandler): void;
+  init(viewRef: number, handler: S): void;
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean;
   measureView(): MeasureResult;
   reset(): void;