@react-native-oh-tpl/react-native-gesture-handler 2.12.9 → 2.14.1-2.14.9

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

@@ -25,89 +25,89 @@ export namespace RNGestureHandlerButton {
     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})
-        }
+      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
+  typeof NAME,
+  Props,
+  State,
+  RawProps
   >;
-  
+
   export class DescriptorWrapper extends ViewDescriptorWrapperBase<
-    typeof NAME,
-    Props,
-    State,
-    RawProps,
-    PropsSelector
+  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())
@@ -124,7 +124,7 @@ export namespace RNGestureHandlerButton {
           }
         })
       }
-  
+
       return () => {
         this.listenersByCommandName.get(commandName)?.delete(listener)
         if (this.listenersByCommandName.get(commandName)?.size ?? 0 === 0) {
@@ -136,5 +136,4 @@ export namespace RNGestureHandlerButton {
       }
     }
   }
-
 }

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

@@ -18,57 +18,57 @@ export namespace RNGestureHandlerRootView {
 
   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
+  typeof NAME,
+  Props,
+  State,
+  RawProps
   >;
-  
+
   export class DescriptorWrapper extends ViewDescriptorWrapperBase<
-    typeof NAME,
-    Props,
-    State,
-    RawProps,
-    PropsSelector
+  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())
@@ -85,7 +85,7 @@ export namespace RNGestureHandlerRootView {
           }
         })
       }
-  
+
       return () => {
         this.listenersByCommandName.get(commandName)?.delete(listener)
         if (this.listenersByCommandName.get(commandName)?.size ?? 0 === 0) {

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

@@ -1,3 +1,2 @@
-export * from "./RNGestureHandlerButton"
-export * from "./RNGestureHandlerRootView"
-export * from "./RNGestureHandlerModule"
+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/{GestureHandlerPackage.ts → rnoh/GestureHandlerPackage.ts}

@@ -1,5 +1,5 @@
-import {RNPackage, TurboModuleContext, TurboModulesFactory} from '@rnoh/react-native-openharmony/ts';
-import type {TurboModule} from '@rnoh/react-native-openharmony/ts';
+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 {
@@ -11,7 +11,7 @@ class GestureHandlerTurboModulesFactory extends TurboModulesFactory {
   }
 
   hasTurboModule(name: string): boolean {
-    return name === 'RNGestureHandlerModule';
+    return name === RNGestureHandlerModule.NAME;
   }
 }
 
@@ -19,4 +19,4 @@ 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,
+    );
+  }
+}