js画图开发库--mxgraph--[events-事件.html]
演示鼠标悬停，双击，拖拽，右键点击等事件。
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>事件</title>
<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 引入支持库文件 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
// 程序在此方法中启动
function main()
{
// 设置一个创建新连接的图标
mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);
// 检查浏览器支持
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '0px';
container.style.top = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")';
// 禁用内置右键下拉菜单
mxEvent.disableContextMenu(container);
// 修复Internet Explorer忽略的样式
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(container);
}
document.body.appendChild(container);
// 在容器中创建图形
var graph = new mxGraph(container);
// 启用工具提示，新连接平滑移动
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
// 自动处理平行边
var layout = new mxParallelEdgeLayout(graph);
var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell)
{
if (cell.getChildCount() > 0)
{
return layout;
}
};
// 启动鼠标悬停提示
var rubberband = new mxRubberband(graph);
var keyHandler = new mxKeyHandler(graph);
// 设置连接线选择的样式
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
graph.alternateEdgeStyle = 'elbow=vertical';
// 安装一个自定义的工具提示单元格
graph.getTooltipForCell = function(cell)
{
return 'Doubleclick and right- or shiftclick';
}
// 安装右键点击处理程序
graph.panningHandler.factoryMethod = function(menu, cell, evt)
{
return createPopupMenu(graph, menu, cell, evt);
};
//在图形中创建默认组件
var parent = graph.getDefaultParent();
// 开启更新事务
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Doubleclick', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'Right-/Shiftclick', 200, 150, 120, 30);
var v3 = graph.insertVertex(parent, null, 'Connect/Reconnect', 200, 20, 120, 30);
var v4 = graph.insertVertex(parent, null, 'Control-Drag', 20, 150, 100, 30);
var e1 = graph.insertEdge(parent, null, 'Tooltips', v1, v2);
var e2 = graph.insertEdge(parent, null, '', v2, v3);
}
finally
{
// 结束更新事务
graph.getModel().endUpdate();
}
}
};
// 创建下拉菜单
function createPopupMenu(graph, menu, cell, evt)
{
if (cell != null)
{
menu.addItem('Cell Item', 'editors/images/image.gif', function()
{
mxUtils.alert('MenuItem1');
});
}
else
{
menu.addItem('No-Cell Item', 'editors/images/image.gif', function()
{
mxUtils.alert('MenuItem2');
});
}
menu.addSeparator();
menu.addItem('MenuItem3', '../src/images/warning.gif', function()
{
mxUtils.alert('MenuItem3: '+graph.getSelectionCount()+' selected');
});
};
</script>
</head>
<!-- 在页面加载后调用的方法。容器是动态创建的 -->
<body onload="main();">
</body>
</html>