SpringBoot项目基于Draw-io做的二次开发

基于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年时刚入行做的一个项目，印象也不是很深了，好在是当时做的时候自己用文档记录了
文档链接我放到下方了：