diff --git a/cc-inspector/src/scripts/inject/inspector.ts b/cc-inspector/src/scripts/inject/inspector.ts index 5cfb2e0..fb56f51 100644 --- a/cc-inspector/src/scripts/inject/inspector.ts +++ b/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，引擎会报错 diff --git a/cc-inspector/src/views/devtools/comp/index.ts b/cc-inspector/src/views/devtools/comp/index.ts index d454fec..e25ed79 100644 --- a/cc-inspector/src/views/devtools/comp/index.ts +++ b/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] || ""; +} diff --git a/cc-inspector/src/views/devtools/data.ts b/cc-inspector/src/views/devtools/data.ts index 2479b0e..f360c64 100644 --- a/cc-inspector/src/views/devtools/data.ts +++ b/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[] = []; diff --git a/cc-inspector/src/views/devtools/hierarchy.vue b/cc-inspector/src/views/devtools/hierarchy.vue index eb28dbc..d15f815 100644 --- a/cc-inspector/src/views/devtools/hierarchy.vue +++ b/cc-inspector/src/views/devtools/hierarchy.vue @@ -11,7 +11,7 @@ - + diff --git a/cc-inspector/src/views/devtools/test/server.ts b/cc-inspector/src/views/devtools/test/server.ts index d4911a1..afccaa0 100644 --- a/cc-inspector/src/views/devtools/test/server.ts +++ b/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); diff --git a/cc-inspector/src/views/devtools/test/test.vue b/cc-inspector/src/views/devtools/test/test.vue index ab39f5c..9b76421 100644 --- a/cc-inspector/src/views/devtools/test/test.vue +++ b/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); diff --git a/cc-inspector/src/views/devtools/ui/property-engine.vue b/cc-inspector/src/views/devtools/ui/property-engine.vue index 4762a0d..b8766b8 100644 --- a/cc-inspector/src/views/devtools/ui/property-engine.vue +++ b/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"; }, }; },