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下,下載要小心點 下載單個文件別下載成網頁了. 至此順利進入開發模式.睡覺