test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-30 02:38:20 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: add labelOffset

Browse Source
This commit is contained in:
huangtong.ht 2018-08-28 23:12:31 +08:00
parent f9c18f6dc5
commit 772db0ab19
10 changed files with 154 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
demos/test.html
View File

@ -14,32 +14,95 @@
<body>
<div id="mountNode"></div>
<script>
const plugin = new G6.Plugins['tool.grid']()
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: 'mountNode',
width: 500,
height: 500,
modes: {
default: ['panCanvas', 'wheelZoom']
},
plugins: [plugin]
});
graph.read(data);
const dagre = new G6.Plugins['layout.dagre']({
rankdir: 'LR',
ranksep: 72
});
G6.registerNode('custom', {
anchor(item) {
const outEdges = item.getOutEdges();
const inEdges = item.getInEdges();
if(outEdges.length > 1) {
return [
[0, 0.5],
[0.5, 1],
[0.5, 0]
];
}
if (inEdges.length > 1) {
return [
[1, 0.5],
[0.5, 1],
[0.5, 0]
];
}
return [
[0, 0.5],
[1, 0.5],
[0.5, 1],
[0.5, 0]
];
}
});
const data = {
nodes: [{
id: 'node1',
},{
id: 'node2',
},{
id: 'node3',
},{
id: 'node4',
},{
id: 'node5',
},{
id: 'node6',
}],
edges: [{
source: 'node1',
target: 'node2'
},{
source: 'node2',
target: 'node3'
},{
source: 'node2',
target: 'node4'
},{
source: 'node4',
target: 'node5'
},{
source: 'node3',
target: 'node5'
},{
source: 'node5',
target: 'node6'
}]
};
const graph = new G6.Graph({
container: 'mountNode',
width: 500,
height: 500,
fitView: 'cc',
plugins: [dagre]
});
graph.node({
size: 10,
style: {
lineWidth: 6,
strokeOpacity: 0
}
});
graph.node({
shape: 'custom',
label(model) {
return model.id;
},
labelOffsetY: 12
});
graph.edge({
shape: 'polyline'
});
graph.read(data);
</script>
</body>
</html>

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/g6",
"version": "2.1.0-beta.14",
"version": "2.1.0-beta.18",
"description": "graph visualization frame work",
"main": "build/g6.js",
"homepage": "https://github.com/antvis/g6",
@ -100,7 +100,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/item/",
"watch": "webpack --config webpack-dev.config.js",
"win-dev": "node ./bin/win-dev.js"
},

5
plugins/edge.polyline/index.js
View File

@ -413,14 +413,11 @@ function getPathWithBorderRadiusByPolyline(points, borderRadius) {
G6.registerEdge('polyline', {
offset: 10,
getPath(item) {
const points = this.getPoints(item);
const points = item.getPoints();
const source = item.getSource();
const target = item.getTarget();
return this.getPathByPoints(points, source, target);
},
getPoints(item) {
return item.getPoints();
},
getPathByPoints(points, source, target) {
const polylinePoints = getPolylinePoints(points[0], points[points.length - 1], source, target, this.offset);
// FIXME default

5
src/shape/edges/common.js
View File

@ -76,9 +76,11 @@ Shape.registerEdge('common', {
let label = this.getLabel(item);
const group = item.getGraphicGroup();
const model = item.getModel();
const { labelOffsetX, labelOffsetY } = model;
if (label) {
const center = keyShape.getPoint(0.5);
center.x = labelOffsetX ? center.x + labelOffsetX : center.x;
center.y = labelOffsetY ? center.y + labelOffsetY : center.y;
const attrs = Util.mix(true, {}, Global.labelStyle, center);
if (!Util.isObject(label)) {
@ -87,6 +89,7 @@ Shape.registerEdge('common', {
Util.mix(attrs, label);
}
label = group.addShape('text', {
class: 'label',
attrs
});
const padding = Util.toAllPadding([ 4, 8 ]);

11
src/shape/groups/common.js
View File

@ -28,9 +28,15 @@ Shape.registerGroup('common', {
}
const group = item.getGraphicGroup();
const margin = [ 8, 8 ];
x = x + margin[0];
y = y + margin[1];
const model = item.getModel();
const { labelOffsetX, labelOffsetY } = model;
x = labelOffsetX ? labelOffsetX + x : x;
y = labelOffsetY ? labelOffsetY + y : y;
const attrs = Util.mix(true, {}, Global.labelStyle, {
x: x + margin[0],
y: y + margin[1],
x,
y,
textAlign: 'left',
textBaseline: 'top'
});
@ -40,6 +46,7 @@ Shape.registerGroup('common', {
Util.mix(attrs, label);
}
group.addShape('text', {
class: 'label',
attrs
});
},

6
src/shape/nodes/common.js
View File

@ -52,12 +52,14 @@ Shape.registerNode('common', {
drawLabel(item) {
const group = item.getGraphicGroup();
const label = this.getLabel(item);
const model = item.getModel();
const { labelOffsetX, labelOffsetY } = model;
if (Util.isNil(label)) {
return;
}
const attrs = Util.mix(true, {}, Global.labelStyle, {
x: 0,
y: 0
x: labelOffsetX ? labelOffsetX : 0,
y: labelOffsetY ? labelOffsetY : 0
});
if (!Util.isObject(label)) {
attrs.text = label;

2
src/version.js
View File

@ -1 +1 @@
module.exports = '2.1.0-beta.15';
module.exports = '2.1.0-beta.18';

15
test/unit/item/edge-spec.js
View File

@ -1,8 +1,11 @@
const Graph = require('../../../src/graph');
const expect = require('chai').expect;
const chai = require('chai');
const expect = chai.expect;
const chaiAlmost = require('chai-almost');
const Util = require('../../../src/util/');
const div = document.createElement('div');
const data = require('../../fixtures/sample-graph-data.json');
chai.use(chaiAlmost());
div.id = 'cchart';
document.body.appendChild(div);
data.nodes.forEach(node => {
@ -25,6 +28,16 @@ describe('edge item test', () => {
const edge = graph.find('node2->node1');
expect(edge.getTarget().id).equal('node1');
});
it('labeloffset', () => {
const edge = graph.find('node2->node1');
graph.update(edge, {
label: 'node2->node1',
labelOffsetX: 10,
labelOffsetY: 10
});
expect(edge.getLabel().attr('x')).to.almost.eql(162.23606797749977);
expect(edge.getLabel().attr('y')).to.almost.eql(136.11803398874991);
});
it('destroy', () => {
graph.destroy();
});

15
test/unit/item/group-spec.js
View File

@ -1,8 +1,11 @@
const Graph = require('../../../src/graph');
const chai = require('chai');
const expect = chai.expect;
const chaiAlmost = require('chai-almost');
const Util = require('../../../src/util/');
const expect = require('chai').expect;
const div = document.createElement('div');
let data = require('../../fixtures/sample-graph-data.json');
chai.use(chaiAlmost());
data = Util.cloneDeep(data);
div.id = 'cchart';
document.body.appendChild(div);
@ -29,6 +32,16 @@ describe('group item test', () => {
it('getInnerEdges', () => {
expect(graph.find('group1').getInnerEdges().length).eql(2);
});
it('labeloffset', () => {
const group = graph.find('group1');
graph.update(group, {
label: 'group1',
labelOffsetX: 10,
labelOffsetY: 10
});
expect(group.getLabel().attr('x')).to.almost.eql(87.5);
expect(group.getLabel().attr('y')).to.almost.eql(57.5);
});
it('destroy', () => {
graph.destroy();
});

18
test/unit/item/node-spec.js
View File

@ -1,8 +1,12 @@
const Graph = require('../../../src/graph');
const expect = require('chai').expect;
const chai = require('chai');
const expect = chai.expect;
const chaiAlmost = require('chai-almost');
const Util = require('../../../src/util/');
const div = document.createElement('div');
const data = require('../../fixtures/sample-graph-data.json');
let data = require('../../fixtures/sample-graph-data.json');
chai.use(chaiAlmost());
data = Util.cloneDeep(data);
div.id = 'cchart';
document.body.appendChild(div);
data.nodes.forEach(node => {
@ -46,6 +50,16 @@ describe('node item test', () => {
41
});
});
it('labeloffset', () => {
const node = graph.find('node1');
graph.update(node, {
label: 'node1',
labelOffsetX: 10,
labelOffsetY: 10
});
expect(node.getLabel().attr('x')).to.almost.eql(10);
expect(node.getLabel().attr('y')).to.almost.eql(10);
});
it('destroy', () => {
graph.destroy();
});