class name

名字过长时，自动省略，点击显示全部

source/src/devtools/inject.ts

@@ -15,7 +15,7 @@ import {
   Vec2Data,
   Vec3Data
 } from "./data";
-import {Msg, Page, PluginEvent} from '@/core/types'
+import {Msg, Page, PluginEvent} from "@/core/types"
 
 // @ts-ignore typescript-eslint/no-namespace
 declare namespace cc {
@@ -26,7 +26,7 @@ class CCInspector {
   inspectorGameMemoryStorage: Record<string, any> = {}
 
   init() {
-    console.log('cc-inspector init ~~~');
+    console.log("cc-inspector init ~~~");
     let timer = setInterval(() => {
       if (this._isCocosGame()) {
         clearInterval(timer)
@@ -44,7 +44,7 @@ class CCInspector {
       }
       let pluginEvent: PluginEvent = event.data;
       if (PluginEvent.check(pluginEvent, Page.Content, Page.Inject)) {
-        console.log(`%c[Inject] ${JSON.stringify(pluginEvent)}`, 'color:green;');
+        console.log(`%c[Inject] ${JSON.stringify(pluginEvent)}`, "color:green;");
         PluginEvent.finish(pluginEvent)
         switch (pluginEvent.msg) {
           case Msg.UrlChange:
@@ -114,7 +114,7 @@ class CCInspector {
 
     if (!draw) {
       // @ts-ignore
-      let node = new cc.Node('draw-node');
+      let node = new cc.Node("draw-node");
       // @ts-ignore
       cc.director.getScene().addChild(node);
       // @ts-ignore
@@ -123,7 +123,7 @@ class CCInspector {
     draw.clear()
     draw.lineWidth = 10;
     // @ts-ignore
-    draw.strokeColor = new cc.Color().fromHEX('#ff0000')
+    draw.strokeColor = new cc.Color().fromHEX("#ff0000")
     const {anchorX, anchorY, width, height, x, y} = node;
     let halfWidth = width / 2;
     let halfHeight = height / 2;
@@ -192,7 +192,7 @@ class CCInspector {
       rotation: ["rotationX", "rotationY"],
       anchor: ["anchorX", "anchorY"],
       size: ["width", "height"],
-      skew: ['skewX', 'skewY'],
+      skew: ["skewX", "skewY"],
       position: ["x", "y", "z"],
       scale: ["scaleX", "scaleY", "scaleZ"],
       designResolution: ["width", "height"], // 这个比较特殊，在key下边，其他的都不是在key下
@@ -240,7 +240,7 @@ class CCInspector {
     const data: ImageData = options.data;
     const path: Array<string> = options.path;
     if (ctor && value instanceof ctor) {
-      if (value.hasOwnProperty('_textureFilename')) {
+      if (value.hasOwnProperty("_textureFilename")) {
         data.path = path;
         //@ts-ignore
         data.data = `${window.location.origin}/${value._textureFilename}`;
@@ -287,7 +287,7 @@ class CCInspector {
             ctor: cc.Vec3,
             path: path,
             data: new Vec3Data(),
-            keys: ['x', 'y', 'z'],
+            keys: ["x", "y", "z"],
             value: propertyValue,
           }))
           !info && (info = this._buildVecData({
@@ -295,7 +295,7 @@ class CCInspector {
             ctor: cc.Vec2,
             path: path,
             data: new Vec2Data(),
-            keys: ['x', 'y'],
+            keys: ["x", "y"],
             value: propertyValue
           }))
           !info && (info = this._buildImageData({
@@ -308,7 +308,7 @@ class CCInspector {
           if (!info) {
             if (typeof propertyValue === "object") {
               let ctorName = propertyValue.constructor.name;
-              if (ctorName.startsWith('cc_')) {
+              if (ctorName.startsWith("cc_")) {
                 info = new EngineData();
                 info.engineType = ctorName;
                 info.engineName = propertyValue.name;
@@ -341,7 +341,7 @@ class CCInspector {
     let data: ObjectData | ArrayData = options.data;
     let keys: Array<string> = options.keys;
     // 剔除_开头的属性
-    keys = keys.filter(key => !key.toString().startsWith('_'));
+    keys = keys.filter(key => !key.toString().startsWith("_"));
     for (let i = 0; i < keys.length; i++) {
       let key = keys[i];
       let propPath = path.concat(key.toString());
@@ -353,8 +353,23 @@ class CCInspector {
     return data;
   }
 
+  private getCompName(comp: any): string {
+    const nameKeys = [
+      "__classname__", // 2.4.0 验证通过
+    ];
+    for (let i = 0; i < nameKeys.length; i++) {
+      let key = nameKeys[i];
+      // 一般来说，这里的name是不会出现假值
+      if (comp[key]) {
+        return comp[key];
+      }
+    }
+    return comp.constructor.name;
+  }
+
   _getGroupData(node: any) {
-    let nodeGroup = new Group(node.constructor.name);
+    const name = this.getCompName(node);
+    let nodeGroup = new Group(name);
     let keys = this._getNodeKeys(node);
     for (let i = 0; i < keys.length;) {
       let key = keys[i];

source/src/devtools/propertys.vue

@@ -83,6 +83,7 @@ export default class properties extends Vue {
       user-select: none;
       cursor: pointer;
       border-bottom: 1px #6d6d6d solid;
+      background-color: #1da1f7;
     }
 
     .header:hover {

source/src/devtools/ui-prop.vue

@@ -10,7 +10,13 @@
            :class="fold?'el-icon-caret-right':'el-icon-caret-bottom'"
            :style="{'visibility':isArrayOrObject()?'visible':'hidden','margin-left':indent*10+'px'}">
         </i>
-        <div class="text">{{ name }}</div>
+        <div class="text">
+          <el-popover placement="top" trigger="click">
+            <div>{{ name }}</div>
+            <span slot="reference">{{ name }}</span>
+          </el-popover>
+        </div>
+
       </div>
       <div class="value">
         <el-input v-if="isString()" v-model="value.data"
@@ -117,10 +123,10 @@
 
 import Vue from "vue"
 import {Component, Prop} from "vue-property-decorator"
-import {DataType, Info, EngineData} from './data'
+import {DataType, Info, EngineData} from "./data"
 import {connectBackground} from "@/devtools/connectBackground";
 import {Msg} from "@/core/types";
-import Bus, {BusMsg} from './bus'
+import Bus, {BusMsg} from "./bus"
 
 @Component({
   components: {}
@@ -200,17 +206,17 @@ export default class UiProp extends Vue {
   getEngineTypeIcon() {
     const value = this.value as EngineData;
     switch (value.engineType) {
-      case 'cc_Sprite': {
-        return 'el-icon-picture-outline';
+      case "cc_Sprite": {
+        return "el-icon-picture-outline";
       }
-      case 'cc_Label': {
-        return 'el-icon-third-text';
+      case "cc_Label": {
+        return "el-icon-third-text";
       }
-      case 'cc_Node': {
-        return 'el-icon-third-node'
+      case "cc_Node": {
+        return "el-icon-third-node"
       }
     }
-    return 'el-icon-third-unknow';
+    return "el-icon-third-unknow";
   }
 
   getName(isArray: boolean, arr: UiProp) {
@@ -232,7 +238,7 @@ export default class UiProp extends Vue {
     try {
       return JSON.stringify(this.value.data)
     } catch (e) {
-      return ''
+      return ""
     }
   }
 
@@ -267,7 +273,7 @@ export default class UiProp extends Vue {
   colorReverse(OldColorValue: string) {
     OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
     var str = "000000" + (0xFFFFFF - parseInt(OldColorValue)).toString(16);
-    return '#' + str.substring(str.length - 6, str.length);
+    return "#" + str.substring(str.length - 6, str.length);
   }
 
   _onSelect() {
@@ -331,9 +337,19 @@ export default class UiProp extends Vue {
       }
 
       .text {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         user-select: none;
         font-size: 12px;
         margin: 3px;
+
+        span{
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
     }
 
@@ -419,9 +435,6 @@ export default class UiProp extends Vue {
               display: block;
               margin-right: 5px;
               flex: unset;
-
-              .text {
-              }
             }
           }
         }