<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Context Menu 右键菜单</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<style>
#contextMenu {
position: absolute;
list-style: none;
padding: 10px 5px;
left: -100px;
background: #ccc;
}
#contextMenu li {
cursor: pointer;
}
</style>
<script>
var _extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
defaultNode: {
size: [40, 40]
},
modes: {
default: ['drag-node']
}
});
G6.registerEdge('self-line', {
autoRotate: true,
drawLabel: function drawLabel(cfg, group) {
var labelCfg = cfg.labelCfg || {};
var labelStyle = this.getLabelStyle(cfg, labelCfg, group);
var text = group.addShape('text', {
attrs: _extends({}, labelStyle, {
text: cfg.label,
fontSize: 12,
fill: '#404040',
stroke: 'white',
lineWidth: 5
}),
className: 'edge-label'
});
return text;
}
}, 'line');
var data = {
nodes: [{
id: 'node1',
label: 'node1',
x: 200,
y: 100,
shape: 'rect'
}, {
id: 'node2',
label: 'node2',
x: 250,
y: 250,
shape: 'rect'
}, {
id: 'node3',
label: 'node3',
x: 350,
y: 100,
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();
var conextMenuContainer = document.createElement('ul');
conextMenuContainer.id = 'contextMenu';
var firstLi = document.createElement('li');
firstLi.innerText = '添加节点';
firstLi.id='firstLi';
conextMenuContainer.appendChild(firstLi);
var lastLi = document.createElement('li');
lastLi.innerText = '菜单项2';
lastLi.id='lastLi';
conextMenuContainer.appendChild(lastLi);
document.body.appendChild(conextMenuContainer);
var menu = document.getElementById('contextMenu');
graph.on('node:contextmenu', function(evt) {
menu.style.left = evt.x + 'px';
menu.style.top = evt.y + 'px';
});
document.getElementById('firstLi').addEventListener('click',function(){
alert(data.nodes)
var newNode= {
id: 'node4',
label: 'node4',
x: 450,
y: 100,
shape: 'rect'
}
data.nodes.push(newNode)
var newEdge=
{
source: 'node3',
target: 'node4',
shape: 'self-line',
label: '测试文本'
}
data.edges.push(newEdge)
alert(data.nodes)
graph.render();
});
document.getElementById('lastLi').addEventListener('click',function(){
alert('index2');
});
graph.on('node:mouseleave', function(evt) {
menu.style.left = '-100px';
});
</script></body>
</html>
