From dec5dc69800c8c16eb41468bd1371786fd2c96f9 Mon Sep 17 00:00:00 2001
From: Yanyan-Wang <yanyanwang93@gmail.com>
Date: Mon, 30 Jul 2018 18:26:44 +0800
Subject: [PATCH] fix: active item problems

---
 demos/gallery-graphanalyzer.html            |  6 +++---
 package.json                                |  2 +-
 plugins/template.maxSpanningForest/index.js | 24 ++++++++++++---------
 plugins/template.maxSpanningForest/menu.js  | 20 +++--------------
 src/version.js                              |  2 +-
 5 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/demos/gallery-graphanalyzer.html b/demos/gallery-graphanalyzer.html
index 315e086191..b1db4670b2 100644
--- a/demos/gallery-graphanalyzer.html
+++ b/demos/gallery-graphanalyzer.html
@@ -101,9 +101,9 @@
       const legend = document.getElementById('legend');
       if (minimap !== undefined) minimap.style.display = 'none';
       if (legend !== undefined) legend.style.display = 'none';
-      setTimeout(()=>{
-        graph.destroy();
-      }, 1000)
+      // setTimeout(()=>{
+      //   graph.destroy();
+      // }, 1000)
     });
 
   </script>
diff --git a/package.json b/package.json
index 6ab6a75751..7bb41e0cc7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "2.0.5-beta.8",
+  "version": "2.0.5-beta.13",
   "description": "graph visualization frame work",
   "main": "build/g6.js",
   "homepage": "https://github.com/antvis/g6",
diff --git a/plugins/template.maxSpanningForest/index.js b/plugins/template.maxSpanningForest/index.js
index 3a5b678caf..16795d45d0 100644
--- a/plugins/template.maxSpanningForest/index.js
+++ b/plugins/template.maxSpanningForest/index.js
@@ -69,7 +69,9 @@ class Plugin {
       if (!layout) {
         graph.set('layout', this.layout);
       }
-      this.graph.activeItem = this.activeItem;
+      this.graph.activeItem = item => {
+        this.activeItem(item);
+      };
     });
     graph.on('beforerender', () => {
       const data = graph.getSource();
@@ -134,9 +136,11 @@ class Plugin {
       style: node_style
     });
   }
-  activeItem(item, pre_navi) {
+  activeItem(item) {
+    const graph = this.graph;
+    const pre_navi = this.pre_navi;
     if (Util.isString(item)) {
-      item = this.find(item);
+      item = graph.find(item);
     }
     let style = {};
     let pre_style = {};
@@ -157,17 +161,17 @@ class Plugin {
       pre_style = edge_style;
     } else return;
 
-    // // unactive the previous navigate node
-    if (pre_navi !== {} && pre_navi !== null && pre_navi !== undefined) {
-      this.update(pre_navi.item, {
+    // unactive the previous navigate node
+    if (pre_navi !== {} && pre_navi !== null && pre_navi !== undefined && pre_navi.item !== null) {
+      graph.update(pre_navi.item, {
         style: pre_navi.style
       });
     }
 
-    this.update(item, {
+    graph.update(item, {
       style
     });
-    pre_navi = {
+    this.pre_navi = {
       item,
       style: pre_style
     };
@@ -176,7 +180,7 @@ class Plugin {
     const graph = this.graph;
     graph.on('node:mouseenter', ev => {
       if (ev.item != null) {
-        graph.activeItem(ev.item, this.pre_navi);
+        graph.activeItem(ev.item);
       }
       graph.css({
         cursor: 'pointer'
@@ -193,7 +197,7 @@ class Plugin {
 
     graph.on('edge:mouseenter', ev => {
       if (ev.item != null) {
-        graph.activeItem(ev.item, this.pre_navi);
+        graph.activeItem(ev.item);
       }
     });
     graph.on('edge:mouseleave', ev => {
diff --git a/plugins/template.maxSpanningForest/menu.js b/plugins/template.maxSpanningForest/menu.js
index 7da45d9334..80e313a06a 100644
--- a/plugins/template.maxSpanningForest/menu.js
+++ b/plugins/template.maxSpanningForest/menu.js
@@ -28,17 +28,9 @@ class Menu {
     const menuCfg = this.menuCfg;
     const container_id = this.container_id;
 
-    const hover_color = '#6af';
-    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;
+    const menuHtml = `<ul class="menu" style = "
       position: absolute;
-      display: none;
-      background-color: #fff"></ul>`;
+      display: none;"></ul>`;
     const menu = Util.createDOM(menuHtml);
     let parent = graph.getGraphContainer();
     if (container_id !== '' && container_id !== undefined) {
@@ -48,7 +40,7 @@ class Menu {
 
     const list = menuCfg.lists;
     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);
       menu.appendChild(li);
       li.on('click', () => {
@@ -60,12 +52,6 @@ class Menu {
           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.hide();
diff --git a/src/version.js b/src/version.js
index ddf41140e5..3ce8c0cbbe 100755
--- a/src/version.js
+++ b/src/version.js
@@ -1 +1 @@
-module.exports = '2.0.5-beta.9';
+module.exports = '2.0.5-beta.15';