diff --git a/source/.eslintrc.js b/source/.eslintrc.js index a8288ce..2beb5df 100644 --- a/source/.eslintrc.js +++ b/source/.eslintrc.js @@ -44,5 +44,6 @@ module.exports = { "@typescript-eslint/ban-ts-comment": "off", "no-inner-declarations": "off", "vue/no-unused-vars": "off", + "@typescript-eslint/no-namespace": "off" } }; diff --git a/source/src/devtools/data.ts b/source/src/devtools/data.ts index 8a63ed9..d6ff691 100644 --- a/source/src/devtools/data.ts +++ b/source/src/devtools/data.ts @@ -81,6 +81,8 @@ export class BoolData extends Info { } export class Vec2Data extends Info { + data: Array = []; + constructor() { super(); this.type = DataType.Vec2 @@ -95,6 +97,7 @@ export class Vec2Data extends Info { } export class Vec3Data extends Info { + data: Array = []; constructor() { super(); diff --git a/source/src/devtools/global.less b/source/src/devtools/global.less index 644baa5..88d1c2a 100644 --- a/source/src/devtools/global.less +++ b/source/src/devtools/global.less @@ -12,6 +12,10 @@ } } +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: #6d6d6d; +} + .el-input { input { text-align: left !important; diff --git a/source/src/devtools/inject.ts b/source/src/devtools/inject.ts index 8424991..2e785c6 100644 --- a/source/src/devtools/inject.ts +++ b/source/src/devtools/inject.ts @@ -2,17 +2,25 @@ import { ArrayData, BoolData, - ColorData, DataType, - Group, Info, + ColorData, + DataType, + Group, + Info, NullOrUndefinedData, - NumberData, ObjectData, + NumberData, + ObjectData, Property, - StringData, TreeData, + StringData, + TreeData, Vec2Data, Vec3Data } from "./data"; +import {Msg, Page, PluginEvent} from '@/core/types' -import {PluginEvent, Page, Msg} from '@/core/types' +// @ts-ignore typescript-eslint/no-namespace +declare namespace cc { + export function v2(x: number, y: number): any; +} class CCInspector { inspectorGameMemoryStorage: Record = {} @@ -29,7 +37,6 @@ class CCInspector { }) } }, 300) - window.addEventListener("message", (event) => { // 接受来自content的事件,有可能也会受到其他插件的 if (!event || !event.data) { @@ -60,7 +67,12 @@ class CCInspector { // path的设计有优化空间 const uuid = data.path[0]; const key = data.path[1]; - const value = data.data; + let value = data.data; + if (data.type === DataType.Color) { + // @ts-ignore + value = cc.color().fromHEX(value); + } + if (uuid && key) { this.setValue(uuid, key, value); this.sendMsgToContent(Msg.UpdateProperty, data); @@ -98,6 +110,45 @@ class CCInspector { } } + + // @ts-ignore + draw: cc.Graphics = null; + + _drawRect(node: any) { + let draw = this.draw; + + if (!draw) { + // @ts-ignore + let node = new cc.Node('draw-node'); + // @ts-ignore + cc.director.getScene().addChild(node); + // @ts-ignore + draw = this.draw = node.addComponent(cc.Graphics); + } + draw.clear() + draw.lineWidth = 10; + // @ts-ignore + draw.strokeColor = new cc.Color().fromHEX('#ff0000') + const {anchorX, anchorY, width, height, x, y} = node; + let halfWidth = width / 2; + let halfHeight = height / 2; + let leftBottom = node.convertToWorldSpaceAR(cc.v2(-halfWidth, -halfHeight)) + let leftTop = node.convertToWorldSpaceAR(cc.v2(-halfWidth, halfHeight)); + let rightBottom = node.convertToWorldSpaceAR(cc.v2(halfWidth, -halfHeight)); + let rightTop = node.convertToWorldSpaceAR(cc.v2(halfWidth, halfHeight)); + + function line(began: any, end: any) { + draw.moveTo(began.x, began.y); + draw.lineTo(end.x, end.y); + } + + line(leftBottom, rightBottom) + line(rightBottom, rightTop) + line(rightTop, leftTop) + line(leftTop, leftBottom) + this.draw.stroke(); + } + // 收集节点信息 getNodeChildren(node: any, data: TreeData) { data.uuid = node.uuid; @@ -123,17 +174,6 @@ class CCInspector { return typeof cc !== "undefined"; } - pluginSetNodeActive(uuid: string, isActive: number) { - let node = this.inspectorGameMemoryStorage[uuid]; - if (node) { - if (isActive === 1) { - node.active = true; - } else if (isActive === 0) { - node.active = false; - } - } - } - _getNodeKeys(node: any) { let keys = []; let excludeProperty = [ @@ -173,6 +213,32 @@ class CCInspector { return null; } + _buildVecData(options: any) { + const ctor: Function = options.ctor; + const keys: Array = options.keys; + const value: Object = options.value; + const data: Vec3Data | Vec2Data = options.data; + const path: Array = options.path; + + if (ctor && value instanceof ctor) { + let hasUnOwnProperty = keys.find(key => !value.hasOwnProperty(key)) + if (!hasUnOwnProperty) { + for (let key in keys) { + let propName = keys[key]; + if (value.hasOwnProperty(propName)) { + let propPath = path.concat(propName); + let itemData = this._genInfoData(value, propName, propPath) + if (itemData) { + data.add(new Property(propName, itemData)) + } + } + } + return data; + } + } + return null; + } + _genInfoData(node: any, key: string, path: any) { let propertyValue = node[key]; let info = null; @@ -196,7 +262,23 @@ class CCInspector { } else if (Array.isArray(propertyValue)) { info = new ArrayData(); } else if (propertyValue instanceof Object) { - info = new ObjectData(); + !info && (info = this._buildVecData({ + // @ts-ignore + ctor: cc.Vec3, + path: path, + data: new Vec3Data(), + keys: ['x', 'y', 'z'], + value: propertyValue, + })) + !info && (info = this._buildVecData({ + // @ts-ignore + ctor: cc.Vec2, + path: path, + data: new Vec2Data(), + keys: ['x', 'y'], + value: propertyValue + })) + !info && (info = new ObjectData()); } else { } break;