update readme

README.md

@@ -1,35 +1,57 @@
 # ccc-devtools v3.0.0
-Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性。
+Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化缓存资源。
-
-## 预览
-
-![preview](./screenshots/preview.png)
 
 ## 功能
 
-1.场景节点树实时显示
+- 场景节点树实时显示，节点、组件属性实时显示更改
-2.搜索节点
-3.节点、组件属性实时显示更改
-4.圈出节点位置
-5.输出节点、组件引用到控制台
 
-## 使用
+![preview](./screenshots/preview1.gif)
+
+- 可视化缓存资源
+
+![preview](./screenshots/preview2.png)
+
+- 标记场景中节点位置
+
+![preview](./screenshots/preview3.png)
+
+- 输出节点、组件引用到控制台
+
+![preview](./screenshots/preview4.png)
+
+- cc控制台功能扩展
+
+![preview](./screenshots/preview5.png)
+
+## 全局使用
 
 1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录
 
    ![t1](./screenshots/t1.png)
 
-2. 将本项目clone到上面的目录下,**如果使用下载压缩包的方式记得把后缀名-master去掉**
+2. 将本项目clone到上面的目录下，**如果使用下载压缩包的方式记得把后缀名-master去掉**
 
    ![t2](./screenshots/t2.png)
 
-3. 打开`index.jade`,找到`body`里最后一个`div`，在下面添加`include ./ccc-devtools/index.html`，**注意用tab键与上面的div对齐**
+3. 打开 `index.jade`，找到 `body` 将中间部分替换为 `include ./ccc-devtools/index.html`，**注意用tab键对齐**
 
+   ![t3](./screenshots/t3.png)
 
-## 已知问题
+## 项目使用
 
-- 当升级 Cococs Creator 时会清空resources目录，需要重新下载配置，如自定义了一些配置，请做好备份。
+Cocos Creator 从 v2.2 开始新增了自定义网页预览功能。
-- 开启节点树会增加渲染消耗，非调试阶段请关闭。
+
+1. 重复上面的操作步骤，将修改后的 `preview-templates` 目录拷贝到项目根目录
+
+2. 将 `ccc-devtools/index.html` 里所有引用的资源路径 `app/editor/static/preview-templates/ccc-devtools/...` 替换为 `ccc-devtools/...`
+
+3. 重启 Cocos Creator
+
+## 自定义
+
+- 本项目使用了 vue 和 vuetify，可根据 [vuetify 文档](https://vuetifyjs.com/en/getting-started/quick-start/) 对页面进行修改
+
+- 节点、组件显示属性可在 `config.js` 里配置，目前支持 text，number，textarea，color，bool 几种类型
 
 ## 需求、更新
 
@@ -42,17 +64,13 @@ https://github.com/potato47/ccc-devtools
 ## 贡献指南
 
 - 版本号命名规则 https://semver.org/lang/zh-CN/ ,简单来讲，新功能第二位加一，修复bug第三位加一
+
 - 如果新增功能请在README中添加预览截图说明
+
 - 记得更新version.json中的版本号
 
-## 本项目依赖以下开源项目
+## 前人种树
 
-https://github.com/vuejs/vue
+- https://github.com/vuejs/vue
 
-https://github.com/ElemeFE/element
+- https://github.com/vuetifyjs/vuetify
-
-https://github.com/iview/iview
-
-https://github.com/FE-Driver/vue-beauty
-
-https://github.com/mrdoob/stats.js

index.html

@@ -1,5 +1,5 @@
-<link href="ccc-devtools/libs/css/materialdesignicons.min.css" rel="stylesheet" type="text/css">
+<link href="app/editor/static/preview-templates/ccc-devtools/libs/css/materialdesignicons.min.css" rel="stylesheet" type="text/css">
-<link href="ccc-devtools/libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
+<link href="app/editor/static/preview-templates/ccc-devtools/libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
 <style>
     html {
         overflow-y: auto;
@@ -94,7 +94,8 @@
                             <td style="width: 60%;">
                                 <v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
                                     hide-inputs v-model="selectedNode[row.key]"></v-color-picker>
-                                <v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]" style="padding: 10px;width: 100%;"></v-simple-checkbox>
+                                <v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]"
+                                    style="padding: 10px;width: 100%;"></v-simple-checkbox>
                                 <input v-else :type="row.type" v-model="selectedNode[row.key]"
                                     style="padding: 10px;width: 100%;"></input>
                             </td>
@@ -126,7 +127,9 @@
                                 <textarea v-else-if="row.type == 'textarea'" rows="1"
                                     v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
                                 </textarea>
-                                <v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;"></v-simple-checkbox>
+                                <v-simple-checkbox v-else-if="row.type == 'bool'"
+                                    v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
+                                </v-simple-checkbox>
                                 <input v-else :type="row.type" v-model="selectedNode[component.key][row.key]"
                                     style="padding: 10px;width: 100%;"></input>
                             </td>
@@ -166,7 +169,11 @@
             <v-divider></v-divider>
             <v-card-text>
                 <v-data-table :headers="cacheHeaders" :items="cacheData" :search="cacheSearchText" :sort-by="['size']"
-                    :sort-desc="[true]">
+                    :sort-desc="[true]" :footer-props="{
+                        showFirstLastPage: true,
+                        firstIcon: 'mdi-chevron-double-left',
+                        lastIcon: 'mdi-chevron-double-right',
+                      }">
                     <template v-slot:item.size="{ item }">
                         {{ item.size == -1 ? '_' : (item.size +'MB') }}
                     </template>
@@ -190,8 +197,8 @@
 
 </v-app>
 
-<script src="ccc-devtools/libs/js/vue.min.js"></script>
+<script src="app/editor/static/preview-templates/ccc-devtools/libs/js/vue.min.js"></script>
-<script src="ccc-devtools/libs/js/vuetify.js"></script>
+<script src="app/editor/static/preview-templates/ccc-devtools/libs/js/vuetify.js"></script>
-<script src="ccc-devtools/config.js"></script>
+<script src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
-<script src="ccc-devtools/libs/js/cc-console-utils.js"></script>
+<script src="app/editor/static/preview-templates/ccc-devtools/libs/js/cc-console-utils.js"></script>
-<script src="ccc-devtools/preview.js"></script>
+<script src="app/editor/static/preview-templates/ccc-devtools/preview.js"></script>

libs/js/cc-console-utils.js

@@ -95,6 +95,8 @@ const initConsoleUtil = function () {
         let scene = cc.director.getScene();
         scene.addChild(bgNode);
         bgNode.position = rect.center;
+        bgNode.group = target.group;
+        bgNode.zIndex = cc.macro.MAX_ZINDEX;
         let isZeroSize = rect.width === 0 || rect.height === 0;
         if (isZeroSize) {
             graphics.circle(0, 0, 100);
@@ -104,9 +106,8 @@ const initConsoleUtil = function () {
             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.fillColor = new cc.Color().fromHEX('#E91E6390');
-            graphics.lineWidth = 10;
+            graphics.fill();
-            graphics.stroke()
         }
         setTimeout(() => {
             if (cc.isValid(bgNode)) {
@@ -124,7 +125,7 @@ const initConsoleUtil = function () {
             if (item.type !== 'js' && item.type !== 'json') {
                 let itemName = '_';
                 let preview = '';
-                let content = item.content.__classname__ ? item.content.__classname__ : item.type;
+                let content = (item.content && item.content.__classname__) ? item.content.__classname__ : item.type;
                 let formatSize = -1;
                 if (item.type === 'png' || item.type === 'jpg') {
                     let texture = rawCacheData[k.replace('.' + item.type, '.json')];
@@ -136,7 +137,7 @@ const initConsoleUtil = function () {
                     if (item.content.name && item.content.name.length > 0) {
                         itemName = item.content.name;
                     } else if (item._owner) {
-                        itemName = item._owner.name || '_';
+                        itemName = (item._owner && item._owner.name) || '_';
                     }
                     if (content === 'cc.Texture2D') {
                         let texture = item.content;

version.json

@@ -1,6 +1,6 @@
 {
     "name": "ccc-devtools",
-    "version": "2.3.3",
+    "version": "3.0.0",
     "author": "Next",
     "repo": "https://github.com/potato47/ccc-devtools.git"
 }