文章目录
drawio.io二次开发教程
二次开发
基础资料
修改代码
准备环境
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();