upate

README.md

@@ -1,32 +1,17 @@
 # ccc-devtools v3.0.0
-Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化显示缓存资源。
+Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性。
 
 ## 预览
 
-v1.0.0
+![preview](./screenshots/preview.png)
-![preview](./screenshots/preview.gif)
 
-v1.1.0: 拖拽节点，增加开关
+## 功能
 
-![t5](./screenshots/t4.gif)
+1.场景节点树实时显示
-
+2.搜索节点
-v1.2.0: 控制台输出节点信息
+3.节点、组件属性实时显示更改
-
+4.圈出节点位置
-![t6](./screenshots/t5.png)
+5.输出节点、组件引用到控制台
-
-v2.0.0: 节点信息自动同步，避免手动刷新。增加组件信息显示。增加内存、FPS、渲染时间显示。更新提醒。
-
-![preview2](./screenshots/preview2.png)
-
-v2.1.0: 区分手动刷新和自动刷新两种模式，手动刷新时支持搜索和拖拽节点；添加圈出节点位置功能；添加控制台节点树，cc.tree();
-
-![preview3](./screenshots/preview3.png)
-
-v2.2.0: 新增黑色主题(感谢[@wheatup](https://github.com/wheatup) )
-![dark-theme](./screenshots/dark-theme.png)
-
-v2.3.0: 添加缓存资源查看面板；简化调试信息显示，新增纹理内存挂件。
-![cache](./screenshots/preview_cache.png)
 
 ## 使用
 
@@ -40,8 +25,6 @@ v2.3.0: 添加缓存资源查看面板；简化调试信息显示，新增纹理
 
 3. 打开`index.jade`,找到`body`里最后一个`div`，在下面添加`include ./ccc-devtools/index.html`，**注意用tab键与上面的div对齐**
 
-   ![t3](./screenshots/t3.png)
-
 
 ## 已知问题
 

index.html

@@ -4,9 +4,6 @@
 <v-app id="app">
     <v-app-bar app clipped-left color="gray" dense v-if="true">
         <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
-        <!-- <v-toolbar-title class="mr-5 align-center">
-            <span class="title"><a>ccc-devtools</a></span>
-        </v-toolbar-title> -->
         <div id="recompiling"><span>Recompiling...</span></div>
         <v-spacer></v-spacer>
         <div class="toolbar">
@@ -48,6 +45,7 @@
             <div class="item">
                 <v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
             </div>
+            <v-icon @click="openGithub" small>mdi-home</v-icon>
         </div>
     </v-app-bar>
 
@@ -75,8 +73,9 @@
                                     <span style="margin-left: 10px;">{{ nodeSchema.title }}</span>
                                 </div>
                                 <div class="float-right">
-                                    <v-icon style="margin-left: 10px;margin-right: 10px;">mdi-adjust</v-icon>
+                                    <v-icon style="margin-left: 10px;margin-right: 10px;" @click="drawNodeRect()">
-                                    <v-icon>mdi-send</v-icon>
+                                        mdi-adjust</v-icon>
+                                    <v-icon @click="outputNodeHandler()">mdi-send</v-icon>
                                 </div>
                             </th>
                         </tr>
@@ -104,7 +103,7 @@
                                     <span style="margin-left: 10px;">{{ component.title }}</span>
                                 </div>
                                 <div class="float-right">
-                                    <v-icon>mdi-send</v-icon>
+                                    <v-icon @click="outputComponentHandler(component.key)">mdi-send</v-icon>
                                 </div>
                             </th>
                         </tr>
@@ -150,6 +149,7 @@
 <script src="ccc-devtools/libs/js/vue.min.js"></script>
 <script src="ccc-devtools/libs/js/vuetify.js"></script>
 <script src="ccc-devtools/config.js"></script>
+<script src="ccc-devtools/libs/js/cc-console-utils.js"></script>
 <script src="ccc-devtools/preview.js"></script>
 
 <!-- app/editor/static/preview-templates/ -->

libs/js/cc-console-utils.js

@@ -0,0 +1,118 @@
+const initConsoleUtil = function () {
+    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 bgNode = new cc.Node();
+        let graphics = bgNode.addComponent(cc.Graphics);
+        let scene = cc.director.getScene();
+        scene.addChild(bgNode);
+        bgNode.position = 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;
+    }
+}

preview.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 const app = new Vue({
     el: '#app',
     vuetify: new Vuetify({
@@ -14,7 +13,10 @@ const app = new Vue({
         componentsSchema: [],
     },
     created() {
-        this.startUpdateTree();
+        this.waitCCInit().then(() => {
+            this.startUpdateTree();
+            initConsoleUtil();
+        });
     },
     computed: {
         treeFilter() {
@@ -71,6 +73,16 @@ const app = new Vue({
         },
     },
     methods: {
+        waitCCInit() {
+            return new Promise((resolve, reject) => {
+                let id = setInterval(() => {
+                    if (window.cc) {
+                        resolve();
+                        clearInterval(id);
+                    }
+                }, 500);
+            });
+        },
         refreshTree: function () {
             if (!this.$data.drawer || !window.cc || !cc.director.getScene() || !cc.director.getScene().children) return;
             this.$data.treeData = getChildren(cc.director.getScene());
@@ -83,6 +95,30 @@ const app = new Vue({
         stopUpdateTree: function () {
             clearInterval(this.$data.intervalId);
         },
+        outputNodeHandler(id) {
+            let i = 1;
+            while (window['temp' + i] !== undefined) {
+                i++;
+            }
+            window['temp' + i] = this.selectedNode;
+            console.log('temp' + i);
+            console.log(window['temp' + i]);
+        },
+        outputComponentHandler(component) {
+            let i = 1;
+            while (window['temp' + i] !== undefined) {
+                i++;
+            }
+            window['temp' + i] = this.selectedNode.getComponent(component);
+            console.log('temp' + i);
+            console.log(window['temp' + i]);
+        },
+        drawNodeRect() {
+            cc.where(this.selectedNode);
+        },
+        openGithub() {
+            window.open('https://github.com/potato47/ccc-devtools');
+        },
     }
 });