Merge pull request #412 from antvis/plugin_tests

Plugin tests
2024-12-13 17:15:49 +08:00 · 2018-08-09 16:19:48 +08:00 · 2018-08-09 16:19:48 +08:00 · 0193f56e76
commit 0193f56e76
parent 8c08324cee 1bfd456d84
21 changed files with 836 additions and 113 deletions
--- a/.babelrc
+++ b/.babelrc
@ -2,7 +2,7 @@
 {
  "plugins": [
    "transform-object-rest-spread",
-    "transform-remove-strict-mode",
+    "transform-remove-strict-mode"
  ],
  "presets": [
    [
--- a/demos/gallery-anchors-selection.html
+++ b/demos/gallery-anchors-selection.html
@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>画廊-多锚点选择</title>
+</head>
+
+<body>
+  <div id="mountNode"></div>
+  <script src="../build/g6.js"></script>
+  <script src="../build/plugin.layout.dagre.js"></script>
+  <script src="../build/plugin.edge.polyline.js"></script>
+  <script>
+    G6.registerNode('rect', {
+      getPath(item) {
+        const width = 100;   // 一半宽
+        const height = 40;  // 一半高
+        return G6.Util.getRectPath(-width/2, -height/2, width, height, 10);
+      },
+      anchor(node) {
+          // const hierarchy = node.getHierarchy();
+          const inEdges = node.getInEdges();
+          const outEdges = node.getOutEdges();
+          const inEdgesNum = inEdges.length;
+          const outEdgesNum = outEdges.length;
+          const inAnchorArea = 1 - 1 / (inEdgesNum + 1);
+          const outAnchorArea = 1 - 1 / (outEdgesNum + 1);
+          const inGap = inAnchorArea / inEdgesNum;
+          const outGap = outAnchorArea / outEdgesNum;
+          const inAnchors = getAnchors(inEdgesNum, inGap, 'in');
+          const outAnchors = getAnchors(outEdgesNum, outGap, 'out');
+          const anchor = inAnchors.concat(outAnchors);
+          return anchor;
+        }
+    });
+    const data = {
+      nodes: [{
+        id: '收集日志',
+      }, {
+        id: '入 es 集群',
+      }, {
+        id: '入 hdfs',
+      },{
+        id: '入 hdfs2',
+      }, {
+        id: 'hive 计算',
+      },{
+        id: 'report',
+      }],
+      edges: [{
+        source: '收集日志',
+        target: '入 es 集群'
+      },{
+        source: '收集日志',
+        target: '入 hdfs'
+      },{
+        source: '收集日志',
+        target: '入 hdfs2'
+      },{
+        source: '入 hdfs',
+        target: 'hive 计算'
+      },{
+        source: '入 hdfs2',
+        target: 'hive 计算'
+      },{
+        source: '入 es 集群',
+        target: 'hive 计算'
+      },{
+        source: 'hive 计算',
+        target: 'report'
+      }]
+    };
+    const graph = new G6.Graph({
+      container: 'mountNode',
+      fitView: 'cc',
+      width: 500,
+      height: 500,
+      plugins: [new G6.Plugins['layout.dagre']()],
+      defaultIntersectBox: 'rect' // 使用矩形包围盒
+    });
+    graph.node({
+      shape: 'rect',
+      label(model) {
+        return model.id;
+      },
+      style: {
+        stroke: '#00C0A5',
+        fill: '#92949F',
+        fillOpacity: 0.45,
+        lineWidth: 2
+      }
+    });
+    graph.edge({
+      shape: 'polyline',
+      style: {
+        endArrow: true,
+        stroke: 'grey',
+        lineWidth: 1,
+        strokeOpacity: 1
+      }
+    });
+    graph.read(data);
+
+    function getAnchors(edgesNum, gap, type){
+      const anchors = [];
+      let y;
+      if(type === 'out') y = 1;
+      else y = 0;
+
+      if(edgesNum % 2) { // odd number
+        anchors.push([0.5, y]);
+        for( let i = 1; i <= (edgesNum - 1) / 2; i += 1){
+          anchors.push([0.5 - i * gap, y]);
+          anchors.push([0.5 + i * gap, y]);
+        }
+      } else { // even number
+        if (edgesNum != 0) {
+          anchors.push([0.5 - gap / 2, y]);
+          anchors.push([0.5 + gap / 2, y]);
+          for( let i = 1; i <= (edgesNum - 2) / 2; i += 1){
+            anchors.push([0.5 - gap / 2 - i * gap, y]);
+            anchors.push([0.5 + gap / 2 + i * gap, y]);
+          }
+        }
+       }
+      return anchors
+    }
+
+  </script>
+</body>
+</html>
--- a/demos/gallery-case1.html
+++ b/demos/gallery-case1.html
@ -18,9 +18,9 @@
 </head>

 <body>
-  <div id='mountNode' style='background-color:rgb(57,64,77);width:736px'>
-    <h3 style='color:white;margin:20pt;padding-top:20pt'>2018 世界杯关注度、胜负分析</h3>
-    <p style='color:rgb(126,131,139);margin:20pt;margin-top:-10pt'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
+  <div id='mountNode' style='background-color:rgb(57,64,77);position:absolute; width:736px; height:800px'>
+    <h3 style='color:white; margin: 20pt 20pt 0pt; position: relative;'>2018 世界杯关注度、胜负分析</h3>
+    <p style='color:rgb(126,131,139); margin:20px 100px 0px 22px'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
  </div>
  
  <div id='legend'></div>
@ -107,13 +107,13 @@
      img.src = './assets/data/footer.png';
      img.setAttribute('width', 130);
      img.style.setProperty('margin', '0pt');
-      img.style.setProperty('margin-top', '-120pt');
+      img.style.setProperty('margin-top', '400pt');
      img.style.setProperty('position', 'absolute');
      parent.appendChild(img);

      var footer = document.createElement("a");
      footer.style.setProperty('margin', '20pt');
-      footer.style.setProperty('margin-top', '-30pt');
+      footer.style.setProperty('margin-top', '485pt');
      footer.style.setProperty('position', 'absolute');
      footer.style.setProperty('color', 'rgb(126,131,139)');
      footer.style.setProperty('text-decoration', 'none');
--- a/demos/gallery-graphanalyzer.html
+++ b/demos/gallery-graphanalyzer.html
@ -100,9 +100,9 @@
      //   });
      // });
      const minimap = document.getElementById('minimap');
-      const legend = document.getElementById('legend');
+      // const legend = document.getElementById('legend');
      if (minimap !== undefined) minimap.style.display = 'none';
-      if (legend !== undefined) legend.style.display = 'none';
+      // if (legend !== undefined) legend.style.display = 'none';
    });

  </script>
--- a/demos/gallery-webIndex.html
+++ b/demos/gallery-webIndex.html
@ -71,7 +71,7 @@
        interactive: false,
        textDisplay: false,
        node_label: null,
-        edge_style(model) {
+        edgeStyle(model) {
          return {
            stroke: graph.find(model.target).getModel().color,
            strokeOpacity: 0.8
--- a/package.json
+++ b/package.json
@ -98,7 +98,7 @@
    "screenshot": "node ./bin/screenshot.js",
    "start": "npm run dev",
    "test": "torch --compile --renderer --recursive ./test/unit",
-    "test-live": "torch --compile --interactive --watch --recursive ./test/unit/",
+    "test-live": "torch --compile --interactive --watch --recursive ./test/unit/plugins/tool.textDisplay-spec.js",
    "watch": "webpack --config webpack-dev.config.js",
    "win-dev": "node ./bin/win-dev.js"
  },
--- a/plugins/layout.forceAtlas2/layout.js
+++ b/plugins/layout.forceAtlas2/layout.js
@ -159,27 +159,30 @@ class Layout {
    loading.style.setProperty('background-color', '#fff');
    loading.style.setProperty('position', 'absolute');
    const parent = graph.getGraphContainer().parentNode;
-    loading.style.setProperty('width', parent.offsetWidth + 'px');
-    loading.style.setProperty('height', parent.offsetHeight + 'px');
-    loading.style.setProperty('margin-top', (-parent.offsetHeight) + 'px');
+    const divHeight = parent.offsetHeight ? parent.offsetHeight : 600;
+    const divWidth = parent.offsetWidth ? parent.offsetWidth : 600;
+    loading.style.setProperty('width', divWidth + 'px');
+    loading.style.setProperty('height', divHeight + 'px');
+    loading.style.setProperty('margin-top', 0 + 'px');// (-parent.offsetHeight)s
    loading.style.zIndex = 999;
    parent.appendChild(loading);
    // the loading image
+    const imgSize = 200;
    const loadingImg = document.createElement('img');
    loadingImg.src = 'https://gw.alipayobjects.com/zos/rmsportal/mnEmjOmrHbghTsZNeTmI.gif';
-    loadingImg.style.setProperty('width', 200 + 'px');
-    loadingImg.style.setProperty('height', 200 + 'px');
-    const Cw = loadingImg.offsetWidth;
+    loadingImg.style.setProperty('width', imgSize + 'px');
+    loadingImg.style.setProperty('height', imgSize + 'px');
+    const Cw = imgSize;
    const Pw = loading.offsetWidth;
    const left = (Pw - Cw) / 2;
    loadingImg.style.setProperty('margin-left', left + 'px');
-    const Ch = loadingImg.offsetHeight;
+    const Ch = imgSize;
    const Ph = loading.offsetHeight;
    const top = (Ph - Ch) / 2;
    loadingImg.style.setProperty('margin-top', top + 'px');
    loading.appendChild(loadingImg);

-    const worker = new Worker();// { type: 'module' }
+    const worker = new Worker();
    worker.postMessage(obj);
    worker.onmessage = function(event) {
      this.nodes = event.data;
--- a/plugins/template.maxSpanningForest/index.js
+++ b/plugins/template.maxSpanningForest/index.js
@ -37,21 +37,12 @@ class Plugin {
          callBack: 'showAll'
        }]
      },
-      layout: {
-        auto: 'once', // true false once
-        processer: new Layout({
-          kr: 120,
-          kg: 8.0,
-          mode: 'common',
-          prevOverlapping: true,
-          dissuadeHubs: false,
-          maxIteration: 1000,
-          barnesHut: true,
-          ks: 0.1,
-          ksmax: 10,
-          tao: 0.1,
-          ...options.layoutCfg
-        })
+      layoutCfg: {
+        kr: 120,
+        kg: 8.0,
+        prevOverlapping: true,
+        maxIteration: 1000,
+        barnesHut: true
      },
      fisheye: true,
      menu: null,
@ -61,11 +52,22 @@ class Plugin {
        stroke: '#4F7DAB',
        strokeOpacity: 0.65
      },
+      activedEdgeStyle: {
+        endArrow: true,
+        stroke: '#4C7295',
+        strokeOpacity: 1
+      },
      nodeStyle: {
        stroke: '#696969',
        strokeOpacity: 0.4,
        lineWidth: 1
      },
+      activedNodeStyle: {
+        stroke: '#fff',
+        lineWidth: 1,
+        shadowColor: '#6a80aa',
+        shadowBlur: 20
+      },
      node_label(model) {
        return {
          text: model.id,
@ -75,12 +77,12 @@ class Plugin {
        };
      },
      interactive: true,
-      textDisplay: true,
-      ...options
-    });
+      textDisplay: true
+    }, options);
  }
  init() {
    const graph = this.graph;
+
    const highlighter = new G6.Plugins['tool.highlightSubgraph']();
    if (this.fisheye) {
      const fisheye = new G6.Plugins['tool.fisheye']({
@ -94,9 +96,17 @@ class Plugin {
    }
    graph.addPlugin(highlighter);
    graph.on('beforeinit', () => {
-      const layout = graph.get('layout');
+      let layout = graph.get('layout');
      if (!layout) {
-        graph.set('layout', this.layout);
+        const { kr, kg, prevOverlapping, maxIteration, barnesHut } = this.layoutCfg;
+        layout = {
+          auto: 'once', // true false once
+          processer: new Layout({
+            kr, kg, prevOverlapping,
+            maxIteration, barnesHut
+          })
+        };
+        graph.set('layout', layout);
      }
      this.graph.activeItem = item => {
        this.activeItem(item);
@ -134,7 +144,9 @@ class Plugin {
      this.setStyle();
      this.interactive && this.setListener();
      const menuCfg = this.menuCfg;
-      this.menu = new Menu({ menuCfg, graph });
+      if (menuCfg !== null) {
+        this.menu = new Menu({ menuCfg, graph });
+      }
    });
  }
  setStyle() {
@ -164,19 +176,10 @@ class Plugin {
    let style = {};
    let preStyle = {};
    if (item.type === 'node') {
-      style = {
-        stroke: '#fff',
-        lineWidth: 1,
-        shadowColor: '#6a80aa',
-        shadowBlur: 20
-      };
+      style = this.activedNodeStyle;
      preStyle = this.nodeStyle;
    } else if (item.type === 'edge') {
-      style = {
-        endArrow: true,
-        stroke: '#4C7295',
-        strokeOpacity: 1
-      };
+      style = this.activedEdgeStyle;
      preStyle = this.edgeStyle;
    } else return;

@ -229,22 +232,24 @@ class Plugin {
      shape,
      item
    }) => {
-      if (shape && item.isNode) {
-        const menuX = item.getModel().x * graph.getMatrix()[0] + graph.getMatrix()[6];
-        const menuY = item.getModel().y * graph.getMatrix()[0] + graph.getMatrix()[7];
-        this.menu.show(item, menuX, menuY);
-        graph.draw();
-      } else {
-        this.menu.hide();
-        // restore the highlighted graph and hide the edges which are not tree edges.
-        graph.restoreGraph();
-        const edges = graph.getEdges();
-        Util.each(edges, edge => {
-          if (edge.isVisible() && !edge.getModel().isTreeEdge) {
-            edge.hide();
-          }
-        });
-        graph.draw();
+      if (this.menuCfg !== null) {
+        if (shape && item.isNode) {
+          const menuX = item.getModel().x * graph.getMatrix()[0] + graph.getMatrix()[6];
+          const menuY = item.getModel().y * graph.getMatrix()[0] + graph.getMatrix()[7];
+          this.menu.show(item, menuX, menuY);
+          graph.draw();
+        } else {
+          this.menu.hide();
+          // restore the highlighted graph and hide the edges which are not tree edges.
+          graph.unhighlightGraph();
+          const edges = graph.getEdges();
+          Util.each(edges, edge => {
+            if (edge.isVisible() && !edge.getModel().isTreeEdge) {
+              edge.hide();
+            }
+          });
+          graph.draw();
+        }
      }

    });
--- a/plugins/tool.fisheye/index.js
+++ b/plugins/tool.fisheye/index.js
@ -21,6 +21,7 @@ class Plugin {
        ...this.options
      });
      graph.on('mousemove', Util.throttle(ev => {
+        if (graph.destroyed) return;
        const nodes = graph.getNodes();
        const size = nodes.length;
        if (this.oriXs.length !== size) return;
@ -34,6 +35,7 @@ class Plugin {
    );
    });
    const cacheLocation = Util.debounce(ev => {
+      if (graph.destroyed) return;
      const nodes = graph.getNodes();
      const size = nodes.length;
      if (ev === undefined || ev.item === undefined) {
@ -42,8 +44,9 @@ class Plugin {
          this.oriXs[i] = nodes[i].getModel().x;
          this.oriYs[i] = nodes[i].getModel().y;
        }
-      } else if (ev.item.type !== 'node' || (!ev.updateModel.x && !ev.updateModel.y)) return;
-      else {
+      } else if (ev.item.type !== 'node' || (ev.updateModel.x === undefined && ev.updateModel.y === undefined)) {
+        return;
+      } else {
        const item = graph.find(ev.originModel.id);
        for (let i = 0; i < size; i++) {
          if (nodes[i].getModel().id === item.id) {
--- a/plugins/tool.fisheye/tool.js
+++ b/plugins/tool.fisheye/tool.js
@ -16,13 +16,13 @@ class Tool {

      /**
       * defualt zoom center
-       * @type  {object}
+       * @type  {array}
       */
      center: [ 0, 0 ],

      /**
       * defualt magnification factor
-       * @type  {object}
+       * @type  {number}
       */
      d: 1.0
    }, options);
--- a/plugins/tool.highlightSubgraph/README.md
+++ b/plugins/tool.highlightSubgraph/README.md
@ -8,7 +8,7 @@ interface:
  params:
  - hlItems: the items which will be highlighted

- restoreGraph()
+- unhighlightGraph()
  restore the graph to the un-lighlighted style.

 ## use
--- a/plugins/tool.highlightSubgraph/index.js
+++ b/plugins/tool.highlightSubgraph/index.js
@ -32,11 +32,11 @@ class Plugin {
  init() {
    this.graph.on('afterinit', () => {
      this.graph.highlightSubgraph = this.highlightSubgraph;
-      this.graph.restoreGraph = this.restoreGraph;
+      this.graph.unhighlightGraph = this.unhighlightGraph;
    });
  }
  highlightSubgraph(hlItems) {
-    this.restoreGraph();
+    this.unhighlightGraph();
    // sort the group items
    const ns = hlItems.reNodes;
    const es = hlItems.reEdges;
@ -95,7 +95,7 @@ class Plugin {
    });
    this.draw();
  }
-  restoreGraph() {
+  unhighlightGraph() {
    // hide the mask
    const items = this.getItems();
    let mask;
--- a/plugins/tool.mapper/README.md
+++ b/plugins/tool.mapper/README.md
@ -21,7 +21,7 @@ Constructor parameters:
 simple use.

 ```js
-const Mapper = G6.Plugins['tool.mapper']
+const Mapper = G6.Plugins['tool.mapper'];
 const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3'], {
  legendCfg: {
    scale: 0.5
--- a/plugins/tool.mapper/index.js
+++ b/plugins/tool.mapper/index.js
@ -179,14 +179,14 @@ class Plugin {
    if (legendContainer === undefined) {
      if (containerId === undefined) {
        legendContainer = Util.createDOM('<div class="legend-container"></div>');
+        const container = graph.getGraphContainer();
+        container.appendChild(legendContainer);
      } else {
        legendContainer = document.getElementById(containerId);
        if (legendContainer === undefined || legendContainer === null) {
          throw new Error('please set the container for the graph !');
        }
      }
-      const container = graph.getGraphContainer();
-      container.appendChild(legendContainer);
    }

    const canvas = new G.Canvas({
@ -311,10 +311,11 @@ class Plugin {
      }
    }

+    const domainStep = (domain[domain.length - 1] - domain[0]) / (range.length - 1);
    const items = [];
    Util.each(range, (val, i) => {
-      const percent = (domain[i] - scale.min) / (scale.max - scale.min);
-      let itemText = domain[i];
+      let itemText = domain[0] + domainStep * i;
+      const percent = (itemText - domain[0]) / (domain[domain.length - 1] - domain[0]);
      if (legendCfg.formatter !== undefined && legendCfg.formatter !== null) {
        itemText = legendCfg.formatter(domain[i]);
      }
--- a/plugins/tool.textDisplay/index.js
+++ b/plugins/tool.textDisplay/index.js
@ -24,13 +24,17 @@ class Plugin {
  textDisplay() {
    const graph = this.graph;
    const nodes = graph.getNodes();
-    const scale = graph.getMatrix()[0];
    Util.each(nodes, node => {
      const label = node.getLabel();
      const model = node.getModel();
      const labelBox = label.getBBox();
      const labelWidth = labelBox.maxX - labelBox.minX;
-      const nodeWidth = model.size * scale;
+      const nodeBox = node.getBBox();
+      let nodeWidth = nodeBox.maxX - nodeBox.minX;
+      if (model.size === undefined) {
+        const nodeBox = node.getBBox();
+        nodeWidth = nodeBox.maxX - nodeBox.minX;
+      }
      if (labelWidth === 0) return;
      const ratio = labelWidth / nodeWidth;
      if (ratio > 2) {
--- a/plugins/util.extractSubgraph/index.js
+++ b/plugins/util.extractSubgraph/index.js
@ -49,22 +49,6 @@ const extractSubgraph = {
      reNodes,
      reEdges
    };
-  },
-  setZIndex(ns, es, minZ) {
-    const graph = this.graph;
-    const nodes = graph.getNodes();
-    const edges = graph.getEdges();
-    Util.each(nodes, node => {
-      Util.each(ns, n => {
-        if (node.id === n.id) node.getGraphicGroup().setSilent('zIndex', minZ + 2);
-      });
-    });
-    Util.each(edges, edge => {
-      Util.each(es, e => {
-        if (edge.id === e.id) edge.getGraphicGroup().setSilent('zIndex', minZ + 1);
-      });
-    });
-    graph.getItemGroup().sort();
  }
 };
 Util.mix(Util, extractSubgraph);
--- a/test/unit/plugins/tool.fisheye-spec.js
+++ b/test/unit/plugins/tool.fisheye-spec.js
@ -0,0 +1,328 @@
+const G6 = require('../../../src/index');
+const expect = require('chai').expect;
+const Simulate = require('event-simulate');
+const Fisheye = require('../../../plugins/tool.fisheye/');
+
+describe('fisheye test', () => {
+  const fisheye = new Fisheye();
+  const data = {
+    nodes: [{
+      id: 'node1',
+      x: 100,
+      y: 200,
+      weight: 10
+    }, {
+      id: 'node2',
+      x: 300,
+      y: 200,
+      weight: 100
+    }, {
+      id: 'node3',
+      x: 0,
+      y: -200,
+      weight: 100
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }, {
+      target: 'node2',
+      source: 'node3'
+    }]
+  };
+  const div = document.createElement('div');
+  div.id = 'fisheyeMountNode';
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: div,
+    width: 500,
+    height: 500,
+    plugins: [ fisheye ]
+  });
+  const mouseEventWrapper = graph.getMouseEventWrapper();
+  graph.read(data);
+
+
+  it('fisheye mouse move on node test', () => {
+    const node1Model = graph.find('node1').getModel();
+    const clientPoint = graph.getClientPoint(node1Model);
+    Simulate.simulate(mouseEventWrapper, 'mousedown', {
+      clientX: clientPoint.x - 50,
+      clientY: clientPoint.y
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: clientPoint.x - 50,
+      clientY: clientPoint.y
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: clientPoint.x,
+      clientY: clientPoint.y
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: clientPoint.x - 100,
+      clientY: clientPoint.y
+    });
+    expect([ node1Model.x, node1Model.y ]).eql([ 130, 200 ]);
+
+    graph.update('node3', {
+      x: -50,
+      y: -100
+    });
+    const node3Model = graph.find('node3').getModel();
+    const clientPoint3 = graph.getClientPoint(node3Model);
+    Simulate.simulate(mouseEventWrapper, 'mousedown', {
+      clientX: clientPoint3.x,
+      clientY: clientPoint3.y - 50
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: clientPoint3.x,
+      clientY: clientPoint3.y - 50
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: clientPoint3.x,
+      clientY: clientPoint3.y
+    });
+    expect([ node1Model.x, node1Model.y ]).eql([ 130, 200 ]);
+    expect(div.childNodes.length).not.eql(0);
+  });
+
+  it('fisheye after updating node to (0, 0) test1', done => {
+    graph.update('node2', {
+      x: 0,
+      y: 0
+    });
+    setTimeout(() => {
+      const node2Model = graph.find('node2').getModel();
+      const clientPoint = graph.getClientPoint(node2Model);
+      Simulate.simulate(mouseEventWrapper, 'mousedown', {
+        clientX: clientPoint.x - 50,
+        clientY: clientPoint.y
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: clientPoint.x - 50,
+        clientY: clientPoint.y
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: clientPoint.x,
+        clientY: clientPoint.y
+      });
+      expect(div.childNodes.length).not.eql(0);
+      done();
+    }, 100);
+  });
+
+  it('fisheye after updating node to (0, 0) test2', done => {
+    graph.update('node2', {
+      x: 0,
+      y: 0
+    });
+    setTimeout(() => {
+      Simulate.simulate(mouseEventWrapper, 'mousedown', {
+        clientX: 0 + 50,
+        clientY: 0
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: 0 + 50,
+        clientY: 0
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: 0,
+        clientY: 0
+      });
+      expect(div.childNodes.length).not.eql(0);
+      done();
+    }, 100);
+  });
+
+  it('fisheye after updating node to (0, -100)', done => {
+    graph.update('node2', {
+      x: 0,
+      y: -100
+    });
+    setTimeout(() => {
+      Simulate.simulate(mouseEventWrapper, 'mousedown', {
+        clientX: 0 + 50,
+        clientY: 100
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: 0 + 50,
+        clientY: 100
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: 0,
+        clientY: 100
+      });
+      expect(div.childNodes.length).not.eql(0);
+      done();
+    }, 100);
+  });
+
+
+  it('fisheye after updating node to red', done => {
+    graph.update('node1', {
+      color: 'red'
+    });
+    setTimeout(() => {
+      const node1Model = graph.find('node1').getModel();
+      const clientPoint = graph.getClientPoint(node1Model);
+      Simulate.simulate(mouseEventWrapper, 'mousedown', {
+        clientX: clientPoint.x - 50,
+        clientY: clientPoint.y
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: clientPoint.x - 50,
+        clientY: clientPoint.y
+      });
+      Simulate.simulate(mouseEventWrapper, 'mousemove', {
+        clientX: clientPoint.x,
+        clientY: clientPoint.y
+      });
+      expect([ node1Model.x, node1Model.y ]).eql([ 130, 200 ]);
+      expect(div.childNodes.length).not.eql(0);
+      done();
+    }, 100);
+  });
+
+  it('graph destroy', () => {
+    graph.destroy();
+    expect(div.childNodes.length).equal(0);
+  });
+});
+
+
+describe('graph destroyed cacheLocation test', () => {
+  const fisheye = new Fisheye();
+  const data = {
+    nodes: [{
+      id: 'node1',
+      x: 100,
+      y: 200,
+      weight: 10
+    }, {
+      id: 'node2',
+      x: 300,
+      y: 200,
+      weight: 100
+    }, {
+      id: 'node3',
+      x: 0,
+      y: -200,
+      weight: 100
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }, {
+      target: 'node2',
+      source: 'node3'
+    }]
+  };
+  const div = document.createElement('div');
+  div.id = 'fisheyeMountNode1';
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: 'fisheyeMountNode1',
+    width: 500,
+    height: 500,
+    plugins: [ fisheye ]
+  });
+
+  const mouseEventWrapper = graph.getMouseEventWrapper();
+  graph.read(data);
+  graph.destroy();
+
+  it('fisheye mouse move on node', () => {
+    Simulate.simulate(mouseEventWrapper, 'mousedown', {
+      clientX: 100 - 50,
+      clientY: 200
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: 100 - 50,
+      clientY: 200
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: 100,
+      clientY: 200
+    });
+  });
+});
+
+
+describe('graph destroyed mousemove test', () => {
+  const fisheye = new Fisheye();
+  const div = document.createElement('div');
+  div.id = 'fisheyeMountNode2';
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: 'fisheyeMountNode2',
+    width: 500,
+    height: 500
+  });
+
+  const mouseEventWrapper = graph.getMouseEventWrapper();
+  graph.destroy();
+
+  it('fisheye mouse move on node', () => {
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: 100 - 50,
+      clientY: 200
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: 100,
+      clientY: 200
+    });
+  });
+});
+
+
+describe('node position undefined test', () => {
+  const fisheye = new Fisheye();
+  const data = {
+    nodes: [{
+      id: 'node1'
+    }, {
+      id: 'node2'
+    }, {
+      id: 'node3'
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }, {
+      target: 'node2',
+      source: 'node3'
+    }]
+  };
+  const div = document.createElement('div');
+  div.id = 'fisheyeMountNode3';
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: 'fisheyeMountNode3',
+    width: 500,
+    height: 500,
+    plugins: [ fisheye ]
+  });
+
+  const mouseEventWrapper = graph.getMouseEventWrapper();
+  graph.read(data);
+
+  it('fisheye mouse move on node', () => {
+    Simulate.simulate(mouseEventWrapper, 'mousedown', {
+      clientX: 100 - 50,
+      clientY: 200
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: 100 - 50,
+      clientY: 200
+    });
+    Simulate.simulate(mouseEventWrapper, 'mousemove', {
+      clientX: 100,
+      clientY: 200
+    });
+  });
+
+  it('graph destroy', () => {
+    graph.destroy();
+    expect(div.childNodes.length).equal(0);
+  });
+});
--- a/test/unit/plugins/tool.highlightSubgraph-spec.js
+++ b/test/unit/plugins/tool.highlightSubgraph-spec.js
@ -0,0 +1,92 @@
+const G6 = require('../../../src/index');
+const Highlighter = require('../../../plugins/tool.highlightSubgraph/');
+const expect = require('chai').expect;
+
+describe('highlight subgraph test', () => {
+  const highlighter = new Highlighter();
+  const data = {
+    nodes: [{
+      id: 'node1',
+      x: 100,
+      y: 200
+    }, {
+      id: 'node2',
+      x: 300,
+      y: 200
+    }, {
+      id: 'node3',
+      x: 400,
+      y: 200
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }, {
+      target: 'node3',
+      source: 'node2'
+    }]
+  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: div,
+    width: 500,
+    height: 500,
+    plugins: [ highlighter ]
+  });
+  graph.read(data);
+
+  it('highlight', () => {
+    const nodes = graph.getNodes();
+    const edges = graph.getEdges();
+    const reNodes = [ nodes[0], nodes[1] ];
+    const reEdges = [ edges[0] ];
+    graph.highlightSubgraph({
+      reNodes,
+      reEdges
+    });
+    const items = graph.getItems();
+    let mask;
+    G6.Util.each(items, i => {
+      if (i.type === 'guide') {
+        mask = i;
+        return;
+      }
+    });
+    expect(mask.isVisible()).eql(true);
+  });
+  it('unhighlight', () => {
+    graph.unhighlightGraph();
+    const items = graph.getItems();
+    let mask;
+    G6.Util.each(items, i => {
+      if (i.type === 'guide') {
+        mask = i;
+        return;
+      }
+    });
+    expect(mask.isVisible()).eql(false);
+  });
+  it('highlight again', () => {
+    const nodes = graph.getNodes();
+    const reNodes = [ nodes[0] ];
+    const reEdges = [ ];
+    graph.highlightSubgraph({
+      reNodes,
+      reEdges
+    });
+    const items = graph.getItems();
+    let mask;
+    G6.Util.each(items, i => {
+      if (i.type === 'guide') {
+        mask = i;
+        return;
+      }
+    });
+    expect(mask.isVisible()).eql(true);
+  });
+  it('graph destroy', () => {
+    graph.destroy();
+    expect(div.childNodes.length).equal(0);
+  });
+});
--- a/test/unit/plugins/tool.mapper-spec.js
+++ b/test/unit/plugins/tool.mapper-spec.js
@ -45,8 +45,10 @@ describe('node size mapper test', () => {
      source: 'node1'
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ nodeSizeMapper ]
@ -65,7 +67,7 @@ describe('node size mapper test', () => {
  });
  it('legend destroy', () => {
    graph.destroy();
-    expect(document.getElementById('nodeSizeLegend')).eql(null);
+    expect(document.getElementById('nodeSizeLegend').innerHTML).eql(originInnerHTML);
  });
 });

@ -98,8 +100,10 @@ describe('node color mapper domain length test', () => {
        source: 'node1'
      }]
    };
+    const div = document.createElement('div');
+    document.body.appendChild(div);
    const graph = new G6.Graph({
-      container: 'mountNode',
+      container: div,
      width: 500,
      height: 500,
      plugins: [ nodeSizeMapper ]
@ -140,8 +144,10 @@ describe('node color mapper domian equals 1 test', () => {
      source: 'node1'
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ nodeSizeMapper ]
@ -158,7 +164,7 @@ describe('node color mapper domian equals 1 test', () => {
  });
  it('legend destroy', () => {
    graph.destroy();
-    expect(document.getElementById('nodeColorLegend1')).eql(null);
+    expect(document.getElementById('nodeColorLegend1').innerHTML).eql(originInnerHTML);
  });
 });

@ -193,8 +199,10 @@ describe('node color mapper domian equals 0 test', () => {
      source: 'node1'
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ nodeSizeMapper ]
@ -211,7 +219,7 @@ describe('node color mapper domian equals 0 test', () => {
  });
  it('legend destroy', () => {
    graph.destroy();
-    expect(document.getElementById('nodeColorLegend2')).eql(null);
+    expect(document.getElementById('nodeColorLegend2').innerHTML).eql(originInnerHTML);
  });
 });

@ -242,8 +250,10 @@ describe('node color mapper domian equals -1 test', () => {
      source: 'node1'
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ nodeSizeMapper ]
@ -260,7 +270,7 @@ describe('node color mapper domian equals -1 test', () => {
  });
  it('legend destroy', () => {
    graph.destroy();
-    expect(document.getElementById('nodeColorLegend3')).eql(null);
+    expect(document.getElementById('nodeColorLegend3').innerHTML).eql(originInnerHTML);
  });
 });

@ -293,8 +303,10 @@ describe('edge size mapper test', () => {
      weight: 2
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ edgeSizeMapper ]
@ -309,6 +321,9 @@ describe('edge size mapper test', () => {
    expect(size1).eql(10);
    expect(size2).eql(50);
  });
+  it('legend destroy', () => {
+    graph.destroy();
+  });
 });

 describe('edge size mapper vertical test', () => {
@ -341,8 +356,10 @@ describe('edge size mapper vertical test', () => {
      weight: 2
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ edgeSizeMapper ]
@ -383,8 +400,10 @@ describe('node color category mapper test', () => {
      source: 'node1'
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ nodeColoreMapper ]
@ -401,7 +420,7 @@ describe('node color category mapper test', () => {
  });
  it('legend destroy', () => {
    graph.destroy();
-    expect(document.getElementById('nodeColorCatLegend')).eql(null);
+    expect(document.getElementById('nodeColorCatLegend').innerHTML).eql(originInnerHTML);
  });
 });

@ -430,8 +449,10 @@ describe('node size mapper with formatter test', () => {
      source: 'node1'
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ nodeSizeMapper ]
@ -472,8 +493,10 @@ describe('container undefined test', () => {
        source: 'node1'
      }]
    };
+    const div = document.createElement('div');
+    document.body.appendChild(div);
    const graph = new G6.Graph({
-      container: 'mountNode',
+      container: div,
      width: 500,
      height: 500,
      plugins: [ nodeSizeMapper ]
@ -511,8 +534,10 @@ describe('slider test', () => {
      source: 'node1'
    }]
  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
  const graph = new G6.Graph({
-    container: 'mountNode',
+    container: div,
    width: 500,
    height: 500,
    plugins: [ nodeSizeMapper ]
--- a/test/unit/plugins/tool.textDisplay-spec.js
+++ b/test/unit/plugins/tool.textDisplay-spec.js
@ -0,0 +1,75 @@
+const G6 = require('../../../src/index');
+const TextDisplay = require('../../../plugins/tool.textDisplay/');
+const expect = require('chai').expect;
+
+describe('text display test', () => {
+  const textDisplay = new TextDisplay();
+  const data = {
+    nodes: [{
+      id: 'node1',
+      x: 100,
+      y: 200,
+      name: 'node1'
+    }, {
+      id: 'node2',
+      x: 300,
+      y: 200,
+      name: ''
+    }, {
+      id: 'node3',
+      x: 400,
+      y: 200,
+      name: 'node3node3node3node3node3node3node3node3node3node3node3node3node3node3'
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }, {
+      target: 'node3',
+      source: 'node2'
+    }]
+  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: div,
+    width: 500,
+    height: 500,
+    plugins: [ textDisplay ]
+  });
+  graph.node({
+    label(model) {
+      return {
+        text: model.name,
+        stroke: '#fff',
+        lineWidth: 4
+      };
+    }
+  });
+  graph.read(data);
+
+  it('graph change view port', () => {
+    graph.emit('afterviewportchange', {});
+
+    const node1 = graph.find('node1');
+    const node1label = node1.getLabel();
+    const node3 = graph.find('node3');
+    const node3label = node3.getLabel();
+    expect(node1label.get('visible')).eql(true);
+    expect(node3label.get('visible')).eql(false);
+  });
+  it('graph zoom', () => {
+    graph.emit('afterzoom', {});
+
+    const node1 = graph.find('node1');
+    const node1label = node1.getLabel();
+    const node3 = graph.find('node3');
+    const node3label = node3.getLabel();
+    expect(node1label.get('visible')).eql(true);
+    expect(node3label.get('visible')).eql(false);
+  });
+  it('graph destroy', () => {
+    graph.destroy();
+    expect(div.childNodes.length).equal(0);
+  });
+});
--- a/test/unit/plugins/util.extractSubgraph-spec.js
+++ b/test/unit/plugins/util.extractSubgraph-spec.js
@ -0,0 +1,69 @@
+const G6 = require('../../../src/index');
+const Extractor = require('../../../plugins/util.extractSubgraph/');
+const expect = require('chai').expect;
+const Util = G6.Util;
+
+describe('extract subgraph test', () => {
+  const data = {
+    nodes: [{
+      id: 'node1',
+      x: 100,
+      y: 200
+    }, {
+      id: 'node2',
+      x: 300,
+      y: 200
+    }, {
+      id: 'node3',
+      x: 400,
+      y: 200
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }, {
+      target: 'node3',
+      source: 'node2'
+    }]
+  };
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: div,
+    width: 500,
+    height: 500
+  });
+  graph.read(data);
+
+  it('double direction subgraph about node2', () => {
+    const node = graph.find('node2');
+    const {
+      reNodes,
+      reEdges
+    } = Util.extract(graph, 'bi', 1, [ node ]);
+    expect(reNodes.length).eql(3);
+    expect(reEdges.length).eql(2);
+  });
+  it('in direction subgraph about node2', () => {
+    const node = graph.find('node2');
+    const {
+      reNodes,
+      reEdges
+    } = Util.extract(graph, 'in', 1, [ node ]);
+    expect(reNodes.length).eql(2);
+    expect(reEdges.length).eql(1);
+  });
+  it('out direction subgraph about node2', () => {
+    const node = graph.find('node2');
+    const {
+      reNodes,
+      reEdges
+    } = Util.extract(graph, 'out', 1, [ node ]);
+    expect(reNodes.length).eql(2);
+    expect(reEdges.length).eql(1);
+  });
+  it('graph destroy', () => {
+    graph.destroy();
+    expect(div.childNodes.length).equal(0);
+  });
+});