修复重复点击报错问题,更换tree组件解决动态加载节点不及时响应问题,暂时去掉搜索节点和拖拽节点功能

This commit is contained in:
Next 2018-12-31 22:09:32 +08:00
parent 6cdc66cfb4
commit 326be8561a
3 changed files with 37 additions and 25 deletions

View File

@ -1,4 +1,4 @@
# ccc-devtools v1.2.5 # ccc-devtools v1.2.6
Cocos Creator 网页调试器,运行时查看、修改节点树,实时更新节点属性。 Cocos Creator 网页调试器,运行时查看、修改节点树,实时更新节点属性。
## TODO ## TODO

View File

@ -35,15 +35,15 @@
<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 placeholder="搜索节点" v-model="filterText" size="mini" id="searchInput"></el-input> <!-- <el-input placeholder="搜索节点" v-model="filterText" size="mini" id="searchInput"></el-input> -->
<!-- <v-tree :data="sceneTreeData" showLine draggable @select="testCheck" style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;"></v-tree> --> <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" <!-- <el-tree v-if="isDevMode" :data="sceneTreeData" :draggable="true" :props="nodeProps" :default-expanded-keys="defaultExpandedKeys"
:default-expanded-keys="defaultExpandedKeys" empty-text="暂无数据..." :node-key="'_id'" :expand-on-click-node="false" empty-text="暂无数据..." :node-key="'_id'" :expand-on-click-node="false" :filter-node-method="filterNode" ref="sceneTree"
:filter-node-method="filterNode" ref="sceneTree" @node-click="handleNodeClick" style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;"> @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 @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>
<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;">
@ -87,7 +87,7 @@
<div id="dev_switch" style="position: absolute;top:45px;left:10px;width: 200px;"> <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 v-model="isDevMode" @change="handleChangeMode" active-color="#0099ff" inactive-color="gray">
</el-switch> </el-switch>
<el-tooltip :content="'ccc-devtools@Next v1.2.5'" placement="top"> <el-tooltip :content="'ccc-devtools@Next v1.2.6'" placement="top">
<Icon type="logo-github" size="24" @click="openGithub" /> <Icon type="logo-github" size="24" @click="openGithub" />
</el-tooltip> </el-tooltip>
</div> </div>
@ -127,22 +127,33 @@
this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id]; this.defaultExpandedKeys = [this.$data.sceneTreeData[0]._id];
}, 0); }, 0);
}, },
handleNodeClick(node) { handleNodesSelect(nodes) {
this.$data.propSchema = []; if (nodes.length === 1) {
this.$data.node = node; this.handleNodeClick(nodes[0]);
cc.js.getset(this.$data.node, 'hex_color', () => { } else {
return '#' + this.$data.node.color.toHEX(); this.handleNodeClick(null);
}, (hex) => { }
this.$data.node.color = new cc.Color().fromHEX(hex); },
}); handleNodeClick(node) {
let superPreLoad = node._onPreDestroy; if (node) {
node._onPreDestroy = () => { this.$data.propSchema = [];
superPreLoad.apply(node); this.$data.node = node;
if (this.$data && this.$data.node === node) { cc.js.getset(node, 'hex_color', () => {
this.$data.node = null; 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;
} }
this.$data.propSchema = [NEX_CONFIG.propSchema.node2d];
}, },
outputNodeHandler(target) { outputNodeHandler(target) {
let i = 1; let i = 1;
@ -186,6 +197,7 @@
this.$data.node = null; this.$data.node = null;
}, this); }, this);
clearInterval(this.$data.intervalId); clearInterval(this.$data.intervalId);
console.log('ccc-devtools init');
} else { } else {
// console.log('cc is not init'); // console.log('cc is not init');
} }

File diff suppressed because one or more lines are too long