ccc-devtools/index.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" @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>
		<div id="dev_switch" style="position: absolute;top:45px;left:10px;width: 200px;">
			<el-switch v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff" inactive-color="gray">
			</el-switch>
			<el-tooltip :content="'ccc-devtools@Next v1.2.6'" placement="top">
				<Icon type="logo-github" size="24" @click="openGithub" />
			</el-tooltip>
		</div>
	</div>
</div>

<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/vue.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" src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
<script>
	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.$data.sceneTreeData = cc.director.getScene().children;
					this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
				}, 0);
			},
			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, 'leaf', function () {
							return this.childrenCount === 0;
						});
						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.$data.sceneTreeData = scene.children;
							this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
						}
						cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, () => {
							this.$data.sceneTreeData = cc.director.getScene().children;
							this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
						}, this);
						cc.director.on(cc.Director.EVENT_BEFORE_SCENE_LOADING, () => {
							this.$data.sceneTreeData = [];
							this.$data.node = null;
						}, 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);})()
	// (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()
</script>