处理无效的数据

source/src/devtools/data.ts

@@ -10,7 +10,7 @@ export enum DataType {
   Enum,
   Bool,
   Color,
-  NullOrUndefined,
+  Invalid,
   Array, // 暂时在控制台打印下
   Object,
   ObjectItem,
@@ -78,11 +78,13 @@ export class ObjectData extends Info {
   }
 }
 
-export class NullOrUndefinedData extends Info {
-  constructor() {
-    super();
-    this.type = DataType.NullOrUndefined;
+export class InvalidData extends Info {
+  data: any;
 
+  constructor(data: any) {
+    super();
+    this.data = data;
+    this.type = DataType.Invalid;
   }
 }
 

source/src/devtools/ui/index.vue

@@ -195,7 +195,7 @@ export default class Index extends Vue {
         return;
       }
       if (data.target === Page.Devtools) {
-        console.log(`[Devtools] ${JSON.stringify(data)}`);
+        console.log("[Devtools]", data);
         PluginEvent.finish(data);
         let eventData: any = data.data;
         switch (data.msg) {

source/src/devtools/ui/ui-prop.vue

@@ -19,6 +19,9 @@
 
       </div>
       <div class="value">
+        <div v-if="isInvalid()" class="invalid">
+          {{ getInvalidDisplayText() }}
+        </div>
         <el-input v-if="isString()" v-model="value.data"
                   :disabled="value.readonly"
                   @change="onChangeValue">
@@ -155,6 +158,30 @@ export default class UiProp extends Vue {
     }
   }
 
+  isInvalid() {
+    return this.value && (this.value.type === DataType.Invalid);
+  }
+
+  getInvalidDisplayText() {
+    if (this.isInvalid()) {
+      const data = this.value.data;
+      switch (data) {
+        case undefined: {
+          return "undefined"
+        }
+        case null: {
+          return "null"
+        }
+        case Infinity: {
+          return "Infinity"
+        }
+        default: {
+          return `未知的无效数据：${data}`
+        }
+      }
+    }
+  }
+
   isString() {
     return this.value && (this.value.type === DataType.String);
   }
@@ -403,6 +430,10 @@ export default class UiProp extends Vue {
         }
       }
 
+      .invalid {
+        color: grey;
+      }
+
       .objectDesc {
         white-space: nowrap;
         overflow: hidden;

source/src/inject/index.ts

@@ -8,7 +8,7 @@ import {
   Group,
   ImageData,
   Info,
-  NullOrUndefinedData,
+  InvalidData,
   NumberData,
   ObjectData, ObjectItemRequestData,
   Property,
@@ -282,8 +282,8 @@ class CCInspector {
         info = new StringData(propertyValue);
         break;
       default:
-        if (propertyValue == null || typeof propertyValue === "undefined") {
-          info = new NullOrUndefinedData();
+        if (this._isInvalidValue(propertyValue)) {
+          info = new InvalidData(propertyValue);
           //@ts-ignore
         } else if (propertyValue instanceof cc.Color) {
           let hex = propertyValue.toHEX();
@@ -388,6 +388,10 @@ class CCInspector {
     return keys.filter(key => !key.toString().startsWith("_"));
   }
 
+  _isInvalidValue(value: any) {
+    return value === null || value === Infinity || value === undefined;
+  }
+
   _buildObjectData({value, path, data, filterKey}: BuildObjectOptions) {
     let keys = Object.keys(value);
     if (filterKey) {
@@ -406,6 +410,8 @@ class CCInspector {
 
         })
         keyDesc = `(${propValue.length}) [...]`
+      } else if (this._isInvalidValue(propValue)) { // 不能改变顺序
+        keyDesc = propValue;
       } else if (typeof propValue === "object") {
         keyDesc = `${propValue.constructor.name} {...}`;
       } else {