FineDrawio

项目介绍

开源地址 https://gitee.com/shixixiyue/fine-drawio-public

给开源项目 drawio 用 FineUI 套了个壳，

其他开源项目用的或在线流程图的drwaio版本有些老，所以自己包了一层。

由于核心代码在前端，所以没有将整个项目开源，另外FineUI社区版是付费星球可以下载到的，所以也没有包含在项目中；在这里我先介绍说明一下，发布的完整版我会上传到星球，可以直接用；

TEST包含完整的前端示例，可以满足需求，即大家自己套壳也够用了。这里说的套壳的意思是 drawio 绘图的文件会存到浏览器缓存，我套一层将文件输出保存到数据库，增加用户设置，这样就可以发布到公司服务器在线使用了，不用装桌面版本。

环境

.Net6 : FineUICore8.1 + drawio 20.6.0 + MySql

演示地址

http://101.201.67.76:8093/ test 123456 我自己的服务器，请不要祸祸

功能展示

功能：管理员新增用户，登录，新建文件夹，新建文件，复制文件，自动保存

图片.png 主目录

修改文件

复制和删除

后台添加用户

代码说明

drawio的资料在网上着实的少，翻来覆去这两篇文章对我的帮助很大，

Github好码推荐-一键集成Drawio 绘图

DrawIO二次开发

这两个文章要先看，我这里做补充说明。

drawio-embed

首先核心代码是 drawio-embed.js 可以在TEST 看到代码，drwaio 项目本身就带这个文件 TEST\Drawiojs\drawio-embed.js，这里我做了配置修改，这个文件的作用就是将 drwaio 作为iframe嵌入，可以控制设计页面的打开，关闭，监听事件，触发方法等。

drawio 本身会抛出事件通过 window.dispatchEvent(new Event("xxx"));

外部可以通过 window.addEventListener("message", fun);监听抛出的事件和参数搜索【bindEventListener】，通过 window.postMessage 向 iframe 触发事件搜索【sendMsgToDrawio】

所以 drawio-embed.js 就是一个中间件，他会监听 drwaio 的原始事件，并抛出；也有对外api以事件方式触发 drwaio 的方法；

当然在 drawio-embed.js 里也扩展了自己的方法，["showMask", "hideMask", "showSpinner", "hideSpinner", "setTitle"]

iframe参数

drawio-embed 打开了一个iframe地址，默认是 "https://www.draw.io/" 即官网地址，其实 drwaio 本身的webapp就可以使用，打开index.html后会将文件保存在本地或者网盘什么的，这样不满足需求，所以drwaio的index.html 接收好多参数，可以定制页面，在drawio-embed.js 就是 var queryStr = 参数，参数的说明我没有找到，通过翻源码和测试总结了一下


//ui sketch 白板 minimal 不带图标 atlas 带图标

//embed 0 1 不知道

//spin 0 1不知道

//dev 调试

//lang 语言

//autosave 没啥用

var queryStr = "embed=1&ui=minimal&spin=1&proto=json&dev=1&lang=zh&autosave=1";

PreConfig.js 和 PostConfig.js 也可以配置，但是我不会。

dev 是调试模式，再该模式下，会加载未压缩的js，在 js\diagramly 路径下；否则将加载 app.min.js

drwaio

对于drwaio 我没有改源码，这样会影响升级，所以将扩展放到了drawio-embed.js 中，唯一修改的地方是 index.html；一个是geBasePath mxBasePath，这是dev模式下js文件的路径；还有一个是 App.main() 这个方法有两处，一个是dev模式一个不是dev模式，App.main() 方法接收一个回调方法（从源码中看见的），回调的参数就是当前的 App实例，


App.main((ui) => {

    DrawioUI = ui;

});

这里的DrawioUI就是当前编辑器的实例了，将这个实例打印一下，就可以看到所有的drwaio原始方法；

再通过drawio-embed.js抛出，就可以在最上层直接操作drawio了，这里主要有这几个属性

DrawioUI.editor 当前实例的编辑器，这里是ui的dom，显示的按钮，菜单都在这里，可以添加或修改UI；

DrawioUI.actions.actions 这里是drawio的所有功能，可以看到 drawio 的功能和 ui 是解耦的，注册功能包括功能的key（save,open,close）等，lable 显示名称（通过语言包），funct 执行的方法，shortcut 快捷键，等；ui在调用时调用的是 funct ，比如


mxEvent.addListener(div, 'click', this.actions.get('openLibrary').funct);

再比如，在前台我们可以直接调用 DrawioUI.actions.actions.exportXml.funct(); 打开导出的窗口

如果要添加功能，调用 DrawioUI.actions.addAction 就行了，控制UI和增加方法，就可以在不改动源码的情况下实现二开了。

发布版请前往星球下载由于项目使用了 FineUICore 所以完整的发布版在 FineUI 知识星球