基于Draw-io做的二次开发
draw-io是我在做一个物联网平台项目用到的技术,因为当时需求要求组态相关,所以就去网上查了一通,最后发现还是draw-io是个比较全面。并且还是开源的
下载源码后研究源代码阶段
首先源码下载下来以后正常去先搞到本地部署起来,先运行起来看看里面的功能怎么样,这里关于初期源码的下载及部署 推荐一篇博客给大家 DrawIO二次开发(一)
这篇文章也是小编在刚开始要开发时,一头雾水的在网上找帖子后来发现的比较好的帖子啦!
关于项目集成结构
这块主要是我们前端做的 因为前端用的Vue 所以最终的集成也就交给前端了 看样子也就是将drawio相关的前端代码放到webapp中的内容加到原有的前端项目中去了。
关于后端代码,这里不建议用自带的后端代码
关于后端代码,源码看起来太冗杂
开始下手是修改
主要改动还是动webapp下的js文件的 然后后端配合相应的接口
这里列举几个我们改动的地方对应的效果变化
修改 页面加载后,自动创建文件
\webapp\js\diagramly\App.js 3211行
var _data = urlParams['zr_data'];//绘图数据
var _filename = urlParams['zr_filename'];//绘图名称
var prev = Editor.useLocalStorage;
this.createFile(_filename, _data, null, null, null, null, null,
urlParams['local'] != '1');
Editor.useLocalStorage = prev;
修改 是否自动保存:
\webapp\js\diagramly\DrawioFile.js 1903行
var _autosave = false;//true 自动保存,false 不自动保存
if (_autosave)//this.isAutosave()) edit by conan
\webapp\js\diagramly\LocalFile.js 129行
加个ajax请求可将绘图信息保存到数据库 具体代码就不展示了 大致位置就在这 可以自行研究
将几个菜单按钮都隐藏掉:js/mxgragh/Menus.js
更改代码:
/**
* Sets the default font size.
* 这里将默认菜单项改为空集合
*/
//Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras', 'help'];
Menus.prototype.defaultMenuItems = [];
用户个人图库功能,从数据库中读出该用户下的图片信息,拼装好并写入前端数据库
总体更改了 菜单栏的显示状态 以及注掉了一些功能、便签笺修改为可保存到本地数据库的个人图库、将绘图信息保存到本地数据库、可给元素绑定属性(实现保存数据到数据库)、预览功能的实现等
由于是20年时刚入行做的一个项目,印象也不是很深了,好在是当时做的时候自己用文档记录了
文档链接我放到下方了: