mirror of
https://gitee.com/antv/g6.git
synced 2024-12-03 20:28:36 +08:00
154 lines
3.5 KiB
HTML
154 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>右键菜单</title>
|
|
<style>
|
|
#contextMenu {
|
|
position: absolute;
|
|
list-style: none;
|
|
padding: 10px 5px;
|
|
left: -100px;
|
|
background: #ccc;
|
|
}
|
|
|
|
#contextMenu li {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="tip">试一试右击节点</div>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script src="../build/grid.js"></script>
|
|
<script>
|
|
const grid = new Grid();
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
width: 800,
|
|
height: 600,
|
|
// plugins: [grid],
|
|
defaultNode: {
|
|
size: [40, 40],
|
|
},
|
|
modes: {
|
|
default: ['brush-select', 'drag-canvas', 'zoom-canvas'],
|
|
},
|
|
});
|
|
|
|
G6.registerEdge(
|
|
'self-line',
|
|
{
|
|
autoRotate: true,
|
|
drawLabel(cfg, group) {
|
|
const labelCfg = cfg.labelCfg || {};
|
|
const labelStyle = this.getLabelStyle(cfg, labelCfg, group);
|
|
|
|
const text = group.addShape('text', {
|
|
attrs: {
|
|
...labelStyle,
|
|
text: cfg.label,
|
|
fontSize: 12,
|
|
fill: '#404040',
|
|
stroke: 'white',
|
|
lineWidth: 5,
|
|
},
|
|
className: 'edge-label',
|
|
});
|
|
|
|
return text;
|
|
},
|
|
},
|
|
'line',
|
|
);
|
|
|
|
const data = {
|
|
nodes: [
|
|
{
|
|
id: 'node1',
|
|
label: 'node1',
|
|
x: 500,
|
|
y: 200,
|
|
shape: 'rect',
|
|
},
|
|
{
|
|
id: 'node2',
|
|
label: 'node2',
|
|
x: 300,
|
|
y: 400,
|
|
shape: 'rect',
|
|
},
|
|
{
|
|
id: 'node3',
|
|
label: 'node3',
|
|
x: 200,
|
|
y: 300,
|
|
shape: 'rect',
|
|
},
|
|
],
|
|
edges: [
|
|
{
|
|
source: 'node1',
|
|
target: 'node2',
|
|
shape: 'self-line',
|
|
label: '测试文本',
|
|
},
|
|
{
|
|
source: 'node1',
|
|
target: 'node3',
|
|
shape: 'self-line',
|
|
label: '测试文本2',
|
|
labelCfg: {
|
|
autoRotate: true,
|
|
style: {
|
|
stroke: 'white',
|
|
lineWidth: 5,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
graph.data(data);
|
|
graph.render();
|
|
|
|
graph.on('edge:click', evt => {
|
|
console.log(evt);
|
|
const { item } = evt;
|
|
graph.updateItem(item, {
|
|
style: {
|
|
lineWidth: 3,
|
|
stroke: 'red',
|
|
},
|
|
});
|
|
});
|
|
|
|
// 创建ul
|
|
const conextMenuContainer = document.createElement('ul');
|
|
conextMenuContainer.id = 'contextMenu';
|
|
|
|
// 创建li
|
|
const firstLi = document.createElement('li');
|
|
firstLi.innerText = '菜单项1';
|
|
conextMenuContainer.appendChild(firstLi);
|
|
|
|
const lastLi = document.createElement('li');
|
|
lastLi.innerText = '菜单项2';
|
|
conextMenuContainer.appendChild(lastLi);
|
|
document.body.appendChild(conextMenuContainer);
|
|
|
|
const menu = document.getElementById('contextMenu');
|
|
graph.on('node:contextmenu', evt => {
|
|
console.log(evt);
|
|
menu.style.left = evt.clientX + 'px';
|
|
menu.style.top = evt.clientY + 'px';
|
|
});
|
|
|
|
graph.on('node:mouseleave', evt => {
|
|
menu.style.left = '-100px';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|