mxgraph源码中的toolbar.js中实现图标按钮功能的分析_尔嵘的博客

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
添加新的功能(比如下面的全选和取消全选)，默认会有一个icon，我们可以通过设置背景图片的样式来定义自己的icon:

if(sw > 480){
		this.addSeparator();//添加竖杠分割符号
		var elts = this.addItems(['selectAll','selectNone']);
		elts[0].setAttribute('title', mxResources.get('selectAll') + ' (' + this.editorUi.actions.get('selectAll').shortcut + ')');
		elts[1].setAttribute('title', mxResources.get('selectNone') + ' (' + this.editorUi.actions.get('selectNone').shortcut + ')');
		console.log(elts);
		console.log(this.editorUi.actions);
那么为什么我添加了这行代码你就可以实现全选和取消全选功能呢？那我们不妨可以在任意功能里面打印一下这个值： 
console.log(this.editorUi.actions); 
打印的结果会让你大吃一惊： 
可以很清晰的发现example中toolbar的完整功能有哪些，如果你需要啥功能你可以自己接着添加到toolbar.js。 
其实主要作用还是人家写好的graph框架以及action.js,我们只不过搬过来用罢了。 
仔细点你还会发现，当我鼠标移入按钮的时候会有提示，比如像下面这样，因为不好截图，你们去官网文档自己看，其实是因为action.js里面影响的： 
this.addAction('save', function() { ui.saveFile(false); }, null, null, Editor.ctrlKey + '+S').isEnabled = isGraphEnabled;
	this.addAction('saveAs...', function() { ui.saveFile(true); }, null, null, Editor.ctrlKey + '+Shift+S').isEnabled = isGraphEnabled;
	this.addAction('export...', function() { ui.showDialog(new ExportDialog(ui).container, 300, 296, true, true); });
	this.addAction('editDiagram...', function()
		var dlg = new EditDiagramDialog(ui);
		ui.showDialog(dlg.container, 620, 420, true, false);
		dlg.init();
	this.addAction('pageSetup...', function() { ui.showDialog(new PageSetupDialog(ui).container, 320, 220, true, true); }).isEnabled = isGraphEnabled;
	this.addAction('print...', function() { ui.showDialog(new PrintDialog(ui).container, 300, 180, true, true); }, null, 'sprite-print', Editor.ctrlKey + '+P');
	this.addAction('preview', function() { mxUtils.show(graph, null, 10, 10); });
	// Edit actions
	this.addAction('undo', function() { ui.undo(); }, null, 'sprite-undo', Editor.ctrlKey + '+Z');
	this.addAction('redo', function() { ui.redo(); }, null, 'sprite-redo', (!mxClient.IS_WIN) ? Editor.ctrlKey + '+Shift+Z' : Editor.ctrlKey + '+Y');
	this.addAction('cut', function() { mxClipboard.cut(graph); }, null, 'sprite-cut', Editor.ctrlKey + '+X');
	this.addAction('copy', function() { mxClipboard.copy(graph); }, null, 'sprite-copy', Editor.ctrlKey + '+C');
	this.addAction('paste', function()
		if (graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent()))
			mxClipboard.paste(graph);
	}, false, 'sprite-paste', Editor.ctrlKey + '+V');
	this.addAction('pasteHere', function(evt)
		if (graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent()))
			graph.getModel().beginUpdate();
				var cells = mxClipboard.paste(graph);
				if (cells != null)
					var includeEdges = true;
					for (var i = 0; i < cells.length && includeEdges; i++)
						includeEdges = includeEdges && graph.model.isEdge(cells[i]);
					var t = graph.view.translate;
					var s = graph.view.scale;
					var dx = t.x;
					var dy = t.y;
					var bb = null;
					if (cells.length == 1 && includeEdges)
						var geo = graph.getCellGeometry(cells[0]);
						if (geo != null)
							bb = geo.getTerminalPoint(true);
					bb = (bb != null) ? bb : graph.getBoundingBoxFromGeometry(cells, includeEdges);
					if (bb != null)
						var x = Math.round(graph.snap(graph.popupMenuHandler.triggerX / s - dx));
						var y = Math.round(graph.snap(graph.popupMenuHandler.triggerY / s - dy));
						graph.cellsMoved(cells, x - bb.x, y - bb.y);
			finally
				graph.getModel().endUpdate();
总之，没有你全局搜索解决不了的，反正多看文档就对了，我也只是在一直学习中，一起加油！ 
欢迎留言评论！哪里有问题我们一起解决，谢谢
本篇的内容是围绕如何使用 vue 和 mxGraph 实现一个自定义的工具箱。 
主要完成以下功能： 
自定义工具箱的内容。从工具箱中拖拽一个工具项到绘画区并生成对应的cell。双击生成的cell可以查看cell的数据。 
本例可以在 github 上看到源...
                                    mxGraph是一个支持多种语言（Java、JavaScript、PHP、.NET）的画图框架，所绘制的图形可以在主流浏览器以及原生应用上使用。 mxGraph官方资料全英文，网上有几篇mxGraph的教程，对于“入门”和“使用”讲解得比较详细。 所以这篇文章不是介绍如何画一个图形，写一个hello world，而是重点介绍学习mxGraph时觉得比较重要的、难以理解的或者容易被忽略的知识点。 需...
this.addAction('left', function() {
	graph.alignCells(mxConstants.ALIGN_LEFT);
}, null, null, 'align_left');
//水平居中对齐
this.addAction('center', function() {
	graph.alignCells(mxConstants.ALIGN_CENTER);
},null,null, 'align_center');
&lt;html xmlns=http://www.w3.org/1999/xhtml&gt;
	&lt;head&gt;
	&lt;meta http-equiv=Content-Type content="text/html;charset=...
                                    vue中使用mxgraph 类型流编辑器 (typeflow-editor)
build with the vue and mxGraph.
 使用vue和mxGraph构建。 
 核心外观 (Core appearance)
 拖动“定义”中的元素之一后，将显示表格以填充 (After drag the one of the elements in "definitions", the fo...
                                    1.mxgraph常用包（这个js类库被分成了8个包。）
1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。
2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。
3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。
4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa
	this.addAction('left', function() {
		graph.alignCells(mxConstants.ALIGN_LEFT);
	}, null, null, 'align_left');
	//水平居中对齐
	this.addAction('center', function() {
		graph.align...