这里放出drwaio 套壳的Test 版本,属于
前端核心功能
, 由于项目使用了 FineUICore 所以完整的发布版在 FineUI 知识星球
给开源项目 drawio 用 FineUI 套了个壳,
其他开源项目用的或在线流程图的drwaio版本有些老,所以自己包了一层。
由于核心代码在前端,所以没有将整个项目开源,另外FineUI社区版是付费星球可以下载到的,所以也没有包含在项目中;在这里我先介绍说明一下,发布的完整版我会上传到星球,可以直接用;
TEST包含完整的前端示例,可以满足需求,即大家自己套壳也够用了。这里说的套壳的意思是 drawio 绘图的文件会存到浏览器缓存,我套一层将文件输出保存到数据库,增加用户设置,这样就可以发布到公司服务器在线使用了, 不用装桌面版本。
.Net6 : FineUICore8.1 + drawio 20.6.0 + MySql
http://101.201.67.76:8093/ test 123456 我自己的服务器,请不要祸祸
功能:管理员新增用户,登录,新建文件夹,新建文件,复制文件,自动保存
主目录
修改文件
复制和删除
后台添加用户
drawio的资料在网上着实的少,翻来覆去 这两篇文章对我的帮助很大,
这两个文章要先看,我这里做补充说明。
首先 核心代码是 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"]
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 我没有改源码,这样会影响升级,所以将扩展 放到了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和增加方法,就可以在不改动源码的情况下实现二开了。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。