drawio二次开发

记录一下 二次开发drawio的过程

首先要说一下 drawio 这个东西是真的很强大，由于公司业务的发展，需要用到或者界面编辑工具，话不多说直接刚。

首先先去将项目搭建起来，我搭建过程是在Ubuntu下搭建的，搭建过程很简单，打包编译成war包后运行在tomcat下面就可以了。这里就不详细讲搭建过程了，具体自己搜索一下  网上搭建教程很多，操作很简单。下面我主要讲一下 怎么进入到开发者模式去开发调试。

在index.html 文件中   urlParams['dev'] == '1'  这里改成一下的代码，这里我也是看到网上的大佬改的  具体如下

if (urlParams['dev'] == '1')
		{
			var mxDevUrl = document.location.origin+document.location.pathname; 
			if (document.location.protocol == 'file:')
			{
			mxDevUrl = '../../mxgraph2';

			// Forces includes for dev environment in node.js
			mxForceIncludes = true;
			}

			var geBasePath = mxDevUrl + 'js/mxgraph/';
			//mx盲猜就是 mxgraph
			var mxBasePath = mxDevUrl + 'js/mxgraph/';

			// Used to request draw.io sources in dev mode
			var drawDevUrl = mxDevUrl;

			mxscript(drawDevUrl + 'js/diagramly/Init.js');
			mxscript(geBasePath + 'Init.js');
			mxscript(geBasePath + 'jquery-3.4.1.js');
			mxscript(mxDevUrl + 'js/mxgraph/mxClient.js');

			// Adds all JS code that depends on mxClient. This indirection via Devel.js is
			// required in some browsers to make sure mxClient.js (and the files that it
			// loads asynchronously) are available when the code loaded in Devel.js runs.
			mxscript(drawDevUrl + 'js/diagramly/Devel.js');
			mxscript(drawDevUrl + 'js/PostConfig.js');
		}

注意这里我还额外的引用了 jquery-3.4.1.js 文件，方便以后改代码，这样就可以不用原生的js去写，比较方便。讲jq这个文件放到js/mxgraph/文件夹下面就可以了。弄好以后 就访问地址  http://127.0.0.1:80/draw?dev=1 就可以了，这里还有一个问题，就是会提醒 有文件找不到，这里就讲mxClient.js 赋值到js/mxgraph/下吗面就可以了，css样式也是一样。这样就顺利的进入到开发者模式了。开发者模式加载比较慢，因为要加载很多js的文件，正式部署的时候，是需要重新打包的，这样会快很多,js也是被压缩过的**.min.js。打包的时候很简单，将你改过的js文件 替换掉重新打包就可以了。

注意一下，在开发者模式的时候，可以不重新打包，只需要在tomcat的webapp下找到你对用的js文件替换掉就可以了，但是需要清楚缓存重新加载才会将新的js文件拉取下来，或者进入到无痕模式。

然后再来说一说，怎么去修改源码，首先修改源码的前提条件是先找到源码的位置。

1 全局搜索关键字，对于**.min.js的文件可以忽略不看，这些都是打包过的，分析很困难

2 断点调试 我用的是谷歌浏览器 调试方式请自行百度

3 Elements 的改变的断点调试，自行百度。

 

qq：2318240836