test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-13 17:15:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #412 from antvis/plugin_tests

Browse Source 
Plugin tests
This commit is contained in:
Yellowthrough 2018-08-09 16:19:48 +08:00 committed by GitHub
commit 0193f56e76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 836 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@ -2,7 +2,7 @@
{ {
"plugins": [ "plugins": [
"transform-object-rest-spread", "transform-object-rest-spread",
"transform-remove-strict-mode", "transform-remove-strict-mode"
], ],
"presets": [ "presets": [
[ [

134
demos/gallery-anchors-selection.html Normal file
View File

@ -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>

10
demos/gallery-case1.html
View File

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

4
demos/gallery-graphanalyzer.html
View File

@ -100,9 +100,9 @@
// }); // });
// }); // });
const minimap = document.getElementById('minimap'); const minimap = document.getElementById('minimap');
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';
}); });
</script> </script>

2
demos/gallery-webIndex.html
View File

@ -71,7 +71,7 @@
interactive: false, interactive: false,
textDisplay: false, textDisplay: false,
node_label: null, node_label: null,
edge_style(model) { edgeStyle(model) {
return { return {
stroke: graph.find(model.target).getModel().color, stroke: graph.find(model.target).getModel().color,
strokeOpacity: 0.8 strokeOpacity: 0.8

2
package.json
View File

@ -98,7 +98,7 @@
"screenshot": "node ./bin/screenshot.js", "screenshot": "node ./bin/screenshot.js",
"start": "npm run dev", "start": "npm run dev",
"test": "torch --compile --renderer --recursive ./test/unit", "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", "watch": "webpack --config webpack-dev.config.js",
"win-dev": "node ./bin/win-dev.js" "win-dev": "node ./bin/win-dev.js"
}, },

19
plugins/layout.forceAtlas2/layout.js
View File

@ -159,27 +159,30 @@ class Layout {
loading.style.setProperty('background-color', '#fff'); loading.style.setProperty('background-color', '#fff');
loading.style.setProperty('position', 'absolute'); loading.style.setProperty('position', 'absolute');
const parent = graph.getGraphContainer().parentNode; const parent = graph.getGraphContainer().parentNode;
loading.style.setProperty('width', parent.offsetWidth + 'px'); const divHeight = parent.offsetHeight ? parent.offsetHeight : 600;
loading.style.setProperty('height', parent.offsetHeight + 'px'); const divWidth = parent.offsetWidth ? parent.offsetWidth : 600;
loading.style.setProperty('margin-top', (-parent.offsetHeight) + 'px'); 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; loading.style.zIndex = 999;
parent.appendChild(loading); parent.appendChild(loading);
// the loading image // the loading image
const imgSize = 200;
const loadingImg = document.createElement('img'); const loadingImg = document.createElement('img');
loadingImg.src = 'https://gw.alipayobjects.com/zos/rmsportal/mnEmjOmrHbghTsZNeTmI.gif'; loadingImg.src = 'https://gw.alipayobjects.com/zos/rmsportal/mnEmjOmrHbghTsZNeTmI.gif';
loadingImg.style.setProperty('width', 200 + 'px'); loadingImg.style.setProperty('width', imgSize + 'px');
loadingImg.style.setProperty('height', 200 + 'px'); loadingImg.style.setProperty('height', imgSize + 'px');
const Cw = loadingImg.offsetWidth; const Cw = imgSize;
const Pw = loading.offsetWidth; const Pw = loading.offsetWidth;
const left = (Pw - Cw) / 2; const left = (Pw - Cw) / 2;
loadingImg.style.setProperty('margin-left', left + 'px'); loadingImg.style.setProperty('margin-left', left + 'px');
const Ch = loadingImg.offsetHeight; const Ch = imgSize;
const Ph = loading.offsetHeight; const Ph = loading.offsetHeight;
const top = (Ph - Ch) / 2; const top = (Ph - Ch) / 2;
loadingImg.style.setProperty('margin-top', top + 'px'); loadingImg.style.setProperty('margin-top', top + 'px');
loading.appendChild(loadingImg); loading.appendChild(loadingImg);
const worker = new Worker();// { type: 'module' } const worker = new Worker();
worker.postMessage(obj); worker.postMessage(obj);
worker.onmessage = function(event) { worker.onmessage = function(event) {
this.nodes = event.data; this.nodes = event.data;

101
plugins/template.maxSpanningForest/index.js
View File

@ -37,21 +37,12 @@ class Plugin {
callBack: 'showAll' callBack: 'showAll'
}] }]
}, },
layout: { layoutCfg: {
auto: 'once', // true false once kr: 120,
processer: new Layout({ kg: 8.0,
kr: 120, prevOverlapping: true,
kg: 8.0, maxIteration: 1000,
mode: 'common', barnesHut: true
prevOverlapping: true,
dissuadeHubs: false,
maxIteration: 1000,
barnesHut: true,
ks: 0.1,
ksmax: 10,
tao: 0.1,
...options.layoutCfg
})
}, },
fisheye: true, fisheye: true,
menu: null, menu: null,
@ -61,11 +52,22 @@ class Plugin {
stroke: '#4F7DAB', stroke: '#4F7DAB',
strokeOpacity: 0.65 strokeOpacity: 0.65
}, },
activedEdgeStyle: {
endArrow: true,
stroke: '#4C7295',
strokeOpacity: 1
},
nodeStyle: { nodeStyle: {
stroke: '#696969', stroke: '#696969',
strokeOpacity: 0.4, strokeOpacity: 0.4,
lineWidth: 1 lineWidth: 1
}, },
activedNodeStyle: {
stroke: '#fff',
lineWidth: 1,
shadowColor: '#6a80aa',
shadowBlur: 20
},
node_label(model) { node_label(model) {
return { return {
text: model.id, text: model.id,
@ -75,12 +77,12 @@ class Plugin {
}; };
}, },
interactive: true, interactive: true,
textDisplay: true, textDisplay: true
...options }, options);
});
} }
init() { init() {
const graph = this.graph; const graph = this.graph;
const highlighter = new G6.Plugins['tool.highlightSubgraph'](); const highlighter = new G6.Plugins['tool.highlightSubgraph']();
if (this.fisheye) { if (this.fisheye) {
const fisheye = new G6.Plugins['tool.fisheye']({ const fisheye = new G6.Plugins['tool.fisheye']({
@ -94,9 +96,17 @@ class Plugin {
} }
graph.addPlugin(highlighter); graph.addPlugin(highlighter);
graph.on('beforeinit', () => { graph.on('beforeinit', () => {
const layout = graph.get('layout'); let layout = graph.get('layout');
if (!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.graph.activeItem = item => {
this.activeItem(item); this.activeItem(item);
@ -134,7 +144,9 @@ class Plugin {
this.setStyle(); this.setStyle();
this.interactive && this.setListener(); this.interactive && this.setListener();
const menuCfg = this.menuCfg; const menuCfg = this.menuCfg;
this.menu = new Menu({ menuCfg, graph }); if (menuCfg !== null) {
this.menu = new Menu({ menuCfg, graph });
}
}); });
} }
setStyle() { setStyle() {
@ -164,19 +176,10 @@ class Plugin {
let style = {}; let style = {};
let preStyle = {}; let preStyle = {};
if (item.type === 'node') { if (item.type === 'node') {
style = { style = this.activedNodeStyle;
stroke: '#fff',
lineWidth: 1,
shadowColor: '#6a80aa',
shadowBlur: 20
};
preStyle = this.nodeStyle; preStyle = this.nodeStyle;
} else if (item.type === 'edge') { } else if (item.type === 'edge') {
style = { style = this.activedEdgeStyle;
endArrow: true,
stroke: '#4C7295',
strokeOpacity: 1
};
preStyle = this.edgeStyle; preStyle = this.edgeStyle;
} else return; } else return;
@ -229,22 +232,24 @@ class Plugin {
shape, shape,
item item
}) => { }) => {
if (shape && item.isNode) { if (this.menuCfg !== null) {
const menuX = item.getModel().x * graph.getMatrix()[0] + graph.getMatrix()[6]; if (shape && item.isNode) {
const menuY = item.getModel().y * graph.getMatrix()[0] + graph.getMatrix()[7]; const menuX = item.getModel().x * graph.getMatrix()[0] + graph.getMatrix()[6];
this.menu.show(item, menuX, menuY); const menuY = item.getModel().y * graph.getMatrix()[0] + graph.getMatrix()[7];
graph.draw(); this.menu.show(item, menuX, menuY);
} else { graph.draw();
this.menu.hide(); } else {
// restore the highlighted graph and hide the edges which are not tree edges. this.menu.hide();
graph.restoreGraph(); // restore the highlighted graph and hide the edges which are not tree edges.
const edges = graph.getEdges(); graph.unhighlightGraph();
Util.each(edges, edge => { const edges = graph.getEdges();
if (edge.isVisible() && !edge.getModel().isTreeEdge) { Util.each(edges, edge => {
edge.hide(); if (edge.isVisible() && !edge.getModel().isTreeEdge) {
} edge.hide();
}); }
graph.draw(); });
graph.draw();
}
} }
}); });

7
plugins/tool.fisheye/index.js
View File

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

4
plugins/tool.fisheye/tool.js
View File

@ -16,13 +16,13 @@ class Tool {
/** /**
* defualt zoom center * defualt zoom center
* @type {object} * @type {array}
*/ */
center: [ 0, 0 ], center: [ 0, 0 ],
/** /**
* defualt magnification factor * defualt magnification factor
* @type {object} * @type {number}
*/ */
d: 1.0 d: 1.0
}, options); }, options);

2
plugins/tool.highlightSubgraph/README.md
View File

@ -8,7 +8,7 @@ interface:
params: params:
- hlItems: the items which will be highlighted - hlItems: the items which will be highlighted
- restoreGraph() - unhighlightGraph()
restore the graph to the un-lighlighted style. restore the graph to the un-lighlighted style.
## use ## use

6
plugins/tool.highlightSubgraph/index.js
View File

@ -32,11 +32,11 @@ class Plugin {
init() { init() {
this.graph.on('afterinit', () => { this.graph.on('afterinit', () => {
this.graph.highlightSubgraph = this.highlightSubgraph; this.graph.highlightSubgraph = this.highlightSubgraph;
this.graph.restoreGraph = this.restoreGraph; this.graph.unhighlightGraph = this.unhighlightGraph;
}); });
} }
highlightSubgraph(hlItems) { highlightSubgraph(hlItems) {
this.restoreGraph(); this.unhighlightGraph();
// sort the group items // sort the group items
const ns = hlItems.reNodes; const ns = hlItems.reNodes;
const es = hlItems.reEdges; const es = hlItems.reEdges;
@ -95,7 +95,7 @@ class Plugin {
}); });
this.draw(); this.draw();
} }
restoreGraph() { unhighlightGraph() {
// hide the mask // hide the mask
const items = this.getItems(); const items = this.getItems();
let mask; let mask;

2
plugins/tool.mapper/README.md
View File

@ -21,7 +21,7 @@ Constructor parameters:
simple use. simple use.
```js ```js
const Mapper = G6.Plugins['tool.mapper'] const Mapper = G6.Plugins['tool.mapper'];
const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3'], { const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3'], {
legendCfg: { legendCfg: {
scale: 0.5 scale: 0.5

9
plugins/tool.mapper/index.js
View File

@ -179,14 +179,14 @@ class Plugin {
if (legendContainer === undefined) { if (legendContainer === undefined) {
if (containerId === undefined) { if (containerId === undefined) {
legendContainer = Util.createDOM('<div class="legend-container"></div>'); legendContainer = Util.createDOM('<div class="legend-container"></div>');
const container = graph.getGraphContainer();
container.appendChild(legendContainer);
} else { } else {
legendContainer = document.getElementById(containerId); legendContainer = document.getElementById(containerId);
if (legendContainer === undefined || legendContainer === null) { if (legendContainer === undefined || legendContainer === null) {
throw new Error('please set the container for the graph !'); throw new Error('please set the container for the graph !');
} }
} }
const container = graph.getGraphContainer();
container.appendChild(legendContainer);
} }
const canvas = new G.Canvas({ const canvas = new G.Canvas({
@ -311,10 +311,11 @@ class Plugin {
} }
} }
const domainStep = (domain[domain.length - 1] - domain[0]) / (range.length - 1);
const items = []; const items = [];
Util.each(range, (val, i) => { Util.each(range, (val, i) => {
const percent = (domain[i] - scale.min) / (scale.max - scale.min); let itemText = domain[0] + domainStep * i;
let itemText = domain[i]; const percent = (itemText - domain[0]) / (domain[domain.length - 1] - domain[0]);
if (legendCfg.formatter !== undefined && legendCfg.formatter !== null) { if (legendCfg.formatter !== undefined && legendCfg.formatter !== null) {
itemText = legendCfg.formatter(domain[i]); itemText = legendCfg.formatter(domain[i]);
} }

8
plugins/tool.textDisplay/index.js
View File

@ -24,13 +24,17 @@ class Plugin {
textDisplay() { textDisplay() {
const graph = this.graph; const graph = this.graph;
const nodes = graph.getNodes(); const nodes = graph.getNodes();
const scale = graph.getMatrix()[0];
Util.each(nodes, node => { Util.each(nodes, node => {
const label = node.getLabel(); const label = node.getLabel();
const model = node.getModel(); const model = node.getModel();
const labelBox = label.getBBox(); const labelBox = label.getBBox();
const labelWidth = labelBox.maxX - labelBox.minX; 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; if (labelWidth === 0) return;
const ratio = labelWidth / nodeWidth; const ratio = labelWidth / nodeWidth;
if (ratio > 2) { if (ratio > 2) {

16
plugins/util.extractSubgraph/index.js
View File

@ -49,22 +49,6 @@ const extractSubgraph = {
reNodes, reNodes,
reEdges 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); Util.mix(Util, extractSubgraph);

328
test/unit/plugins/tool.fisheye-spec.js Normal file
View File

@ -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);
});
});

92
test/unit/plugins/tool.highlightSubgraph-spec.js Normal file
View File

@ -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);
});
});

57
test/unit/plugins/tool.mapper-spec.js
View File

@ -45,8 +45,10 @@ describe('node size mapper test', () => {
source: 'node1' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]
@ -65,7 +67,7 @@ describe('node size mapper test', () => {
}); });
it('legend destroy', () => { it('legend destroy', () => {
graph.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' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]
@ -140,8 +144,10 @@ describe('node color mapper domian equals 1 test', () => {
source: 'node1' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]
@ -158,7 +164,7 @@ describe('node color mapper domian equals 1 test', () => {
}); });
it('legend destroy', () => { it('legend destroy', () => {
graph.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' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]
@ -211,7 +219,7 @@ describe('node color mapper domian equals 0 test', () => {
}); });
it('legend destroy', () => { it('legend destroy', () => {
graph.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' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]
@ -260,7 +270,7 @@ describe('node color mapper domian equals -1 test', () => {
}); });
it('legend destroy', () => { it('legend destroy', () => {
graph.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 weight: 2
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ edgeSizeMapper ] plugins: [ edgeSizeMapper ]
@ -309,6 +321,9 @@ describe('edge size mapper test', () => {
expect(size1).eql(10); expect(size1).eql(10);
expect(size2).eql(50); expect(size2).eql(50);
}); });
it('legend destroy', () => {
graph.destroy();
});
}); });
describe('edge size mapper vertical test', () => { describe('edge size mapper vertical test', () => {
@ -341,8 +356,10 @@ describe('edge size mapper vertical test', () => {
weight: 2 weight: 2
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ edgeSizeMapper ] plugins: [ edgeSizeMapper ]
@ -383,8 +400,10 @@ describe('node color category mapper test', () => {
source: 'node1' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeColoreMapper ] plugins: [ nodeColoreMapper ]
@ -401,7 +420,7 @@ describe('node color category mapper test', () => {
}); });
it('legend destroy', () => { it('legend destroy', () => {
graph.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' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]
@ -472,8 +493,10 @@ describe('container undefined test', () => {
source: 'node1' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]
@ -511,8 +534,10 @@ describe('slider test', () => {
source: 'node1' source: 'node1'
}] }]
}; };
const div = document.createElement('div');
document.body.appendChild(div);
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: div,
width: 500, width: 500,
height: 500, height: 500,
plugins: [ nodeSizeMapper ] plugins: [ nodeSizeMapper ]

75
test/unit/plugins/tool.textDisplay-spec.js Normal file
View File

@ -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);
});
});

69
test/unit/plugins/util.extractSubgraph-spec.js Normal file
View File

@ -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);
});
});