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