@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/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,57 @@
+import { Descriptor, RNOHContext, RNViewBase, ComponentBuilderContext, RNComponentFactory, Tag } from "rnoh"
+import { RNGHRootTouchHandler } from "./RNGHRootTouchHandler"
+import { RNGestureHandlerModule } from "./RNGestureHandlerModule"
+import { Vector2D } from "./Vector2D"
+import { ViewRegistry } from './ViewRegistry'
+
+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() as ViewRegistry, 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,98 +1,98 @@
-import { AdaptedEvent } from '../interfaces';
-import CircularBuffer from './CircularBuffer';
-import LeastSquareSolver from './LeastSquareSolver';
-
-export default class VelocityTracker {
-  private assumePointerMoveStoppedMilliseconds = 40;
-  private historySize = 20;
-  private horizonMilliseconds = 300;
-  private minSampleSize = 3;
-
-  private samples: CircularBuffer<AdaptedEvent>;
-
-  constructor() {
-    this.samples = new CircularBuffer<AdaptedEvent>(this.historySize);
-  }
-
-  public add(event: AdaptedEvent): void {
-    this.samples.push(event);
-  }
-
-  /// Returns an estimate of the velocity of the object being tracked by the
-  /// tracker given the current information available to the tracker.
-  ///
-  /// Information is added using [addPosition].
-  ///
-  /// Returns null if there is no data on which to base an estimate.
-  private getVelocityEstimate(): [number, number] | null {
-    const x = [];
-    const y = [];
-    const w = [];
-    const time = [];
-
-    let sampleCount = 0;
-    let index = this.samples.size - 1;
-    const newestSample = this.samples.get(index);
-    if (!newestSample) {
-      return null;
-    }
-
-    let previousSample = newestSample;
-
-    // Starting with the most recent PointAtTime sample, iterate backwards while
-    // the samples represent continuous motion.
-    while (sampleCount < this.samples.size) {
-      const sample = this.samples.get(index);
-
-      const age = newestSample.time - sample.time;
-      const delta = Math.abs(sample.time - previousSample.time);
-      previousSample = sample;
-
-      if (
-        age > this.horizonMilliseconds ||
-        delta > this.assumePointerMoveStoppedMilliseconds
-      ) {
-        break;
-      }
-
-      x.push(sample.x);
-      y.push(sample.y);
-      w.push(1);
-      time.push(-age);
-
-      sampleCount++;
-      index--;
-    }
-
-    if (sampleCount >= this.minSampleSize) {
-      const xSolver = new LeastSquareSolver(time, x, w);
-      const xFit = xSolver.solve(2);
-
-      if (xFit !== null) {
-        const ySolver = new LeastSquareSolver(time, y, w);
-        const yFit = ySolver.solve(2);
-
-        if (yFit !== null) {
-          const xVelocity = xFit.coefficients[1] * 1000;
-          const yVelocity = yFit.coefficients[1] * 1000;
-
-          return [xVelocity, yVelocity];
-        }
-      }
-    }
-
-    return null;
-  }
-
-  public getVelocity(): [number, number] {
-    const estimate = this.getVelocityEstimate();
-    if (estimate !== null) {
-      return estimate;
-    }
-    return [0, 0];
-  }
-
-  public reset(): void {
-    this.samples.clear();
-  }
-}
+import { AdaptedEvent } from './Event';
+import { CircularBuffer } from './CircularBuffer';
+import { LeastSquareSolver } from './LeastSquareSolver';
+
+export default class VelocityTracker {
+  private assumePointerMoveStoppedMilliseconds = 40;
+  private historySize = 20;
+  private horizonMilliseconds = 300;
+  private minSampleSize = 3;
+
+  private samples: CircularBuffer<AdaptedEvent>;
+
+  constructor() {
+    this.samples = new CircularBuffer<AdaptedEvent>(this.historySize);
+  }
+
+  public add(event: AdaptedEvent): void {
+    this.samples.push(event);
+  }
+
+  /// Returns an estimate of the velocity of the object being tracked by the
+  /// tracker given the current information available to the tracker.
+  ///
+  /// Information is added using [addPosition].
+  ///
+  /// Returns null if there is no data on which to base an estimate.
+  private getVelocityEstimate(): [number, number] | null {
+    const x = [];
+    const y = [];
+    const w = [];
+    const time = [];
+
+    let sampleCount = 0;
+    let index = this.samples.size - 1;
+    const newestSample = this.samples.get(index);
+    if (!newestSample) {
+      return null;
+    }
+
+    let previousSample = newestSample;
+
+    // Starting with the most recent PointAtTime sample, iterate backwards while
+    // the samples represent continuous motion.
+    while (sampleCount < this.samples.size) {
+      const sample = this.samples.get(index);
+
+      const age = newestSample.time - sample.time;
+      const delta = Math.abs(sample.time - previousSample.time);
+      previousSample = sample;
+
+      if (
+        age > this.horizonMilliseconds ||
+          delta > this.assumePointerMoveStoppedMilliseconds
+      ) {
+        break;
+      }
+
+      x.push(sample.x);
+      y.push(sample.y);
+      w.push(1);
+      time.push(-age);
+
+      sampleCount++;
+      index--;
+    }
+
+    if (sampleCount >= this.minSampleSize) {
+      const xSolver = new LeastSquareSolver(time, x, w);
+      const xFit = xSolver.solve(2);
+
+      if (xFit !== null) {
+        const ySolver = new LeastSquareSolver(time, y, w);
+        const yFit = ySolver.solve(2);
+
+        if (yFit !== null) {
+          const xVelocity = xFit.coefficients[1] * 1000;
+          const yVelocity = yFit.coefficients[1] * 1000;
+
+          return [xVelocity, yVelocity];
+        }
+      }
+    }
+
+    return null;
+  }
+
+  public getVelocity(): [number, number] {
+    const estimate = this.getVelocityEstimate();
+    if (estimate !== null) {
+      return estimate;
+    }
+    return [0, 0];
+  }
+
+  public reset(): void {
+    this.samples.clear();
+  }
+}