test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

add group unit test

Browse Source
This commit is contained in:
zhanning.bzn 2019-08-28 21:04:26 +08:00
parent a7d8f36f48
commit da8b550d3d
10 changed files with 315 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demos/cloudatlas.html
View File

@ -9,7 +9,6 @@
<body>
<script src="../build/g6.js"></script>
<script src="../build/minimap.js"></script>
<script src="assets/hierarchy.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script>
const ERROR_COLOR = "#F5222D";
@ -834,8 +833,8 @@
stroke: "#A3B1BF"
}
},
layout: data => {
const result = Hierarchy.compactBox(data, {
layout: {
type: 'compactBox',
direction: "LR",
getId: function getId(d) {
return d.id;
@ -849,8 +848,6 @@
getHGap: function getHGap() {
return 50;
}
});
return result;
}
});
function strLen(str) {

149
demos/dynamic-add-tree.html Normal file
View File

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
</style>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
const layouts = {
compactBox: {
type: 'compactBox',
direction: 'LR',
defalutPosition: [],
getId(d) { return d.id; },
getHeight() { return 16 },
getWidth() { return 16 },
getVGap() { return 50 },
getHGap() { return 100 }
}
};
const graph = new G6.TreeGraph({
container: 'mountNode',
width: 500,
height: 500,
pixelRatio: 2,
renderer: 'svg',
modes: {
default: ['collapse-expand', 'drag-canvas']
},
fitView: true,
layout: layouts.compactBox
});
graph.node(node => {
return {
size: 16,
anchorPoints: [[0,0.5], [1,0.5]],
style: {
fill: '#40a9ff',
stroke: '#096dd9'
},
label: node.id,
labelCfg: {
position: node.children && node.children.length > 0 ? 'left' : 'right'
}
}
});
let i = 0;
graph.edge(() => {
i++;
return {
shape: 'cubic-horizontal',
color: '#A3B1BF',
label: i
}
});
const data = {
isRoot: true,
id: 'Root',
style: {
fill: 'red'
},
children: [
{
id: 'SubTreeNode1',
raw: {},
children: [
{
id: 'SubTreeNode1.1'
},
{
id: 'SubTreeNode1.2',
children: [
{
id: 'SubTreeNode1.2.1'
},
{
id: 'SubTreeNode1.2.2'
},
{
id: 'SubTreeNode1.2.3'
}
]
}
]
},
{
id: 'SubTreeNode2',
children: [
{
id: 'SubTreeNode2.1'
}
]
}, {
id: 'SubTreeNode3',
children: [
{
id: 'SubTreeNode3.1'
},
{
id: 'SubTreeNode3.2'
},
{
id: 'SubTreeNode3.3'
}
]
}, {
id: 'SubTreeNode4'
}, {
id: 'SubTreeNode5'
}, {
id: 'SubTreeNode6'
}
]
};
graph.data(data);
graph.render();
let count = 0;
graph.on('node:click', evt => {
const { item } = evt
const nodeId = item.get('id');
const model = item.getModel()
const children = model.children;
if(!children || children.length === 0) {
const childData = {
id: `child-data-${count}`,
shape: 'rect',
children: [
{
id: `x-${count}`
},
{
id: `y-${count}`
}
]
};
graph.addChild(childData, nodeId)
count++
graph.refreshLayout()
}
})
</script>
</body>
</html>

127
demos/register-polyline.html Normal file
View File

@ -0,0 +1,127 @@
<!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>Document</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
/**
* 该案例演示如何自定义折线，有两种方式：
* 1、继承line，复写getPath和getShapeStyle方法；
* 2、复写draw方法。
* by siogo 提供的 issue（https://github.com/antvis/g6/issues/814）
*
*/
G6.registerNode('circleNode', {
drawShape(cfg, group) {
const keyShape = group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: 30,
fill: '#87e8de'
}
});
return keyShape;
}
}, 'circle');
const data = {
nodes: [
{id: '7', x: 200, y: 200, size: 40, shape: 'circleNode',anchorPoints: [[1, 0.5], [1, 0]]},
{id: '8', x: 400, y: 400, size: 40, shape: 'circleNode',anchorPoints: [[0, 0.5], [0, 1]]},
],
edges: [
{source: '7', target: '8', shape: 'line-arrow-self',sourceAnchor: 0,targetAnchor: 0,}
]
};
const graph = new G6.Graph({
container: 'mountNode',
width: 500,
height: 500,
modes: {
// 支持的 behavior
default: [ 'drag-node'],
}
});
G6.registerEdge('line-arrow', {
draw(cfg, group) {
const { startPoint, endPoint } = cfg
const keyShape = group.addShape('path', {
attrs: {
path: [
['M', startPoint.x, startPoint.y],
['L', endPoint.x / 3 + 2 / 3 * startPoint.x , startPoint.y],
['L', endPoint.x / 3 + 2 / 3 * startPoint.x , endPoint.y],
['L', endPoint.x, endPoint.y]
],
stroke: '#BBB',
lineWidth: 1,
startArrow: {
path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
d: 6
},
endArrow: {
path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
d: 6
},
className: 'edge-shape'
}
});
return keyShape
}
});
G6.registerEdge('line-arrow-self', {
getPath(points) {
const startPoint = points[0]
const endPoint = points[1]
return [
['M', startPoint.x, startPoint.y],
['L', endPoint.x / 3 + 2 / 3 * startPoint.x , startPoint.y],
['L', endPoint.x / 3 + 2 / 3 * startPoint.x , endPoint.y],
['L', endPoint.x, endPoint.y]
]
},
getShapeStyle(cfg) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const controlPoints = this.getControlPoints(cfg);
let points = [ startPoint ]; // 添加起始点
// 添加控制点
if (controlPoints) {
points = points.concat(controlPoints);
}
// 添加结束点
points.push(endPoint);
const path = this.getPath(points);
const style = G6.Util.mix({}, G6.Global.defaultEdge.style, {
stroke: '#BBB',
lineWidth: 1,
path,
startArrow: {
path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
d: 6
},
endArrow: {
path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
d: 6
},
}, cfg.style);
return style;
},
}, 'line');
graph.data(data)
graph.render()
</script>
</body>
</html>

5
demos/tree-graph.html
View File

@ -16,7 +16,7 @@
<script src="assets/hierarchy.js"></script>
<script src="../build/g6.js"></script>
<script>
let currentLayout = 'dendrogram';
let currentLayout = 'compactBox';
const layouts = {
dendrogram: {
type: 'dendrogram',
@ -28,6 +28,7 @@
compactBox: {
type: 'compactBox',
direction: 'LR',
fixedPosition: true,
getId(d) { return d.id; },
getHeight() { return 16 },
getWidth() { return 16 },
@ -52,7 +53,7 @@
default: ['collapse-expand', 'drag-canvas']
},
fitView: true,
layout: layouts.dendrogram
layout: layouts.compactBox
});
graph.node(node => {
return {

2
package.json
View File

@ -98,7 +98,7 @@
"screenshot": "node ./bin/screenshot.js",
"start": "npm run dev",
"test": "torch --compile --renderer --opts test/mocha.opts --recursive ./test/unit",
"test-live": "torch --compile --interactive --watch --opts test/mocha.opts --recursive ./test/unit/graph/controller/custom-group-spec.js",
"test-live": "torch --compile --interactive --watch --opts test/mocha.opts --recursive ./test/unit/behavior/drag-group-spec.js",
"test-live-tree": "torch --compile --interactive --watch --opts test/mocha.opts --recursive ./test/unit/graph/tree-graph-spec.js",
"test-bugs": "torch --compile --renderer --recursive ./test/bugs",
"test-bugs-live": "torch --compile --interactive --watch --recursive ./test/bugs",

2
src/behavior/collapse-expand-group.js
View File

@ -3,7 +3,7 @@
* @Date: 2019-07-31 14:36:15
* @LastEditors: moyee
* @LastEditTime: 2019-08-22 18:43:24
* @Description: file content
* @Description: 收起和展开群组
*/
module.exports = {

2
src/behavior/drag-group.js
View File

@ -3,7 +3,7 @@
* @Date: 2019-07-31 14:36:15
* @LastEditors: moyee
* @LastEditTime: 2019-08-23 11:13:43
* @Description: file content
* @Description: 拖动群组
*/
const { merge } = require('lodash');

2
src/graph/controller/customGroup.js
View File

@ -3,7 +3,7 @@
* @Date: 2019-07-30 12:10:26
* @LastEditors: moyee
* @LastEditTime: 2019-08-23 11:44:32
* @Description: file content
* @Description: Group Controller
*/
const { merge, isString } = require('lodash');

67
test/unit/behavior/drag-group-spce.js → test/unit/behavior/drag-group-spec.js
View File

@ -8,10 +8,9 @@
const expect = require('chai').expect;
const G6 = require('../../../src');
const Util = G6.Util;
const { groupBy } = require('lodash');
const div = document.createElement('div');
div.id = 'graph-group-spec';
div.id = 'drag-group-spec';
document.body.appendChild(div);
G6.registerNode('circleNode', {
@ -47,7 +46,7 @@ const graph = new G6.Graph({
const groupControll = graph.get('customGroupControll');
describe('signle layer group', () => {
describe('drag signle layer group', () => {
const nodes = [
{
@ -99,37 +98,20 @@ describe('signle layer group', () => {
graph.data(data);
graph.render();
it('render signle group test', () => {
const group = graph.get('customGroup');
const children = group.get('children');
// group的数量
expect(children.length).equal(4);
// 每个group的圆心坐标
const nodesInGroup = groupBy(data.nodes, 'groupId');
for (const node in nodesInGroup) {
if (node === 'undefined') {
continue;
}
const currentNodes = nodesInGroup[node];
const nodeIds = currentNodes.map(nodeId => nodeId.id);
const { x, y, width, height } = groupControll.calculationGroupPosition(nodeIds);
const r = width > height ? width / 2 : height / 2;
const cx = (width + 2 * x) / 2;
const cy = (height + 2 * y) / 2;
const groupShape = groupControll.getDeletageGroupById(node);
const { groupStyle } = groupShape;
expect(groupStyle.x).eql(cx);
expect(groupStyle.y).eql(cy);
expect(groupStyle.r).eql(r);
}
});
it('drag signle group', () => {
it.only('drag signle layer group', () => {
const { nodeGroup } = groupControll.getDeletageGroupById('group1');
const nodes = data.nodes.filter(node => node.groupId === 'group1');
expect(nodes.length).eql(2);
const node1 = nodes[0];
const node2 = nodes[1];
expect(node1.x).eql(100);
expect(node1.y).eql(100);
expect(node2.x).eql(150);
expect(node2.y).eql(100);
const keyShape = nodeGroup.get('keyShape');
const { width, height } = keyShape.getBBox();
@ -142,13 +124,11 @@ describe('signle layer group', () => {
});
graph.emit('drag', {
canvasX: 200,
canvasY: 250,
canvasX: 150,
canvasY: 150,
target: keyShape
});
setTimeout(() => {
}, 1000);
graph.emit('dragend', {
target: keyShape
});
@ -168,11 +148,22 @@ describe('signle layer group', () => {
expect(bbox.width).eql(width);
expect(bbox.height).eql(height);
// 拖拽完以后，group移动到了(100, 100)位置，group中的节点也移动了相应的距离
expect(node1.x).eql(125);
expect(node1.y).eql(150);
expect(node1.x).eql(125);
expect(node2.y).eql(150);
// 拖动以后，节点group的matrix值
const node = graph.findById(node1.id);
const matrix = node.get('group').getMatrix();
expect(matrix[6]).eql(125);
expect(matrix[7]).eql(150);
});
});
describe('nesting layer group', () => {
it.only('render nesting layer group', () => {
it('render nesting layer group', () => {
const data = {
nodes: [
{

17
test/unit/graph/controller/custom-group-spec.js
View File

@ -382,21 +382,4 @@ describe('nesting layer group', () => {
expect(shapeStyle.x).eql(299.5);
expect(shapeStyle.y).eql(99.5);
});
it('drag node out from group', () => {
// 拖动node2
const nodeItem = graph.findById('node2');
graph.emit('node:dragstart', {
item: nodeItem,
canvasX: 0,
canvasY: 0
});
graph.emit('node:drag', {
item: nodeItem,
canvasX: 100,
canvasY: 100
});
});
});