@react-native-oh-tpl/react-native-gesture-handler 2.14.8-rc.1 → 2.14.14

package/harmony/gesture_handler/src/main/ets/gesture-handlers/detectors/RotationGestureDetector.ts

@@ -0,0 +1,167 @@
+import { PointerTracker, IncomingEvent, EventType } from '../../core';
+
+export interface RotationGestureListener {
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (detector: RotationGestureDetector) => boolean;
+  onRotationEnd: (detector: RotationGestureDetector) => void;
+}
+
+export default class RotationGestureDetector
+  implements RotationGestureListener
+{
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (detector: RotationGestureDetector) => boolean;
+  onRotationEnd: (detector: RotationGestureDetector) => void;
+
+  private currentTime = 0;
+  private previousTime = 0;
+
+  private previousAngle = 0;
+  private rotation = 0;
+
+  private anchorX = 0;
+  private anchorY = 0;
+
+  private isInProgress = false;
+
+  private keyPointers: number[] = [NaN, NaN];
+
+  constructor(callbacks: RotationGestureListener) {
+    this.onRotationBegin = callbacks.onRotationBegin;
+    this.onRotation = callbacks.onRotation;
+    this.onRotationEnd = callbacks.onRotationEnd;
+  }
+
+  private updateCurrent(event: IncomingEvent, tracker: PointerTracker): void {
+    this.previousTime = this.currentTime;
+    this.currentTime = event.time;
+
+    const [firstPointerID, secondPointerID] = this.keyPointers;
+
+    const firstPointerX: number = tracker.getLastX(firstPointerID);
+    const firstPointerY: number = tracker.getLastY(firstPointerID);
+    const secondPointerX: number = tracker.getLastX(secondPointerID);
+    const secondPointerY: number = tracker.getLastY(secondPointerID);
+
+    const vectorX: number = secondPointerX - firstPointerX;
+    const vectorY: number = secondPointerY - firstPointerY;
+
+    this.anchorX = (firstPointerX + secondPointerX) / 2;
+    this.anchorY = (firstPointerY + secondPointerY) / 2;
+
+    //Angle diff should be positive when rotating in clockwise direction
+    const angle: number = -Math.atan2(vectorY, vectorX);
+
+    this.rotation = Number.isNaN(this.previousAngle)
+      ? 0
+      : this.previousAngle - angle;
+
+    this.previousAngle = angle;
+
+    if (this.rotation > Math.PI) {
+      this.rotation -= Math.PI;
+    } else if (this.rotation < -Math.PI) {
+      this.rotation += Math.PI;
+    }
+
+    if (this.rotation > Math.PI / 2) {
+      this.rotation -= Math.PI;
+    } else if (this.rotation < -Math.PI / 2) {
+      this.rotation += Math.PI;
+    }
+  }
+
+  private finish(): void {
+    if (!this.isInProgress) {
+      return;
+    }
+
+    this.isInProgress = false;
+    this.keyPointers = [NaN, NaN];
+    this.onRotationEnd(this);
+  }
+
+  private setKeyPointers(tracker: PointerTracker): void {
+    if (this.keyPointers[0] && this.keyPointers[1]) {
+      return;
+    }
+
+    const pointerIDs: IterableIterator<number> = tracker.getData().keys();
+
+    this.keyPointers[0] = pointerIDs.next().value as number;
+    this.keyPointers[1] = pointerIDs.next().value as number;
+  }
+
+  public onTouchEvent(event: IncomingEvent, tracker: PointerTracker): boolean {
+    switch (event.eventType) {
+      case EventType.DOWN:
+        this.isInProgress = false;
+        break;
+
+      case EventType.ADDITIONAL_POINTER_DOWN:
+        if (this.isInProgress) {
+          break;
+        }
+        this.isInProgress = true;
+
+        this.previousTime = event.time;
+        this.previousAngle = NaN;
+
+        this.setKeyPointers(tracker);
+
+        this.updateCurrent(event, tracker);
+        this.onRotationBegin(this);
+        break;
+
+      case EventType.MOVE:
+        if (!this.isInProgress) {
+          break;
+        }
+
+        this.updateCurrent(event, tracker);
+        this.onRotation(this);
+
+        break;
+
+      case EventType.ADDITIONAL_POINTER_UP:
+        if (!this.isInProgress) {
+          break;
+        }
+
+        if (this.keyPointers.indexOf(event.pointerId) >= 0) {
+          this.finish();
+        }
+
+        break;
+
+      case EventType.UP:
+        if (this.isInProgress) {
+          this.finish();
+        }
+        break;
+    }
+
+    return true;
+  }
+
+  public getTimeDelta(): number {
+    return this.currentTime + this.previousTime;
+  }
+
+  public getAnchorX(): number {
+    return this.anchorX;
+  }
+
+  public getAnchorY(): number {
+    return this.anchorY;
+  }
+
+  public getRotation(): number {
+    return this.rotation;
+  }
+
+  public reset(): void {
+    this.keyPointers = [NaN, NaN];
+    this.isInProgress = false;
+  }
+}

package/harmony/gesture_handler/src/main/ets/gesture-handlers/index.ts

@@ -0,0 +1 @@
+export * from "./GestureHandlerFactory"

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

@@ -0,0 +1,25 @@
+import {RNPackage, TurboModulesFactory} from "@rnoh/react-native-openharmony/ts";
+import type {TurboModule, TurboModuleContext} from "@rnoh/react-native-openharmony/ts";
+import {RNGestureHandlerModule} from './RNGestureHandlerModule';
+
+class GestureHandlerTurboModuleFactory 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.NAME;
+  }
+}
+
+/**
+ * @deprecated: Use the package class exported from ../RNOHPackage.ets (2024-10-10)
+ */
+export class GestureHandlerPackage extends RNPackage {
+  createUITurboModuleFactory(ctx: TurboModuleContext): TurboModulesFactory {
+    return new GestureHandlerTurboModuleFactory(ctx);
+  }
+}

package/harmony/gesture_handler/src/main/ets/rnoh/Logger.ts

@@ -0,0 +1,107 @@
+import { RNOHContext } from '@rnoh/react-native-openharmony/ts';
+import { RNGHLogger, RNGHLoggerMessage } from "../core"
+import hiTrace from "@ohos.hiTraceMeter"
+
+class Tracer {
+  private activeTracesCount: number = 0
+
+  public startTrace(name: string) {
+    /**
+     * hiTrace.startTrace creates a new lane which makes the traces useless
+     */
+    hiTrace.startTrace(name, 0)
+    this.activeTracesCount++
+    return () => {
+      hiTrace.finishTrace(name, 0)
+      this.activeTracesCount--
+    }
+  }
+
+  public getActiveTracesCount(): number {
+    return this.activeTracesCount
+  }
+}
+
+export class DevelopmentRNGHLogger implements RNGHLogger {
+  constructor(
+    protected rnohLogger: RNOHContext['logger'],
+    protected prefix: string,
+    protected tracer: Tracer = new Tracer(),
+  ) {
+  }
+
+  error(msg: string) {
+    this.log("error", msg);
+  }
+
+  warn(msg: string) {
+    this.log("warn", msg);
+  }
+
+  info(msg: string) {
+    this.log("info", msg);
+  }
+
+  debug(msg: RNGHLoggerMessage) {
+    this.log("debug", typeof msg === "string" ? msg : JSON.stringify(msg));
+  }
+
+  protected log(type: "debug" | "info" | "warn" | "error", msg: string, offset: number | undefined = undefined) {
+    this.rnohLogger[type](" ".repeat(offset ?? this.tracer.getActiveTracesCount() * 2),
+      `${this.prefix}: ${this.stringifyMsg(msg)}`)
+  }
+
+  startTracing(): () => void {
+    const startTime = Date.now()
+    const currentOffset = this.tracer.getActiveTracesCount() * 2
+    this.log("debug", "START", currentOffset)
+    const stopTrace = this.tracer.startTrace(this.prefix)
+    return () => {
+      stopTrace()
+      const stopTime = Date.now()
+      const durationInMs = stopTime - startTime
+      if (durationInMs < 16) {
+        this.log("debug", "STOP", currentOffset)
+      } else {
+        this.log("debug", `STOP (${durationInMs} ms)`, currentOffset)
+      }
+    }
+  }
+
+  private stringifyMsg(msg: RNGHLoggerMessage): string {
+    if (typeof msg === "string") {
+      return msg
+    } else {
+      return JSON.stringify(msg)
+    }
+  }
+
+  cloneAndJoinPrefix(prefix: string) {
+    return new DevelopmentRNGHLogger(this.rnohLogger, `${this.prefix}::${prefix}`, this.tracer);
+  }
+}
+
+export class ProductionRNGHLogger extends DevelopmentRNGHLogger {
+  override debug(msg: string) {
+    // NOOP
+  }
+
+  override cloneAndJoinPrefix(prefix: string) {
+    return new ProductionRNGHLogger(this.rnohLogger, `${this.prefix}::${prefix}`, this.tracer);
+  }
+
+  override startTracing(): () => void {
+    const startTime = Date.now()
+    const currentOffset = this.tracer.getActiveTracesCount() * 2
+
+    const stopTrace = this.tracer.startTrace(this.prefix)
+    return () => {
+      stopTrace()
+      const stopTime = Date.now()
+      const durationInMs = stopTime - startTime
+      if (durationInMs > 16) {
+        this.log("warn", `STOP (${durationInMs} ms)`, currentOffset)
+      }
+    }
+  }
+}

package/harmony/gesture_handler/src/main/ets/rnoh/OutgoingEventDispatchers.ts

@@ -0,0 +1,94 @@
+import { RNInstance } from '@rnoh/react-native-openharmony/ts';
+import {
+  OutgoingEventDispatcher,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  GestureTouchEvent,
+  RNGHLogger
+} from "../core"
+
+export class JSEventDispatcher implements OutgoingEventDispatcher {
+  private logger: RNGHLogger
+
+  constructor(private rnInstance: RNInstance, logger: RNGHLogger) {
+    this.logger = logger.cloneAndJoinPrefix("JSEventDispatcher")
+  }
+
+  public onGestureHandlerStateChange(event: GestureStateChangeEvent) {
+    const stopTracing = this.logger.cloneAndJoinPrefix(`onGestureHandlerStateChange`).startTracing();
+    this.rnInstance.emitDeviceEvent('onGestureHandlerStateChange', event);
+    stopTracing()
+  }
+
+  public onGestureHandlerEvent(
+    event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
+  ) {
+    const stopTracing = this.logger.cloneAndJoinPrefix(`onGestureHandlerEvent`).startTracing();
+    this.rnInstance.emitDeviceEvent('onGestureHandlerEvent', event);
+    stopTracing()
+  }
+}
+
+export class AnimatedEventDispatcher implements OutgoingEventDispatcher {
+  private logger: RNGHLogger
+
+  constructor(
+    private rnInstance: RNInstance,
+    logger: RNGHLogger,
+    private viewTag: number,
+  ) {
+    this.logger = logger.cloneAndJoinPrefix("AnimatedEventDispatcher")
+  }
+
+  public onGestureHandlerStateChange(event: GestureStateChangeEvent) {
+    const stopTracing = this.logger.cloneAndJoinPrefix(`onGestureHandlerStateChange`).startTracing()
+    this.rnInstance.emitDeviceEvent('onGestureHandlerStateChange', event);
+    stopTracing()
+  }
+
+  public onGestureHandlerEvent(
+    event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
+  ) {
+    const stopTracing = this.logger.cloneAndJoinPrefix(`onGestureHandlerEvent`).startTracing();
+    this.rnInstance.emitComponentEvent(
+      this.viewTag,
+      'onGestureHandlerEvent',
+      event,
+    );
+    stopTracing()
+  }
+}
+
+export class ReanimatedEventDispatcher implements OutgoingEventDispatcher {
+  private logger: RNGHLogger
+
+  constructor(
+    private rnInstance: RNInstance,
+    logger: RNGHLogger,
+    private viewTag: number,
+  ) {
+    this.logger = logger.cloneAndJoinPrefix("ReanimatedEventDispatcher")
+  }
+
+  public onGestureHandlerStateChange(event: GestureStateChangeEvent) {
+    const stopTracing = this.logger.cloneAndJoinPrefix(`onGestureHandlerStateChange`).startTracing();
+    this.rnInstance.emitComponentEvent(
+      this.viewTag,
+      'onGestureHandlerStateChange',
+      event,
+    );
+    stopTracing()
+  }
+
+  public onGestureHandlerEvent(
+    event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
+  ) {
+    const stopTracing = this.logger.cloneAndJoinPrefix(`onGestureHandlerEvent`).startTracing();
+    this.rnInstance.emitComponentEvent(
+      this.viewTag,
+      'onGestureHandlerEvent',
+      event,
+    );
+    stopTracing()
+  }
+}

package/harmony/gesture_handler/src/main/ets/rnoh/RNGHRootViewController.ts

@@ -0,0 +1,182 @@
+import { TouchEvent as TouchEventArkTS, TouchType, TouchObject } from './types';
+import { RNGHLogger, View, Multiset, GestureHandlerRegistry } from '../core';
+import { RawTouchableView } from "./RNGHView"
+import { RNGHViewController } from './RNGHViewController';
+
+type RawTouchPoint = {
+  pointerId: number;
+  windowX: number;
+  windowY: number;
+};
+
+export type RawTouchEvent = {
+  action: number;
+  actionTouch: RawTouchPoint;
+  touchPoints: RawTouchPoint[];
+  sourceType: number;
+  timestamp: number;
+  /** TouchableViews is a list of views from the root to the leaf which contain within their boundaries the touch point specified by `actionTouch`. */
+  touchableViews: RawTouchableView[]
+};
+
+
+const areRawTouchPointsEqual = (a: RawTouchPoint, b: RawTouchPoint) =>
+a.pointerId === b.pointerId &&
+  a.windowX === b.windowX &&
+  a.windowY === b.windowY;
+
+
+export class RNGHRootViewController {
+  private logger: RNGHLogger;
+  // This multiset keeps track of touchable views that were detected
+  // at the beginning of the gesture to ensure they aren't overridden
+  // during move touch events, which could prevent the gesture handler
+  // from updating its state correctly.
+  private touchableViewsMultiset: Multiset<View> = new Multiset();
+  private viewControllerByViewTag: Map<number, RNGHViewController> =
+    new Map(); // TODO: remove entry when view is removed
+  /**
+   * A view is ACTIVE, if it recently received POINTER_DOWN event
+   */
+  private activeViewTags = new Set<number>();
+
+  constructor(
+    logger: RNGHLogger,
+    private gestureHandlerRegistry: GestureHandlerRegistry
+  ) {
+    this.logger = logger.cloneAndJoinPrefix('RNGHRootTouchHandlerCAPI');
+  }
+
+  handleTouch(rawTouchEvent: RawTouchEvent, touchableViews: View[]) {
+    /**
+     * NOTE: TouchEventArkTS was used in ArkTS RNOH architecture. Currently only C-API architecture is supported.
+     */
+    const touchEvent = rawTouchEventToTouchEventArkTS(rawTouchEvent);
+    if (touchEvent.type === TouchType.Down) {
+      touchableViews.forEach(view => this.touchableViewsMultiset.add(view));
+    }
+    const e = touchEvent;
+    if (e.type === TouchType.Down) {
+      this.activeViewTags.clear();
+    }
+    const views = touchableViews
+    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()}`,
+        );
+
+        // create view touch handler if necessary
+        if (!this.viewControllerByViewTag.has(view.getTag())) {
+          this.viewControllerByViewTag.set(
+            view.getTag(),
+            new RNGHViewController(
+              view,
+              this.logger,
+            ),
+          );
+        }
+
+        // attach handler (there might be multiple handlers per view)
+        this.viewControllerByViewTag.get(view.getTag())!.attachGestureHandler(handler) // TODO: detachGestureHandler
+
+        // register active view tag
+        if (e.type === TouchType.Down) {
+          this.activeViewTags.add(view.getTag());
+        }
+      }
+    }
+
+    // send touch to gesture handlers, prioritize handling touch events for child components
+    if (this.activeViewTags.size > 0) {
+      const tags = Array.from(this.activeViewTags);
+      for (let i = tags.length - 1; i >= 0; i--) {
+        const tag = tags[i];
+        const viewController = this.viewControllerByViewTag.get(tag);
+        if (viewController) {
+          viewController.handleTouch(e);
+        }
+      }
+    }
+
+
+    if (touchEvent.type === TouchType.Up || touchEvent.type === TouchType.Cancel) {
+      touchableViews.forEach(view => this.touchableViewsMultiset.remove(view));
+    }
+  }
+
+  cancelTouches() {
+    for (const activeViewTag of this.activeViewTags) {
+      this.gestureHandlerRegistry.getGestureHandlersByViewTag(activeViewTag).forEach(gh => {
+        gh.cancel()
+        gh.reset()
+      })
+    }
+  }
+}
+
+
+const CACHED_RAW_TOUCH_POINT_BY_POINTER_ID = new Map<number, RawTouchPoint>();
+let LAST_CHANGED_POINTER_ID: number | null = null;
+const MAX_CACHE_SIZE = 10;
+
+function rawTouchEventToTouchEventArkTS(raw: RawTouchEvent): TouchEventArkTS {
+  const touchType = touchTypeFromAction(raw.action);
+  const actionTouch = raw.actionTouch;
+
+  let lastChangedTouch: RawTouchPoint = actionTouch;
+  if (CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.has(actionTouch.pointerId)) {
+    if (!areRawTouchPointsEqual(actionTouch,
+      CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.get(actionTouch.pointerId) as RawTouchPoint)) {
+      LAST_CHANGED_POINTER_ID = actionTouch.pointerId;
+      CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.set(actionTouch.pointerId, actionTouch);
+    }
+  } else {
+    // remove first element if the cache is full
+    if (CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.size >= MAX_CACHE_SIZE) {
+      CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.delete(CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.keys().next().value);
+    }
+    LAST_CHANGED_POINTER_ID = actionTouch.pointerId;
+    CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.set(actionTouch.pointerId, actionTouch);
+  }
+  lastChangedTouch = CACHED_RAW_TOUCH_POINT_BY_POINTER_ID.get(LAST_CHANGED_POINTER_ID as number) as RawTouchPoint
+  return {
+    type: touchTypeFromAction(raw.action),
+    touches: raw.touchPoints.map(tp =>
+    touchObjectFromTouchPoint(tp, touchType),
+    ),
+    changedTouches: [
+      touchObjectFromTouchPoint(lastChangedTouch, touchType),
+    ],
+    timestamp: raw.timestamp / Math.pow(10, 6),
+  };
+}
+
+function touchTypeFromAction(action: number): TouchType {
+  switch (action) {
+    case 1:
+      return TouchType.Down;
+    case 2:
+      return TouchType.Move;
+    case 3:
+      return TouchType.Up;
+    default:
+      return TouchType.Cancel;
+  }
+}
+
+function touchObjectFromTouchPoint(
+  touchPoint: RawTouchPoint,
+  touchType: TouchType,
+): TouchObject {
+  return {
+    id: touchPoint.pointerId,
+    windowX: touchPoint.windowX,
+    windowY: touchPoint.windowY,
+    x: touchPoint.windowX,
+    y: touchPoint.windowY,
+    type: touchType,
+  };
+}

package/harmony/gesture_handler/src/main/ets/rnoh/RNGHView.ts

@@ -0,0 +1,62 @@
+import { View, BoundingBox } from "../core"
+
+
+export type RawTouchableView = {
+  tag: number,
+  /**
+   * Relative to application window.
+   */
+  x: number,
+  /**
+   * Relative to application window.
+   */
+  y: number,
+  width: number,
+  height: number,
+  buttonRole: boolean,
+}
+
+export class RNGHView implements View {
+  private tag: number
+  private buttonRole: boolean
+  private boundingBox: BoundingBox
+
+  constructor({ tag, buttonRole, ...boundingBox }: RawTouchableView) {
+    this.tag = tag
+    this.buttonRole = buttonRole
+    this.boundingBox = boundingBox
+  }
+
+  getTag(): number {
+    return this.tag
+  }
+
+  getBoundingRect(): BoundingBox {
+    return { ...this.boundingBox }
+  }
+
+  isPositionInBounds({ x, y }: {
+    x: number;
+    y: number
+  }): boolean {
+    const rect = this.getBoundingRect();
+    return (
+      x >= rect.x &&
+        x <= rect.x + rect.width &&
+        y >= rect.y &&
+        y <= rect.y + rect.height
+    );
+  }
+
+  updateBoundingBox(boundingBox: BoundingBox) {
+    this.boundingBox = boundingBox
+  }
+
+  setButtonRole(buttonRole: boolean) {
+    this.buttonRole = buttonRole
+  }
+
+  hasButtonRole(): boolean {
+    return this.buttonRole
+  }
+}