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

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

@@ -0,0 +1,29 @@
+import { RNOHContext } from "rnoh/ts"
+
+export interface RNGHLogger {
+  info(msg: string): void
+
+  cloneWithPrefix(prefix: string): RNGHLogger
+}
+
+export class StandardRNGHLogger implements RNGHLogger {
+  constructor(private rnohLogger: RNOHContext["logger"], private prefix: string) {
+  }
+
+  info(msg: string) {
+    this.rnohLogger.info(`${this.prefix}::${msg}`)
+  }
+
+  cloneWithPrefix(prefix: string) {
+    return new StandardRNGHLogger(this.rnohLogger, `${this.prefix}::${prefix}`)
+  }
+}
+
+export class FakeRNGHLogger implements RNGHLogger {
+  info(msg: string) {
+  }
+
+  cloneWithPrefix(prefix: string) {
+    return new FakeRNGHLogger()
+  }
+}

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

@@ -0,0 +1,58 @@
+import { Tag } from "rnoh"
+import { GestureHandlerRegistry } from "./GestureHandlerRegistry"
+import { GestureHandlerArkUIAdapter } from "./GestureHandlerArkUIAdapter"
+import { ViewRegistry } from "./ViewRegistry"
+import { RNGHLogger } from './RNGHLogger'
+
+
+export class RNGHRootTouchHandler {
+  private adapterByViewTag: Map<number, GestureHandlerArkUIAdapter> = new Map() // TODO: remove an adapter when a view or gesture handler is removed
+  private activeViewTags: number[] = []
+  private viewRegistry: ViewRegistry
+  private gestureHandlerRegistry: GestureHandlerRegistry
+  private logger: RNGHLogger
+  private rootTag: Tag
+
+  constructor(rootTag: Tag, viewRegistry: ViewRegistry, gestureHandlerRegistry: GestureHandlerRegistry, logger: RNGHLogger) {
+    this.rootTag = rootTag
+    this.viewRegistry = viewRegistry
+    this.gestureHandlerRegistry = gestureHandlerRegistry
+    this.logger = logger
+  }
+
+  public handleTouch(e: TouchEvent) {
+    if (e.type === TouchType.Down) {
+      this.activeViewTags = []
+    }
+    for (const changedTouch of e.changedTouches) {
+      const views = this.viewRegistry.getTouchableViewsAt({
+        x: changedTouch.windowX,
+        y: changedTouch.windowY
+      }, this.rootTag)
+      for (const view of views) {
+        for (const handler of this.gestureHandlerRegistry.getGestureHandlersByViewTag(view.getTag())) {
+          this.logger.info(`Found GestureHandler ${handler.getTag()} for view ${view.getTag()}`)
+          if (!this.adapterByViewTag.has(view.getTag()))
+            this.adapterByViewTag.set(view.getTag(), new GestureHandlerArkUIAdapter(handler, view, this.logger.cloneWithPrefix("ArkUIAdapter")))
+          if (!this.activeViewTags.includes(view.getTag())) {
+            const adapter = this.adapterByViewTag.get(view.getTag())
+            if (adapter) {
+              adapter.handleTouch(e)
+            } else {
+              console.warn("RNGH: Couldn't find adapter")
+            }
+          }
+          if (e.type === TouchType.Down) {
+            this.activeViewTags.push(view.getTag())
+          }
+        }
+      }
+      for (const viewTag of this.activeViewTags) {
+        const adapter = this.adapterByViewTag.get(viewTag)
+        if (adapter) {
+          adapter.handleTouch(e)
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+import { Descriptor, RNOHContext, RNViewBase, ComponentBuilderContext, RNComponentFactory, Tag } from "rnoh"
+
+export type RNGestureHandlerButtonDescriptor = Descriptor<"RNGestureHandlerButton">
+
+@Component
+export struct RNGestureHandlerButton {
+  static readonly DESCRIPTOR_TYPE = "RNGestureHandlerButton"
+  public ctx!: RNOHContext
+  public tag: number = -1
+  @BuilderParam public buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void
+
+  @State private descriptor: RNGestureHandlerButtonDescriptor = {} as RNGestureHandlerButtonDescriptor
+  private unsubscribes: (() => void)[] = []
+
+  aboutToAppear() {
+    this.handleDescriptorChange(this.ctx.descriptorRegistry.getDescriptor<RNGestureHandlerButtonDescriptor>(this.tag))
+    this.unsubscribes.push(this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (d) => {
+      this.handleDescriptorChange(d as RNGestureHandlerButtonDescriptor)
+    }))
+  }
+
+  aboutToDisappear() {
+    this.unsubscribes.forEach(unsubscribe => unsubscribe())
+  }
+
+  handleDescriptorChange(newDescriptor: RNGestureHandlerButtonDescriptor) {
+    this.descriptor = newDescriptor
+  }
+
+  build() {
+    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
+      ForEach(this.descriptor.childrenTags, (childrenTag: Tag) => {
+        RNComponentFactory({ ctx: this.ctx, tag: childrenTag, buildCustomComponent: this.buildCustomComponent })
+      })
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+import { TurboModule, TurboModuleContext } from 'rnoh/ts';
+import { GestureHandlerRegistry } from './GestureHandlerRegistry';
+import { GestureHandlerFactory } from "./GestureHandlerFactory"
+import { ViewRegistry } from './ViewRegistry';
+import { RNGHLogger, StandardRNGHLogger, FakeRNGHLogger } from './RNGHLogger';
+import { EventDispatcher, JSEventDispatcher, AnimatedEventDispatcher } from './EventDispatcher'
+import { RNOHScrollLocker } from "./RNOHScrollLocker"
+
+export enum ActionType {
+  REANIMATED_WORKLET = 1,
+  NATIVE_ANIMATED_EVENT = 2,
+  JS_FUNCTION_OLD_API = 3,
+  JS_FUNCTION_NEW_API = 4,
+}
+
+
+export class RNGestureHandlerModule extends TurboModule {
+  static NAME = "RNGestureHandlerModule"
+
+  private gestureHandlerRegistry = new GestureHandlerRegistry()
+  private gestureHandlerFactory: GestureHandlerFactory | undefined = undefined
+  private viewRegistry: ViewRegistry | undefined = undefined
+  private logger: RNGHLogger
+
+  constructor(ctx: TurboModuleContext) {
+    super(ctx)
+    const debug = false
+    this.logger = debug ? new StandardRNGHLogger(ctx.logger, "RNGH") : new FakeRNGHLogger()
+  }
+
+  public install() {
+    this.viewRegistry = new ViewRegistry(this.ctx.descriptorRegistry, this.ctx.componentManagerRegistry)
+    this.gestureHandlerFactory = new GestureHandlerFactory(this.logger, new RNOHScrollLocker(this.ctx.rnInstance))
+  }
+
+  public createGestureHandler(
+    handlerName: string,
+    handlerTag: number,
+    config: Readonly<Record<string, unknown>>
+  ) {
+    if (!this.gestureHandlerFactory) {
+      this.ctx.logger.error("Trying to create a gesture handler before creating gesture handler factory")
+      return
+    }
+    const gestureHandler = this.gestureHandlerFactory.create(handlerName, handlerTag)
+    this.gestureHandlerRegistry.addGestureHandler(gestureHandler)
+    gestureHandler.updateGestureConfig(config)
+  }
+
+  public attachGestureHandler(
+    handlerTag: number,
+    viewTag: number,
+    actionType: ActionType
+  ) {
+    const eventDispatcher = this.createEventDispatcher(actionType, viewTag)
+    if (!eventDispatcher) {
+      this.ctx.logger.error("RNGH: Couldn't create EventDispatcher")
+      return
+    }
+    const view = this.viewRegistry.getViewByTag(viewTag)
+    if (!view) {
+      this.ctx.logger.error(`RNGH: Couldn't attachGestureHandler to view ${viewTag}`)
+      return;
+    }
+    this.gestureHandlerRegistry.bindGestureHandlerWithView(handlerTag, view)
+    this.gestureHandlerRegistry
+      .getGestureHandlerByHandlerTag(handlerTag)
+      .setEventDispatcher(eventDispatcher)
+  }
+
+  private createEventDispatcher(actionType: ActionType, viewTag: number): EventDispatcher | null {
+    switch (actionType) {
+      case ActionType.REANIMATED_WORKLET:
+        this.ctx.logger.error("RNGH: Reanimated Worklets are not supported")
+        break;
+      case ActionType.NATIVE_ANIMATED_EVENT:
+        return new AnimatedEventDispatcher(this.ctx.rnInstance, this.logger.cloneWithPrefix('AnimatedEventDispatcher'), viewTag)
+      case ActionType.JS_FUNCTION_OLD_API:
+      case ActionType.JS_FUNCTION_NEW_API:
+        return new JSEventDispatcher(this.ctx.rnInstance, this.logger.cloneWithPrefix('JSEventDispatcher'));
+    }
+    return null
+  }
+
+  public updateGestureHandler(
+    handlerTag: number,
+    newConfig: Readonly<Record<string, unknown>>
+  ) {
+    const gestureHandler = this.gestureHandlerRegistry.getGestureHandlerByHandlerTag(handlerTag)
+    gestureHandler.updateGestureConfig(newConfig)
+  }
+
+  public dropGestureHandler(handlerTag: number) {
+    this.warn("dropGestureHandler is not implemented")
+  }
+
+  public handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
+    this.warn("handleSetJSResponder is not implemented")
+  }
+
+  public handleClearJSResponder() {
+    this.warn("handleClearJSResponder is not implemented")
+  }
+
+  public flushOperations() {
+    this.warn("flushOperations is not implemented")
+  }
+
+  // -------------------------------------------------------------------------------------------------------------------
+  protected warn(message: string) {
+    this.ctx.logger.warn("RNGH: " + message)
+  }
+
+  public getGestureHandlerRegistry() {
+    return this.gestureHandlerRegistry
+  }
+
+  public getLogger() {
+    return this.logger
+  }
+
+  public getViewRegistry() {
+    return this.viewRegistry
+  }
+}

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

@@ -0,0 +1,56 @@
+import { Descriptor, RNOHContext, RNViewBase, ComponentBuilderContext, RNComponentFactory, Tag } from "rnoh"
+import { RNGHRootTouchHandler } from "./RNGHRootTouchHandler"
+import { RNGestureHandlerModule } from "./RNGestureHandlerModule"
+import { Vector2D } from "./Vector2D"
+
+export type RNGestureHandlerRootViewDescriptor = Descriptor<"RNGestureHandlerRootView">
+
+@Component
+export struct RNGestureHandlerRootView {
+  /**
+   * @deprecated: Use RNGestureHandlerRootView.NAME instead
+   */
+  static readonly DESCRIPTOR_TYPE = "RNGestureHandlerRootView"
+  static readonly NAME = "RNGestureHandlerRootView"
+  ctx!: RNOHContext
+  tag: number = -1
+  @BuilderParam buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void
+  @State descriptor: RNGestureHandlerRootViewDescriptor = {} as RNGestureHandlerRootViewDescriptor
+  private unsubscribes: (() => void)[] = []
+  private touchHandler: RNGHRootTouchHandler | undefined = undefined
+
+  aboutToAppear() {
+    const rnGestureHandlerModule = this.ctx.rnInstance.getTurboModule<RNGestureHandlerModule>(RNGestureHandlerModule.NAME)
+    const rootTag = this.ctx.descriptorRegistry.getDescriptorLineage(this.tag)[0].tag
+    this.touchHandler = new RNGHRootTouchHandler(rootTag, rnGestureHandlerModule.getViewRegistry(), rnGestureHandlerModule.getGestureHandlerRegistry(), rnGestureHandlerModule.getLogger())
+    this.handleDescriptorChange(this.ctx.descriptorRegistry.getDescriptor<RNGestureHandlerRootViewDescriptor>(this.tag))
+    this.unsubscribes.push(this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (d) => {
+      this.handleDescriptorChange(d as RNGestureHandlerRootViewDescriptor)
+    }))
+  }
+
+  aboutToDisappear() {
+    this.unsubscribes.forEach(unsubscribe => unsubscribe())
+  }
+
+  handleDescriptorChange(newDescriptor: RNGestureHandlerRootViewDescriptor) {
+    this.descriptor = newDescriptor
+  }
+
+  build() {
+    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
+      ForEach(this.descriptor.childrenTags, (childrenTag: Tag) => {
+        RNComponentFactory({ ctx: this.ctx, tag: childrenTag, buildCustomComponent: this.buildCustomComponent })
+      })
+      Stack() {
+      }
+      .width("100%")
+      .height("100%")
+      .onTouch((e) => {
+        this.touchHandler?.handleTouch(e)
+      })
+      .hitTestBehavior(HitTestMode.Transparent)
+
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { RNInstance } from "rnoh/ts"
+import { ScrollLocker } from "./GestureHandler"
+
+export class RNOHScrollLocker implements ScrollLocker {
+  public constructor(private rnInstance: RNInstance) {
+  }
+
+  public lockScrollContainingViewTag(viewTag: number) {
+    return this.rnInstance.blockComponentsGestures(viewTag)
+  }
+}

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

@@ -0,0 +1,47 @@
+export enum State {
+  /** This is the initial state of each handler and it goes into this state after it's done recognizing a gesture. */
+  UNDETERMINED,
+
+  /** A handler received some touches but for some reason didn't recognize them. For example, if a finger travels more
+   * distance than a defined maxDist property allows, then the handler won't become active but will fail instead.
+   * Afterwards, it's state will be reset to UNDETERMINED. */
+  FAILED,
+
+  /** Handler has started receiving touch stream but hasn't yet received enough data to either fail or activate. */
+  BEGAN,
+
+  /** The gesture recognizer has received a signal (possibly new touches or a command from the touch system controller)
+   * resulting in the cancellation of a continuous gesture. The gesture's state will become CANCELLED until it is
+   * finally reset to the initial state, UNDETERMINED. */
+  CANCELLED,
+
+  /** Handler has recognized a gesture. It will become and stay in the ACTIVE state until the gesture finishes
+   * (e.g. when user lifts the finger) or gets cancelled by the touch system. Under normal circumstances the state will
+   * then turn into END. In the case that a gesture is cancelled by the touch system, its state would then become
+   * CANCELLED. Learn about discrete and continuous handlers here to understand how long a handler can be kept in the
+   * ACTIVE state.
+   * */
+  ACTIVE,
+
+  /** The gesture recognizer has received touches signalling the end of a gesture. Its state will become END until it is
+   * reset to UNDETERMINED.
+   * */
+  END,
+}
+
+export function getStateName(state: State): string {
+  switch (state) {
+    case State.UNDETERMINED:
+      return "UNDETERMINED"
+    case State.FAILED:
+      return "FAILED"
+    case State.BEGAN:
+      return "BEGAN"
+    case State.CANCELLED:
+      return "CANCELLED"
+    case State.ACTIVE:
+      return "ACTIVE"
+    case State.END:
+      return "END"
+  }
+}

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

@@ -0,0 +1,206 @@
+import { GestureHandler, GestureHandlerDependencies } from "./GestureHandler"
+import { AdaptedEvent, EventType } from "./Event"
+import { State, getStateName } from "./State"
+
+const DEFAULT_MAX_DURATION_MS = 500;
+const DEFAULT_NUMBER_OF_TAPS = 1;
+const DEFAULT_MAX_DELAY_MS = 500;
+
+export class TapGestureHandler extends GestureHandler {
+  private startX = 0;
+  private startY = 0;
+  private offsetX = 0;
+  private offsetY = 0;
+  private lastX = 0;
+  private lastY = 0;
+  private maxNumberOfPointersSoFar = 0;
+  private numberOfTapsSoFar: number = 0;
+  private waitTimeout: number | undefined;
+  private delayTimeout: number | undefined;
+
+  constructor(deps: GestureHandlerDependencies) {
+    super({...deps, logger: deps.logger.cloneWithPrefix("TapGestureHandler")})
+  }
+
+  onPointerDown(event) {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+    this.trySettingPosition(event);
+    this.lastX = event.x;
+    this.lastY = event.y;
+    this.updateState(event);
+  }
+
+  onAdditionalPointerAdd(event: AdaptedEvent): void {
+    super.onAdditionalPointerAdd(event);
+    this.tracker.addToTracker(event);
+    this.trySettingPosition(event);
+
+    this.offsetX += this.lastX - this.startX;
+    this.offsetY += this.lastY - this.startY;
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.startX = this.tracker.getLastAvgX();
+    this.startY = this.tracker.getLastAvgY();
+
+    this.updateState(event);
+  }
+
+  onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.tracker.removeFromTracker(event.pointerId);
+
+    this.updateState(event);
+  }
+
+  onAdditionalPointerRemove(event: AdaptedEvent): void {
+    super.onAdditionalPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+
+    this.offsetX += this.lastX - this.startX;
+    this.offsetY += this.lastY = this.startY;
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.startX = this.lastX;
+    this.startY = this.lastY;
+
+    this.updateState(event);
+  }
+
+  onPointerMove(event: AdaptedEvent): void {
+    this.trySettingPosition(event);
+    this.tracker.track(event);
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.updateState(event);
+
+    super.onPointerMove(event);
+  }
+
+  onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.trySettingPosition(event);
+    this.tracker.track(event);
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.updateState(event);
+
+    super.onPointerOutOfBounds(event);
+  }
+
+  getDefaultConfig() {
+    return {}
+  }
+
+  private trySettingPosition(event: AdaptedEvent): void {
+    if (this.currentState !== State.UNDETERMINED) return;
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.startX = event.x;
+    this.startY = event.y;
+  }
+
+  private updateState(event: AdaptedEvent): void {
+    const logger = this.logger.cloneWithPrefix("updateState")
+    if (this.maxNumberOfPointersSoFar < this.tracker.getTrackedPointersCount()) {
+      this.maxNumberOfPointersSoFar = this.tracker.getTrackedPointersCount()
+    }
+    if (this.shouldFail()) {
+      logger.info("fail")
+      this.fail()
+      return;
+    }
+    switch (this.currentState) {
+      case State.UNDETERMINED:
+        if (event.eventType === EventType.DOWN) {
+          this.begin()
+        }
+        this.startTap();
+        break;
+      case State.BEGAN:
+        if (event.eventType === EventType.UP) {
+          logger.info("endTap")
+          this.endTap();
+        }
+        if (event.eventType === EventType.DOWN) {
+          this.startTap();
+        }
+        break;
+      default:
+        logger.info(`default case - currentState ${getStateName(this.currentState)}`)
+        break;
+    }
+  }
+
+  private shouldFail(): boolean {
+    const maxDeltaX = this.config.maxDeltaX ?? Number.MIN_SAFE_INTEGER
+    const maxDeltaY = this.config.maxDeltaY ?? Number.MIN_SAFE_INTEGER
+    const maxDistSq = this.config.maxDistSq ?? Number.MIN_SAFE_INTEGER
+
+    const dx = this.lastX - this.startX + this.offsetX;
+    if (
+      maxDeltaX !== Number.MIN_SAFE_INTEGER &&
+        Math.abs(dx) > maxDeltaX
+    ) {
+      return true;
+    }
+    const dy = this.lastY - this.startY + this.offsetY;
+    if (
+      maxDeltaY !== Number.MIN_SAFE_INTEGER &&
+        Math.abs(dy) > maxDeltaY
+    ) {
+      return true;
+    }
+    const distSq = dy * dy + dx * dx;
+    const result = maxDistSq !== Number.MIN_SAFE_INTEGER && distSq > maxDistSq
+    return result;
+  }
+
+  private startTap() {
+    this.clearTimeouts();
+    this.waitTimeout = setTimeout(() => this.fail(), this.config.maxDurationMs ?? DEFAULT_MAX_DURATION_MS);
+  }
+
+  private clearTimeouts() {
+    clearTimeout(this.waitTimeout);
+    clearTimeout(this.delayTimeout);
+  }
+
+  private endTap() {
+    this.clearTimeouts();
+    if (
+      ++this.numberOfTapsSoFar === (this.config.numberOfTaps ?? DEFAULT_NUMBER_OF_TAPS) &&
+        this.maxNumberOfPointersSoFar >= (this.config.minNumberOfPointers ?? 0)
+    ) {
+      this.activate();
+    } else {
+      this.delayTimeout = setTimeout(() => this.fail(), this.config.maxDelayMs ?? DEFAULT_MAX_DELAY_MS);
+    }
+  }
+
+  public activate(): void {
+    super.activate();
+    this.end();
+  }
+
+  protected onCancel() {
+    super.onCancel()
+    this.resetProgress()
+  }
+
+  protected resetProgress(): void {
+    this.clearTimeouts();
+    this.numberOfTapsSoFar = 0;
+    this.maxNumberOfPointersSoFar = 0;
+  }
+}

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

@@ -0,0 +1,36 @@
+export class Vector2D {
+  constructor(
+    private val: {
+      x: number;
+      y: number;
+    } = {x: 0, y: 0},
+  ) {}
+
+  get x() {
+    return this.val.x;
+  }
+
+  get y() {
+    return this.val.y;
+  }
+
+  get value() {
+    return {...this.val};
+  }
+
+  public clone() {
+    return new Vector2D({...this.val});
+  }
+
+  public subtract(vec: Vector2D) {
+    this.val.x -= vec.x;
+    this.val.y -= vec.y;
+    return this;
+  }
+
+  public add(vec: Vector2D) {
+    this.val.x += vec.x;
+    this.val.y += vec.y;
+    return this;
+  }
+}

package/{src/web/tools → harmony/gesture_handler/src/main/ets}/VelocityTracker.ts

@@ -1,6 +1,6 @@
-import { AdaptedEvent } from '../interfaces';
-import CircularBuffer from './CircularBuffer';
-import LeastSquareSolver from './LeastSquareSolver';
+import { AdaptedEvent } from './Event';
+import { CircularBuffer } from './CircularBuffer';
+import { LeastSquareSolver } from './LeastSquareSolver';
 
 export default class VelocityTracker {
   private assumePointerMoveStoppedMilliseconds = 40;
@@ -50,7 +50,7 @@ export default class VelocityTracker {
 
       if (
         age > this.horizonMilliseconds ||
-        delta > this.assumePointerMoveStoppedMilliseconds
+          delta > this.assumePointerMoveStoppedMilliseconds
       ) {
         break;
       }