fix: active item problems

This commit is contained in:
Yanyan-Wang 2018-07-30 18:26:44 +08:00
parent 2ce6207307
commit dec5dc6980
5 changed files with 22 additions and 32 deletions

View File

@ -101,9 +101,9 @@
const legend = document.getElementById('legend'); const legend = document.getElementById('legend');
if (minimap !== undefined) minimap.style.display = 'none'; if (minimap !== undefined) minimap.style.display = 'none';
if (legend !== undefined) legend.style.display = 'none'; if (legend !== undefined) legend.style.display = 'none';
setTimeout(()=>{ // setTimeout(()=>{
graph.destroy(); // graph.destroy();
}, 1000) // }, 1000)
}); });
</script> </script>

View File

@ -1,6 +1,6 @@
{ {
"name": "@antv/g6", "name": "@antv/g6",
"version": "2.0.5-beta.8", "version": "2.0.5-beta.13",
"description": "graph visualization frame work", "description": "graph visualization frame work",
"main": "build/g6.js", "main": "build/g6.js",
"homepage": "https://github.com/antvis/g6", "homepage": "https://github.com/antvis/g6",

View File

@ -69,7 +69,9 @@ class Plugin {
if (!layout) { if (!layout) {
graph.set('layout', this.layout); graph.set('layout', this.layout);
} }
this.graph.activeItem = this.activeItem; this.graph.activeItem = item => {
this.activeItem(item);
};
}); });
graph.on('beforerender', () => { graph.on('beforerender', () => {
const data = graph.getSource(); const data = graph.getSource();
@ -134,9 +136,11 @@ class Plugin {
style: node_style style: node_style
}); });
} }
activeItem(item, pre_navi) { activeItem(item) {
const graph = this.graph;
const pre_navi = this.pre_navi;
if (Util.isString(item)) { if (Util.isString(item)) {
item = this.find(item); item = graph.find(item);
} }
let style = {}; let style = {};
let pre_style = {}; let pre_style = {};
@ -157,17 +161,17 @@ class Plugin {
pre_style = edge_style; pre_style = edge_style;
} else return; } else return;
// // unactive the previous navigate node // unactive the previous navigate node
if (pre_navi !== {} && pre_navi !== null && pre_navi !== undefined) { if (pre_navi !== {} && pre_navi !== null && pre_navi !== undefined && pre_navi.item !== null) {
this.update(pre_navi.item, { graph.update(pre_navi.item, {
style: pre_navi.style style: pre_navi.style
}); });
} }
this.update(item, { graph.update(item, {
style style
}); });
pre_navi = { this.pre_navi = {
item, item,
style: pre_style style: pre_style
}; };
@ -176,7 +180,7 @@ class Plugin {
const graph = this.graph; const graph = this.graph;
graph.on('node:mouseenter', ev => { graph.on('node:mouseenter', ev => {
if (ev.item != null) { if (ev.item != null) {
graph.activeItem(ev.item, this.pre_navi); graph.activeItem(ev.item);
} }
graph.css({ graph.css({
cursor: 'pointer' cursor: 'pointer'
@ -193,7 +197,7 @@ class Plugin {
graph.on('edge:mouseenter', ev => { graph.on('edge:mouseenter', ev => {
if (ev.item != null) { if (ev.item != null) {
graph.activeItem(ev.item, this.pre_navi); graph.activeItem(ev.item);
} }
}); });
graph.on('edge:mouseleave', ev => { graph.on('edge:mouseleave', ev => {

View File

@ -28,17 +28,9 @@ class Menu {
const menuCfg = this.menuCfg; const menuCfg = this.menuCfg;
const container_id = this.container_id; const container_id = this.container_id;
const hover_color = '#6af'; const menuHtml = `<ul class="menu" style = "
const custom_color = '#777';
const li_style = 'padding-top:5px; padding-bottom:5px; cursor: pointer;';
const menuHtml = `<ul id="menu" style = "
color: ` + custom_color + `;
list-style: none;
width: 150px;
border: 1px solid #ccc;
position: absolute; position: absolute;
display: none; display: none;"></ul>`;
background-color: #fff"></ul>`;
const menu = Util.createDOM(menuHtml); const menu = Util.createDOM(menuHtml);
let parent = graph.getGraphContainer(); let parent = graph.getGraphContainer();
if (container_id !== '' && container_id !== undefined) { if (container_id !== '' && container_id !== undefined) {
@ -48,7 +40,7 @@ class Menu {
const list = menuCfg.lists; const list = menuCfg.lists;
for (let i = 0; i < list.length; i += 1) { for (let i = 0; i < list.length; i += 1) {
const liHtml = '<li class = "menu_li" style = "' + li_style + ' color: #777;">' + list[i].html + '</li>'; const liHtml = '<li class = "menu_li">' + list[i].html + '</li>';
const li = Util.createDOM(liHtml); const li = Util.createDOM(liHtml);
menu.appendChild(li); menu.appendChild(li);
li.on('click', () => { li.on('click', () => {
@ -60,12 +52,6 @@ class Menu {
list[i].callBack(node); list[i].callBack(node);
} }
}); });
li.addEventListener('mouseover', function() {
this.style.setProperty('color', hover_color);
});
li.addEventListener('mouseout', function() {
this.style.setProperty('color', custom_color);
});
} }
this.menu = menu; this.menu = menu;
this.hide(); this.hide();

View File

@ -1 +1 @@
module.exports = '2.0.5-beta.9'; module.exports = '2.0.5-beta.15';