drawio 二次开发

目的：

使用drawIO, 进行绘图，
然后保存的时候，存到MySQL，
下次打开的时候，可以遍历MySQL的所有文件，
点击指定文件，可以在新的画布上展示已有的绘图

step1:

开发环境：

默认使用tomcat 部署：

改造成spring boot 部署…

Tomcat的包

ｊｓ 改造

获取当前文件：

1. 访问的时候，添加？dev=1 进入开发模式

2. 保存文件的函数 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:

1. 创建画布，真的是看不懂他的js了…
2. 改造成spring boot 项目，这个简单…

END