CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-16 07:01:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

取消ObjectItem的设计，实现起来问题太多

Browse Source
This commit is contained in:
xu_yanfeng 2025-01-06 14:21:06 +08:00
parent 527327eb14
commit f633c4fa55
9 changed files with 117 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
cc-inspector/src/core/types.ts
View File

@ -48,8 +48,7 @@ export interface RequestUseFrameData {
export type RequestSetPropertyData = Info; export type RequestSetPropertyData = Info;
export type ResponseSetPropertyData = Info; export type ResponseSetPropertyData = Info;
export type RequestLogData = string[]; export type RequestLogData = string[];
export type RequestObjectData = ObjectData; export type ResponseErrorData = string;
export type ResponseObjectData = ObjectItemRequestData;
export enum Msg { export enum Msg {
None = "None", None = "None",
/** /**
@ -84,13 +83,12 @@ export enum Msg {
ResponseUpdateFrames = "response-update-frames", ResponseUpdateFrames = "response-update-frames",
RequestUseFrame = "request-use-frame", RequestUseFrame = "request-use-frame",
RequestObjectItemData = "request-object-item-data",
ResponseObjectItemData = "response-object-item-data",
RequestLogData = "request-log-data", RequestLogData = "request-log-data",
RequestSetProperty = "request-set-property", RequestSetProperty = "request-set-property",
ResponseSetProperty = "response-set-property", ResponseSetProperty = "response-set-property",
ResponseError = "response-error",
} }
export class PluginEvent { export class PluginEvent {

2
cc-inspector/src/scripts/background/portDevtools.ts
View File

@ -25,7 +25,7 @@ export class PortDevtools extends PortMan {
data.reset(Page.Background, Page.Content); data.reset(Page.Background, Page.Content);
const port = portMgr.getCurrentUsePort(); const port = portMgr.getCurrentUsePort();
if (!port) { if (!port) {
console.warn(`not find andy port`); console.warn(`not find any port`);
return; return;
} }
port.send(data); port.send(data);

49
cc-inspector/src/scripts/inject/inspector.ts
View File

@ -1,7 +1,7 @@
// eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
import { uniq } from "lodash"; import { uniq } from "lodash";
import { Msg, PluginEvent, RequestNodeInfoData, RequestLogData, RequestObjectData, RequestSetPropertyData, ResponseNodeInfoData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types"; 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, ObjectItemRequestData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data"; 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 { InjectEvent } from "./event";
import { getValue, trySetValueWithConfig } from "./setValue"; import { getValue, trySetValueWithConfig } from "./setValue";
import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types"; import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types";
@ -62,24 +62,6 @@ export class Inspector extends InjectEvent {
logFunction(value); logFunction(value);
break; 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() { init() {
@ -486,7 +468,8 @@ export class Inspector extends InjectEvent {
} }
desc[key] = keyDesc; desc[key] = keyDesc;
} }
data.data = JSON.stringify(desc); data.data = [];
//JSON.stringify(desc);
return data; return data;
} }
@ -576,16 +559,20 @@ export class Inspector extends InjectEvent {
let node = this.inspectorGameMemoryStorage[uuid]; let node = this.inspectorGameMemoryStorage[uuid];
if (node) { if (node) {
let groupData = []; let groupData = [];
// 收集节点信息 if (node.isValid) {
let nodeGroup = this._getGroupData(node); // 收集节点信息
groupData.push(nodeGroup); let nodeGroup = this._getGroupData(node);
// 收集组件信息 groupData.push(nodeGroup);
const nodeComp = node._components; // 收集组件信息
for (let i = 0; i < nodeComp.length; i++) { const nodeComp = node._components;
let itemComp = nodeComp[i]; if (nodeComp) {
this.inspectorGameMemoryStorage[itemComp.uuid] = itemComp; for (let i = 0; i < nodeComp.length; i++) {
let compGroup = this._getGroupData(itemComp); let itemComp = nodeComp[i];
groupData.push(compGroup); this.inspectorGameMemoryStorage[itemComp.uuid] = itemComp;
let compGroup = this._getGroupData(itemComp);
groupData.push(compGroup);
}
}
} }
const data: NodeInfoData = new NodeInfoData(uuid, groupData); const data: NodeInfoData = new NodeInfoData(uuid, groupData);
this.sendMsgToContent(Msg.ResponseNodeInfo, data as ResponseNodeInfoData); this.sendMsgToContent(Msg.ResponseNodeInfo, data as ResponseNodeInfoData);

1
cc-inspector/src/views/devtools/bus.ts
View File

@ -2,7 +2,6 @@ import { TinyEmitter } from "tiny-emitter";
export enum BusMsg { export enum BusMsg {
ShowPlace = "ShowPlace", ShowPlace = "ShowPlace",
RequestObjectData = "RequestObjectData",
FoldAllGroup = "FoldAllGroup", FoldAllGroup = "FoldAllGroup",
UpdateSettings = "UpdateSettings", UpdateSettings = "UpdateSettings",
/** /**

71
cc-inspector/src/views/devtools/data.ts
View File

@ -165,17 +165,25 @@ export class ArrayData extends Info {
this.data.push(info); this.data.push(info);
return this; return this;
} }
test() { testNormal() {
this.add(new Property("item1", new TextData("text"))); this.add(new Property("arr-text", new TextData("text")));
this.add(new Property("item2", new BoolData(true))); this.add(new Property("arr-bool", new BoolData(true)));
this.add(new Property("item3", new NumberData(100))); 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; return this;
} }
testSub() { testSub() {
this.add(new Property("item1", new TextData("text"))); this.add(new Property("text", new TextData("text")));
const sub = new ArrayData(); const sub = new ArrayData();
sub.add(new Property("sub", new StringData("sub"))); sub.add(new Property("string", new StringData("sub")));
this.add(new Property("arr", sub)); this.add(new Property("array", sub));
return this; return this;
} }
public isArray(): boolean { public isArray(): boolean {
@ -185,42 +193,43 @@ export class ArrayData extends Info {
return true; return true;
} }
} }
export class ObjectDataItem extends Info {}
export class ObjectData extends Info { export class ObjectData extends Info {
/** /**
* object的简单描述快照，类似chrome的console，{a:'fff',b:xxx} * 对于object无限递归的情况，会自动中断
* 主要是为了防止Object的数据过大，无限递归 * 本质上和Array区别不是很大
*/ */
data: string = ""; data: Array<Property> = [];
constructor() { constructor() {
super(); super();
this.type = DataType.Object; this.type = DataType.Object;
} }
parse(data: ObjectData) { parse(data: ObjectData) {
super.parse(data); 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; return this;
} }
test() { add(info: Property) {
this.data = JSON.stringify({ fack: "test" }); this.data.push(info);
return this; return this;
} }
testProperty(): Property[] { testNormal() {
const obj: Object = JSON.parse(this.data); this.add(new Property("obj-text", new TextData("text")));
const properties: Property[] = []; this.add(new Property("obj-bool", new BoolData(true)));
for (let key in obj) { this.add(new Property("obj-number", new NumberData(100)));
if (typeof obj[key] === "string") { return this;
properties.push(new Property(key, new StringData(obj[key]))); }
} else if (typeof obj[key] === "number") { testObject() {
properties.push(new Property(key, new NumberData(obj[key]))); this.add(new Property("obj", new ObjectData().testNormal()));
} else if (typeof obj[key] === "boolean") { return this;
properties.push(new Property(key, new BoolData(obj[key]))); }
} testArray() {
} this.add(new Property("array", new ArrayData().testNormal()));
return properties; return this;
} }
public isObject(): boolean { public isObject(): boolean {
return true; return true;
@ -228,6 +237,9 @@ export class ObjectData extends Info {
public isArrayOrObject(): boolean { public isArrayOrObject(): boolean {
return true; return true;
} }
public getInfo() {
return `${this.id}: ${this.path.join("/")}`;
}
} }
export class InvalidData extends Info { export class InvalidData extends Info {
@ -566,6 +578,7 @@ export class Group {
this.data.push(property); this.data.push(property);
} }
buildProperty(name: string, info: Info) { buildProperty(name: string, info: Info) {
info.path.push(name);
const property = new Property(name, info); const property = new Property(name, info);
this.addProperty(property); this.addProperty(property);
return this; return this;

4
cc-inspector/src/views/devtools/index.vue
View File

@ -108,6 +108,10 @@ export default defineComponent({
bridge.on(Msg.MemoryInfo, (eventData: any) => { bridge.on(Msg.MemoryInfo, (eventData: any) => {
memory.value = eventData; memory.value = eventData;
}); });
bridge.on(Msg.ResponseError, (event: PluginEvent) => {
const err: string = event.data;
ccui.footbar.showError(err);
});
bridge.on(Msg.ResponseUpdateFrames, (event: PluginEvent) => { bridge.on(Msg.ResponseUpdateFrames, (event: PluginEvent) => {
let resFrames: FrameDetails[] = event.data; let resFrames: FrameDetails[] = event.data;
iframes.value = resFrames.map((item) => { iframes.value = resFrames.map((item) => {

26
cc-inspector/src/views/devtools/inspector.vue
View File

@ -11,10 +11,10 @@
import ccui from "@xuyanfeng/cc-ui"; import ccui from "@xuyanfeng/cc-ui";
import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const"; import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
import { defineComponent, onMounted, onUnmounted, ref } from "vue"; 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 { bridge } from "./bridge";
import { Bus, BusMsg } from "./bus"; import { Bus, BusMsg } from "./bus";
import { NodeInfoData, ObjectData } from "./data"; import { NodeInfoData } from "./data";
import { Timer } from "./timer"; import { Timer } from "./timer";
import Properties from "./ui/propertys.vue"; import Properties from "./ui/propertys.vue";
const { CCDock } = ccui.components; const { CCDock } = ccui.components;
@ -73,27 +73,7 @@ export default defineComponent({
ccui.footbar.showError(error, { title: "parse property error" }); 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 { return {
treeItemData, treeItemData,
onMenu(evnet: MouseEvent) { onMenu(evnet: MouseEvent) {

60
cc-inspector/src/views/devtools/test/server.ts
View File

@ -1,6 +1,6 @@
import { v4 } from "uuid"; import { v4 } from "uuid";
import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types"; import { Msg, Page, PluginEvent, RequestNodeInfoData, ResponseNodeInfoData, 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 { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
export class TestClient { export class TestClient {
recv(event: PluginEvent) {} recv(event: PluginEvent) {}
} }
@ -81,9 +81,41 @@ export class TestServer {
private clients: TestClient[] = []; private clients: TestClient[] = [];
private testData: Node = new Node("scene"); private testData: Node = new Node("scene");
constructor() { 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
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()); .buildChild("base")
this.testData.buildChild("obj/arr").buildComponent("group3").buildProperty("array", new ArrayData().test()).buildProperty("object", new ObjectData().test()).buildProperty("arr_arr", new ArrayData().testSub()); .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")); 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"); const c = this.testData.buildChild("str1");
@ -132,22 +164,8 @@ export class TestServer {
break; break;
} }
case Msg.RequestSetProperty: { case Msg.RequestSetProperty: {
console.log(data); const i = data as Info;
break; console.log(i);
}
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);
}
break; break;
} }
case Msg.RequestLogData: { case Msg.RequestLogData: {

20
cc-inspector/src/views/devtools/ui/ui-prop.vue
View File

@ -16,12 +16,12 @@
<CCColor v-if="value.isColor()" :show-color-text="true" :disabled="value.readonly" v-model:color="value.data" @change="onChangeValue"> </CCColor> <CCColor v-if="value.isColor()" :show-color-text="true" :disabled="value.readonly" v-model:color="value.data" @change="onChangeValue"> </CCColor>
<PropertyImage v-if="value.isImage()" v-model:data="(value as ImageData)"></PropertyImage> <PropertyImage v-if="value.isImage()" v-model:data="(value as ImageData)"></PropertyImage>
<Engine v-if="value.isEngine()" v-model:data="(value as EngineData)"> </Engine> <Engine v-if="value.isEngine()" v-model:data="(value as EngineData)"> </Engine>
<div v-if="value.isObject() && !expand" class="objectDesc">{{ value.data }}</div> <div v-if="value.isObject() && !expand" class="objectDesc"></div>
<div v-if="value.isArray()" class="array">Array[{{ value.data.length }}]</div> <div v-if="value.isArray()" class="array">Array[{{ value.data.length }}]</div>
</div> </div>
</CCProp> </CCProp>
<div v-if="value && value.isArrayOrObject()"> <div v-if="value && value.isArrayOrObject()">
<div v-show="expand && subData"> <div v-show="expand && subData && subData.length">
<UiProp v-for="(arr, index) in subData" :key="index" :indent="indent + 1" :value="arr.value" :name="getName(value.isArray(), arr)"> </UiProp> <UiProp v-for="(arr, index) in subData" :key="index" :indent="indent + 1" :value="arr.value" :name="getName(value.isArray(), arr)"> </UiProp>
</div> </div>
</div> </div>
@ -34,8 +34,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue"; import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
import { Msg, RequestSetPropertyData } from "../../../core/types"; import { Msg, RequestSetPropertyData } from "../../../core/types";
import { bridge } from "../bridge"; import { bridge } from "../bridge";
import { Bus, BusMsg } from "../bus"; import { ArrayData, EngineData, EnumData, ImageData, Info, NumberData, ObjectData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
import Engine from "./property-engine.vue"; import Engine from "./property-engine.vue";
import PropertyImage from "./property-image.vue"; import PropertyImage from "./property-image.vue";
const { CCInput, CCTextarea, CCProp, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components; const { CCInput, CCTextarea, CCProp, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
@ -66,30 +65,25 @@ export default defineComponent({
if (newData.id !== oldData.id) { if (newData.id !== oldData.id) {
// 只有id不相等了，才折叠，因为数据是在定时刷新 // 只有id不相等了，才折叠，因为数据是在定时刷新
expand.value = false; expand.value = false;
subData.value = [];
} }
freshSubData(newData); freshSubData(newData);
} }
); );
const subData = ref<Array<Property> | null>(null); const subData = ref<Array<Property>>([]);
function freshSubData(data: Info) { function freshSubData(data: Info) {
const rawExpand = toRaw(expand.value); const rawExpand = toRaw(expand.value);
if (!rawExpand) { if (!rawExpand) {
return; return;
} }
const rawSubData = toRaw(subData.value);
if (rawSubData !== null) {
return;
}
const rawValue = toRaw(data); const rawValue = toRaw(data);
if (!rawValue) { if (!rawValue) {
return; return;
} }
if (rawValue.isArray()) { if (rawValue.isArray()) {
subData.value = data.data; subData.value = (data as ArrayData).data;
} else if (rawValue.isObject()) { } else if (rawValue.isObject()) {
Bus.emit(BusMsg.RequestObjectData, rawValue, (info: Property[]) => { subData.value = (data as ObjectData).data;
subData.value = info;
});
} }
} }
return { return {