完善treee刷新机制，优化开关显示方式

2024-12-26 03:39:16 +00:00 · 2019-01-02 20:21:02 +08:00 · 2019-01-02 20:21:02 +08:00 · a89f60cf29
commit a89f60cf29
parent 326be8561a
6 changed files with 154 additions and 25 deletions
--- a/README.md
+++ b/README.md
@ -1,14 +1,14 @@
-# ccc-devtools v1.2.6
+# ccc-devtools v1.2.7
 Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。

 ## TODO

 - [x] 拖拽布局
- [x] 节点搜索
 - [x] 实时刷新节点信息
- [x] 拖动节点更改层级
 - [x] 开关
 - [x] 控制台输出节点信息
+- [ ] 节点搜索
+- [ ] 拖动节点更改层级
 - [ ] 自定义布局等配置
 - [ ] 组件信息

--- a/index.html
+++ b/index.html
@ -36,7 +36,7 @@
 				<Split v-model="splitRight" mode="vertical">
 					<div slot="top" class="demo-split-pane" style="padding-left: 5px;">
 						<!-- <el-input placeholder="搜索节点" v-model="filterText" size="mini" id="searchInput"></el-input> -->
-						<v-tree :data="sceneTreeData" @select="handleNodesSelect" style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;"></v-tree>
+						<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;">
@ -44,7 +44,7 @@
 								<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>
+						<!-- <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">
@ -84,23 +84,84 @@
 				</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-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-tooltip :content="'ccc-devtools@Next v1.2.6'" placement="top">
-				<Icon type="logo-github" size="24" @click="openGithub" />
-			</el-tooltip>
+					</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.js"></script>
+<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: {
@ -123,9 +184,12 @@
 			handleRefreshTree() {
 				this.$data.sceneTreeData = [];
 				setTimeout(() => {
+					this.updateTreeData();
+				}, 0);
+			},
+			updateTreeData() {
 				this.$data.sceneTreeData = cc.director.getScene().children;
 				this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
-				}, 0);
 			},
 			handleNodesSelect(nodes) {
 				if (nodes.length === 1) {
@ -177,24 +241,24 @@
 			openDevMode() {
 				let initWin = () => {
 					if (window.cc) {
-						cc.js.getset(cc.Node.prototype, 'leaf', function () {
+						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.$data.sceneTreeData = scene.children;
-							this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
+							this.updateTreeData();
 						}
 						cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, () => {
-							this.$data.sceneTreeData = cc.director.getScene().children;
-							this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
+							this.updateTreeData();
 						}, this);
 						cc.director.on(cc.Director.EVENT_BEFORE_SCENE_LOADING, () => {
-							this.$data.sceneTreeData = [];
 							this.$data.node = null;
+							this.$data.sceneTreeData = [];
 						}, this);
 						clearInterval(this.$data.intervalId);
 						console.log('ccc-devtools init');
@ -237,6 +301,54 @@
 </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);})()
+	// (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>
--- a/js/stats.min.js
+++ b/js/stats.min.js
@ -0,0 +1,5 @@
+// stats.js - http://github.com/mrdoob/stats.js
+(function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();
+u(++l%c.children.length)},!1);var k=(performance||Date).now(),g=k,a=0,r=e(new f.Panel("FPS","#0ff","#002")),h=e(new f.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var t=e(new f.Panel("MB","#f08","#201"));u(0);return{REVISION:16,dom:c,addPanel:e,showPanel:u,begin:function(){k=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();h.update(c-k,200);if(c>g+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
+1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
+b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});
--- a/js/vue-beauty.min.js
+++ b/js/vue-beauty.min.js
--- a/js/vue.min.js
+++ b/js/vue.min.js
--- a/version.json
+++ b/version.json
@ -0,0 +1,6 @@
+{
+    "name": "ccc-devtools",
+    "version": "1.2.7",
+    "author": "Next",
+    "repo": "https://github.com/potato47/ccc-devtools.git"
+}