js画图开发库--mxgraph--[swimlanes-泳道图.html]

chwshuang

浏览: 768109 次
性别:
来自: 北京

最近访客更多访客>>

wangchunheme

amateurlee

smallInt

liudongyang123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

mxgraph

js画图开发库 mxgraph swimlanes 泳道图

js画图开发库--mxgraph--[swimlanes-泳道图.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">
		// 定义创建新的连接的图标。
		// 这将自动禁用高亮显示。
		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>

查看图片附件

分享到：

js画图开发库--mxgraph--[stylesheet-样 ... | js画图开发库--mxgraph--[tree-树形结构 ...

2013-03-04 13:54
浏览 6494
评论(4)
分类:Web前端
查看更多

4 楼 chwshuang 2015-05-11

button1234 写道

楼主你好，我刚接触这东西，现在有个箱子在页面上显示类似泳道图的需求，其实就是讲一个流程的数据能直观的看出该任务走到那部了，感觉你的这个例子应该能满足我的需求，能将你的demo发给我一份我参考一下吗，我邮箱728724357@qq.com谢谢了！

你可以先参考一下下面的文章：
http://chwshuang.iteye.com/blog/1797168

至于源代码需要你百度了。我最近两年没有做前端工作了，只能帮到这了。

3 楼 button1234 2015-05-05

2 楼 chwshuang 2014-09-30

caroline0803 写道

楼主好，感谢你在博客里面对mxgraph进行详细的介绍，可以说，你花了很大的功夫把官方的示例给我解答了一遍，我这里现在遇到一个问题，对于泳道图，如你上面的例子，我还要显示当前的这种样式，可否将poo11这个单词横着显示呢，我现在的客户必须要求这样去实现，我查阅了很多的资料，就是没有找到这个demo，请楼主帮个帮，

这个问题你可以使用mxgraph中的api一个个试，如果没有的话，就说明是框架内部定死的，你要改框架部分源码了。最近比较忙，mxgraph好久没有弄了，其他的要你自己帮自己了。

1 楼 caroline0803 2014-09-20

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论