mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
feat(plugin): add tool.tooltip. Closes #360.
This commit is contained in:
huangtong.ht
parent
70c2c4bd2e
commit
d036f1e0df
@ -1,3 +1,4 @@
|
||||
|
||||
# ChangeLog
|
||||
|
||||
---
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
const width = 100; // 一半宽
|
||||
const height = 40; // 一半高
|
||||
return G6.Util.getRectPath(-width/2, -height/2, width, height, 10);
|
||||
}
|
||||
},
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
@ -51,10 +51,11 @@
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
plugins: [new G6.Plugins['layout.dagre']()],
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
defaultIntersectBox: 'rect' // 使用
|
||||
plugins: [new G6.Plugins['layout.dagre']()],
|
||||
defaultIntersectBox: 'rect' // 使用矩形包围盒
|
||||
});
|
||||
graph.node({
|
||||
shape: 'rect',
|
||||
|
||||
58
demos/plugin-tooltip.html
Normal file
58
demos/plugin-tooltip.html
Normal 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>
|
||||
@ -49,6 +49,7 @@
|
||||
"codemirror": "*",
|
||||
"commander": "~2.12.2",
|
||||
"connect": "~3.6.6",
|
||||
"css-loader": "^1.0.0",
|
||||
"d3-queue": "~3.0.7",
|
||||
"debug": "~3.1.0",
|
||||
"electron": "~2.0.2",
|
||||
@ -72,6 +73,7 @@
|
||||
"radixsort": "~1.0.0",
|
||||
"serve-static": "~1.13.2",
|
||||
"shelljs": "~0.7.8",
|
||||
"style-loader": "^0.21.0",
|
||||
"torchjs": "~2.0.3",
|
||||
"uglify-js": "~3.1.10",
|
||||
"webpack": "~4.10.2",
|
||||
@ -116,4 +118,4 @@
|
||||
"engines": {
|
||||
"node": ">=8.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,5 +8,6 @@ module.exports = {
|
||||
'template.maxSpanningForest': require('./template.maxSpanningForest/'),
|
||||
'tool.d3.mapper': require('./tool.d3.mapper/'),
|
||||
'tool.minimap': require('./tool.minimap/'),
|
||||
'tool.tooltip': require('./tool.tooltip/'),
|
||||
'util.randomData': require('./util.randomData/')
|
||||
};
|
||||
|
||||
85
plugins/tool.tooltip/README.md
Normal file
85
plugins/tool.tooltip/README.md
Normal 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
126
plugins/tool.tooltip/index.js
Normal 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
24
plugins/tool.tooltip/style.css
Normal 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;
|
||||
}
|
||||
@ -26,7 +26,9 @@ class Controller extends Base {
|
||||
addChannels(inputChannels) {
|
||||
const channels = this.channels;
|
||||
Util.each(inputChannels, (channel, name) => {
|
||||
channels[name].input = channel;
|
||||
channels[name] = {
|
||||
input: channel
|
||||
};
|
||||
});
|
||||
}
|
||||
/**
|
||||
|
||||
@ -34,9 +34,10 @@ Shape.registerEdge('common', {
|
||||
},
|
||||
getStyle(item) {
|
||||
const model = item.getModel();
|
||||
return Util.mix(true, {}, Global.edgeStyle, {
|
||||
return Util.mix(true, {}, {
|
||||
stroke: this.getColor(item),
|
||||
strokeOpacity: 0.92,
|
||||
lineAppendWidth: 4,
|
||||
lineWidth: this.getSize(item)
|
||||
}, model.style);
|
||||
},
|
||||
|
||||
42
test/unit/plugins/tool.tooltip-spec.js
Normal file
42
test/unit/plugins/tool.tooltip-spec.js
Normal 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);
|
||||
});
|
||||
@ -40,6 +40,10 @@ module.exports = {
|
||||
babelrc: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [ 'style-loader', 'css-loader' ]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user