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

fix: no layoutCfg in layout controller problem. add: tooltips demo and grid demo

Browse Source
This commit is contained in:
shiwu.wyy 2019-09-24 14:51:13 +08:00
parent bf1fb3d47b
commit 5a3c62edaa
4 changed files with 192 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
demos/plugin-grid.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/grid.js"></script>
<script src="../build/g6.js"></script>
<script>
const data = {
nodes: [
{
id: '0',
label: 'node-0',
x: 100,
y: 100
},
{
id: '1',
label: 'node-1',
x: 250,
y: 100
},
{
id: '2',
label: 'node-2',
x: 150,
y: 350
},
{
id: '3',
label: 'node-3',
x: 420,
y: 380
},
]
}
const grid = new Grid();
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
plugins: [grid],
defaultNode: {
size: [80, 40],
shape: 'rect'
},
modes: {
default:
['zoom-canvas', 'drag-canvas', 'drag-node']
}
});
graph.data(data);
graph.render();
</script>
</body>
</html>

123
demos/tooltips.html Normal file
View File

@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
<style>
.g6-tooltip {
border: 1px solid #e2e2e2;
border-radius: 4px;
font-size: 12px;
color: #545454;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 8px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
const data = {
nodes: [
{
id: '0',
label: 'node-0',
x: 100,
y: 100,
description: 'This is node-0.',
subdescription: 'This is subdescription of node-0.'
},
{
id: '1',
label: 'node-1',
x: 250,
y: 100,
description: 'This is node-1.',
subdescription: 'This is subdescription of node-1.'
},
{
id: '2',
label: 'node-2',
x: 150,
y: 350,
description: 'This is node-2.',
subdescription: 'This is subdescription of node-2.'
},
{
id: '3',
label: 'node-3',
x: 420,
y: 380,
description: 'This is node-3.',
subdescription: 'This is subdescription of node-3.'
},
],
edges: [
{
id: 'e0',
source: '0',
target: '1',
description: 'This is edge from node 0 to node 1.',
},
{
id: 'e1',
source: '0',
target: '2',
description: 'This is edge from node 0 to node 2.',
},
{
id: 'e2',
source: '0',
target: '3',
description: 'This is edge from node 0 to node 3.',
}
]
}
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
size: [ 80, 40 ],
shape: 'rect'
},
defaultEdge: {
style: {
lineAppendWidth: 3
}
},
modes: {
default:
['drag-node', {
type: 'tooltip',
formatText(model) {
const text = 'description: ' + model.description;
return text;
},
shouldUpdate: e => {
return true;
}
},
{
type: 'edge-tooltip',
formatText(model) {
const text = 'description: ' + model.description;
return text;
},
shouldUpdate: e => {
return true;
}
}
]
}
});
graph.data(data);
graph.render();
</script>
</body>
</html>

2
package.json
View File

@ -100,7 +100,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/layout-spec.js",
"test-live": "torch --compile --interactive --watch --opts test/mocha.opts --recursive ./test/unit/",
"test-bugs": "torch --compile --renderer --recursive ./test/bugs",
"test-bugs-live": "torch --compile --interactive --watch --recursive ./test/bugs",
"test-all": "npm run test && npm run test-bugs",

7
src/graph/controller/layout.js
View File

@ -109,7 +109,12 @@ class LayoutController {
const graph = self.graph;
const width = graph.get('width');
const height = graph.get('height');
const center = self.layoutCfg.center || [ width / 2, height / 2 ];
let center = [];
if (self.layoutCfg && self.layoutCfg.center) {
center = self.layoutCfg.center;
} else {
center = [ width / 2, height / 2 ];
}
self.initPositions(center);
const layoutMethod = self.layoutMethod;
layoutMethod && layoutMethod.destroy();