test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(plugin): add tool.tooltip. Closes #360.

Browse Source
This commit is contained in:
huangtong.ht 2018-07-11 19:59:44 +08:00
parent 70c2c4bd2e
commit d036f1e0df
13 changed files with 353 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,3 +1,4 @@
# ChangeLog # ChangeLog
--- ---

7
demos/gallery-workflow.html
View File

@ -18,7 +18,7 @@
const width = 100; // 一半宽 const width = 100; // 一半宽
const height = 40; // 一半高 const height = 40; // 一半高
return G6.Util.getRectPath(-width/2, -height/2, width, height, 10); return G6.Util.getRectPath(-width/2, -height/2, width, height, 10);
} },
}); });
const data = { const data = {
nodes: [{ nodes: [{
@ -51,10 +51,11 @@
}; };
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: 'mountNode',
plugins: [new G6.Plugins['layout.dagre']()], fitView: 'cc',
width: 500, width: 500,
height: 500, height: 500,
defaultIntersectBox: 'rect' // 使用 plugins: [new G6.Plugins['layout.dagre']()],
defaultIntersectBox: 'rect' // 使用矩形包围盒
}); });
graph.node({ graph.node({
shape: 'rect', shape: 'rect',

58
demos/plugin-tooltip.html Normal file
View File

@ -0,0 +1,58 @@
<!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/toolTooltip.js"></script>
<script>
const plugin = new G6.Plugins['tool.tooltip']();
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.node({
tooltip(model) {
return [
['id', model.id],
['x', model.x],
['y', model.y]
];
}
});
graph.edge({
tooltip(model) {
return [
['来源', model.source],
['去向', model.target]
];
}
});
graph.read(data);
</script>
</body>
</html>

4
package.json
View File

@ -49,6 +49,7 @@
"codemirror": "*", "codemirror": "*",
"commander": "~2.12.2", "commander": "~2.12.2",
"connect": "~3.6.6", "connect": "~3.6.6",
"css-loader": "^1.0.0",
"d3-queue": "~3.0.7", "d3-queue": "~3.0.7",
"debug": "~3.1.0", "debug": "~3.1.0",
"electron": "~2.0.2", "electron": "~2.0.2",
@ -72,6 +73,7 @@
"radixsort": "~1.0.0", "radixsort": "~1.0.0",
"serve-static": "~1.13.2", "serve-static": "~1.13.2",
"shelljs": "~0.7.8", "shelljs": "~0.7.8",
"style-loader": "^0.21.0",
"torchjs": "~2.0.3", "torchjs": "~2.0.3",
"uglify-js": "~3.1.10", "uglify-js": "~3.1.10",
"webpack": "~4.10.2", "webpack": "~4.10.2",
@ -116,4 +118,4 @@
"engines": { "engines": {
"node": ">=8.9.0" "node": ">=8.9.0"
} }
} }

1
plugins/index.js
View File

@ -8,5 +8,6 @@ module.exports = {
'template.maxSpanningForest': require('./template.maxSpanningForest/'), 'template.maxSpanningForest': require('./template.maxSpanningForest/'),
'tool.d3.mapper': require('./tool.d3.mapper/'), 'tool.d3.mapper': require('./tool.d3.mapper/'),
'tool.minimap': require('./tool.minimap/'), 'tool.minimap': require('./tool.minimap/'),
'tool.tooltip': require('./tool.tooltip/'),
'util.randomData': require('./util.randomData/') 'util.randomData': require('./util.randomData/')
}; };

85
plugins/tool.tooltip/README.md Normal file
View File

@ -0,0 +1,85 @@
## Tooltip
Tooltip is used to help users to get the data of detailed information. This plugin help developer to quickly locate tooltip position.
## use
simple use.
```js
const plugin = new G6.Plugins['tool.tooltip']();
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
});
graph.node({
tooltip(model) {
return [
['id', model.id],
['x', model.x],
['y', model.y]
];
}
});
graph.edge({
tooltip(model) {
return [
['来源', model.source],
['去向', model.target]
];
}
});
graph.read(data);
```
custom use
```js
const plugin = new G6.Plugins['tool.tooltip']({
getTooltip({item}) {
const model = item.getModel();
return `
<ul>
<li>唯一标识：${model.id}</li>
</ul>
`;
}
});
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
});
graph.read(data);
```

126
plugins/tool.tooltip/index.js Normal file
View File

@ -0,0 +1,126 @@
/**
* @fileOverview tooltip plugin
* @author huangtonger@aliyun.com
*/
require('./style.css');
const G6 = require('@antv/g6');
const Util = G6.Util;
class Plugin {
constructor(options) {
this.options = {
/**
* horizontal offset
* @type {number}
*/
dx: 10,
/**
* vertical offset
* @type {number}
*/
dy: 10,
/**
* get tooltip dom
* @type {function}
* @return {string|null} tooltip dom
*/
getTooltip({ item }) {
if (item) {
const model = item.getModel();
const tooltip = model.tooltip;
if (tooltip) {
let lis = '';
tooltip.forEach(subTooltip => {
lis += '<li><span>' + subTooltip[0] + '</span>: ' + subTooltip[1] + '</li>';
});
return `
<div class="g6-tooltip" style="position: absolute;white-space:nowrap;z-index: 5;">
<h4 class="g6-tooltip-title">${item.type}</h4>
<ul class="g6-tooltip-list">
${lis}
</ul>
</div>
`;
}
}
return null;
},
...options
};
}
init() {
const graph = this.graph;
graph.on('mouseenter', ev => {
this.onMouseEnter(ev);
});
graph.on('mousemove', ev => {
this.onMouseMove(ev);
});
graph.on('mouseleave', ev => {
this.onMouseLeave(ev);
});
}
onMouseEnter(ev) {
const graph = this.graph;
const graphContainer = graph.getGraphContainer();
const options = this.options;
const tooltipHtml = options.getTooltip(ev);
let tooltip = this.tooltip;
tooltip && this.tooltip.destroy();
if (tooltipHtml) {
tooltip = Util.createDOM(tooltipHtml);
graphContainer.appendChild(tooltip);
} else {
tooltip = null;
}
this.tooltip = tooltip;
}
onMouseMove({ domX, domY }) {
const tooltip = this.tooltip;
if (tooltip) {
const graph = this.graph;
const w0 = Util.getOuterWidth(tooltip);
const h0 = Util.getOuterHeight(tooltip);
const w1 = graph.getWidth();
const h1 = graph.getHeight();
tooltip.css({
top: this._getTop(h0, h1, domY),
left: this._getLeft(w0, w1, domX)
});
}
}
onMouseLeave() {
if (this.tooltip) {
this.tooltip.destroy();
this.tooltip = null;
}
}
_getTop(h0, h1, domY) {
const { dy } = this.options;
if (h0 * 2 >= h1) {
return '0px';
}
if (domY < h0 + dy) {
return domY + dy + 'px';
}
return domY - h0 - dy + 'px';
}
_getLeft(w0, w1, domX) {
const { dx } = this.options;
if (w0 * 2 >= w1) {
return '0px';
}
if (w1 - domX - dx < w0) {
return domX - w0 - dx + 'px';
}
return domX + dx + 'px';
}
}
G6.Plugins['tool.tooltip'] = Plugin;
module.exports = Plugin;

24
plugins/tool.tooltip/style.css Normal file
View File

@ -0,0 +1,24 @@
.g6-tooltip {
position: absolute;
white-space: nowrap;
zIndex: 8;
transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 10px #aeaeae;
border-radius: 3px;
color: rgb(87, 87, 87);
line-height: 20px;
padding: 10px 10px 6px 10px;
}
.g6-tooltip .g6-tooltip-title{
margin: 0;
}
.g6-tooltip .g6-tooltip-list{
padding: 0;
margin: 0;
margin-top: 4px;
}
.g6-tooltip .g6-tooltip-list li{
font-size: 12px;
list-style-type: none;
}

4
src/controller/mapper.js
View File

@ -26,7 +26,9 @@ class Controller extends Base {
addChannels(inputChannels) { addChannels(inputChannels) {
const channels = this.channels; const channels = this.channels;
Util.each(inputChannels, (channel, name) => { Util.each(inputChannels, (channel, name) => {
channels[name].input = channel; channels[name] = {
input: channel
};
}); });
} }
/** /**

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

@ -34,9 +34,10 @@ Shape.registerEdge('common', {
}, },
getStyle(item) { getStyle(item) {
const model = item.getModel(); const model = item.getModel();
return Util.mix(true, {}, Global.edgeStyle, { return Util.mix(true, {}, {
stroke: this.getColor(item), stroke: this.getColor(item),
strokeOpacity: 0.92, strokeOpacity: 0.92,
lineAppendWidth: 4,
lineWidth: this.getSize(item) lineWidth: this.getSize(item)
}, model.style); }, model.style);
}, },

0
test/unit/plugins/minimap-spec.js → test/unit/plugins/tool.minimap-spec.js
View File

42
test/unit/plugins/tool.tooltip-spec.js Normal file
View File

@ -0,0 +1,42 @@
const G6 = require('../../../src/index');
const Tooltip = require('../../../plugins/tool.tooltip/');
const expect = require('chai').expect;
const Util = G6.Util;
document.body.appendChild(Util.createDOM(`
<div>
<div id='mountNode'></div>
</div>
`));
describe('tooltip test', () => {
const tooltip = new Tooltip({
getHtml({ item }) {
return `
<div></div>
`;
}
});
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: [ tooltip ]
});
graph.read(data);
});

4
webpack.config.js
View File

@ -40,6 +40,10 @@ module.exports = {
babelrc: true babelrc: true
} }
} }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
} }
] ]
}, },