@react-native-oh-tpl/react-native-gesture-handler 2.14.13 → 2.14.14

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

@@ -1,23 +1,71 @@
 import { RNOHContext } from '@rnoh/react-native-openharmony/ts';
 import { RNGHLogger, RNGHLoggerMessage } from "../core"
+import hiTrace from "@ohos.hiTraceMeter"
 
-export class StandardRNGHLogger implements RNGHLogger {
+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(
-    private rnohLogger: RNOHContext['logger'],
-    private prefix: string,
+    protected rnohLogger: RNOHContext['logger'],
+    protected prefix: string,
+    protected tracer: Tracer = new Tracer(),
   ) {
   }
 
   error(msg: string) {
-    this.rnohLogger.error(`${this.prefix}::${msg}`);
+    this.log("error", msg);
+  }
+
+  warn(msg: string) {
+    this.log("warn", msg);
   }
 
   info(msg: string) {
-    this.rnohLogger.info(`${this.prefix}::${msg}`);
+    this.log("info", msg);
   }
 
   debug(msg: RNGHLoggerMessage) {
-    this.rnohLogger.debug(`${this.prefix}::${this.stringifyMsg(msg)}`);
+    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 {
@@ -28,22 +76,32 @@ export class StandardRNGHLogger implements RNGHLogger {
     }
   }
 
-  cloneWithPrefix(prefix: string) {
-    return new StandardRNGHLogger(this.rnohLogger, `${this.prefix}::${prefix}`);
+  cloneAndJoinPrefix(prefix: string) {
+    return new DevelopmentRNGHLogger(this.rnohLogger, `${this.prefix}::${prefix}`, this.tracer);
   }
 }
 
-export class FakeRNGHLogger implements RNGHLogger {
-  info(msg: string) {
+export class ProductionRNGHLogger extends DevelopmentRNGHLogger {
+  override debug(msg: string) {
+    // NOOP
   }
 
-  debug(msg: string) {
+  override cloneAndJoinPrefix(prefix: string) {
+    return new ProductionRNGHLogger(this.rnohLogger, `${this.prefix}::${prefix}`, this.tracer);
   }
 
-  error(msg: string): void {
-  }
+  override startTracing(): () => void {
+    const startTime = Date.now()
+    const currentOffset = this.tracer.getActiveTracesCount() * 2
 
-  cloneWithPrefix(prefix: string) {
-    return new FakeRNGHLogger();
+    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

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

package/harmony/gesture_handler/src/main/ets/rnoh/{GestureHandlerArkUIAdapter.ts → RNGHViewController.ts}

@@ -11,15 +11,16 @@ import {
 } from '../core';
 import { TouchEvent, TouchType, TouchObject } from './types';
 
-export class GestureHandlerArkUIAdapter {
+
+export class RNGHViewController {
   private activePointerIds = new Set<number>();
-  private pointersIdInBounds = new Set<number>();
+  private pointerIdsInBounds = new Set<number>();
   private gestureHandlers = new Set<GestureHandler>();
   private view: View;
   private logger: RNGHLogger;
 
   constructor(view: View, logger: RNGHLogger) {
-    this.logger = logger.cloneWithPrefix(`ArkUIAdapter(viewTag: ${view.getTag()})`)
+    this.logger = logger.cloneAndJoinPrefix(`RNGHViewTouchHandler`)
     this.view = view;
   }
 
@@ -28,19 +29,23 @@ export class GestureHandlerArkUIAdapter {
   }
 
   handleTouch(e: TouchEvent) {
+    const logger = this.logger.cloneAndJoinPrefix("handleTouch")
     for (const changedTouch of e.changedTouches) {
-      if (this.shouldSkipTouch(changedTouch)) continue;
-      const wasInBounds = this.pointersIdInBounds.has(changedTouch.id);
+      if (this.shouldSkipTouch(changedTouch)) {
+        continue;
+      }
+      const wasInBounds = this.pointerIdsInBounds.has(changedTouch.id);
       const isInBounds = this.isInBounds({
         x: changedTouch.windowX,
         y: changedTouch.windowY,
       });
-      this.logger.info(
-        `handleTouch: ${JSON.stringify({
+      logger.debug(
+        {
+          viewTag: this.view.getTag(),
           type: changedTouch.type,
           wasInBounds,
           isInBounds,
-        })}`,
+        },
       );
       const adaptedEvent = this.adaptTouchEvent(e, changedTouch);
       this.gestureHandlers.forEach(gh => {
@@ -58,9 +63,11 @@ export class GestureHandlerArkUIAdapter {
             gh.onAdditionalPointerRemove(adaptedEvent);
             break;
           case EventType.MOVE:
-            if (!wasInBounds && !isInBounds)
+            if (!wasInBounds && !isInBounds) {
               gh.onPointerOutOfBounds(adaptedEvent);
-            else gh.onPointerMove(adaptedEvent);
+            } else {
+              gh.onPointerMove(adaptedEvent);
+            }
             break;
           case EventType.ENTER:
             gh.onPointerEnter(adaptedEvent);
@@ -97,9 +104,10 @@ export class GestureHandlerArkUIAdapter {
       changedTouch.type,
       this.isInBounds({ x: xAbsolute, y: yAbsolute }),
       changedTouch.id,
-      this.pointersIdInBounds.has(changedTouch.id),
+      this.pointerIdsInBounds.has(changedTouch.id),
     );
-    this.logger.cloneWithPrefix("adaptTouchEvent").debug({ eventType, activePointersCount: this.activePointerIds.size })
+    this.logger.cloneAndJoinPrefix("adaptTouchEvent")
+      .debug({ eventType, activePointersCount: this.activePointerIds.size })
     this.updateIsInBoundsByPointerId(
       changedTouch.type,
       changedTouch.id,
@@ -133,17 +141,25 @@ export class GestureHandlerArkUIAdapter {
   ) {
     switch (touchType) {
       case TouchType.Down:
-        if (this.isInBounds({ x, y })) this.pointersIdInBounds.add(pointerId);
+        if (this.isInBounds({ x, y })) {
+          this.pointerIdsInBounds.add(pointerId);
+        }
         break;
       case TouchType.Move:
-        if (this.isInBounds({ x, y })) this.pointersIdInBounds.add(pointerId);
-        else this.pointersIdInBounds.delete(pointerId);
+        if (this.isInBounds({
+          x,
+          y
+        })) {
+          this.pointerIdsInBounds.add(pointerId);
+        } else {
+          this.pointerIdsInBounds.delete(pointerId);
+        }
         break;
       case TouchType.Up:
-        this.pointersIdInBounds.delete(pointerId);
+        this.pointerIdsInBounds.delete(pointerId);
         break;
       case TouchType.Cancel:
-        this.pointersIdInBounds.delete(pointerId);
+        this.pointerIdsInBounds.delete(pointerId);
         break;
     }
   }
@@ -152,7 +168,7 @@ export class GestureHandlerArkUIAdapter {
     const x = point.x;
     const y = point.y;
     const rect = this.view.getBoundingRect();
-    this.logger.cloneWithPrefix("isInBounds").debug({ rect })
+    this.logger.cloneAndJoinPrefix("isInBounds").debug({ rect })
     const result =
       x >= rect.x &&
         x <= rect.x + rect.width &&
@@ -204,11 +220,17 @@ export class GestureHandlerArkUIAdapter {
 
     switch (touchType) {
       case TouchType.Down:
-        if (activePointersCount > 0) return EventType.ADDITIONAL_POINTER_DOWN;
-        else return EventType.DOWN;
+        if (activePointersCount > 0) {
+          return EventType.ADDITIONAL_POINTER_DOWN;
+        } else {
+          return EventType.DOWN;
+        }
       case TouchType.Up:
-        if (activePointersCount > 1) return EventType.ADDITIONAL_POINTER_UP;
-        else return EventType.UP;
+        if (activePointersCount > 1) {
+          return EventType.ADDITIONAL_POINTER_UP;
+        } else {
+          return EventType.UP;
+        }
       case TouchType.Move:
         if (isCurrentlyInBounds) {
           return wasInBounds ? EventType.MOVE : EventType.ENTER;

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

@@ -0,0 +1,19 @@
+import { Tag, } from '@rnoh/react-native-openharmony/ts';
+import { View, ViewRegistry } from '../core';
+
+
+export class RNGHViewRegistry implements ViewRegistry {
+  private viewByTag = new Map<Tag, View>()
+
+  save(view: View) {
+    this.viewByTag.set(view.getTag(), view)
+  }
+
+  deleteByTag(viewTag: Tag) {
+    this.viewByTag.delete(viewTag)
+  }
+
+  getViewByTag(viewTag: Tag) {
+    return this.viewByTag.get(viewTag);
+  }
+}