js画图开发库--mxgraph--[swimlanes-泳道图.html]
![js画图开发库--mxgraph--[swimlanes-泳道图.html]_第1张图片](http://img.e-com-net.com/image/product/cee77134ce9a45419aa768a33871a42d.png)
<!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">
// 定义创建新的连接的图标。
// 这将自动禁用高亮显示。
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
// 程序在此方法中启动
function main(container)
{
// 检查浏览器支持
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 去锯齿效果
mxSwimlane.prototype.crisp = true;
// 根据给定的xml文件在容器中创建图形编辑器
var config = mxUtils.load(
'editors/config/keyhandler-commons.xml').
getDocumentElement();
var editor = new mxEditor(config);
editor.setGraphContainer(container);
var graph = editor.graph;
var model = graph.getModel();
//自动调整大小的容器
graph.border = 80;
graph.getView().translate = new mxPoint(graph.border/2, graph.border/2);
graph.setResizeContainer(true);
graph.graphHandler.setRemoveCellsFromParent(false);
// 改变默认样式
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
style[mxConstants.STYLE_FONTSIZE] = 11;
style[mxConstants.STYLE_STARTSIZE] = 22;
style[mxConstants.STYLE_HORIZONTAL] = false;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_STROKECOLOR] = 'black';
delete style[mxConstants.STYLE_FILLCOLOR];
style = mxUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_FONTSIZE] = 10;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_HORIZONTAL] = true;
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
delete style[mxConstants.STYLE_STARTSIZE];
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none';
graph.getStylesheet().putCellStyle('process', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
delete style[mxConstants.STYLE_ROUNDED];
graph.getStylesheet().putCellStyle('state', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top';
style[mxConstants.STYLE_SPACING_TOP] = 40;
style[mxConstants.STYLE_SPACING_RIGHT] = 64;
graph.getStylesheet().putCellStyle('condition', style);
style = mxUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_SPACING_TOP] = 28;
style[mxConstants.STYLE_FONTSIZE] = 14;
style[mxConstants.STYLE_FONTSTYLE] = 1;
delete style[mxConstants.STYLE_SPACING_RIGHT];
graph.getStylesheet().putCellStyle('end', style);
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_STROKECOLOR] = 'black';
style = mxUtils.clone(style);
style[mxConstants.STYLE_DASHED] = true;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN;
style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL;
graph.getStylesheet().putCellStyle('crossover', style);
// 双击时改变边框样式
graph.alternateEdgeStyle = 'elbow=vertical';
// 启用了图形添加了自动布局和各种开关
if (graph.isEnabled())
{
// Allows new connections but no dangling edges
graph.setConnectable(true);
graph.setAllowDanglingEdges(false);
// End-states are no valid sources
var previousIsValidSource = graph.isValidSource;
graph.isValidSource = function(cell)
{
if (previousIsValidSource.apply(this, arguments))
{
var style = this.getModel().getStyle(cell);
return style == null ||
!(style == 'end' ||
style.indexOf('end') == 0);
}
return false;
};
// 判断状态有无合法目标，不执行调用父类的功能，因为这会调用isValidSource
graph.isValidTarget = function(cell)
{
var style = this.getModel().getStyle(cell);
return !this.getModel().isEdge(cell) &&
!this.isSwimlane(cell) &&
(style == null ||
!(style == 'state' ||
style.indexOf('state') == 0));
};
// 可以将新元素转换为新泳道，新泳道为新泳道池
graph.setDropEnabled(true);
graph.setSplitEnabled(false);
// 有效的拖放操作，则返回true
graph.isValidDropTarget = function(target, cells, evt)
{
if (this.isSplitEnabled() &&
this.isSplitTarget(target, cells, evt))
{
return true;
}
var model = this.getModel();
var lane = false;
var pool = false;
var cell = false;
// 检查元素是否被选择
for (var i = 0; i < cells.length; i++)
{
var tmp = model.getParent(cells[i]);
lane = lane || this.isPool(tmp);
pool = pool || this.isPool(cells[i]);
cell = cell || !(lane || pool);
}
return !pool &&
cell != lane &&
((lane && this.isPool(target)) ||
(cell && this.isPool(model.getParent(target))));
};
// 添加新的方法识别泳道池
graph.isPool = function(cell)
{
var model = this.getModel();
var parent = model.getParent(cell);
return parent != null &&
model.getParent(parent) == model.getRoot();
};
//删除元素时清楚泳道
graph.model.getStyle = function(cell)
{
var style = mxGraphModel.prototype.getStyle.apply(this, arguments);
if (graph.isCellCollapsed(cell))
{
if (style != null)
{
style += ';';
}
else
{
style = '';
}
style += 'horizontal=1;align=left;spacingLeft=14;';
}
return style;
};
// 收缩窗体时保持宽度
var foldingHandler = function(sender, evt)
{
var cells = evt.getProperty('cells');
for (var i = 0; i < cells.length; i++)
{
var geo = graph.model.getGeometry(cells[i]);
if (geo.alternateBounds != null)
{
geo.width = geo.alternateBounds.width;
}
}
};
graph.addListener(mxEvent.FOLD_CELLS, foldingHandler);
}
// 父元素和同级元素间跳转大小
new mxSwimlaneManager(graph);
// 创建一个堆栈布局
var layout = new mxStackLayout(graph, false);
// 确保所有的子元素都适应父泳道
layout.resizeParent = true;
// 子元素适用父元素的变化
layout.fill = true;
// 仅仅更新泳道的大小
layout.isVertexIgnored = function(vertex)
{
return !graph.isSwimlane(vertex);
}
// 保持泳道池与泳道的层叠关系
var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell)
{
if (!model.isEdge(cell) && graph.getModel().getChildCount(cell) > 0 &&
(model.getParent(cell) == model.getRoot() || graph.isPool(cell)))
{
layout.fill = graph.isPool(cell);
return layout;
}
return null;
};
// 创建默认窗体
var parent = graph.getDefaultParent();
// 开启更新事务
model.beginUpdate();
try
{
var pool1 = graph.insertVertex(parent, null, 'Pool 1', 0, 0, 640, 0);
pool1.setConnectable(false);
var lane1a = graph.insertVertex(pool1, null, 'Lane A', 0, 0, 640, 110);
lane1a.setConnectable(false);
var lane1b = graph.insertVertex(pool1, null, 'Lane B', 0, 0, 640, 110);
lane1b.setConnectable(false);
var pool2 = graph.insertVertex(parent, null, 'Pool 2', 0, 0, 640, 0);
pool2.setConnectable(false);
var lane2a = graph.insertVertex(pool2, null, 'Lane A', 0, 0, 640, 140);
lane2a.setConnectable(false);
var lane2b = graph.insertVertex(pool2, null, 'Lane B', 0, 0, 640, 110);
lane2b.setConnectable(false);
var start1 = graph.insertVertex(lane1a, null, null, 40, 40, 30, 30, 'state');
var end1 = graph.insertVertex(lane1a, null, 'A', 560, 40, 30, 30, 'end');
var step1 = graph.insertVertex(lane1a, null, 'Contact\nProvider', 90, 30, 80, 50, 'process');
var step11 = graph.insertVertex(lane1a, null, 'Complete\nAppropriate\nRequest', 190, 30, 80, 50, 'process');
var step111 = graph.insertVertex(lane1a, null, 'Receive and\nAcknowledge', 385, 30, 80, 50, 'process');
var start2 = graph.insertVertex(lane2b, null, null, 40, 40, 30, 30, 'state');
var step2 = graph.insertVertex(lane2b, null, 'Receive\nRequest', 90, 30, 80, 50, 'process');
var step22 = graph.insertVertex(lane2b, null, 'Refer to Tap\nSystems\nCoordinator', 190, 30, 80, 50, 'process');
var step3 = graph.insertVertex(lane1b, null, 'Request 1st-\nGate\nInformation', 190, 30, 80, 50, 'process');
var step33 = graph.insertVertex(lane1b, null, 'Receive 1st-\nGate\nInformation', 290, 30, 80, 50, 'process');
var step4 = graph.insertVertex(lane2a, null, 'Receive and\nAcknowledge', 290, 20, 80, 50, 'process');
var step44 = graph.insertVertex(lane2a, null, 'Contract\nConstraints?', 400, 20, 50, 50, 'condition');
var step444 = graph.insertVertex(lane2a, null, 'Tap for gas\ndelivery?', 480, 20, 50, 50, 'condition');
var end2 = graph.insertVertex(lane2a, null, 'B', 560, 30, 30, 30, 'end');
var end3 = graph.insertVertex(lane2a, null, 'C', 560, 84, 30, 30, 'end');
var e = null;
graph.insertEdge(lane1a, null, null, start1, step1);
graph.insertEdge(lane1a, null, null, step1, step11);
graph.insertEdge(lane1a, null, null, step11, step111);
graph.insertEdge(lane2b, null, null, start2, step2);
graph.insertEdge(lane2b, null, null, step2, step22);
graph.insertEdge(parent, null, null, step22, step3);
graph.insertEdge(lane1b, null, null, step3, step33);
graph.insertEdge(lane2a, null, null, step4, step44);
graph.insertEdge(lane2a, null, 'No', step44, step444, 'verticalAlign=bottom');
graph.insertEdge(parent, null, 'Yes', step44, step111, 'verticalAlign=bottom;horizontal=0');
graph.insertEdge(lane2a, null, 'Yes', step444, end2, 'verticalAlign=bottom');
e = graph.insertEdge(lane2a, null, 'No', step444, end3, 'verticalAlign=top');
e.geometry.points = [new mxPoint(step444.geometry.x + step444.geometry.width / 2,
end3.geometry.y + end3.geometry.height / 2)];
graph.insertEdge(parent, null, null, step1, step2, 'crossover');
graph.insertEdge(parent, null, null, step3, step11, 'crossover');
e = graph.insertEdge(lane1a, null, null, step11, step33, 'crossover');
e.geometry.points = [new mxPoint(step33.geometry.x + step33.geometry.width / 2 + 20,
step11.geometry.y + step11.geometry.height * 4 / 5)];
graph.insertEdge(parent, null, null, step33, step4);
graph.insertEdge(lane1a, null, null, step111, end1);
}
finally
{
// 结束更新事务
model.endUpdate();
}
}
};
</script>
</head>
<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"
style="position:absolute;overflow:hidden;top:40px;left:40px;width:600px;height:400px;border: gray dotted 1px;cursor:default;">
</div>
</body>
</html>