From da552e99450e8a488006f29be5302e0762a4a3c0 Mon Sep 17 00:00:00 2001 From: xu_yanfeng Date: Tue, 11 Feb 2025 18:29:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A3=80=E7=B4=A2Button=E7=9A=84=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scripts/inject/code-hint.ts | 94 ++++++++++++++++++++++++-------- src/scripts/inject/inspector.ts | 9 ++- src/scripts/inject/types.ts | 11 ++-- src/views/devtools/data.ts | 5 ++ src/views/devtools/hierarchy.vue | 63 ++++++++------------- 5 files changed, 107 insertions(+), 75 deletions(-) diff --git a/src/scripts/inject/code-hint.ts b/src/scripts/inject/code-hint.ts index dbb7c6b..23b3881 100644 --- a/src/scripts/inject/code-hint.ts +++ b/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; - map[ShowCode.ButtonClick] = cc.Button.EventType.CLICK; + 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; - if (!funArray || funArray.length === 0) { + const infos: Array = tables.callbackInfos; + if (!infos || infos.length === 0) { return []; } - return funArray.map((fun) => { + return infos.map((fun) => { // @ts-ignore - return fun.callback; + return getFn(fun.callback, fillFn); }); } + +function getFn(item: Function, fillFn: boolean): FunctionInfo { + let desc = item.toString(); + const max = 50; + if (desc.length > max) { + // desc = desc.substr(0, max) + "..."; + } + const ret: FunctionInfo = { + name: item.name || ANONYMOUS, + desc, + fn: fillFn ? item : null, + }; + return ret; +} export const ANONYMOUS = "anonymous"; -function functionInfo(node: any, type: ShowCode): FunctionInfo[] { - return getCallbacks(node, type).map((item) => { - let desc = item.toString(); - const max = 50; - if (desc.length > max) { - // desc = desc.substr(0, max) + "..."; - } - return { - name: item.name || ANONYMOUS, - desc, - } as FunctionInfo; - }); -} export function calcCodeHint(node: any, data: TreeData) { - data.codeTouchStart = functionInfo(node, ShowCode.TouchStart); - data.codeTouchMove = functionInfo(node, ShowCode.TouchMove); - data.codeTouchEnd = functionInfo(node, ShowCode.TouchEnd); - data.codeTouchCancel = functionInfo(node, ShowCode.TouchCancel); - data.codeButtonClick = functionInfo(node, ShowCode.ButtonClick); + data.codeTouchStart = getCallbacks(node, ShowCode.TouchStart); + data.codeTouchMove = getCallbacks(node, ShowCode.TouchMove); + data.codeTouchEnd = getCallbacks(node, ShowCode.TouchEnd); + data.codeTouchCancel = getCallbacks(node, ShowCode.TouchCancel); + data.codeButtonClick = getCallbacks(node, ShowCode.ButtonClick); + data.codeButtonEvents = getCallbacks(node, ShowCode.ButtonClickEvents); } diff --git a/src/scripts/inject/inspector.ts b/src/scripts/inject/inspector.ts index c219246..dcab8ce 100644 --- a/src/scripts/inject/inspector.ts +++ b/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; } diff --git a/src/scripts/inject/types.ts b/src/scripts/inject/types.ts index e4ed74e..889082e 100644 --- a/src/scripts/inject/types.ts +++ b/src/scripts/inject/types.ts @@ -42,9 +42,10 @@ export interface BuildImageOptions { data: ImageData; } export enum ShowCode { - TouchStart = "touchstart", - TouchMove = "touchmove", - TouchEnd = "touchend", - TouchCancel = "touchcancel", - ButtonClick = "buttonclick", + TouchStart = "touch-start", + TouchMove = "touch-move", + TouchEnd = "touch-end", + TouchCancel = "touch-cancel", + ButtonClick = "button-click", + ButtonClickEvents = "button-events", } diff --git a/src/views/devtools/data.ts b/src/views/devtools/data.ts index 57a4546..885a06d 100644 --- a/src/views/devtools/data.ts +++ b/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[] = []; diff --git a/src/views/devtools/hierarchy.vue b/src/views/devtools/hierarchy.vue index 5fd2c93..dd414e0 100644 --- a/src/views/devtools/hierarchy.vue +++ b/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 }); } }