diff --git a/cc-inspector/src/views/devtools/data.ts b/cc-inspector/src/views/devtools/data.ts index 3a8abf2..3b2c6ee 100644 --- a/cc-inspector/src/views/devtools/data.ts +++ b/cc-inspector/src/views/devtools/data.ts @@ -78,6 +78,12 @@ export class EngineData extends Info { super(); this.type = DataType.Engine; } + init(name: string, type: string, uuid: string) { + this.engineName = name; + this.engineType = type; + this.engineUUID = uuid; + return this; + } public isEngine(): boolean { return true; } } @@ -93,6 +99,11 @@ 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))); + return this; + } public isArray(): boolean { return true; } public isArrayOrObject(): boolean { return true; } } @@ -102,11 +113,34 @@ export class ObjectDataItem extends Info { } export class ObjectData extends Info { - data: string = "";// object的简单描述快照,类似chrome的console,{a:'fff',b:xxx} + /** + * object的简单描述快照,类似chrome的console,{a:'fff',b:xxx} + * 主要是为了防止Object的数据过大,无限递归 + */ + data: string = ""; constructor() { super(); this.type = DataType.Object; } + + test() { + this.data = JSON.stringify({ fack: 'test' }); + 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; + } public isObject(): boolean { return true; } public isArrayOrObject(): boolean { return true; } } @@ -172,6 +206,11 @@ export class Vec2Data extends Info { this.data.push(info); return this; } + test() { + this.add(new Property("x", new NumberData(100))); + this.add(new Property("y", new NumberData(200))); + return this; + } public isVec2(): boolean { return true; } @@ -191,11 +230,17 @@ export class Vec3Data extends Info { this.data.push(info); return this; } + test() { + this.add(new Property("x", new NumberData(100))); + this.add(new Property("y", new NumberData(200))); + this.add(new Property("z", new NumberData(300))); + return this; + } public isVec3(): boolean { return true; } } -export class Vec4Data extends Vec2Data { +export class Vec4Data extends Info { data: Array = []; constructor() { @@ -209,6 +254,13 @@ export class Vec4Data extends Vec2Data { this.data.push(info); return this; } + test() { + this.add(new Property("x", new NumberData(100))); + this.add(new Property("y", new NumberData(200))); + this.add(new Property("z", new NumberData(300))); + this.add(new Property("w", new NumberData(400))); + return this; + } public isVec4(): boolean { return true; } @@ -234,6 +286,11 @@ export class EnumData extends Info { public isEnum(): boolean { return this.type === DataType.Enum; } + test() { + this.values.push({ name: "1", value: 1 }); + this.values.push({ name: "2", value: 2 }); + return this; + } } export class TreeData implements ITreeData { @@ -241,6 +298,10 @@ export class TreeData implements ITreeData { active: boolean = true; text: string = ""; children: TreeData[] = []; + constructor(id: string = "", text: string = "") { + this.id = id; + this.text = text; + } } export class Property { @@ -269,6 +330,11 @@ export class Group { addProperty(property: Property) { this.data.push(property) } + buildProperty(name: string, info: Info) { + const property = new Property(name, info); + this.addProperty(property); + return this; + } sort() { let order = ["name", "active", "enabled", "uuid", "position", "rotation", "scale", "anchor", "size", "color", "opacity", "skew", "group"]; diff --git a/cc-inspector/src/views/devtools/test/server.ts b/cc-inspector/src/views/devtools/test/server.ts index c14a3cc..9a00abf 100644 --- a/cc-inspector/src/views/devtools/test/server.ts +++ b/cc-inspector/src/views/devtools/test/server.ts @@ -1,3 +1,4 @@ +import { v4 } from "uuid"; import { Msg, Page, PluginEvent } from "../../../core/types"; import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, Info, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data"; export class TestClient { @@ -5,8 +6,105 @@ export class TestClient { } } +class Node { + active: boolean = true; + children: Node[] = []; + id: string = ""; + name: string = ""; + components: Group[] = []; + constructor(name: string = "") { + this.name = name; + this.active = true; + this.id = v4(); + this.children = []; + } + buildComponent(name: string) { + const info = new Group(name) + this.components.push(info); + return info; + } + + buildChild(name: string) { + const node = new Node(name); + this.children.push(node); + return node; + } + toTreeData(data: TreeData) { + data.id = this.id; + data.text = this.name; + data.active = this.active; + for (let i = 0; i < this.children.length; i++) { + const child = this.children[i]; + const childData = new TreeData(); + child.toTreeData(childData); + data.children.push(childData); + } + } + private allNodes(): Node[] { + const nodes: Node[] = []; + function circle(node: Node) { + node.children.forEach(child => { + nodes.push(child); + circle(child); + }) + } + circle(this); + return nodes; + } + findNode(id: string): Node | null { + const nodes: Node[] = this.allNodes(); + return nodes.find(node => node.id === id) || null; + } + findInfo(id: string): Info | null { + const nodes: Node[] = this.allNodes(); + for (let i = 0; i < nodes.length; i++) { + const node = nodes[i]; + const comp = node.findProperty(id); + if (comp) { + return comp; + } + } + return null; + } + private findProperty(id: string): Info | null { + for (let i = 0; i < this.components.length; i++) { + const comp = this.components[i]; + for (let j = 0; j < comp.data.length; j++) { + const item: Property = comp.data[j]; + if (item.value.id === id) { + return item.value; + } + } + } + return null; + } +} 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("array", new ArrayData().test()) + .buildProperty("object", new ObjectData().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("engine").buildComponent("group3") + .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')) + } add(client: TestClient) { this.clients.push(client); } @@ -14,109 +112,25 @@ export class TestServer { switch (msg) { case Msg.NodeInfo: { const id: string = data as string; - - const group = new Group("test"); - { - const text = new TextData("text1"); - group.addProperty(new Property("text", text)) - } - { - const number = new NumberData(100); - group.addProperty(new Property("number", number)) - } - { - const str = new StringData("str"); - group.addProperty(new Property("str", str)) - } - { - const v2 = new Vec2Data(); - v2.add(new Property("x", new NumberData(100))); - v2.add(new Property("y", new NumberData(200))); - group.addProperty(new Property("v2", v2)) - } - { - const v3 = new Vec3Data(); - v3.add(new Property("x", new NumberData(100))); - v3.add(new Property("y", new NumberData(200))); - v3.add(new Property("z", new NumberData(300))); - group.addProperty(new Property("v3", v3)) - } - { - const v4 = new Vec4Data(); - v4.add(new Property("x", new NumberData(100))); - v4.add(new Property("y", new NumberData(200))); - v4.add(new Property("z", new NumberData(300))); - v4.add(new Property("w", new NumberData(400))); - group.addProperty(new Property("v4", v4)) - } - { - const b = new BoolData(true); - group.addProperty(new Property("bool", b)) - } - { - const e = new EnumData(); - e.values.push({ name: "a", value: 1 }); - e.values.push({ name: "b", value: 2 }); - group.addProperty(new Property("enum", e)) - } - { - const c = new ColorData('#f00'); - group.addProperty(new Property("color", c)) - } - { - const arr = new ArrayData(); - arr.add(new Property("item1", new TextData("text"))); - arr.add(new Property("item2", new BoolData(true))); - group.addProperty(new Property("arr", arr)) - } - { - const obj = new ObjectData(); - obj.data = JSON.stringify({ fack: 'test' }); - group.addProperty(new Property("obj", obj)); - } - { - const engine = new EngineData(); - engine.engineName = "engineName"; - engine.engineType = "engineType"; - engine.engineUUID = "engineUUID"; - group.addProperty(new Property("engine", engine)) - } - { - const engine = new EngineData(); - engine.engineName = "engineName"; - engine.engineType = "cc_Node"; - engine.engineUUID = "engineUUID"; - group.addProperty(new Property("engine", engine)) - } - { - const engine = new EngineData(); - engine.engineName = "engineName"; - engine.engineType = "cc_Srpite"; - engine.engineUUID = "engineUUID"; - group.addProperty(new Property("engine", engine)) - } - { - const engine = new EngineData(); - engine.engineName = "engineName"; - engine.engineType = "cc_Label"; - engine.engineUUID = "engineUUID"; - group.addProperty(new Property("engine", engine)) + const node: Node = this.testData.findNode(id); + let group = []; + if (node) { + group = node.components; + } else { + let g = new Group("scene").buildProperty("scene id", new StringData(id)); + group.push(g); } const ret: NodeInfoData = { uuid: id, - group: [group,] + group: group }; const event = new PluginEvent(Page.Background, Page.Devtools, Msg.NodeInfo, ret); this.send(event); break; } case Msg.TreeInfo: { - const ret: TreeData = { - id: "root", - text: "root", - active: true, - children: [], - }; + const ret: TreeData = new TreeData(); + this.testData.toTreeData(ret); const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, ret); this.send(event); break; @@ -126,15 +140,16 @@ export class TestServer { break; } case Msg.GetObjectItemData: { - const d = data as ObjectData; - const property = []; - property.push(new Property("fake", new TextData('test'))); - const ret: ObjectItemRequestData = { - id: d.id, - data: property, + const objData = 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.GetObjectItemData, ret); + this.send(event) } - const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.GetObjectItemData, ret); - this.send(event) break; } case Msg.LogData: { diff --git a/cc-inspector/src/views/devtools/ui/property-engine.vue b/cc-inspector/src/views/devtools/ui/property-engine.vue index 7bd5b66..393cb60 100644 --- a/cc-inspector/src/views/devtools/ui/property-engine.vue +++ b/cc-inspector/src/views/devtools/ui/property-engine.vue @@ -29,7 +29,6 @@ export default defineComponent({ Bus.emit(BusMsg.ShowPlace, props.data); }, getEngineTypeIcon() { - console.log(props.data.engineType); switch (props.data.engineType) { case "cc_Sprite": { return "icon_picture"; diff --git a/cc-inspector/src/views/devtools/ui/property-group.vue b/cc-inspector/src/views/devtools/ui/property-group.vue index 14455b0..4532576 100644 --- a/cc-inspector/src/views/devtools/ui/property-group.vue +++ b/cc-inspector/src/views/devtools/ui/property-group.vue @@ -5,7 +5,7 @@
-
+
diff --git a/cc-inspector/src/views/devtools/ui/ui-prop.vue b/cc-inspector/src/views/devtools/ui/ui-prop.vue index 7da54b2..fb7af39 100644 --- a/cc-inspector/src/views/devtools/ui/ui-prop.vue +++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue @@ -145,8 +145,6 @@ export default defineComponent({