mirror of
https://github.com/potato47/ccc-devtools.git
synced 2024-12-26 03:39:16 +00:00
主题切换开关，目录结构
This commit is contained in:
Next
parent
b6febb5a2a
commit
dd6fdbea56
12
README.md
12
README.md
@ -1,4 +1,4 @@
|
|||||||
# ccc-devtools v2.1.1
|
# ccc-devtools v2.2.0
|
||||||
Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。
|
Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。
|
||||||
|
|
||||||
## 预览
|
## 预览
|
||||||
@ -22,7 +22,7 @@ v2.1.0: 区分手动刷新和自动刷新两种模式，手动刷新时支持搜
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
v2.1.2: 新增黑色主题
|
v2.2.0: 新增黑色主题(感谢[@wheatup](https://github.com/wheatup) )
|
||||||
|
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
@ -51,6 +51,14 @@ https://github.com/potato47/ccc-devtools
|
|||||||
|
|
||||||
如果没有更改源码，可直接在目录下 git pull
|
如果没有更改源码，可直接在目录下 git pull
|
||||||
|
|
||||||
|
论坛讨论地址：https://forum.cocos.com/t/creator-20190201/71578
|
||||||
|
|
||||||
|
## 贡献指南
|
||||||
|
|
||||||
|
- 版本号命名规则 https://semver.org/lang/zh-CN/ ,简单来讲，新功能第二位加一，修复bug第三位加一
|
||||||
|
- 如果新增功能请在README中添加预览截图说明
|
||||||
|
- 记得更新version.json中的版本号
|
||||||
|
|
||||||
## 本项目依赖以下开源项目
|
## 本项目依赖以下开源项目
|
||||||
|
|
||||||
https://github.com/vuejs/vue
|
https://github.com/vuejs/vue
|
||||||
|
|||||||
36
css/style.css
Normal file
36
css/style.css
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
body {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-color-picker, .el-color-picker__trigger {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input-number .el-input__inner {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input-number.is-controls-right .el-input__inner {
|
||||||
|
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;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase {
|
||||||
|
width: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select.el-select--mini {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
620
index.html
620
index.html
@ -1,67 +1,50 @@
|
|||||||
<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/libs/vue-beauty/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/libs/element/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/libs/iview/css/iview.css">
|
||||||
<link rel="stylesheet" href="app/editor/static/preview-templates/ccc-devtools/css/themes/dark.css">
|
<link rel="stylesheet" href="app/editor/static/preview-templates/ccc-devtools/css/style.css">
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
.el-color-picker, .el-color-picker__trigger {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
.el-input-number .el-input__inner {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.el-input-number.is-controls-right .el-input__inner {
|
|
||||||
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;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase {
|
|
||||||
width: 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.el-select.el-select--mini {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="demo-split">
|
<div class="demo-split">
|
||||||
<Split v-model="splitLeft" v-if="isDevMode">
|
<Split v-model="splitLeft" v-if="isDevMode">
|
||||||
<div slot="left" class="demo-split-pane" id="game_panel" style="display:flex;justify-content:left;align-items:center;height: 100vh;">
|
<!-- 左边游戏预览区域 -->
|
||||||
|
<div slot="left" class="demo-split-pane" id="game_panel"
|
||||||
|
style="display:flex;justify-content:left;align-items:center;height: 100vh;">
|
||||||
<div id="top" style="position: absolute;top:0;"></div>
|
<div id="top" style="position: absolute;top:0;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 右边节点树和属性区域 -->
|
||||||
<div slot="right" class="demo-split-pane no-padding">
|
<div slot="right" class="demo-split-pane no-padding">
|
||||||
<Split v-model="splitRight" mode="vertical">
|
<Split v-model="splitRight" mode="vertical">
|
||||||
|
<!-- 节点树面板 -->
|
||||||
<div slot="top" class="demo-split-pane" style="padding-left: 5px;">
|
<div slot="top" class="demo-split-pane" style="padding-left: 5px;">
|
||||||
<el-input v-if="!isAutoRefreshTree" placeholder="搜索节点" v-model="filterText" size="mini" id="searchInput"></el-input>
|
<el-input v-if="!isAutoRefreshTree" placeholder="搜索节点" v-model="filterText" size="mini"
|
||||||
<v-tree v-if="isDevMode&&isAutoRefreshTree" :data="sceneTreeData" ref="sceneTree" @select="handleNodesSelect"
|
id="searchInput"></el-input>
|
||||||
style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;"></v-tree>
|
<v-tree v-if="isDevMode&&isAutoRefreshTree" :data="sceneTreeData" ref="sceneTree"
|
||||||
<el-tree v-if="isDevMode&&!isAutoRefreshTree" :data="sceneTreeData" :draggable="true" :props="nodeProps"
|
@select="handleNodesSelect"
|
||||||
:default-expanded-keys="defaultExpandedKeys" empty-text="暂无数据..." :node-key="'_id'" :expand-on-click-node="false"
|
style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;">
|
||||||
:filter-node-method="filterNode" ref="sceneTree" @node-click="handleNodeClick" style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;">
|
</v-tree>
|
||||||
|
<el-tree v-if="isDevMode&&!isAutoRefreshTree" :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;">
|
||||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
<span v-bind:style="{color: data.activeInHierarchy?'#606266':'#C0C4CC'}">{{ node.label }}</span>
|
<span
|
||||||
|
v-bind:style="{color: data.activeInHierarchy?'#606266':'#C0C4CC'}">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
<el-button v-if="!isAutoRefreshTree" @click="handleRefreshTree" icon="el-icon-refresh" size="mini" style="position: absolute;right:0;top:0;"></el-button>
|
<el-button v-if="!isAutoRefreshTree" @click="handleRefreshTree" icon="el-icon-refresh"
|
||||||
|
size="mini" style="position: absolute;right:0;top:0;"></el-button>
|
||||||
<div style="position: absolute;right:0;bottom:0;width: 100px;height:20px;">
|
<div style="position: absolute;right:0;bottom:0;width: 100px;height:20px;">
|
||||||
<span style="line-height:20px;">自动刷新</span>
|
<span style="line-height:20px;">自动刷新</span>
|
||||||
<el-switch v-model="isAutoRefreshTree" active-color="#0099ff" inactive-color="gray"></el-switch>
|
<el-switch v-model="isAutoRefreshTree" active-color="#0099ff" inactive-color="gray">
|
||||||
|
</el-switch>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <el-button @click="handleSwitchTreeMode" icon="el-icon-refresh" size="mini" style="position: absolute;right:0;bottom:0;"></el-button> -->
|
<!-- <el-button @click="handleSwitchTreeMode" icon="el-icon-refresh" size="mini" style="position: absolute;right:0;bottom:0;"></el-button> -->
|
||||||
</div>
|
</div>
|
||||||
<div slot="bottom" class="demo-split-pane" style="background: white;min-width: 250px;height: 100%;padding:5px 0;overflow-x:hidden;overflow-y:auto;">
|
<!-- 节点属性面板 -->
|
||||||
|
<div slot="bottom" class="demo-split-pane"
|
||||||
|
style="background: white;min-width: 250px;height: 100%;padding:5px 0;overflow-x:hidden;overflow-y:auto;">
|
||||||
<div v-if="node">
|
<div v-if="node">
|
||||||
<el-row style="margin:5px 0;">
|
<el-row style="margin:5px 0;">
|
||||||
<el-col :span="2" style="text-align:center;padding-top:7px;padding-left:5px;">
|
<el-col :span="2" style="text-align:center;padding-top:7px;padding-left:5px;">
|
||||||
@ -72,51 +55,70 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
<div style="width: 100%;height:28px;border: solid 1px rgb(220, 223, 230);border-radius: 4px;text-align: center;"
|
<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>
|
@click="handleChangeNodeSchema"><span style="line-height: 28px;"
|
||||||
|
:style="{color: is3DNode?'#409EFF':'#606266'}">2.5d</span></div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-card v-if="nodeSchema">
|
<el-card v-if="nodeSchema">
|
||||||
<div>
|
<div>
|
||||||
<span>{{ nodeSchema.title }}</span>
|
<span>{{ nodeSchema.title }}</span>
|
||||||
<el-button style="float: right; padding: 3px 0;" type="text" @click="outputNodeHandler">输出引用</el-button>
|
<el-button style="float: right; padding: 3px 0;" type="text"
|
||||||
<el-button style="float: right; padding: 3px 0;margin-right: 10px;" type="text" @click="drawNodeRect">标记位置</el-button>
|
@click="outputNodeHandler">输出引用</el-button>
|
||||||
|
<el-button style="float: right; padding: 3px 0;margin-right: 10px;" type="text"
|
||||||
|
@click="drawNodeRect">标记位置</el-button>
|
||||||
</div>
|
</div>
|
||||||
<hr style="margin: 10px 0;" />
|
<hr style="margin: 10px 0;" />
|
||||||
<div>
|
<div>
|
||||||
<el-row style="height: 28px;margin-bottom:3px;" v-for="(row, ri) in nodeSchema.rows" :key="ri">
|
<el-row style="height: 28px;margin-bottom:3px;" v-for="(row, ri) in nodeSchema.rows"
|
||||||
<el-col v-for="(col, ci) in row" :key="ci" :span="col.span" style="text-align: left;line-height: 28px;">
|
: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>
|
<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"
|
<el-input-number v-if="col.type == 'number'" v-model="node[col.field]"
|
||||||
style="width: 100%;"></el-input-number>
|
controls-position="right" size="mini" style="width: 100%;">
|
||||||
<el-input-number v-if="col.type == '3DAngle'" v-model="node.eulerAngles[col.field]" controls-position="right"
|
</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>
|
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-input v-if="col.type == 'input'" v-model="node[col.field]" size="mini">
|
||||||
<el-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini" v-model="node[col.field]"></el-color-picker>
|
</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-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card v-for="(section,index) in componentsSchema" :key="section.key" style="margin: 10px 0;">
|
<el-card v-for="(section,index) in componentsSchema" :key="section.key"
|
||||||
|
style="margin: 10px 0;">
|
||||||
<div>
|
<div>
|
||||||
<el-checkbox v-model="node[section.key].enabled">{{ section.title }}</el-checkbox>
|
<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>
|
<el-button style="float: right; padding: 3px 0" type="text"
|
||||||
|
@click="outputComponentHandler(section.key)">输出引用</el-button>
|
||||||
</div>
|
</div>
|
||||||
<hr v-if="section.rows" style="margin: 10px 0;" />
|
<hr v-if="section.rows" style="margin: 10px 0;" />
|
||||||
<div>
|
<div>
|
||||||
<el-row style="height: 28px;margin-bottom:3px;" v-for="(row,ri) in section.rows" :key="ri">
|
<el-row style="height: 28px;margin-bottom:3px;" v-for="(row,ri) in section.rows"
|
||||||
<el-col v-for="(col,ci) in row" :key="ci" :span="col.span" style="text-align: left;line-height: 28px;">
|
: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>
|
<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"
|
<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>
|
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 == 'input'" v-model="node[section.key][col.field]"
|
||||||
<el-input v-if="col.type == 'textarea'" type="textarea" :rows="1" v-model="node[section.key][col.field]"
|
size="mini"></el-input>
|
||||||
size="mini">
|
<el-input v-if="col.type == 'textarea'" type="textarea" :rows="1"
|
||||||
|
v-model="node[section.key][col.field]" size="mini">
|
||||||
</el-input>
|
</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-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini"
|
||||||
<el-checkbox v-if="col.type == 'bool'" v-model="node[section.key][col.field]"></el-checkbox>
|
v-model="node[section.key][col.field]"></el-color-picker>
|
||||||
<el-select v-if="col.type == 'select'" v-model="node[section.key][col.field]" size="mini">
|
<el-checkbox v-if="col.type == 'bool'"
|
||||||
<el-option v-for="item in col.options" :key="item.value" :label="item.label" :value="item.value">
|
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-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -128,6 +130,7 @@
|
|||||||
</Split>
|
</Split>
|
||||||
</div>
|
</div>
|
||||||
</Split>
|
</Split>
|
||||||
|
<!-- 控制按钮 -->
|
||||||
<div id="panelCtl" style="position:absolute;left:5px;top:50px;height: 50px;display: flex;align-items: center;">
|
<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-popover width="150" placement="top-start" trigger="click">
|
||||||
<el-button type="info" icon="el-icon-setting" circle slot="reference" size="mini"></el-button>
|
<el-button type="info" icon="el-icon-setting" circle slot="reference" size="mini"></el-button>
|
||||||
@ -137,8 +140,8 @@
|
|||||||
节点树
|
节点树
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff"
|
<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode"
|
||||||
inactive-color="gray">
|
active-color="#0099ff" inactive-color="gray">
|
||||||
</el-switch>
|
</el-switch>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -147,8 +150,8 @@
|
|||||||
FPS
|
FPS
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-switch style="margin: 5px;" v-model="isShowFPS" @change="handleChangeStats" active-color="#0099ff"
|
<el-switch style="margin: 5px;" v-model="isShowFPS" @change="handleChangeStats"
|
||||||
inactive-color="gray">
|
active-color="#0099ff" inactive-color="gray">
|
||||||
</el-switch>
|
</el-switch>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -157,8 +160,8 @@
|
|||||||
帧时间
|
帧时间
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-switch style="margin: 5px;" v-model="isShowMS" @change="handleChangeStats" active-color="#0099ff"
|
<el-switch style="margin: 5px;" v-model="isShowMS" @change="handleChangeStats"
|
||||||
inactive-color="gray">
|
active-color="#0099ff" inactive-color="gray">
|
||||||
</el-switch>
|
</el-switch>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -167,8 +170,29 @@
|
|||||||
内存
|
内存
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-switch style="margin: 5px;" v-model="isShowMB" @change="handleChangeStats" active-color="#0099ff"
|
<el-switch style="margin: 5px;" v-model="isShowMB" @change="handleChangeStats"
|
||||||
inactive-color="gray">
|
active-color="#0099ff" inactive-color="gray">
|
||||||
|
</el-switch>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- TODO: -->
|
||||||
|
<!-- <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="isShowCache" @change="handleChangeCachePanel"
|
||||||
|
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="isDarkTheme" @change="handleChangeTheme"
|
||||||
|
active-color="#0099ff" inactive-color="gray">
|
||||||
</el-switch>
|
</el-switch>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -186,430 +210,26 @@
|
|||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 缓存面板弹窗 -->
|
||||||
|
<Modal v-model="isShowCache" width="800" :mask-closable="false" :mask="false" scrollable @on-cancel="closeCachePanel()" :title="cacheTitle" footer-hide="true">
|
||||||
|
<i-table border :columns="cacheColumns" height="600" size="small" :data="cacheData" :loading="cacheDataLoading">
|
||||||
|
<template slot-scope="{ row, index }" slot="cache_preview">
|
||||||
|
<img :src="window.location.href + row.id" style="max-height: 40px;max-width: 120px;" v-if="row.type === 'png' || row.type === 'jpg'">
|
||||||
|
<div v-if="row.type !== 'png' && row.type !== 'jpg'" style="max-height: 40px;">_</div>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="{ row, index }" slot="cache_action">
|
||||||
|
<i-button type="primary" size="small" @click="showCacheItem(row.id)">Detail</i-button>
|
||||||
|
<i-button type="error" size="small" @click="releaseCacheItem(row.id)">Release</i-button>
|
||||||
|
</template>
|
||||||
|
</i-table>
|
||||||
|
</Modal>
|
||||||
</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/libs/vue/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 type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/vue-beauty/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/libs/element/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/libs/iview/js/iview.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" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/stats/stats.min.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/app.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
|
|
||||||
<script>
|
|
||||||
let app = new Vue({
|
|
||||||
el: '#app',
|
|
||||||
data: {
|
|
||||||
needUpdate: false,
|
|
||||||
is3DNode: false,
|
|
||||||
isDevMode: false,
|
|
||||||
isShowFPS: false,
|
|
||||||
isShowMS: false,
|
|
||||||
isShowMB: false,
|
|
||||||
isAutoRefreshTree: true,
|
|
||||||
filterText: '',
|
|
||||||
splitLeft: 0.7,
|
|
||||||
splitRight: 0.5,
|
|
||||||
defaultExpandedKeys: [],
|
|
||||||
sceneTreeData: [],
|
|
||||||
nodeProps: {
|
|
||||||
children: 'children',
|
|
||||||
label: 'name',
|
|
||||||
isLeaf: 'leaf'
|
|
||||||
},
|
|
||||||
node: null,
|
|
||||||
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(() => {
|
|
||||||
this.updateTreeData();
|
|
||||||
}, 0);
|
|
||||||
},
|
|
||||||
handleSwitchTreeMode() {
|
|
||||||
|
|
||||||
},
|
|
||||||
updateTreeData() {
|
|
||||||
this.$data.sceneTreeData = cc.director.getScene().children;
|
|
||||||
this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
|
|
||||||
},
|
|
||||||
handleNodesSelect(nodes) {
|
|
||||||
if (nodes.length === 1) {
|
|
||||||
this.handleNodeClick(nodes[0]);
|
|
||||||
} else {
|
|
||||||
this.handleNodeClick(null);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleNodeClick(node) {
|
|
||||||
if (node) {
|
|
||||||
this.$data.node = node;
|
|
||||||
cc.js.getset(node, 'hex_color', () => {
|
|
||||||
return '#' + node.color.toHEX('#rrggbb');
|
|
||||||
}, (hex) => {
|
|
||||||
node.color = new cc.Color().fromHEX(hex);
|
|
||||||
}, false, true);
|
|
||||||
let superPreLoad = node._onPreDestroy;
|
|
||||||
node._onPreDestroy = () => {
|
|
||||||
superPreLoad.apply(node);
|
|
||||||
if (this.$data && this.$data.node === node) {
|
|
||||||
this.$data.node = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
outputNodeHandler(target) {
|
|
||||||
let i = 1;
|
|
||||||
while (window['temp' + i] !== undefined) {
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
window['temp' + i] = this.$data.node;
|
|
||||||
console.log('temp' + i);
|
|
||||||
console.log(window['temp' + i]);
|
|
||||||
},
|
|
||||||
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]);
|
|
||||||
},
|
|
||||||
drawNodeRect(node) {
|
|
||||||
cc.where(this.$data.node);
|
|
||||||
},
|
|
||||||
openGithub() {
|
|
||||||
window.open('https://github.com/potato47/ccc-devtools');
|
|
||||||
},
|
|
||||||
filterNode(value, node) {
|
|
||||||
if (!value) return true;
|
|
||||||
return node.name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
|
|
||||||
},
|
|
||||||
openDevMode() {
|
|
||||||
setTimeout(() => {
|
|
||||||
cc.js.getset(cc.Node.prototype, 'isLeaf', function () {
|
|
||||||
return this.childrenCount === 0;
|
|
||||||
}, function (value) {
|
|
||||||
|
|
||||||
}, false, true);
|
|
||||||
let top = document.getElementById('top')
|
|
||||||
top.appendChild(document.getElementsByClassName('toolbar')[0]);
|
|
||||||
document.getElementById('game_panel').appendChild(document.getElementById('content'));
|
|
||||||
let scene = cc.director.getScene();
|
|
||||||
if (scene) {
|
|
||||||
this.updateTreeData();
|
|
||||||
}
|
|
||||||
cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, () => {
|
|
||||||
this.updateTreeData();
|
|
||||||
}, this);
|
|
||||||
cc.director.on(cc.Director.EVENT_BEFORE_SCENE_LOADING, () => {
|
|
||||||
this.$data.node = null;
|
|
||||||
this.$data.sceneTreeData = [];
|
|
||||||
this.$data.treeParam = [];
|
|
||||||
}, this);
|
|
||||||
localStorage.setItem('isDevMode', 1);
|
|
||||||
}, 0);
|
|
||||||
},
|
|
||||||
closeDevMode() {
|
|
||||||
this.$data.node = null;
|
|
||||||
this.$data.sceneTreeData = [];
|
|
||||||
cc.director.targetOff(this);
|
|
||||||
clearInterval(this.$data.intervalId);
|
|
||||||
document.body.appendChild(document.getElementsByClassName('toolbar')[0]);
|
|
||||||
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();
|
|
||||||
},
|
|
||||||
fitFullScreen() {
|
|
||||||
document.getElementsByClassName('toolbar')[0].style.display = 'none';
|
|
||||||
let gameDiv = document.getElementById('GameDiv');
|
|
||||||
let gameContainer = document.getElementById('Cocos2dGameContainer');
|
|
||||||
let gameCanvas = document.getElementById('GameCanvas');
|
|
||||||
gameDiv.style.width = '100%';
|
|
||||||
gameDiv.style.height = '100%';
|
|
||||||
gameCanvas.style.width = '100%';
|
|
||||||
gameCanvas.style.height = '100%';
|
|
||||||
// document.body.style.cssText+="-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg)";
|
|
||||||
},
|
|
||||||
initConsoleUtil() {
|
|
||||||
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 borderNode = new cc.Node();
|
|
||||||
let bgNode = new cc.Node();
|
|
||||||
let graphics = bgNode.addComponent(cc.Graphics);
|
|
||||||
let canvas = cc.find('Canvas');
|
|
||||||
canvas.addChild(bgNode);
|
|
||||||
bgNode.addChild(borderNode);
|
|
||||||
bgNode.position = canvas.convertToNodeSpaceAR(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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
filterText(val) {
|
|
||||||
this.$refs.sceneTree.filter(val);
|
|
||||||
// console.log(val);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
this.checkVersion();
|
|
||||||
document.body.insertBefore(document.getElementById('app'), document.body.firstChild);
|
|
||||||
|
|
||||||
let onCCInit = () => {
|
|
||||||
this.initConsoleUtil();
|
|
||||||
if (cc.sys.isMobile) {
|
|
||||||
this.fitFullScreen();
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
let checkCC = () => {
|
|
||||||
if (window.cc) {
|
|
||||||
onCCInit();
|
|
||||||
clearInterval(this.$data.intervalId);
|
|
||||||
} else {
|
|
||||||
// console.log('cc is not init');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$data.intervalId = setInterval(checkCC, 500);
|
|
||||||
setTimeout(checkCC, 0);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|||||||
579
js/app.js
Normal file
579
js/app.js
Normal file
@ -0,0 +1,579 @@
|
|||||||
|
let app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
needUpdate: false,
|
||||||
|
is3DNode: false,
|
||||||
|
isDevMode: false,
|
||||||
|
isShowFPS: false,
|
||||||
|
isShowMS: false,
|
||||||
|
isShowMB: false,
|
||||||
|
isShowCache: false,
|
||||||
|
isAutoRefreshTree: true,
|
||||||
|
isDarkTheme: false,
|
||||||
|
filterText: '',
|
||||||
|
splitLeft: 0.7,
|
||||||
|
splitRight: 0.5,
|
||||||
|
defaultExpandedKeys: [],
|
||||||
|
sceneTreeData: [],
|
||||||
|
nodeProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name',
|
||||||
|
isLeaf: 'leaf'
|
||||||
|
},
|
||||||
|
node: null,
|
||||||
|
nodeSchema: {},
|
||||||
|
componentsSchema: [],
|
||||||
|
intervalId: -1,
|
||||||
|
cacheTitle: '缓存',
|
||||||
|
cacheColumns: [{
|
||||||
|
title: 'Type',
|
||||||
|
key: 'content',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
filters: [{
|
||||||
|
label: 'png',
|
||||||
|
value: 'png'
|
||||||
|
}, {
|
||||||
|
label: 'jpg',
|
||||||
|
value: 'jpg'
|
||||||
|
}, {
|
||||||
|
label: 'cc.Texture2D',
|
||||||
|
value: 'cc.Texture2D'
|
||||||
|
}, {
|
||||||
|
label: 'cc.SpriteFrame',
|
||||||
|
value: 'cc.SpriteFrame'
|
||||||
|
}, {
|
||||||
|
label: 'cc.Sprite',
|
||||||
|
value: 'cc.Sprite'
|
||||||
|
}, {
|
||||||
|
label: 'cc.Prefab',
|
||||||
|
value: 'cc.Prefab'
|
||||||
|
}, {
|
||||||
|
label: 'cc.AnimationClip',
|
||||||
|
value: 'cc.AnimationClip'
|
||||||
|
}],
|
||||||
|
filterMultiple: false,
|
||||||
|
filterMethod(value, row) {
|
||||||
|
return row.content === value;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
title: 'Name',
|
||||||
|
key: 'name',
|
||||||
|
width: 220,
|
||||||
|
align: 'center',
|
||||||
|
sortable: true
|
||||||
|
}, {
|
||||||
|
title: 'Size',
|
||||||
|
key: 'size',
|
||||||
|
align: 'center',
|
||||||
|
width: 120,
|
||||||
|
sortable: true
|
||||||
|
}, {
|
||||||
|
title: 'Queue',
|
||||||
|
key: 'queueId',
|
||||||
|
sortable: true,
|
||||||
|
width: 120,
|
||||||
|
align: 'center'
|
||||||
|
}, {
|
||||||
|
title: 'Preview',
|
||||||
|
slot: 'cache_preview',
|
||||||
|
align: 'center',
|
||||||
|
width: 150
|
||||||
|
}, {
|
||||||
|
title: 'Action',
|
||||||
|
slot: 'cache_action',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
fixed: 'right'
|
||||||
|
}],
|
||||||
|
cacheData: [],
|
||||||
|
cacheDataLoading: false
|
||||||
|
},
|
||||||
|
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(() => {
|
||||||
|
this.updateTreeData();
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
handleSwitchTreeMode() {
|
||||||
|
|
||||||
|
},
|
||||||
|
updateTreeData() {
|
||||||
|
this.$data.sceneTreeData = cc.director.getScene().children;
|
||||||
|
this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
|
||||||
|
},
|
||||||
|
handleNodesSelect(nodes) {
|
||||||
|
if (nodes.length === 1) {
|
||||||
|
this.handleNodeClick(nodes[0]);
|
||||||
|
} else {
|
||||||
|
this.handleNodeClick(null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNodeClick(node) {
|
||||||
|
if (node) {
|
||||||
|
this.$data.node = node;
|
||||||
|
cc.js.getset(node, 'hex_color', () => {
|
||||||
|
return '#' + node.color.toHEX('#rrggbb');
|
||||||
|
}, (hex) => {
|
||||||
|
node.color = new cc.Color().fromHEX(hex);
|
||||||
|
}, false, true);
|
||||||
|
let superPreLoad = node._onPreDestroy;
|
||||||
|
node._onPreDestroy = () => {
|
||||||
|
superPreLoad.apply(node);
|
||||||
|
if (this.$data && this.$data.node === node) {
|
||||||
|
this.$data.node = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
outputNodeHandler(target) {
|
||||||
|
let i = 1;
|
||||||
|
while (window['temp' + i] !== undefined) {
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
window['temp' + i] = this.$data.node;
|
||||||
|
console.log('temp' + i);
|
||||||
|
console.log(window['temp' + i]);
|
||||||
|
},
|
||||||
|
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]);
|
||||||
|
},
|
||||||
|
drawNodeRect(node) {
|
||||||
|
cc.where(this.$data.node);
|
||||||
|
},
|
||||||
|
releaseCacheItem(id) {
|
||||||
|
console.log('resease item ', id);
|
||||||
|
cc.loader.release(id);
|
||||||
|
},
|
||||||
|
showCacheItem(id) {
|
||||||
|
console.log(cc.loader._cache[id]);
|
||||||
|
},
|
||||||
|
openGithub() {
|
||||||
|
window.open('https://github.com/potato47/ccc-devtools');
|
||||||
|
},
|
||||||
|
filterNode(value, node) {
|
||||||
|
if (!value) return true;
|
||||||
|
return node.name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
|
||||||
|
},
|
||||||
|
openCachePanel() {
|
||||||
|
console.log('open cache panel');
|
||||||
|
this.$data.cacheDataLoading = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
let rawCacheData = cc.loader._cache;
|
||||||
|
let cacheData = [];
|
||||||
|
for (let k in rawCacheData) {
|
||||||
|
let item = rawCacheData[k];
|
||||||
|
// console.log(item)
|
||||||
|
if (item.type !== 'js' && item.type !== 'json') {
|
||||||
|
let itemName = '_';
|
||||||
|
if (item.type === 'png' && item.type !== 'jpg') {
|
||||||
|
let texture = rawCacheData[k.replace('.png', '.json')];
|
||||||
|
if (texture && texture._owner && texture._owner._name) {
|
||||||
|
itemName = texture._owner._name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (item.content.name && item.content.name.length > 0) {
|
||||||
|
itemName = item.content.name;
|
||||||
|
} else if (item._owner) {
|
||||||
|
itemName = item._owner.name || '_';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cacheData.push({
|
||||||
|
queueId: item.queueId,
|
||||||
|
type: item.type,
|
||||||
|
name: itemName,
|
||||||
|
id: item.id,
|
||||||
|
content: item.content.__classname__ ? item.content.__classname__ : item.type,
|
||||||
|
size: Math.random() * 10000 | 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$data.cacheData = cacheData;
|
||||||
|
this.$data.cacheTitle = `缓存 [文件总数:${cacheData.length}]`;
|
||||||
|
this.$data.cacheDataLoading = false;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
},
|
||||||
|
closeCachePanel() {
|
||||||
|
console.log('close cache panel');
|
||||||
|
this.$data.cacheData = [];
|
||||||
|
this.$data.cacheTitle = `缓存`;
|
||||||
|
},
|
||||||
|
openDevMode() {
|
||||||
|
setTimeout(() => {
|
||||||
|
cc.js.getset(cc.Node.prototype, 'isLeaf', function () {
|
||||||
|
return this.childrenCount === 0;
|
||||||
|
}, function (value) {
|
||||||
|
|
||||||
|
}, false, true);
|
||||||
|
let top = document.getElementById('top')
|
||||||
|
top.appendChild(document.getElementsByClassName('toolbar')[0]);
|
||||||
|
document.getElementById('game_panel').appendChild(document.getElementById('content'));
|
||||||
|
let scene = cc.director.getScene();
|
||||||
|
if (scene) {
|
||||||
|
this.updateTreeData();
|
||||||
|
}
|
||||||
|
cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, () => {
|
||||||
|
this.updateTreeData();
|
||||||
|
}, this);
|
||||||
|
cc.director.on(cc.Director.EVENT_BEFORE_SCENE_LOADING, () => {
|
||||||
|
this.$data.node = null;
|
||||||
|
this.$data.sceneTreeData = [];
|
||||||
|
this.$data.treeParam = [];
|
||||||
|
}, this);
|
||||||
|
localStorage.setItem('isDevMode', 1);
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
closeDevMode() {
|
||||||
|
this.$data.node = null;
|
||||||
|
this.$data.sceneTreeData = [];
|
||||||
|
cc.director.targetOff(this);
|
||||||
|
clearInterval(this.$data.intervalId);
|
||||||
|
document.body.appendChild(document.getElementsByClassName('toolbar')[0]);
|
||||||
|
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();
|
||||||
|
},
|
||||||
|
handleChangeCachePanel(data) {
|
||||||
|
data ? this.openCachePanel() : this.closeCachePanel();
|
||||||
|
},
|
||||||
|
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();
|
||||||
|
},
|
||||||
|
handleChangeTheme(isDark) {
|
||||||
|
isDark ? this.addDarkTheme() : this.removeDarkTheme();
|
||||||
|
},
|
||||||
|
// 添加暗色主题
|
||||||
|
addDarkTheme() {
|
||||||
|
let link = document.createElement('link');
|
||||||
|
link.type = 'text/css';
|
||||||
|
link.id = "theme-css-dark";
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.href = 'app/editor/static/preview-templates/ccc-devtools/css/themes/dark.css';
|
||||||
|
document.getElementsByTagName("head")[0].appendChild(link);
|
||||||
|
localStorage.setItem('isDarkTheme', 1);
|
||||||
|
},
|
||||||
|
// 删除暗色主题
|
||||||
|
removeDarkTheme() {
|
||||||
|
document.getElementById('theme-css-dark').remove();
|
||||||
|
localStorage.setItem('isDarkTheme', 0);
|
||||||
|
},
|
||||||
|
fitFullScreen() {
|
||||||
|
document.getElementsByClassName('toolbar')[0].style.display = 'none';
|
||||||
|
let gameDiv = document.getElementById('GameDiv');
|
||||||
|
let gameContainer = document.getElementById('Cocos2dGameContainer');
|
||||||
|
let gameCanvas = document.getElementById('GameCanvas');
|
||||||
|
gameDiv.style.width = '100%';
|
||||||
|
gameDiv.style.height = '100%';
|
||||||
|
gameCanvas.style.width = '100%';
|
||||||
|
gameCanvas.style.height = '100%';
|
||||||
|
// document.body.style.cssText+="-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg)";
|
||||||
|
},
|
||||||
|
initProfiler() {
|
||||||
|
let profiler = cc.find('PROFILER-NODE');
|
||||||
|
if (profiler) {
|
||||||
|
cc.log(profiler);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initConsoleUtil() {
|
||||||
|
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 borderNode = new cc.Node();
|
||||||
|
let bgNode = new cc.Node();
|
||||||
|
let graphics = bgNode.addComponent(cc.Graphics);
|
||||||
|
let canvas = cc.find('Canvas');
|
||||||
|
canvas.addChild(bgNode);
|
||||||
|
bgNode.addChild(borderNode);
|
||||||
|
bgNode.position = canvas.convertToNodeSpaceAR(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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.sceneTree.filter(val);
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function () {
|
||||||
|
this.checkVersion();
|
||||||
|
document.body.insertBefore(document.getElementById('app'), document.body.firstChild);
|
||||||
|
|
||||||
|
let onCCInit = () => {
|
||||||
|
this.initProfiler();
|
||||||
|
this.initConsoleUtil();
|
||||||
|
if (cc.sys.isMobile) {
|
||||||
|
this.fitFullScreen();
|
||||||
|
}
|
||||||
|
if (localStorage.getItem('isDevMode') === '1') {
|
||||||
|
this.$data.isDevMode = true;
|
||||||
|
this.openDevMode();
|
||||||
|
} else {
|
||||||
|
this.$data.isDevMode = false;
|
||||||
|
}
|
||||||
|
if (localStorage.getItem('isDarkTheme') === '1') {
|
||||||
|
this.$data.isDarkTheme = true;
|
||||||
|
this.addDarkTheme();
|
||||||
|
} else {
|
||||||
|
this.$data.isDarkTheme = 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);
|
||||||
|
}
|
||||||
|
let checkCC = () => {
|
||||||
|
if (window.cc) {
|
||||||
|
onCCInit();
|
||||||
|
clearInterval(this.$data.intervalId);
|
||||||
|
} else {
|
||||||
|
// console.log('cc is not init');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$data.intervalId = setInterval(checkCC, 500);
|
||||||
|
setTimeout(checkCC, 0);
|
||||||
|
},
|
||||||
|
});
|
||||||
0
js/vue.min.js → libs/vue/vue.min.js
vendored
0
js/vue.min.js → libs/vue/vue.min.js
vendored
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "ccc-devtools",
|
"name": "ccc-devtools",
|
||||||
"version": "2.1.2",
|
"version": "2.2.0",
|
||||||
"author": "Next",
|
"author": "Next",
|
||||||
"repo": "https://github.com/potato47/ccc-devtools.git"
|
"repo": "https://github.com/potato47/ccc-devtools.git"
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user