目的：
使用drawIO, 进行绘图，
然后保存的时候，存到MySQL，
下次打开的时候，可以遍历MySQL的所有文件，
点击指定文件，可以在新的画布上展示已有的绘图
step1:
开发环境：
默认使用tomcat 部署：
改造成spring boot 部署…
Tomcat的包
获取当前文件：
访问的时候，添加？dev=1 进入开发模式
保存文件的函数 App.save
App.prototype.save = function(name, done)
{
var file = this.getCurrentFile();
console.log(file); // 这个file是 我们最终的file 获取对象
if (file != null && this.spinner.spin(document.body, mxResources.get('saving')))
{
this.editor.setStatus('');
if (this.editor.graph.isEditing())
{
this.editor.graph.stopEditing();
}
.......
加载已有的画布到新的画布上
App.prototype.showSplash = function(force)
{
//Splash dialog shouldn't be shownn when running without a file menu
if (urlParams['noFileMenu'] == '1')
{
return;
}
............................................ 一些代码忽略不写
});
if (this.editor.isChromelessView())
{
this.handleError({message: mxResources.get('noFileSelected')},
mxResources.get('errorLoadingFile'), mxUtils.bind(this, function()
{
this.showSplash();
}));
}
/**
* 如果有URL上 有 id，表示打开了一个存在的文档，进入编辑模式
*/
else if (urlParams['id']) {
const mockFile = {
title: 'luffyzh.drawio',
data: '<mxfile host="localhost" modified="2021-09-02T09:50:39.574Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36" etag="PyBU88KGLdBE5FU7fpPf" version="@DRAWIO-VERSION@" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNfE7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTeVcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgUFMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTyeg2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnktvi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxtzQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBADL1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=</diagram></mxfile>'
}
const file = new LocalFile(this, mockFile.data, mockFile.title, this.mode);
this.loadFile(`-1`, true, file);
}
else if (!mxClient.IS_CHROMEAPP && (this.mode == null || force))
{
var rowLimit = (serviceCount == 4) ? 2 : 3;
var dlg = new StorageDialog(this, mxUtils.bind(this, function()
{
this.hideDialog();
showSecondDialog();
}), rowLimit);
// 展示框，存储位置选择框的弹出
this.showDialog(dlg.container, (rowLimit < 3) ? 200 : 300,
((serviceCount > 3) ? 320 : 210), true, false);
}
else if (urlParams['create'] == null)
{
// 调试，不展示存储位置...
// showSecondDialog();
}
};
所以，现在有什么了？
1 保存画布到MySQL
2 加载已有的图形到画布上
3 展示所有的图形（跟drawio 无关，list mysql 数据即可.通过id 加载到drawio 画布上）
还缺什么？
创建新的画布，屏蔽掉所有的弹出框
即理想流程是：
创建画布-> 编辑图形-> 保存图形
查询图形列表-> 加载图形 -> 编辑图形->保存图形
删除图形
加粗的是没有的，斜体是已经有的或可复用的
白色是简单的
TODO:
- 创建画布，真的是看不懂他的js了…
- 改造成spring boot 项目，这个简单…
END