test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-03 20:28:36 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: dagre controlpoints problem. fix: changeData update edge problem

Browse Source
This commit is contained in:
Yanyan-Wang 2020-01-08 11:50:27 +08:00 committed by Moyee
parent 66a2ba8897
commit 5a5f4e5a3a
6 changed files with 70 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/graph/controller/item.ts
View File

@ -227,6 +227,7 @@ export default class ItemController {
if (type === NODE) {
// 若移除的是节点，需要将与之相连的边一同删除
const edges = (item as INode).getEdges();
debugger
for (let i = edges.length; i >= 0; i--) {
graph.removeItem(edges[i]);
}

1
src/graph/controller/layout.ts
View File

@ -99,7 +99,6 @@ export default class LayoutController {
public layout(success?: () => void): boolean {
const self = this;
const graph = self.graph;
// const data = graph.get('data');
self.data = self.setDataFromGraph();
const nodes = self.data.nodes;

54
src/graph/graph.ts
View File

@ -1121,39 +1121,37 @@ export default class Graph extends EventEmitter implements IGraph {
const canvas: Canvas = self.get('canvas');
canvas.animate(
{
onFrame(ratio) {
each(toNodes, (data) => {
const node: Item = self.findById(data.id);
(ratio) => {
each(toNodes, (data) => {
const node: Item = self.findById(data.id);
if (!node || node.destroyed) {
return;
}
if (!node || node.destroyed) {
return;
}
let originAttrs: Point = node.get('originAttrs');
let originAttrs: Point = node.get('originAttrs');
const model: NodeConfig = node.get('model');
const model: NodeConfig = node.get('model');
if (!originAttrs) {
const containerMatrix = node.getContainer().getMatrix();
originAttrs = {
x: containerMatrix[6],
y: containerMatrix[7],
};
node.set('originAttrs', originAttrs);
}
if (!originAttrs) {
const containerMatrix = node.getContainer().getMatrix();
originAttrs = {
x: containerMatrix[6],
y: containerMatrix[7],
};
node.set('originAttrs', originAttrs);
}
if (onFrame) {
const attrs = onFrame(node, ratio, data, originAttrs);
node.set('model', Object.assign(model, attrs));
} else {
model.x = originAttrs.x + (data.x - originAttrs.x) * ratio;
model.y = originAttrs.y + (data.y - originAttrs.y) * ratio;
}
});
if (onFrame) {
const attrs = onFrame(node, ratio, data, originAttrs);
node.set('model', Object.assign(model, attrs));
} else {
model.x = originAttrs.x + (data.x - originAttrs.x) * ratio;
model.y = originAttrs.y + (data.y - originAttrs.y) * ratio;
}
});
self.refreshPositions();
},
self.refreshPositions();
},
animateCfg.duration,
animateCfg.easing,
@ -1178,7 +1176,7 @@ export default class Graph extends EventEmitter implements IGraph {
public refreshPositions() {
const self = this;
self.emit('beforegraphrefreshposition');
const nodes: INode[] = self.get('nodes');
const edges: IEdge[] = self.get('edges');

7
src/item/edge.ts
View File

@ -28,7 +28,7 @@ export default class Edge extends Item implements IEdge {
const preItem = this.get(itemName);
if(preItem) {
// 如果之前存在节点，则移除掉边
preItem.removeEdge(this)
preItem.removeEdge(this);
}
if (isPlainObject(value)) { // 如果设置成具体的点，则清理节点
@ -155,18 +155,15 @@ export default class Edge extends Item implements IEdge {
* 获取边的数据模型
*/
public getModel(): EdgeConfig {
const model: EdgeConfig = this.get('model');
const out = Object.assign({}, model);
const out: EdgeConfig = this.get('model');
const sourceItem = this.get('source' + ITEM_NAME_SUFFIX);
const targetItem = this.get('target' + ITEM_NAME_SUFFIX);
if (sourceItem) {
out.source = sourceItem.get('id');
delete out['source' + ITEM_NAME_SUFFIX];
} else {
out.source = this.get('start' + POINT_NAME_SUFFIX);
}
if (targetItem) {
out.target = targetItem.get('id');
delete out['target' + ITEM_NAME_SUFFIX];
} else {
out.target = this.get('end' + POINT_NAME_SUFFIX);

74
tests/unit/layout/dagre-spec.ts
View File

@ -216,6 +216,8 @@ describe('dagre layout', () => {
it('layout with default configs', () => {
const graph = new G6.Graph({
container: div,
width: 500,
height: 500,
layout: {
type: 'dagre'
}
@ -224,12 +226,12 @@ describe('dagre layout', () => {
graph.render();
const node = data.nodes[0];
const edge = data.edges[0];
expect(mathEqual(node.x, 215));
expect(mathEqual(node.y, 196));
expect(mathEqual(edge.startPoint.x, 522));
expect(mathEqual(edge.startPoint.y, 440));
expect(mathEqual(edge.endPoint.x, 765));
expect(mathEqual(edge.endPoint.y, 498));
expect(mathEqual(node.x, 165)).toEqual(true);
expect(mathEqual(node.y, 70)).toEqual(true);
expect(mathEqual(edge.startPoint.x, 143)).toEqual(true);
expect(mathEqual(edge.startPoint.y, 91)).toEqual(true);
expect(mathEqual(edge.endPoint.x, 70)).toEqual(true);
expect(mathEqual(edge.endPoint.y, 229)).toEqual(true);
graph.destroy();
});
it('dagre with number nodeSize and sepFunc', () => {
@ -261,12 +263,13 @@ describe('dagre layout', () => {
const node = data.nodes[0];
const edge = data.edges[0];
expect(mathEqual(node.x, 600));
expect(mathEqual(node.y, 1075));
expect(mathEqual(edge.startPoint.x, 531));
expect(mathEqual(edge.startPoint.y, 594));
expect(mathEqual(edge.endPoint.x, 597));
expect(mathEqual(edge.endPoint.y, 854));
expect(mathEqual(node.x, 45)).toEqual(true);
expect(mathEqual(node.y, 75)).toEqual(true);
expect(mathEqual(edge.startPoint.x, 73)).toEqual(true);
expect(mathEqual(edge.startPoint.y, 64)).toEqual(true);
expect(mathEqual(edge.endPoint.x, 156)).toEqual(true);
expect(mathEqual(edge.endPoint.y, 35)).toEqual(true);
expect(edge.controlPoints).toEqual(undefined);
graph.destroy();
});
@ -303,17 +306,17 @@ describe('dagre layout', () => {
const node = data.nodes[0];
const edge = data.edges[0];
expect(mathEqual(node.x, 600));
expect(mathEqual(node.y, 1075));
expect(mathEqual(edge.startPoint.x, 531));
expect(mathEqual(edge.startPoint.y, 594));
expect(mathEqual(edge.endPoint.x, 597));
expect(mathEqual(edge.endPoint.y, 854));
expect(mathEqual(node.x, 145)).toEqual(true);
expect(mathEqual(node.y, 55)).toEqual(true);
expect(mathEqual(edge.startPoint.x, 94)).toEqual(true);
expect(mathEqual(edge.startPoint.y, 55)).toEqual(true);
expect(mathEqual(edge.endPoint.x, 110)).toEqual(true);
expect(mathEqual(edge.endPoint.y, 215)).toEqual(true);
expect(edge.controlPoints).toEqual(undefined);
graph.destroy();
});
// FIXME: controlpoints can not be writted into graph edges??
it('dagre with number size in node data, controlpoints', () => {
data.edges.forEach((edgeItem) => {
delete edgeItem.startPoint;
@ -346,14 +349,16 @@ describe('dagre layout', () => {
const node = data.nodes[0];
const edge = data.edges[0];
// expect(mathEqual(node.x, 600));
// expect(mathEqual(node.y, 1075));
// expect(mathEqual(edge.startPoint.x, 531));
// expect(mathEqual(edge.startPoint.y, 594));
// expect(mathEqual(edge.endPoint.x, 597));
// expect(mathEqual(edge.endPoint.y, 854));
// expect(edge.controlPoints).toEqual(undefined);
// graph.destroy();
expect(mathEqual(node.x, 60)).toEqual(true);
expect(mathEqual(node.y, 181)).toEqual(true);
expect(mathEqual(edge.startPoint.x, 70)).toEqual(true);
expect(mathEqual(edge.startPoint.y, 181)).toEqual(true);
expect(mathEqual(edge.endPoint.x, 172)).toEqual(true);
expect(mathEqual(edge.endPoint.y, 92)).toEqual(true);
expect(mathEqual(edge.controlPoints[0].x, 120)).toEqual(true);
expect(mathEqual(edge.controlPoints[0].y, 92.5)).toEqual(true);
expect(edge.controlPoints).not.toEqual(undefined);
graph.destroy();
});
it('dagre with array size in node data', () => {
data.edges.forEach((edgeItem) => {
@ -363,7 +368,6 @@ describe('dagre layout', () => {
});
data.nodes.forEach((node, i) => {
node.size = [100, 70];
// node.shape = 'circle';
});
const graph = new G6.Graph({
container: div,
@ -383,13 +387,13 @@ describe('dagre layout', () => {
const node = data.nodes[0];
const edge = data.edges[0];
expect(mathEqual(node.x, 600));
expect(mathEqual(node.y, 1075));
expect(mathEqual(edge.startPoint.x, 531));
expect(mathEqual(edge.startPoint.y, 594));
expect(mathEqual(edge.endPoint.x, 597));
expect(mathEqual(edge.endPoint.y, 854));
expect(edge.controlPoints).toEqual(undefined);
expect(mathEqual(node.x, 100)).toEqual(true);
expect(mathEqual(node.y, 195)).toEqual(true);
expect(mathEqual(edge.startPoint.x, 150)).toEqual(true);
expect(mathEqual(edge.startPoint.y, 195)).toEqual(true);
expect(mathEqual(edge.endPoint.x, 300)).toEqual(true);
expect(mathEqual(edge.endPoint.y, 85)).toEqual(true);
graph.destroy();
});
});

3
tests/unit/layout/force-spec.ts
View File

@ -192,7 +192,7 @@ describe('force layout', () => {
});
});
it('preventOverlap with function nodeSpacing and function nodeSize', (done) => {
it('preventOverlap with function nodeSpacing and function nodeSize', (done) => {//
let isEnd = false;
const nodeSpacing = d => {
return d.dsize[0] / 3;
@ -248,6 +248,7 @@ describe('force layout', () => {
type: 'force',
preventOverlap: true,
nodeSize,
alphaDecay: 0.3,
onLayoutEnd() {
isEnd = true;
}