drawio.io二次开发采坑记录

drawio.io二次开发教程

二次开发

基础资料

导入ide

增加本地和oss存储
纯前端功能
各种修改位置介绍

修改代码

准备环境

git clone  https://github.com/jgraph/drawio.git
cd drawid-dev\src\main\webapp  
python -m http.server 8081  

项目默认是使用打包好的 app.min.js,如果需要修改代码，则需要在请求参数增加 dev=1

同时需要修改 index.html line:245 注释掉远程地址 ，否则测试环境下不会请求本地修改后的js

if (urlParams['dev'] == '1')
{
	// Used to request grapheditor/mxgraph sources in dev mode
	var mxDevUrl = document.location.protocol ; //+ '//devhost.jgraph.com/drawio/src/main';
	
	// Used to request draw.io sources in dev mode
	var drawDevUrl = document.location.protocol ; //+ '//devhost.jgraph.com/drawio/src/main/webapp/';

一切就绪…

修改菜单

菜单相关设置在 js/diagramly/Menus.js
如要删除File --> share…功能

在js/diagramly/Menus.js 搜索 share… 如下，注释掉代码即可

/*
	this.editorUi.actions.addAction('share...', mxUtils.bind(this, function()
	{
		try
		{
			var file = editorUi.getCurrentFile();
			
			if (file != null)
			{
				file.share();
			}
		}
		catch (e)
		{
			editorUi.handleError(e);
		}
	}));
*/

修改功能代码也是一样，如将share… 按钮,修改为打开百度，对应代码如下即可

this.editorUi.actions.addAction('share...', mxUtils.bind(this, function()
{
	editorUi.openLink('https://www.baidu.com/',"_blank")

}));

可以在浏览器控制台查看各种变量信息 如

console.log(mxResources.get('url'))

修改生效

不能每次都使用dev模式执行，因此需要对 修改后的文件进行 打包

cd drawio/etc/build
ant 

具体功能实现

默认弹出SQL转ER框

发现 菜单的

调整图形 -> 插入 -> 高级 -> SQL... 

这个功能很有意思，可以直接将SQL语句转成ER图

但是这个路径太长了，需要选择好几级菜单才可以找到这个功能

怎样打开页面默认弹出这个编辑框?

• 首先找到原始功能

调整图形 -> 插入 -> 高级 -> SQL... 

的具体实现在 \src\main\webapp\js\diagramly\Menus.js
功能代码

if (method == 'fromText' || method == 'formatSql' ||
						method == 'plantUml' || method == 'mermaid')
{
	var dlg = new ParseDialog(editorUi, title, method);
	editorUi.showDialog(dlg.container, 620, 420, true, false);
	editorUi.dialog.container.style.overflow = 'auto';
	dlg.init();
}

ParseDialog 具体实现在 \src\main\webapp\js\diagramly\Dialogs.js 中

• splash对话框分析

默认有个splash对话框，查看这个实现 是在 \src\main\webapp\js\diagramly\App.js

App.prototype.showSplash = function(force)
{
	
	console.log('show Splash is here');
	//Splash dialog shouldn't be shownn when running without a file menu
	if (urlParams['noFileMenu'] == '1')
	{
		return;	
	}
	
	var serviceCount = this.getServiceCount(true);
	
	var showSecondDialog = mxUtils.bind(this, function()
	{
		var dlg = new SplashDialog(this);  //对话框实现在  \src\main\webapp\js\diagramly\Dialogs.js 
		

var SplashDialog = function(editorUi)  //可以看到 app.js中的this 等价与Dialogs.js 的editorUi 
{
	console.log('dialogs SplashDialog');
	var div = document.createElement('div');
	div.style.textAlign = 'center';

是一个原型定义，具体调用代码

this.showSplash();