diff --git a/CocosCreatorInspector/img.png b/CocosCreatorInspector/img.png new file mode 100644 index 0000000..17562b6 Binary files /dev/null and b/CocosCreatorInspector/img.png differ diff --git a/source/.eslintrc.js b/source/.eslintrc.js index a3b2aee..0822ac6 100644 --- a/source/.eslintrc.js +++ b/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", } }; diff --git a/source/src/core/types.ts b/source/src/core/types.ts index 2c9ab81..4fd118b 100644 --- a/source/src/core/types.ts +++ b/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 { diff --git a/source/src/devtools/connectBackground.ts b/source/src/devtools/connectBackground.ts index bdd8f87..f74e24d 100644 --- a/source/src/devtools/connectBackground.ts +++ b/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建立链接') } diff --git a/source/src/devtools/data.ts b/source/src/devtools/data.ts index 6fe20ce..93aee58 100644 --- a/source/src/devtools/data.ts +++ b/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 = [];// 属性对应的路径 @@ -113,7 +113,12 @@ export class EnumData extends Info { super(); this.type = DataType.Enum; } +} +export class TreeData { + uuid: string = ''; + name: string = ''; + children: Array = []; } export class Property { @@ -139,16 +144,6 @@ export class Group { } } -class NodeInfo { - public type: string = ''; // 类型 - - -} - -class CompInfo { - -} - export const testData = [ { name: "group1", diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue index 987d6b9..8b213e2 100644 --- a/source/src/devtools/index.vue +++ b/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> = []; - treeData: Array = [] + treeData: Array = [] expandedKeys: Array = []; selectedUUID: string | null = null; @@ -84,7 +84,7 @@ export default class Index extends Vue { }, false); } - _onMsgListInfo(eventData: Array) { + _onMsgListInfo(eventData: Array) { 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); + this._onMsgListInfo(eventData as Array); 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 = []; + + function circle(array: Array) { + 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(sendData); + connectBackground.postMessageToBackground(msg, data); } // 问题:没有上下文的权限,只能操作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) { diff --git a/source/src/devtools/inject.ts b/source/src/devtools/inject.ts index abc22c6..97e0cb0 100644 --- a/source/src/devtools/inject.ts +++ b/source/src/devtools/inject.ts @@ -2,12 +2,12 @@ import { ArrayData, BoolData, - ColorData, - Group, + ColorData, DataType, + 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 = { - uuid: scene.uuid, - name: scene.name, - 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); + let treeData = new TreeData(); + this.getNodeChildren(scene, treeData) + this.sendMsgToContent(Msg.TreeInfo, treeData); } else { this.sendMsgToContent(Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"}); } @@ -98,19 +124,17 @@ class CCInspector { } // 收集节点信息 - getNodeChildren(node: any, data: Array) { - let nodeData = { - uuid: node.uuid, - name: node.name, - children: [], - }; + getNodeChildren(node: any, data: TreeData) { + data.uuid = node.uuid; + data.name = node.name; 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,7 +309,20 @@ class CCInspector { setValue(uuid: string, key: string, value: string) { let nodeOrComp = this.inspectorGameMemoryStorage[uuid]; if (nodeOrComp && key in nodeOrComp) { - nodeOrComp[key] = value; + 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; + } } } diff --git a/source/src/devtools/type.ts b/source/src/devtools/type.ts deleted file mode 100644 index bfb18ed..0000000 --- a/source/src/devtools/type.ts +++ /dev/null @@ -1,10 +0,0 @@ -export class NodeData { - uuid: string | null = null; - name: string = ''; - children: Array = [] -} - - - - - diff --git a/source/src/devtools/ui-prop.vue b/source/src/devtools/ui-prop.vue index 07b5217..be8320a 100644 --- a/source/src/devtools/ui-prop.vue +++ b/source/src/devtools/ui-prop.vue @@ -9,13 +9,14 @@ type="textarea" :autosize="{minRows:3,maxRows:5}" placeholder="请输入内容" - + @change="onChangeValue" v-model="value.data"> @@ -27,16 +28,16 @@ - + - +
- +
{{ value.data }}
@@ -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 | 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}, '*') - 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 { - } - } - } + connectBackground.postMessageToBackground(Msg.SetProperty, this.value); } @Prop({default: 1})