显示组件信息，2.5d节点切换，显示内存等常用部件，更新提醒

README.md

@@ -1,4 +1,4 @@
-# ccc-devtools v1.2.7
+# ccc-devtools v2.0.0
 Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。
 
 ## TODO
@@ -7,13 +7,14 @@ Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新
 - [x] 实时刷新节点信息
 - [x] 开关
 - [x] 控制台输出节点信息
+- [x] 组件信息
 - [ ] 节点搜索
 - [ ] 拖动节点更改层级
 - [ ] 自定义布局等配置
-- [ ] 组件信息
 
 ## 预览
 
+v1.0.0
 ![preview](./screenshots/preview.gif)
 
 v1.1.0: 拖拽节点，增加开关
@@ -24,6 +25,10 @@ v1.2.0: 控制台输出节点信息
 
 ![t6](./screenshots/t5.png)
 
+v2.0.0: 节点信息自动同步，避免手动刷新。增加组件信息显示。增加内存、FPS、渲染时间显示。更新提醒。
+
+![preview2](./screenshots/preview2.png)
+
 ## 使用
 
 1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录
@@ -41,9 +46,23 @@ v1.2.0: 控制台输出节点信息
 
 ## 已知问题
 
-- 当有大量节点动态加载时，可能需要手动点击一下右上角的刷新按钮来重载节点树。
 - 当升级 Cococs Creator 时会清空resources目录，需要重新下载配置，如自定义了一些配置，请做好备份。
+- 开启节点树会增加渲染消耗，非调试阶段请关闭。
 
 ## 需求、更新
 
 https://github.com/potato47/ccc-devtools
+
+如果没有更改源码，可直接在目录下 git pull
+
+## 本项目依赖以下开源项目
+
+https://github.com/vuejs/vue
+
+https://github.com/ElemeFE/element
+
+https://github.com/iview/iview
+
+https://github.com/FE-Driver/vue-beauty
+
+https://github.com/mrdoob/stats.js

config.js

@@ -1,188 +1,156 @@
 const NEX_CONFIG = {
-	propSchema: {
+	nodeSchema: {
 		node2d: {
 			title: 'Node',
-			key: 'node',
+			key: 'cc.Node',
 			rows: [
 				// Position
 				[{
-					key: 'node_pos_label',
 					type: 'label',
 					span: 6,
-					value: 'Position'
+					field: 'Position'
 				}, {
-					key: 'node_x_label',
 					type: 'label',
 					span: 1,
-					value: 'X'
+					field: 'X'
 				}, {
-					key: 'node_x',
 					type: 'number',
 					span: 8,
 					field: 'x'
 				}, {
-					key: 'node_y_label',
 					type: 'label',
 					span: 1,
-					value: 'Y'
+					field: 'Y'
 				}, {
-					key: 'node_y',
 					type: 'number',
 					span: 8,
 					field: 'y'
 				}],
 				// Angle
 				[{
-					key: 'node_angle_label',
 					type: 'label',
 					span: 6,
-					value: 'Angle'
+					field: 'Angle'
 				}, {
-					key: 'node_angle',
 					type: 'number',
 					span: 18,
 					field: 'angle'
 				}],
 				// Scale
 				[{
-					key: 'node_scale_label',
 					type: 'label',
 					span: 6,
-					value: 'Scale'
+					field: 'Scale'
 				}, {
-					key: 'node_scalex_label',
 					type: 'label',
 					span: 1,
-					value: 'X'
+					field: 'X'
 				}, {
-					key: 'node_scalex',
 					type: 'number',
 					span: 8,
 					field: 'scaleX'
 				}, {
-					key: 'node_scaley_label',
 					type: 'label',
 					span: 1,
-					value: 'Y'
+					field: 'Y'
 				}, {
-					key: 'node_scaley',
 					type: 'number',
 					span: 8,
 					field: 'scaleY'
 				}],
 				// Anchor
 				[{
-					key: 'node_anchor_label',
 					type: 'label',
 					span: 6,
-					value: 'Anchor'
+					field: 'Anchor'
 				}, {
-					key: 'node_anchorx_label',
 					type: 'label',
 					span: 1,
-					value: 'X'
+					field: 'X'
 				}, {
-					key: 'node_anchorx',
 					type: 'number',
 					span: 8,
 					field: 'anchorX'
 				}, {
-					key: 'node_anchory_label',
 					type: 'label',
 					span: 1,
-					value: 'Y'
+					field: 'Y'
 				}, {
-					key: 'node_anchory',
 					type: 'number',
 					span: 8,
 					field: 'anchorY'
 				}],
 				// Size
 				[{
-					key: 'node_size_label',
 					type: 'label',
 					span: 6,
-					value: 'Size'
+					field: 'Size'
 				}, {
-					key: 'node_width_label',
 					type: 'label',
 					span: 1,
-					value: 'W'
+					field: 'W'
 				}, {
-					key: 'node_width',
 					type: 'number',
 					span: 8,
 					field: 'width'
 				}, {
-					key: 'node_height_label',
 					type: 'label',
 					span: 1,
-					value: 'H'
+					field: 'H'
 				}, {
-					key: 'node_height',
 					type: 'number',
 					span: 8,
 					field: 'height'
 				}],
 				// Color
 				[{
-					key: 'node_color_label',
 					type: 'label',
 					span: 6,
-					value: 'Color',
+					field: 'Color',
 				}, {
-					key: 'node_color',
 					type: 'color',
-					span: 16,
+					span: 18,
-					field: 'hex_color'
+					field: 'hex_color',
+					rawField: 'color',
 				}],
 				// Opacity
 				[{
-					key: 'node_opacity_label',
 					type: 'label',
 					span: 6,
-					value: 'Opacity'
+					field: 'Opacity'
 				}, {
-					key: 'node_opacity',
 					type: 'number',
 					span: 18,
 					field: 'opacity'
 				}],
 				// Skew
 				[{
-					key: 'node_skew_label',
 					type: 'label',
 					span: 6,
-					value: 'Skew'
+					field: 'Skew'
 				}, {
-					key: 'node_skewx_label',
 					type: 'label',
 					span: 1,
-					value: 'X'
+					field: 'X'
 				}, {
-					key: 'node_skewx',
 					type: 'number',
 					span: 8,
 					field: 'skewX'
 				}, {
-					key: 'node_skewy_label',
 					type: 'label',
 					span: 1,
-					value: 'Y'
+					field: 'Y'
 				}, {
-					key: 'node_skewy',
 					type: 'number',
 					span: 8,
 					field: 'skewY'
 				}],
 				// Group
 				[{
-					key: 'node_group_label',
 					type: 'label',
 					span: 6,
-					value: 'Group'
+					field: 'Group'
 				}, {
-					key: 'node_group',
 					type: 'input',
 					span: 18,
 					field: 'group'
@@ -190,10 +158,397 @@ const NEX_CONFIG = {
 			]
 		},
 		node3d: {
-
+			title: 'Node',
+			key: 'cc.Node',
+			rows: [
+				// Position
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Position'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'X'
+				}, {
+					type: 'number',
+					span: 5,
+					field: 'x'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Y'
+				}, {
+					type: 'number',
+					span: 5,
+					field: 'y'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Z'
+				}, {
+					type: 'number',
+					span: 5,
+					field: 'z'
+				}],
+				// Angle
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Rotation'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'X'
+				}, {
+					type: '3DAngle',
+					span: 5,
+					field: 'x'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Y'
+				}, {
+					type: '3DAngle',
+					span: 5,
+					field: 'y'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Z'
+				}, {
+					type: '3DAngle',
+					span: 5,
+					field: 'z'
+				}],
+				// Scale
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Scale'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'X'
+				}, {
+					type: 'number',
+					span: 5,
+					field: 'scaleX'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Y'
+				}, {
+					type: 'number',
+					span: 5,
+					field: 'scaleY'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Z'
+				}, {
+					type: 'number',
+					span: 5,
+					field: 'scaleZ'
+				}],
+				// Anchor
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Anchor'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'X'
+				}, {
+					type: 'number',
+					span: 8,
+					field: 'anchorX'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Y'
+				}, {
+					type: 'number',
+					span: 8,
+					field: 'anchorY'
+				}],
+				// Size
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Size'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'W'
+				}, {
+					type: 'number',
+					span: 8,
+					field: 'width'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'H'
+				}, {
+					type: 'number',
+					span: 8,
+					field: 'height'
+				}],
+				// Color
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Color',
+				}, {
+					type: 'color',
+					span: 18,
+					field: 'hex_color',
+					rawField: 'color',
+				}],
+				// Opacity
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Opacity'
+				}, {
+					type: 'number',
+					span: 18,
+					field: 'opacity'
+				}],
+				// Skew
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Skew'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'X'
+				}, {
+					type: 'number',
+					span: 8,
+					field: 'skewX'
+				}, {
+					type: 'label',
+					span: 1,
+					field: 'Y'
+				}, {
+					type: 'number',
+					span: 8,
+					field: 'skewY'
+				}],
+				// Group
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Group'
+				}, {
+					type: 'input',
+					span: 18,
+					field: 'group'
+				}]
+			]
 		},
-		label: {
+	},
-
+	componentsSchema: {
+		'cc.Camera': {
+			title: 'cc.Camera',
+			key: 'cc.Camera',
+			rows: [
+				// Zoom Ratio
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Zoom Ratio'
+				}, {
+					type: 'number',
+					span: 18,
+					field: 'zoomRatio'
+				}],
+				// Background Color
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Bg Color'
+				}, {
+					type: 'color',
+					span: 18,
+					field: 'hex_backgroundColor',
+					rawField: 'backgroundColor'
+				}],
+				// Depth
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Depth'
+				}, {
+					type: 'number',
+					span: 18,
+					field: 'depth'
+				}],
+			]
+		},
+		'cc.Sprite': {
+			key: 'cc.Sprite',
+			title: 'cc.Sprite',
+			rows: [
+				// Type
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Type'
+				}, {
+					type: 'select',
+					span: 18,
+					field: 'type',
+					options: [{
+						label: 'SIMPLE',
+						value: 0
+					}, {
+						label: 'SLICED',
+						value: 1
+					}, {
+						label: 'TILED',
+						vlaue: 2
+					}, {
+						label: 'FILLED',
+						value: 3
+					}, {
+						label: 'MESH',
+						value: 4
+					}]
+				}],
+				// Size Mode
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Size Mode'
+				}, {
+					type: 'select',
+					span: 18,
+					field: 'sizeMode',
+					options: [{
+						label: 'CUSTOM',
+						value: 0
+					}, {
+						label: 'TRIMMED',
+						value: 1
+					}, {
+						label: 'RAW',
+						vlaue: 2
+					}]
+				}],
+				// Trim
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Trim'
+				}, {
+					type: 'bool',
+					span: 18,
+					field: 'trim'
+				}],
+			]
+		},
+		'cc.Label': {
+			title: 'cc.Label',
+			key: 'cc.Label',
+			rows: [
+				// String
+				[{
+					type: 'label',
+					span: 6,
+					field: 'String'
+				}, {
+					type: 'textarea',
+					span: 18,
+					field: 'string'
+				}],
+				// Horizontal Align
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Horizontal'
+				}, {
+					type: 'select',
+					span: 18,
+					field: 'horizontalAlign',
+					options: [{
+						label: 'LEFT',
+						value: 0
+					}, {
+						label: 'CENTER',
+						value: 1
+					}, {
+						label: 'RIGHT',
+						value: 2
+					}]
+				}],
+				// Vertical Align
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Vertical'
+				}, {
+					type: 'select',
+					span: 18,
+					field: 'verticalAlign',
+					options: [{
+						label: 'TOP',
+						value: 0
+					}, {
+						label: 'CENTER',
+						value: 1
+					}, {
+						label: 'BOTTOM',
+						value: 2
+					}]
+				}],
+				// Font Size
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Font Size'
+				}, {
+					type: 'number',
+					span: 18,
+					field: 'fontSize'
+				}],
+				// Line Height
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Line Height',
+				}, {
+					type: 'number',
+					span: 18,
+					field: 'lineHeight'
+				}],
+				// Overflow
+				[{
+					type: 'label',
+					span: 6,
+					field: 'Overflow'
+				}, {
+					type: 'select',
+					span: 18,
+					field: 'overflow',
+					options: [{
+						label: 'NONE',
+						value: 0
+					}, {
+						label: 'CLAMP',
+						value: 1
+					}, {
+						label: 'SHRINK',
+						value: 2
+					}, {
+						label: 'RESIZE_HEIGHT',
+						value: 3
+					}]
+				}],
+			]
 		}
 	}
 }

index.html

@@ -1,6 +1,6 @@
+<link rel="stylesheet" href="app/editor/static/preview-templates/ccc-devtools/css/vue-beauty.min.css">
 <link rel="stylesheet" href="app/editor/static/preview-templates/ccc-devtools/css/element-ui.css">
 <link rel="stylesheet" href="app/editor/static/preview-templates/ccc-devtools/css/iview.css">
-<link rel="stylesheet" href="app/editor/static/preview-templates/ccc-devtools/css/vue-beauty.min.css">
 
 <style>
 	body {
@@ -16,6 +16,10 @@
 		padding-left: 5px;
 		padding-right: 5px;
 	}
+	.el-card__body {
+		padding-left: 20px;
+		padding-right: 10px;
+	}
 	.ivu-collapse-content {
 		color: #515a6e;
 		padding: 0 5px 0 16px;
@@ -25,6 +29,9 @@
 		width: 12px;
 		font-size: 12px;
 	}
+	.el-select.el-select--mini {
+		width: 100%;
+	}
 </style>
 <div id="app">
 	<div class="demo-split">
@@ -36,7 +43,7 @@
 				<Split v-model="splitRight" mode="vertical">
 					<div slot="top" class="demo-split-pane" style="padding-left: 5px;">
 						<!-- <el-input placeholder="搜索节点" v-model="filterText" size="mini" id="searchInput"></el-input> -->
-						<v-tree :data="sceneTreeData" ref="sceneTree" @select="handleNodesSelect" style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;"></v-tree>
+						<v-tree v-if="isDevMode" :data="sceneTreeData" ref="sceneTree" @select="handleNodesSelect" style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;"></v-tree>
 						<!-- <el-tree v-if="isDevMode" :data="sceneTreeData" :draggable="true" :props="nodeProps" :default-expanded-keys="defaultExpandedKeys"
 						 empty-text="暂无数据..." :node-key="'_id'" :expand-on-click-node="false" :filter-node-method="filterNode" ref="sceneTree"
 						 @node-click="handleNodeClick" style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;">
@@ -52,39 +59,68 @@
 								<el-col :span="2" style="text-align:center;padding-top:7px;padding-left:5px;">
 									<el-checkbox v-model="node.active"></el-checkbox>
 								</el-col>
-								<el-col :span="20">
+								<el-col :span="18">
 									<el-input v-model="node.name" size="mini"></el-input>
 								</el-col>
-								<el-col :span="2">
+								<el-col :span="4">
-									<el-button icon="el-icon-search" @click="outputNodeHandler" size="mini" circle></el-button>
+									<div style="width: 100%;height:28px;border: solid 1px rgb(220, 223, 230);border-radius: 4px;text-align: center;"
+									 @click="handleChangeNodeSchema"><span style="line-height: 28px;" :style="{color: is3DNode?'#409EFF':'#606266'}">2.5d</span></div>
 								</el-col>
+
 							</el-row>
-							<Collapse simple value="0">
+							<el-card v-if="nodeSchema">
-								<Panel :name="index+''" v-for="(section,index) in propSchema" :key="section.key">
+								<div>
-									{{ section.title }}
+									<span>{{ nodeSchema.title }}</span>
-									<div slot="content">
+									<el-button style="float: right; padding: 3px 0" type="text" @click="outputNodeHandler">输出引用</el-button>
-										<el-row style="height: 28px;margin-bottom:3px;" v-for="row in section.rows" :key="row.key">
+								</div>
-											<el-col v-for="col in row" :key="col.key" :span="col.span" style="text-align: left;line-height: 28px;">
+								<hr style="margin: 10px 0;" />
-												<span v-if="col.type == 'label'">{{col.value}}</span>
+								<div>
+									<el-row style="height: 28px;margin-bottom:3px;" v-for="(row, ri) in nodeSchema.rows" :key="ri">
+										<el-col v-for="(col, ci) in row" :key="ci" :span="col.span" style="text-align: left;line-height: 28px;">
+											<span v-if="col.type == 'label'">{{col.field}}</span>
 											<el-input-number v-if="col.type == 'number'" v-model="node[col.field]" controls-position="right" size="mini"
 											 style="width: 100%;"></el-input-number>
+											<el-input-number v-if="col.type == '3DAngle'" v-model="node.eulerAngles[col.field]" controls-position="right"
+											 size="mini" style="width: 100%;"></el-input-number>
 											<el-input v-if="col.type == 'input'" v-model="node[col.field]" size="mini"></el-input>
 											<el-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini" v-model="node[col.field]"></el-color-picker>
 										</el-col>
 									</el-row>
 								</div>
-								</Panel>
+							</el-card>
-								<Panel name="2">
+							<el-card v-for="(section,index) in componentsSchema" :key="section.key" style="margin: 10px 0;">
-									Components
+								<div>
-									<p slot="content">Coming soon...</p>
+									<el-checkbox v-model="node[section.key].enabled">{{ section.title }}</el-checkbox>
-								</Panel>
+									<el-button style="float: right; padding: 3px 0" type="text" @click="outputComponentHandler(section.key)">输出引用</el-button>
-							</Collapse>
+								</div>
+								<hr v-if="section.rows" style="margin: 10px 0;" />
+								<div>
+									<el-row style="height: 28px;margin-bottom:3px;" v-for="(row,ri) in section.rows" :key="ri">
+										<el-col v-for="(col,ci) in row" :key="ci" :span="col.span" style="text-align: left;line-height: 28px;">
+											<span v-if="col.type == 'label'">{{col.field}}</span>
+											<el-input-number v-if="col.type == 'number'" v-model="node[section.key][col.field]" controls-position="right"
+											 size="mini" style="width: 100%;"></el-input-number>
+											<el-input v-if="col.type == 'input'" v-model="node[section.key][col.field]" size="mini"></el-input>
+											<el-input v-if="col.type == 'textarea'" type="textarea" :rows="1" v-model="node[section.key][col.field]"
+											 size="mini">
+											</el-input>
+											<el-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini" v-model="node[section.key][col.field]"></el-color-picker>
+											<el-checkbox v-if="col.type == 'bool'" v-model="node[section.key][col.field]"></el-checkbox>
+											<el-select v-if="col.type == 'select'" v-model="node[section.key][col.field]" size="mini">
+												<el-option v-for="item in col.options" :key="item.value" :label="item.label" :value="item.value">
+												</el-option>
+											</el-select>
+										</el-col>
+									</el-row>
+								</div>
+							</el-card>
 						</div>
 					</div>
 				</Split>
 			</div>
 		</Split>
-		<el-popover style="position:absolute;left:5px;top:50px;" width="150" placement="top-start" trigger="click">
+		<div id="panelCtl" style="position:absolute;left:5px;top:50px;height: 50px;display: flex;align-items: center;">
+			<el-popover width="150" placement="top-start" trigger="click">
 				<el-button type="info" icon="el-icon-setting" circle slot="reference" size="mini"></el-button>
 				<div>
 					<el-row style="margin:5px 0;">
@@ -97,12 +133,12 @@
 							</el-switch>
 						</el-col>
 					</el-row>
-				<!-- <el-row style="margin:5px 0;">
+					<el-row style="margin:5px 0;">
 						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
 							FPS
 						</el-col>
 						<el-col :span="12">
-						<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
+							<el-switch style="margin: 5px;" v-model="isShowFPS" @change="handleChangeStats" active-color="#0099ff"
 							 inactive-color="gray">
 							</el-switch>
 						</el-col>
@@ -112,7 +148,7 @@
 							帧时间
 						</el-col>
 						<el-col :span="12">
-						<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
+							<el-switch style="margin: 5px;" v-model="isShowMS" @change="handleChangeStats" active-color="#0099ff"
 							 inactive-color="gray">
 							</el-switch>
 						</el-col>
@@ -122,50 +158,44 @@
 							内存
 						</el-col>
 						<el-col :span="12">
-						<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
+							<el-switch style="margin: 5px;" v-model="isShowMB" @change="handleChangeStats" active-color="#0099ff"
 							 inactive-color="gray">
 							</el-switch>
 						</el-col>
-				</el-row> -->
+					</el-row>
 					<el-row style="margin:5px 0;">
 						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
 							源码
 						</el-col>
 						<el-col :span="12">
+							<el-badge value="new" :hidden="!needUpdate">
 								<Icon style="margin: 5px;" type="logo-github" size="24" @click="openGithub" />
+							</el-badge>
 						</el-col>
 					</el-row>
 				</div>
 			</el-popover>
 		</div>
 	</div>
+</div>
 
 <script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/vue.min.js"></script>
+<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/vue-beauty.min.js"></script>
 <script src="app/editor/static/preview-templates/ccc-devtools/js/element-ui.js"></script>
 <script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/iview.js"></script>
-<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/vue-beauty.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/stats.min.js"></script>
 
 <script type="text/javascript" src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
 <script>
-	var nex = {
+	let app = new Vue({
-		checkVersion: function () {
-			var url = 'https://raw.githubusercontent.com/potato47/ccc-devtools/master/config.js';
-			var xhr = new XMLHttpRequest();
-			xhr.onreadystatechange = function () {
-				if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
-					var response = xhr.responseText;
-					console.log(response);
-				}
-			};
-			xhr.open("GET", url, true);
-			xhr.send();
-		}
-	}
-	var app = new Vue({
 		el: '#app',
 		data: {
+			needUpdate: false,
+			is3DNode: false,
 			isDevMode: false,
+			isShowFPS: false,
+			isShowMS: false,
+			isShowMB: false,
 			filterText: '',
 			splitLeft: 0.7,
 			splitRight: 0.5,
@@ -177,10 +207,57 @@
 				isLeaf: 'leaf'
 			},
 			node: null,
-			propSchema: [],
+			nodeSchema: {},
+			componentsSchema: [],
 			intervalId: -1,
 		},
 		methods: {
+			api: function (url, cb) {
+				let xhr = new XMLHttpRequest();
+				xhr.onreadystatechange = function () {
+					if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
+						let response = xhr.responseText;
+						cb(JSON.parse(xhr.responseText));
+					}
+				};
+				xhr.open("GET", url, true);
+				xhr.send();
+			},
+			compareVersion: function (localVersion, remoteVersion) {
+				let vL = localVersion.split('.');
+				let vR = remoteVersion.split('.');
+				for (let i = 0; i < vL.length; ++i) {
+					let a = parseInt(vL[i], 10);
+					let b = parseInt(vR[i] || '0', 10);
+					if (a === b) {
+						continue;
+					} else if (a > b) {
+						return false;
+					} else if (a < b) {
+						return true;
+					}
+				}
+				if (vR.length > vL.length) {
+					return true;
+				} else {
+					return false;
+				}
+			},
+			checkVersion: function () {
+				this.api('https://raw.githubusercontent.com/potato47/ccc-devtools/master/version.json', (data) => {
+					let remoteVersion = data.version;
+					this.api('app/editor/static/preview-templates/ccc-devtools/version.json', (data) => {
+						let localVersion = data.version;
+						versionStatus = this.compareVersion(localVersion, remoteVersion);
+						this.$data.needUpdate = versionStatus;
+						console.groupCollapsed('ccc-devtoos')
+						console.log('本地版本：' + localVersion);
+						console.log('远程版本：' + remoteVersion);
+						console.log('更新地址：' + 'https://github.com/potato47/ccc-devtools.git');
+						console.groupEnd('ccc-devtoos');
+					});
+				});
+			},
 			handleRefreshTree() {
 				this.$data.sceneTreeData = [];
 				setTimeout(() => {
@@ -200,10 +277,9 @@
 			},
 			handleNodeClick(node) {
 				if (node) {
-					this.$data.propSchema = [];
 					this.$data.node = node;
 					cc.js.getset(node, 'hex_color', () => {
-						return '#' + node.color.toHEX();
+						return '#' + node.color.toHEX('#rrggbb');
 					}, (hex) => {
 						node.color = new cc.Color().fromHEX(hex);
 					}, false, true);
@@ -214,7 +290,33 @@
 							this.$data.node = null;
 						}
 					}
-					this.$data.propSchema = [NEX_CONFIG.propSchema.node2d];
+					this.$data.nodeSchema = this.$data.is3DNode ? NEX_CONFIG.nodeSchema.node3d : NEX_CONFIG.nodeSchema.node2d;
+					let componentsSchema = [];
+					for (let component of node._components) {
+						let schema = NEX_CONFIG.componentsSchema[component.__classname__];
+						if (schema) {
+							node[schema.key] = node.getComponent(schema.key);
+							for (let i = 0; i < schema.rows.length; i++) {
+								for (let j = 0; j < schema.rows[i].length; j++) {
+									if (schema.rows[i][j].type === 'color') {
+										cc.js.getset(node[schema.key], schema.rows[i][j].field, () => {
+											return '#' + node.getComponent(schema.key)[schema.rows[i][j].rawField].toHEX('#rrggbb');
+										}, (hex) => {
+											node.getComponent(schema.key)[schema.rows[i][j].rawField] = new cc.Color().fromHEX(hex);
+										}, false, true);
+									}
+								}
+							}
+						} else {
+							schema = {
+								title: component.__classname__,
+								key: component.__classname__
+							};
+							node[schema.key] = node.getComponent(schema.key);
+						}
+						componentsSchema.push(schema);
+					}
+					this.$data.componentsSchema = componentsSchema;
 				} else {
 					this.$data.node = null;
 				}
@@ -228,8 +330,14 @@
 				console.log('temp' + i);
 				console.log(window['temp' + i]);
 			},
-			outputComponentHandler(target) {
+			outputComponentHandler(data) {
-				// TODO
+				let i = 1;
+				while (window['temp' + i] !== undefined) {
+					i++;
+				}
+				window['temp' + i] = this.$data.node.getComponent(data);
+				console.log('temp' + i);
+				console.log(window['temp' + i]);
 			},
 			openGithub() {
 				window.open('https://github.com/potato47/ccc-devtools');
@@ -261,7 +369,6 @@
 							this.$data.sceneTreeData = [];
 						}, this);
 						clearInterval(this.$data.intervalId);
-						console.log('ccc-devtools init');
 					} else {
 						// console.log('cc is not init');
 					}
@@ -279,9 +386,52 @@
 				document.body.appendChild(document.getElementById('content'));
 				localStorage.setItem('isDevMode', 0);
 			},
+			handleChangeNodeSchema() {
+				if (this.is3DNode) {
+					this.is3DNode = false;
+				} else {
+					this.is3DNode = true;
+				}
+				this.$data.nodeSchema = this.$data.is3DNode ? NEX_CONFIG.nodeSchema.node3d : NEX_CONFIG.nodeSchema.node2d;
+			},
 			handleChangeMode(data) {
 				data ? this.openDevMode() : this.closeDevMode();
 			},
+			handleChangeStats() {
+				let panels = document.getElementsByClassName('statsPanel');
+				while (panels.length > 0) {
+					panels[0].parentElement.removeChild(panels[0]);
+				}
+				let newPanels = [];
+				let array = [];
+				this.$data.isShowFPS ? (array.push(0) && localStorage.setItem('isShowFPS', '1')) : localStorage.setItem(
+					'isShowFPS', '0');
+				this.$data.isShowMS ? (array.push(1) && localStorage.setItem('isShowMS', '1')) : localStorage.setItem('isShowMS',
+					'0');
+				this.$data.isShowMB ? (array.push(2) && localStorage.setItem('isShowMB', '1')) : localStorage.setItem('isShowMB',
+					'0');
+				for (let i of array) {
+					let stats = new Stats();
+					stats.showPanel(i); // 0: fps, 1: ms, 2: mb, 3+: custom
+					stats.dom.style.position = 'relative';
+					stats.dom.style.float = 'right';
+					stats.dom.style.marginLeft = '10px';
+					stats.dom.style.marginBottom = '10px';
+					stats.dom.style.pointerEvents = 'none';
+					stats.dom.className = 'statsPanel';
+					document.getElementById('panelCtl').appendChild(stats.dom);
+					newPanels.push(stats);
+				}
+
+				function animate() {
+					for (let i = 0; i < newPanels.length; i++) {
+						let stats = newPanels[i];
+						stats.update();
+					}
+					requestAnimationFrame(animate);
+				}
+				animate();
+			}
 		},
 		watch: {
 			filterText(val) {
@@ -289,66 +439,20 @@
 			}
 		},
 		created: function () {
+			this.checkVersion();
 			document.body.insertBefore(document.getElementById('app'), document.body.firstChild);
-			if (localStorage.getItem('isDevMode') === "1") {
+			if (localStorage.getItem('isDevMode') === '1') {
 				this.$data.isDevMode = true;
 				this.openDevMode();
 			} else {
 				this.$data.isDevMode = false;
 			}
+			this.$data.isShowFPS = localStorage.getItem('isShowFPS') === '1';
+			this.$data.isShowMS = localStorage.getItem('isShowMS') === '1';
+			this.$data.isShowMB = localStorage.getItem('isShowMB') === '1';
+			setTimeout(() => {
+				this.handleChangeStats();
+			}, 0);
 		}
 	});
 </script>
-
-<script>
-	// (function () {
-	// 	var script = document.createElement('script');
-	// 	script.src = 'https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
-	// 	document.head.appendChild(script);
-	// })()
-	// var stats = new Stats();
-	// stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
-	// document.body.appendChild(stats.dom);
-
-	// function animate() {
-
-	// 	stats.begin();
-
-	// 	// monitored code goes here
-
-	// 	stats.end();
-
-	// 	requestAnimationFrame(animate);
-
-	// }
-
-	// requestAnimationFrame(animate);
-
-	// var array = [];
-
-	// for (var i = 0; i < 500; i++) {
-
-	// 	var stats = new Stats();
-	// 	stats.dom.style.position = 'relative';
-	// 	stats.dom.style.float = 'left';
-	// 	document.body.appendChild(stats.dom);
-
-	// 	array.push(stats);
-
-	// }
-
-	// function animate() {
-
-	// 	for (var i = 0; i < array.length; i++) {
-
-	// 		var stats = array[i];
-	// 		stats.update();
-
-	// 	}
-
-	// 	requestAnimationFrame(animate);
-
-	// }
-
-	// animate();
-</script>

version.json

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