MxGraph上下文按钮实现

1 介绍

mxGraph是一个强大的JavaScript图形前端库，可以快速创建交互式图表和图表应用程序，国内外著名的ProcessOne和draw.io都是使用该库创建的强大的在线流程图绘制网站.

1.1 编写顶点事件

function mxVertexToolHandler(state) {
	mxVertexHandler.apply(this, arguments);
};

mxVertexToolHandler.prototype = new mxVertexHandler();
mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
mxVertexToolHandler.prototype.domNode = null;

mxVertexToolHandler.prototype.init = function () {
	mxVertexHandler.prototype.init.apply(this, arguments);

	this.domNode = document.createElement('div');
	this.domNode.style.position = 'absolute';
	this.domNode.style.whiteSpace = 'nowrap';


	var html = "";
	if (this.state.cell.isSwimlane()) {
		html += '<button class="publishBtn" title="发布"></button>';
	} else {
		html += '<button class="modifyBtn" title="修改"></button>';
		html += '<button class="deleteBtn" title="删除"></button>';
	}

	$(this.domNode).addClass("entityToolDiv")
	$(this.domNode).html(html);

	this.graph.container.appendChild(this.domNode);
	this.redrawTools();
	this.initEvent();
};

mxVertexToolHandler.prototype.redraw = function () {
	mxVertexHandler.prototype.redraw.apply(this);
	this.redrawTools();
};

mxVertexToolHandler.prototype.redrawTools = function () {
	if (this.state != null && this.domNode != null) {
		var dy = (mxClient.IS_VML && document.compatMode == 'CSS1Compat') ? 20 : 4;
		this.domNode.style.left = (this.state.x) + 'px';
		this.domNode.style.top = (this.state.y - $(this.domNode).height()) + 'px';
	}
};

mxVertexToolHandler.prototype.destroy = function (sender, me) {
	mxVertexHandler.prototype.destroy.apply(this, arguments);
	if (this.domNode != null) {
		this.domNode.parentNode.removeChild(this.domNode);
		this.domNode = null;
	}
};


/**
 * 初始化事件
 */
mxVertexToolHandler.prototype.initEvent = function () {
	var self = this;

	var container = $(this.domNode);
	

	//修改实体
	$(".modifyBtn", container).on("click", function () {
		var cell = self.state.cell
		var id = cell.attr("Id");
	});
		

};

按钮可以结合jquery编写html 和事件，提升了方便性。

2.2 事件注册

graph.createHandler = function (state) {
				if (state != null &&
					this.model.isVertex(state.cell)) {
					var cell = state.cell;
					if (cell.isSwimlane() || cell.getParent().isSwimlane()) {
						var handler = new mxVertexToolHandler(state);
						return handler;
					}
				}

				return mxGraph.prototype.createHandler.apply(this, arguments);
			};

可以根据顶点的信息，是否注册“顶点工具事件”。