DrawIO二次开发(一)

最近想基于DrawIO进行二次开发,目前还在探究阶段

即便你不想二次开发,对于经常使用processON的盆友们,自己部署这么一套DrawIO也是极好的,因为没有文件数的限制呀。

DrawIO二次开发(一)_第1张图片

万事开头难,想要二次开发,需要先在本地将代码跑起来,剩下的就是看代码撸代码了。我这里将展示intellij idea的配置方式。

一、导入项目到编译器

将DrawIO的代码clone到你本地,gitHub上的地址为https://github.com/jgraph/drawio,正常情况下速度比较慢,可以考虑其他的代码仓库,将下载完的代码导入到你心爱的IDE中。
DrawIO二次开发(一)_第2张图片

project structure配置如下

dependencies配置中,注意要把项目中的lib包导入进来,因为不是maven项目,所以需要手动导入,否则编译会飘红
DrawIO二次开发(一)_第3张图片

如果我没记错的话,上述步骤做完,代码就可以进行本地编译了,玩不转ant命令的可以参考下图操作,然后在右侧选择要执行的命令执行即可。这里可以先执行下javac编译下后台代码
DrawIO二次开发(一)_第4张图片

二、将项目部署到tomcat

项目跑起来的方法多种多样,我这里选择IDEA上集成好了的tomcat,简单方便。tomcat运行之前需要有几个配置如下图:
DrawIO二次开发(一)_第5张图片

DrawIO二次开发(一)_第6张图片

DrawIO二次开发(一)_第7张图片
上图中tomcat的配置基本完成,但是没有关联drawIO项目,这个配置是在Deployment这个tab页中进行操作,如下图
DrawIO二次开发(一)_第8张图片

最后运行tomcat,运行成功的话就可以通过浏览器访问服务了,如下图
DrawIO二次开发(一)_第9张图片

三、改代码并调试

二次开发总要改下代码的吧,你找了个js修改了下样式或者行为,刷新页面发现并没有生效。这时并不一定代表你改的文件不对。

DrawIO的调试模式需要在请求地址后添加参数dev=1,如:http://localhost:8080/drawio_war_exploded/?dev=1,这样在页面加载的时候是加载的未压缩的各个js等资源文件,而不是压缩过后的。

原因如下图
DrawIO二次开发(一)_第10张图片

添加dev=1之后不出意外你的页面会无法正常展示,打开浏览器的控制台你会发现飘红一片(如下图)。原因是因为加载的静态资源文件不是你本地的,是通过drawIO相关的一个网络地址加载的,这里我们需要将其改为加载我们本地的静态资源,不然改了文件怎么能即使生效?
DrawIO二次开发(一)_第11张图片

一顿操作猛如虎,涉及文件如下图
DrawIO二次开发(一)_第12张图片

index.html修改如下,我这里的修改比较 粗暴,只是为了能够临时调试即可,后期这部分代码是要还原的,当然你也可以更优雅的处理一下。
DrawIO二次开发(一)_第13张图片

有个比较核心的文件mxClient.js是放在etc目录下的,这个目录是不会被tomcat加载到的,所以我们把这个文件copy到drawio/src/main/webapp/js/目录下,使tomcat能够加载到它
DrawIO二次开发(一)_第14张图片

完成上述步骤,不出意外你的本地服务应该可以以调试方式展示了,然鹅你可能会有新的问题如下图

页面展示正常,但是菜单点击无反应,打开控制台查看是否有报错如果没有js报错,只是发现common.css这个样式文件没获取到,那就是这个文件没有加载到导致的,那我们来解决下这个问题
DrawIO二次开发(一)_第15张图片

简单分析如下:
针对src目录搜索common.css如下图,发现绿色部分正常,引用路径都正确,但是刚刚我们引入的mxClient这个文件在引用css/common.css文件的时候我们发现对应的路径下没有这个文件,而且mxClient这个文件不适合直接修改。这里最简单的办法就是把drawio/src/main/webapp/mxgraph/css/common.css这个文件copy一份到/drawio/src/main/webapp/css/目录下,然后刷新浏览器进行校验,如果菜单显示正常了,那么恭喜你,如果还是显示有问题,那么请留言,咱一起讨论讨论。
DrawIO二次开发(一)_第16张图片

至此,你可以欢快的撸代码了
DrawIO二次开发(一)_第17张图片

四、官方文档中的几个功能推荐

正常情况下文件导出为xml或者drawio的时候,你会发现文件中除了几个基本的xml节点,大部分被一段压缩的字符所占据,个人初步猜测是为了性能和数据保护进行的措施,但是不方便我们学习和理解其中的关系结构,怎么办呢?
DrawIO二次开发(一)_第18张图片

编辑绘图

https://support.draw.io/display/DO/Working+with+Metadata这个文档中有我们需要的答案
DrawIO二次开发(一)_第19张图片
看到这个图的时候,你就一目了然了,你在画板上的所有操作,都会在这个xml中有所体现,而且你可以通过直接操作这个xml,来反向体现到画板上
DrawIO二次开发(一)_第20张图片

取消压缩XML结构

有朋友会说,每次到这里来看太麻烦,能不能直接在导出的xml文件中直接进行查看呢?可以
反勾选掉下图中的已压缩选项,再导出文件,得到的就是未压缩的xml结构了
DrawIO二次开发(一)_第21张图片
未压缩的导出文件
DrawIO二次开发(一)_第22张图片

你可能感兴趣的:(java工具,DrawIO)