优化

source/src/devtools/ccType/NodeBaseProperty.vue

@@ -20,7 +20,6 @@ import Vue from "vue"
 
 import {Component, Prop, Watch} from "vue-property-decorator"
 import UiProp from "./ui-prop.vue"
-import {DataType, testData} from "../data";
 
 @Component({
   components: {UiProp},
@@ -28,7 +27,7 @@ import {DataType, testData} from "../data";
 export default class NodeBaseProperty extends Vue {
   name: string = "node-base"
 
-  @Prop({default: () => testData,})
+  @Prop({default: () => [],})
   allGroup: Array<Record<string, any>> | undefined;
 
   onClickHeader(group: any) {

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

@@ -4,7 +4,7 @@
       <div class="text">{{ name }}</div>
     </div>
     <div class="value">
-      <el-input v-if="isString()" v-model="value.data"></el-input>
+      <el-input v-if="isString()" v-model="value.data" @change="onChangeValue"></el-input>
       <el-input v-if="isText()"
                 type="textarea"
                 :autosize="{minRows:3,maxRows:5}"
@@ -118,7 +118,42 @@ export default class UiProp extends Vue {
   }
 
   onShowValueInConsole() {
-    console.log(this.value.data)
+    if (Array.isArray(this.value.path)) {
+      let uuid = this.value.path[0];
+      let key = this.value.path[1]; // todo 暂时只支持一级key
+      if (uuid && key) {
+        chrome.devtools.inspectedWindow.eval(`window.ccinspector.logValue('${uuid}','${key}')`)
+      }
+    }
+  }
+
+  onChangeValue() {
+    window.postMessage({a: 1, b: 2}, '*')
+    return
+    if (Array.isArray(this.value.path)) {
+      let uuid = this.value.path[0];
+      let key = this.value.path[1]; // todo 暂时只支持一级key
+      if (uuid && key && this.value.hasOwnProperty('data')) {
+        let cmd = null;
+        let data = this.value.data;
+        switch (this.value.type) {
+          case DataType.Number:
+            cmd = `window.ccinspector.setValue('${uuid}','${key}', ${data})`;
+            break
+          case DataType.Bool:
+            cmd = `window.ccinspector.setValue('${uuid}','${key}', ${data})`;
+            break;
+          case DataType.String:
+          case DataType.Text:
+            cmd = `window.ccinspector.setValue('${uuid}','${key}', '${data}')`;
+            break
+        }
+        if (cmd) {
+          chrome.devtools.inspectedWindow.eval(cmd)
+        } else {
+        }
+      }
+    }
   }
 
   @Prop({default: 1})
@@ -183,6 +218,7 @@ export default class UiProp extends Vue {
     display: flex;
     flex-direction: row;
     align-items: center;
+    min-width: 90px;
 
     .text {
       user-select: none;
@@ -197,6 +233,7 @@ export default class UiProp extends Vue {
     text-align: left;
     height: 100%;
     overflow: hidden;
+    min-width: 400px;
 
     .color {
       position: relative;
@@ -221,6 +258,14 @@ export default class UiProp extends Vue {
         margin-top: 0;
         margin-bottom: 0;
         margin-right: 20px;
+
+        .value {
+          min-width: 100px;
+        }
+
+        .key {
+          min-width: 20px;
+        }
       }
 
       #ui-prop:last-child {
@@ -229,7 +274,7 @@ export default class UiProp extends Vue {
     }
 
     .array-object {
-      flex:1;
+      flex: 1;
       max-width: 100%;
       overflow: hidden;
       display: flex;
@@ -237,7 +282,7 @@ export default class UiProp extends Vue {
       align-items: center;
 
       .text {
-        flex:1;
+        flex: 1;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

source/src/devtools/data.ts

@@ -15,6 +15,7 @@ export enum DataType {
 class Info {
   public type: DataType = DataType.Number;
   public data: any;
+  public path: Array<string> = [];// 属性对应的路径
 }
 
 export class TextData extends Info {
@@ -151,8 +152,9 @@ class CompInfo {
 export const testData = [
   {
     name: "group1",
+    uuid: 'node/comp uuid',
     data: [
-      {name: "uuid", value: {type: DataType.String, data: 'abc'}},
+      {name: "uuid", value: {type: DataType.String, data: 'abc', path: 'uuid'}},
       {name: "opacity", value: {type: DataType.Number, data: 100}},
 
       {

source/src/devtools/global.less

@@ -11,3 +11,8 @@
     }
   }
 }
+.el-input{
+  input{
+    text-align: left !important;
+  }
+}

source/src/devtools/index.vue

@@ -37,9 +37,6 @@
 </template>
 
 <script lang="ts">
-// import injectScript from '../injectScript.js'
-// import EvalCode from "./evalCodeString.js";
-
 import Vue from "vue";
 import {Component, Prop} from "vue-property-decorator";
 import SceneProperty from "@/devtools/ccType/SceneProperty.vue";
@@ -54,7 +51,7 @@ const PluginMsg = require("../core/plugin-msg");
   }
 })
 export default class Index extends Vue {
-  private isShowDebug: boolean = true;
+  private isShowDebug: boolean = false;
   treeItemData: Array<Record<string, any>> = [];
   treeData: Array<Record<string, any>> = []
   bgConn: chrome.runtime.Port | null = null// 与background.js的链接
@@ -213,6 +210,7 @@ export default class Index extends Vue {
     display: flex;
     flex: 1;
     flex-direction: row;
+    overflow: hidden;
 
     .left {
       display: flex;
@@ -230,7 +228,7 @@ export default class Index extends Vue {
         height: 100%;
         border-radius: 4px;
         min-height: 20px;
-        overflow: scroll;
+        overflow: auto;
         width: 300px;
 
 
@@ -251,7 +249,19 @@ export default class Index extends Vue {
     .right {
       flex: 1;
       background: #e5e9f2;
-      overflow: scroll;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 0;
+        background: #999;
+        border-radius: 2px;
+        height: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #333;
+        border-radius: 2px;
+      }
     }
   }
 }

source/src/inject.js

@@ -90,7 +90,11 @@ let cc_inspector = {
   },
   _getNodeKeys(node) {
     let keys = [];
-    let excludeProperty = ["children", "quat", "node"];
+    let excludeProperty = [
+      "children", "quat", "node",
+      // 生命周期函数
+      "onFocusInEditor", "onRestore", "start", "lateUpdate", "update", "resetInEditor", "onLostFocusInEditor",
+    ];
     for (let key in node) {
       if (!key.startsWith("_") &&
           !excludeProperty.includes(key) &&
@@ -117,7 +121,7 @@ let cc_inspector = {
     }
     return null;
   },
-  _genInfoData(propertyValue) {
+  _genInfoData(propertyValue, path) {
     let info = null;
     switch (typeof propertyValue) {
       case "boolean":
@@ -132,19 +136,22 @@ let cc_inspector = {
       default:
         if (propertyValue == null || typeof propertyValue === "undefined") {
           info = new NullOrUndefinedData();
+        } else if (propertyValue instanceof cc.Color) {
+          let hex = propertyValue.toHEX();
+          info = new ColorData(`#${hex}`);
         } else if (Array.isArray(propertyValue)) {
           info = new ArrayData();
         } else if (propertyValue instanceof Object) {
           info = new ObjectData();
-        } else if (propertyValue instanceof cc.Color) {
-          let hex = propertyValue.toHEX();
-          info = new ColorData(`#${hex}`);
         } else {
         }
         break;
     }
-    if (!info) {
+    if (info) {
+      info.path = path;
+    } else {
       console.error(`暂不支持的属性值`, propertyValue);
+
     }
     return info;
   },
@@ -173,7 +180,8 @@ let cc_inspector = {
         }
         pairValues.forEach(el => {
           if (el in node) {
-            let vecData = this._genInfoData(node[el]);
+            let propertyPath = [node.uuid, el];
+            let vecData = this._genInfoData(node[el], propertyPath);
             if (vecData) {
               info.add(new Property(el, vecData));
             }
@@ -186,7 +194,8 @@ let cc_inspector = {
           nodeGroup.addProperty(property);
         }
       } else {
-        let info = this._genInfoData(propertyValue);
+        let propertyPath = [node.uuid, key];
+        let info = this._genInfoData(propertyValue, propertyPath);
         if (info) {
           nodeGroup.addProperty(new Property(key, info));
         }
@@ -196,7 +205,6 @@ let cc_inspector = {
   },
   // 获取节点信息
   getNodeInfo(uuid) {
-    debugger
     let node = this.inspectorGameMemoryStorage[uuid];
     if (node) {
       let groupData = [];
@@ -217,7 +225,18 @@ let cc_inspector = {
       console.log("未获取到节点数据");
     }
   },
-
+  logValue(uuid, key) {
+    let nodeOrComp = this.inspectorGameMemoryStorage[uuid];
+    if (nodeOrComp) {
+      console.log(nodeOrComp[key]);
+    }
+  },
+  setValue(uuid, key, value) {
+    let nodeOrComp = this.inspectorGameMemoryStorage[uuid];
+    if (nodeOrComp && key in nodeOrComp) {
+      nodeOrComp[key] = value;
+    }
+  },
   sendMsgToDevTools(msg, data) {
     // 发送给content.js处理
     window.postMessage({msg: msg, data: data}, "*");
@@ -238,6 +257,9 @@ let cc_inspector = {
     });
   }
 };
+window.addEventListener("message", (a, b, c) => {
+  console.log(a, b, c);
+});
 window.ccinspector = window.ccinspector || cc_inspector;
 window.ccinspector.init && window.ccinspector.init();// 执行初始化函数