From f633c4fa55ce94179c52d9f5e6804b279598099c Mon Sep 17 00:00:00 2001 From: xu_yanfeng Date: Mon, 6 Jan 2025 14:21:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=96=E6=B6=88ObjectItem=E7=9A=84=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=EF=BC=8C=E5=AE=9E=E7=8E=B0=E8=B5=B7=E6=9D=A5=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E5=A4=AA=E5=A4=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cc-inspector/src/core/types.ts | 8 +-- .../src/scripts/background/portDevtools.ts | 2 +- cc-inspector/src/scripts/inject/inspector.ts | 49 +++++-------- cc-inspector/src/views/devtools/bus.ts | 1 - cc-inspector/src/views/devtools/data.ts | 71 +++++++++++-------- cc-inspector/src/views/devtools/index.vue | 4 ++ cc-inspector/src/views/devtools/inspector.vue | 26 +------ .../src/views/devtools/test/server.ts | 60 ++++++++++------ .../src/views/devtools/ui/ui-prop.vue | 20 ++---- 9 files changed, 117 insertions(+), 124 deletions(-) diff --git a/cc-inspector/src/core/types.ts b/cc-inspector/src/core/types.ts index d063aa1..ddfccb8 100644 --- a/cc-inspector/src/core/types.ts +++ b/cc-inspector/src/core/types.ts @@ -48,8 +48,7 @@ export interface RequestUseFrameData { export type RequestSetPropertyData = Info; export type ResponseSetPropertyData = Info; export type RequestLogData = string[]; -export type RequestObjectData = ObjectData; -export type ResponseObjectData = ObjectItemRequestData; +export type ResponseErrorData = string; export enum Msg { None = "None", /** @@ -84,13 +83,12 @@ export enum Msg { ResponseUpdateFrames = "response-update-frames", RequestUseFrame = "request-use-frame", - RequestObjectItemData = "request-object-item-data", - ResponseObjectItemData = "response-object-item-data", - RequestLogData = "request-log-data", RequestSetProperty = "request-set-property", ResponseSetProperty = "response-set-property", + + ResponseError = "response-error", } export class PluginEvent { diff --git a/cc-inspector/src/scripts/background/portDevtools.ts b/cc-inspector/src/scripts/background/portDevtools.ts index 31b37d4..6ef1ee5 100644 --- a/cc-inspector/src/scripts/background/portDevtools.ts +++ b/cc-inspector/src/scripts/background/portDevtools.ts @@ -25,7 +25,7 @@ export class PortDevtools extends PortMan { data.reset(Page.Background, Page.Content); const port = portMgr.getCurrentUsePort(); if (!port) { - console.warn(`not find andy port`); + console.warn(`not find any port`); return; } port.send(data); diff --git a/cc-inspector/src/scripts/inject/inspector.ts b/cc-inspector/src/scripts/inject/inspector.ts index 1a8880e..61ed86f 100644 --- a/cc-inspector/src/scripts/inject/inspector.ts +++ b/cc-inspector/src/scripts/inject/inspector.ts @@ -1,7 +1,7 @@ // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var import { uniq } from "lodash"; -import { Msg, PluginEvent, RequestNodeInfoData, RequestLogData, RequestObjectData, RequestSetPropertyData, ResponseNodeInfoData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types"; -import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data"; +import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types"; +import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data"; import { InjectEvent } from "./event"; import { getValue, trySetValueWithConfig } from "./setValue"; import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types"; @@ -62,24 +62,6 @@ export class Inspector extends InjectEvent { logFunction(value); break; } - case Msg.RequestObjectItemData: { - const data: RequestObjectData = pluginEvent.data; - let val = getValue(this.inspectorGameMemoryStorage, data.path); - if (val) { - let itemData: Property[] = this._buildObjectItemData({ - data: data, - path: data.path, - value: val, - filterKey: false, - }); - let result: ObjectItemRequestData = { - id: data.id, - data: itemData, - }; - this.sendMsgToContent(Msg.ResponseObjectItemData, result as ResponseObjectData); - } - break; - } } } init() { @@ -486,7 +468,8 @@ export class Inspector extends InjectEvent { } desc[key] = keyDesc; } - data.data = JSON.stringify(desc); + data.data = []; + //JSON.stringify(desc); return data; } @@ -576,16 +559,20 @@ export class Inspector extends InjectEvent { let node = this.inspectorGameMemoryStorage[uuid]; if (node) { let groupData = []; - // 收集节点信息 - let nodeGroup = this._getGroupData(node); - groupData.push(nodeGroup); - // 收集组件信息 - const nodeComp = node._components; - for (let i = 0; i < nodeComp.length; i++) { - let itemComp = nodeComp[i]; - this.inspectorGameMemoryStorage[itemComp.uuid] = itemComp; - let compGroup = this._getGroupData(itemComp); - groupData.push(compGroup); + if (node.isValid) { + // 收集节点信息 + let nodeGroup = this._getGroupData(node); + groupData.push(nodeGroup); + // 收集组件信息 + const nodeComp = node._components; + if (nodeComp) { + for (let i = 0; i < nodeComp.length; i++) { + let itemComp = nodeComp[i]; + this.inspectorGameMemoryStorage[itemComp.uuid] = itemComp; + let compGroup = this._getGroupData(itemComp); + groupData.push(compGroup); + } + } } const data: NodeInfoData = new NodeInfoData(uuid, groupData); this.sendMsgToContent(Msg.ResponseNodeInfo, data as ResponseNodeInfoData); diff --git a/cc-inspector/src/views/devtools/bus.ts b/cc-inspector/src/views/devtools/bus.ts index 4481b4d..27543a6 100644 --- a/cc-inspector/src/views/devtools/bus.ts +++ b/cc-inspector/src/views/devtools/bus.ts @@ -2,7 +2,6 @@ import { TinyEmitter } from "tiny-emitter"; export enum BusMsg { ShowPlace = "ShowPlace", - RequestObjectData = "RequestObjectData", FoldAllGroup = "FoldAllGroup", UpdateSettings = "UpdateSettings", /** diff --git a/cc-inspector/src/views/devtools/data.ts b/cc-inspector/src/views/devtools/data.ts index 603c8f8..efb32b1 100644 --- a/cc-inspector/src/views/devtools/data.ts +++ b/cc-inspector/src/views/devtools/data.ts @@ -165,17 +165,25 @@ export class ArrayData extends Info { this.data.push(info); return this; } - test() { - this.add(new Property("item1", new TextData("text"))); - this.add(new Property("item2", new BoolData(true))); - this.add(new Property("item3", new NumberData(100))); + testNormal() { + this.add(new Property("arr-text", new TextData("text"))); + this.add(new Property("arr-bool", new BoolData(true))); + this.add(new Property("arr-number", new NumberData(100))); + return this; + } + testObject() { + this.add(new Property("obj", new ObjectData().testNormal())); + return this; + } + testArray() { + this.add(new Property("arr", new ArrayData().testNormal())); return this; } testSub() { - this.add(new Property("item1", new TextData("text"))); + this.add(new Property("text", new TextData("text"))); const sub = new ArrayData(); - sub.add(new Property("sub", new StringData("sub"))); - this.add(new Property("arr", sub)); + sub.add(new Property("string", new StringData("sub"))); + this.add(new Property("array", sub)); return this; } public isArray(): boolean { @@ -185,42 +193,43 @@ export class ArrayData extends Info { return true; } } - -export class ObjectDataItem extends Info {} - export class ObjectData extends Info { /** - * object的简单描述快照，类似chrome的console，{a:'fff',b:xxx} - * 主要是为了防止Object的数据过大，无限递归 + * 对于object无限递归的情况，会自动中断 + * 本质上和Array区别不是很大 */ - data: string = ""; + data: Array = []; constructor() { super(); this.type = DataType.Object; } parse(data: ObjectData) { super.parse(data); - this.data = data.data; + for (let i = 0; i < data.data.length; i++) { + const item = data.data[i]; + const property = new Property(item.name, item.value).parse(item); + this.data.push(property); + } return this; } - test() { - this.data = JSON.stringify({ fack: "test" }); + add(info: Property) { + this.data.push(info); return this; } - testProperty(): Property[] { - const obj: Object = JSON.parse(this.data); - const properties: Property[] = []; - for (let key in obj) { - if (typeof obj[key] === "string") { - properties.push(new Property(key, new StringData(obj[key]))); - } else if (typeof obj[key] === "number") { - properties.push(new Property(key, new NumberData(obj[key]))); - } else if (typeof obj[key] === "boolean") { - properties.push(new Property(key, new BoolData(obj[key]))); - } - } - return properties; + testNormal() { + this.add(new Property("obj-text", new TextData("text"))); + this.add(new Property("obj-bool", new BoolData(true))); + this.add(new Property("obj-number", new NumberData(100))); + return this; + } + testObject() { + this.add(new Property("obj", new ObjectData().testNormal())); + return this; + } + testArray() { + this.add(new Property("array", new ArrayData().testNormal())); + return this; } public isObject(): boolean { return true; @@ -228,6 +237,9 @@ export class ObjectData extends Info { public isArrayOrObject(): boolean { return true; } + public getInfo() { + return `${this.id}: ${this.path.join("/")}`; + } } export class InvalidData extends Info { @@ -566,6 +578,7 @@ export class Group { this.data.push(property); } buildProperty(name: string, info: Info) { + info.path.push(name); const property = new Property(name, info); this.addProperty(property); return this; diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue index 86a2f00..8ff19da 100644 --- a/cc-inspector/src/views/devtools/index.vue +++ b/cc-inspector/src/views/devtools/index.vue @@ -108,6 +108,10 @@ export default defineComponent({ bridge.on(Msg.MemoryInfo, (eventData: any) => { memory.value = eventData; }); + bridge.on(Msg.ResponseError, (event: PluginEvent) => { + const err: string = event.data; + ccui.footbar.showError(err); + }); bridge.on(Msg.ResponseUpdateFrames, (event: PluginEvent) => { let resFrames: FrameDetails[] = event.data; iframes.value = resFrames.map((item) => { diff --git a/cc-inspector/src/views/devtools/inspector.vue b/cc-inspector/src/views/devtools/inspector.vue index 68cc459..5146387 100644 --- a/cc-inspector/src/views/devtools/inspector.vue +++ b/cc-inspector/src/views/devtools/inspector.vue @@ -11,10 +11,10 @@ import ccui from "@xuyanfeng/cc-ui"; import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const"; import { defineComponent, onMounted, onUnmounted, ref } from "vue"; -import { Msg, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseObjectData, ResponseSupportData } from "../../core/types"; +import { Msg, PluginEvent, RequestNodeInfoData, ResponseSupportData } from "../../core/types"; import { bridge } from "./bridge"; import { Bus, BusMsg } from "./bus"; -import { NodeInfoData, ObjectData } from "./data"; +import { NodeInfoData } from "./data"; import { Timer } from "./timer"; import Properties from "./ui/propertys.vue"; const { CCDock } = ccui.components; @@ -73,27 +73,7 @@ export default defineComponent({ ccui.footbar.showError(error, { title: "parse property error" }); } }); - /** - * 请求属性的列表，如果一个属性请求失败，会阻断后续的相同请求，因为都已经失败了，就没必要再响应请求了 - */ - const requestList: Array<{ id: string; cb: Function }> = []; - bridge.on(Msg.ResponseObjectItemData, (event: PluginEvent) => { - const requestData: ResponseObjectData = event.data; - if (requestData.id !== null) { - let findIndex = requestList.findIndex((el) => el.id === requestData.id); - if (findIndex > -1) { - let del = requestList.splice(findIndex, 1)[0]; - del.cb(requestData.data); - } - } - }); - Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => { - if (!data.id || requestList.find((el) => el.id === data.id)) { - return; - } - requestList.push({ id: data.id, cb }); - bridge.send(Msg.RequestObjectItemData, data as RequestObjectData); - }); + return { treeItemData, onMenu(evnet: MouseEvent) { diff --git a/cc-inspector/src/views/devtools/test/server.ts b/cc-inspector/src/views/devtools/test/server.ts index 7882e50..6269615 100644 --- a/cc-inspector/src/views/devtools/test/server.ts +++ b/cc-inspector/src/views/devtools/test/server.ts @@ -1,6 +1,6 @@ import { v4 } from "uuid"; -import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types"; -import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data"; +import { Msg, Page, PluginEvent, RequestNodeInfoData, ResponseNodeInfoData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types"; +import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data"; export class TestClient { recv(event: PluginEvent) {} } @@ -81,9 +81,41 @@ export class TestServer { private clients: TestClient[] = []; private testData: Node = new Node("scene"); constructor() { - this.testData.buildChild("base").buildComponent("group1").buildProperty("bool", new BoolData(true)).buildProperty("text", new TextData("text")).buildProperty("number", new NumberData(100)).buildProperty("string", new StringData("string")).buildProperty("enum", new EnumData().test()).buildProperty("color", new ColorData("#f00")).buildProperty("image", new ImageData().test()); - this.testData.buildChild("vec").buildComponent("group2").buildProperty("number", new NumberData(200)).buildProperty("vec2", new Vec2Data().test()).buildProperty("vec3", new Vec3Data().test()).buildProperty("vec4", new Vec4Data().test()); - this.testData.buildChild("obj/arr").buildComponent("group3").buildProperty("array", new ArrayData().test()).buildProperty("object", new ObjectData().test()).buildProperty("arr_arr", new ArrayData().testSub()); + this.testData + .buildChild("base") + .buildComponent("group-base") // + .buildProperty("bool", new BoolData(true)) + .buildProperty("text", new TextData("text")) + .buildProperty("number", new NumberData(100)) + .buildProperty("string", new StringData("string")) + .buildProperty("enum", new EnumData().test()) + .buildProperty("color", new ColorData("#f00")) + .buildProperty("image", new ImageData().test()); + this.testData + .buildChild("vec") + .buildComponent("group-vec") // + .buildProperty("number", new NumberData(200)) + .buildProperty("vec2", new Vec2Data().test()) + .buildProperty("vec3", new Vec3Data().test()) + .buildProperty("vec4", new Vec4Data().test()); + this.testData + .buildChild("arr") + .buildComponent("group-arr") // + .buildProperty("array[t/b/n]", new ArrayData().testNormal()); // + this.testData + .buildChild("obj") // + .buildComponent("group-obj") + .buildProperty("object", new ObjectData().testNormal()); // + + this.testData + .buildChild("arr[arr]") + .buildComponent("group-arr[arr]") // + .buildProperty("arr", new ArrayData().testArray()); // + + this.testData + .buildChild("arr[obj]") + .buildComponent("group-arr[obj]") // + .buildProperty("arr", new ArrayData().testObject()); // this.testData.buildChild("engine").buildComponent("group4").buildProperty("node", new EngineData().init("name", "cc_Node", "uuid")).buildProperty("sprite", new EngineData().init("name", "cc_Sprite", "uuid")).buildProperty("label", new EngineData().init("name", "cc_Label", "uuid")).buildProperty("un_known", new EngineData().init("name", "un_known", "uuid")); const c = this.testData.buildChild("str1"); @@ -132,22 +164,8 @@ export class TestServer { break; } case Msg.RequestSetProperty: { - console.log(data); - break; - } - case Msg.RequestObjectItemData: { - const objData: RequestObjectData = data as ObjectData; - const info = this.testData.findInfo(objData.id); - if (info && info instanceof ObjectData) { - const ret: ObjectItemRequestData = { - id: objData.id, - data: info.testProperty(), - }; - const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseObjectItemData, ret as ResponseObjectData); - this.send(event); - } else { - console.warn("not found data: ", objData.id); - } + const i = data as Info; + console.log(i); break; } case Msg.RequestLogData: { diff --git a/cc-inspector/src/views/devtools/ui/ui-prop.vue b/cc-inspector/src/views/devtools/ui/ui-prop.vue index 33e173c..1c8a71f 100644 --- a/cc-inspector/src/views/devtools/ui/ui-prop.vue +++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue @@ -16,12 +16,12 @@ -
{{ value.data }}
+
Array[{{ value.data.length }}]
-
+
@@ -34,8 +34,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const"; import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue"; import { Msg, RequestSetPropertyData } from "../../../core/types"; import { bridge } from "../bridge"; -import { Bus, BusMsg } from "../bus"; -import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data"; +import { ArrayData, EngineData, EnumData, ImageData, Info, NumberData, ObjectData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data"; import Engine from "./property-engine.vue"; import PropertyImage from "./property-image.vue"; const { CCInput, CCTextarea, CCProp, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components; @@ -66,30 +65,25 @@ export default defineComponent({ if (newData.id !== oldData.id) { // 只有id不相等了，才折叠，因为数据是在定时刷新 expand.value = false; + subData.value = []; } freshSubData(newData); } ); - const subData = ref | null>(null); + const subData = ref>([]); function freshSubData(data: Info) { const rawExpand = toRaw(expand.value); if (!rawExpand) { return; } - const rawSubData = toRaw(subData.value); - if (rawSubData !== null) { - return; - } const rawValue = toRaw(data); if (!rawValue) { return; } if (rawValue.isArray()) { - subData.value = data.data; + subData.value = (data as ArrayData).data; } else if (rawValue.isObject()) { - Bus.emit(BusMsg.RequestObjectData, rawValue, (info: Property[]) => { - subData.value = info; - }); + subData.value = (data as ObjectData).data; } } return {