更新属性

source/.eslintrc.js

@@ -42,5 +42,6 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "off",
     "no-prototype-builtins": "off",
     "@typescript-eslint/ban-ts-comment": "off",
+    "no-inner-declarations":"off",
   }
 };

source/src/core/types.ts

@@ -15,6 +15,7 @@ export enum Msg {
   TabsInfo = "tabs_info", // 当前页面信息
   UrlChange = "url_change", // 网址发生变化
   SetProperty = "set-property", // 设置node属性
+  UpdateProperty = 'update-property', // 更新属性
 }
 
 export class PluginEvent {

source/src/devtools/connectBackground.ts

@@ -1,4 +1,4 @@
-import {PluginEvent, Page} from "@/core/types";
+import {PluginEvent, Page, Msg} from "@/core/types";
 
 class ConnectBackground {
   connect: chrome.runtime.Port | null = null;
@@ -21,9 +21,10 @@ class ConnectBackground {
     }
   }
 
-  postMessageToBackground(data: PluginEvent) {
+  postMessageToBackground(msg: Msg, data?: any ) {
     if (this.connect) {
-      this.connect.postMessage(data)
+      let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data)
+      this.connect.postMessage(sendData)
     } else {
       console.warn('没有和background建立链接')
     }

source/src/devtools/data.ts

@@ -12,7 +12,7 @@ export enum DataType {
   Object,
 }
 
-class Info {
+export class Info {
   public type: DataType = DataType.Number;
   public data: any;
   public path: Array<string> = [];// 属性对应的路径
@@ -113,7 +113,12 @@ export class EnumData extends Info {
     super();
     this.type = DataType.Enum;
   }
+}
 
+export class TreeData {
+  uuid: string = '';
+  name: string = '';
+  children: Array<TreeData> = [];
 }
 
 export class Property {
@@ -139,16 +144,6 @@ export class Group {
   }
 }
 
-class NodeInfo {
-  public type: string = ''; // 类型
-
-
-}
-
-class CompInfo {
-
-}
-
 export const testData = [
   {
     name: "group1",

source/src/devtools/index.vue

@@ -45,9 +45,9 @@
 import Vue from "vue";
 import {Component} from "vue-property-decorator";
 import properties from "./propertys.vue";
-import { NodeData} from "@/devtools/type";
 import {Msg, Page, PluginEvent} from '@/core/types'
 import {connectBackground} from "@/devtools/connectBackground";
+import {Info, TreeData} from "@/devtools/data";
 
 @Component({
   components: {
@@ -57,7 +57,7 @@ import {connectBackground} from "@/devtools/connectBackground";
 export default class Index extends Vue {
   private isShowDebug: boolean = false;
   treeItemData: Array<Record<string, any>> = [];
-  treeData: Array<NodeData> = []
+  treeData: Array<TreeData> = []
   expandedKeys: Array<string> = [];
   selectedUUID: string | null = null;
 
@@ -84,7 +84,7 @@ export default class Index extends Vue {
     }, false);
   }
 
-  _onMsgListInfo(eventData: Array<NodeData>) {
+  _onMsgListInfo(eventData: Array<TreeData>) {
     this.isShowDebug = true;
     if (!Array.isArray(eventData)) {
       eventData = [eventData]
@@ -111,7 +111,7 @@ export default class Index extends Vue {
     this.memory = eventData;
   }
 
-  _onMsgSupport(data:boolean) {
+  _onMsgSupport(data: boolean) {
     this.isShowDebug = data;
     if (data) {
       // 如果节点树为空，就刷新一次
@@ -143,7 +143,7 @@ export default class Index extends Vue {
             break;
           }
           case Msg.TreeInfo: {
-            this._onMsgListInfo(eventData as Array<NodeData>);
+            this._onMsgListInfo(eventData as Array<TreeData>);
             break;
           }
           case Msg.Support: {
@@ -158,6 +158,10 @@ export default class Index extends Vue {
             this._onMsgMemory(eventData)
             break;
           }
+          case Msg.UpdateProperty: {
+            this._updateProperty(eventData)
+            break;
+          }
           case Msg.TabsInfo: {
             debugger
             break
@@ -165,10 +169,33 @@ export default class Index extends Vue {
         }
       }
     });
+  }
+
+  _updateProperty(data: Info) {
+    const uuid = data.path[0];
+    const key = data.path[1];
+    const value = data.data;
+    if (key === 'name') {
+      let treeArray: Array<TreeData> = [];
+
+      function circle(array: Array<TreeData>) {
+        array.forEach(item => {
+          treeArray.push(item);
+          circle(item.children);
+        })
+      }
+
+      // 更新指定uuid节点的tree的name
+      circle(this.treeData)
+      let ret = treeArray.find(el => el.uuid === uuid);
+      if (ret) {
+        ret.name = value;
+      }
+    }
 
   }
 
-  handleNodeClick(data: NodeData) {
+  handleNodeClick(data: TreeData) {
     this.selectedUUID = data.uuid;
     // todo 去获取节点信息
     // console.log(data);
@@ -194,8 +221,7 @@ export default class Index extends Vue {
       console.log("环境异常，无法执行函数");
       return;
     }
-    let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data)
+    connectBackground.postMessageToBackground(msg, data);
-    connectBackground.postMessageToBackground(sendData);
   }
 
   // 问题：没有上下文的权限，只能操作DOM
@@ -231,13 +257,13 @@ export default class Index extends Vue {
     this.runToContentScript(Msg.MemoryInfo);
   }
 
-  onNodeExpand(data: NodeData) {
+  onNodeExpand(data: TreeData) {
     if (data.hasOwnProperty('uuid') && data.uuid) {
       this.expandedKeys.push(data.uuid)
     }
   }
 
-  onNodeCollapse(data: NodeData) {
+  onNodeCollapse(data: TreeData) {
     if (data.hasOwnProperty('uuid')) {
       let index = this.expandedKeys.findIndex(el => el === data.uuid);
       if (index !== -1) {

source/src/devtools/inject.ts

@@ -2,12 +2,12 @@
 import {
   ArrayData,
   BoolData,
-  ColorData,
+  ColorData, DataType,
-  Group,
+  Group, Info,
   NullOrUndefinedData,
   NumberData, ObjectData,
   Property,
-  StringData,
+  StringData, TreeData,
   Vec2Data,
   Vec3Data
 } from "./data";
@@ -43,17 +43,52 @@ class CCInspector {
             break;
           }
           case Msg.TreeInfo: {
-            debugger
             this.updateTreeInfo();
             break;
           }
           case Msg.NodeInfo: {
-            debugger
             let nodeUUID = pluginEvent.data;
             this.getNodeInfo(nodeUUID);
             break;
           }
           case Msg.SetProperty: {
+            const data: Info = pluginEvent.data;
+            // path的设计有优化空间
+            const uuid = data.path[0];
+            const key = data.path[1];
+            const value = data.data;
+            if (uuid && key) {
+              this.setValue(uuid, key, value);
+              this.sendMsgToContent(Msg.UpdateProperty, data);
+              // 修改完毕后同步数据，目前是全部重刷，后续优化下
+              // this.updateTreeInfo();
+              // this.getNodeInfo(uuid);
+            }
+            break;
+            switch (data.type) {
+              case DataType.Number:
+                break;
+              case DataType.String:
+                break;
+              case DataType.Text:
+                break;
+              case DataType.Vec2:
+                break;
+              case DataType.Vec3:
+                break;
+              case DataType.Enum:
+                break;
+              case DataType.Bool:
+                break;
+              case DataType.Color:
+                break;
+              case DataType.NullOrUndefined:
+                break;
+              case DataType.Array:
+                break;
+              case DataType.Object:
+                break;
+            }
             debugger;
             break;
           }
@@ -77,18 +112,9 @@ class CCInspector {
       //@ts-ignore
       let scene = cc.director.getScene();
       if (scene) {
-        let sendData = {
+        let treeData = new TreeData();
-          uuid: scene.uuid,
+        this.getNodeChildren(scene, treeData)
-          name: scene.name,
+        this.sendMsgToContent(Msg.TreeInfo, treeData);
-          children: [],
-        };
-        this.inspectorGameMemoryStorage[scene.uuid] = scene;
-        let sceneChildren = scene.getChildren();
-        for (let i = 0; i < sceneChildren.length; i++) {
-          let node = sceneChildren[i];
-          this.getNodeChildren(node, sendData.children);
-        }
-        this.sendMsgToContent(Msg.TreeInfo, sendData);
       } else {
         this.sendMsgToContent(Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
       }
@@ -98,19 +124,17 @@ class CCInspector {
   }
 
   // 收集节点信息
-  getNodeChildren(node: any, data: Array<any>) {
+  getNodeChildren(node: any, data: TreeData) {
-    let nodeData = {
+    data.uuid = node.uuid;
-      uuid: node.uuid,
+    data.name = node.name;
-      name: node.name,
-      children: [],
-    };
     this.inspectorGameMemoryStorage[node.uuid] = node;
     let nodeChildren = node.getChildren();
     for (let i = 0; i < nodeChildren.length; i++) {
       let childItem = nodeChildren[i];
-      this.getNodeChildren(childItem, nodeData.children);
+      let treeData = new TreeData();
+      this.getNodeChildren(childItem, treeData);
+      data.children.push(treeData)
     }
-    data.push(nodeData);
   }
 
   _isCocosGame() {
@@ -285,9 +309,22 @@ class CCInspector {
   setValue(uuid: string, key: string, value: string) {
     let nodeOrComp = this.inspectorGameMemoryStorage[uuid];
     if (nodeOrComp && key in nodeOrComp) {
+      debugger
+      function circleFind(base: Object): boolean {
+        let obj = Object.getPrototypeOf(base);
+        let ret = Object.getOwnPropertyDescriptor(obj, key)
+        if (ret && ret.set) {
+          return true;
+        } else {
+          return circleFind(obj)
+        }
+      }
+
+      if (circleFind(nodeOrComp)) {
         nodeOrComp[key] = value;
       }
     }
+  }
 
 
   onMemoryInfo() {

source/src/devtools/type.ts

@@ -1,10 +0,0 @@
-export class NodeData {
-  uuid: string | null = null;
-  name: string = '';
-  children: Array<NodeData> = []
-}
-
-
-
-
-

source/src/devtools/ui-prop.vue

@@ -9,13 +9,14 @@
                 type="textarea"
                 :autosize="{minRows:3,maxRows:5}"
                 placeholder="请输入内容"
-
+                @change="onChangeValue"
                 v-model="value.data">
       </el-input>
       <el-input-number v-if="isNumber()"
                        style="width: 100%;text-align: left"
                        v-model="value.data"
                        :step="step"
+                       @change="onChangeValue"
                        controls-position="right"
       ></el-input-number>
 
@@ -27,16 +28,16 @@
 
         </ui-prop>
       </div>
-      <el-select v-model="value.data" v-if="isEnum()" style="width: 100%;">
+      <el-select v-model="value.data" v-if="isEnum()" style="width: 100%;" @change="onChangeValue">
         <el-option v-for="(opt, index) in value.values"
                    :key="index"
                    :label="opt.name"
                    :value="opt.value">
         </el-option>
       </el-select>
-      <el-checkbox v-model="value.data" v-if="isBool()"></el-checkbox>
+      <el-checkbox v-model="value.data" v-if="isBool()" @change="onChangeValue"></el-checkbox>
       <div class="color" v-if="isColor()">
-        <el-color-picker style="position: absolute;" v-model="value.data"></el-color-picker>
+        <el-color-picker style="position: absolute;" v-model="value.data" @change="onChangeValue"></el-color-picker>
         <div class="hex" :style="{color:colorReverse(value.data)}">{{ value.data }}</div>
       </div>
       <div v-if="isArrayOrObject()" class="array-object">
@@ -56,7 +57,9 @@
 
 import Vue from "vue"
 import {Component, Prop} from "vue-property-decorator"
-import {DataType} from './data'
+import {DataType, Info, NullOrUndefinedData, Vec2Data, Vec3Data} from './data'
+import {connectBackground} from "@/devtools/connectBackground";
+import {Msg, Page, PluginEvent} from "@/core/types";
 
 @Component({
   components: {}
@@ -68,7 +71,7 @@ export default class UiProp extends Vue {
 
 
   @Prop()
-  value: Record<string, any> | undefined | any;
+  value!: Info;
 
   isString() {
     return this.value && (this.value.type === DataType.String);
@@ -122,38 +125,13 @@ export default class UiProp extends Vue {
       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}')`)
+        chrome.devtools.inspectedWindow.eval(`window.CCInspector.logValue('${uuid}','${key}')`)
       }
     }
   }
 
   onChangeValue() {
-    window.postMessage({a: 1, b: 2}, '*')
+    connectBackground.postMessageToBackground(Msg.SetProperty, this.value);
-    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})