@quicktvui/ai 1.0.6 → 1.0.8

package/rules/.source/ESVue/src/runtime/event/hippy-event-dispatcher.ts

@@ -0,0 +1,391 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Hippy event dispatcher, which distributes events triggered by users or generated by Native
+ */
+import type { NeedToTyped } from "../../types";
+import { trace, warn } from "../../util";
+import { getNodeById, getNodeByTagName } from "../../util/node";
+import type { HippyNode } from "../node/hippy-node";
+import type { HippyElement } from "../element/hippy-element";
+import { EventBus } from "./event-bus";
+import { EventsUnionType, HippyEvent, HippyLayoutEvent } from "./hippy-event";
+import { error } from "../../util/log";
+import { DOMEventPhase } from "../../util/event";
+
+// Extend the global object and introduce third-party injected objects
+declare global {
+  // eslint-disable-next-line  no-var, @typescript-eslint/naming-convention, vars-on-top
+  var __GLOBAL__: NeedToTyped;
+}
+
+// Native gesture event
+export interface NativeGestureEvent {
+  // Native node id that triggered the event
+  id: number;
+  // event name
+  name: string;
+}
+
+type EventParam = NeedToTyped[];
+
+// Native event type
+export type NativeEvent = {
+  id: number;
+  currentId: number;
+  nativeName: string;
+  originalName: string;
+  eventPhase: HippyTypes.EventPhase;
+  params?: any;
+};
+
+const LOG_TYPE = ["%c[event]%c", "color: green", "color: auto"];
+
+const componentName = ["%c[event]%c", "color: green", "color: auto"];
+
+/**
+ * determine whether the native event is legal
+ *
+ * @param nativeEvent - native event
+ */
+function isInvalidNativeEvent(nativeEvent: NativeEvent | EventParam): boolean {
+  return !nativeEvent || !Array.isArray(nativeEvent) || nativeEvent.length < 2;
+}
+
+function isTouchEvent(eventName) {
+  return (
+    ["onTouchDown", "onTouchMove", "onTouchEnd", "onTouchCancel"].indexOf(
+      eventName,
+    ) >= 0
+  );
+}
+
+/**
+ * convert events
+ */
+function convertEvent(eventName, targetEvent, params) {
+  if (isTouchEvent(eventName)) {
+    Object.assign(targetEvent, {
+      touches: {
+        0: {
+          clientX: params.page_x,
+          clientY: params.page_y,
+        },
+        length: 1,
+      },
+    });
+  }
+  return targetEvent;
+}
+
+/**
+ * get event name in vue
+ *
+ * @param eventName - event name
+ * @param targetNode - target node
+ */
+function getVueEventName(eventName: string, targetNode: HippyNode): string {
+  const { eventNamesMap } = targetNode.component;
+  // if the event name is a component custom event, return the event name directly
+  if (eventNamesMap?.has(eventName)) {
+    return eventNamesMap.get(eventName) as string;
+  }
+  // events that do not start with on maybe custom events, and return the event name directly
+  if (eventName.indexOf("on") !== 0) {
+    return eventName;
+  }
+  // remove the on in the event name and convert the first letter to lowercase, eg. onClick => click
+  const str = eventName.slice(2, eventName.length);
+  return `${str.charAt(0).toLowerCase()}${str.slice(1)}`;
+}
+
+/**
+ * Hippy event dispatcher
+ * Native will trigger three types of events
+ */
+const HippyEventDispatcher = {
+  /**
+   * Receive native events forwarded to Vue, such as page visible, etc.
+   *
+   * @param nativeEvent - native event
+   */
+  receiveNativeEvent(nativeEvent: EventParam): void {
+    trace(...LOG_TYPE, "receiverNativeEvent", nativeEvent);
+    if (isInvalidNativeEvent(nativeEvent)) {
+      return;
+    }
+    const [eventName, eventParams] = nativeEvent;
+
+    if (
+      eventName == "DispatchKeyEvent" &&
+      ((typeof __ES_VUE_FEATURE_FLAGS__ !== "undefined" &&
+        __ES_VUE_FEATURE_FLAGS__.ENABLE_KEY_EVENT_DISPATCH) ??
+        false)
+    ) {
+      try {
+        const targetNodeList: Array<HippyNode> =
+          getNodeByTagName("es-page-view");
+        if (!targetNodeList || targetNodeList.length <= 0) {
+          return;
+        }
+        const pageNode = targetNodeList.reduce<HippyNode | null>(
+          (max, curr) => {
+            return !max || curr.nodeId > max.nodeId ? curr : max;
+          },
+          null,
+        );
+
+        if (pageNode == null) {
+          return;
+        }
+        if (eventParams && eventParams.action === 0) {
+          this.__dispatchKeyEvent(pageNode, "keydown", eventParams);
+        } else if (eventParams && eventParams.action === 1) {
+          this.__dispatchKeyEvent(pageNode, "keyup", eventParams);
+        }
+      } catch (e) {
+        error("receiveNativeEvent DispatchKeyEvent error: ", e);
+      }
+    }
+    // forward native events directly to the event bus for distribution by the bus
+    EventBus.$emit(eventName, eventParams);
+  },
+
+  __dispatchKeyEvent(
+    pageNode: HippyNode,
+    eventType: "keydown" | "keyup",
+    eventParams: any = {},
+  ) {
+    if (!pageNode) return;
+    const matchedNodes: HippyNode[] = [];
+
+    // 1. 递归收集所有含有该事件类型监听器的子孙节点
+    function collectNodes(node: HippyNode) {
+      if (!node || !Array.isArray(node.childNodes)) return;
+
+      for (const child of node.childNodes) {
+        const listeners = child.getEventListenerList?.();
+        if (
+          Array.isArray(listeners?.[eventType]) &&
+          listeners[eventType]!.length > 0
+        ) {
+          matchedNodes.push(child);
+        }
+        collectNodes(child); // 递归处理
+      }
+    }
+
+    collectNodes(pageNode);
+    // 2. 按 nodeId 从大到小排序
+    matchedNodes.sort((a, b) => b.nodeId - a.nodeId);
+    // 3. 构造并派发事件
+    const targetEvent = new HippyEvent(eventType);
+    targetEvent.bubbles = false;
+    Object.assign(targetEvent, eventParams);
+
+    for (const node of matchedNodes) {
+      node.emitEvent(targetEvent);
+    }
+  },
+
+  /**
+   * Receive notifications of native interaction events, such as clicks, slides, etc.
+   *
+   * @param nativeEvent - native event
+   */
+  receiveNativeGesture(nativeEvent: NativeGestureEvent): void {
+    trace(...componentName, "receiveNativeGesture", nativeEvent);
+
+    if (!nativeEvent) {
+      return;
+    }
+    const { id: targetNodeId, name: eventName, ...params } = nativeEvent;
+    const targetNode = getNodeById(targetNodeId) as HippyElement;
+    if (!targetNode) {
+      return;
+    }
+    const targetEventName = getVueEventName(eventName, targetNode);
+    const targetEvent = new HippyEvent(targetEventName);
+    targetEvent.nativeParams = params;
+    const { processEventData } = targetNode.component;
+    if (processEventData) {
+      processEventData(
+        {
+          __evt: eventName,
+          handler: targetEvent,
+        } as EventsUnionType,
+        nativeEvent,
+      );
+    }
+    targetNode.dispatchEvent(targetEvent, targetNode, undefined);
+  },
+
+  /**
+   * Receive event notifications from UI classes, such as keyboard input, etc.
+   */
+  receiveUIComponentEvent(nativeEvent: EventParam): void {
+    trace(...componentName, "receiveUIComponentEvent", nativeEvent);
+
+    if (isInvalidNativeEvent(nativeEvent)) {
+      return;
+    }
+    const [targetNodeId, eventName, params] = nativeEvent;
+    if (typeof targetNodeId !== "number" || typeof eventName !== "string") {
+      return;
+    }
+    const targetNode = getNodeById(targetNodeId) as HippyElement;
+    if (!targetNode) {
+      return;
+    }
+    const targetEventName = getVueEventName(eventName, targetNode);
+    // process layout event
+    if (eventName === "onLayout") {
+      const {
+        layout: { x, y, height, width },
+      } = params;
+      const targetLayoutEvent = new HippyLayoutEvent(targetEventName);
+      targetLayoutEvent.nativeParams = params ?? {};
+      targetLayoutEvent.top = y;
+      targetLayoutEvent.left = x;
+      targetLayoutEvent.bottom = y + height;
+      targetLayoutEvent.right = x + width;
+      targetLayoutEvent.width = width;
+      targetLayoutEvent.height = height;
+      // dispatch event
+      targetNode.dispatchEvent(targetLayoutEvent, targetNode, undefined);
+    } else {
+      const targetEvent = new HippyEvent(targetEventName);
+      targetEvent.nativeParams = params ?? {};
+      // other event processing, if the node itself has additional event processing logic, it also needs to be processed
+      const { processEventData } = targetNode.component;
+
+      if (processEventData) {
+        processEventData(
+          {
+            __evt: eventName,
+            handler: targetEvent,
+          } as EventsUnionType,
+          params,
+        );
+      }
+      // dispatch event
+      targetNode.dispatchEvent(targetEvent, targetNode, undefined);
+    }
+  },
+
+  /**
+   * Receive event notifications from UI classes, such as keyboard input, etc.
+   */
+  receiveComponentEvent(
+    nativeEvent: NativeEvent,
+    domEvent: HippyTypes.DOMEvent,
+  ): void {
+    trace(...LOG_TYPE, "receiveComponentEvent", nativeEvent);
+
+    if (!nativeEvent || !domEvent) {
+      warn(
+        ...LOG_TYPE,
+        "receiveComponentEvent",
+        "nativeEvent or domEvent not exist",
+      );
+      return;
+    }
+
+    const {
+      id,
+      currentId,
+      nativeName,
+      originalName,
+      params = {},
+      eventPhase,
+    } = nativeEvent;
+    const currentTargetNode = getNodeById(currentId) as HippyElement;
+    const targetNode = getNodeById(id) as HippyElement;
+
+    if (!currentTargetNode || !targetNode) {
+      warn(
+        ...LOG_TYPE,
+        "receiveComponentEvent",
+        "currentTargetNode or targetNode not exist",
+      );
+      return;
+    }
+
+    try {
+      if (
+        [DOMEventPhase.AT_TARGET, DOMEventPhase.BUBBLING_PHASE].indexOf(
+          eventPhase,
+        ) > -1
+      ) {
+        // process layout event
+        let targetEvent;
+        if (nativeName === "onLayout") {
+          targetEvent = new HippyLayoutEvent(originalName);
+          Object.assign(targetEvent, {
+            eventPhase,
+            nativeParams: params ?? {},
+          });
+          const {
+            layout: { x, y, height, width },
+          } = params;
+          targetEvent.top = y;
+          targetEvent.left = x;
+          targetEvent.bottom = y + height;
+          targetEvent.right = x + width;
+          targetEvent.width = width;
+          targetEvent.height = height;
+        } else {
+          targetEvent = new HippyEvent(originalName);
+          Object.assign(targetEvent, {
+            eventPhase,
+            nativeParams: params ?? {},
+          });
+          // other event processing, if the node itself has additional event processing logic,
+          // it also needs to be processed
+          const { processEventData } = targetNode.component;
+          if (processEventData) {
+            processEventData(
+              {
+                __evt: nativeName,
+                handler: targetEvent,
+              } as EventsUnionType,
+              params,
+            );
+          }
+        }
+        currentTargetNode.dispatchEvent(
+          convertEvent(nativeName, targetEvent, params),
+          targetNode as HippyElement,
+          domEvent,
+        );
+      }
+    } catch (err) {
+      console.error("receiveComponentEvent error", err);
+    }
+  },
+};
+
+// Register the event dispatcher to the global interface, and the Native event trigger will call
+if (global.__GLOBAL__) {
+  global.__GLOBAL__.jsModuleList.EventDispatcher = HippyEventDispatcher;
+}
+
+export { HippyEventDispatcher };

package/rules/.source/ESVue/src/runtime/event/hippy-event-target.ts

@@ -0,0 +1,191 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { looseEqual } from "@vue/shared";
+
+import type { CallbackType } from "../../types";
+import type { HippyEvent } from "./hippy-event";
+
+export interface EventListenerOptions {
+  [key: string]: string | boolean;
+}
+
+interface EventListener {
+  // event callback
+  callback: CallbackType;
+  // options
+  options?: EventListenerOptions;
+}
+
+// callback event list
+interface EventListeners {
+  [eventName: string]: EventListener[] | undefined;
+}
+
+/**
+ * Hippy Event Target
+ */
+export abstract class HippyEventTarget {
+  /**
+   * Find the index position of the matching callback in the event callback list
+   *
+   * @param list - list of event listeners
+   * @param callback - call back
+   * @param options - options
+   *
+   */
+  private static indexOfListener(
+    list: EventListener[],
+    callback: CallbackType,
+    options: EventListenerOptions,
+  ): number {
+    return list.findIndex((entry) => {
+      if (options) {
+        return (
+          entry.callback === callback && looseEqual(entry.options, options)
+        );
+      }
+
+      return entry.callback === callback;
+    });
+  }
+
+  // event listeners list
+  protected listeners: EventListeners = {};
+
+  /**
+   * add event listener
+   *
+   * @param type - event name
+   * @param callback - callback
+   * @param options - options
+   */
+  public addEventListener(
+    type: string,
+    callback: CallbackType,
+    options?: EventListenerOptions,
+  ): void {
+    // there can be multiple event names, separated by commas
+    const events = type.split(",");
+    const len = events.length;
+    for (let i = 0; i < len; i += 1) {
+      const eventName = events[i].trim();
+
+      // get currently registered events
+      const existEventList = this.listeners[eventName];
+      // event list
+      const eventList = existEventList ?? [];
+
+      eventList.push({
+        callback,
+        options,
+      });
+
+      this.listeners[eventName] = eventList;
+    }
+  }
+
+  /**
+   * remove event listener
+   *
+   * @param type - event name
+   * @param callback - callback
+   * @param options - options
+   */
+  public removeEventListener(
+    type: string,
+    callback: CallbackType,
+    options?: EventListenerOptions,
+  ): void {
+    // there can be multiple event names, separated by commas
+    const events = type.split(",");
+    const len = events.length;
+    for (let i = 0; i < len; i += 1) {
+      const eventName = events[i].trim();
+
+      if (callback) {
+        // callback is specified
+        if (this.listeners[eventName]) {
+          const list = this.listeners[eventName];
+
+          if (list?.length) {
+            // find the specified callback
+            const index = HippyEventTarget.indexOfListener(
+              list,
+              callback,
+              options as EventListenerOptions,
+            );
+
+            if (index >= 0) {
+              // there is a matching option, remove it
+              list.splice(index, 1);
+            }
+
+            // if the callback list is empty after removing the callback, clear the callback
+            if (!list.length) {
+              this.listeners[eventName] = undefined;
+            }
+          }
+        }
+      } else {
+        // if no callback is specified, the callback for the entire event is removed
+        this.listeners[eventName] = undefined;
+      }
+    }
+  }
+
+  /**
+   * emit event
+   *
+   * @param event - event object
+   */
+  public emitEvent(event: HippyEvent): void {
+    const { type: eventName } = event;
+    const listeners = this.listeners[eventName];
+
+    if (!listeners) {
+      return;
+    }
+
+    // take out the list of callback functions of the specified event type and execute them one by one
+    for (let i = listeners.length - 1; i >= 0; i -= 1) {
+      const listener = listeners[i];
+
+      // if the event is once, execute only once
+      if (listener.options?.once) {
+        listeners.splice(i, 1);
+      }
+
+      if (listener.options?.thisArg) {
+        // this variable is specified, use apply
+        listener.callback.apply(listener.options.thisArg, [event]);
+      } else {
+        listener.callback(event);
+      }
+    }
+  }
+
+  /**
+   * Get the list of events bound to the current node
+   */
+  public getEventListenerList(): EventListeners {
+    return this.listeners;
+  }
+}