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

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

@@ -0,0 +1,24 @@
+// This file was generated.
+
+export namespace RNGestureHandlerModule {
+  export const NAME = 'RNGestureHandlerModule' as const
+
+  export interface Spec {
+    handleSetJSResponder(tag: number, blockNativeResponder: boolean): void;
+
+    handleClearJSResponder(): void;
+
+    createGestureHandler(handlerName: string, handlerTag: number, config: Object): void;
+
+    attachGestureHandler(handlerTag: number, newView: number, actionType: number): void;
+
+    updateGestureHandler(handlerTag: number, newConfig: Object): void;
+
+    dropGestureHandler(handlerTag: number): void;
+
+    install(): boolean;
+
+    flushOperations(): void;
+
+  }
+}

package/harmony/gesture_handler/src/main/ets/namespace/components/RNGestureHandlerButton.ts

@@ -0,0 +1,139 @@
+// This file was generated.
+import {
+  Descriptor as ComponentDescriptor,
+  ViewBaseProps,
+  ViewRawProps,
+  ViewDescriptorWrapperBase,
+  ColorValue,
+  Color,
+  RNInstance,
+  Tag,
+  RNComponentCommandReceiver,
+  ViewPropsSelector,
+} from '@rnoh/react-native-openharmony/ts';
+
+
+export namespace RNGestureHandlerButton {
+  export const NAME = "RNGestureHandlerButton" as const
+
+  export interface DirectRawProps {
+    exclusive?: boolean;
+    foreground?: boolean;
+    borderless?: boolean;
+    enabled?: boolean;
+    rippleColor?: ColorValue;
+    rippleRadius?: number;
+    touchSoundDisabled?: boolean;
+  }
+
+  export interface Props extends ViewBaseProps {}
+
+  export interface State {}
+
+  export interface RawProps extends ViewRawProps, DirectRawProps {}
+
+  export class PropsSelector extends ViewPropsSelector<Props, RawProps> {
+    get exclusive() {
+      return this.rawProps.exclusive ?? true;
+    }
+
+    get foreground() {
+      return this.rawProps.foreground ?? false;
+    }
+
+    get borderless() {
+      return this.rawProps.borderless ?? false;
+    }
+
+    get enabled() {
+      return this.rawProps.enabled ?? true;
+    }
+
+    get rippleRadius() {
+      return this.rawProps.rippleRadius ?? 0;
+    }
+
+    get touchSoundDisabled() {
+      return this.rawProps.touchSoundDisabled ?? false;
+    }
+
+
+    get rippleColor() {
+      if (this.rawProps.rippleColor) {
+        return Color.fromColorValue(this.rawProps.rippleColor)
+      } else {
+        return new Color({ r: 0, g: 0, b: 0, a: 255})
+      }
+    }
+
+  }
+
+  export type Descriptor = ComponentDescriptor<
+  typeof NAME,
+  Props,
+  State,
+  RawProps
+  >;
+
+  export class DescriptorWrapper extends ViewDescriptorWrapperBase<
+  typeof NAME,
+  Props,
+  State,
+  RawProps,
+  PropsSelector
+  > {
+    protected createPropsSelector() {
+      return new PropsSelector(this.descriptor.props, this.descriptor.rawProps)
+    }
+  }
+
+  export interface EventPayloadByName {
+  }
+
+  export class EventEmitter {
+    constructor(private rnInstance: RNInstance, private tag: Tag) {}
+
+    emit<TEventName extends keyof EventPayloadByName>(eventName: TEventName, payload: EventPayloadByName[TEventName]) {
+      this.rnInstance.emitComponentEvent(this.tag, eventName, payload)
+    }
+  }
+
+  export interface CommandArgvByName {
+  }
+
+  export class CommandReceiver {
+    private listenersByCommandName = new Map<string, Set<(...args: any[]) => void>>()
+    private cleanUp: (() => void) | undefined = undefined
+
+    constructor(private componentCommandReceiver: RNComponentCommandReceiver, private tag: Tag) {
+    }
+
+    subscribe<TCommandName extends keyof CommandArgvByName>(commandName: TCommandName, listener: (argv: CommandArgvByName[TCommandName]) => void) {
+      if (!this.listenersByCommandName.has(commandName)) {
+        this.listenersByCommandName.set(commandName, new Set())
+      }
+      this.listenersByCommandName.get(commandName)!.add(listener)
+      const hasRegisteredCommandReceiver = !!this.cleanUp
+      if (!hasRegisteredCommandReceiver) {
+        this.cleanUp = this.componentCommandReceiver.registerCommandCallback(this.tag, (commandName: string, argv: any[]) => {
+          if (this.listenersByCommandName.has(commandName)) {
+            const listeners = this.listenersByCommandName.get(commandName)!
+            listeners.forEach(listener => {
+              listener(argv)
+            })
+          }
+        })
+      }
+
+      return () => {
+        this.listenersByCommandName.get(commandName)?.delete(listener)
+        if (this.listenersByCommandName.get(commandName)?.size ?? 0 === 0) {
+          this.listenersByCommandName.delete(commandName)
+        }
+        if (this.listenersByCommandName.size === 0) {
+          this.cleanUp?.()
+        }
+      }
+    }
+  }
+}

package/harmony/gesture_handler/src/main/ets/namespace/components/RNGestureHandlerRootView.ts

@@ -0,0 +1,101 @@
+// This file was generated.
+import {
+  Descriptor as ComponentDescriptor,
+  ViewBaseProps,
+  ViewRawProps,
+  ViewDescriptorWrapperBase,
+  ColorValue,
+  Color,
+  RNInstance,
+  Tag,
+  RNComponentCommandReceiver,
+  ViewPropsSelector,
+} from '@rnoh/react-native-openharmony/ts';
+
+
+export namespace RNGestureHandlerRootView {
+  export const NAME = "RNGestureHandlerRootView" as const
+
+  export interface DirectRawProps {
+  }
+
+  export interface Props extends ViewBaseProps {}
+
+  export interface State {}
+
+  export interface RawProps extends ViewRawProps, DirectRawProps {}
+
+  export class PropsSelector extends ViewPropsSelector<Props, RawProps> {
+
+  }
+
+  export type Descriptor = ComponentDescriptor<
+  typeof NAME,
+  Props,
+  State,
+  RawProps
+  >;
+
+  export class DescriptorWrapper extends ViewDescriptorWrapperBase<
+  typeof NAME,
+  Props,
+  State,
+  RawProps,
+  PropsSelector
+  > {
+    protected createPropsSelector() {
+      return new PropsSelector(this.descriptor.props, this.descriptor.rawProps)
+    }
+  }
+
+  export interface EventPayloadByName {
+  }
+
+  export class EventEmitter {
+    constructor(private rnInstance: RNInstance, private tag: Tag) {}
+
+    emit<TEventName extends keyof EventPayloadByName>(eventName: TEventName, payload: EventPayloadByName[TEventName]) {
+      this.rnInstance.emitComponentEvent(this.tag, eventName, payload)
+    }
+  }
+
+  export interface CommandArgvByName {
+  }
+
+  export class CommandReceiver {
+    private listenersByCommandName = new Map<string, Set<(...args: any[]) => void>>()
+    private cleanUp: (() => void) | undefined = undefined
+
+    constructor(private componentCommandReceiver: RNComponentCommandReceiver, private tag: Tag) {
+    }
+
+    subscribe<TCommandName extends keyof CommandArgvByName>(commandName: TCommandName, listener: (argv: CommandArgvByName[TCommandName]) => void) {
+      if (!this.listenersByCommandName.has(commandName)) {
+        this.listenersByCommandName.set(commandName, new Set())
+      }
+      this.listenersByCommandName.get(commandName)!.add(listener)
+      const hasRegisteredCommandReceiver = !!this.cleanUp
+      if (!hasRegisteredCommandReceiver) {
+        this.cleanUp = this.componentCommandReceiver.registerCommandCallback(this.tag, (commandName: string, argv: any[]) => {
+          if (this.listenersByCommandName.has(commandName)) {
+            const listeners = this.listenersByCommandName.get(commandName)!
+            listeners.forEach(listener => {
+              listener(argv)
+            })
+          }
+        })
+      }
+
+      return () => {
+        this.listenersByCommandName.get(commandName)?.delete(listener)
+        if (this.listenersByCommandName.get(commandName)?.size ?? 0 === 0) {
+          this.listenersByCommandName.delete(commandName)
+        }
+        if (this.listenersByCommandName.size === 0) {
+          this.cleanUp?.()
+        }
+      }
+    }
+  }
+
+}

package/harmony/gesture_handler/src/main/ets/namespace/components/ts.ts

@@ -0,0 +1,2 @@
+export * from "./RNGestureHandlerButton"
+export * from "./RNGestureHandlerRootView"

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

@@ -0,0 +1,2 @@
+export * as RNC from "./components/ts"
+export * as TM from "./RNGestureHandlerModule"

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

@@ -0,0 +1,240 @@
+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 GestureHandlerArkUIAdapter {
+  private activePointerIds = new Set<number>();
+  private pointersIdInBounds = 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.view = view;
+  }
+
+  attachGestureHandler(gestureHandler: GestureHandler) {
+    this.gestureHandlers.add(gestureHandler)
+  }
+
+  handleTouch(e: TouchEvent) {
+    for (const changedTouch of e.changedTouches) {
+      if (this.shouldSkipTouch(changedTouch)) continue;
+      const wasInBounds = this.pointersIdInBounds.has(changedTouch.id);
+      const isInBounds = this.isInBounds({
+        x: changedTouch.windowX,
+        y: changedTouch.windowY,
+      });
+      this.logger.info(
+        `handleTouch: ${JSON.stringify({
+          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.pointersIdInBounds.has(changedTouch.id),
+    );
+    this.logger.cloneWithPrefix("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.pointersIdInBounds.add(pointerId);
+        break;
+      case TouchType.Move:
+        if (this.isInBounds({ x, y })) this.pointersIdInBounds.add(pointerId);
+        else this.pointersIdInBounds.delete(pointerId);
+        break;
+      case TouchType.Up:
+        this.pointersIdInBounds.delete(pointerId);
+        break;
+      case TouchType.Cancel:
+        this.pointersIdInBounds.delete(pointerId);
+        break;
+    }
+  }
+
+  private isInBounds(point: Point): boolean {
+    const x = point.x;
+    const y = point.y;
+    const rect = this.view.getBoundingRect();
+    this.logger.cloneWithPrefix("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/GestureHandlerPackage.ts

@@ -0,0 +1,22 @@
+import {RNPackage, TurboModulesFactory} from "@rnoh/react-native-openharmony/ts";
+import type {TurboModule, TurboModuleContext} from "@rnoh/react-native-openharmony/ts";
+import {RNGestureHandlerModule} from './RNGestureHandlerModule';
+
+class GestureHandlerTurboModulesFactory 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;
+  }
+}
+
+export class GestureHandlerPackage extends RNPackage {
+  createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
+    return new GestureHandlerTurboModulesFactory(ctx);
+  }
+}

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

@@ -0,0 +1,49 @@
+import { RNOHContext } from '@rnoh/react-native-openharmony/ts';
+import { RNGHLogger, RNGHLoggerMessage } from "../core"
+
+export class StandardRNGHLogger implements RNGHLogger {
+  constructor(
+    private rnohLogger: RNOHContext['logger'],
+    private prefix: string,
+  ) {
+  }
+
+  error(msg: string) {
+    this.rnohLogger.error(`${this.prefix}::${msg}`);
+  }
+
+  info(msg: string) {
+    this.rnohLogger.info(`${this.prefix}::${msg}`);
+  }
+
+  debug(msg: RNGHLoggerMessage) {
+    this.rnohLogger.debug(`${this.prefix}::${this.stringifyMsg(msg)}`);
+  }
+
+  private stringifyMsg(msg: RNGHLoggerMessage): string {
+    if (typeof msg === "string") {
+      return msg
+    } else {
+      return JSON.stringify(msg)
+    }
+  }
+
+  cloneWithPrefix(prefix: string) {
+    return new StandardRNGHLogger(this.rnohLogger, `${this.prefix}::${prefix}`);
+  }
+}
+
+export class FakeRNGHLogger implements RNGHLogger {
+  info(msg: string) {
+  }
+
+  debug(msg: string) {
+  }
+
+  error(msg: string): void {
+  }
+
+  cloneWithPrefix(prefix: string) {
+    return new FakeRNGHLogger();
+  }
+}

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

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