优化测试逻辑，更加靠拢chrome实际运行表现

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<Property> = [];
 
   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"];

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 node: Node = this.testData.findNode(id);
-        const group = new Group("test");
+        let group = [];
-        {
+        if (node) {
-          const text = new TextData("text1");
+          group = node.components;
-          group.addProperty(new Property("text", text))
+        } else {
-        }
+          let g = new Group("scene").buildProperty("scene id", new StringData(id));
-        {
+          group.push(g);
-          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 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 = {
+        const ret: TreeData = new TreeData();
-          id: "root",
+        this.testData.toTreeData(ret);
-          text: "root",
-          active: true,
-          children: [],
-        };
         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 objData = data as ObjectData;
-        const property = [];
+        const info = this.testData.findInfo(objData.id);
-        property.push(new Property("fake", new TextData('test')));
+        if (info && info instanceof ObjectData) {
-        const ret: ObjectItemRequestData = {
+          const ret: ObjectItemRequestData = {
-          id: d.id,
+            id: objData.id,
-          data: property,
+            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: {

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";

cc-inspector/src/views/devtools/ui/property-group.vue

@@ -5,7 +5,7 @@
         <div style="flex: 1"></div>
         <i style="" @click.stop="onLog" class="print iconfont icon_print"></i>
       </template>
-      <div>
+      <div style="padding-left: 6px">
         <UiProp v-for="(item, index) in group.data" :key="index" :name="item.name" :value="item.value"> </UiProp>
       </div>
     </CCSection>

cc-inspector/src/views/devtools/ui/ui-prop.vue

@@ -145,8 +145,6 @@ export default defineComponent({
 
 <style scoped lang="less">
 .ui-prop {
-  min-height: 30px;
-  margin: 1px 0;
   display: flex;
   flex-direction: column;
   justify-content: center;