draw.io二次开发改造过程

draw.io是一个很好的作图工具，完全免费开源。
遵守Apache-2.0 License开源协议，
仓库地址：https://github.com/jgraph/drawio
官网演示地址：https://app.diagrams.net/
这里记录一下改造过程

静态访问

使用nginx直接映射到webapps目录下

server {
 listen 893;
    location / {
        alias D:\study\drawio\src\main\webapp/;
    }
}

然后访问地址http://localhost:893即可打开
在地址栏后面增加?dev=1可以打开调试模式，打开调试模式后页面不能显示是因为静态资源文件从drawio官方地址下载，需要做一些改动

修改静态文件源

根据地址栏请求，可知有些js文件是从devhost.jgraph.com这个地址请求的，因此在源码中全局搜索，看到index.html和teams.html文件中有相关地址声明

// Used to request grapheditor/mxgraph sources in dev mode
var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main';
// Used to request draw.io sources in dev mode
var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/';
var geBasePath = drawDevUrl + '/js/grapheditor';
var mxBasePath = mxDevUrl + '/mxgraph';

而相关请求文件在目录webapps下都有，因此改造如下

var drawDevUrl = '';
var mxDevUrl = '';

解决无用提示

此时已经可以访问，但是打开页面时会提示“[Dev] Bootstrap script change requires update of CSP”，这个不影响使用，不过还是要解决掉它。搜索这句提示文字，可以看到在D:\study\drawio\src\main\webapp\js\diagramly目录下有App.js和app.min.js两个文件，这里在开发模式下，我们只需要看未压缩的App.js文件，注释掉下面一段代码

if (scripts != null && scripts.length > 0)
{
	var content = mxUtils.getTextContent(scripts[0]);
	
	if (CryptoJS.MD5(content).toString() != 'b02227617087e21bd49f2faa15164112')
	{
		console.log('Change bootstrap script MD5 in the previous line:', CryptoJS.MD5(content).toString());
		alert('[Dev] Bootstrap script change requires update of CSP');
	}
}

将帮助中的搜索改为百度搜索

// this.editorUi.openLink('https://www.diagrams.net/search?src=' +
// 	EditorUi.isElectronApp? 'DESKTOP' : encodeURIComponent(location.host) + 
// 	'&search=' + encodeURIComponent(term));
this.editorUi.openLink('https://www.baidu.com/s?ie=UTF-8&wd=' + encodeURIComponent(term));

从url打开文件》重点

drawio自带的打开中就有从url中打开，但是用这种文件却总是打不开，分析代码了很久，回过头发现新打开的地址自动变成了https，导致我的http服务无法使用
更改方式就是把新窗口开头的https改为http，全路径是
http://172.16.201.206:893/#Uhttp://172.16.201.206:893/z/1.drawio
其实就是在页面后增加了个这#Uhttp://172.16.201.206:893/z/1.drawio

调通这个之后，想要在自己系统中嵌入就很好实现了

发布预览

默认的发布预览是跳转到了一个这样的地址
https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#R……
如果直接把前面的地址改成自己的部署地址，也是不能访问的。
经分析，这里是通过插件的方式实现的，于是
这里实际上是需要显式加载插件，把前面的那一段替换为http://172.16.201.206:893/?chrome=0&p=ex，即修改为
http://172.16.201.206:893/?chrome=0&p=ex&tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#R……
这样可以达到预览的效果

插件描述文档页面位于：https://www.diagrams.net/doc/faq/plugins

另外，如果觉得这个地址太长，可以参照前面编辑页面中的传参方式，把#R……换成#U地址，
全路径为：http://172.16.201.206:893/?chrome=0&p=ex&tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#Uhttp://172.16.201.206:893/z/1.drawio
就是用#R携带文件内容，#U携带文件路径

自定义存储和打开方式

以Drive和Dropbox为例分析，在diagramly下分别包含以下文件，这些文件要在app.js文件中使用

• Drive

src\main\webapp\js\diagramly\DriveClient.js
src\main\webapp\js\diagramly\DriveComment.js
src\main\webapp\js\diagramly\DriveFile.js
src\main\webapp\js\diagramly\DriveLibrary.js

• Dropbox

src\main\webapp\js\diagramly\DropboxClient.js
src\main\webapp\js\diagramly\DropboxFile.js
src\main\webapp\js\diagramly\DropboxLibrary.js

在此基础上进行自己存储逻辑的开发
ZnClient主要是与gitee服务端的交互，创建，获取，更新文件等操作。
ZnFile是提交的文件格式，每个类型对应一个文件格式，分别对应各自的属性。
ZnLibrary是自定义的库，暂时用不到。