diff --git a/README.md b/README.md index e52ba9d..0021519 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,6 @@ -# ccc-devtools v2.0.0 +# ccc-devtools v2.1.0 Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。 -## TODO - -- [x] 拖拽布局 -- [x] 实时刷新节点信息 -- [x] 开关 -- [x] 控制台输出节点信息 -- [x] 组件信息 -- [ ] 节点搜索 -- [ ] 拖动节点更改层级 -- [ ] 自定义布局等配置 - ## 预览 v1.0.0 @@ -29,6 +18,10 @@ v2.0.0: 节点信息自动同步，避免手动刷新。增加组件信息显示 ![preview2](./screenshots/preview2.png) +v2.1.0: 区分手动刷新和自动刷新两种模式，手动刷新时支持搜索和拖拽节点；添加圈出节点位置功能；添加控制台节点树，cc.tree(); + +![preview3](./screenshots/preview3.png) + ## 使用 1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录 diff --git a/index.html b/index.html index aaa57ba..017102e 100644 --- a/index.html +++ b/index.html @@ -42,16 +42,23 @@
- - - - + + +
+ 自动刷新 + +
+ +
@@ -71,7 +78,8 @@
{{ nodeSchema.title }} - 输出引用 + 输出引用 + 标记位置
@@ -196,6 +204,7 @@ isShowFPS: false, isShowMS: false, isShowMB: false, + isAutoRefreshTree: true, filterText: '', splitLeft: 0.7, splitRight: 0.5, @@ -263,6 +272,9 @@ setTimeout(() => { this.updateTreeData(); }, 0); + }, + handleSwitchTreeMode() { + }, updateTreeData() { this.$data.sceneTreeData = cc.director.getScene().children; @@ -339,6 +351,9 @@ console.log('temp' + i); console.log(window['temp' + i]); }, + drawNodeRect(node) { + cc.where(this.$data.node); + }, openGithub() { window.open('https://github.com/potato47/ccc-devtools'); }, @@ -367,7 +382,9 @@ cc.director.on(cc.Director.EVENT_BEFORE_SCENE_LOADING, () => { this.$data.node = null; this.$data.sceneTreeData = []; + this.$data.treeParam = []; }, this); + this.initConsoleUtil(); clearInterval(this.$data.intervalId); } else { // console.log('cc is not init'); @@ -431,11 +448,130 @@ requestAnimationFrame(animate); } animate(); + }, + initConsoleUtil() { + if (cc.tree) return; + cc.tree = function (key) { + let index = key || 0; + let treeNode = function (node) { + let nameStyle = + `color: ${node.parent === null || node.activeInHierarchy ? 'green' : 'grey'}; font-size: 14px;font-weight:bold`; + let propStyle = + `color: black; background: lightgrey;margin-left: 5px;border-radius:3px;padding: 0 3px;font-size: 10px;font-weight:bold`; + let indexStyle = + `color: orange; background: black;margin-left: 5px;border-radius:3px;padding:0 3px;fonrt-size: 10px;font-weight:bold;` + let nameValue = `%c${node.name}`; + let propValue = + `%c${node.x.toFixed(0) + ',' + node.y.toFixed(0) + ',' + node.width.toFixed(0) + ',' + node.height.toFixed(0) + ',' + node.scale.toFixed(1)}` + let indexValue = `%c${index++}`; + if (node.childrenCount > 0) { + console.groupCollapsed(nameValue + propValue + indexValue, nameStyle, propStyle, indexStyle); + for (let i = 0; i < node.childrenCount; i++) { + treeNode(node.children[i]); + } + console.groupEnd(); + } else { + console.log(nameValue + propValue + indexValue, nameStyle, propStyle, indexStyle); + } + } + if (key) { + let node = cc.cat(key); + index = node['tempIndex']; + treeNode(node); + } else { + let scene = cc.director.getScene(); + treeNode(scene); + } + return '属性依次为x,y,width,height,scale.使用cc.cat(id)查看详细属性.'; + } + cc.cat = function (key) { + let index = 0; + let target; + let sortId = function (node) { + if (target) return; + if (cc.js.isNumber(key)) { + if (key === index++) { + target = node; + return; + } + } else { + if (key.toLowerCase() === node.name.toLowerCase()) { + target = node; + return; + } else { + index++; + } + } + if (node.childrenCount > 0) { + for (let i = 0; i < node.childrenCount; i++) { + sortId(node.children[i]); + } + } + } + let scene = cc.director.getScene(); + sortId(scene); + target['tempIndex'] = cc.js.isNumber(key) ? key : index; + return target; + } + cc.list = function (key) { + let targets = []; + let step = function (node) { + if (node.name.toLowerCase().indexOf(key.toLowerCase()) > -1) { + targets.push(node); + } + if (node.childrenCount > 0) { + for (let i = 0; i < node.childrenCount; i++) { + step(node.children[i]); + } + } + } + let scene = cc.director.getScene(); + step(scene); + if (targets.length === 1) { + return targets[0]; + } else { + return targets; + } + } + cc.where = function (key) { + let target = key.name ? key : cc.cat(key); + if (!target) { + return null; + } + let rect = target.getBoundingBoxToWorld(); + let borderNode = new cc.Node(); + let bgNode = new cc.Node(); + let graphics = bgNode.addComponent(cc.Graphics); + let canvas = cc.find('Canvas'); + canvas.addChild(bgNode); + bgNode.addChild(borderNode); + bgNode.position = canvas.convertToNodeSpaceAR(rect.center); + let isZeroSize = rect.width === 0 || rect.height === 0; + if (isZeroSize) { + graphics.circle(0, 0, 100); + graphics.fillColor = cc.Color.GREEN; + graphics.fill(); + } else { + bgNode.width = rect.width; + bgNode.height = rect.height; + graphics.rect(-bgNode.width / 2, -bgNode.height / 2, bgNode.width, bgNode.height); + graphics.strokeColor = cc.Color.RED; + graphics.lineWidth = 10; + graphics.stroke() + } + setTimeout(() => { + if (cc.isValid(bgNode)) { + bgNode.destroy(); + } + }, 2000); + return target; + } } }, watch: { filterText(val) { this.$refs.sceneTree.filter(val); + // console.log(val); } }, created: function () { @@ -453,6 +589,6 @@ setTimeout(() => { this.handleChangeStats(); }, 0); - } + }, }); \ No newline at end of file diff --git a/screenshots/preview3.png b/screenshots/preview3.png new file mode 100644 index 0000000..36fbee7 Binary files /dev/null and b/screenshots/preview3.png differ diff --git a/version.json b/version.json index ed2cd1a..76ed899 100644 --- a/version.json +++ b/version.json @@ -1,6 +1,6 @@ { "name": "ccc-devtools", - "version": "2.0.0", + "version": "2.1.0", "author": "Next", "repo": "https://github.com/potato47/ccc-devtools.git" } \ No newline at end of file