节点树显示图标

cc-inspector/src/scripts/inject/inspector.ts

@@ -1,6 +1,7 @@
 // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
 import { uniq } from "lodash";
 import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseGameInfoData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
+import { CompType, getNodeIcon } from "../../views/devtools/comp";
 import { ArrayData, BoolData, ColorData, DataType, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectCircleData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../../views/devtools/data";
 import { getEnumListConfig } from "./enumConfig";
 import { InjectEvent } from "./event";
@@ -241,17 +242,75 @@ export class Inspector extends InjectEvent {
         let treeData = new TreeData();
         treeData.id = "";
         treeData.text = "empty scene";
+        treeData.icon = "icon_cocos";
         notify && this.sendMsgToContent(Msg.ResponseTreeInfo, treeData as ResponseTreeInfoData);
       }
     } else {
       notify && this.notifySupportGame(false);
     }
   }
+  private calcIcon(node: any): string {
+    if (node instanceof cc.Scene) {
+      return getNodeIcon(CompType.Scene);
+    }
 
+    const components = node._components;
+    if (components) {
+      const types: CompType[] = [];
+      // widget组件的优先级低于其他渲染组件
+      for (let i = 0; i < components.length; i++) {
+        const component = components[i];
+        const type = this.checkComponent(component);
+        if (type) {
+          types.push(type);
+        }
+      }
+      if (types.length) {
+        //按照字母的顺序排序，目前是符合预期
+        types.sort();
+        return getNodeIcon(types[0]);
+      }
+    }
+    return getNodeIcon(CompType.Node);
+  }
+  private checkComponent(comp: any): CompType | null {
+    const map = {};
+    map[CompType.Animation] = [cc.Animation];
+    map[CompType.Button] = [cc.Button];
+    map[CompType.Spirte] = [cc.Sprite];
+    map[CompType.Label] = [cc.Label];
+    map[CompType.Node] = [cc.Node];
+    map[CompType.Prefab] = [cc.Prefab];
+    map[CompType.EditBox] = [cc.EditBox];
+    map[CompType.Scene] = [cc.Scene];
+    map[CompType.ScrollView] = [cc.ScrollView];
+    map[CompType.Camera] = [cc.Camera];
+    map[CompType.Canvas] = [cc.Canvas];
+    map[CompType.Mask] = [cc.Mask];
+    map[CompType.ProgressBar] = [cc.ProgressBar];
+    map[CompType.Layout] = [cc.Layout];
+    map[CompType.Graphics] = [cc.Graphics];
+    map[CompType.Widget] = [cc.Widget];
+    for (let key in map) {
+      const item = map[key];
+      const ret = item.find((el: any) => {
+        return el && comp instanceof el;
+      });
+      if (ret) {
+        return key as CompType;
+      }
+    }
+    return null;
+  }
+  private calcColor(node: any) {
+    return "";
+  }
   // 收集节点信息
   getNodeChildren(node: any, data: TreeData) {
     data.id = node.uuid;
     data.text = node.name;
+    data.icon = this.calcIcon(node);
+    data.color = this.calcColor(node);
     // @ts-ignore
     if (node instanceof cc.Scene) {
       // 场景不允许获取active，引擎会报错

cc-inspector/src/views/devtools/comp/index.ts

@@ -3,6 +3,8 @@ export enum CompType {
   Prefab = "cc.Prefab",
   Spirte = "cc.Sprite",
   Label = "cc.Label",
+  Layout = "cc.Layout",
+  Graphics = "cc.Graphics",
   Widget = "cc.Widget",
   Camera = "cc.Camera",
   Canvas = "cc.Canvas",
@@ -249,3 +251,24 @@ export const VisibleProp = {
   Active: "active",
   Enabled: "enabled",
 };
+
+export function getNodeIcon(comp: CompType): string {
+  const map = {};
+  map[CompType.Spirte] = "icon_picture";
+  map[CompType.Label] = "icon_text";
+  map[CompType.Node] = "icon_node";
+  map[CompType.Prefab] = "icon_prefab";
+  map[CompType.Animation] = "icon_animation";
+  map[CompType.Button] = "icon_button";
+  map[CompType.EditBox] = "icon_inputbox";
+  map[CompType.Scene] = "icon_cocos";
+  map[CompType.ScrollView] = "icon_scroll_view";
+  map[CompType.Canvas] = "icon_canvas";
+  map[CompType.Camera] = "icon_camera";
+  map[CompType.Mask] = "icon_mask";
+  map[CompType.Widget] = "icon_widget";
+  map[CompType.ProgressBar] = "icon_progress";
+  map[CompType.Layout] = "icon_layout";
+  map[CompType.Graphics] = "icon_graphics";
+  return map[comp] || "";
+}

cc-inspector/src/views/devtools/data.ts

@@ -521,6 +521,8 @@ export class EnumData extends Info {
 
 export class TreeData implements ITreeData {
   id: string = "";
+  icon: string = "";
+  color: string = "";
   active: boolean = true;
   text: string = "";
   children: TreeData[] = [];

cc-inspector/src/views/devtools/hierarchy.vue

@@ -11,7 +11,7 @@
           <i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
         </slot>
       </CCInput>
-      <CCTree @do-search="doSearch" :search="true" @node-menu="onMenu" @contextmenu.prevent.stop="onMenu" style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick" @node-unclick="handleNodeUnclick" @node-enter="handleNodeEnter" @node-leave="handleNodeLeave"></CCTree>
+      <CCTree :show-icon="true" @do-search="doSearch" :search="true" @node-menu="onMenu" @contextmenu.prevent.stop="onMenu" style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick" @node-unclick="handleNodeUnclick" @node-enter="handleNodeEnter" @node-leave="handleNodeLeave"></CCTree>
     </CCDock>
   </div>
 </template>

cc-inspector/src/views/devtools/test/server.ts

@@ -6,7 +6,9 @@ export class TestClient {
   recv(event: PluginEvent) {}
 }
 class Node {
+  icon: string = "icon_node";
   active: boolean = true;
+  color: string = "";
   children: Node[] = [];
   id: string = "";
   name: string = "";
@@ -17,6 +19,18 @@ class Node {
     this.id = v4();
     this.children = [];
   }
+  setColor(color: string) {
+    this.color = color;
+    return this;
+  }
+  setIcon(icon: string) {
+    this.icon = icon;
+    return this;
+  }
+  setActive(active: boolean) {
+    this.active = active;
+    return this;
+  }
   buildComponent(name: string) {
     const info = new Group(name);
     this.components.push(info);
@@ -32,6 +46,8 @@ class Node {
     data.id = this.id;
     data.text = this.name;
     data.active = this.active;
+    data.icon = this.icon;
+    data.color = this.color;
     for (let i = 0; i < this.children.length; i++) {
       const child = this.children[i];
       const childData = new TreeData();
@@ -83,7 +99,10 @@ export class TestServer {
   private testData: Node = new Node("scene");
   constructor() {
     this.testData
+      .setIcon("icon_cocos")
+      .setColor("#f00")
       .buildChild("base")
+      .setIcon("icon_prefab")
       .buildComponent("group-base") //
       .buildProperty("bool", new BoolData(true))
       .buildProperty("text", new TextData("text"))
@@ -122,8 +141,7 @@ export class TestServer {
       .buildComponent("group-arr[obj]") //
       .buildProperty("arr", new ArrayData().testObject()); //
 
-    const node = this.testData.buildChild("str1");
-    node.active = false;
+    const node = this.testData.buildChild("str1").setActive(false).setColor("#00ff00ff");
     const comp = node.buildComponent("group51");
     comp.buildProperty("str1", new StringData("str1"));
     node.buildComponent("group52").buildProperty("num", new NumberData(200));
@@ -189,6 +207,7 @@ export class TestServer {
       }
       case Msg.RequstTreeInfo: {
         const ret: TreeData = new TreeData();
+        ret.icon = "icon_cocos";
         this.testData.toTreeData(ret);
         const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, ret as ResponseTreeInfoData);
         this.send(event);

cc-inspector/src/views/devtools/test/test.vue

@@ -102,9 +102,11 @@ export default defineComponent({
       onTestTree1() {
         const data: TreeData = {
           id: "11",
+          color: "#ffffffff",
+          icon: "icon_node",
           text: "11",
           active: true,
-          children: [{ id: "22", text: "22", active: true, children: [] }],
+          children: [{ id: "22", text: "22", active: true, color: "#ffffffff", icon: "icon_node", children: [] }],
         };
         const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
         bridge.emit(event);
@@ -113,15 +115,19 @@ export default defineComponent({
         const data: TreeData = {
           id: "1",
           text: "1",
+          color: "#ffffffff",
+          icon: "icon_node",
           active: true,
           children: [
             {
               id: "2",
               text: "2",
+              color: "#ffffffff",
+              icon: "icon_node",
               active: true,
-              children: [{ id: "3", text: "3", active: true, children: [] }],
+              children: [{ id: "3", text: "3", active: true, color: "#ffffffff", icon: "icon_node", children: [] }],
             },
-            { id: "4", text: "4", active: true, children: [] },
+            { id: "4", text: "4", active: true, color: "#ffffffff", icon: "icon_node", children: [] },
           ],
         };
         const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);

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

@@ -11,7 +11,7 @@ import { defineComponent, PropType, toRaw } from "vue";
 import { ga } from "../../../ga";
 import { GA_EventName } from "../../../ga/type";
 import { Bus, BusMsg } from "../bus";
-import { CompType } from "../comp";
+import { CompType, getNodeIcon } from "../comp";
 import { EngineData } from "../data";
 export default defineComponent({
   name: "property-engine",
@@ -29,15 +29,7 @@ export default defineComponent({
         Bus.emit(BusMsg.ShowPlace, toRaw(props.data));
       },
       getEngineTypeIcon() {
-        const map = {};
-        map[CompType.Spirte] = "icon_picture";
-        map[CompType.Label] = "icon_text";
-        map[CompType.Node] = "icon_node";
-        map[CompType.Prefab] = "icon_prefab";
-        map[CompType.Animation] = "icon_animation";
-        map[CompType.Button] = "icon_button";
-        map[CompType.EditBox] = "icon_inputbox";
-        return map[props.data.engineType] || "icon_unknown";
+        return getNodeIcon(props.data.engineType as CompType) || "icon_unknown";
       },
     };
   },