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

基于Draw-io做的二次开发

draw-io是我在做一个物联网平台项目用到的技术,因为当时需求要求组态相关,所以就去网上查了一通,最后发现还是draw-io是个比较全面。并且还是开源的

下载源码后研究源代码阶段

首先源码下载下来以后正常去先搞到本地部署起来,先运行起来看看里面的功能怎么样,这里关于初期源码的下载及部署 推荐一篇博客给大家 DrawIO二次开发(一)
这篇文章也是小编在刚开始要开发时,一头雾水的在网上找帖子后来发现的比较好的帖子啦!

关于项目集成结构

这块主要是我们前端做的 因为前端用的Vue 所以最终的集成也就交给前端了 看样子也就是将drawio相关的前端代码放到webapp中的内容加到原有的前端项目中去了。
SpringBoot项目基于Draw-io做的二次开发_第1张图片

关于后端代码,这里不建议用自带的后端代码

关于后端代码,源码看起来太冗杂
SpringBoot项目基于Draw-io做的二次开发_第2张图片

开始下手是修改

主要改动还是动webapp下的js文件的 然后后端配合相应的接口
这里列举几个我们改动的地方对应的效果变化
\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 = [];

总体更改了 菜单栏的显示状态 以及注掉了一些功能、便签笺修改为可保存到本地数据库的个人图库、将绘图信息保存到本地数据库、可给元素绑定属性(实现保存数据到数据库)、预览功能的实现等

你可能感兴趣的:(SpringBoot项目基于Draw-io做的二次开发)