Merge branch 'master' of github.com:antvis/g6

demos/custom-draw.html

@@ -27,7 +27,7 @@ G6.registerNode('customNode', {
         x: 100,
         y: 100,
         fill: '#333',
-        text: '我是一个自定义节点，有下面那个方形和我自己组成'
+        text: '我是一个自定义节点，由下面那个方形和我自己组成'
       }
     });
     return group.addShape('rect', {

package.json

@@ -99,7 +99,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/plugins/template.tableSankey-spec",
+    "test-live": "torch --compile --interactive --watch --recursive ./test/unit/helper/graph2canvas-spec",
     "watch": "webpack --config webpack-dev.config.js",
     "win-dev": "node ./bin/win-dev.js"
   },

plugins/behaviour.analysis/index.js

@@ -90,17 +90,17 @@ G6.registerBehaviour('panNode', graph => {
   let node;
   let dx;
   let dy;
-  graph.on('node:mouseenter', () => {
+  graph.behaviourOn('node:mouseenter', () => {
     graph.css({
       cursor: 'move'
     });
   });
-  graph.on('node:mouseleave', () => {
+  graph.behaviourOn('node:mouseleave', () => {
     graph.css({
       cursor: 'default'
     });
   });
-  graph.on('node:dragstart', ({ item, x, y }) => {
+  graph.behaviourOn('node:dragstart', ({ item, x, y }) => {
     graph.css({
       cursor: 'move'
     });
@@ -109,7 +109,7 @@ G6.registerBehaviour('panNode', graph => {
     dx = model.x - x;
     dy = model.y - y;
   });
-  graph.on('node:drag', ev => {
+  graph.behaviourOn('node:drag', ev => {
     graph.preventAnimate(() => {
       graph.update(node, {
         x: ev.x + dx,
@@ -117,10 +117,10 @@ G6.registerBehaviour('panNode', graph => {
       });
     });
   });
-  graph.on('node:dragend', () => {
+  graph.behaviourOn('node:dragend', () => {
     node = undefined;
   });
-  graph.on('canvas:mouseleave', () => {
+  graph.behaviourOn('canvas:mouseleave', () => {
     node = undefined;
   });
 });

plugins/util.dataCleaner/index.js

@@ -7,7 +7,7 @@ const G6 = require('@antv/g6');
 const Util = G6.Util;
 
 const dataCleaner = {
-  clearData(data) {
+  cleanData(data) {
     const nodeMap = {};
     const invalidEdges = [];
     data.nodes.forEach(node => {

src/animation/index.js

@@ -13,7 +13,6 @@
  */
 
 const Global = require('../global');
-// const Util = require('../util/');
 
 /**
  * scale in animate

src/helper/graph2canvas.js

@@ -54,8 +54,11 @@ class Graph2Canvas {
       });
       if (domShapes.length > 0) {
         domShapes.forEach(domShape => {
-          domShape.domImageOnload = false;
           const el = domShape.get('el');
+          if (!el) {
+            return;
+          }
+          domShape.domImageOnload = false;
           const width = domShape.attr('width');
           const height = domShape.attr('height');
           domToImage.toPng(el, {

test/unit/animation/index-spec.js

@@ -0,0 +1,39 @@
+const G6 = require('../../../src/index');
+// const chai = require('chai');
+// const expect = chai.expect;
+const Util = G6.Util;
+const Animation = require('../../../src/animation/');
+const div = document.createElement('div');
+document.body.appendChild(div);
+
+describe('animation test', () => {
+  const data = {
+    nodes: [{
+      id: 'node1',
+      x: 100,
+      y: 200
+    }, {
+      id: 'node2',
+      x: 300,
+      y: 200
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }]
+  };
+  const graph = new G6.Graph({
+    container: div,
+    width: 500,
+    height: 500
+  });
+  graph.read(data);
+  const item = graph.find('node1');
+  const group = item.getGraphicGroup();
+  it('all', () => {
+    Util.each(Animation, animation => {
+      animation({ item, element: group, done: () => {} });
+    });
+    graph.destroy();
+  });
+});

test/unit/helper/graph2canvas-spec.js

@@ -0,0 +1,64 @@
+const G6 = require('../../../src/index');
+// const chai = require('chai');
+// const expect = chai.expect;
+const Graph2canvas = require('../../../src/helper/graph2canvas');
+const div = document.createElement('div');
+document.body.appendChild(div);
+
+describe('helper graph2canvas test', () => {
+  it('graph2canvas', () => {
+    const data = {
+      nodes: [{
+        id: 'node1',
+        x: 100,
+        y: 200,
+        html: '<div>ssss</div>',
+        shape: 'html'
+      }, {
+        id: 'node2',
+        x: 300,
+        y: 200,
+        shape: 'customNode'
+      }, {
+        id: 'node3',
+        x: 300,
+        y: 300,
+        shape: 'common'
+      }],
+      edges: [{
+        target: 'node2',
+        source: 'node1'
+      }]
+    };
+    G6.registerNode('customNode', {
+      draw(item) {
+        const group = item.getGraphicGroup();
+        const html = G6.Util.createDOM('<div>这里是 HTML 节点</div>');
+        return group.addShape('dom', {
+          attrs: {
+            x: 0,
+            y: 0,
+            width: 100,
+            height: 100,
+            html
+          }
+        });
+      }
+    });
+    const graph = new G6.Graph({
+      container: div,  // 容器ID
+      renderer: 'svg',
+      height: window.innerHeight
+    });
+    graph.read(data);
+    setTimeout(() => {
+      const graph2canvas = new Graph2canvas({
+        graph,
+        width: 400,
+        height: 500
+      });
+      graph2canvas.toCanvas();
+      graph.destroy();
+    }, 300);
+  });
+});

test/unit/plugins/tool.grid-spec.js

@@ -0,0 +1,52 @@
+const G6 = require('../../../src/index');
+const chai = require('chai');
+const expect = chai.expect;
+const Util = G6.Util;
+document.body.appendChild(Util.createDOM(`
+  <div id='mountNode'></div>
+`));
+require('../../../plugins/util.randomData/');
+require('../../../plugins/tool.grid/');
+
+describe('tool grid', () => {
+  it('init default', () => {
+    const Plugin = G6.Plugins['tool.grid'];
+    const plugin = new Plugin();
+    const graph = new G6.Graph({
+      container: 'mountNode',
+      fitView: 'cc',
+      width: 500,
+      height: 500,
+      plugins: [ plugin ]
+    });
+    graph.node({
+      size: 16
+    });
+    graph.read({});
+    plugin.hide();
+    plugin.show();
+    expect(plugin.gridEl).not.eql(undefined);
+    graph.destroy();
+    expect(plugin.gridEl.get('destroyed')).eql(true);
+  });
+  it('init default', () => {
+    const Plugin = G6.Plugins['tool.grid'];
+    const plugin = new Plugin({
+      type: 'line'
+    });
+    const graph = new G6.Graph({
+      container: 'mountNode',
+      fitView: 'cc',
+      width: 500,
+      height: 500,
+      plugins: [ plugin ]
+    });
+    graph.node({
+      size: 16
+    });
+    graph.read({});
+    expect(plugin.gridEl).not.eql(undefined);
+    graph.destroy();
+    expect(plugin.gridEl.get('destroyed')).eql(true);
+  });
+});

test/unit/plugins/util.dataCleaner-spec.js

@@ -0,0 +1,27 @@
+const G6 = require('../../../src/index');
+const expect = require('chai').expect;
+const Util = G6.Util;
+require('../../../plugins/util.dataCleaner/');
+describe('plugin data cleaner test', () => {
+  it('cleanData', () => {
+    const data = {
+      nodes: [{
+        id: 1
+      }, {
+        id: 2
+      }],
+      edges: [{
+        source: 1,
+        target: 3
+      }, {
+        source: 3,
+        target: 1
+      }, {
+        source: 1,
+        target: 2
+      }]
+    };
+    Util.cleanData(data);
+    expect(data.edges.length).eql(1);
+  });
+});