mirror of
https://github.com/potato47/ccc-devtools.git
synced 2024-12-25 19:29:13 +00:00
354 lines
12 KiB
HTML
354 lines
12 KiB
HTML
<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 {
|
|
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;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|
|
<div id="app">
|
|
<div class="demo-split">
|
|
<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 id="top" style="position: absolute;top:0;"></div>
|
|
</div>
|
|
<div slot="right" class="demo-split-pane no-padding">
|
|
<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>
|
|
<!-- <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;">
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
<span v-bind:style="{color: data.activeInHierarchy?'#606266':'#C0C4CC'}">{{ node.label }}</span>
|
|
</span>
|
|
</el-tree> -->
|
|
<!-- <el-button @click="handleRefreshTree" icon="el-icon-refresh" size="mini" style="position: absolute;right:0;top:0;"></el-button> -->
|
|
</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 v-if="node">
|
|
<el-row style="margin:5px 0;">
|
|
<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-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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
|
|
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/vue.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({
|
|
el: '#app',
|
|
data: {
|
|
isDevMode: false,
|
|
filterText: '',
|
|
splitLeft: 0.7,
|
|
splitRight: 0.5,
|
|
defaultExpandedKeys: [],
|
|
sceneTreeData: [],
|
|
nodeProps: {
|
|
children: 'children',
|
|
label: 'name',
|
|
isLeaf: 'leaf'
|
|
},
|
|
node: null,
|
|
propSchema: [],
|
|
intervalId: -1,
|
|
},
|
|
methods: {
|
|
handleRefreshTree() {
|
|
this.$data.sceneTreeData = [];
|
|
setTimeout(() => {
|
|
this.updateTreeData();
|
|
}, 0);
|
|
},
|
|
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.propSchema = [];
|
|
this.$data.node = node;
|
|
cc.js.getset(node, 'hex_color', () => {
|
|
return '#' + node.color.toHEX();
|
|
}, (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.propSchema = [NEX_CONFIG.propSchema.node2d];
|
|
} 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(target) {
|
|
// TODO
|
|
},
|
|
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() {
|
|
let initWin = () => {
|
|
if (window.cc) {
|
|
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);
|
|
clearInterval(this.$data.intervalId);
|
|
console.log('ccc-devtools init');
|
|
} else {
|
|
// console.log('cc is not init');
|
|
}
|
|
}
|
|
this.$data.intervalId = setInterval(initWin, 500);
|
|
setTimeout(initWin, 0);
|
|
localStorage.setItem('isDevMode', 1);
|
|
},
|
|
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);
|
|
},
|
|
handleChangeMode(data) {
|
|
data ? this.openDevMode() : this.closeDevMode();
|
|
},
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.sceneTree.filter(val);
|
|
}
|
|
},
|
|
created: function () {
|
|
document.body.insertBefore(document.getElementById('app'), document.body.firstChild);
|
|
if (localStorage.getItem('isDevMode') === "1") {
|
|
this.$data.isDevMode = true;
|
|
this.openDevMode();
|
|
} else {
|
|
this.$data.isDevMode = false;
|
|
}
|
|
}
|
|
});
|
|
</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> |