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

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

@@ -0,0 +1,262 @@
+import { Point } from '@rnoh/react-native-openharmony/ts';
+import {
+  GestureHandler,
+  IncomingEvent,
+  EventType,
+  PointerType,
+  TouchEventType,
+  Touch,
+  RNGHLogger,
+  View
+} from '../core';
+import { TouchEvent, TouchType, TouchObject } from './types';
+
+
+export class RNGHViewController {
+  private activePointerIds = 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.cloneAndJoinPrefix(`RNGHViewTouchHandler`)
+    this.view = view;
+  }
+
+  attachGestureHandler(gestureHandler: GestureHandler) {
+    this.gestureHandlers.add(gestureHandler)
+  }
+
+  handleTouch(e: TouchEvent) {
+    const logger = this.logger.cloneAndJoinPrefix("handleTouch")
+    for (const changedTouch of e.changedTouches) {
+      if (this.shouldSkipTouch(changedTouch)) {
+        continue;
+      }
+      const wasInBounds = this.pointerIdsInBounds.has(changedTouch.id);
+      const isInBounds = this.isInBounds({
+        x: changedTouch.windowX,
+        y: changedTouch.windowY,
+      });
+      logger.debug(
+        {
+          viewTag: this.view.getTag(),
+          type: changedTouch.type,
+          wasInBounds,
+          isInBounds,
+        },
+      );
+      const adaptedEvent = this.adaptTouchEvent(e, changedTouch);
+      this.gestureHandlers.forEach(gh => {
+        switch (adaptedEvent.eventType) {
+          case EventType.DOWN:
+            gh.onPointerDown(adaptedEvent);
+            break;
+          case EventType.ADDITIONAL_POINTER_DOWN:
+            gh.onAdditionalPointerAdd(adaptedEvent);
+            break;
+          case EventType.UP:
+            gh.onPointerUp(adaptedEvent);
+            break;
+          case EventType.ADDITIONAL_POINTER_UP:
+            gh.onAdditionalPointerRemove(adaptedEvent);
+            break;
+          case EventType.MOVE:
+            if (!wasInBounds && !isInBounds) {
+              gh.onPointerOutOfBounds(adaptedEvent);
+            } else {
+              gh.onPointerMove(adaptedEvent);
+            }
+            break;
+          case EventType.ENTER:
+            gh.onPointerEnter(adaptedEvent);
+            break;
+          case EventType.OUT:
+            gh.onPointerOut(adaptedEvent);
+            break;
+          case EventType.CANCEL:
+            gh.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,
+  ): IncomingEvent {
+    const xAbsolute = changedTouch.windowX;
+    const yAbsolute = changedTouch.windowY;
+
+    const eventType = this.mapTouchTypeToEventType(
+      changedTouch.type,
+      this.isInBounds({ x: xAbsolute, y: yAbsolute }),
+      changedTouch.id,
+      this.pointerIdsInBounds.has(changedTouch.id),
+    );
+    this.logger.cloneAndJoinPrefix("adaptTouchEvent")
+      .debug({ eventType, activePointersCount: this.activePointerIds.size })
+    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.pointerIdsInBounds.add(pointerId);
+        }
+        break;
+      case TouchType.Move:
+        if (this.isInBounds({
+          x,
+          y
+        })) {
+          this.pointerIdsInBounds.add(pointerId);
+        } else {
+          this.pointerIdsInBounds.delete(pointerId);
+        }
+        break;
+      case TouchType.Up:
+        this.pointerIdsInBounds.delete(pointerId);
+        break;
+      case TouchType.Cancel:
+        this.pointerIdsInBounds.delete(pointerId);
+        break;
+    }
+  }
+
+  private isInBounds(point: Point): boolean {
+    const x = point.x;
+    const y = point.y;
+    const rect = this.view.getBoundingRect();
+    this.logger.cloneAndJoinPrefix("isInBounds").debug({ rect })
+    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);
+        break;
+      case TouchType.Up:
+        this.activePointerIds.delete(pointerId);
+        break;
+      case TouchType.Cancel:
+        this.activePointerIds.clear();
+        break;
+      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,
+    isCurrentlyInBounds: boolean,
+    pointerId: number,
+    wasInBounds: boolean,
+  ): EventType {
+    /**
+     * If user manages to drag finger out of GestureHandlerRootView,
+     * we don't receive UP event.
+     */
+    let activePointersCount = this.activePointerIds.size
+    if (this.activePointerIds.has(pointerId)) {
+      activePointersCount--;
+    }
+
+    switch (touchType) {
+      case TouchType.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;
+        }
+      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/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);
+  }
+}

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

@@ -0,0 +1,267 @@
+import { UITurboModule, UITurboModuleContext, Tag } from "@rnoh/react-native-openharmony/ts";
+import { TM } from "@rnoh/react-native-openharmony/generated/ts"
+import {
+  GestureHandlerRegistry,
+  State,
+  OutgoingEventDispatcher,
+  RNGHLogger,
+  InteractionManager,
+  ViewRegistry
+} from '../core';
+import { GestureHandlerFactory } from "../gesture-handlers"
+import { RNGHViewRegistry } from './RNGHViewRegistry';
+import { DevelopmentRNGHLogger, ProductionRNGHLogger } from './Logger';
+import { JSEventDispatcher, AnimatedEventDispatcher, ReanimatedEventDispatcher } from './OutgoingEventDispatchers'
+import { RNOHScrollLockerCAPI } from "./RNOHScrollLocker"
+import { RNGHRootViewController, RawTouchEvent } from "./RNGHRootViewController"
+import { RNGHView } from "./RNGHView"
+import { RNOHGestureResponder } from "./RNOHGestureResponder"
+
+export enum ActionType {
+  REANIMATED_WORKLET = 1,
+  NATIVE_ANIMATED_EVENT = 2,
+  JS_FUNCTION_OLD_API = 3,
+  JS_FUNCTION_NEW_API = 4,
+}
+
+
+export class RNGestureHandlerModule extends UITurboModule implements TM.RNGestureHandlerModule.Spec {
+  static readonly NAME = "RNGestureHandlerModule"
+
+  private gestureHandlerRegistry: GestureHandlerRegistry
+  private gestureHandlerFactory: GestureHandlerFactory | undefined = undefined
+  private viewRegistry: ViewRegistry | undefined = undefined
+  private logger: RNGHLogger
+  private cleanLogger: RNGHLogger
+  private rootViewControllerByRootTag = new Map<Tag, RNGHRootViewController>()
+  private interactionManager: InteractionManager
+
+  constructor(ctx: UITurboModuleContext, isDevModeEnabled: boolean = false) {
+    super(ctx)
+    this.cleanLogger =
+      isDevModeEnabled && ctx.isDebugModeEnabled ? new DevelopmentRNGHLogger(ctx.logger, "RNGH") :
+        new ProductionRNGHLogger(ctx.logger, "RNGH")
+    this.logger = this.cleanLogger.cloneAndJoinPrefix("RNGestureHandlerModule")
+    const logger = this.logger.cloneAndJoinPrefix("constructor")
+    const stopTracing = logger.startTracing()
+    this.interactionManager = new InteractionManager(this.cleanLogger)
+    this.gestureHandlerRegistry = new GestureHandlerRegistry(this.viewRegistry, this.cleanLogger)
+    if (this.ctx.rnInstance.getArchitecture() === "C_API") {
+      this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::TOUCH_EVENT", (e: any) => {
+        this.onTouch(e)
+      })
+      this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::ROOT_CREATED", (rootTag: any) => {
+        this.onGHRootCreated(rootTag)
+      })
+      this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::CANCEL_TOUCHES", (rootTag: any) => {
+        const touchHandler = this.rootViewControllerByRootTag.get(rootTag)
+        touchHandler?.cancelTouches()
+      })
+    }
+    stopTracing()
+  }
+
+  /**
+   * Called from C++.
+   */
+  private onGHRootCreated(rootTag: Tag) {
+    const stopTracing = this.logger.cloneAndJoinPrefix("onGHRootCreated").startTracing()
+    this.rootViewControllerByRootTag.set(rootTag, new RNGHRootViewController(this.logger, this.gestureHandlerRegistry));
+    stopTracing()
+  }
+
+  /**
+   * Called from C++.
+   */
+  private onTouch(e: RawTouchEvent & { rootTag: Tag }) {
+    const logger = this.logger.cloneAndJoinPrefix("onTouch")
+    const stopTracing = logger.startTracing();
+    (() => {
+      if (!(this.viewRegistry instanceof RNGHViewRegistry)) {
+        logger.error("Expected ViewRegistryCAPI")
+        return;
+      }
+      const rootViewController = this.rootViewControllerByRootTag.get(e.rootTag)
+      if (!rootViewController) {
+        logger.error(`Couldn't find a rootViewController for a gesture root tag: ${e.rootTag}`)
+        return;
+      }
+      // update view registry
+      e.touchableViews.forEach(touchableView => {
+        const view = this.viewRegistry.getViewByTag(touchableView.tag)
+        if (view) {
+          if (!(view instanceof RNGHView)) {
+            logger.error(`Expected ViewCAPI`)
+            return
+          }
+          view.updateBoundingBox(touchableView)
+          view.setButtonRole(touchableView.buttonRole)
+        } else {
+          this.viewRegistry.save(new RNGHView(touchableView))
+        }
+      })
+      rootViewController.handleTouch(e, e.touchableViews.map(({ tag }) => this.viewRegistry.getViewByTag(tag)));
+    })()
+    stopTracing()
+  }
+
+  // -------------------------------------------------------------------------------------------------------------------
+
+  public install() {
+    const stopTracing = this.ctx.logger.clone("install").startTracing()
+    this.viewRegistry = new RNGHViewRegistry()
+    const scrollLocker = new RNOHScrollLockerCAPI(this.ctx.rnInstance, this.cleanLogger);
+    const rnGestureResponder = new RNOHGestureResponder(this.ctx.rnInstance)
+    this.gestureHandlerFactory =
+      new GestureHandlerFactory(this.cleanLogger, scrollLocker, this.interactionManager, rnGestureResponder)
+    stopTracing()
+    return true
+  }
+
+  public createGestureHandler(
+    handlerName: string,
+    handlerTag: number,
+    config: Readonly<Record<string, unknown>>
+  ) {
+    const logger = this.logger.cloneAndJoinPrefix("createGestureHandler")
+    const stopTracing = logger.startTracing();
+    (() => {
+      if (!this.gestureHandlerFactory) {
+        logger.error("Trying to create a gesture handler before creating gesture handler factory")
+        return
+      }
+      logger.debug({ handlerName, handlerTag, config })
+      const gestureHandler = this.gestureHandlerFactory.create(handlerName, handlerTag)
+      this.gestureHandlerRegistry.addGestureHandler(gestureHandler)
+      this.interactionManager.configureInteractions(gestureHandler, config);
+      gestureHandler.updateGestureConfig(config)
+    })()
+    stopTracing()
+  }
+
+  public attachGestureHandler(
+    handlerTag: number,
+    viewTag: number,
+    actionType: ActionType
+  ) {
+    const logger = this.logger.cloneAndJoinPrefix("attachGestureHandler")
+    const stopTracing = logger.startTracing();
+    (() => {
+      const eventDispatcher = this.createEventDispatcher(actionType, viewTag)
+      if (!eventDispatcher) {
+        logger.error("RNGH: Couldn't create EventDispatcher")
+        return
+      }
+      const viewRegistry = this.viewRegistry
+      let view = this.viewRegistry.getViewByTag(viewTag)
+      if (!view && viewRegistry instanceof RNGHViewRegistry) {
+        view = new RNGHView({
+          tag: viewTag,
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+          buttonRole: false
+        })
+        viewRegistry.save(view)
+      }
+      if (!view) {
+        logger.error("Expected view")
+        return;
+      }
+      this.gestureHandlerRegistry.bindGestureHandlerWithView(handlerTag, view)
+      this.gestureHandlerRegistry.getGestureHandlersByViewTag(view.getTag()).forEach((handler) => {
+        if (handler.isGestureContinuous() && eventDispatcher instanceof JSEventDispatcher) {
+          logger.warn(`Using JSEventDispatcher for a continuous gesture (${handler.getName()}). Gesture-driven animations may not be smooth. Consider using Animated.event.`)
+        }
+      })
+      this.gestureHandlerRegistry
+        .getGestureHandlerByHandlerTag(handlerTag)
+        .setEventDispatcher(eventDispatcher)
+    })()
+    stopTracing()
+  }
+
+  private createEventDispatcher(actionType: ActionType, viewTag: number): OutgoingEventDispatcher | null {
+    switch (actionType) {
+      case ActionType.REANIMATED_WORKLET:
+        return new ReanimatedEventDispatcher(this.ctx.rnInstance,
+          this.cleanLogger, viewTag)
+      case ActionType.NATIVE_ANIMATED_EVENT:
+        return new AnimatedEventDispatcher(this.ctx.rnInstance,
+          this.cleanLogger, viewTag)
+      case ActionType.JS_FUNCTION_OLD_API:
+      case ActionType.JS_FUNCTION_NEW_API:
+        return new JSEventDispatcher(this.ctx.rnInstance, this.cleanLogger);
+    }
+  }
+
+  public updateGestureHandler(
+    handlerTag: number,
+    newConfig: Readonly<Record<string, unknown>>
+  ) {
+    const stopTracing = this.logger.cloneAndJoinPrefix("updateGestureHandler").startTracing()
+    const gestureHandler = this.gestureHandlerRegistry.getGestureHandlerByHandlerTag(handlerTag)
+    this.interactionManager.configureInteractions(gestureHandler, newConfig);
+    gestureHandler.updateGestureConfig(newConfig)
+    stopTracing()
+  }
+
+  public dropGestureHandler(handlerTag: number) {
+    const stopTracing = this.logger.cloneAndJoinPrefix("dropGestureHandler").startTracing()
+    this.interactionManager.dropRelationsForHandlerWithTag(handlerTag)
+    this.gestureHandlerRegistry.removeGestureHandlerByHandlerTag(handlerTag)
+    stopTracing()
+  }
+
+  public handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
+    this.logger.cloneAndJoinPrefix("handleSetJSResponder").warn("not implemented")
+  }
+
+  public handleClearJSResponder() {
+    this.logger.cloneAndJoinPrefix("handleClearJSResponder").warn("not implemented")
+  }
+
+  public flushOperations() {
+    // no-op
+  }
+
+  // -------------------------------------------------------------------------------------------------------------------
+
+  public getGestureHandlerRegistry() {
+    return this.gestureHandlerRegistry
+  }
+
+  public getLogger() {
+    return this.logger
+  }
+
+  public getViewRegistry() {
+    if (!this.viewRegistry) {
+      this.logger.error("Tried to get viewRegistry before it was initialized")
+      throw new Error("Tried to get viewRegistry before it was initialized")
+    }
+    return this.viewRegistry
+  }
+
+  public setGestureHandlerState(handlerTag: number, newState: State) {
+    const handler = this.getGestureHandlerRegistry().getGestureHandlerByHandlerTag(handlerTag);
+    switch (newState) {
+      case State.ACTIVE:
+        handler.activate();
+        break;
+      case State.BEGAN:
+        handler.begin();
+        break;
+      case State.END:
+        handler.end();
+        break;
+      case State.FAILED:
+        handler.fail();
+        break;
+      case State.CANCELLED:
+        handler.cancel();
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { RNInstance } from "@rnoh/react-native-openharmony/ts"
+import { RNGestureResponder } from "../core"
+
+
+export class RNOHGestureResponder implements RNGestureResponder {
+  constructor(private rnInstance: RNInstance) {
+  }
+
+  lock(viewTag: number): () => void {
+    this.rnInstance.postMessageToCpp("RNGH::ROOT_VIEW_IS_HANDLING_TOUCHES", { descendantViewTag: viewTag, isHandlingTouches: true })
+    return () => {
+      this.rnInstance.postMessageToCpp("RNGH::ROOT_VIEW_IS_HANDLING_TOUCHES", { descendantViewTag: viewTag, isHandlingTouches: false })
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { RNInstance } from '@rnoh/react-native-openharmony/ts';
+import { ScrollLocker, RNGHLogger } from '../core';
+
+
+
+export class RNOHScrollLockerCAPI implements ScrollLocker {
+  private logger: RNGHLogger
+
+  constructor(private rnInstance: RNInstance, logger: RNGHLogger) {
+    this.logger = logger.cloneAndJoinPrefix("RNOHScrollLockerCAPI")
+  }
+
+  lockScrollContainingViewTag(viewTag: number) {
+    this.rnInstance.postMessageToCpp('RNGH::SET_NATIVE_RESPONDERS_BLOCK', {
+      targetTag: viewTag,
+      shouldBlock: true,
+    });
+    return () => {
+      this.rnInstance.postMessageToCpp('RNGH::SET_NATIVE_RESPONDERS_BLOCK', {
+        targetTag: viewTag,
+        shouldBlock: false,
+      });
+    };
+  }
+}

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

@@ -0,0 +1,25 @@
+export enum TouchType {
+  Down,
+  Up,
+  Move,
+  Cancel
+}
+
+interface BaseEvent {
+  timestamp: number;
+}
+
+export interface TouchObject {
+  type: TouchType;
+  id: number;
+  windowX: number;
+  windowY: number;
+  x: number;
+  y: number;
+}
+
+export interface TouchEvent extends BaseEvent {
+  type: TouchType;
+  touches: TouchObject[];
+  changedTouches: TouchObject[];
+}

package/harmony/gesture_handler/src/main/module.json5

@@ -0,0 +1,9 @@
+{
+  "module": {
+    "name": "gesture_handler",
+    "type": "har",
+    "deviceTypes": [
+      "default"
+    ],
+  }
+}

package/harmony/gesture_handler/src/main/resources/base/element/color.json

@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}

package/harmony/gesture_handler/src/main/resources/base/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "WebviewAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "WebviewAbility_label",
+      "value": "label"
+    }
+  ]
+}

package/harmony/gesture_handler/src/main/resources/base/profile/main_pages.json

@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}

package/harmony/gesture_handler/src/main/resources/en_US/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "WebviewAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "WebviewAbility_label",
+      "value": "label"
+    }
+  ]
+}

package/harmony/gesture_handler/src/main/resources/zh_CN/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "WebviewAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "WebviewAbility_label",
+      "value": "label"
+    }
+  ]
+}