js画图开发库--mxgraph--[fileio-文件读取.html]

 js画图开发库--mxgraph--[fileio-文件读取.html] 

 

读取文件:fileio.txt和fileio.xml

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
	<head>
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<title>文件IO例子</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(container)
		{
			//检查浏览器兼容性
			if (!mxClient.isBrowserSupported())
			{
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 在容器中创建图形
				var graph = new mxGraph(container);
				
				graph.setEnabled(false);
				graph.setPanning(true);
				graph.setTooltips(true);
				graph.panningHandler.useLeftButtonForPanning = true;
				
				// 鼠标停留到元素上边缘高亮显示
				new mxCellTracker(graph);
				
				// 更改节点的默认样式
				var style = graph.getStylesheet().getDefaultVertexStyle();
				style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED;
				style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
				style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
				style[mxConstants.STYLE_PERIMETER_SPACING] = 4;
				style[mxConstants.STYLE_SHADOW] = true;
				
				style = graph.getStylesheet().getDefaultEdgeStyle();
				style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
								
				style = mxUtils.clone(style);
				style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC;
				graph.getStylesheet().putCellStyle('2way', style);
				
				graph.isHtmlLabel = function(cell)
				{
					return true;
				};
				
				// 更改布局网格大小
				graph.gridSize = 20;
			
				// 创建布局更新算法
				var layout = new mxFastOrganicLayout(graph);

				// 移动布局内的元素
				layout.forceConstant = 140;
			
				// 添加一个按钮负责改变布局
				document.body.appendChild(mxUtils.button('Arrange',function(evt)
				{
					var parent = graph.getDefaultParent();
					layout.execute(parent);
				}));
				
				// 开始布局更新
				graph.getModel().beginUpdate();
				try
				{	
					// 加载自定义的格式文件 (TXT file)
					parse(graph, 'fileio.txt');
	
					// 加载 mxGraph 格式文件 (XML file)
					//read(graph, 'fileio.xml');
										
					// 在图形中创建默认组件 
					var parent = graph.getDefaultParent();

					// 展示布局内容
					layout.execute(parent);
				}
				finally
				{
					// 更新事务结束
					graph.getModel().endUpdate();
				}
				//双击事件
				graph.dblClick = function(evt, cell)
				{
					var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
					this.fireEvent(mxe);
					
					if (this.isEnabled() &&
						!mxEvent.isConsumed(evt) &&
						!mxe.isConsumed() &&
						cell != null)
					{
						mxUtils.alert('Show properties for cell '+(cell.customId || cell.getId()));
					}
				};

				if (mxClient.IS_QUIRKS)
				{
					document.body.style.overflow = 'hidden';
					new mxDivResizer(container);
				}
			}
		};
		
		// 自定义文件格式解析器
		function parse(graph, filename)
		{
			var model = graph.getModel();
								
			// 创建默认窗体
			var parent = graph.getDefaultParent();

			var req = mxUtils.load(filename);
			var text = req.getText();

			var lines = text.split('\n');
			
			// 在表中创建一个顶点
			var vertices = [];

			// 开始更新事务
			graph.getModel().beginUpdate();
			try
			{
				for (var i=0; i<lines.length; i++)
				{
					// 忽略注释(以#开头)
					var colon = lines[i].indexOf(':');
	
					if (lines[i].substring(0, 1) != "#" ||
						colon == -1)
					{
						var comma = lines[i].indexOf(',');
						var value = lines[i].substring(colon+2, lines[i].length);
						
						if (comma == -1 || comma > colon)
						{
							var key = lines[i].substring(0, colon);
							
							if (key.length > 0)
							{
								vertices[key] = graph.insertVertex(parent, null, value, 0, 0, 80, 70);
							}
						}
						else if (comma < colon)
						{
							// 查找表中的节点
							var source = vertices[lines[i].substring(0, comma)];
							var target = vertices[lines[i].substring(comma+1, colon)];
							
							if (source != null && target != null)
							{
								var e = graph.insertEdge(parent, null, value, source, target);
	
								// 采用特殊的2-Way 标签的风格
								if (value.indexOf('2-Way') >= 0)
								{
									e.style = '2way';
								}
							}
						}
					}
				}
			}
			finally
			{
				graph.getModel().endUpdate();
			}
		};
		
		// 解析mxGraph XML文件格式
		function read(graph, filename)
		{
			var req = mxUtils.load(filename);
			var root = req.getDocumentElement();
			var dec = new mxCodec(root.ownerDocument);
			
			dec.decode(root, graph.getModel());
		};
	</script>
</head>

<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))" style="margin:4px;">

	<!-- 创建带网格壁纸和曲线的一个容器,请一定要定义的position和overflow的属性!根据在线API的54 页内容增加的大小侦听器  -->
	<div id="graphContainer" style="position:absolute;overflow:auto;top:36px;bottom:0px;left:0px;right:0px;border-top:gray 1px solid;">
	</div>
</body>
</html>

 

fileio.txt

# Custom file format for fileio.html (comments start with #, all vertices first)

# Vertices (id: label)
1: <img src="editors/images/overlays/user3.png"><br><b>Last, First</b><br>Status<br>Info
2: <img src="editors/images/overlays/error.png"><br><b>Errorcode</b><br>Status<br>Info
3: <img src="editors/images/overlays/flash.png"><br><b>Warning</b><br>Status<br>Info
4: <img src="editors/images/overlays/users3.png"><br><b>Groupname</b><br>Status<br>Info
5: <img src="editors/images/overlays/workplace.png"><br><b>Workplace</b><br>Status<br>Info
6: <img src="editors/images/overlays/information.png"><br><b>Information</b><br>Status<br>Info
7: <img src="editors/images/overlays/printer.png"><br><b>Printername</b><br>Status<br>Info

# Edges (source-id,target-id: label)
1,2: <img src="editors/images/overlays/lightbulb_on.png"> Hint
1,3: <img src="editors/images/overlays/help.png"> News
1,4: <img src="editors/images/overlays/information.png"> Member
5,6: <img src="editors/images/overlays/pencil.png"> Details
5,7: <img src="editors/images/overlays/check.png"> Access
4,5: <img src="editors/images/overlays/forbidden.png"> Access
1,5: <img src="editors/images/overlays/lightbulb_on.png"> 2-Way

 

fileio.xml

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" customId="2" value="&lt;img src=&quot;editors/images/overlays/user3.png&quot;&gt;&lt;br&gt;&lt;b&gt;Last, First&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
    </mxCell>
    <mxCell id="3" customId="3" value="&lt;img src=&quot;editors/images/overlays/error.png&quot;&gt;&lt;br&gt;&lt;b&gt;Errorcode&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
    </mxCell>
    <mxCell id="4" customId="4" value="&lt;img src=&quot;editors/images/overlays/flash.png&quot;&gt;&lt;br&gt;&lt;b&gt;Warning&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="120" height="70" as="geometry"/>
    </mxCell>
    <mxCell id="5" customId="5" value="&lt;img src=&quot;editors/images/overlays/users3.png&quot;&gt;&lt;br&gt;&lt;b&gt;Groupname&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
    </mxCell>
    <mxCell id="6" customId="6" value="&lt;img src=&quot;editors/images/overlays/workplace.png&quot;&gt;&lt;br&gt;&lt;b&gt;Workplace&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
    </mxCell>
    <mxCell id="7" customId="6" value="&lt;img src=&quot;editors/images/overlays/information.png&quot;&gt;&lt;br&gt;&lt;b&gt;Information&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
    </mxCell>
    <mxCell id="8" customId="7" value="&lt;img src=&quot;editors/images/overlays/printer.png&quot;&gt;&lt;br&gt;&lt;b&gt;Printername&lt;/b&gt;&lt;br&gt;Status&lt;br&gt;Info" vertex="1" parent="1">
      <mxGeometry x="0" y="0" width="120" height="70" as="geometry"/>
    </mxCell>
    <mxCell id="edge-1" customId="edge-1" value="&lt;img src=&quot;editors/images/overlays/lightbulb_on.png&quot;&gt; Hint" edge="1" parent="1" source="2" target="3">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="edge-2" customId="edge-2" value="&lt;img src=&quot;editors/images/overlays/help.png&quot;&gt; News" edge="1" parent="1" source="2" target="4">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="edge-3" customId="edge-3" value="&lt;img src=&quot;editors/images/overlays/information.png&quot;&gt; Member" edge="1" parent="1" source="2" target="5">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="edge-4" customId="edge-4" value="&lt;img src=&quot;editors/images/overlays/pencil.png&quot;&gt; Details" edge="1" parent="1" source="6" target="7">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="edge-5" customId="edge-5" value="&lt;img src=&quot;editors/images/overlays/check.png&quot;&gt; Access" edge="1" parent="1" source="6" target="8">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="edge-6" customId="edge-6" value="&lt;img src=&quot;editors/images/overlays/forbidden.png&quot;&gt; Access" edge="1" parent="1" source="5" target="6">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="edge-7" customId="edge-7" value="&lt;img src=&quot;editors/images/overlays/lightbulb_on.png&quot;&gt; 2-Way" style="2way" edge="1" parent="1" source="2" target="6">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

 

 

 

你可能感兴趣的:(js画图开发库--mxgraph--[fileio-文件读取.html])