前面我们知道了如何使用mxGraph创建节点，我们希望使用右键菜单创建新的节点，并且希望创建节点的位置就是鼠标所在的位置。使用mxGraph创建右键菜单很方便，首先设置graph.popupMenuHandler.autoExpand = true，然后在graph.popupMenuHandler.factoryMethod函数中定义菜单就可以了。下面是增加了添加节点和删除对象菜单的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建节点</title>
<style>
html, body {
height: 100%;
}
#graphContainer {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background: url('./images/grid.gif');
cursor: default;
}
</style>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"></div>
</body>
<script>
const mxBasePath = '../static/mxgraph';
</script>
<script src="../mxClient.js"></script>
<script>
function main(container) {
// 禁用鼠标右键
mxEvent.disableContextMenu(container);
const graph = new mxGraph(container);
// 设置这个属性后节点之间才可以连接
graph.setConnectable(true);
// 开启区域选择
new mxRubberband(graph);
// Configures automatic expand on mouseover
graph.popupMenuHandler.autoExpand = true;
// Installs context menu
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
{
var submenu0 = menu.addItem('增删操作', null, null);
menu.addItem('添加节点', null, function()
{
//console.log(evt);
createNewNode(graph,evt.clientX,evt.clientY,'新节点');
},submenu0);
menu.addItem('删除对象', null, function()
{
cell.removeFromParent();//删除了此cell
graph.refresh(cell);
},submenu0);
menu.addSeparator();
menu.addItem('显示图形信息', null, function()
{
console.log(graph);
});
};
}
//创建节点函数
function createNewNode(graph,x,y,text){
const parent = graph.getDefaultParent();
var node=graph.insertVertex(parent, null, text, x, y, 80, 30);
return node;
}
</script>
</html>
我们去掉了创建节点的按钮，将相关功能移动到下拉菜单中。我们还去掉了程序启动创建的两个节点，程序启动时是空的画布，所有的节点和连接都是后来添加的。
现在我们已经有了基本的编辑功能，增加/删除节点和连接，还可以编辑连接上的文字。下一步我们需要保存定义好的图形，并且从已经保存的文件中读入图形。
