diff --git a/README.md b/README.md index ef515b6..6eacc8a 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,13 @@ -# ccc-devtools v1.0 +# ccc-devtools v1.1.0 Cocos Creator 网页调试器,运行时查看、修改节点树,实时更新节点属性。 -## 功能 +## TODO - [x] 拖拽布局 - [x] 节点搜索 - [x] 实时刷新节点信息 +- [x] 拖动节点更改层级 +- [x] 开关 - [ ] 自定义布局等配置 - [ ] 组件信息 diff --git a/index.html b/index.html index 3f55123..e2225cc 100644 --- a/index.html +++ b/index.html @@ -30,17 +30,17 @@
- +
-
+
- + {{ node.label }} @@ -152,6 +152,14 @@
+ + + +
@@ -167,6 +175,7 @@ var app = new Vue({ el: '#app', data: { + isDevMode: false, filterText: '', splitLeft: 0.7, splitRight: 0.5, @@ -178,6 +187,7 @@ }, node: null, nodeColor: '#ffffff', + intervalId: -1 }, methods: { @@ -205,6 +215,44 @@ filterNode(value, node) { if (!value) return true; return node.name.toLowerCase().indexOf(value.toLowerCase()) !== -1; + }, + openDevMode() { + let initWin = () => { + if (window.cc) { + let top = document.getElementById('top') + // top.insertBefore(document.getElementsByClassName('toolbar')[0], top.firstChild); + top.appendChild(document.getElementsByClassName('toolbar')[0]); + document.getElementById('game_panel').appendChild(document.getElementById('content')); + // let content = document.getElementById('content'); + // content.insertBefore(document.getElementById('searchInput'), content.firstChild); + let scene = cc.director.getScene(); + if (scene) { + this.$data.sceneTreeData = scene.children; + this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id]; + } + cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, () => { + this.$data.sceneTreeData = cc.director.getScene().children; + this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id]; + }); + cc.director.on(cc.Director.EVENT_BEFORE_SCENE_LOADING, () => { + this.$data.sceneTreeData = []; + this.$data.node = null; + }); + clearInterval(this.$data.intervalId); + } else { + console.log('cc is not init'); + } + } + this.$data.intervalId = setInterval(initWin, 500); + setTimeout(initWin, 0); + }, + closeDevMode() { + clearInterval(this.$data.intervalId); + document.body.appendChild(document.getElementsByClassName('toolbar')[0]); + document.body.appendChild(document.getElementById('content')); + }, + handleChangeMode(data) { + data?this.openDevMode():this.closeDevMode(); } }, watch: { @@ -212,34 +260,8 @@ this.$refs.sceneTree.filter(val); } }, - created: function () { - let top = document.getElementById('top') - // top.insertBefore(document.getElementsByClassName('toolbar')[0], top.firstChild); - top.appendChild(document.getElementsByClassName('toolbar')[0]); - document.getElementById('game_panel').appendChild(document.getElementById('content')); - // let content = document.getElementById('content'); - // content.insertBefore(document.getElementById('searchInput'), content.firstChild); - - intervalId = setInterval(() => { - if (window.cc) { - let scene = cc.director.getScene(); - if (scene) { - this.$data.sceneTreeData = scene.children; - this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id]; - } - cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, () => { - this.$data.sceneTreeData = cc.director.getScene().children; - this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id]; - }); - cc.director.on(cc.Director.EVENT_BEFORE_SCENE_LOADING, () => { - this.$data.sceneTreeData = []; - this.$data.node = null; - }); - clearInterval(intervalId); - } else { - console.log('cc is not init'); - } - }, 1000); + created: function() { + document.body.insertBefore(document.getElementById('app'), document.body.firstChild); } }); - \ No newline at end of file + diff --git a/screenshots/t4.gif b/screenshots/t4.gif new file mode 100644 index 0000000..fb599c9 Binary files /dev/null and b/screenshots/t4.gif differ