检索Button的事件

src/scripts/inject/code-hint.ts

@@ -8,16 +8,60 @@ function getKey(code: ShowCode): string {
   map[ShowCode.TouchMove] = cc.Node.EventType.TOUCH_MOVE;
   map[ShowCode.TouchEnd] = cc.Node.EventType.TOUCH_END;
   map[ShowCode.TouchCancel] = cc.Node.EventType.TOUCH_CANCEL;
+  if (cc.Button?.EventType?.CLICK) {
     map[ShowCode.ButtonClick] = cc.Button.EventType.CLICK;
+  }
   const key = map[code];
   return key || "";
 }
 
-export function getCallbacks(node: any, code: ShowCode) {
+function getButton(node: any, fillFn: boolean): FunctionInfo[] {
+  const button = node.getComponent(cc.Button);
+  if (!button) {
+    return [];
+  }
+  if (!button.clickEvents || button.clickEvents.length === 0) {
+    return [];
+  }
+  const arr: Array<{ handler: string; target: any; _componentId: string }> = button.clickEvents;
+  const ret: FunctionInfo[] = [];
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i];
+    const compType = cc.js.getClassById(item._componentId);
+    if (!compType) {
+      continue;
+    }
+    const comp = item.target.getComponent(compType);
+    if (!comp || !cc.isValid(comp)) {
+      continue;
+    }
+    const handler = comp[item.handler];
+    if (typeof handler !== "function") {
+      continue;
+    }
+    const info = getFn(handler, fillFn);
+    info.name = item.handler;
+    ret.push(info);
+  }
+  return ret;
+}
+
+export function getCallbacks(node: any, code: ShowCode, fillFn: boolean = false): FunctionInfo[] {
+  if (code === ShowCode.ButtonClickEvents) {
+    return getButton(node, fillFn);
+  } else {
+    return getTouch(node, code, fillFn);
+  }
+}
+
+function getTouch(node: any, code: ShowCode, fillFn: boolean = false): FunctionInfo[] {
   const key = getKey(code);
   if (!key) {
     return [];
   }
+  if (!node._eventProcessor) {
+    return [];
+  }
   if (!node._eventProcessor.bubblingTarget) {
     return [];
   }
@@ -25,34 +69,36 @@ export function getCallbacks(node: any, code: ShowCode) {
   if (!tables) {
     return [];
   }
-  const funArray: Function[] = tables.callbackInfos;
+  const infos: Array<any> = tables.callbackInfos;
-  if (!funArray || funArray.length === 0) {
+  if (!infos || infos.length === 0) {
     return [];
   }
-  return funArray.map((fun) => {
+  return infos.map((fun) => {
     // @ts-ignore
-    return fun.callback;
+    return getFn(fun.callback, fillFn);
   });
 }
-export const ANONYMOUS = "anonymous";
 
-function functionInfo(node: any, type: ShowCode): FunctionInfo[] {
+function getFn(item: Function, fillFn: boolean): FunctionInfo {
-  return getCallbacks(node, type).map((item) => {
   let desc = item.toString();
   const max = 50;
   if (desc.length > max) {
     // desc = desc.substr(0, max) + "...";
   }
-    return {
+  const ret: FunctionInfo = {
     name: item.name || ANONYMOUS,
     desc,
-    } as FunctionInfo;
+    fn: fillFn ? item : null,
-  });
+  };
+  return ret;
 }
+export const ANONYMOUS = "anonymous";
+
 export function calcCodeHint(node: any, data: TreeData) {
-  data.codeTouchStart = functionInfo(node, ShowCode.TouchStart);
+  data.codeTouchStart = getCallbacks(node, ShowCode.TouchStart);
-  data.codeTouchMove = functionInfo(node, ShowCode.TouchMove);
+  data.codeTouchMove = getCallbacks(node, ShowCode.TouchMove);
-  data.codeTouchEnd = functionInfo(node, ShowCode.TouchEnd);
+  data.codeTouchEnd = getCallbacks(node, ShowCode.TouchEnd);
-  data.codeTouchCancel = functionInfo(node, ShowCode.TouchCancel);
+  data.codeTouchCancel = getCallbacks(node, ShowCode.TouchCancel);
-  data.codeButtonClick = functionInfo(node, ShowCode.ButtonClick);
+  data.codeButtonClick = getCallbacks(node, ShowCode.ButtonClick);
+  data.codeButtonEvents = getCallbacks(node, ShowCode.ButtonClickEvents);
 }

src/scripts/inject/inspector.ts

@@ -3,15 +3,15 @@ import { uniq } from "lodash";
 import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestOpenNodeTouchFuntionData, RequestSetPropertyData, ResponseGameInfoData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
 import { CompType, getNodeIcon } from "../../views/devtools/comp";
 import { ArrayData, BoolData, ColorData, DataType, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectCircleData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../../views/devtools/data";
+import { calcCodeHint, getCallbacks } from "./code-hint";
 import { getEnumListConfig } from "./enumConfig";
 import { InjectEvent } from "./event";
 import { Hint } from "./hint";
 import { injectView } from "./inject-view";
 import { inspectTarget } from "./inspect-list";
 import { getValue, trySetValueWithConfig } from "./setValue";
-import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions, ShowCode } from "./types";
+import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types";
 import { isHasProperty } from "./util";
-import { calcCodeHint, getCallbacks } from "./code-hint";
 
 declare const cc: any;
 export class Inspector extends InjectEvent {
@@ -112,11 +112,10 @@ export class Inspector extends InjectEvent {
         if (!node || !node.isValid) {
           return;
         }
-        const funArray = getCallbacks(node, data.code);
+        const funArray = getCallbacks(node, data.code, true);
         if (funArray && funArray.length && data.index < funArray.length) {
-          // @ts-ignore
           const fn = funArray[data.index];
-          this.target = fn;
+          this.target = fn.fn;
           if (!fn) {
             debugger;
           }

src/scripts/inject/types.ts

@@ -42,9 +42,10 @@ export interface BuildImageOptions {
   data: ImageData;
 }
 export enum ShowCode {
-  TouchStart = "touchstart",
+  TouchStart = "touch-start",
-  TouchMove = "touchmove",
+  TouchMove = "touch-move",
-  TouchEnd = "touchend",
+  TouchEnd = "touch-end",
-  TouchCancel = "touchcancel",
+  TouchCancel = "touch-cancel",
-  ButtonClick = "buttonclick",
+  ButtonClick = "button-click",
+  ButtonClickEvents = "button-events",
 }

src/views/devtools/data.ts

@@ -521,6 +521,10 @@ export class EnumData extends Info {
 export interface FunctionInfo {
   name: string;
   desc: string;
+  /**
+   * 这个数据不能用在vue界面，在消息通讯时，会被剔除掉
+   */
+  fn: Function;
 }
 export class TreeData implements ITreeData {
   id: string = "";
@@ -534,6 +538,7 @@ export class TreeData implements ITreeData {
   codeTouchEnd: FunctionInfo[] = [];
   codeTouchCancel: FunctionInfo[] = [];
   codeButtonClick: FunctionInfo[] = [];
+  codeButtonEvents: FunctionInfo[] = [];
   active: boolean = true;
   text: string = "";
   children: TreeData[] = [];

src/views/devtools/hierarchy.vue

@@ -299,48 +299,29 @@ export default defineComponent({
               });
             }
           }
-          menus.push({
-            name: `code button-click [${data.codeButtonClick.length}]`,
-            visible: !!data.codeButtonClick.length,
-            callback: (item, event: MouseEvent) => {
-              ga.fireEventWithParam(GA_EventName.MouseMenu, ShowCode.ButtonClick);
-              hintCode(ShowCode.ButtonClick, data.codeButtonClick, event);
-            },
-          });
-          menus.push({
-            name: `code touch-start [${data.codeTouchStart.length}]`,
-            visible: !!data.codeTouchStart.length,
-            callback: (item, event: MouseEvent) => {
-              ga.fireEventWithParam(GA_EventName.MouseMenu, ShowCode.TouchStart);
-              hintCode(ShowCode.TouchStart, data.codeTouchStart, event);
-            },
-          });
-          menus.push({
-            name: `code touch-move [${data.codeTouchMove.length}]`,
-            visible: !!data.codeTouchMove.length,
-            callback: (item, event: MouseEvent) => {
-              ga.fireEventWithParam(GA_EventName.MouseMenu, ShowCode.TouchMove);
-              hintCode(ShowCode.TouchMove, data.codeTouchMove, event);
-            },
-          });
-          menus.push({
-            name: `code touch-end [${data.codeTouchEnd.length}]`,
-            visible: !!data.codeTouchEnd.length,
-            callback: (item, event: MouseEvent) => {
-              ga.fireEventWithParam(GA_EventName.MouseMenu, ShowCode.TouchEnd);
-              hintCode(ShowCode.TouchEnd, data.codeTouchEnd, event);
-            },
-          });
-          menus.push({
-            name: `code touch-cancel [${data.codeTouchCancel.length}]`,
-            visible: !!data.codeTouchCancel.length,
-            callback: (item, event: MouseEvent) => {
-              ga.fireEventWithParam(GA_EventName.MouseMenu, ShowCode.TouchCancel);
-              hintCode(ShowCode.TouchCancel, data.codeTouchCancel, event);
-            },
-          });
 
-          if (data.codeButtonClick || data.codeTouchStart || data.codeTouchMove || data.codeTouchEnd || data.codeTouchCancel) {
+          let hasCallback = false;
+          function codeMenu(info: FunctionInfo[], type: ShowCode) {
+            if (info.length) {
+              hasCallback = true;
+            }
+            menus.push({
+              name: `code ${type} [${info.length}]`,
+              visible: !!info.length,
+              tip: info.length === 1 ? info[0].desc : "",
+              callback: (item, event: MouseEvent) => {
+                ga.fireEventWithParam(GA_EventName.MouseMenu, type);
+                hintCode(type, info, event);
+              },
+            });
+          }
+          codeMenu(data.codeButtonClick, ShowCode.ButtonClick);
+          codeMenu(data.codeButtonEvents, ShowCode.ButtonClickEvents);
+          codeMenu(data.codeTouchStart, ShowCode.TouchStart);
+          codeMenu(data.codeTouchMove, ShowCode.TouchMove);
+          codeMenu(data.codeTouchEnd, ShowCode.TouchEnd);
+          codeMenu(data.codeTouchCancel, ShowCode.TouchCancel);
+          if (hasCallback) {
             menus.push({ type: ccui.menu.MenuType.Separator });
           }
         }