js画图开发库--mxgraph--[ports-所有接口演示.html]

最新推荐文章于 2020-07-08 16:19:16 发布

iteye_17920

最新推荐文章于 2020-07-08 16:19:16 发布

阅读量793

点赞数

分类专栏： mxgraph 文章标签： js画图开发库 mxgraph ports 所有接口演示.html]

本文链接：https://blog.csdn.net/iteye_17920/article/details/82481062

版权

本文详细介绍了使用mxgraph库进行图形界面开发时，如何操作Ports接口。通过ports-所有接口演示.html，展示了各种接口的功能和用法，包括添加、删除、编辑Port等操作，为js画图开发提供实战参考。

摘要由CSDN通过智能技术生成

js画图开发库--mxgraph--[ports-所有接口演示.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>
	<!-- 字体大小风格 -->
	<style type="text/css" media="screen">
		BODY {
			font-family: Arial;
		}
		H1 {
			font-size: 18px;
		}
		H2 {
			font-size: 16px;
		}
	</style>
	
	<!-- 如果本文件的包与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, outline, toolbar, sidebar, status)
		{
			// 浏览器兼容检测
			if (!mxClient.isBrowserSupported())
			{
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 定义全局变量，如。用于触发建立新的连接的活动区域的最小尺寸（以像素为单位），该部分（100％）的小区区域被用于触发新的连接，以及一些窗口和“下拉菜菜单选择
				mxConstants.MIN_HOTSPOT_SIZE = 16;
				mxConstants.DEFAULT_HOTSPOT = 1;
				
				// 显示导航线
				mxGraphHandler.prototype.guidesEnabled = true;

			    // Alt 键禁用导航线
			    mxGuide.prototype.isEnabledForEvent = function(evt)
				{
					return !mxEvent.isAltDown(evt);
				};

				// 自动导航目标
				mxEdgeHandler.prototype.snapToTerminals = true;

				// IE浏览器样式修复
				if (mxClient.IS_QUIRKS)
				{
					document.body.style.overflow = 'hidden';
					new mxDivResizer(container);
					new mxDivResizer(outline);
					new mxDivResizer(toolbar);
					new mxDivResizer(sidebar);
					new mxDivResizer(status);
				}
				
				// 创建图形编辑器
				var editor = new mxEditor();
				var graph = editor.graph;
				var model = graph.getModel();

				// 启用高亮工具栏
				graph.setDropEnabled(false);

				// 连接预览
				graph.connectionHandler.getConnectImage = function(state)
				{
					return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);
				};

				// 显示中心端口图标
				graph.connectionHandler.targetConnectImage = true;

				// 禁止连接线晃动
				graph.setAllowDanglingEdges(false);

				//设置图形容器，并配置编辑器
				editor.setGraphContainer(container);
				var config = mxUtils.load(
					'editors/config/keyhandler-commons.xml').
						getDocumentElement();
				editor.configure(config);
				
				// 设置默认组
				// groupBorderSize 设置图形和它的子元素的边距。
				var group = new mxCell('Group', new mxGeometry(), 'group');
				group.setVertex(true);
				group.setConnectable(false);
				editor.defaultGroup = group;
				editor.groupBorderSize = 20;

				// 目标是否有效
				graph.isValidDropTarget = function(cell, cells, evt)
				{
					return this.isSwimlane(cell);
				};
				
				// 是否根元素
				graph.isValidRoot = function(cell)
				{
					return this.isValidDropTarget(cell);
				}

				// 是否可以被选中
				graph.isCellSelectable = function(cell)
				{
					return !this.isCellLocked(cell);
				};

				// 返回元素
				graph.getLabel = function(cell)
				{
					var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"
					
					if (this.isCellLocked(cell))
					{
						// 如元素被锁定 返回空标签
						return '';
					}
					else if (this.isCellCollapsed(cell))
					{
						var index = tmp.indexOf('</h1>');
						
						if (index > 0)
						{
							tmp = tmp.substring(0, index+5);
						}
					}
					
					return tmp;
				}

				// 禁用HTML的泳道标签，避免冲突
				// 判断是否为泳道标签
				graph.isHtmlLabel = function(cell)
				{
					return !this.isSwimlane(cell);
				}

				// To disable the folding icon, use the following code:
				/*graph.isCellFoldable = function(cell)
				{
					return false;
				}*/

				// 双击显示模型窗口
				graph.dblClick = function(evt, cell)
				{
					// 如果不是双击事件，编辑器会自动处理
					if (this.isEnabled() &&
						!mxEvent.isConsumed(evt) &&
						cell != null &&
						this.isCellEditable(cell))
					{
						if (this.model.isEdge(cell) ||
							!this.isHtmlLabel(cell))
						{
							this.startEditingAtCell(cell);
						}
						else
						{
							var content = document.createElement('div');
							content.innerHTML = this.convertValueToString(cell);