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

Merge pull request #440 from antvis/addGrid

Browse Source 
Add grid
This commit is contained in:
Yanyan Wang 2018-08-28 20:00:16 +08:00 committed by GitHub
commit f9c18f6dc5
5 changed files with 234 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
demos/gallery-grid.html Normal file
View File

@ -0,0 +1,42 @@
<!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.tool.grid.js"></script>
<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,
plugins: [plugin]
});
graph.read(data);
</script>
</body>
</html>

25
demos/text.html → demos/test.html
View File

@ -7,22 +7,14 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./assets/jquery-3.2.1.min.js"></script> <script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/g6.js"></script> <script src="../build/g6.js"></script>
<script src="../build/plugin.layout.forceAtlas2.js"></script> <script src="../build/plugins.js"></script>
<script src="../build/plugin.layout.circle.js"></script>
<script src="../build/plugin.util.dataCleaner.js"></script>
<script src="../build/plugin.layout.dagre.js"></script>
<script src="../build/plugin.tool.tooltip.js"></script>
<title>测试</title> <title>测试</title>
</head> </head>
<body> <body>
<div id="mountNode"></div> <div id="mountNode"></div>
<script> <script>
G6.registerNode('custom', { const plugin = new G6.Plugins['tool.grid']()
getHtml(){
return '<div>3333</div>';
}
}, 'html');
const data = { const data = {
nodes: [{ nodes: [{
id: 'node1', id: 'node1',
@ -42,17 +34,12 @@
container: 'mountNode', container: 'mountNode',
width: 500, width: 500,
height: 500, height: 500,
renderer: 'svg' modes: {
}); default: ['panCanvas', 'wheelZoom']
graph.node({ },
shape: 'custom' plugins: [plugin]
}); });
graph.read(data); graph.read(data);
setTimeout(()=>{
graph.update('node1', {
title: 'sss'
});
}, 1000);
</script> </script>
</body> </body>
</html> </html>

1
plugins/index.js
View File

@ -12,6 +12,7 @@ module.exports = {
'tool.minimap': require('./tool.minimap/'), 'tool.minimap': require('./tool.minimap/'),
'tool.tooltip': require('./tool.tooltip/'), 'tool.tooltip': require('./tool.tooltip/'),
'tool.fisheye': require('./tool.fisheye/'), 'tool.fisheye': require('./tool.fisheye/'),
'tool.gird': require('./tool.grid/'),
'tool.textDisplay': require('./tool.textDisplay/'), 'tool.textDisplay': require('./tool.textDisplay/'),
'util.randomData': require('./util.randomData/') 'util.randomData': require('./util.randomData/')
}; };

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

@ -8,8 +8,10 @@ const Util = G6.Util;
class Plugin { class Plugin {
constructor(options) { constructor(options) {
Util.mix(this, options); Util.mix(this, {
this._freezeElements = {}; // cache freeze elements
_freezeElements: {}
}, options);
} }
init() { init() {
const graph = this.graph; const graph = this.graph;

181
plugins/tool.grid/index.js Normal file
View File

@ -0,0 +1,181 @@
/**
* @fileOverview grid
* @author huangtonger@aliyun.com
*/
const G6 = require('@antv/g6');
const Util = G6.Util;
class Plugin {
constructor(options) {
Util.mix(this, {
/**
* grid cell
* @type {number}
*/
cell: 16,
/**
* grid line style
* @type {object}
*/
line: {
stroke: '#A3B1BF',
lineWidth: 0.5
},
/**
* grid line style
* @type {string}
*/
type: 'point',
/**
* visible
* @type {boolean}
*/
visible: true
}, options);
}
/**
* init plugin
*/
init() {
const graph = this.graph;
graph.on('afterinit', () => {
this._draw();
});
graph.on('afterviewportchange', () => {
this.update();
});
graph.on('beforechangesize', () => {
this.update();
});
!this.visible && this.hide();
}
// draw grid
_draw() {
const graph = this.graph;
const path = this._getPath();
const group = graph.getRootGroup();
const attrs = Util.mix({}, this.line);
const matrix = graph.getMatrix();
const type = this.type;
const lineWidth = type === 'line' ? 1 / matrix[0] : 2 / matrix[0];
if (type === 'point') {
attrs.lineDash = null;
}
attrs.lineWidth = lineWidth;
attrs.path = path;
const gridEl = group.addShape('path', {
attrs,
capture: false,
zIndex: 0
});
gridEl.toBack();
this.gridEl = gridEl;
}
// get line style grid path
_getLinePath() {
const graph = this.graph;
const width = graph.getWidth();
const height = graph.getHeight();
const tl = graph.getPoint({
x: 0,
y: 0
});
const br = graph.getPoint({
x: width,
y: height
});
const cell = this.cell;
const flooX = Math.ceil(tl.x / cell) * cell;
const flooY = Math.ceil(tl.y / cell) * cell;
const path = [];
for (let i = 0; i <= br.x - tl.x; i += cell) {
const x = flooX + i;
path.push([ 'M', x, tl.y ]);
path.push([ 'L', x, br.y ]);
}
for (let j = 0; j <= br.y - tl.y; j += cell) {
const y = flooY + j;
path.push([ 'M', tl.x, y ]);
path.push([ 'L', br.x, y ]);
}
return path;
}
// get grid path
_getPath() {
const type = this.type;
return this['_get' + Util.upperFirst(type) + 'Path']();
}
// get point style grid path
_getPointPath() {
const graph = this.graph;
const width = graph.getWidth();
const height = graph.getHeight();
const tl = graph.getPoint({
x: 0,
y: 0
});
const br = graph.getPoint({
x: width,
y: height
});
const cell = this.cell;
const flooX = Math.ceil(tl.x / cell) * cell;
const flooY = Math.ceil(tl.y / cell) * cell;
const matrix = graph.getMatrix();
const detalx = 2 / matrix[0];
const path = [];
for (let i = 0; i <= br.x - tl.x; i += cell) {
const x = flooX + i;
for (let j = 0; j <= br.y - tl.y; j += cell) {
const y = flooY + j;
path.push([ 'M', x, y ]);
path.push([ 'L', x + detalx, y ]);
}
}
return path;
}
show() {
this.gridEl.show();
this.visible = true;
}
hide() {
this.gridEl.hide();
this.visible = false;
}
getCell() {
const cell = this.cell;
const graph = this.graph;
const matrix = graph.getMatrix();
const scale = matrix[0];
if (cell * scale < 9.6) {
return 9.6 / scale;
}
return cell;
}
update(cfg) {
Util.mix(this, cfg);
const path = this._getPath();
const gridEl = this.gridEl;
const graph = this.graph;
const zoom = graph.getZoom();
const type = this.type;
const lineWidth = type === 'line' ? 1 / zoom : 2 / zoom;
if (this.cell * zoom < 8 || this.cell * zoom > 32) {
this.cell = 16 / zoom;
}
gridEl.attr('lineWidth', lineWidth);
gridEl.attr('path', path);
}
destroy() {
const gridEl = this.gridEl;
gridEl && gridEl.remove();
}
}
G6.Plugins['tool.grid'] = Plugin;
module.exports = Plugin;