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 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 {

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);
const port = portMgr.getCurrentUsePort();
if (!port) {
console.warn(`not find andy port`);
console.warn(`not find any port`);
return;
}
port.send(data);

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

@ -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);

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

@ -2,7 +2,6 @@ import { TinyEmitter } from "tiny-emitter";
export enum BusMsg {
ShowPlace = "ShowPlace",
RequestObjectData = "RequestObjectData",
FoldAllGroup = "FoldAllGroup",
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);
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<Property> = [];
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;

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

@ -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) => {

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

@ -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) {

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

@ -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: {

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>
<PropertyImage v-if="value.isImage()" v-model:data="(value as ImageData)"></PropertyImage>
<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>
</CCProp>
<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>
</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 { 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<Array<Property> | null>(null);
const subData = ref<Array<Property>>([]);
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 {