mxGraph浅入之 mxEditor

这次说一下mxGraph的核心类mxEditor，字面意思是编辑器，官方意思：一个继承自mxEventSource类，为了实现一个应用程序的、graph的包装器。该类的可以注册actions、结合mxCodec类实现I/O、集合mxLayoutManager类实现自动布局、结合undoManager类实现undo和redo，还结合了标准对话框dialogs 和widgets等等。总之言之，该类特别重要。

举个简单的例子：

构建graph可以直接通过new mxGrpah(container)创建

// 结合了 vue， this.$refs,graph_container 为容器
// 方式一
this.graph = new mxGraph(this.$refs.graph_container)

也可以通过mxEditor来创建

// 方式二
this.editor = new mxEditor()
this.graph = this.editor.graph
this.editor.setGraphContainer(this.$refs.graph_container);

但是两种方式有哪些区别呢？

区别就是文章开头提到的那些，mxEditor集成了好些方便的功能。

首先，方式二创建的graph，默认禁用了部分浏览器默认事件，比如鼠标右击弹出框事件；默认添加了鼠标右击拖动事件，按下鼠标右键拖动可以移动graph图层；还有全选等操作，非常方便。

其次，在actions方面,方式二已经预先注册好了大量现成的actions，直接通过action名称调用即可。

// 页面放大
// 方式一： 直接调用原始的页面放大方法
this.graph.zoomIn()

//方式二： 通过事先注册好的行为name调用执行
this。editor.execute('zoomIn')

我们可以看一下mxEditor这个类的源码：

function mxEditor(config)
{
	this.actions = [];
	this.addActions();
    ...
}

mxEditor的构造函数中有一个actions数组，和addActions方法，即通过addActions方法预先注册好各种行为，最后添加到actions中

mxEditor.prototype.addActions = function ()
{
	this.addAction('save', function(editor)
	{
		editor.save();
	});
	
	this.addAction('print', function(editor)
	{
		var preview = new mxPrintPreview(editor.graph, 1);
		preview.open();
	});
    // 行为过多，省略
    ...
}
// addAction方法
mxEditor.prototype.addAction = function (actionname, funct)
{
    // 将行为和行为的名称添加到数组
	this.actions[actionname] = funct;
};

// 预先注册的行为：
[ save、print、show、exportImage、refresh、cut、copy、paste、delete、group、ungroup、
removeFromParent、undo、redo、zoomIn、zoomOut、actualSize、fit、showProperties、
selectAll、selectNone、selectVertices、selectEdges、edit、toBack、toFront、enterGroup、
exitGroup、home、selectPrevious、selectNext、selectParent、selectChild、collapse、
collapseAll、expand、expandAll、bold、italic、underline、alignCellsLeft、
alignCellsCenter、alignCellsRight、alignCellsTop、alignCellsMiddle、alignCellsBottom、
alignFontLeft、alignFontCenter、alignFontRight、alignFontTop、alignFontMiddle、
alignFontBottom、zoom、toggleTasks、toggleHelp、toggleOutline、toggleConsole ]

mxEditor其他的方法，如createLayoutManager、getTitle、showOutline等方法，含义如其名，在此暂不详解，有兴趣可以去看源码。

目前在不定期做一个vue + mxGraph的demo，后续若是用到了某个具体方法，再更新！