mirror of
https://github.com/potato47/ccc-devtools.git
synced 2024-12-25 11:19:10 +00:00
显示组件信息，2.5d节点切换，显示内存等常用部件，更新提醒
This commit is contained in:
Next
parent
a89f60cf29
commit
a8c0f5abf3
27
README.md
27
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
|
||||
|
||||
|
||||
v1.1.0: 拖拽节点，增加开关
|
||||
@ -24,6 +25,10 @@ v1.2.0: 控制台输出节点信息
|
||||
|
||||
|
||||
|
||||
v2.0.0: 节点信息自动同步，避免手动刷新。增加组件信息显示。增加内存、FPS、渲染时间显示。更新提醒。
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录
|
||||
@ -41,9 +46,23 @@ v1.2.0: 控制台输出节点信息
|
||||
|
||||
## 已知问题
|
||||
|
||||
- 当有大量节点动态加载时，可能需要手动点击一下右上角的刷新按钮来重载节点树。
|
||||
- 当升级 Cococs Creator 时会清空resources目录，需要重新下载配置，如自定义了一些配置，请做好备份。
|
||||
- 开启节点树会增加渲染消耗，非调试阶段请关闭。
|
||||
|
||||
## 需求、更新
|
||||
|
||||
https://github.com/potato47/ccc-devtools
|
||||
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
|
||||
|
||||
473
config.js
473
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,
|
||||
field: 'hex_color'
|
||||
span: 18,
|
||||
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
|
||||
}]
|
||||
}],
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
414
index.html
414
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,120 +59,143 @@
|
||||
<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-button icon="el-icon-search" @click="outputNodeHandler" size="mini" circle></el-button>
|
||||
<el-col :span="4">
|
||||
<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">
|
||||
<Panel :name="index+''" v-for="(section,index) in propSchema" :key="section.key">
|
||||
{{ section.title }}
|
||||
<div slot="content">
|
||||
<el-row style="height: 28px;margin-bottom:3px;" v-for="row in section.rows" :key="row.key">
|
||||
<el-col v-for="col in row" :key="col.key" :span="col.span" style="text-align: left;line-height: 28px;">
|
||||
<span v-if="col.type == 'label'">{{col.value}}</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 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>
|
||||
<Panel name="2">
|
||||
Components
|
||||
<p slot="content">Coming soon...</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<el-card v-if="nodeSchema">
|
||||
<div>
|
||||
<span>{{ nodeSchema.title }}</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="outputNodeHandler">输出引用</el-button>
|
||||
</div>
|
||||
<hr style="margin: 10px 0;" />
|
||||
<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>
|
||||
</el-card>
|
||||
<el-card v-for="(section,index) in componentsSchema" :key="section.key" style="margin: 10px 0;">
|
||||
<div>
|
||||
<el-checkbox v-model="node[section.key].enabled">{{ section.title }}</el-checkbox>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="outputComponentHandler(section.key)">输出引用</el-button>
|
||||
</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">
|
||||
<el-button type="info" icon="el-icon-setting" circle slot="reference" size="mini"></el-button>
|
||||
<div>
|
||||
<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-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <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"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</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-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</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-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</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">
|
||||
<Icon style="margin: 5px;" type="logo-github" size="24" @click="openGithub" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-popover>
|
||||
<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;">
|
||||
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
|
||||
节点树
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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="isShowFPS" @change="handleChangeStats" active-color="#0099ff"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</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-switch style="margin: 5px;" v-model="isShowMS" @change="handleChangeStats" active-color="#0099ff"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</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-switch style="margin: 5px;" v-model="isShowMB" @change="handleChangeStats" active-color="#0099ff"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</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 = {
|
||||
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({
|
||||
let 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) {
|
||||
// TODO
|
||||
outputComponentHandler(data) {
|
||||
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>
|
||||
BIN
screenshots/preview2.png
Normal file
BIN
screenshots/preview2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
@ -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"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user