mxgraph的右键菜单

最近使用mxgraph画工作流程图，现在做一些笔记。

1.右键菜单

<style type="text/css">
body div.mxPopupMenu {
-webkit-box-shadow: 3px 3px 6px #C0C0C0;
-moz-box-shadow: 3px 3px 6px #C0C0C0;
box-shadow: 3px 3px 6px #C0C0C0;
background: white;
position: absolute;
border: 3px solid red;/*#e7e7e7*/
padding: 3px;
}
body table.mxPopupMenu {
border-collapse: collapse;
margin: 0px;
}
body tr.mxPopupMenuItem {
color: #3DA9C9;/*black*/
cursor: default;
}
body td.mxPopupMenuItem {
padding: 6px 60px 6px 30px;
font-family: Arial;
font-size: 10pt;
}
body td.mxPopupMenuIcon {
background-color: white;
padding: 0px;
}
body tr.mxPopupMenuItemHover {
background-color: #d5e3f0;/*#eeeeee*/
color: black;
}
table.mxPopupMenu hr {
border-top: solid 1px #cccccc;
}
table.mxPopupMenu tr {
font-size: 4pt;
}
</style>

    // 覆写右键单击事件
graph.panningHandler.factoryMethod = function(menu, cell, evt)
{
menu.addItem('Item 1', null, function()
   {
alert('Item 1');
   });

menu.addItem('Item 2', null, function()
   {
alert('Item 2');
   });


menu.addSeparator();

var submenu1 = menu.addItem('Submenu 1', null, null);

menu.addItem('Subitem 1', null, function()
   {
alert('Subitem 1');
   }, submenu1);
menu.addItem('Subitem 1', null, function()
   {
alert('Subitem 2');
   }, submenu1);
};