显示引擎的类型

source/src/devtools/bus.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+export enum BusMsg {
+  ShowPlace = 'ShowPlace',
+}
+
+export default new Vue();

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

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

source/src/devtools/index.vue

@@ -28,6 +28,7 @@
                    @node-expand="onNodeExpand"
                    @node-collapse="onNodeCollapse"
                    @node-click="handleNodeClick">
+<!--                   :render-content="renderContent"-->
 
             <span slot-scope="{node,data}" class="leaf" :class="data.active?'leaf-show':'leaf-hide'">
               <span>{{ node.label }}</span>
@@ -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<string> = [];
+
+    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(<span>1111</span>)
   }
 
   _onMsgListInfo(eventData: Array<TreeData>) {

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

source/src/devtools/ui-prop.vue

@@ -86,6 +86,14 @@
             <el-button @click="onShowValueInConsole">log</el-button>
           </div>
         </div>
+        <div v-if="isEngine()" class="engine">
+          <div class="head">
+            <i class="icon" :class="getEngineTypeIcon()"></i>
+            <div class="type">{{ value.engineType }}</div>
+          </div>
+          <div class="name">{{ value.engineName }}</div>
+          <el-button @click="onPlaceInTree" type="primary" icon="el-icon-place"></el-button>
+        </div>
         <div class="slot">
           <slot></slot>
         </div>
@@ -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;