drawio持续改造过程记录

总想自己部署一个类似于processOn的流程图在线作图软件,找到了个很好的在线作图工具 drawIo
可惜他没有自带数据库和 用户登录等功能,也没有已存在图表的展示页面,
现在想稍微对其进行部分改造,最终效果参考 processOn
首先去github上 下载项目添加链接描述
一个很平常的web工程,精华都在weproot下的js里

查看index.js 有注释

/* *
		 * URL Parameters and protocol description are here:
		 *
		 * https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported
		 *
		 * Parameters for developers:
		 *
		 * - dev=1: For developers only
		 * - test=1: For developers only
		 * - export=URL for export: For developers only
		 * - ignoremime=1: For developers only (see DriveClient.js). Use Cmd-S to override mime.
		 * - createindex=1: For developers only (see etc/build/README)
		 * - filesupport=0: For developers only (see Editor.js in core)
		 * - savesidebar=1: For developers only (see Sidebar.js)
		 * - pages=1: For developers only (see Pages.js)
		 * - lic=email: For developers only (see LicenseServlet.java)
		 * --
		 * - networkshapes=1: For testing network shapes (temporary)
		 */

看起来在url后面加上dev=1 就是开发模式了(开发模式使用非压缩的js 这样才能研究和修改,这里非开发模式直接引用了一个app.min.js 4M的巨大js文件)
但是并没有这么简单,一F5就报错
跟踪代码 在判断dev的地方修改了js的导入 这里导入的url居然是网址

if (urlParams['dev'] == '1')
		{     
		      
			 // Used to request grapheditor/mxgraph sources in dev mode
			var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/mxgraph2';
			
			if (document.location.protocol == 'file:')
			{
				mxDevUrl = '../../mxgraph2';
				
				// Forces includes for dev environment in node.js
				mxForceIncludes = true;
			}

			var geBasePath = mxDevUrl + '/javascript/examples/grapheditor/www/js';
			var mxBasePath = mxDevUrl + '/javascript/src';
			
			// Used to request draw.io sources in dev mode
			var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/';
			
			mxscript(drawDevUrl + 'js/diagramly/Init.js');
			mxscript(geBasePath + '/Init.js');
			mxscript(mxDevUrl + '/javascript/src/js/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'); 
			
			
		}

全部修改掉,其中一些路径莫名其妙压根没思路,找 了guthub上的etc目录 找 build.xml看看是否有思路 build.xml是ant负责打包源码成war的配置文件

    build.properties的内容
jscompiler=${basedir}/compiler.jar
grapheditor.dir=${basedir}/../../src/main/webapp/js/mxgraph    
src.dir=${basedir}/../../src/main/java
war.dir=${basedir}/../../src/main/webapp
javac.dir=${war.dir}/WEB-INF/classes
build.dir=${basedir}/../../build
war.name=draw.war

大概有点明白了 ,修改如下

// Used to request grapheditor/mxgraph sources in dev mode
			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(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');

其中 mxClient居然到处找不到 ,好吧又在etc找到了,这是想干嘛 ,下载 放到mxClient下,下载要小心点 下载单个文件别下载成网页了. 至此顺利进入开发模式.睡觉