ccc-devtools/index.html

<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">

<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 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 v-if="!isAutoRefreshTree" placeholder="搜索节点" v-model="filterText" size="mini" id="searchInput"></el-input>
						<v-tree v-if="isDevMode&&isAutoRefreshTree" :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&&!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 v-bind:style="{color: data.activeInHierarchy?'#606266':'#C0C4CC'}">{{ node.label }}</span>
							</span>
						</el-tree>
						<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;">
							<span style="line-height:20px;">自动刷新</span>
							<el-switch v-model="isAutoRefreshTree" active-color="#0099ff" inactive-color="gray"></el-switch>
						</div>

						<!-- <el-button @click="handleSwitchTreeMode" icon="el-icon-refresh" size="mini" style="position: absolute;right:0;bottom: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="18">
									<el-input v-model="node.name" size="mini"></el-input>
								</el-col>
								<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>
							<el-card v-if="nodeSchema">
								<div>
									<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;margin-right: 10px;" type="text" @click="drawNodeRect">标记位置</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>
		<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/stats.min.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() {
				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.$data.treeParam = [];
						}, this);
						this.initConsoleUtil();
						clearInterval(this.$data.intervalId);
					} 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);
			},
			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();
			},
			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);
			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>