draw.io 二次开发（idea2020） 系列（二）

上次的文章（系列一）主要是下载源码和搭建本地开发环境

现在我已经可以在浏览器打开 http://localhost:8080/drawio了  

首先要改掉 打开流程编辑器前的 欢迎提示界面

webapp目录下 index.html 搜索  geBlock

把英文提示改成自己的提示

根据文档，在url后面用不同的参数可以达到不同效果

http://localhost:8080/drawio/?lang=zh  用这个可以打开默认简体中文界面

http://localhost:8080/drawio/?offline=1   用这个可以跳过选择存储方式，不用选什么google drive，github之类的

http://localhost:8080/drawio/?dev=1     用这个可以进入调试模式，也就是前端加载的不是压缩后的js，方便调试前端代码  (实际我打不开这个页面，一直卡在加载界面，发现是有些静态资源请求的地址 是  http://devhost.jgraph.com/xxxxxxxx)   需要代码里全文搜索 devhost.jgraph.com  找到 index.html 文件  把这个写死的域名去掉 ，具体示例参考

https://www.jianshu.com/p/40a30dd1a3f1  (这个文章还有参数列表说明，可以看看)

其他修改： (见最后的说明，由于我只是用了draw.io的embed功能，所以对于编辑器首页的界面，我并不需要做这些修改，下面这些只是收集一些网上的修改经验)

1. 删除右上角share按钮

参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

修改  js/diagramly/Menus.js 里面的代码

2. File菜单功能修改

里面有些按钮菜单 没必要  或者 依赖draw.io官方接口  

 参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

3. 进入界面后底部弹框提示下载桌面版，可以隐藏掉或者换成自己的链接

 参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

4. 精简右上角语言列表，入门视频链接，默认搜索引擎等 修改

 参考 drawio.io二次开发采坑记录_maoguan121的博客-CSDN博客_drawio 源码

5.修改一些静态资源的请求地址，修改发布预览地址等

参考 draw.io二次开发改造过程_iru的博客-CSDN博客_drawio源码分析

最后我要做的流程编辑器  是需要以下功能   

创建和编辑新的流程图

加载和编辑已有流程图

支持导出svg文件 和 png图片文件

由于需求不是很复杂，并且为了避免更改很多代码 (方便以后用最新的源码覆盖更新)， 

目前采用的方式是

1. 后端用  tomcat  把这个draw.io 代码跑起来，作为一个中间件 

2. 前端 要用到 draw.io 提供的  https://github.com/jgraph/drawio-integration 前端页面，这个页面 会用iframe的形式 加载 draw.io 服务, 只需要在这个页面上把它的域名修改为 指向自己在跑的后端draw.io 服务

这个 drawio-intergration

在文件 helloworld.html 里面 会用  diagram-editor.js 去加载 本地iframe

修改 diagram-editor.js

把
DiagramEditor.prototype.drawDomain = 'https://embed.diagrams.net/';
改成 
DiagramEditor.prototype.drawDomain = 'http://我的本地ip或远程ip:8080/drawio/?embed=1&lang=zh';



由于url拼接方式 
由 二级域名 ? 自定义参数  变成了   
ip ? 默认参数 &自定义参数 , 所以修改一下 

把
DiagramEditor.prototype.getFrameUrl = function()
{
	var url = this.drawDomain + '?proto=json&spin=1';
......

改成
DiagramEditor.prototype.getFrameUrl = function()
{
	var url = this.drawDomain + '&proto=json&spin=1';
......

 这个 helloworld.html 和 diagram-editor.js 会让iframe 里面的drawio 编辑器 加载一个svg文件

其他的功能  利用他的iframe通信去完成

编辑器 在保存和自动保存时 会通过iframe给消息 diagram-editor

然后我们可以拿到编辑器里面的 流程图 xml 格式

diagram-editor.js：

DiagramEditor.prototype.save = function (data, draft, elt) {
    // 编辑器每次手动 保存 或者 自动保存 都会调这个方法， data是流程图的xml (mxfile) 格式
    // 先把这个 mxfile 数据 放进 localStorage ，然后 父窗口就可以取出来
    localStorage.setItem("diagram",data)
    this.done(data, draft, elt);
};

这样就可以把这个xml  提交存储到后端了  

接下来分两个场景：

1.  前端需要加载和编辑 已有流程图

2. 前端只需要展示 流程图 而不需要编辑流程图

对于 场景1  我们 只需要把 mxfile 数据 做一下 base64， 然后就可以用

<img id="svgData" style="display: none"   src="data:image/svg+xml;base64,
这里填mxfile数据base64后的串串">


然后 参考 drawio-integration 的helloworld.html ，用 DiagramEditor 加载这个流程图

js 代码：

var img = document.getElementById('svgData')
DiagramEditor.editElement(img)
 
                

对于场景2    由于我还没有摸索出 怎么用代码拿到编辑器里面的流程图的svg格式 或 图片格式

所以摸索出另一个方法，这里我们要用到 draw.io 的一个 流程图预览器工具  viewer.min.js

前端代码

<div class="mxgraph" style="max-width:100%;border:1px solid transparent;"
                     data-mxgraph="${flowJson}">
</div>


<script type="text/javascript" src="你自己部署的draw.io后段服务/draw/js/viewer.min.js"></script>

或者
<script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></script>

后端代码 

JSONObject json = new JSONObject();
json.put("highlight", "#0000ff");
json.put("nav", "true");
json.put("resize", "true");
json.put("toolbar", "zoom layers lightbox");
json.put("edit", "_blank");
json.put("xml", appDoc.getPureContent() );
modelAndView.addObject("flowJson", HtmlUtil.escape(json.toJSONString()));

至于是怎么摸索出来的 主要还是靠github 的 code搜索 

搜mxfile drawerio  svg 等等 最后阴差阳错 搜  https://www.draw.io/js/viewer.min.js时 发现的

另外吐槽一下 csdn的默认编辑器真的很难用   明明以前旧版的编辑器  还有markdown编辑器很好用的，

最终效果

编辑界面

 浏览流程图界面

 

​​​​​​