@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1 → 2.12.6-2

package/harmony/gesture_handler/src/main/ets/GestureHandlerArkUIAdapter.ets

@@ -0,0 +1,202 @@
+import { Point } from "rnoh"
+import { GestureHandler } from "./GestureHandler"
+import { AdaptedEvent, EventType, PointerType, TouchEventType, Touch } from "./Event"
+import { View } from "./View"
+import { RNGHLogger } from "./RNGHLogger"
+
+export class GestureHandlerArkUIAdapter {
+  private activePointerIds = new Set<number>()
+  private pointersIdInBounds = new Set<number>()
+  private gestureHandler: GestureHandler
+  private view: View
+  private logger: RNGHLogger
+
+  constructor(gestureHandler: GestureHandler, view: View, logger: RNGHLogger) {
+    logger.info("constructor")
+    this.gestureHandler = gestureHandler
+    this.view = view
+    this.logger = logger
+  }
+
+  handleTouch(e: TouchEvent) {
+    for (const changedTouch of e.changedTouches) {
+      if (this.shouldSkipTouch(changedTouch)) continue;
+      const wasInBounds = this.pointersIdInBounds.has(changedTouch.id)
+      const isInBounds = this.isInBounds({ x: changedTouch.windowX, y: changedTouch.windowY })
+      this.logger.info(`handleTouch: ${JSON.stringify({ type: changedTouch.type, wasInBounds, isInBounds })}`)
+      const adaptedEvent = this.adaptTouchEvent(e, changedTouch)
+      switch (adaptedEvent.eventType) {
+        case EventType.DOWN:
+          this.gestureHandler.onPointerDown(adaptedEvent)
+          break;
+        case EventType.ADDITIONAL_POINTER_DOWN:
+          this.gestureHandler.onAdditionalPointerAdd(adaptedEvent)
+          break;
+        case EventType.UP:
+          this.gestureHandler.onPointerUp(adaptedEvent)
+          break;
+        case EventType.ADDITIONAL_POINTER_UP:
+          this.gestureHandler.onAdditionalPointerRemove(adaptedEvent)
+          break;
+        case EventType.MOVE:
+          if (!wasInBounds && !isInBounds)
+            this.gestureHandler.onPointerOutOfBounds(adaptedEvent)
+          else
+            this.gestureHandler.onPointerMove(adaptedEvent)
+          break;
+        case EventType.ENTER:
+          this.gestureHandler.onPointerEnter(adaptedEvent)
+          break;
+        case EventType.OUT:
+          this.gestureHandler.onPointerOut(adaptedEvent)
+          break;
+        case EventType.CANCEL:
+          this.gestureHandler.onPointerCancel(adaptedEvent)
+          break;
+      }
+    }
+  }
+
+  private shouldSkipTouch(changedTouch: TouchObject): boolean {
+    return changedTouch.type === TouchType.Down && !this.isInBounds({
+      x: changedTouch.windowX,
+      y: changedTouch.windowY
+    })
+  }
+
+  private adaptTouchEvent(e: TouchEvent, changedTouch: TouchObject): AdaptedEvent {
+    const xAbsolute = changedTouch.windowX
+    const yAbsolute = changedTouch.windowY
+
+    const eventType = this.mapTouchTypeToEventType(
+      changedTouch.type,
+      this.activePointerIds.size,
+      this.isInBounds({ x: xAbsolute, y: yAbsolute }),
+      this.pointersIdInBounds.has(changedTouch.id)
+    )
+    this.updateIsInBoundsByPointerId(
+      changedTouch.type,
+      changedTouch.id,
+      xAbsolute,
+      yAbsolute
+    )
+    this.updateActivePointers(changedTouch.type, changedTouch.id)
+    return {
+      x: xAbsolute,
+      y: yAbsolute,
+      offsetX: xAbsolute - this.view.getBoundingRect().x,
+      offsetY: yAbsolute - this.view.getBoundingRect().y,
+      pointerId: changedTouch.id,
+      eventType: eventType,
+      pointerType: PointerType.TOUCH,
+      buttons: 0,
+      time: e.timestamp,
+      allTouches: e.touches.map((touch) => this.mapTouchObjectToTouch(touch)),
+      changedTouches: e.changedTouches.map((touch) => this.mapTouchObjectToTouch(touch)),
+      touchEventType: this.mapTouchTypeToTouchEventType(changedTouch.type)
+    }
+  }
+
+  private updateIsInBoundsByPointerId(
+    touchType: TouchType,
+    pointerId: number,
+    x: number,
+    y: number
+  ) {
+    switch (touchType) {
+      case TouchType.Down:
+        if (this.isInBounds({ x, y }))
+          this.pointersIdInBounds.add(pointerId)
+        break;
+      case TouchType.Move:
+        if (this.isInBounds({ x, y }))
+          this.pointersIdInBounds.add(pointerId)
+        else
+          this.pointersIdInBounds.delete(pointerId)
+        break;
+      case TouchType.Up:
+        this.pointersIdInBounds.delete(pointerId)
+        break;
+      case TouchType.Cancel:
+        this.pointersIdInBounds.delete(pointerId)
+        break;
+    }
+  }
+
+  private isInBounds(point: Point): boolean {
+    const x = point.x
+    const y = point.y
+    const rect = this.view.getBoundingRect()
+    const result = x >= rect.x && x <= (rect.x + rect.width) && y >= rect.y && y <= (rect.y + rect.height)
+    return result;
+  }
+
+  private updateActivePointers(touchType: TouchType, pointerId: number): void {
+    switch (touchType) {
+      case TouchType.Down:
+        this.activePointerIds.add(pointerId)
+      case TouchType.Up:
+        this.activePointerIds.delete(pointerId)
+      case TouchType.Cancel:
+        this.activePointerIds.clear()
+      default:
+        return
+    }
+  }
+
+  private mapTouchObjectToTouch(touchObject: TouchObject): Touch {
+    return {
+      id: touchObject.id,
+      x: touchObject.x,
+      y: touchObject.y,
+      absoluteX: touchObject.windowX,
+      absoluteY: touchObject.windowY
+    }
+  }
+
+  private mapTouchTypeToEventType(
+    touchType: TouchType,
+    activePointersCounter: number,
+    isCurrentlyInBounds: boolean,
+    wasInBounds: boolean
+  ): EventType {
+    switch (touchType) {
+      case TouchType.Down:
+        if (activePointersCounter > 0)
+          return EventType.ADDITIONAL_POINTER_DOWN
+        else
+          return EventType.DOWN
+      case TouchType.Up:
+        if (activePointersCounter > 1)
+          return EventType.ADDITIONAL_POINTER_UP
+        else
+          return EventType.UP
+      case TouchType.Move:
+        if (isCurrentlyInBounds) {
+          return wasInBounds ? EventType.MOVE : EventType.ENTER
+        } else {
+          return wasInBounds ? EventType.OUT : EventType.MOVE
+        }
+      case TouchType.Cancel:
+        return EventType.CANCEL
+      default:
+        console.error("RNGH", "Unknown touchType:", touchType)
+        throw new Error("Unknown touchType")
+    }
+  }
+
+  private mapTouchTypeToTouchEventType(touchType: TouchType): TouchEventType {
+    switch (touchType) {
+      case TouchType.Down:
+        return TouchEventType.DOWN
+      case TouchType.Up:
+        return TouchEventType.UP
+      case TouchType.Move:
+        return TouchEventType.MOVE
+      case TouchType.Cancel:
+        return TouchEventType.CANCELLED
+      default:
+        return TouchEventType.UNDETERMINED
+    }
+  }
+}

package/harmony/gesture_handler/src/main/ets/GestureHandlerFactory.ts

@@ -0,0 +1,45 @@
+import { GestureHandlerOrchestrator } from './GestureHandlerOrchestrator';
+import { GestureHandler, GestureHandlerDependencies, ScrollLocker } from "./GestureHandler"
+import { PointerTracker } from './PointerTracker';
+import { RNGHError } from "./RNGHError"
+import { InteractionManager } from './InteractionManager';
+import { RNGHLogger } from './RNGHLogger';
+import { TapGestureHandler } from './TapGestureHandler';
+import { PanGestureHandler } from "./PanGestureHandler"
+import { NativeViewGestureHandler } from "./NativeViewGestureHandler"
+
+
+export class GestureHandlerFactory {
+  private orchestrator: GestureHandlerOrchestrator
+  private interactionManager = new InteractionManager()
+  private factoryLogger: RNGHLogger
+
+  constructor(private logger: RNGHLogger, private scrollLocker: ScrollLocker) {
+    this.factoryLogger = logger.cloneWithPrefix("Factory")
+    this.orchestrator = new GestureHandlerOrchestrator(logger.cloneWithPrefix("Orchestrator"))
+  }
+
+  create(handlerName: string, handlerTag: number): GestureHandler {
+    this.factoryLogger.info(`create ${handlerName} with handlerTag: ${handlerTag}`)
+    const deps: GestureHandlerDependencies = {
+      tracker: new PointerTracker(),
+      orchestrator: this.orchestrator,
+      handlerTag,
+      interactionManager: this.interactionManager,
+      logger: this.logger.cloneWithPrefix("GestureHandler"),
+      scrollLocker: this.scrollLocker,
+    }
+    switch (handlerName) {
+      case "TapGestureHandler":
+        return new TapGestureHandler(deps)
+      case "PanGestureHandler":
+        return new PanGestureHandler(deps)
+      case "NativeViewGestureHandler":
+        return new NativeViewGestureHandler(deps)
+      default:
+        const msg = `Unknown handler type: ${handlerName}`
+        this.factoryLogger.info(msg)
+        throw new RNGHError(msg)
+    }
+  }
+}

package/harmony/gesture_handler/src/main/ets/GestureHandlerOrchestrator.ts

@@ -0,0 +1,280 @@
+import { GestureHandler } from "./GestureHandler"
+import { State } from "./State"
+import { PointerType } from "./Event"
+import { RNGHLogger } from "./RNGHLogger"
+
+export class GestureHandlerOrchestrator {
+  private awaitingHandlers: Set<GestureHandler> = new Set()
+  private gestureHandlers: GestureHandler[] = []
+  private handlersToCancel: GestureHandler[] = []
+  private activationIndex: number = 0
+
+  constructor(private logger: RNGHLogger) {
+  }
+
+  public onHandlerStateChange(handler: GestureHandler, newState: State, oldState: State, sendIfDisabled?: boolean) {
+    this.logger.info("onHandlerStateChange")
+    if (this.shouldCancelStateChange(handler, sendIfDisabled)) return;
+    if (this.isFinishedState(newState)) {
+      this.handleChangingToFinishedState(handler, newState)
+    }
+    if (newState === State.ACTIVE) {
+      this.tryActivate(handler)
+    } else if (oldState === State.ACTIVE || oldState === State.END) {
+      if (handler.isActive()) {
+        handler.sendEvent({ newState, oldState })
+      } else if (oldState === State.ACTIVE && (newState === State.CANCELLED || newState === State.FAILED)) {
+        // Handle edge case where handler awaiting for another one tries to activate but finishes
+        // before the other would not send state change event upon ending. Note that we only want
+        // to do this if the newState is either CANCELLED or FAILED, if it is END we still want to
+        // wait for the other handler to finish as in that case synthetic events will be sent by the
+        // makeActive method.
+        handler.sendEvent({ newState, oldState: State.BEGAN })
+      }
+    } else if (newState !== State.CANCELLED || oldState !== State.UNDETERMINED) {
+      // If handler is changing state from UNDETERMINED to CANCELLED, the state change event shouldn't
+      // be sent. Handler hasn't yet began so it may not be initialized which results in crashes.
+      // If it doesn't crash, there may be some weird behavior on JS side, as `onFinalize` will be
+      // called without calling `onBegin` first.
+      handler.sendEvent({ newState, oldState })
+    }
+    this.cleanUpHandlers(handler)
+  }
+
+  private isFinishedState(state: State) {
+    return [State.END, State.FAILED, State.CANCELLED].includes(state)
+  }
+
+  private shouldCancelStateChange(handler: GestureHandler, sendIfDisabled?: boolean) {
+    const isHandlerDisabled = !handler.isEnabled()
+    return!sendIfDisabled && isHandlerDisabled
+  }
+
+  private handleChangingToFinishedState(handler: GestureHandler, newState: State) {
+    this.awaitingHandlers.forEach(awaitingHandler => {
+      if (handler.shouldWaitFor(awaitingHandler)) {
+        if (newState === State.END) {
+          awaitingHandler.cancel()
+          if (awaitingHandler.getState() === State.END) {
+            // Handle edge case, where discrete gestures end immediately after activation thus
+            // their state is set to END and when the gesture they are waiting for activates they
+            // should be cancelled, however `cancel` was never sent as gestures were already in the END state.
+            // Send synthetic BEGAN -> CANCELLED to properly handle JS logic
+            awaitingHandler.sendEvent({ newState: State.CANCELLED, oldState: State.BEGAN })
+          }
+          awaitingHandler.setAwaiting(false)
+        } else {
+          this.tryActivate(awaitingHandler)
+        }
+      }
+    })
+  }
+
+  private tryActivate(handler: GestureHandler): void {
+    if (this.hasOtherHandlerToWaitFor(handler)) {
+      this.addAwaitingHandler(handler)
+    } else if (handler.getState() !== State.CANCELLED && handler.getState() !== State.FAILED) {
+      if (this.shouldActivate(handler)) {
+        this.makeActive(handler);
+      } else {
+        switch (handler.getState()) {
+          case State.ACTIVE:
+            handler.fail();
+            break;
+          case State.BEGAN:
+            handler.cancel();
+            break;
+        }
+      }
+    }
+  }
+
+  private hasOtherHandlerToWaitFor(handler: GestureHandler): boolean {
+    for (const otherHandler of this.gestureHandlers) {
+      if (!this.isFinishedState(otherHandler.getState()) && otherHandler.shouldWaitFor(handler)) {
+        return true
+      }
+    }
+    return false;
+  }
+
+  private addAwaitingHandler(handler: GestureHandler) {
+    if (!this.awaitingHandlers.has(handler)) {
+      this.awaitingHandlers.add(handler)
+      handler.setAwaiting(true)
+      handler.setActivationIndex(this.activationIndex++)
+    }
+  }
+
+  private shouldActivate(handler: GestureHandler) {
+    for (const otherHandler of this.gestureHandlers) {
+      if (this.shouldHandlerBeCancelledByOtherHandler({ handler, otherHandler })) {
+        return false
+      }
+    }
+    return true
+  }
+
+  private shouldHandlerBeCancelledByOtherHandler({handler, otherHandler}: {
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  }): boolean {
+    if (this.canRunSimultaneously(handler, otherHandler))
+      return false;
+    if (handler !== otherHandler && (handler.isAwaiting() || handler.getState() === State.ACTIVE))
+      return handler.shouldBeCancelledByOther(otherHandler)
+    return this.checkOverlap(handler, otherHandler)
+  }
+
+  private canRunSimultaneously(handlerA: GestureHandler, handlerB: GestureHandler) {
+    return handlerA === handlerB
+      || handlerA.shouldRecognizeSimultaneously(handlerB)
+      || handlerB.shouldRecognizeSimultaneously(handlerA)
+  }
+
+  private checkOverlap(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    // If handlers don't have common pointers, default return value is false.
+    // However, if at least on pointer overlaps with both handlers, we return true
+    // This solves issue in overlapping parents example
+
+    // TODO: Find better way to handle that issue, for example by activation order and handler cancelling
+
+    const handlerPointers: number[] = handler.getTrackedPointersID();
+    const otherPointers: number[] = otherHandler.getTrackedPointersID();
+    let overlap = false;
+    handlerPointers.forEach((pointer: number) => {
+      const handlerX: number = handler.getTracker().getLastX(pointer);
+      const handlerY: number = handler.getTracker().getLastY(pointer);
+      if (
+        handler.getView().isPositionInBounds({ x: handlerX, y: handlerY }) &&
+        otherHandler.getView().isPositionInBounds({ x: handlerX, y: handlerY })
+      ) {
+        overlap = true;
+      }
+    });
+    otherPointers.forEach((pointer: number) => {
+      const otherX: number = otherHandler.getTracker().getLastX(pointer);
+      const otherY: number = otherHandler.getTracker().getLastY(pointer);
+      if (
+        handler.getView().isPositionInBounds({ x: otherX, y: otherY }) &&
+        otherHandler.getView().isPositionInBounds({ x: otherX, y: otherY })
+      ) {
+        overlap = true;
+      }
+    });
+    return overlap;
+  }
+
+  private makeActive(handler: GestureHandler): void {
+    handler.setActive(true)
+    handler.setShouldResetProgress(true)
+    handler.setActivationIndex(this.activationIndex++)
+    for (const otherHandler of this.gestureHandlers) {
+      if (this.shouldHandlerBeCancelledByOtherHandler({ handler: otherHandler, otherHandler: handler })) {
+        this.handlersToCancel.push(otherHandler)
+      }
+    }
+    for (let i = this.handlersToCancel.length - 1; i >= 0; --i) {
+      this.handlersToCancel[i]?.cancel();
+    }
+    this.handlersToCancel = []
+    for (const awaitingHandler of this.awaitingHandlers) {
+      if (this.shouldHandlerBeCancelledByOtherHandler({ handler: awaitingHandler, otherHandler: handler })) {
+        awaitingHandler.cancel();
+        awaitingHandler.setAwaiting(true);
+      }
+    }
+    const currentState = handler.getState()
+    handler.sendEvent({ newState: State.ACTIVE, oldState: State.BEGAN })
+    if (currentState !== State.ACTIVE) {
+      handler.sendEvent({ newState: State.END, oldState: State.ACTIVE })
+      if (currentState !== State.END) {
+        handler.sendEvent({ newState: State.UNDETERMINED, oldState: State.END })
+      }
+    }
+    if (handler.isAwaiting()) {
+      handler.setAwaiting(false)
+      this.awaitingHandlers.delete(handler)
+    }
+  }
+
+  private cleanUpHandlers(handler: GestureHandler) {
+    this.cleanUpFinishedHandlers()
+    if (this.awaitingHandlers.has(handler)) {
+      this.cleanupAwaitingHandlers(handler);
+    }
+  }
+
+  private cleanUpFinishedHandlers(): void {
+    for (let i = this.gestureHandlers.length - 1; i >= 0; --i) {
+      const handler = this.gestureHandlers[i];
+      if (!handler) {
+        continue;
+      }
+      if (this.isFinishedState(handler.getState()) && !handler.isAwaiting()) {
+        this.gestureHandlers.splice(i, 1);
+        this.cleanUpHandler(handler);
+      }
+    }
+  }
+
+  private cleanupAwaitingHandlers(handler: GestureHandler): void {
+    for (const awaitingHandler of this.awaitingHandlers) {
+      if (
+        awaitingHandler.isAwaiting() &&
+        awaitingHandler.shouldWaitFor(handler)
+      ) {
+        this.cleanUpHandler(awaitingHandler);
+        this.awaitingHandlers.delete(awaitingHandler)
+      }
+    }
+  }
+
+  private cleanUpHandler(handler: GestureHandler) {
+    handler.reset();
+    handler.setActive(false);
+    handler.setAwaiting(false);
+    handler.setActivationIndex(Number.MAX_VALUE);
+  }
+
+  public registerHandlerIfNotPresent(handler: GestureHandler) {
+    this.logger.info("registerHandlerIfNotPresent")
+    if (this.gestureHandlers.includes(handler)) return;
+    this.gestureHandlers.push(handler);
+    handler.setActive(false);
+    handler.setAwaiting(false);
+    handler.setActivationIndex(Number.MAX_SAFE_INTEGER);
+  }
+
+  /**
+   This function is called when handler receives touchdown event
+   If handler is using mouse or pen as a pointer and any handler receives touch event,
+   mouse/pen event disappears - it doesn't send onPointerCancel nor onPointerUp (and others)
+   This became a problem because handler was left at active state without any signal to end or fail
+   To handle this, when new touch event is received, we loop through active handlers and check which type of
+   pointer they're using. If there are any handler with mouse/pen as a pointer, we cancel them
+   */
+  public cancelMouseAndPenGestures(currentHandler: GestureHandler): void {
+    this.logger.info("cancelMouseAndPenGestures")
+    this.gestureHandlers.forEach((handler: GestureHandler) => {
+      if (handler.getPointerType() !== PointerType.MOUSE && handler.getPointerType() !== PointerType.PEN) return;
+
+      if (handler !== currentHandler) {
+        handler.cancel();
+      } else {
+        // Handler that received touch event should have its pointer tracker reset
+        // This allows handler to smoothly change from mouse/pen to touch
+        // The drawback is, that when we try to use mouse/pen one more time, it doesn't send onPointerDown at the first time
+        // so it is required to click two times to get handler to work
+        //
+        // However, handler will receive manually created onPointerEnter that is triggered in EventManager in onPointerMove method.
+        // There may be possibility to use that fact to make handler respond properly to first mouse click
+        handler.getTracker().resetTracker();
+      }
+    });
+  }
+}
+

package/harmony/gesture_handler/src/main/ets/GestureHandlerPackage.ts

@@ -0,0 +1,22 @@
+import {RNPackage, TurboModuleContext, TurboModulesFactory} from 'rnoh/ts';
+import type {TurboModule} from 'rnoh/ts';
+import {RNGestureHandlerModule} from './RNGestureHandlerModule';
+
+class GestureHandlerTurboModulesFactory extends TurboModulesFactory {
+  createTurboModule(name: string): TurboModule | null {
+    if (name === RNGestureHandlerModule.NAME) {
+      return new RNGestureHandlerModule(this.ctx);
+    }
+    return null;
+  }
+
+  hasTurboModule(name: string): boolean {
+    return name === 'RNGestureHandlerModule';
+  }
+}
+
+export class GestureHandlerPackage extends RNPackage {
+  createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
+    return new GestureHandlerTurboModulesFactory(ctx);
+  }
+}

package/harmony/gesture_handler/src/main/ets/GestureHandlerRegistry.ts

@@ -0,0 +1,28 @@
+import { GestureHandler } from "./GestureHandler"
+import { View } from "./View"
+
+export class GestureHandlerRegistry {
+  private gestureHandlerByHandlerTag: Map<number, GestureHandler> = new Map()
+  private gestureHandlersByViewTag: Map<number, Set<GestureHandler>> = new Map()
+
+  public addGestureHandler(gestureHandler: GestureHandler) {
+    this.gestureHandlerByHandlerTag.set(gestureHandler.getTag(), gestureHandler)
+  }
+
+  public bindGestureHandlerWithView(gestureHandlerTag: number, view: View) {
+    const viewTag = view.getTag()
+    if (!this.gestureHandlersByViewTag.has(viewTag))
+      this.gestureHandlersByViewTag.set(viewTag, new Set())
+    const gestureHandler = this.gestureHandlerByHandlerTag.get(gestureHandlerTag)
+    this.gestureHandlersByViewTag.get(viewTag).add(gestureHandler)
+    gestureHandler.onViewAttached(view)
+  }
+
+  public getGestureHandlersByViewTag(viewTag: number): GestureHandler[] {
+    return Array.from(this.gestureHandlersByViewTag.get(viewTag) ?? [])
+  }
+
+  public getGestureHandlerByHandlerTag(handlerTag: number): GestureHandler {
+    return this.gestureHandlerByHandlerTag.get(handlerTag)
+  }
+}