增加imageData类型的支持

.gitignore

@@ -2,3 +2,4 @@
 CocosCreatorInspector/src/build
 /source/artifacts/
 /cc-inspector-v1.2/
+/test/

source/src/devtools/data.ts

@@ -10,6 +10,7 @@ export enum DataType {
   NullOrUndefined,
   Array, // 暂时在控制台打印下
   Object,
+  Image, // 图片
 }
 
 export class Info {
@@ -112,6 +113,17 @@ export class Vec3Data extends Info {
   }
 }
 
+export class ImageData extends Info {
+  data: string | null = null;
+
+  constructor() {
+    super();
+    this.type = DataType.Image;
+    this.data = null;
+    return this;
+  }
+}
+
 export class EnumData extends Info {
   constructor() {
     super();

source/src/devtools/inject.ts

@@ -4,7 +4,7 @@ import {
   BoolData,
   ColorData,
   DataType,
-  Group,
+  Group, ImageData,
   Info,
   NullOrUndefinedData,
   NumberData,
@@ -239,6 +239,22 @@ class CCInspector {
     return null;
   }
 
+  _buildImageData(options: any) {
+    const ctor: Function = options.ctor;
+    const value: Object = options.value;
+    const data: ImageData = options.data;
+    const path: Array<string> = options.path;
+    if (ctor && value instanceof ctor) {
+      if (value.hasOwnProperty('_textureFilename')) {
+        data.path = path;
+        //@ts-ignore
+        data.data = `${window.location.origin}/${value._textureFilename}`;
+        return data;
+      }
+    }
+    return null;
+  }
+
   _genInfoData(node: any, key: string, path: any) {
     let propertyValue = node[key];
     let info = null;
@@ -278,6 +294,13 @@ class CCInspector {
             keys: ['x', 'y'],
             value: propertyValue
           }))
+          !info && (info = this._buildImageData({
+            //@ts-ignore
+            ctor: cc.SpriteFrame,
+            data: new ImageData(),
+            path: path,
+            value: propertyValue,
+          }))
           !info && (info = new ObjectData());
         } else {
         }
@@ -288,7 +311,6 @@ class CCInspector {
       info.path = path;
     } else {
       console.error(`暂不支持的属性值`, propertyValue);
-
     }
     return info;
   }

source/src/devtools/inject/log.ts

@@ -0,0 +1,5 @@
+// const _warn = console.warn;
+// console.warn = function () {
+//   // @ts-ignore
+//   return _warn.apply(console, arguments);
+// }

source/src/devtools/ui-prop.vue

@@ -59,7 +59,17 @@
         <div class="text">
           {{ valueString() }}
         </div>
-        <el-button @click="onShowValueInConsole"> 点击在控制台打印显示</el-button>
+        <el-button @click="onShowValueInConsole">log</el-button>
+      </div>
+      <div v-if="isImage()" class="image-property">
+        <el-popover v-if="isImage()" placement="top" trigger="hover">
+          <!--          会有一个undefined的错误-->
+          <el-image v-if="isImage()" style="width: 100px;height: 100px" fit="contain" :src="value.data"></el-image>
+          <img :src="value.data" slot="reference" style="height: 36px;" alt="图片">
+        </el-popover>
+        <div style="flex:1;display: flex; flex-direction: row-reverse;">
+          <el-button @click="onShowValueInConsole">log</el-button>
+        </div>
       </div>
       <div class="slot">
         <slot></slot>
@@ -124,6 +134,10 @@ export default class UiProp extends Vue {
     return this.value && (this.value.type === DataType.Array || this.value.type === DataType.Object)
   }
 
+  isImage() {
+    return this.value && (this.value.type === DataType.Array || this.value.type === DataType.Image)
+  }
+
   created() {
   }
 
@@ -284,6 +298,14 @@ export default class UiProp extends Vue {
       }
     }
 
+    .image-property {
+      display: flex;
+      flex-direction: row;
+      align-content: center;
+      align-items: center;
+      height: 36px;
+    }
+
     .slot {
       display: flex;
       width: 100%;