From 459bd643e69a7843d1c9f903536fd676cacd9256 Mon Sep 17 00:00:00 2001
From: xuyanfeng <xu_yanfeng@126.com>
Date: Thu, 17 Jun 2021 22:35:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BAObject?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/src/devtools/data.ts       |  7 ++++++
 source/src/devtools/inject.ts     | 40 ++++++++++++++++++++++++-------
 source/src/devtools/propertys.vue |  7 ++++--
 source/src/devtools/ui-prop.vue   | 33 ++++++++++++++++++-------
 4 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/source/src/devtools/data.ts b/source/src/devtools/data.ts
index 3c3c897..dc87c7c 100644
--- a/source/src/devtools/data.ts
+++ b/source/src/devtools/data.ts
@@ -42,10 +42,17 @@ export class ArrayData extends Info {
 }
 
 export class ObjectData extends Info {
+  data: Array<Property> = [];
+
   constructor() {
     super();
     this.type = DataType.Object;
   }
+
+  add(info: Property) {
+    this.data.push(info);
+    return this;
+  }
 }
 
 export class NullOrUndefinedData extends Info {
diff --git a/source/src/devtools/inject.ts b/source/src/devtools/inject.ts
index d9c7861..67ef2ec 100644
--- a/source/src/devtools/inject.ts
+++ b/source/src/devtools/inject.ts
@@ -276,15 +276,17 @@ class CCInspector {
           let hex = propertyValue.toHEX();
           info = new ColorData(`#${hex}`);
         } else if (Array.isArray(propertyValue)) {
-          info = new ArrayData();
+          let keys = [];
           for (let i = 0; i < propertyValue.length; i++) {
-            let propPath = path.concat(i.toString());
-            let itemData = this._genInfoData(propertyValue, i.toString(), propPath);
-            if (itemData) {
-              info.add(new Property(i.toString(), itemData));
-            }
+            keys.push(i);
           }
-        } else if (propertyValue instanceof Object) {
+          info = this._buildObjectOrArrayData({
+            data: new ArrayData(),
+            path: path,
+            value: propertyValue,
+            keys: keys,
+          })
+        } else {
           !info && (info = this._buildVecData({
             // @ts-ignore
             ctor: cc.Vec3,
@@ -308,8 +310,12 @@ class CCInspector {
             path: path,
             value: propertyValue,
           }))
-          !info && (info = new ObjectData());
-        } else {
+          !info && (info = this._buildObjectOrArrayData({
+            data: new ObjectData(),
+            path: path,
+            value: propertyValue,
+            keys: Object.keys(propertyValue),
+          }));
         }
         break;
     }
@@ -322,6 +328,22 @@ class CCInspector {
     return info;
   }
 
+  _buildObjectOrArrayData(options: any) {
+    let propertyValue: Object = options.value;
+    let path: Array<string> = options.path;
+    let data: ObjectData | ArrayData = options.data;
+    let keys: Array<string> = options.keys;
+    for (let i = 0; i < keys.length; i++) {
+      let key = keys[i];
+      let propPath = path.concat(key.toString());
+      let itemData = this._genInfoData(propertyValue, key, propPath);
+      if (itemData) {
+        data.add(new Property(key.toString(), itemData))
+      }
+    }
+    return data;
+  }
+
   _getGroupData(node: any) {
     let nodeGroup = new Group(node.constructor.name);
     let keys = this._getNodeKeys(node);
diff --git a/source/src/devtools/propertys.vue b/source/src/devtools/propertys.vue
index 8d9cad9..bb070b6 100644
--- a/source/src/devtools/propertys.vue
+++ b/source/src/devtools/propertys.vue
@@ -2,8 +2,10 @@
   <div id="prop">
     <div v-for="(group, index) in allGroup" :key="index" class="group">
       <div class="header" @click="onClickHeader(group)">
-        <i v-if="group.fold" class="el-icon-caret-right"></i>
-        <i v-if="!group.fold" class="el-icon-caret-bottom"></i>
+        <div style="margin: 0 5px;">
+          <i v-if="group.fold" class="el-icon-caret-right"></i>
+          <i v-if="!group.fold" class="el-icon-caret-bottom"></i>
+        </div>
         {{ group.name }}
       </div>
       <div class="content" v-show="!group.fold">
@@ -59,6 +61,7 @@ export default class properties extends Vue {
       })
     }
   }
+
   _evalCode(code: string) {
     if (chrome && chrome.devtools) {
       chrome.devtools.inspectedWindow.eval(code);
diff --git a/source/src/devtools/ui-prop.vue b/source/src/devtools/ui-prop.vue
index 78afc4a..b2dd6a2 100644
--- a/source/src/devtools/ui-prop.vue
+++ b/source/src/devtools/ui-prop.vue
@@ -1,11 +1,14 @@
 <template>
   <div id="ui-prop">
     <div class="normal-data" style="display: flex;flex-direction: row;align-items: center;min-height: 30px;margin: 0;">
-      <div @mousedown="onPropNameMouseDown" class="key" @click="onClickFold">
-        <i class=" data-arrow"
+      <div @mousedown="onPropNameMouseDown" class="key"
+           @click="onClickFold"
+           :style="{'cursor':isArrayOrObject()?'pointer':''}"
+      >
+        <i class="data-arrow"
            v-if="arrow"
            :class="fold?'el-icon-caret-right':'el-icon-caret-bottom'"
-           :style="{'visibility':isArray()?'visible':'hidden','margin-left':indent*10+'px'}">
+           :style="{'visibility':isArrayOrObject()?'visible':'hidden','margin-left':indent*10+'px'}">
         </i>
         <div class="text">{{ name }}</div>
       </div>
@@ -88,13 +91,14 @@
         </div>
       </div>
     </div>
-    <div v-if="isArray()">
+    <div v-if="isArrayOrObject()">
       <div v-show="!fold" style="display: flex;flex-direction: column;">
         <ui-prop v-for="(arr,index) in value.data"
                  :key="index"
                  :indent="indent+1"
                  :value="arr.value"
-                 :name="'['+arr.name+']'">
+                 :name="getName(isArray(),arr)"
+        >
         </ui-prop>
       </div>
     </div>
@@ -105,9 +109,9 @@
 
 import Vue from "vue"
 import {Component, Prop} from "vue-property-decorator"
-import {DataType, Info, NullOrUndefinedData, Vec2Data, Vec3Data} from './data'
+import {DataType, Info} from './data'
 import {connectBackground} from "@/devtools/connectBackground";
-import {Msg, Page, PluginEvent} from "@/core/types";
+import {Msg} from "@/core/types";
 
 @Component({
   components: {}
@@ -162,6 +166,10 @@ export default class UiProp extends Vue {
     return this.value && (this.value.type === DataType.Array || this.value.type === DataType.Object)
   }
 
+  isObject() {
+    return this.value && (this.value.type === DataType.Object)
+  }
+
   isArray() {
     return this.value && (this.value.type === DataType.Array)
   }
@@ -173,6 +181,15 @@ export default class UiProp extends Vue {
   created() {
   }
 
+  getName(isArray: boolean, arr: UiProp) {
+    const type = arr.value.type;
+    if (isArray) {
+      return `[${arr.name}]`
+    } else {
+      return arr.name;
+    }
+  }
+
   private fold = false;
 
   onClickFold() {
@@ -250,7 +267,7 @@ export default class UiProp extends Vue {
 <style scoped lang="less">
 #ui-prop {
   min-height: 30px;
-  margin: 0;
+  margin: 1px 0;
   display: flex;
   flex-direction: column;
   justify-content: center;