diff --git a/source/src/devtools/bus.ts b/source/src/devtools/bus.ts new file mode 100644 index 0000000..56fc732 --- /dev/null +++ b/source/src/devtools/bus.ts @@ -0,0 +1,7 @@ +import Vue from 'vue' + +export enum BusMsg { + ShowPlace = 'ShowPlace', +} + +export default new Vue(); diff --git a/source/src/devtools/data.ts b/source/src/devtools/data.ts index dc87c7c..3370717 100644 --- a/source/src/devtools/data.ts +++ b/source/src/devtools/data.ts @@ -11,6 +11,7 @@ export enum DataType { Array, // 暂时在控制台打印下 Object, Image, // 图片 + Engine,// 引擎的类型:cc.Node, cc.Sprite, cc.Label等。。。 } export class Info { @@ -27,6 +28,17 @@ export class TextData extends Info { } } +export class EngineData extends Info { + public engineType: string = ''; + public engineUUID: string = ''; + public engineName: string = ''; + + constructor() { + super(); + this.type = DataType.Engine; + } +} + export class ArrayData extends Info { data: Array = []; diff --git a/source/src/devtools/index.ts b/source/src/devtools/index.ts index ecd28d2..431ecf6 100644 --- a/source/src/devtools/index.ts +++ b/source/src/devtools/index.ts @@ -1,6 +1,7 @@ import Vue from "vue"; import ElementUI from "element-ui" import "element-ui/lib/theme-chalk/index.css" +import './icon-font/iconfont.css' import "./global.less" import index from "./index.vue"; import {init} from './register-panel'; diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue index 28497c7..34601a7 100644 --- a/source/src/devtools/index.vue +++ b/source/src/devtools/index.vue @@ -28,6 +28,7 @@ @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick"> + {{ node.label }} @@ -53,7 +54,8 @@ import {Component} from "vue-property-decorator"; import properties from "./propertys.vue"; import {Msg, Page, PluginEvent} from '@/core/types' import {connectBackground} from "@/devtools/connectBackground"; -import {Info, TreeData} from "@/devtools/data"; +import {EngineData, Info, TreeData} from "@/devtools/data"; +import Bus, {BusMsg} from './bus'; @Component({ components: { @@ -88,6 +90,48 @@ export default class Index extends Vue { window.addEventListener("message", function (event) { console.log("on vue:" + JSON.stringify(event)); }, false); + Bus.$on(BusMsg.ShowPlace, (data: EngineData) => { + console.log(data) + this._expand(data.engineUUID); + }) + } + + _expand(uuid: string) { + + let expandKeys: Array = []; + + function circle(array: any) { + for (let i = 0; i < array.length; i++) { + let item = array[i]; + expandKeys.push(item.uuid); + if (item.uuid === uuid) { + return true + } else { + let find = circle(item.children); + if (find) { + return true; + } else { + expandKeys.pop(); + } + } + } + } + + circle(this.treeData) + + expandKeys.forEach(key => { + if (!this.expandedKeys.find(el => el === key)) { + this.expandedKeys.push(key) + } + }) + // 高亮uuid + + } + + renderContent(h: Function, options: any) { + let {node, data, store} = options; + return h('span', {class:''}, data.name) + // return(1111) } _onMsgListInfo(eventData: Array) { diff --git a/source/src/devtools/inject.ts b/source/src/devtools/inject.ts index df84e76..be1149c 100644 --- a/source/src/devtools/inject.ts +++ b/source/src/devtools/inject.ts @@ -3,7 +3,7 @@ import { ArrayData, BoolData, ColorData, - DataType, + DataType, EngineData, Group, ImageData, Info, NullOrUndefinedData, @@ -305,12 +305,24 @@ class CCInspector { path: path, value: propertyValue, })) - !info && (info = this._buildObjectOrArrayData({ - data: new ObjectData(), - path: path, - value: propertyValue, - keys: Object.keys(propertyValue), - })); + if (!info) { + if (typeof propertyValue === "object") { + let ctorName = propertyValue.constructor.name; + if (ctorName.startsWith('cc_')) { + info = new EngineData(); + info.engineType = ctorName; + info.engineName=propertyValue.name; + info.engineUUID=propertyValue.uuid; + } else { + info = this._buildObjectOrArrayData({ + data: new ObjectData(), + path: path, + value: propertyValue, + keys: Object.keys(propertyValue), + }) + } + } + } } break; } diff --git a/source/src/devtools/ui-prop.vue b/source/src/devtools/ui-prop.vue index b2dd6a2..d21e6f2 100644 --- a/source/src/devtools/ui-prop.vue +++ b/source/src/devtools/ui-prop.vue @@ -86,6 +86,14 @@ log +
+
+ +
{{ value.engineType }}
+
+
{{ value.engineName }}
+ +
@@ -109,14 +117,14 @@ import Vue from "vue" import {Component, Prop} from "vue-property-decorator" -import {DataType, Info} from './data' +import {DataType, Info, EngineData} from './data' import {connectBackground} from "@/devtools/connectBackground"; import {Msg} from "@/core/types"; +import Bus, {BusMsg} from './bus' @Component({ components: {} }) -// todo 支持array export default class UiProp extends Vue { @Prop({default: ""}) name: string | undefined; @@ -178,9 +186,33 @@ export default class UiProp extends Vue { return this.value && (this.value.type === DataType.Image) } + isEngine() { + return this.value && (this.value.type === DataType.Engine) + } + + onPlaceInTree() { + Bus.$emit(BusMsg.ShowPlace, this.value); + } + created() { } + getEngineTypeIcon() { + const value = this.value as EngineData; + switch (value.engineType) { + case 'cc_Sprite': { + return 'el-icon-picture-outline'; + } + case 'cc_Label': { + return 'el-icon-third-text'; + } + case 'cc_Node': { + return 'el-icon-third-node' + } + } + return 'el-icon-third-unknow'; + } + getName(isArray: boolean, arr: UiProp) { const type = arr.value.type; if (isArray) { @@ -325,6 +357,48 @@ export default class UiProp extends Vue { } } + .engine { + display: flex; + flex-direction: row; + border: solid #409EFF 1px; + border-radius: 5px; + align-items: center; + align-content: center; + + .head { + background-color: cornflowerblue; + height: 28px; + align-items: center; + align-content: center; + display: flex; + flex-direction: row; + + .icon { + font-size: 20px; + width: 20px; + margin-left: 5px; + } + + .type { + display: flex; + align-content: center; + align-items: center; + margin: 0 5px; + } + } + + + .name { + flex: 1; + height: 28px; + padding-left: 5px; + background-color: gold; + display: flex; + align-items: center; + align-content: center; + } + } + .vec { width: 100%; display: flex;