wip: 统一修改为layui

@@ -9,7 +9,7 @@
 	<meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
 	<meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
 	<meta itemprop="description" content="diagrams.net is a free online diagramming application  and flowchart maker . You can use it to create UML, entity relationship,
-		org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic 
+		org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
 		circuit and social network diagrams.">
 	<meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -17,18 +17,25 @@
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="theme-color" content="#d89000">
 	<script src="./plugins/axios.min.js"></script>
-	<script src="./js/jquery/jquery-3.3.1.min.js"></script>
-	<script src="./js/jquery.easyui.min.js"></script>
+<!--	<script src="./js/jquery/jquery-3.3.1.min.js"></script>-->
+<!--	<script src="./js/jquery.easyui.min.js"></script>-->
 	<link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css" integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 	<script src="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/layui.min.js" integrity="sha512-EKrFvch3qTzLFQgjbcjpsRmF8T3UCtc9ojtMAu6dvvP+bV8qYUDOaQ84nwYCkSLT7lbqGoya/Kf+8fyCBE0vRg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	
+
+	<!-- 引入修改样式	-->
+	<link rel="stylesheet" href="./styles/formatChange.css">
+
 	<!-- 引入select.zTree及相关依赖 -->
-	<link rel="stylesheet" href="./styles/zTreeStyle.css" type="text/css">
-	<link rel="stylesheet" href="./styles/jquery.select.zTree.v1.5.css" type="text/css">
-	<script type="text/javascript" src="./js/jquery.ztree.core.min.js"></script>
-	<script type="text/javascript" src="./js/jquery.ztree.exhide.min.js"></script>
-	<script type="text/javascript" src="./js/jquery.select.zTree.v1.5.min.js"></script>
+<!--	<link rel="stylesheet" href="./styles/zTreeStyle.css" type="text/css">-->
+<!--	<link rel="stylesheet" href="./styles/jquery.select.zTree.v1.5.css" type="text/css">-->
+<!--	<script type="text/javascript" src="./js/jquery.ztree.core.min.js"></script>-->
+<!--	<script type="text/javascript" src="./js/jquery.ztree.exhide.min.js"></script>-->
+<!--	<script type="text/javascript" src="./js/jquery.select.zTree.v1.5.min.js"></script>-->
+
+<!-- Axios	-->
 	<script src="./plugins/defHttp.js"></script>
+	
+	<script src="./js/api/index.js"></script>
 
 	<script type="text/javascript">
 		/**
@@ -54,27 +61,27 @@
 		{
 			var result = new Object();
 			var params = window.location.search.slice(1).split('&');
-			
+
 			for (var i = 0; i < params.length; i++)
 			{
 				var idx = params[i].indexOf('=');
-				
+
 				if (idx > 0)
 				{
 					result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
 				}
 			}
-			
+
 			return result;
 		})();
-		
+
 		// Forces CDN caches by passing URL parameters via URL hash
 		if (window.location.hash != null && window.location.hash.substring(0, 2) == '#P')
 		{
 			try
 			{
 				urlParams = JSON.parse(decodeURIComponent(window.location.hash.substring(2)));
-				
+
 				if (urlParams.hash != null)
 				{
 					window.location.hash = urlParams.hash;
@@ -85,7 +92,7 @@
 				// ignore
 			}
 		}
-		
+
 		// Global variable for desktop
 		var mxIsElectron = window && window.process && window.process.type;
 
@@ -95,21 +102,21 @@
 			(function()
 			{
 				var proto = window.location.protocol;
-				
+
 				if (!mxIsElectron)
 				{
 					var host = window.location.host;
-		
+
 					// Redirects apex, drive and rt to www
 					if (host === 'draw.io' || host === 'rt.draw.io' || host === 'drive.draw.io')
 					{
 						host = 'www.draw.io';
 					}
-					
+
 					var href = proto + '//' + host + window.location.href.substring(
 							window.location.protocol.length +
 							window.location.host.length + 2);
-		
+
 					// Redirects if href changes
 					if (href != window.location.href)
 					{
@@ -118,7 +125,7 @@
 				}
 			})();
 		}
-		
+
 		/**
 		 * Adds meta tag to the page.
 		 */
@@ -127,15 +134,15 @@
 			try
 			{
 				var s = document.createElement('meta');
-				
-				if (name != null) 
+
+				if (name != null)
 				{
 					s.setAttribute('name', name);
 				}
 
 				s.setAttribute('content', content);
-				
-				if (httpEquiv != null) 
+
+				if (httpEquiv != null)
 				{
 					s.setAttribute('http-equiv', httpEquiv);
 				}
@@ -148,14 +155,14 @@
 				// ignore
 			}
 		};
-		
+
 		/**
 		 * Synchronously adds scripts to the page.
 		 */
 		function mxscript(src, onLoad, id, dataAppKey, noWrite)
 		{
 			var defer = onLoad == null && !noWrite;
-			
+
 			if ((urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") ||
 				onLoad != null || noWrite)
 			{
@@ -168,16 +175,16 @@
 				{
 					s.setAttribute('id', id);
 				}
-				
+
 				if (dataAppKey != null)
 				{
 					s.setAttribute('data-app-key', dataAppKey);
 				}
-				
+
 				if (onLoad != null)
 				{
 					var r = false;
-				
+
 					s.onload = s.onreadystatechange = function()
 					{
 						if (!r && (!this.readyState || this.readyState == 'complete'))
@@ -187,9 +194,9 @@
 						}
 				  	};
 				}
-			  	
+
 			  	var t = document.getElementsByTagName('script')[0];
-			  	
+
 			  	if (t != null)
 			  	{
 			  		t.parentNode.insertBefore(s, t);
@@ -211,11 +218,11 @@
 			g.type = 'text/javascript';
 			g.async = true;
 			g.src = src;
-			
+
 		    var s = document.getElementsByTagName('script')[0];
 		    s.parentNode.insertBefore(g, s);
 		};
-		
+
 		/**
 		 * Adds meta tags with application name (depends on offline URL parameter)
 		 */
@@ -230,10 +237,10 @@
 				mxmeta(null, 'default-src \'self\' \'unsafe-inline\'; connect-src \'self\' https://*.draw.io https://fonts.googleapis.com https://fonts.gstatic.com; img-src * data:; media-src *; font-src *; style-src-elem \'self\' \'unsafe-inline\' https://fonts.googleapis.com', 'Content-Security-Policy');
 			}
 		})();
-		
+
 		// Checks for local storage
 		var isLocalStorage = false;
-		
+
 		try
 		{
 			isLocalStorage = urlParams['local'] != '1' && typeof(localStorage) != 'undefined';
@@ -244,15 +251,15 @@
 		}
 
 		var mxScriptsLoaded = false, mxWinLoaded = false;
-		
+
 		function checkAllLoaded()
 		{
 			if (mxScriptsLoaded && mxWinLoaded)
 			{
-				App.main();				
+				App.main();
 			}
 		};
-		
+
 		var t0 = new Date();
 
 		// Changes paths for local development environment
@@ -260,18 +267,18 @@
 		{
 			// Used to request grapheditor/mxgraph sources in dev mode
 			var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main';
-			
+
 			// Used to request draw.io sources in dev mode
 			var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/';
 			var geBasePath = drawDevUrl + '/js/grapheditor';
 			var mxBasePath = mxDevUrl + '/mxgraph';
-			
+
 			if (document.location.protocol == 'file:')
 			{
 				geBasePath = './js/grapheditor';
 				mxBasePath = './mxgraph';
 				drawDevUrl = './';
-				
+
 				// Forces includes for dev environment in node.js
 				mxForceIncludes = true;
 			}
@@ -287,19 +294,19 @@
 			mxscript(drawDevUrl + 'js/diagramly/Init.js');
 			mxscript(geBasePath + '/Init.js');
 			mxscript(mxBasePath + '/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');
-			
+
 			// Electron
 			if (mxIsElectron)
 			{
 				mxscript('js/diagramly/DesktopLibrary.js');
 				mxscript('js/diagramly/ElectronApp.js');
 			}
-			
+
 			mxscript(drawDevUrl + 'js/PostConfig.js');
 		}
 		else
@@ -307,18 +314,18 @@
 			(function()
 			{
 				var hostName = window.location.hostname;
-				
+
 				// Supported domains are *.draw.io and the packaged version in Quip
 				var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
 					(hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
-				
+
 				function loadAppJS()
 				{
 					mxscript('js/app.min.js', function()
 					{
 						mxScriptsLoaded = true;
 						checkAllLoaded();
-						
+
 						// Electron
 						if (mxIsElectron)
 						{
@@ -345,7 +352,7 @@
 						}
 					});
 				};
-				
+
 				if (!supportedDomain || mxIsElectron)
 				{
 					mxscript('js/PreConfig.js', loadAppJS);
@@ -361,7 +368,7 @@
 		window.onerror = function()
 		{
 			var status = document.getElementById('geStatus');
-			
+
 			if (status != null)
 			{
 				status.innerHTML = 'Page could not be loaded. Please try refreshing.';
@@ -461,7 +468,7 @@ if (navigator.userAgent != null && navigator.userAgent.toLowerCase().
 {
 	// Redirects old Electron app to latest version
 	var div = document.getElementById('geInfo');
-	
+
 	if (div != null)
 	{
 		div.innerHTML = '<center><h2>You are using an out of date version of this app.<br>Please download the latest version ' +

+class ConfigurationNodeApi {
+  /**
+   * @description 获取组态信息
+   * @param {'CONFIGURE' | 'CONTENT' | 'NODE'} levelType - 组态资源类型
+   * @param {string} levelId - 组态资源ID
+   */
+  static getConfigurationInfo = async (levelType, levelId) => {
+    return await defHttp.get(`/yt/configuration/node/${levelType}/${levelId}`)
+  }
+
+  /**
+   * @description 编辑数据交互
+   */
+  static updateConfigurationNodeEvent() {
+
+  }
+
+  /**
+   * @description 获取组织节点树
+   * @returns 
+   */
+  static getOrgTree = async () => {
+    return await defHttp.get('/yt/organization/me/list')
+  }
+}

@@ -16,14 +16,14 @@ App = function(editor, container, lightbox)
 	EditorUi.call(this, editor, container, (lightbox != null) ? lightbox :
 		(urlParams['lightbox'] == '1' || (uiTheme == 'min' &&
 		urlParams['chrome'] != '0')));
-	
+
 	// Logs unloading of window with modifications for Google Drive file
 	if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp)
 	{
 		window.onunload = mxUtils.bind(this, function()
 		{
 			var file = this.getCurrentFile();
-			
+
 			if (file != null && file.isModified())
 			{
 				var evt = {category: 'DISCARD-FILE-' + file.getHash(),
@@ -39,7 +39,7 @@ App = function(editor, container, lightbox)
 					'-change_' + ((file.lastChanged != null) ? Math.round((Date.now() - file.lastChanged.getTime()) / 1000) : 'x') +
 					'-alive_' + Math.round((Date.now() - App.startTime.getTime()) / 1000),
 					label: (file.sync != null) ? ('client_' + file.sync.clientId) : 'nosync'};
-					
+
 				if (file.constructor == DriveFile && file.desc != null && this.drive != null)
 				{
 					evt.label += ((this.drive.user != null) ? ('-user_' + this.drive.user.id) : '-nouser') + '-rev_' +
@@ -56,7 +56,7 @@ App = function(editor, container, lightbox)
 	this.editor.addListener('autosaveChanged', mxUtils.bind(this, function()
 	{
 		var file = this.getCurrentFile();
-		
+
 		if (file != null)
 		{
 			EditorUi.logEvent({category: ((this.editor.autosave) ? 'ON' : 'OFF') +
@@ -64,7 +64,7 @@ App = function(editor, container, lightbox)
 				label: 'autosave_' + ((this.editor.autosave) ? 'on' : 'off')});
 		}
 	}));
-	
+
 	// Pre-fetches images
 	if (mxClient.IS_SVG)
 	{
@@ -75,7 +75,7 @@ App = function(editor, container, lightbox)
 		var img = new Image();
 		img.src = mxGraph.prototype.warningImage.src;
 	}
-	
+
 	// Global helper method to deal with popup blockers
 	window.openWindow = mxUtils.bind(this, function(url, pre, fallback)
 	{
@@ -84,9 +84,9 @@ App = function(editor, container, lightbox)
 			fallback();
 			return;
 		}
-		
+
 		var wnd = null;
-		
+
 		try
 		{
 			wnd = window.open(url);
@@ -95,7 +95,7 @@ App = function(editor, container, lightbox)
 		{
 			// ignore
 		}
-		
+
 		if (wnd == null || wnd === undefined)
 		{
 			this.showDialog(new PopupDialog(this, url, pre, fallback).container, 320, 140, true, true);
@@ -118,7 +118,7 @@ App = function(editor, container, lightbox)
 		{
 			window.openFile.cancel(true);
 		}
-		
+
 		this.handleError(message);
 	});
 
@@ -127,7 +127,7 @@ App = function(editor, container, lightbox)
 	{
 		this.addFileDropHandler([document]);
 	}
-	
+
 	// Process the queue for waiting plugins
 	if (App.DrawPlugins != null)
 	{
@@ -150,7 +150,7 @@ App = function(editor, container, lightbox)
 				this.initializeEmbedMode();
 			}
 		}
-		
+
 		// Installs global callback for plugins
 		window.Draw.loadPlugin = mxUtils.bind(this, function(callback)
 		{
@@ -164,7 +164,7 @@ App = function(editor, container, lightbox)
 				this.initializeEmbedMode();
 			}
 		});
-		
+
 		//Set a timeout in case a plugin doesn't load quickly or doesn't load at all
 		setTimeout(mxUtils.bind(this, function()
 		{
@@ -292,7 +292,7 @@ App.PUSHER_CLUSTER = 'eu';
 App.PUSHER_URL = 'https://js.pusher.com/7.0.3/pusher.min.js';
 
 /**
- * SimplePeer library 
+ * SimplePeer library
  */
  App.SIMPLE_PEER_URL = window.DRAWIO_BASE_URL + '/js/simplepeer/simplepeer9.10.0.min.js';
 
@@ -300,11 +300,11 @@ App.PUSHER_URL = 'https://js.pusher.com/7.0.3/pusher.min.js';
  * Google APIs to load. The realtime API is needed to notify collaborators of conversion
  * of the realtime files, but after Dec 11 it's read-only and hence no longer needed.
  */
-App.GOOGLE_APIS = 'drive-share'; 
+App.GOOGLE_APIS = 'drive-share';
 
 /**
  * Function: authorize
- * 
+ *
  * Authorizes the client, gets the userId and calls <open>.
  */
 App.startTime = new Date();
@@ -316,7 +316,7 @@ App.startTime = new Date();
 App.pluginRegistry = {'4xAKTrabTpTzahoLthkwPNUn': 'plugins/explore.js',
 	'ex': 'plugins/explore.js', 'p1': 'plugins/p1.js',
 	'ac': 'plugins/connect.js', 'acj': 'plugins/connectJira.js',
-	'ac148': 'plugins/cConf-1-4-8.js', 'ac148cmnt': 'plugins/cConf-comments.js', 
+	'ac148': 'plugins/cConf-1-4-8.js', 'ac148cmnt': 'plugins/cConf-comments.js',
 	'voice': 'plugins/voice.js',
 	'tips': 'plugins/tooltips.js', 'svgdata': 'plugins/svgdata.js',
 	'electron': 'plugins/electron.js',
@@ -360,7 +360,7 @@ App.publicPlugin = [
 App.loadScripts = function(scripts, onload)
 {
 	var n = scripts.length;
-	
+
 	for (var i = 0; i < scripts.length; i++)
 	{
 		mxscript(scripts[i], function()
@@ -375,34 +375,34 @@ App.loadScripts = function(scripts, onload)
 
 /**
  * Function: getStoredMode
- * 
+ *
  * Returns the current mode.
  */
 App.getStoredMode = function()
 {
 	var mode = null;
-	
+
 	if (mode == null && isLocalStorage)
 	{
 		mode = localStorage.getItem('.mode');
 	}
-	
+
 	if (mode == null && typeof(Storage) != 'undefined')
 	{
 		var cookies = document.cookie.split(";");
-		
+
 		for (var i = 0; i < cookies.length; i++)
 		{
 			// Removes spaces around cookie
 			var cookie = mxUtils.trim(cookies[i]);
-			
+
 			if (cookie.substring(0, 5) == 'MODE=')
 			{
 				mode = cookie.substring(5);
 				break;
 			}
 		}
-		
+
 		if (mode != null && isLocalStorage)
 		{
 			// Moves to local storage
@@ -412,7 +412,7 @@ App.getStoredMode = function()
 			localStorage.setItem('.mode', mode);
 		}
 	}
-	
+
 	return mode;
 };
 
@@ -430,16 +430,16 @@ App.getStoredMode = function()
 			{
 				urlParams['mode'] = 'dropbox';
 			}
-			
+
 			App.mode = urlParams['mode'];
 		}
-			
+
 		if (App.mode == null)
 		{
 			// Stored mode overrides preferred mode
 			App.mode = App.getStoredMode();
 		}
-		
+
 		/**
 		 * Lazy loading backends.
 		 */
@@ -474,7 +474,7 @@ App.getStoredMode = function()
 						window.DriveClient = null;
 					}
 				}
-	
+
 				// Loads dropbox for all browsers but IE8 and below (no CORS) if not disabled or if enabled and in embed mode
 				// KNOWN: Picker does not work in IE11 (https://dropbox.zendesk.com/requests/1650781)
 				if (typeof window.DropboxClient === 'function')
@@ -490,7 +490,7 @@ App.getStoredMode = function()
 							{
 								// Must load this after the dropbox SDK since they use the same namespace
 								mxscript(App.DROPINS_URL, null, 'dropboxjs', App.DROPBOX_APPKEY, true);
-							});							
+							});
 						}
 						else if (urlParams['chrome'] == '0')
 						{
@@ -503,7 +503,7 @@ App.getStoredMode = function()
 						window.DropboxClient = null;
 					}
 				}
-				
+
 				// Loads OneDrive for all browsers but IE6/IOS if not disabled or if enabled and in embed mode
 				if (typeof window.OneDriveClient === 'function')
 				{
@@ -528,7 +528,7 @@ App.getStoredMode = function()
 						window.OneDriveClient = null;
 					}
 				}
-				
+
 				// Loads Trello for all browsers but < IE10 if not disabled or if enabled and in embed mode
 				if (typeof window.TrelloClient === 'function')
 				{
@@ -584,7 +584,7 @@ App.clearServiceWorker = function(success)
 
 /**
  * Program flow starts here.
- * 
+ *
  * Optional callback is called with the app instance.
  */
 let defHttp;
@@ -613,28 +613,28 @@ App.main = function(callback, createUi)
 		/aj\.draw\.io$/.test(window.location.hostname)))
 	{
 		document.body.innerHTML = '<div style="margin-top:10%;text-align:center;">Stand-alone mode not allowed for this domain.</div>';
-		
+
 		return;
 	}
-	
+
 	// Removes info text in embed mode
 	if (urlParams['embed'] == '1' || urlParams['lightbox'] == '1')
 	{
 		var geInfo = document.getElementById('geInfo');
-		
+
 		if (geInfo != null)
 		{
 			geInfo.parentNode.removeChild(geInfo);
 		}
 	}
-	
+
 	// Redirects to the latest AWS icons
 	if (document.referrer != null && urlParams['libs'] == 'aws3' &&
 		document.referrer.substring(0, 42) == 'https://aws.amazon.com/architecture/icons/')
 	{
 		urlParams['libs'] = 'aws4';
 	}
-	
+
 	if (window.mxscript != null)
 	{
 		// Checks for script content changes to avoid CSP errors in production
@@ -642,7 +642,7 @@ App.main = function(callback, createUi)
 			CryptoJS != null && App.mode != App.MODE_DROPBOX && App.mode != App.MODE_TRELLO)
 		{
 			var scripts = document.getElementsByTagName('script');
-			
+
 			// Checks bootstrap script
 			if (scripts != null && scripts.length > 0)
 			{
@@ -655,13 +655,14 @@ App.main = function(callback, createUi)
 					alert('[Dev] Bootstrap script change requires update of CSP');
 				}
 			}
-			
+
 			// Checks main script
 			if (scripts != null && scripts.length > 1)
 			{
 				var content = mxUtils.getTextContent(scripts[scripts.length - 1]);
-				
-				if (CryptoJS.MD5(content).toString() != 'd53805dd6f0bbba2da4966491ca0a505')
+
+				// if (CryptoJS.MD5(content).toString() != 'd53805dd6f0bbba2da4966491ca0a505')
+				if (CryptoJS.MD5(content).toString() != '4559a92176e60ec27e523711c8ea01ac')
 				{
 					console.log('Change main script MD5 in the previous line:', CryptoJS.MD5(content).toString());
 					alert('[Dev] Main script change requires update of CSP');
@@ -697,7 +698,7 @@ App.main = function(callback, createUi)
 				console.error(e);
 			}
 		}
-		
+
 		// Loads Pusher API
 		if (('ArrayBuffer' in window) && !mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp &&
 			DrawioFile.SYNC == 'auto' && (urlParams['embed'] != '1' ||
@@ -707,20 +708,20 @@ App.main = function(callback, createUi)
 		{
 			// TODO: Check if async loading is fast enough
 			mxscript(App.PUSHER_URL);
-			
+
 			if (urlParams['fast-sync'] == '1')
 			{
 				mxscript(App.SIMPLE_PEER_URL);
 			}
 		}
-		
+
 		// Loads plugins
 		if (urlParams['plugins'] != '0' && urlParams['offline'] != '1')
 		{
 			// mxSettings is not yet initialized in configure mode, redirect parameter
 			// to p URL parameter in caller for plugins in embed mode
 			var plugins = (mxSettings.settings != null) ? mxSettings.getPlugins() : null;
-			
+
 			// Configured plugins in embed mode with configure=1 URL should be loaded so we
 			// look ahead here and parse the config to fetch the list of custom plugins
 			if (mxSettings.settings == null && isLocalStorage && typeof(JSON) !== 'undefined')
@@ -728,7 +729,7 @@ App.main = function(callback, createUi)
 				try
 				{
 					var temp = JSON.parse(localStorage.getItem(mxSettings.key));
-					
+
 					if (temp != null)
 					{
 						plugins = temp.plugins;
@@ -748,15 +749,15 @@ App.main = function(callback, createUi)
 				// Mapping from key to URL in App.plugins
 				App.loadPlugins(temp.split(';'));
 			}
-			
+
 			if (plugins != null && plugins.length > 0 && urlParams['plugins'] != '0')
 			{
-				// Loading plugins inside the asynchronous block below stops the page from loading so a 
+				// Loading plugins inside the asynchronous block below stops the page from loading so a
 				// hardcoded message for the warning dialog is used since the resources are loadd below
 				var warning = 'The page has requested to load the following plugin(s):\n \n {1}\n \n Would you like to load these plugin(s) now?\n \n NOTE : Only allow plugins to run if you fully understand the security implications of doing so.\n';
 				var tmp = window.location.protocol + '//' + window.location.host;
 				var local = true;
-				
+
 				for (var i = 0; i < plugins.length && local; i++)
 				{
 					if (plugins[i].charAt(0) != '/' && plugins[i].substring(0, tmp.length) != tmp)
@@ -764,7 +765,7 @@ App.main = function(callback, createUi)
 						local = false;
 					}
 				}
-				
+
 				if (local || mxUtils.confirm(mxResources.replacePlaceholders(warning, [plugins.join('\n')]).replace(/\\n/g, '\n')))
 				{
 					for (var i = 0; i < plugins.length; i++)
@@ -775,12 +776,12 @@ App.main = function(callback, createUi)
 							{
 								App.pluginsLoaded[plugins[i]] = true;
 								App.embedModePluginsCount++;
-								
+
 								if (plugins[i].charAt(0) == '/')
 								{
 									plugins[i] = PLUGINS_BASE_PATH + plugins[i];
 								}
-								
+
 								mxscript(plugins[i]);
 							}
 						}
@@ -792,7 +793,7 @@ App.main = function(callback, createUi)
 				}
 			}
 		}
-		
+
 		// Loads gapi for all browsers but IE8 and below if not disabled or if enabled and in embed mode
 		// Special case: Cannot load in asynchronous code below
 		if (typeof window.DriveClient === 'function' &&
@@ -808,7 +809,7 @@ App.main = function(callback, createUi)
 			window.DriveClient = null;
 		}
 	}
-	
+
 	/**
 	 * Asynchronous MathJax extension.
 	 */
@@ -827,7 +828,7 @@ App.main = function(callback, createUi)
 		{
 			// Adds bundle text to resources
 			mxResources.parse(xhr[0].getText());
-			
+
 			// Configuration mode
 			if (isLocalStorage && localStorage != null && window.location.hash != null &&
 				window.location.hash.substring(0, 9) == '#_CONFIG_')
@@ -835,12 +836,12 @@ App.main = function(callback, createUi)
 				try
 				{
 					var trustedPlugins = {};
-					
+
 					for (var key in App.pluginRegistry)
 					{
 						trustedPlugins[App.pluginRegistry[key]] = true;
 					}
-					
+
 					// Only allows trusted plugins
 					function checkPlugins(plugins)
 					{
@@ -854,46 +855,46 @@ App.main = function(callback, createUi)
 								}
 							}
 						}
-						
+
 						return true;
 					};
-					
+
 					var value = JSON.parse(Graph.decompress(window.location.hash.substring(9)));
 
 					if (value != null && checkPlugins(value.plugins))
 					{
 						EditorUi.debug('Setting configuration', JSON.stringify(value));
-						
+
 						if (value.merge != null)
 						{
 							var temp = localStorage.getItem(Editor.configurationKey);
-							
+
 							if (temp != null)
 							{
-								
+
 								try
 								{
 									var config = JSON.parse(temp);
-									
+
 									for (var key in value.merge)
 									{
 										config[key] = value.merge[key];
 									}
-									
-									value = config;	
+
+									value = config;
 								}
 								catch (e)
 								{
 									window.location.hash = '';
 									alert(e);
-								}								
+								}
 							}
 							else
 							{
 								value = value.merge;
 							}
 						}
-						
+
 						if (confirm(mxResources.get('configLinkWarn')) &&
 							confirm(mxResources.get('configLinkConfirm')))
 						{
@@ -911,21 +912,21 @@ App.main = function(callback, createUi)
 					alert(e);
 				}
 			}
-						
+
 			// Prepares themes with mapping from old default-style to old XML file
 			if (xhr.length > 1)
 			{
 				Graph.prototype.defaultThemes['default-style2'] = xhr[1].getDocumentElement();
 	 			Graph.prototype.defaultThemes['darkTheme'] = xhr[1].getDocumentElement();
 			}
-			
+
 			// Main
 			function realMain()
 			{
 				var ui = (createUi != null) ? createUi() : new App(new Editor(
 						urlParams['chrome'] == '0' || uiTheme == 'min',
 						null, null, null, urlParams['chrome'] != '0'));
-				
+
 				if (window.mxscript != null)
 				{
 					// Loads dropbox for all browsers but IE8 and below (no CORS) if not disabled or if enabled and in embed mode
@@ -950,7 +951,7 @@ App.main = function(callback, createUi)
 					{
 						window.DropboxClient = null;
 					}
-						
+
 					// Loads OneDrive for all browsers but IE6/IOS if not disabled or if enabled and in embed mode
 					if (typeof window.OneDriveClient === 'function' &&
 						(typeof OneDrive === 'undefined' && window.DrawOneDriveClientCallback != null &&
@@ -966,7 +967,7 @@ App.main = function(callback, createUi)
 					{
 						window.OneDriveClient = null;
 					}
-					
+
 					// Loads Trello for all browsers but < IE10 if not disabled or if enabled and in embed mode
 					if (typeof window.TrelloClient === 'function' && !mxClient.IS_IE11 &&
 						typeof window.Trello === 'undefined' && window.DrawTrelloClientCallback != null &&
@@ -987,28 +988,28 @@ App.main = function(callback, createUi)
 					{
 						window.TrelloClient = null;
 					}
-		
+
 				}
-				
+
 				if (callback != null)
 				{
 					callback(ui);
 				}
-				
+
 				/**
 				 * For developers only
 				 */
 				if (urlParams['chrome'] != '0' && urlParams['test'] == '1')
 				{
 					EditorUi.debug('App.start', [ui, (new Date().getTime() - t0.getTime()) + 'ms']);
-					
+
 					if (urlParams['export'] != null)
 					{
 						EditorUi.debug('Export:', EXPORT_URL);
 					}
 				}
 			};
-			
+
 			if (urlParams['dev'] == '1' || EditorUi.isElectronApp) //TODO check if we can remove these scripts loading from index.html
 			{
 				realMain();
@@ -1022,11 +1023,11 @@ App.main = function(callback, createUi)
 		}, function(xhr)
 		{
 			var st = document.getElementById('geStatus');
-			
+
 			if (st != null)
 			{
 				st.innerHTML = 'Error loading page. <a>Please try refreshing.</a>';
-				
+
 				// Tries reload with default resources in case any language resources were not available
 				st.getElementsByTagName('a')[0].onclick = function()
 				{
@@ -1047,11 +1048,11 @@ App.main = function(callback, createUi)
 			{
 				document.body.style.backgroundColor = (uiTheme == 'dark' ||
 					mxSettings.settings.darkMode) ? Editor.darkColor : '#ffffff';
-				
+
 				if (mxSettings.settings.autosaveDelay != null)
 				{
 					var val = parseInt(mxSettings.settings.autosaveDelay);
-					
+
 					if (!isNaN(val) && val > 0)
 					{
 						DrawioFile.prototype.autosaveDelay = val;
@@ -1062,11 +1063,11 @@ App.main = function(callback, createUi)
 						EditorUi.debug('Invalid autosaveDelay', val);
 					}
 				}
-				
+
 				if (mxSettings.settings.defaultEdgeLength != null)
 				{
 					var val = parseInt(mxSettings.settings.defaultEdgeLength);
-					
+
 					if (!isNaN(val) && val > 0)
 					{
 						Graph.prototype.defaultEdgeLength = val;
@@ -1093,7 +1094,7 @@ App.main = function(callback, createUi)
 			for (var i = 0; i < Menus.prototype.defaultFonts.length; i++)
 			{
 				var value = Menus.prototype.defaultFonts[i];
-				
+
 				if (typeof value !== 'string' &&
 					value.fontFamily != null &&
 					value.fontUrl != null)
@@ -1102,7 +1103,7 @@ App.main = function(callback, createUi)
 				}
 			}
 		}
-	
+
 		// Adds required resources (disables loading of fallback properties, this can only
 		// be used if we know that all keys are defined in the language specific file)
 		mxResources.loadDefaultBundle = false;
@@ -1114,7 +1115,7 @@ App.main = function(callback, createUi)
 	if (urlParams['configure'] == '1')
 	{
 		var op = window.opener || window.parent;
-		
+
 		var configHandler = function(evt)
 		{
 			if (evt.source == op)
@@ -1122,7 +1123,7 @@ App.main = function(callback, createUi)
 				try
 				{
 					var data = JSON.parse(evt.data);
-					
+
 					if (data != null && data.action == 'configure')
 					{
 						mxEvent.removeListener(window, 'message', configHandler);
@@ -1140,7 +1141,7 @@ App.main = function(callback, createUi)
 				}
 			}
 		};
-		
+
 		// Receives XML message from opener and puts it into the graph
 		mxEvent.addListener(window, 'message', configHandler);
 		op.postMessage(JSON.stringify({event: 'configure'}), '*');
@@ -1166,18 +1167,18 @@ App.main = function(callback, createUi)
 					}
 				}
 			}
-	
+
 			// Loads configuration from local storage
 			if (isLocalStorage && localStorage != null && urlParams['embed'] != '1')
 			{
 				var configData = localStorage.getItem(Editor.configurationKey);
-	
+
 				if (configData != null)
 				{
 					try
 					{
 						configData = JSON.parse(configData);
-						
+
 						if (configData != null)
 						{
 							EditorUi.debug('Using local configuration', configData);
@@ -1195,7 +1196,7 @@ App.main = function(callback, createUi)
 				}
 			}
 		}
-		
+
 		doMain();
 	}
 };
@@ -1209,7 +1210,7 @@ mxUtils.extend(App, EditorUi);
 App.prototype.defaultUserPicture = IMAGE_PATH + '/default-user.jpg';
 
 /**
- * 
+ *
  */
 App.prototype.shareImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowOTgwMTE3NDA3MjA2ODExODhDNkFGMDBEQkQ0RTgwOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMjU2NzdEMTcwRDIxMUUxQjc0MDkxRDhCNUQzOEFGRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMjU2NzdEMDcwRDIxMUUxQjc0MDkxRDhCNUQzOEFGRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNjgwMTE3NDA3MjA2ODExODcxRkM4MUY1OTFDMjQ5OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNzgwMTE3NDA3MjA2ODExODhDNkFGMDBEQkQ0RTgwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrM/fs0AAADgSURBVHjaYmDAA/7//88MwgzkAKDGFiD+BsQ/QWxSNaf9RwN37twpI8WAS+gGfP78+RpQSoRYA36iG/D379+vQClNdLVMOMz4gi7w79+/n0CKg1gD9qELvH379hzIHGK9oA508ieY8//8+fO5rq4uFCilRKwL1JmYmNhhHEZGRiZ+fn6Q2meEbDYG4u3/cYCfP38uA7kOm0ZOIJ7zn0jw48ePPiDFhmzArv8kgi9fvuwB+w5qwH9ykjswbFSZyM4sEMDPBDTlL5BxkFSd7969OwZ2BZKYGhDzkmjOJ4AAAwBhpRqGnEFb8QAAAABJRU5ErkJggg==';
 
@@ -1253,7 +1254,7 @@ App.prototype.compactMode = false;
  *
  */
 App.prototype.fullscreenMode = false;
-	
+
 /**
  * Overriden UI settings depending on mode.
  */
@@ -1275,7 +1276,7 @@ App.initPluginCallback = function()
 	{
 		// Workaround for need to load plugins now but wait for UI instance
 		App.DrawPlugins = [];
-		
+
 		// Global entry point for plugins is Draw.loadPlugin. This is the only
 		// long-term supported solution for access to the EditorUi instance.
 		window.Draw = new Object();
@@ -1287,7 +1288,7 @@ App.initPluginCallback = function()
 };
 
 /**
- * 
+ *
  */
 App.pluginsLoaded = {};
 App.embedModePluginsCount = 0;
@@ -1306,14 +1307,14 @@ App.loadPlugins = function(plugins, useInclude)
 			try
 			{
 				var url = PLUGINS_BASE_PATH + App.pluginRegistry[plugins[i]];
-				
+
 				if (url != null)
 				{
 					if (App.pluginsLoaded[url] == null)
 					{
 						App.pluginsLoaded[url] = true;
 						App.embedModePluginsCount++;
-						
+
 						if (typeof window.drawDevUrl === 'undefined')
 						{
 							if (useInclude)
@@ -1366,7 +1367,7 @@ App.prototype.initializeEmbedMode = function()
 		{
 			this.showBanner('EmbedDeprecationFooter', 'app.diagrams.net will stop working for embed mode. Please use embed.diagrams.net.');
 		}
-		
+
 		if (App.embedModePluginsCount > 0 || this.initEmbedDone)
 		{
 			return; //Wait for plugins to load, or this is a duplicate call due to timeout
@@ -1375,7 +1376,7 @@ App.prototype.initializeEmbedMode = function()
 		{
 			this.initEmbedDone = true;
 		}
-		
+
 		EditorUi.prototype.initializeEmbedMode.apply(this, arguments);
 	}
 };
@@ -1413,7 +1414,7 @@ App.prototype.init = function()
 
 	/**
 	 * Holds the listener for description changes.
-	 */	
+	 */
 	this.descriptorChangedListener = mxUtils.bind(this, this.descriptorChanged);
 
 	/**
@@ -1423,7 +1424,7 @@ App.prototype.init = function()
 			mxClient.IS_IE11 || mxClient.IS_EDGE) &&
 			(urlParams['gh'] != '0' && (urlParams['embed'] != '1' ||
 			urlParams['gh'] == '1')) ? new GitHubClient(this) : null;
-	
+
 	if (this.gitHub != null)
 	{
 		this.gitHub.addListener('userChanged', mxUtils.bind(this, function()
@@ -1432,7 +1433,7 @@ App.prototype.init = function()
 			this.restoreLibraries();
 		}));
 	}
-	
+
 	/**
 	 * Creates gitlab client.
 	 */
@@ -1466,13 +1467,13 @@ App.prototype.init = function()
 				 * Holds the x-coordinate of the point.
 				 */
 				this.oneDrive = new OneDriveClient(this);
-				
+
 				this.oneDrive.addListener('userChanged', mxUtils.bind(this, function()
 				{
 					this.updateUserElement();
 					this.restoreLibraries();
 				}));
-				
+
 				// Notifies listeners of new client
 				this.fireEvent(new mxEventObject('clientLoaded', 'client', this.oneDrive));
 			}
@@ -1500,14 +1501,14 @@ App.prototype.init = function()
 				try
 				{
 					this.trello = new TrelloClient(this);
-					
+
 					//TODO we have no user info from Trello so we don't set a user
 					this.trello.addListener('userChanged', mxUtils.bind(this, function()
 					{
 						this.updateUserElement();
 						this.restoreLibraries();
 					}));
-					
+
 					// Notifies listeners of new client
 					this.fireEvent(new mxEventObject('clientLoaded', 'client', this.trello));
 				}
@@ -1543,22 +1544,22 @@ App.prototype.init = function()
 				var doInit = mxUtils.bind(this, function()
 				{
 					this.drive = new DriveClient(this);
-					
+
 					this.drive.addListener('userChanged', mxUtils.bind(this, function()
 					{
 						this.updateUserElement();
 						this.restoreLibraries();
 						this.checkLicense();
 					}))
-					
+
 					// Notifies listeners of new client
 					this.fireEvent(new mxEventObject('clientLoaded', 'client', this.drive));
 				});
-				
+
 				if (window.DrawGapiClientCallback != null)
 				{
 					gapi.load(((urlParams['picker'] != '0') ? 'picker,': '') + App.GOOGLE_APIS, doInit);
-					
+
 					/**
 					 * Clears any callbacks.
 					 */
@@ -1574,7 +1575,7 @@ App.prototype.init = function()
 				window.DrawGapiClientCallback = initDriveClient;
 			}
 		});
-		
+
 		initDriveClient();
 	}
 
@@ -1591,20 +1592,20 @@ App.prototype.init = function()
 				 * Clears dropbox client callback.
 				 */
 				window.DrawDropboxClientCallback = null;
-				
+
 				/**
 				 * Holds the x-coordinate of the point.
 				 */
 				try
 				{
 					this.dropbox = new DropboxClient(this);
-					
+
 					this.dropbox.addListener('userChanged', mxUtils.bind(this, function()
 					{
 						this.updateUserElement();
 						this.restoreLibraries();
 					}));
-					
+
 					// Notifies listeners of new client
 					this.fireEvent(new mxEventObject('clientLoaded', 'client', this.dropbox));
 				}
@@ -1647,7 +1648,7 @@ App.prototype.init = function()
 		{
 			this.mode = App.mode;
 		}
-		
+
 		// Add to Home Screen dialog for mobile devices
 		if ('serviceWorker' in navigator && !this.editor.isChromelessView() &&
 			(mxClient.IS_ANDROID || mxClient.IS_IOS))
@@ -1660,7 +1661,7 @@ App.prototype.init = function()
 				});
 			}));
 		}
-		
+
 		if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp && !this.isOffline() &&
 			!mxClient.IS_ANDROID && !mxClient.IS_IOS && urlParams['open'] == null &&
 			(!this.editor.chromeless || this.editor.editable))
@@ -1669,7 +1670,7 @@ App.prototype.init = function()
 			{
 				var file = this.getCurrentFile();
 				var mode = (file != null) ? file.getMode() : null;
-				
+
 				if (urlParams['extAuth'] != '1' && (mode == App.MODE_DEVICE || mode == App.MODE_BROWSER))
 				{
 					//关闭桌面弹出广告
@@ -1683,38 +1684,38 @@ App.prototype.init = function()
 				}
 			}));
 		}
-		
+
 		if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp && urlParams['embed'] != '1' && DrawioFile.SYNC == 'auto' &&
 			urlParams['local'] != '1' && urlParams['stealth'] != '1' && !this.isOffline() &&
 			(!this.editor.chromeless || this.editor.editable))
 		{
 			// Checks if the cache is alive
 			var acceptResponse = true;
-			
+
 			var timeoutThread = window.setTimeout(mxUtils.bind(this, function()
 			{
 				acceptResponse = false;
-				
+
 				// Switches to manual sync if cache cannot be reached
 				DrawioFile.SYNC = 'manual';
-				
+
 				var file = this.getCurrentFile();
-				
+
 				if (file != null && file.sync != null)
 				{
 					file.sync.destroy();
 					file.sync = null;
-					
+
 					var status = mxUtils.htmlEntities(mxResources.get('timeout'));
 					this.editor.setStatus('<div title="'+ status +
 						'" class="geStatusAlert">' + status + '</div>');
 				}
-				
+
 				EditorUi.logEvent({category: 'TIMEOUT-CACHE-CHECK', action: 'timeout', label: 408});
 			}), Editor.cacheTimeout);
-			
+
 			var t0 = new Date().getTime();
-			
+
 			mxUtils.get(EditorUi.cacheUrl + '?alive', mxUtils.bind(this, function(req)
 			{
 				window.clearTimeout(timeoutThread);
@@ -1735,7 +1736,7 @@ App.prototype.init = function()
 		this.buttonContainer.style.paddingRight = '48px';
 		this.buttonContainer.style.position = 'absolute';
 		this.buttonContainer.style.right = '0px';
-		
+
 		this.menubar.container.appendChild(this.buttonContainer);
 	}
 
@@ -1746,21 +1747,21 @@ App.prototype.init = function()
 			this.toggleElement.click();
 			this.toggleElement.style.display = 'none';
 		}
-		
+
 		this.icon = document.createElement('img');
 		this.icon.setAttribute('src', IMAGE_PATH + '/logo-flat-small.png');
 		this.icon.setAttribute('title', mxResources.get('draw.io'));
 		this.icon.style.padding = urlParams['atlas'] == '1'? '7px' : '6px';
 		this.icon.style.cursor = 'pointer';
-		
+
 		mxEvent.addListener(this.icon, 'click', mxUtils.bind(this, function(evt)
 		{
 			this.appIconClicked(evt);
 		}));
-		
+
 		this.menubar.container.insertBefore(this.icon, this.menubar.container.firstChild);
 	}
-	
+
 	if (this.editor.graph.isViewer())
 	{
 		this.initializeViewerMode();
@@ -1820,22 +1821,22 @@ App.prototype.sanityCheck = function()
 			'-change_' + ((file.lastChanged != null) ? Math.round((Date.now() - file.lastChanged.getTime()) / 1000) : 'x')+
 			'-alive_' + Math.round((Date.now() - App.startTime.getTime()) / 1000),
 			label: (file.sync != null) ? ('client_' + file.sync.clientId) : 'nosync'};
-			
+
 		if (file.constructor == DriveFile && file.desc != null && this.drive != null)
 		{
 			evt.label += ((this.drive.user != null) ? ('-user_' + this.drive.user.id) : '-nouser') + '-rev_' +
 				file.desc.headRevisionId + '-mod_' + file.desc.modifiedDate + '-size_' + file.getSize() +
 				'-mime_' + file.desc.mimeType;
 		}
-			
+
 		EditorUi.logEvent(evt);
 
 		var msg = mxResources.get('ensureDataSaved');
-		
+
 		if (file.lastSaved != null)
 		{
 			var str = this.timeSince(file.lastSaved);
-			
+
 			if (str == null)
 			{
 				str = mxResources.get('lessThanAMinute');
@@ -1843,7 +1844,7 @@ App.prototype.sanityCheck = function()
 
 			msg = mxResources.get('lastSaved', [str]);
 		}
-		
+
 		// Resets possible stale state
 		this.spinner.stop();
 
@@ -1889,7 +1890,7 @@ App.prototype.getPusher = function()
 			encrypted: true
 		});
 	}
-	
+
 	return this.pusher;
 };
 
@@ -1942,14 +1943,14 @@ App.prototype.showRatingBanner = function()
 			mxUtils.setPrefixedStyle(banner.style, 'transform', 'translate(-50%,120%)');
 			mxUtils.setPrefixedStyle(banner.style, 'transition', 'all 1s ease');
 			banner.className = 'geBtn gePrimaryBtn';
-	
+
 			var img = document.createElement('img');
 			img.setAttribute('src', Dialog.prototype.closeImage);
 			img.setAttribute('title', mxResources.get('close'));
 			img.setAttribute('border', '0');
 			img.style.cssText = 'position:absolute;right:10px;top:12px;filter:invert(1);padding:6px;margin:-6px;cursor:default;';
 			banner.appendChild(img);
-			
+
 			var star = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZ' +
 				'XdvcmtzIENTM5jWRgMAAAQRdEVYdFhNTDpjb20uYWRvYmUueG1wADw/eHBhY2tldCBiZWdpbj0iICAgIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8i' +
 				'IHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDQuMS1jMDM0IDQ2LjI3Mjk3NiwgU2F0IEphbiAyNyAyMDA3IDIyOjExOjQxICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDI' +
@@ -1967,7 +1968,7 @@ App.prototype.showRatingBanner = function()
 
 			mxUtils.write(banner, 'Please rate us');
 			document.body.appendChild(banner);
-	
+
 			var star1 = document.createElement('img');
 			star1.setAttribute('border', '0');
 			star1.setAttribute('align', 'absmiddle');
@@ -1975,7 +1976,7 @@ App.prototype.showRatingBanner = function()
 			star1.setAttribute('style', 'margin-top:-6px;cursor:pointer;margin-left:8px;');
 			star1.setAttribute('src', star);
 			banner.appendChild(star1);
-			
+
 			var star2 = document.createElement('img');
 			star2.setAttribute('border', '0');
 			star2.setAttribute('align', 'absmiddle');
@@ -1983,7 +1984,7 @@ App.prototype.showRatingBanner = function()
 			star2.setAttribute('style', 'margin-top:-6px;margin-left:3px;cursor:pointer;');
 			star2.setAttribute('src', star);
 			banner.appendChild(star2);
-			
+
 			var star3 = document.createElement('img');
 			star3.setAttribute('border', '0');
 			star3.setAttribute('align', 'absmiddle');
@@ -1991,7 +1992,7 @@ App.prototype.showRatingBanner = function()
 			star3.setAttribute('style', 'margin-top:-6px;margin-left:3px;cursor:pointer;');
 			star3.setAttribute('src', star);
 			banner.appendChild(star3);
-			
+
 			var star4 = document.createElement('img');
 			star4.setAttribute('border', '0');
 			star4.setAttribute('align', 'absmiddle');
@@ -1999,16 +2000,16 @@ App.prototype.showRatingBanner = function()
 			star4.setAttribute('style', 'margin-top:-6px;margin-left:3px;cursor:pointer;');
 			star4.setAttribute('src', star);
 			banner.appendChild(star4);
-			
+
 			this.bannerShowing = true;
-			
+
 			var onclose = mxUtils.bind(this, function()
 			{
 				if (banner.parentNode != null)
 				{
 					banner.parentNode.removeChild(banner);
 					this.bannerShowing = false;
-					
+
 					this['hideBanner' + 'ratingFooter'] = true;
 
 					if (isLocalStorage && mxSettings.settings != null)
@@ -2018,7 +2019,7 @@ App.prototype.showRatingBanner = function()
 					}
 				}
 			});
-			
+
 			mxEvent.addListener(img, 'click', mxUtils.bind(this, function(e)
 			{
 				mxEvent.consume(e);
@@ -2049,32 +2050,32 @@ App.prototype.showRatingBanner = function()
 			var hide = mxUtils.bind(this, function()
 			{
 				mxUtils.setPrefixedStyle(banner.style, 'transform', 'translate(-50%,120%)');
-				
+
 				window.setTimeout(mxUtils.bind(this, function()
 				{
 					onclose();
 				}), 1000);
 			});
-			
+
 			window.setTimeout(mxUtils.bind(this, function()
 			{
 				mxUtils.setPrefixedStyle(banner.style, 'transform', 'translate(-50%,0%)');
 			}), 500);
-			
+
 			window.setTimeout(hide, 60000);
 		}
 };
 
 /**
  * Checks license in the case of Google Drive storage.
- * IMPORTANT: Do not change this function without consulting 
+ * IMPORTANT: Do not change this function without consulting
  * the privacy lead. No personal information must be sent.
  */
 App.prototype.checkLicense = function()
 {
 	var driveUser = this.drive.getUser();
 	var email = (driveUser != null) ? driveUser.email : null;
-	
+
 	if (!this.isOffline() && !this.editor.chromeless && email != null && driveUser.id != null)
 	{
 		// Only the domain and hashed user ID are transmitted. This code was reviewed and deemed
@@ -2082,9 +2083,9 @@ App.prototype.checkLicense = function()
 		var at = email.lastIndexOf('@');
 		var domain = (at >= 0) ? email.substring(at + 1) : '';
 		var userId = Editor.crc32(driveUser.id);
-		
+
 		// Timestamp is workaround for cached response in certain environments
-		mxUtils.post('/license', 'domain=' + encodeURIComponent(domain) + '&id=' + encodeURIComponent(userId) + 
+		mxUtils.post('/license', 'domain=' + encodeURIComponent(domain) + '&id=' + encodeURIComponent(userId) +
 				'&ts=' + new Date().getTime(),
 			mxUtils.bind(this, function(req)
 			{
@@ -2093,11 +2094,11 @@ App.prototype.checkLicense = function()
 					if (req.getStatus() >= 200 && req.getStatus() <= 299)
 					{
 						var value = req.getText();
-						
+
 						if (value.length > 0)
 						{
 							var lic = JSON.parse(value);
-							
+
 							if (lic != null)
 							{
 								this.handleLicense(lic, domain);
@@ -2125,12 +2126,12 @@ App.prototype.handleLicense = function(lic, domain)
 };
 
 /**
- * 
+ *
  */
 App.prototype.getEditBlankXml = function()
 {
 	var file = this.getCurrentFile();
-	
+
 	if (file != null && this.editor.isChromelessView() && this.editor.graph.isLightboxView())
 	{
 		return file.getData();
@@ -2159,7 +2160,7 @@ App.prototype.addRecent = function(entry)
 	if (isLocalStorage && localStorage != null)
 	{
 		var recent = this.getRecent();
-		
+
 		if (recent == null)
 		{
 			recent = [];
@@ -2174,7 +2175,7 @@ App.prototype.addRecent = function(entry)
 				}
 			}
 		}
-		
+
 		if (recent != null)
 		{
 			recent.unshift(entry);
@@ -2194,7 +2195,7 @@ App.prototype.getRecent = function()
 		try
 		{
 			var recent = localStorage.getItem('.recent');
-			
+
 			if (recent != null)
 			{
 				return JSON.parse(recent);
@@ -2204,7 +2205,7 @@ App.prototype.getRecent = function()
 		{
 			// ignore
 		}
-		
+
 		return null;
 	}
 };
@@ -2239,7 +2240,7 @@ App.prototype.onBeforeUnload = function()
 	else
 	{
 		var file = this.getCurrentFile();
-		
+
 		if (file != null)
 		{
 			// KNOWN: Message is ignored by most browsers
@@ -2263,7 +2264,7 @@ App.prototype.onBeforeUnload = function()
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -2273,18 +2274,18 @@ App.prototype.updateDocumentTitle = function()
 	{
 		var title = this.editor.appName;
 		var file = this.getCurrentFile();
-		
+
 		if (this.isOfflineApp())
 		{
 			title += ' app';
 		}
-		
+
 		if (file != null)
 		{
 			var filename = (file.getTitle() != null) ? file.getTitle() : this.defaultFilename;
 			title = filename + ' - ' + title;
 		}
-		
+
 		if (document.title != title)
 		{
 			document.title = title;
@@ -2301,32 +2302,32 @@ App.prototype.updateDocumentTitle = function()
 App.prototype.getThumbnail = function(width, fn)
 {
 	var result = false;
-	
+
 	try
 	{
 		var acceptResponse = true;
-		
+
 		var timeoutThread = window.setTimeout(mxUtils.bind(this, function()
 		{
 			acceptResponse = false;
 			fn(null);
 		}), this.timeout);
-		
+
 		var success = mxUtils.bind(this, function(canvas)
 		{
 			window.clearTimeout(timeoutThread);
-			
+
 			if (acceptResponse)
 			{
 				fn(canvas);
 			}
 		});
-		
+
 		if (this.thumbImageCache == null)
 		{
 			this.thumbImageCache = new Object();
 		}
-		
+
 		var graph = this.editor.graph;
 		var bgImg = graph.backgroundImage;
 
@@ -2362,15 +2363,15 @@ App.prototype.getThumbnail = function(width, fn)
 				{
 					return 1;
 				}
-				
+
 				return graphGetGlobalVariable.apply(this, arguments);
 			};
-			
+
 			graph.getGlobalVariable = graphGetGlobalVariable;
 			document.body.appendChild(graph.container);
 			graph.model.setRoot(page.root);
 		}
-		
+
 		// Uses client-side canvas export
 		if (mxClient.IS_CHROMEAPP || this.useCanvasForExport)
 		{
@@ -2388,7 +2389,7 @@ App.prototype.getThumbnail = function(width, fn)
 				{
 					canvas = null;
 				}
-				
+
 		   		success(canvas);
 		   	}), width, this.thumbImageCache, '#ffffff', function()
 		   	{
@@ -2396,7 +2397,7 @@ App.prototype.getThumbnail = function(width, fn)
 		   		success();
 		   	}, null, null, null, null, null, null, graph, null, null, null,
 			   null, 'diagram', null);
-		   	
+
 		   	result = true;
 		}
 		else if (this.canvasSupported && this.getCurrentFile() != null)
@@ -2418,33 +2419,33 @@ App.prototype.getThumbnail = function(width, fn)
 
 			// Limits scale to 1 or 2 * width / height
 			scale = Math.min(1, Math.min((width * 3) / (bounds.height * 4), scale));
-			
+
 			var x0 = Math.floor(bounds.x);
 			var y0 = Math.floor(bounds.y);
-			
+
 			canvas.setAttribute('width', Math.ceil(scale * (bounds.width + 4)));
 			canvas.setAttribute('height', Math.ceil(scale * (bounds.height + 4)));
-			
+
 			var ctx = canvas.getContext('2d');
-			
+
 			// Configures the canvas
 			ctx.scale(scale, scale);
 			ctx.translate(-x0, -y0);
-			
+
 			// Paint white background instead of transparent
 			var bg = graph.background;
-			
+
 			if (bg == null || bg == '' || bg == mxConstants.NONE)
 			{
 				bg = '#ffffff';
 			}
-	
+
 			// Paints background
 			ctx.save();
 			ctx.fillStyle = bg;
 			ctx.fillRect(x0, y0, Math.ceil(bounds.width + 4), Math.ceil(bounds.height + 4));
 			ctx.restore();
-			
+
 			// Paints background image
 			if (bgImg != null)
 			{
@@ -2454,9 +2455,9 @@ App.prototype.getThumbnail = function(width, fn)
 				ctx.drawImage(img, bgImg.x * scale, bgImg.y * scale,
 					bgImg.width * scale, bgImg.height * scale);
 			}
-			
+
 			var htmlCanvas = new mxJsCanvas(canvas);
-			
+
 			// NOTE: htmlCanvas passed into async canvas is only used for image
 			// and canvas caching (canvas caching not used in this case as we do
 			// not render text). To reuse that cache via the thumbImageCache we
@@ -2465,7 +2466,7 @@ App.prototype.getThumbnail = function(width, fn)
 			// LATER: Is clear thumbImageCache needed if file changes?
 			var asynCanvas = new mxAsyncCanvas(this.thumbImageCache);
 			htmlCanvas.images = this.thumbImageCache.images;
-			
+
 			// Render graph
 			var imgExport = new mxImageExport();
 
@@ -2480,20 +2481,20 @@ App.prototype.getThumbnail = function(width, fn)
 					canvas.restore();
 				}
 			};
-			
+
 			imgExport.drawText = function(state, canvas)
 			{
 				// No text output for thumbnails
 			};
-	
+
 			imgExport.drawState(graph.getView().getState(graph.model.root), asynCanvas);
-	
+
 			asynCanvas.finish(mxUtils.bind(this, function()
 			{
 				try
 				{
 					imgExport.drawState(graph.getView().getState(graph.model.root), htmlCanvas);
-					
+
 			   		// Removes temporary graph from DOM
 	   	   	    	if (graph != this.editor.graph && graph.container.parentNode != null)
 					{
@@ -2507,32 +2508,32 @@ App.prototype.getThumbnail = function(width, fn)
 
 				success(canvas);
 			}));
-			
+
 			result = true;
 		}
 	}
 	catch (e)
 	{
 		result = false;
-		
+
 		// Removes temporary graph from DOM
   	    if (graph != null && graph != this.editor.graph && graph.container.parentNode != null)
 		{
 			graph.container.parentNode.removeChild(graph.container);
 		}
 	}
-	
+
 	if (!result)
 	{
 		window.clearTimeout(timeoutThread);
 	}
-	
+
 	return result;
 };
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -2545,26 +2546,26 @@ App.prototype.createBackground = function()
 	bg.style.top = '0px';
 	bg.style.bottom = '0px';
 	bg.style.right = '0px';
-	
+
 	mxUtils.setOpacity(bg, 100);
-	
+
 	return bg;
 };
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
 (function()
 {
 	var editorUiSetMode = EditorUi.prototype.setMode;
-	
+
 	App.prototype.setMode = function(mode, remember)
 	{
 		editorUiSetMode.apply(this, arguments);
-		
+
 		// Note: UseLocalStorage affects the file dialogs
 		// and should not be modified if mode is undefined
 		if (this.mode != null)
@@ -2576,7 +2577,7 @@ App.prototype.createBackground = function()
 		{
 			var file = this.getCurrentFile();
 			mode = (file != null) ? file.getMode() : mode;
-			
+
 			if (mode == App.MODE_GOOGLE)
 			{
 				this.appIcon.setAttribute('title', mxResources.get('openIt', [mxResources.get('googleDrive')]));
@@ -2598,7 +2599,7 @@ App.prototype.createBackground = function()
 				this.appIcon.style.cursor = (mode == App.MODE_DEVICE) ? 'pointer' : 'default';
 			}
 		}
-		
+
 		if (remember)
 		{
 			try
@@ -2624,7 +2625,7 @@ App.prototype.createBackground = function()
 
 /**
  * Function: authorize
- * 
+ *
  * Authorizes the client, gets the userId and calls <open>.
  */
 App.prototype.appIconClicked = function(evt)
@@ -2637,7 +2638,7 @@ App.prototype.appIconClicked = function(evt)
 	{
 		var file = this.getCurrentFile();
 		var mode = (file != null) ? file.getMode() : null;
-		
+
 		if (mode == App.MODE_GOOGLE)
 		{
 			if (file != null && file.desc != null && file.desc.parents != null &&
@@ -2661,12 +2662,12 @@ App.prototype.appIconClicked = function(evt)
 			{
 				var url = file.meta.webUrl;
 				var name = encodeURIComponent(file.meta.name);
-				
+
 				if (url.substring(url.length - name.length, url.length) == name)
 				{
 					url = url.substring(0, url.length - name.length);
 				}
-				
+
 				this.openLink(url);
 			}
 			else
@@ -2679,12 +2680,12 @@ App.prototype.appIconClicked = function(evt)
 			if (file != null && file.stat != null && file.stat.path_display != null)
 			{
 				var url = 'https://www.dropbox.com/home/Apps/drawio' + file.stat.path_display;
-				
+
 				if (!mxEvent.isShiftDown(evt))
 				{
 					url = url.substring(0, url.length - file.stat.name.length);
 				}
-				
+
 				this.openLink(url);
 			}
 			else
@@ -2723,13 +2724,13 @@ App.prototype.appIconClicked = function(evt)
 			this.openLink('https://get.draw.io/');
 		}
 	}
-	
+
 	mxEvent.consume(evt);
 };
 
 /**
  * Function: authorize
- * 
+ *
  * Authorizes the client, gets the userId and calls <open>.
  */
 App.prototype.clearMode = function()
@@ -2748,31 +2749,31 @@ App.prototype.clearMode = function()
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
 App.prototype.getDiagramId = function()
 {
 	var id = window.location.hash;
-	
+
 	// Strips the hash sign
 	if (id != null && id.length > 0)
 	{
 		id = id.substring(1);
 	}
-	
+
 	// Workaround for Trello client appending data after hash
 	if (id != null && id.length > 1 && id.charAt(0) == 'T')
 	{
 		var idx = id.indexOf('#');
-		
+
 		if (idx > 0)
 		{
 			id = id.substring(0, idx);
 		}
 	}
-	
+
 	return id;
 };
 
@@ -2792,12 +2793,12 @@ App.prototype.open = function()
 		if (window.opener != null)
 		{
 			var value = urlParams['create'];
-			
+
 			if (value != null)
 			{
 				value = decodeURIComponent(value);
 			}
-			
+
 			if (value != null && value.length > 0 && value.substring(0, 7) != 'http://' &&
 				value.substring(0, 8) != 'https://')
 			{
@@ -2809,12 +2810,12 @@ App.prototype.open = function()
 				window.opener.openFile.setConsumer(mxUtils.bind(this, function(xml, filename, temp)
 				{
 					this.spinner.stop();
-					
+
 					if (filename == null)
 					{
 						var title = urlParams['title'];
 						temp = true;
-						
+
 						if (title != null)
 						{
 							filename = decodeURIComponent(title);
@@ -2824,15 +2825,15 @@ App.prototype.open = function()
 							filename = this.defaultFilename;
 						}
 					}
-					
+
 					// Replaces PNG with XML extension
 					var dot = (!this.useCanvasForExport) ? filename.substring(filename.length - 4) == '.png' : -1;
-					
+
 					if (dot > 0)
 					{
 						filename = filename.substring(0, filename.length - 4) + '.drawio';
 					}
-					
+
 					this.fileLoaded((mxClient.IS_IOS) ?
 						new StorageFile(this, xml, filename) :
 						new LocalFile(this, xml, filename, temp));
@@ -2856,7 +2857,7 @@ App.prototype.loadGapi = function(then)
 
 /**
  * Main function. Program starts here.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -2875,9 +2876,9 @@ App.prototype.load = function()
 			{
 				// ignores invalid state args
 			}
-			
+
 			this.editor.graph.setEnabled(this.getCurrentFile() != null);
-			
+
 			// Passes the userId from the state parameter to the client
 			if ((window.location.hash == null || window.location.hash.length == 0) &&
 				this.drive != null && this.stateArg != null && this.stateArg.userId != null)
@@ -2900,7 +2901,7 @@ App.prototype.load = function()
 					{
 						this.mode = null;
 					}
-					
+
 					this.start();
 				}
 				else
@@ -2916,7 +2917,7 @@ App.prototype.load = function()
 	else
 	{
 		this.restoreLibraries();
-		
+
 		if (urlParams['gapi'] == '1')
 		{
 			this.loadGapi(function() {});
@@ -2938,17 +2939,17 @@ App.prototype.showRefreshDialog = function(title, message)
 			mxResources.get('refresh'), mxUtils.bind(this, function()
 		{
 			var file = this.getCurrentFile();
-			
+
 			if (file != null)
 			{
 				file.setModified(false);
 			}
-				
+
 			this.spinner.spin(document.body, mxResources.get('connecting'));
 			this.editor.graph.setEnabled(false);
 			window.location.reload();
 		}), null, null, null, null, null, 340, 180);
-		
+
 		// Adds important notice to dialog
 		if (this.dialog != null && this.dialog.container != null)
 		{
@@ -2975,7 +2976,7 @@ App.prototype.showAlert = function(message)
 	{
 		var div = document.createElement('div');
 		div.className = 'geAlert';
-		div.style.zIndex = 2e9; 
+		div.style.zIndex = 2e9;
 		div.style.left = '50%';
 		div.style.top = '-100%';
 		//Limit width to 80% max with word wrapping
@@ -2984,9 +2985,9 @@ App.prototype.showAlert = function(message)
 		div.style.whiteSpace = 'pre-wrap';
 		mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(-50%,0%)');
 		mxUtils.setPrefixedStyle(div.style, 'transition', 'all 1s ease');
-		
+
 		div.innerHTML = message;
-		
+
 		var close = document.createElement('a');
 		close.className = 'geAlertLink';
 		close.style.textAlign = 'right';
@@ -2995,7 +2996,7 @@ App.prototype.showAlert = function(message)
 		close.setAttribute('title', mxResources.get('close'));
 		close.innerHTML = mxResources.get('close');
 		div.appendChild(close);
-		
+
 		mxEvent.addListener(close, 'click', function(evt)
 		{
 			if (div.parentNode != null)
@@ -3004,21 +3005,21 @@ App.prototype.showAlert = function(message)
 				mxEvent.consume(evt);
 			}
 		});
-		
+
 		document.body.appendChild(div);
-		
+
 		// Delayed to get smoother animation after DOM rendering
 		window.setTimeout(function()
 		{
 			div.style.top = '30px';
 		}, 10);
-		
+
 		// Fades out the alert after 15 secs
 		window.setTimeout(function()
 		{
 			mxUtils.setPrefixedStyle(div.style, 'transition', 'all 2s ease');
 			div.style.opacity = '0';
-			
+
 			window.setTimeout(function()
 			{
 				if (div.parentNode != null)
@@ -3032,7 +3033,7 @@ App.prototype.showAlert = function(message)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -3042,7 +3043,7 @@ App.prototype.start = function()
 	{
 		this.bg.parentNode.removeChild(this.bg);
 	}
-	
+
 	this.restoreLibraries();
 	this.spinner.stop();
 
@@ -3050,7 +3051,7 @@ App.prototype.start = function()
 	{
 		// Handles all errors
 		var ui = this;
-		
+
 		window.onerror = function(message, url, linenumber, colno, err)
 		{
 			// Ignores Grammarly error [1344]
@@ -3062,7 +3063,7 @@ App.prototype.start = function()
 					null, null, null, null, true);
 			}
 		};
-		
+
 		// Listens to changes of the hash if not in embed or client mode
 		if (urlParams['client'] != '1' && urlParams['embed'] != '1')
 		{
@@ -3075,7 +3076,7 @@ App.prototype.start = function()
 					{
 						var file = this.getCurrentFile();
 						EditorUi.debug('storage event', [evt], [file]);
-	
+
 						if (file != null && evt.key == '.draft-alive-check' && evt.newValue != null && file.draftId != null)
 						{
 							this.draftAliveCheck = evt.newValue;
@@ -3095,7 +3096,7 @@ App.prototype.start = function()
 			{
 				// ignore
 			}
-			
+
 			mxEvent.addListener(window, 'hashchange', mxUtils.bind(this, function(evt)
 			{
 				try
@@ -3123,7 +3124,7 @@ App.prototype.start = function()
 				}
 			}));
 		}
-		
+
 		// Descriptor for CSV import
 		if ((window.location.hash == null || window.location.hash.length <= 1) && urlParams['desc'] != null)
 		{
@@ -3162,9 +3163,9 @@ App.prototype.start = function()
 						{
 							xml = Editor.extractGraphModelFromPng(xml);
 						}
-						
+
 						var title = urlParams['title'];
-						
+
 						if (title != null)
 						{
 							title = decodeURIComponent(title);
@@ -3173,9 +3174,9 @@ App.prototype.start = function()
 						{
 							title = this.defaultFilename;
 						}
-						
+
 						var file = new LocalFile(this, xml, title, true);
-						
+
 						if (window.location.hash != null && window.location.hash.substring(0, 2) == '#P')
 						{
 							file.getHash = function()
@@ -3183,17 +3184,17 @@ App.prototype.start = function()
 								return window.location.hash.substring(1);
 							};
 						}
-						
+
 						this.fileLoaded(file);
 						this.getCurrentFile().setModified(!this.editor.chromeless);
 					});
 
 					var parent = window.opener || window.parent;
-					
+
 					if (parent != window)
 					{
 						var value = urlParams['create'];
-						
+
 						if (value != null)
 						{
 							doLoadFile(parent[decodeURIComponent(value)]);
@@ -3201,7 +3202,7 @@ App.prototype.start = function()
 						else
 						{
 							value = urlParams['data'];
-							
+
 							if (value != null)
 							{
 								doLoadFile(decodeURIComponent(value));
@@ -3232,7 +3233,7 @@ App.prototype.start = function()
 					else
 					{
 						var waiting = false;
-						
+
 						// Checks if we're waiting for some asynchronous file to be loaded
 						// Cross-domain window access is not allowed in FF, so if we
 						// were opened from another domain then this will fail.
@@ -3244,7 +3245,7 @@ App.prototype.start = function()
 						{
 							// ignore
 						}
-						
+
 						if (waiting)
 						{
 							// Spinner is stopped in App.open
@@ -3253,7 +3254,7 @@ App.prototype.start = function()
 						else
 						{
 							var id = this.getDiagramId();
-							
+
 							if (EditorUi.enableDrafts && urlParams['mode'] == null &&
 								this.getServiceName() == 'draw.io' && (id == null || id.length == 0) &&
 								!this.editor.isChromelessView())
@@ -3265,7 +3266,7 @@ App.prototype.start = function()
 								this.loadFile(id, null, null, mxUtils.bind(this, function()
 								{
 									var temp = decodeURIComponent(urlParams['viewbox'] || '');
-									
+
 									if (temp != '')
 									{
 										try
@@ -3293,9 +3294,9 @@ App.prototype.start = function()
 					}
 				}
 			});
-	
+
 			var value = decodeURIComponent(urlParams['create'] || '');
-			
+
 			if ((window.location.hash == null || window.location.hash.length <= 1) &&
 				value != null && value.length > 0 && this.spinner.spin(document.body, mxResources.get('loading')))
 			{
@@ -3307,20 +3308,20 @@ App.prototype.start = function()
 						window.location.search = this.getSearch(['create', 'title']);
 					};
 				});
-	
+
 				var showCreateDialog = mxUtils.bind(this, function(xml)
 				{
 					this.spinner.stop();
-	
+
 					// Resets mode for dialog - local file is only for preview
 					if (urlParams['splash'] != '0')
 					{
 						this.fileLoaded(new LocalFile(this, xml, null));
-						
+
 						this.editor.graph.setEnabled(false);
 						this.mode = urlParams['mode'];
 						var title = urlParams['title'];
-		
+
 						if (title != null)
 						{
 							title = decodeURIComponent(title);
@@ -3329,16 +3330,16 @@ App.prototype.start = function()
 						{
 							title = this.defaultFilename;
 						}
-						
+
 						var serviceCount = this.getServiceCount(true);
-						
+
 						if (isLocalStorage)
 						{
 							serviceCount++;
 						}
-						
+
 						var rowLimit = (serviceCount <= 4) ? 2 : (serviceCount > 6 ? 4 : 3);
-						
+
 						var dlg = new CreateDialog(this, title, mxUtils.bind(this, function(filename, mode)
 						{
 							if (mode == null)
@@ -3371,9 +3372,9 @@ App.prototype.start = function()
 						dlg.init();
 					}
 				});
-				
+
 				value = decodeURIComponent(value);
-				
+
 				if (value.substring(0, 7) != 'http://' && value.substring(0, 8) != 'https://')
 				{
 					// Cross-domain window access is not allowed in FF, so if we
@@ -3420,7 +3421,7 @@ App.prototype.start = function()
 							window.history.replaceState(null, null, window.location.pathname +
 								this.getSearch(['state']));
 						}
-						
+
 						window.location.hash = 'G' + this.stateArg.ids[0];
 					}
 				}
@@ -3433,7 +3434,7 @@ App.prototype.start = function()
 						window.history.replaceState(null, null, window.location.pathname +
 							this.getSearch(['state']));
 					}
-					
+
 					this.setMode(App.MODE_GOOGLE);
 
 					if (urlParams['splash'] == '0')
@@ -3452,12 +3453,12 @@ App.prototype.start = function()
 					// Removes open URL parameter. Hash is also updated in Init to load client.
 					if (urlParams['open'] != null && window.history && window.history.replaceState)
 					{
-						
+
 						window.history.replaceState(null, null, window.location.pathname +
 							this.getSearch(['open', 'sketch']));
 						window.location.hash = urlParams['open'];
 					}
-					
+
 					done();
 				}
 			}
@@ -3479,11 +3480,11 @@ App.prototype.loadDraft = function(xml, success)
 		window.setTimeout(mxUtils.bind(this, function()
 		{
 			var file = this.getCurrentFile();
-			
+
 			if (file != null)
 			{
 				file.fileChanged();
-				
+
 				if (success != null)
 				{
 					success();
@@ -3512,14 +3513,14 @@ App.prototype.filterDrafts = function(filePath, guid, callback)
 				try
 				{
 					var key = items[i].key;
-					
+
 					if (key != null && key.substring(0, 7) == '.draft_')
 					{
 						var obj = JSON.parse(items[i].data);
-						
-						if (obj != null && obj.type == 'draft' && obj.aliveCheck != guid && 
+
+						if (obj != null && obj.type == 'draft' && obj.aliveCheck != guid &&
 							((filePath == null && obj.fileObject == null) ||
-								(obj.fileObject != null && obj.fileObject.path == filePath)))	
+								(obj.fileObject != null && obj.fileObject.path == filePath)))
 						{
 							obj.key = key;
 							drafts.push(obj);
@@ -3551,7 +3552,7 @@ App.prototype.checkDrafts = function()
 		// Triggers storage event for other windows to mark active drafts
 		var guid = Editor.guid();
 		localStorage.setItem('.draft-alive-check', guid);
-		
+
 		window.setTimeout(mxUtils.bind(this, function()
 		{
 			localStorage.removeItem('.draft-alive-check');
@@ -3568,14 +3569,14 @@ App.prototype.checkDrafts = function()
 				else if (drafts.length > 1)
 				{
 					var ts = new Date(drafts[0].modified);
-					
+
 					var dlg = new DraftDialog(this, (drafts.length > 1) ? mxResources.get('selectDraft') :
 						mxResources.get('draftFound', [ts.toLocaleDateString() + ' ' + ts.toLocaleTimeString()]),
 						(drafts.length > 1) ? null : drafts[0].data, mxUtils.bind(this, function(index)
 					{
 						this.hideDialog();
 						index = (index != '') ? index : 0;
-						
+
 						this.loadDraft(drafts[index].data, mxUtils.bind(this, function()
 						{
 							this.removeDatabaseItem(drafts[index].key);
@@ -3583,12 +3584,12 @@ App.prototype.checkDrafts = function()
 					}), mxUtils.bind(this, function(index, success)
 					{
 						index = (index != '') ? index : 0;
-						
+
 						// Discard draft
 						this.confirm(mxResources.get('areYouSure'), null, mxUtils.bind(this, function()
 						{
 							this.removeDatabaseItem(drafts[index].key);
-							
+
 							if (success != null)
 							{
 								success();
@@ -3627,7 +3628,7 @@ App.prototype.checkDrafts = function()
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -3636,15 +3637,15 @@ App.prototype.showSplash = function(force)
 	//Splash dialog shouldn't be shownn when running without a file menu
 	if (urlParams['noFileMenu'] == '1')
 	{
-		return;	
+		return;
 	}
-	
+
 	var serviceCount = this.getServiceCount(true);
-	
+
 	var showSecondDialog = mxUtils.bind(this, function()
 	{
 		var dlg = new SplashDialog(this);
-		
+
 		this.showDialog(dlg.container, 340, (mxClient.IS_CHROMEAPP || EditorUi.isElectronApp) ? 200 : 230, true, true,
 			mxUtils.bind(this, function(cancel)
 			{
@@ -3658,7 +3659,7 @@ App.prototype.showSplash = function(force)
 				}
 			}), true);
 	});
-	
+
 	if (this.editor.isChromelessView())
 	{
 		this.handleError({message: mxResources.get('noFileSelected')},
@@ -3670,13 +3671,13 @@ App.prototype.showSplash = function(force)
 	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);
 	}
@@ -3688,7 +3689,7 @@ App.prototype.showSplash = function(force)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -3696,7 +3697,7 @@ App.prototype.addLanguageMenu = function(elt, addLabel)
 {
 	var img = null;
 	var langMenu = this.menus.get('language');
-	
+
 	if (langMenu != null)
 	{
 		img = document.createElement('div');
@@ -3706,7 +3707,7 @@ App.prototype.addLanguageMenu = function(elt, addLabel)
 		img.style.cursor = 'pointer';
 		img.style.bottom = '20px';
 		img.style.right = '20px';
-		
+
 		if (addLabel)
 		{
 			img.style.direction = 'rtl';
@@ -3719,11 +3720,11 @@ App.prototype.addLanguageMenu = function(elt, addLabel)
 			label.style.margin = '5px 24px 0 0';
 			label.style.color = 'gray';
 			label.style.userSelect = 'none';
-			
+
 			mxUtils.write(label, mxResources.get('language'));
 			img.appendChild(label);
 		}
-		
+
 		mxEvent.addListener(img, 'click', mxUtils.bind(this, function(evt)
 		{
 			this.editor.graph.popupMenuHandler.hideMenu();
@@ -3732,24 +3733,24 @@ App.prototype.addLanguageMenu = function(elt, addLabel)
 			menu.smartSeparators = true;
 			menu.showDisabled = true;
 			menu.autoExpand = true;
-			
+
 			// Disables autoexpand and destroys menu when hidden
 			menu.hideMenu = mxUtils.bind(this, function()
 			{
 				mxPopupMenu.prototype.hideMenu.apply(menu, arguments);
 				menu.destroy();
 			});
-	
+
 			var offset = mxUtils.getOffset(img);
 			menu.popup(offset.x, offset.y + img.offsetHeight, null, evt);
-			
+
 			// Allows hiding by clicking on document
 			this.setCurrentMenu(menu);
 		}));
-	
+
 		elt.appendChild(img);
 	}
-	
+
 	return img;
 };
 
@@ -3762,13 +3763,13 @@ App.prototype.loadFileSystemEntry = function(fileHandle, success, error)
 	{
 		this.handleError(e);
 	});
-	
+
 	try
 	{
 		fileHandle.getFile().then(mxUtils.bind(this, function(file)
 		{
 			var reader = new FileReader();
-					
+
 			reader.onload = mxUtils.bind(this, function(e)
 			{
 				try
@@ -3776,12 +3777,12 @@ App.prototype.loadFileSystemEntry = function(fileHandle, success, error)
 					if (success != null)
 					{
 						var data = e.target.result;
-						
+
 						if (file.type == 'image/png')
 						{
 							data = this.extractGraphModelFromPng(data);
 						}
-	
+
 						success(new LocalFile(this, data, file.name, null, fileHandle, file));
 					}
 					else
@@ -3794,9 +3795,9 @@ App.prototype.loadFileSystemEntry = function(fileHandle, success, error)
 					error(e);
 				}
 			});
-			
+
 			reader.onerror = error;
-			
+
 			if ((file.type.substring(0, 5) === 'image' ||
 				file.type === 'application/pdf') &&
 				file.type.substring(0, 9) !== 'image/svg')
@@ -3822,24 +3823,24 @@ App.prototype.createFileSystemOptions = function(name)
 {
 	var ext = [];
 	var temp = null;
-		
+
 	if (name != null)
 	{
 		var idx = name.lastIndexOf('.');
-		
+
 		if (idx > 0)
 		{
 			temp = name.substring(idx + 1);
 		}
 	}
-	
+
 	for (var i = 0; i < this.editor.diagramFileTypes.length; i++)
 	{
 		var obj = {description: mxResources.get(this.editor.diagramFileTypes[i].description) +
 			((mxClient.IS_MAC) ? ' (.' + this.editor.diagramFileTypes[i].extension + ')' : ''),
 			accept: {}};
 		obj.accept[this.editor.diagramFileTypes[i].mimeType] = ['.' + this.editor.diagramFileTypes[i].extension];
-		
+
 		if (this.editor.diagramFileTypes[i].extension == temp)
 		{
 			ext.splice(0, 0, obj);
@@ -3856,7 +3857,7 @@ App.prototype.createFileSystemOptions = function(name)
 			}
 		}
 	}
-	
+
 	// TODO: Specify default filename
 	return {types: ext, fileName: name};
 };
@@ -3873,9 +3874,9 @@ App.prototype.showSaveFilePicker = function(success, error, opts)
 			this.handleError(e);
 		}
 	});
-	
+
 	opts = (opts != null) ? opts : this.createFileSystemOptions();
-	
+
 	window.showSaveFilePicker(opts).then(mxUtils.bind(this, function(fileHandle)
 	{
 		if (fileHandle != null)
@@ -3890,7 +3891,7 @@ App.prototype.showSaveFilePicker = function(success, error, opts)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -3899,7 +3900,7 @@ App.prototype.pickFile = function(mode)
 	try
 	{
 		mode = (mode != null) ? mode : this.mode;
-		
+
 		if (mode == App.MODE_GOOGLE)
 		{
 			if (this.drive != null && typeof(google) != 'undefined' && typeof(google.picker) != 'undefined')
@@ -3914,7 +3915,7 @@ App.prototype.pickFile = function(mode)
 		else
 		{
 			var peer = this.getPeerForMode(mode);
-			
+
 			if (peer != null)
 			{
 				peer.pickFile();
@@ -3938,17 +3939,17 @@ App.prototype.pickFile = function(mode)
 			}
 			else if (mode == App.MODE_DEVICE && Graph.fileSupport)
 			{
-				if (this.openFileInputElt == null) 
+				if (this.openFileInputElt == null)
 				{
 					var input = document.createElement('input');
 					input.setAttribute('type', 'file');
-					
+
 					mxEvent.addListener(input, 'change', mxUtils.bind(this, function()
 					{
 						if (input.files != null)
 						{
 							this.openFiles(input.files);
-							
+
 				    		// Resets input to force change event for
 							// same file (type reset required for IE)
 							input.type = '';
@@ -3956,12 +3957,12 @@ App.prototype.pickFile = function(mode)
 				    		input.value = '';
 						}
 					}));
-					
+
 					input.style.display = 'none';
 					document.body.appendChild(input);
 					this.openFileInputElt = input;
 				}
-				
+
 				this.openFileInputElt.click();
 			}
 			else
@@ -3970,26 +3971,26 @@ App.prototype.pickFile = function(mode)
 				window.openNew = this.getCurrentFile() != null && !this.isDiagramEmpty();
 				window.baseUrl = this.getUrl();
 				window.openKey = 'open';
-				
-				window.listBrowserFiles = mxUtils.bind(this, function(success, error) 
+
+				window.listBrowserFiles = mxUtils.bind(this, function(success, error)
 				{
 					StorageFile.listFiles(this, 'F', success, error);
 				});
-				
+
 				window.openBrowserFile = mxUtils.bind(this, function(title, success, error)
 				{
 					StorageFile.getFileContent(this, title, success, error);
 				});
-				
+
 				window.deleteBrowserFile = mxUtils.bind(this, function(title, success, error)
 				{
 					StorageFile.deleteFile(this, title, success, error);
 				});
-				
+
 				var prevValue = Editor.useLocalStorage;
 				Editor.useLocalStorage = (mode == App.MODE_BROWSER);
 				this.openFile();
-				
+
 				// Installs local handler for opened files in same window
 				window.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
 				{
@@ -3997,19 +3998,19 @@ App.prototype.pickFile = function(mode)
 					{
 						// Replaces PNG with XML extension
 						var dot = !this.useCanvasForExport && filename.substring(filename.length - 4) == '.png';
-						
+
 						if (dot)
 						{
 							filename = filename.substring(0, filename.length - 4) + '.drawio';
 						}
-		
+
 						this.fileLoaded((mode == App.MODE_BROWSER) ?
 							new StorageFile(this, xml, filename) :
 							new LocalFile(this, xml, filename));
 					});
-					
+
 					var currentFile = this.getCurrentFile();
-					
+
 					if (currentFile == null || !currentFile.isModified())
 					{
 						doOpenFile();
@@ -4020,16 +4021,16 @@ App.prototype.pickFile = function(mode)
 							mxResources.get('cancel'), mxResources.get('discardChanges'));
 					}
 				}));
-				
+
 				// Extends dialog close to show splash screen
 				var dlg = this.dialog;
 				var dlgClose = dlg.close;
-				
+
 				this.dialog.close = mxUtils.bind(this, function(cancel)
 				{
 					Editor.useLocalStorage = prevValue;
 					dlgClose.apply(dlg, arguments);
-		
+
 					if (this.getCurrentFile() == null)
 					{
 						this.showSplash();
@@ -4046,14 +4047,14 @@ App.prototype.pickFile = function(mode)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
 App.prototype.pickLibrary = function(mode)
 {
 	mode = (mode != null) ? mode : this.mode;
-	
+
 	if (mode == App.MODE_GOOGLE || mode == App.MODE_DROPBOX || mode == App.MODE_ONEDRIVE ||
 		mode == App.MODE_GITHUB || mode == App.MODE_GITLAB || mode == App.MODE_TRELLO)
 	{
@@ -4063,7 +4064,7 @@ App.prototype.pickLibrary = function(mode)
 			((mode == App.MODE_GITLAB) ? this.gitLab :
 			((mode == App.MODE_TRELLO) ? this.trello :
 			this.dropbox))));
-		
+
 		if (peer != null)
 		{
 			peer.pickLibrary(mxUtils.bind(this, function(id, optionalFile)
@@ -4086,7 +4087,7 @@ App.prototype.pickLibrary = function(mode)
 						peer.getLibrary(id, mxUtils.bind(this, function(file)
 						{
 							this.spinner.stop();
-							
+
 							try
 							{
 								this.loadLibrary(file);
@@ -4106,11 +4107,11 @@ App.prototype.pickLibrary = function(mode)
 	}
 	else if (mode == App.MODE_DEVICE && Graph.fileSupport)
 	{
-		if (this.libFileInputElt == null) 
+		if (this.libFileInputElt == null)
 		{
 			var input = document.createElement('input');
 			input.setAttribute('type', 'file');
-			
+
 			mxEvent.addListener(input, 'change', mxUtils.bind(this, function()
 			{
 				if (input.files != null)
@@ -4120,7 +4121,7 @@ App.prototype.pickLibrary = function(mode)
 						(mxUtils.bind(this, function(file)
 						{
 							var reader = new FileReader();
-						
+
 							reader.onload = mxUtils.bind(this, function(e)
 							{
 								try
@@ -4132,54 +4133,54 @@ App.prototype.pickLibrary = function(mode)
 									this.handleError(e, mxResources.get('errorLoadingFile'));
 								}
 							});
-	
+
 							reader.readAsText(file);
 						}))(input.files[i]);
 					}
-					
+
 		    		// Resets input to force change event for same file (type reset required for IE)
 					input.type = '';
 					input.type = 'file';
 		    		input.value = '';
 				}
 			}));
-			
+
 			input.style.display = 'none';
 			document.body.appendChild(input);
 			this.libFileInputElt = input;
 		}
-		
+
 		this.libFileInputElt.click();
 	}
 	else
 	{
 		window.openNew = false;
 		window.openKey = 'open';
-		
-		window.listBrowserFiles = mxUtils.bind(this, function(success, error) 
+
+		window.listBrowserFiles = mxUtils.bind(this, function(success, error)
 		{
 			StorageFile.listFiles(this, 'L', success, error);
 		});
-		
+
 		window.openBrowserFile = mxUtils.bind(this, function(title, success, error)
 		{
 			StorageFile.getFileContent(this, title, success, error);
 		});
-		
+
 		window.deleteBrowserFile = mxUtils.bind(this, function(title, success, error)
 		{
 			StorageFile.deleteFile(this, title, success, error);
 		});
-		
+
 		var prevValue = Editor.useLocalStorage;
 		Editor.useLocalStorage = mode == App.MODE_BROWSER;
-		
+
 		// Closes dialog after open
 		window.openFile = new OpenFile(mxUtils.bind(this, function(cancel)
 		{
 			this.hideDialog(cancel);
 		}));
-		
+
 		window.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
 		{
 			try
@@ -4205,7 +4206,7 @@ App.prototype.pickLibrary = function(mode)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -4217,25 +4218,25 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
 		noSpin = (noSpin != null) ? noSpin : false;
 		noReload = (noReload != null) ? noReload : false;
 		var xml = this.createLibraryDataFromImages(images);
-		
+
 		var error = mxUtils.bind(this, function(resp)
 		{
 			this.spinner.stop();
-			
+
 			if (fn != null)
 			{
 				fn();
 			}
-			
+
 			this.handleError(resp, (resp != null) ? mxResources.get('errorSavingFile') : null);
 		});
-	
+
 		// Handles special case for local libraries
 		if (file == null && mode == App.MODE_DEVICE)
 		{
 			file = new LocalLibrary(this, xml, name);
 		}
-		
+
 		if (file == null)
 		{
 			this.pickFolder(mode, mxUtils.bind(this, function(folderId)
@@ -4299,7 +4300,7 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
 					var fn = mxUtils.bind(this, function()
 					{
 						var file = new StorageLibrary(this, xml, name);
-						
+
 						// Inserts data into local storage
 						file.saveFile(name, false, mxUtils.bind(this, function()
 						{
@@ -4307,7 +4308,7 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
 							this.libraryLoaded(file, images);
 						}), error);
 					});
-					
+
 					if (localStorage.getItem(name) == null)
 					{
 						fn();
@@ -4326,30 +4327,30 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
 		else if (noSpin || this.spinner.spin(document.body, mxResources.get('saving')))
 		{
 			file.setData(xml);
-			
+
 			var doSave = mxUtils.bind(this, function()
 			{
 				file.save(true, mxUtils.bind(this, function(resp)
 				{
 					this.spinner.stop();
 					this.hideDialog(true);
-					
+
 					if (!noReload)
 					{
 						this.libraryLoaded(file, images);
 					}
-					
+
 					if (fn != null)
 					{
 						fn();
 					}
 				}), error);
 			});
-			
+
 			if (name != file.getTitle())
 			{
 				var oldHash = file.getHash();
-				
+
 				file.rename(name, mxUtils.bind(this, function(resp)
 				{
 					// Change hash in stored settings
@@ -4358,12 +4359,12 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
 						mxSettings.removeCustomLibrary(oldHash);
 						mxSettings.addCustomLibrary(file.getHash());
 					}
-	
+
 					// Workaround for library files changing hash so
 					// the old library cannot be removed from the
 					// sidebar using the updated file in libraryLoaded
 					this.removeLibrarySidebar(oldHash);
-	
+
 					doSave();
 				}), error)
 			}
@@ -4385,7 +4386,7 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
 App.prototype.saveFile = function(forceDialog, success)
 {
 	var file = this.getCurrentFile();
-	
+
 	if (file != null)
 	{
 		// FIXME: Invoke for local files
@@ -4395,7 +4396,7 @@ App.prototype.saveFile = function(forceDialog, success)
 			{
 				file.removeDraft();
 			}
-			
+
 			if (this.getCurrentFile() != file && !file.isModified())
 			{
 				// Workaround for possible status update while save as dialog is showing
@@ -4409,13 +4410,13 @@ App.prototype.saveFile = function(forceDialog, success)
 					this.editor.setStatus('');
 				}
 			}
-			
+
 			if (success != null)
 			{
 				success();
 			}
 		});
-		
+
 		if (!forceDialog && file.getTitle() != null && file.invalidFileHandle == null && this.mode != null)
 		{
 			this.save(file.getTitle(), done);
@@ -4437,14 +4438,14 @@ App.prototype.saveFile = function(forceDialog, success)
 			var allowTab = !mxClient.IS_IOS || !navigator.standalone;
 			var prev = this.mode;
 			var serviceCount = this.getServiceCount(true);
-			
+
 			if (isLocalStorage)
 			{
 				serviceCount++;
 			}
-			
+
 			var rowLimit = (serviceCount <= 4) ? 2 : (serviceCount > 6 ? 4 : 3);
-			
+
 			var dlg = new CreateDialog(this, filename, mxUtils.bind(this, function(name, mode, input)
 			{
 				if (name != null && name.length > 0)
@@ -4460,7 +4461,7 @@ App.prototype.saveFile = function(forceDialog, success)
 						{
 							input.value = name.split('.').slice(0, -1).join('.');
 							input.focus();
-							
+
 							if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
 							{
 								input.select();
@@ -4474,7 +4475,7 @@ App.prototype.saveFile = function(forceDialog, success)
 					else
 					{
 						this.hideDialog();
-						
+
 						if (prev == null && mode == App.MODE_DEVICE)
 						{
 							if (file != null && EditorUi.nativeFileSupport)
@@ -4513,7 +4514,7 @@ App.prototype.saveFile = function(forceDialog, success)
 							{
 								window.openFile = null;
 							});
-							
+
 							// Do not use a filename to use undefined mode
 							window.openFile.setData(this.getFileData(true));
 							this.openLink(this.getUrl(window.location.pathname), null, true);
@@ -4547,7 +4548,7 @@ App.prototype.saveFile = function(forceDialog, success)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -4559,7 +4560,7 @@ App.prototype.loadTemplate = function(url, onload, onerror, templateFilename, as
 	var isVisioFilename = /(\.v(dx|sdx?))($|\?)/i.test(filterFn) ||
 		/(\.vs(x|sx?))($|\?)/i.test(filterFn);
 	var binary = /\.png$/i.test(filterFn) || /\.pdf$/i.test(filterFn);
-	
+
 	if (!this.editor.isCorsEnabledForUrl(realUrl))
 	{
 		base64 = binary || isVisioFilename;
@@ -4574,7 +4575,7 @@ App.prototype.loadTemplate = function(url, onload, onerror, templateFilename, as
 		{
 			var data = (!base64) ? responseData : ((window.atob && !mxClient.IS_IE && !mxClient.IS_IE11) ?
 				atob(responseData) : Base64.decode(responseData));
-			
+
 			if (isVisioFilename || this.isVisioData(data))
 			{
 				// Adds filename to control converter code
@@ -4589,7 +4590,7 @@ App.prototype.loadTemplate = function(url, onload, onerror, templateFilename, as
 						filterFn = this.isRemoteVisioData(data) ? 'raw.vsd' : 'raw.vsdx';
 					}
 				}
-				
+
 				this.importVisio(this.base64ToBlob(responseData.substring(responseData.indexOf(',') + 1)), function(xml)
 				{
 					onload(xml);
@@ -4630,7 +4631,7 @@ App.prototype.loadTemplate = function(url, onload, onerror, templateFilename, as
 				{
 					data = Editor.extractGraphModelFromPng(responseData);
 				}
-				
+
 				onload(data);
 			}
 		}
@@ -4644,7 +4645,7 @@ App.prototype.loadTemplate = function(url, onload, onerror, templateFilename, as
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -4682,7 +4683,7 @@ App.prototype.getPeerForMode = function(mode)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -4693,16 +4694,16 @@ App.prototype.createFile = function(title, data, libs, mode, done, replace, fold
 	if (title != null && this.spinner.spin(document.body, mxResources.get('inserting')))
 	{
 		data = (data != null) ? data : this.emptyDiagramXml;
-		
+
 		var complete = mxUtils.bind(this, function()
 		{
 			this.spinner.stop();
 		});
-		
+
 		var error = mxUtils.bind(this, function(resp)
 		{
 			complete();
-			
+
 			if (resp == null && this.getCurrentFile() == null && this.dialog == null)
 			{
 				this.showSplash();
@@ -4712,7 +4713,7 @@ App.prototype.createFile = function(title, data, libs, mode, done, replace, fold
 				this.handleError(resp);
 			}
 		});
-		
+
 		try
 		{
 			if (mode == App.MODE_GOOGLE && this.drive != null)
@@ -4721,7 +4722,7 @@ App.prototype.createFile = function(title, data, libs, mode, done, replace, fold
 				{
 					folderId = this.stateArg.folderId;
 				}
-	
+
 				this.drive.insertFile(title, data, folderId, mxUtils.bind(this, function(file)
 				{
 					complete();
@@ -4779,11 +4780,11 @@ App.prototype.createFile = function(title, data, libs, mode, done, replace, fold
 			else if (!tempFile && mode == App.MODE_DEVICE && EditorUi.nativeFileSupport)
 			{
 				complete();
-				
+
 				this.showSaveFilePicker(mxUtils.bind(this, function(fileHandle, desc)
 				{
 					var file = new LocalFile(this, data, desc.name, null, fileHandle, desc);
-					
+
 					file.saveFile(desc.name, false, mxUtils.bind(this, function()
 					{
 						this.fileCreated(file, libs, replace, done, clibs);
@@ -4812,14 +4813,14 @@ App.prototype.createFile = function(title, data, libs, mode, done, replace, fold
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
 App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 {
 	var url = window.location.pathname;
-	
+
 	if (libs != null && libs.length > 0)
 	{
 		url += '?libs=' + libs;
@@ -4829,7 +4830,7 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 	{
 		url += '?clibs=' + clibs;
 	}
-	
+
 	url = this.getUrl(url);
 
 	// Always opens a new tab for local files to avoid losing changes
@@ -4848,7 +4849,7 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 		var redirect = window.location.protocol + '//' + window.location.hostname + url;
 		var node = dataNode;
 		var graph = null;
-		
+
 		// Handles special case where SVG files need a rendered graph to be saved
 		if (dataNode != null && /\.svg$/i.test(file.getTitle()))
 		{
@@ -4856,7 +4857,7 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 			document.body.appendChild(graph.container);
 			node = this.decodeNodeIntoGraph(node, graph);
 		}
-		
+
 		file.setData(this.createFileData(dataNode, graph, file, redirect));
 
 		if (graph != null)
@@ -4868,43 +4869,43 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 		{
 			this.spinner.stop();
 		});
-		
+
 		var fn = mxUtils.bind(this, function()
 		{
 			complete();
-			
+
 			var currentFile = this.getCurrentFile();
-			
+
 			if (replace == null && currentFile != null)
 			{
 				replace = !currentFile.isModified() && currentFile.getMode() == null;
 			}
-			
+
 			var fn3 = mxUtils.bind(this, function()
 			{
 				window.openFile = null;
 				this.fileLoaded(file);
-				
+
 				if (replace)
 				{
 					file.addAllSavedStatus();
 				}
-				
+
 				if (libs != null)
 				{
 					this.sidebar.showEntries(libs);
 				}
-				
+
 				if (clibs != null)
 				{
 					var temp = [];
 					var tokens = clibs.split(';');
-					
+
 					for (var i = 0; i < tokens.length; i++)
 					{
 						temp.push(decodeURIComponent(tokens[i]));
 					}
-					
+
 					this.loadLibraries(temp);
 				}
 			});
@@ -4926,7 +4927,7 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 			{
 				done();
 			}
-			
+
 			// Opens the file in a new window
 			if (replace != null && !replace)
 			{
@@ -4937,7 +4938,7 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 					{
 						window.openFile = null;
 					});
-						
+
 					window.openFile.setData(file.getData(), file.getTitle(), file.getMode() == null);
 				}
 
@@ -4945,7 +4946,7 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 				{
 					done();
 				}
-				
+
 				window.openWindow(url, null, fn2);
 			}
 			else
@@ -4953,7 +4954,7 @@ App.prototype.fileCreated = function(file, libs, replace, done, clibs)
 				fn2();
 			}
 		});
-		
+
 		// Updates data in memory for local files
 		if (file.constructor == LocalFile)
 		{
@@ -5422,19 +5423,19 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 };
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
 App.prototype.getLibraryStorageHint = function(file)
 {
 	var tip = file.getTitle();
-	
+
 	if (file.constructor != LocalLibrary)
 	{
 		tip += '\n' + file.getHash();
 	}
-	
+
 	if (file.constructor == DriveLibrary)
 	{
 		tip += ' (' + mxResources.get('googleDrive') + ')';
@@ -5502,7 +5503,7 @@ App.prototype.loadLibraries = function(libs, done)
 		{
 			this.loadedLibraries = new Object();
 		}
-		
+
 		// Ignores this library next time
 		var ignore = mxUtils.bind(this, function(id, keep)
 		{
@@ -5533,20 +5534,20 @@ App.prototype.loadLibraries = function(libs, done)
 						}
 					}
 				}
-				
+
 				if (done != null)
 				{
 					done();
 				}
 			}
 		});
-		
+
 		if (libs != null)
 		{
 			for (var i = 0; i < libs.length; i++)
 			{
 				var name = encodeURIComponent(decodeURIComponent(libs[i]));
-				
+
 				(mxUtils.bind(this, function(id, index)
 				{
 					if (id != null && id.length > 0 && this.loadedLibraries[id] == null &&
@@ -5555,23 +5556,23 @@ App.prototype.loadLibraries = function(libs, done)
 						// Waits for all libraries to load
 						this.loadedLibraries[id] = true;
 						waiting++;
-						
+
 						var onload = mxUtils.bind(this, function(file)
 						{
 							files[index] = file;
 							waiting--;
 							checkDone();
 						});
-						
+
 						var onerror = mxUtils.bind(this, function(keep)
 						{
 							ignore(id, keep);
 							waiting--;
 							checkDone();
 						});
-						
+
 						var service = id.substring(0, 1);
-						
+
 						if (service == 'L')
 						{
 							if (isLocalStorage || mxClient.IS_CHROMEAPP)
@@ -5582,14 +5583,14 @@ App.prototype.loadLibraries = function(libs, done)
 									try
 									{
 										var name = decodeURIComponent(id.substring(1));
-										
+
 										StorageFile.getFileContent(this, name, mxUtils.bind(this, function(xml)
 										{
 											if (name == '.scratchpad' && xml == null)
 											{
 												xml = this.emptyLibraryXml;
 											}
-											
+
 											if (xml != null)
 											{
 												onload(new StorageLibrary(this, xml, name));
@@ -5610,7 +5611,7 @@ App.prototype.loadLibraries = function(libs, done)
 						else if (service == 'U')
 						{
 							var url = decodeURIComponent(id.substring(1));
-							
+
 							if (!this.isOffline())
 							{
 								this.loadTemplate(url, mxUtils.bind(this, function(text)
@@ -5633,16 +5634,16 @@ App.prototype.loadLibraries = function(libs, done)
 						else if (service == 'R')
 						{
 							var libDesc = decodeURIComponent(id.substring(1));
-							
+
 							try
 							{
 								libDesc = JSON.parse(libDesc);
 								var libObj = {
-									id: libDesc[0], 
-			               			title: libDesc[1], 
+									id: libDesc[0],
+			               			title: libDesc[1],
 			               			downloadUrl: libDesc[2]
 								}
-								
+
 								this.remoteInvoke('getFileContent', [libObj.downloadUrl], null, mxUtils.bind(this, function(libContent)
 								{
 									try
@@ -5680,7 +5681,7 @@ App.prototype.loadLibraries = function(libs, done)
 						else
 						{
 							var peer = null;
-							
+
 							if (service == 'G')
 							{
 								if (this.drive != null && this.drive.user != null)
@@ -5716,7 +5717,7 @@ App.prototype.loadLibraries = function(libs, done)
 									peer = this.oneDrive;
 								}
 							}
-							
+
 							if (peer != null)
 							{
 								peer.getLibrary(decodeURIComponent(id.substring(1)), mxUtils.bind(this, function(file)
@@ -5742,7 +5743,7 @@ App.prototype.loadLibraries = function(libs, done)
 					}
 				}))(name, i);
 			}
-			
+
 			checkDone();
 		}
 		else
@@ -5754,7 +5755,7 @@ App.prototype.loadLibraries = function(libs, done)
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -5763,7 +5764,7 @@ App.prototype.updateButtonContainer = function()
 	if (this.buttonContainer != null)
 	{
 		var file = this.getCurrentFile();
-		
+
 		if (urlParams['embed'] == '1')
 		{
 			if (uiTheme == 'atlas' || urlParams['atlas'] == '1')
@@ -5778,7 +5779,7 @@ App.prototype.updateButtonContainer = function()
 				this.buttonContainer.style.paddingTop = '6px';
 			}
 		}
-		
+
 		// Comments
 		if (this.commentsSupported() && urlParams['sketch'] != '1')
 		{
@@ -5791,7 +5792,7 @@ App.prototype.updateButtonContainer = function()
 					'margin-right:4px;float:left;cursor:pointer;width:24px;height:24px;background-size:24px 24px;' +
 					'background-position:center center;background-repeat:no-repeat;background-image:' +
 					'url(' + Editor.commentImage + ');';
-				
+
 				if (uiTheme == 'atlas')
 				{
 					this.commentButton.style.marginRight = '10px';
@@ -5809,14 +5810,14 @@ App.prototype.updateButtonContainer = function()
 				{
 					this.commentButton.style.marginTop = '-5px';
 				}
-				
+
 				mxEvent.addListener(this.commentButton, 'click', mxUtils.bind(this, function()
 				{
 					this.actions.get('comments').funct();
 				}));
-				
+
 				this.buttonContainer.appendChild(this.commentButton);
-				
+
 				if (uiTheme == 'dark' || uiTheme == 'atlas')
 				{
 					this.commentButton.style.filter = 'invert(100%)';
@@ -5828,7 +5829,7 @@ App.prototype.updateButtonContainer = function()
 			this.commentButton.parentNode.removeChild(this.commentButton);
 			this.commentButton = null;
 		}
-		
+
 		// Share
 		if (urlParams['embed'] != '1' && this.getServiceName() == 'draw.io' &&
 			!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp &&
@@ -5851,27 +5852,27 @@ App.prototype.updateButtonContainer = function()
 					this.shareButton.style.minWidth = '0px';
 					this.shareButton.style.cssFloat = 'right';
 					this.shareButton.setAttribute('title', mxResources.get('share'));
-					
+
 					var icon = document.createElement('img');
 					icon.setAttribute('src', this.shareImage);
 					icon.setAttribute('align', 'absmiddle');
 					icon.style.marginRight = '4px';
 					icon.style.marginTop = '-3px';
 					this.shareButton.appendChild(icon);
-					
+
 					if (!Editor.isDarkMode() && uiTheme != 'atlas')
 					{
 						this.shareButton.style.color = 'black';
 						icon.style.filter = 'invert(100%)';
 					}
-					
+
 					mxUtils.write(this.shareButton, mxResources.get('share'));
-					
+
 					mxEvent.addListener(this.shareButton, 'click', mxUtils.bind(this, function()
 					{
 						this.actions.get('share').funct();
 					}));
-					
+
 					this.buttonContainer.appendChild(this.shareButton);
 				}
 			}
@@ -5880,7 +5881,7 @@ App.prototype.updateButtonContainer = function()
 				this.shareButton.parentNode.removeChild(this.shareButton);
 				this.shareButton = null;
 			}
-			
+
 			//Fetch notifications
 			if (urlParams['extAuth'] != '1') //Disable notification with external auth (e.g, Teams app)
 			{
@@ -5899,32 +5900,32 @@ App.prototype.fetchAndShowNotification = function(target, subtarget)
 {
 	if (this.fetchingNotif)
 	{
-		return;	
+		return;
 	}
-	
+
 	target = target || 'online';
 	var cachedNotifKey = '.notifCache';
 	var cachedNotif = null;
-	
+
 	var processNotif = mxUtils.bind(this, function(notifs)
 	{
 		notifs = notifs.filter(function(notif)
 		{
-			return !notif.targets || notif.targets.indexOf(target) > -1 || 
+			return !notif.targets || notif.targets.indexOf(target) > -1 ||
 						(subtarget != null && notif.targets.indexOf(subtarget) > -1);
 		});
-		
+
 		var lsReadFlag = target + 'NotifReadTS';
 		var lastRead = (localStorage != null) ? parseInt(localStorage.getItem(lsReadFlag)) : true;
-				
+
 		for (var i = 0; i < notifs.length; i++)
 		{
 			notifs[i].isNew = (!lastRead || notifs[i].timestamp > lastRead);
 		}
-		
+
 		this.showNotification(notifs, lsReadFlag);
 	});
-	
+
 	try
 	{
 		if (localStorage != null)
@@ -5933,7 +5934,7 @@ App.prototype.fetchAndShowNotification = function(target, subtarget)
 		}
 	}
 	catch(e) {} //Ignore
-	
+
 	if (cachedNotif == null || cachedNotif.ts + 24 * 60 * 60 * 1000 < Date.now()) //Cache for one day
 	{
 		this.fetchingNotif = true;
@@ -5943,7 +5944,7 @@ App.prototype.fetchAndShowNotification = function(target, subtarget)
 			if (req.getStatus() >= 200 && req.getStatus() <= 299)
 			{
 			    var notifs = JSON.parse(req.getText());
-				
+
 				//Process and sort
 				notifs.sort(function(a, b)
 				{
@@ -5954,8 +5955,8 @@ App.prototype.fetchAndShowNotification = function(target, subtarget)
 				{
 					localStorage.setItem(cachedNotifKey, JSON.stringify({ts: Date.now(), notifs: notifs}));
 				}
-				
-				this.fetchingNotif = false;	
+
+				this.fetchingNotif = false;
 				processNotif(notifs);
 			}
 		}));
@@ -5990,19 +5991,19 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 			this.notificationBtn.style.display = 'none';
 			this.editor.fireEvent(new mxEventObject('statusChanged'));
 		}
-		
+
 		return;
 	}
-	
+
 	function shouldAnimate(newNotif)
 	{
 		var countEl = document.querySelector('.geNotification-count');
-		
+
 		if (countEl == null)
 		{
 			return;
 		}
-		
+
 		countEl.innerHTML = newNotif;
 		countEl.style.display = newNotif == 0? 'none' : '';
 		var notifBell = document.querySelector('.geNotification-bell');
@@ -6010,28 +6011,28 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 		notifBell.className = 'geNotification-bell' + (newNotif == 0? ' geNotification-bellOff' : '');
 		document.querySelector('.geBell-rad').style.animation = newNotif == 0? 'none' : '';
 	}
-	
+
 	var markAllAsRead = mxUtils.bind(this, function()
 	{
 		this.notificationWin.style.display = 'none';
 		var unread = this.notificationWin.querySelectorAll('.circle.active');
-		
+
 		for (var i = 0; i < unread.length; i++)
 		{
 			unread[i].className = 'circle';
 		}
-		
+
 		if (isLocalStorage && notifs[0])
 		{
 			localStorage.setItem(lsReadFlag, notifs[0].timestamp);
 		}
 	});
-	
+
 	if (this.notificationBtn == null)
 	{
 		this.notificationBtn = document.createElement('div');
 		this.notificationBtn.className = 'geNotification-box';
-		
+
 		if (uiTheme == 'min')
 		{
 			this.notificationBtn.style.width = '30px';
@@ -6041,11 +6042,11 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 		{
 			this.notificationBtn.style.top = '2px';
 		}
-		
+
 		var notifCount = document.createElement('span');
 		notifCount.className = 'geNotification-count';
 		this.notificationBtn.appendChild(notifCount);
-		
+
 		var notifBell = document.createElement('div');
 		notifBell.className = 'geNotification-bell';
 		notifBell.style.opacity = uiTheme == 'min'? '0.5' : '';
@@ -6062,15 +6063,15 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 		bellPart.className = 'geBell-rad';
 		notifBell.appendChild(bellPart);
 		this.notificationBtn.appendChild(notifBell);
-		
+
 		//Add as first child such that it is the left-most one
 		this.buttonContainer.insertBefore(this.notificationBtn, this.buttonContainer.firstChild);
-		
+
 		this.notificationWin = document.createElement('div');
 		this.notificationWin.className = 'geNotifPanel';
 		this.notificationWin.style.display = 'none';
 		document.body.appendChild(this.notificationWin);
-		
+
 		var winHeader = document.createElement('div');
 		winHeader.className = 'header';
 		var winTitle = document.createElement('span');
@@ -6082,7 +6083,7 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 		winClose.textContent = 'x';
 		winHeader.appendChild(winClose);
 		this.notificationWin.appendChild(winHeader);
-		
+
 		var winBody = document.createElement('div');
 		winBody.className = 'notifications clearfix';
 		var notifList = document.createElement('div');
@@ -6090,7 +6091,7 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 		notifList.style.position = 'relative';
 		winBody.appendChild(notifList);
 		this.notificationWin.appendChild(winBody);
-		
+
 		mxEvent.addListener(this.notificationBtn, 'click', mxUtils.bind(this, function()
 		{
 			if (this.notificationWin.style.display == 'none')
@@ -6107,17 +6108,17 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 				markAllAsRead();
 			}
 		}));
-		
+
 		mxEvent.addListener(winClose, 'click', markAllAsRead);
 	}
 	else
 	{
 		this.notificationBtn.style.display = ''; //In case it was hidden
 	}
-		
+
 	var newNotif = 0;
 	var notifListEl = document.getElementById('geNotifList');
-	
+
 	if (notifListEl == null)
 	{
 		return; //This shouldn't happen and no meaning of continuing
@@ -6125,7 +6126,7 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 	else
 	{
 		notifListEl.innerHTML = '<div class="line"></div>';
-		
+
 		for (var i = 0; i < notifs.length; i++)
 		{
 			(function(editorUi, notif)
@@ -6134,19 +6135,19 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 				{
 					newNotif++;
 				}
-				
+
 				var notifEl = document.createElement('div');
 				notifEl.className = 'notification';
 				var ts = new Date(notif.timestamp);
 				var str = editorUi.timeSince(ts);
-		
+
 				if (str == null)
 				{
 					str = mxResources.get('lessThanAMinute');
 				}
-				
-				notifEl.innerHTML = '<div class="circle' + (notif.isNew? ' active' : '') + '"></div><span class="time">' + 
-										mxUtils.htmlEntities(mxResources.get('timeAgo', [str], '{1} ago')) + '</span>' + 
+
+				notifEl.innerHTML = '<div class="circle' + (notif.isNew? ' active' : '') + '"></div><span class="time">' +
+										mxUtils.htmlEntities(mxResources.get('timeAgo', [str], '{1} ago')) + '</span>' +
 										'<p>' + mxUtils.htmlEntities(notif.content) + '</p>';
 				if (notif.link)
 				{
@@ -6155,18 +6156,18 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 						window.open(notif.link, 'notifWin');
 					});
 				}
-				
+
 				notifListEl.appendChild(notifEl);
 			})(this, notifs[i]);
 		}
 	}
-	
+
 	shouldAnimate(newNotif);
 };
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
@@ -6176,12 +6177,12 @@ App.prototype.save = function(name, done)
 	if (file != null && this.spinner.spin(document.body, mxResources.get('saving')))
 	{
 		this.editor.setStatus('');
-		
+
 		if (this.editor.graph.isEditing())
 		{
 			this.editor.graph.stopEditing();
 		}
-		
+
 		var success = mxUtils.bind(this, function()
 		{
 			file.handleFileSuccess(true);
@@ -6191,7 +6192,7 @@ App.prototype.save = function(name, done)
 				done();
 			}
 		});
-		
+
 		var error = mxUtils.bind(this, function(err)
 		{
 			if (file.isModified())
@@ -6201,10 +6202,10 @@ App.prototype.save = function(name, done)
 					this.save(name, done);
 				}));
 			}
-			
+
 			file.handleFileError(err, err == null || err.name != 'AbortError');
 		});
-		
+
 		try
 		{
 			if (name == file.getTitle())
@@ -6234,23 +6235,23 @@ App.prototype.pickFolder = function(mode, fn, enabled, direct, force)
 {
 	enabled = (enabled != null) ? enabled : true;
 	var resume = this.spinner.pause();
-	
+
 	if (enabled && mode == App.MODE_GOOGLE && this.drive != null)
 	{
 		// Shows a save dialog
 		this.drive.pickFolder(mxUtils.bind(this, function(evt)
 		{
 			resume();
-			
+
 			if (evt.action == google.picker.Action.PICKED)
 			{
 				var folderId = null;
-				
+
 				if (evt.docs != null && evt.docs.length > 0 && evt.docs[0].type == 'folder')
 				{
 					folderId = evt.docs[0].id;
 				}
-				
+
 				fn(folderId);
 			}
 		}), force);
@@ -6261,7 +6262,7 @@ App.prototype.pickFolder = function(mode, fn, enabled, direct, force)
 		{
 			var folderId = null;
 			resume();
-			
+
 			if (files != null && files.value != null && files.value.length > 0)
 			{
 				folderId = OneDriveFile.prototype.getIdOf(files.value[0]);
@@ -6300,7 +6301,7 @@ App.prototype.pickFolder = function(mode, fn, enabled, direct, force)
 };
 
 /**
- * 
+ *
  */
 App.prototype.exportFile = function(data, filename, mimeType, base64Encoded, mode, folderId)
 {
@@ -6330,12 +6331,12 @@ App.prototype.exportFile = function(data, filename, mimeType, base64Encoded, mod
 				// "File exported. Click here to open folder."
 //				this.editor.setStatus('<div class="geStatusMessage">' +
 //					mxResources.get('saved') + '</div>');
-//				
+//
 //				// Installs click handler for opening
 //				if (this.statusContainer != null)
 //				{
 //					var links = this.statusContainer.getElementsByTagName('div');
-//					
+//
 //					if (links.length > 0)
 //					{
 //						links[0].style.cursor = 'pointer';
@@ -6349,7 +6350,7 @@ App.prototype.exportFile = function(data, filename, mimeType, base64Encoded, mod
 //						}));
 //					}
 //				}
-				
+
 				this.spinner.stop();
 			}), mxUtils.bind(this, function(resp)
 			{
@@ -6425,7 +6426,7 @@ App.prototype.exportFile = function(data, filename, mimeType, base64Encoded, mod
 		{
 			localStorage.setItem(filename, data);
 		});
-		
+
 		if (localStorage.getItem(filename) == null)
 		{
 			fn();
@@ -6439,14 +6440,14 @@ App.prototype.exportFile = function(data, filename, mimeType, base64Encoded, mod
 
 /**
  * Translates this point by the given vector.
- * 
+ *
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
 App.prototype.descriptorChanged = function()
 {
 	var file = this.getCurrentFile();
-	
+
 	if (file != null)
 	{
 		if (this.fname != null)
@@ -6457,23 +6458,23 @@ App.prototype.descriptorChanged = function()
 			mxUtils.write(this.fname, filename);
 			this.fname.setAttribute('title', filename + ' - ' + mxResources.get('rename'));
 		}
-		
+
 		var graph = this.editor.graph;
 		var editable = file.isEditable() && !file.invalidChecksum;
-		
+
 		if (graph.isEnabled() && !editable)
 		{
 			graph.reset();
 		}
-		
+
 		graph.setEnabled(editable);
-		
+
 		// Ignores title and hash for revisions
 		if (urlParams['rev'] == null)
 		{
 			this.updateDocumentTitle();
 			var newHash = file.getHash();
-			
+
 			if (newHash.length > 0)
 			{
 				window.location.hash = newHash;
@@ -6484,9 +6485,9 @@ App.prototype.descriptorChanged = function()
 			}
 		}
 	}
-	
+
 	this.updateUi();
-	
+
 	// Refresh if editable state has changed
 	if (this.format != null && (file == null ||
 		this.fileEditable != file.isEditable()) &&
@@ -6495,7 +6496,7 @@ App.prototype.descriptorChanged = function()
 		this.format.refresh();
 		this.fileEditable = (file != null) ? file.isEditable() : null;
 	}
-	
+
 	this.fireEvent(new mxEventObject('fileDescriptorChanged', 'file', file));
 };
 
@@ -6505,7 +6506,7 @@ App.prototype.descriptorChanged = function()
 App.prototype.showAuthDialog = function(peer, showRememberOption, fn, closeFn)
 {
 	var resume = this.spinner.pause();
-	
+
 	this.showDialog(new AuthDialog(this, peer, showRememberOption, mxUtils.bind(this, function(remember)
 	{
 		try
@@ -6529,7 +6530,7 @@ App.prototype.showAuthDialog = function(peer, showRememberOption, fn, closeFn)
 		{
 			closeFn(cancel);
 		}
-		
+
 		if (cancel && this.getCurrentFile() == null && this.dialog == null)
 		{
 			this.showSplash();
@@ -6545,32 +6546,32 @@ App.prototype.showAuthDialog = function(peer, showRememberOption, fn, closeFn)
 App.prototype.convertFile = function(url, filename, mimeType, extension, success, error, executeRequest, headers)
 {
 	var name = filename;
-	
+
 	// SVG file extensions are valid and needed for image import
 	if (!/\.svg$/i.test(name))
 	{
 		name = name.substring(0, filename.lastIndexOf('.')) + extension;
 	}
-	
+
 	var gitHubUrl = false;
-	
+
 	if (this.gitHub != null && url.substring(0, this.gitHub.baseUrl.length) == this.gitHub.baseUrl)
 	{
 		gitHubUrl = true;
 	}
-	
+
 	// Workaround for wrong binary response with VSD(X) & VDX files
 	if (/\.v(dx|sdx?)$/i.test(filename) && Graph.fileSupport && new XMLHttpRequest().upload &&
 		typeof new XMLHttpRequest().responseType === 'string')
 	{
 		var req = new XMLHttpRequest();
 		req.open('GET', url, true);
-		
+
 		if (!gitHubUrl)
 		{
 			req.responseType = 'blob';
 		}
-		
+
 		if (headers)
 		{
 			for (var key in headers)
@@ -6578,13 +6579,13 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 				req.setRequestHeader(key, headers[key]);
 			}
 		}
-		
+
 		req.onload = mxUtils.bind(this, function()
 		{
 			if (req.status >= 200 && req.status <= 299)
 			{
 				var blob = null;
-				
+
 				if (gitHubUrl)
 				{
 					var file = JSON.parse(req.responseText);
@@ -6594,7 +6595,7 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 				{
 					blob = new Blob([req.response], {type: 'application/octet-stream'});
 				}
-				
+
 				this.importVisio(blob, mxUtils.bind(this, function(xml)
 				{
 					success(new LocalFile(this, xml, name, true));
@@ -6618,7 +6619,7 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 				if (/\.pdf$/i.test(filename))
 				{
 					var temp = Editor.extractGraphModelFromPdf(data);
-						
+
 					if (temp != null && temp.length > 0)
 					{
 						success(new LocalFile(this, temp, name, true));
@@ -6627,7 +6628,7 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 				else if (/\.png$/i.test(filename))
 				{
 					var temp = this.extractGraphModelFromPng(data);
-					
+
 					if (temp != null)
 					{
 						success(new LocalFile(this, temp, name, true));
@@ -6671,7 +6672,7 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 		var binary = /\.png$/i.test(filename) || /\.jpe?g$/i.test(filename) ||
 		 	/\.pdf$/i.test(filename) || (mimeType != null &&
 		 	mimeType.substring(0, 6) == 'image/');
-		
+
 		// NOTE: Cannot force non-binary request via loadUrl so needs separate
 		// code as decoding twice on content with binary data did not work
 		if (gitHubUrl)
@@ -6684,16 +6685,16 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 			    	{
 				    	var file = JSON.parse(req.getText());
 				    	var data = file.content;
-				    	
+
 				    	if (file.encoding === 'base64')
 				    	{
 				    		if (/\.png$/i.test(filename))
 					    	{
-					    		data = 'data:image/png;base64,' + data;	
+					    		data = 'data:image/png;base64,' + data;
 					    	}
 				    		else if (/\.pdf$/i.test(filename))
 					    	{
-					    		data = 'data:application/pdf;base64,' + data;	
+					    		data = 'data:application/pdf;base64,' + data;
 					    	}
 				    		else
 					    	{
@@ -6701,7 +6702,7 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 					    		data = (window.atob && !mxClient.IS_IE && !mxClient.IS_IE11) ? atob(data) : Base64.decode(data);
 					    	}
 				    	}
-				    	
+
 				    	handleData(data);
 			    	}
 				}
@@ -6736,7 +6737,7 @@ App.prototype.convertFile = function(url, filename, mimeType, extension, success
 
 /**
  * Adds the listener for automatically saving the diagram for local changes.
- */ 
+ */
 App.prototype.updateHeader = function()
 {
 	if (this.menubar != null)
@@ -6749,40 +6750,40 @@ App.prototype.updateHeader = function()
 		this.appIcon.style.margin = '14px 0px 8px 16px';
 		this.appIcon.style.opacity = '0.85';
 		this.appIcon.style.borderRadius = '3px';
-		
+
 		if (uiTheme != 'dark')
 		{
 			this.appIcon.style.backgroundColor = '#f08705';
 		}
-		
+
 		mxEvent.disableContextMenu(this.appIcon);
-		
+
 		mxEvent.addListener(this.appIcon, 'click', mxUtils.bind(this, function(evt)
 		{
 			this.appIconClicked(evt);
 		}));
-		
+
 		// LATER: Use Alpha image loader in IE6
 		// NOTE: This uses the diagram bit of the old logo as it looks better in this case
 		//this.appIcon.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + IMAGE_PATH + '/logo-white.png,sizingMethod=\'scale\')';
 		var logo = (!mxClient.IS_SVG) ? 'url(\'' + IMAGE_PATH + '/logo-white.png\')' :
 			((uiTheme == 'dark') ? 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzA2LjE4NSAxMjAuMjk2IgogICB2aWV3Qm94PSIyNCAyNiA2OCA2OCIKICAgeT0iMHB4IgogICB4PSIwcHgiCiAgIHZlcnNpb249IjEuMSI+CiAgIAkgPGc+PGxpbmUKICAgICAgIHkyPSI3Mi4zOTQiCiAgICAgICB4Mj0iNDEuMDYxIgogICAgICAgeTE9IjQzLjM4NCIKICAgICAgIHgxPSI1OC4wNjkiCiAgICAgICBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiCiAgICAgICBzdHJva2Utd2lkdGg9IjMuNTUyOCIKICAgICAgIHN0cm9rZT0iI0ZGRkZGRiIKICAgICAgIGZpbGw9Im5vbmUiIC8+PGxpbmUKICAgICAgIHkyPSI3Mi4zOTQiCiAgICAgICB4Mj0iNzUuMDc2IgogICAgICAgeTE9IjQzLjM4NCIKICAgICAgIHgxPSI1OC4wNjgiCiAgICAgICBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiCiAgICAgICBzdHJva2Utd2lkdGg9IjMuNTAwOCIKICAgICAgIHN0cm9rZT0iI0ZGRkZGRiIKICAgICAgIGZpbGw9Im5vbmUiIC8+PGc+PHBhdGgKICAgICAgICAgZD0iTTUyLjc3Myw3Ny4wODRjMCwxLjk1NC0xLjU5OSwzLjU1My0zLjU1MywzLjU1M0gzNi45OTljLTEuOTU0LDAtMy41NTMtMS41OTktMy41NTMtMy41NTN2LTkuMzc5ICAgIGMwLTEuOTU0LDEuNTk5LTMuNTUzLDMuNTUzLTMuNTUzaDEyLjIyMmMxLjk1NCwwLDMuNTUzLDEuNTk5LDMuNTUzLDMuNTUzVjc3LjA4NHoiCiAgICAgICAgIGZpbGw9IiNGRkZGRkYiIC8+PC9nPjxnCiAgICAgICBpZD0iZzM0MTkiPjxwYXRoCiAgICAgICAgIGQ9Ik02Ny43NjIsNDguMDc0YzAsMS45NTQtMS41OTksMy41NTMtMy41NTMsMy41NTNINTEuOTg4Yy0xLjk1NCwwLTMuNTUzLTEuNTk5LTMuNTUzLTMuNTUzdi05LjM3OSAgICBjMC0xLjk1NCwxLjU5OS0zLjU1MywzLjU1My0zLjU1M0g2NC4yMWMxLjk1NCwwLDMuNTUzLDEuNTk5LDMuNTUzLDMuNTUzVjQ4LjA3NHoiCiAgICAgICAgIGZpbGw9IiNGRkZGRkYiIC8+PC9nPjxnPjxwYXRoCiAgICAgICAgIGQ9Ik04Mi43NTIsNzcuMDg0YzAsMS45NTQtMS41OTksMy41NTMtMy41NTMsMy41NTNINjYuOTc3Yy0xLjk1NCwwLTMuNTUzLTEuNTk5LTMuNTUzLTMuNTUzdi05LjM3OSAgICBjMC0xLjk1NCwxLjU5OS0zLjU1MywzLjU1My0zLjU1M2gxMi4yMjJjMS45NTQsMCwzLjU1MywxLjU5OSwzLjU1MywzLjU1M1Y3Ny4wODR6IgogICAgICAgICBmaWxsPSIjRkZGRkZGIiAvPjwvZz48L2c+PC9zdmc+)' :
 			'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjI1IDIyNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjI1IDIyNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MXtmaWxsOiNERjZDMEM7fQoJLnN0MntmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjI1LDIxNS40YzAsNS4zLTQuMyw5LjYtOS41LDkuNmwwLDBINzcuMWwtNDQuOC00NS41TDYwLjIsMTM0bDgyLjctMTAyLjdsODIuMSw4NC41VjIxNS40eiIvPgo8cGF0aCBjbGFzcz0ic3QyIiBkPSJNMTg0LjYsMTI1LjhoLTIzLjdsLTI1LTQyLjdjNS43LTEuMiw5LjgtNi4yLDkuNy0xMlYzOWMwLTYuOC01LjQtMTIuMy0xMi4yLTEyLjNoLTAuMUg5MS42CgljLTYuOCwwLTEyLjMsNS40LTEyLjMsMTIuMlYzOXYzMi4xYzAsNS44LDQsMTAuOCw5LjcsMTJsLTI1LDQyLjdINDAuNGMtNi44LDAtMTIuMyw1LjQtMTIuMywxMi4ydjAuMXYzMi4xCgljMCw2LjgsNS40LDEyLjMsMTIuMiwxMi4zaDAuMWg0MS43YzYuOCwwLDEyLjMtNS40LDEyLjMtMTIuMnYtMC4xdi0zMi4xYzAtNi44LTUuNC0xMi4zLTEyLjItMTIuM2gtMC4xaC00bDI0LjgtNDIuNGgxOS4zCglsMjQuOSw0Mi40SDE0M2MtNi44LDAtMTIuMyw1LjQtMTIuMywxMi4ydjAuMXYzMi4xYzAsNi44LDUuNCwxMi4zLDEyLjIsMTIuM2gwLjFoNDEuN2M2LjgsMCwxMi4zLTUuNCwxMi4zLTEyLjJ2LTAuMXYtMzIuMQoJYzAtNi44LTUuNC0xMi4zLTEyLjItMTIuM0MxODQuNywxMjUuOCwxODQuNywxMjUuOCwxODQuNiwxMjUuOHoiLz4KPC9zdmc+Cg==)');
-		this.appIcon.style.backgroundImage = logo;		
+		this.appIcon.style.backgroundImage = logo;
 		this.appIcon.style.backgroundPosition = 'center center';
 		this.appIcon.style.backgroundSize = '100% 100%';
 		this.appIcon.style.backgroundRepeat = 'no-repeat';
-		
+
 		mxUtils.setPrefixedStyle(this.appIcon.style, 'transition', 'all 125ms linear');
-	
+
 		mxEvent.addListener(this.appIcon, 'mouseover', mxUtils.bind(this, function()
 		{
 			var file = this.getCurrentFile();
-			
+
 			if (file != null)
 			{
 				var mode = file.getMode();
-				
+
 				if (mode == App.MODE_GOOGLE)
 				{
 					this.appIcon.style.backgroundImage = 'url(' + IMAGE_PATH + '/google-drive-logo-white.svg)';
@@ -6815,18 +6816,18 @@ App.prototype.updateHeader = function()
 				}
 			}
 		}));
-		
+
 		mxEvent.addListener(this.appIcon, 'mouseout', mxUtils.bind(this, function()
 		{
 			this.appIcon.style.backgroundImage = logo;
 			this.appIcon.style.backgroundSize = '90% 90%';
 		}));
-		
+
 		if (urlParams['embed'] != '1')
 		{
 			this.menubarContainer.appendChild(this.appIcon);
 		}
-	
+
 		this.fnameWrapper = document.createElement('div');
 		this.fnameWrapper.style.position = 'absolute';
 		this.fnameWrapper.style.right = '120px';
@@ -6836,7 +6837,7 @@ App.prototype.updateHeader = function()
 		this.fnameWrapper.style.display = 'none';
 		this.fnameWrapper.style.overflow = 'hidden';
 		this.fnameWrapper.style.textOverflow = 'ellipsis';
-		
+
 		this.fname = document.createElement('a');
 		this.fname.setAttribute('title', mxResources.get('rename'));
 		this.fname.className = 'geItem';
@@ -6844,18 +6845,18 @@ App.prototype.updateHeader = function()
 		this.fname.style.display = 'inline';
 		this.fname.style.fontSize = '18px';
 		this.fname.style.whiteSpace = 'nowrap';
-		
+
 		// Prevents focus
         mxEvent.addListener(this.fname, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
         	mxUtils.bind(this, function(evt)
         {
 			evt.preventDefault();
 		}));
-		
+
 		mxEvent.addListener(this.fname, 'click', mxUtils.bind(this, function(evt)
 		{
 			var file = this.getCurrentFile();
-			
+
 			if (file != null && file.isRenamable())
 			{
 				if (this.editor.graph.isEditing())
@@ -6865,23 +6866,23 @@ App.prototype.updateHeader = function()
 
 				this.actions.get('rename').funct();
 			}
-			
+
 			mxEvent.consume(evt);
 		}));
-		
+
 		this.fnameWrapper.appendChild(this.fname);
-		
+
 		if (urlParams['embed'] != '1')
 		{
 			this.menubarContainer.appendChild(this.fnameWrapper);
-		
+
 			this.menubar.container.style.position = 'absolute';
 			this.menubar.container.style.paddingLeft = '59px';
 			this.toolbar.container.style.paddingLeft = '16px';
 			this.menubar.container.style.boxSizing = 'border-box';
 			this.menubar.container.style.top = '34px';
 		}
-		
+
 		/**
 		 * Adds format panel toggle.
 		 */
@@ -6899,24 +6900,24 @@ App.prototype.updateHeader = function()
 		this.toggleFormatElement.style.backgroundPosition = '50% 50%';
 		this.toggleFormatElement.style.backgroundRepeat = 'no-repeat';
 		this.toolbarContainer.appendChild(this.toggleFormatElement);
-		
+
 		if (uiTheme == 'dark')
 		{
 			this.toggleFormatElement.style.filter = 'invert(100%)';
 		}
-		
+
 		// Prevents focus
 	    mxEvent.addListener(this.toggleFormatElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
         	mxUtils.bind(this, function(evt)
     	{
 			evt.preventDefault();
 		}));
-		
+
 		mxEvent.addListener(this.toggleFormatElement, 'click', mxUtils.bind(this, function(evt)
 		{
 			EditorUi.logEvent({category: 'TOOLBAR-ACTION-',
 				action: 'formatPanel'});
-		
+
 			this.actions.get('formatPanel').funct();
 			mxEvent.consume(evt);
 		}));
@@ -6932,7 +6933,7 @@ App.prototype.updateHeader = function()
 				this.toggleFormatElement.style.backgroundImage = 'url(\'' + this.formatHideImage + '\')';
 			}
 		});
-		
+
 		this.addListener('formatWidthChanged', toggleFormatPanel);
 		toggleFormatPanel();
 
@@ -6951,35 +6952,35 @@ App.prototype.updateHeader = function()
 		this.fullscreenElement.style.backgroundRepeat = 'no-repeat';
 		this.fullscreenElement.style.backgroundImage = 'url(\'' + this.fullscreenImage + '\')';
 		this.toolbarContainer.appendChild(this.fullscreenElement);
-		
+
 		// Prevents focus
 		mxEvent.addListener(this.fullscreenElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
         	mxUtils.bind(this, function(evt)
     	{
 			evt.preventDefault();
 		}));
-		
+
 		// Some style changes in Atlas theme
 		if (uiTheme == 'atlas')
 		{
 			mxUtils.setOpacity(this.toggleFormatElement, 70);
 			mxUtils.setOpacity(this.fullscreenElement, 70);
 		}
-		
+
 		var initialPosition = this.hsplitPosition;
 
 		if (uiTheme == 'dark')
 		{
 			this.fullscreenElement.style.filter = 'invert(100%)';
 		}
-		
+
 		mxEvent.addListener(this.fullscreenElement, 'click', mxUtils.bind(this, function(evt)
 		{
 			var visible = this.fullscreenMode;
 
 			EditorUi.logEvent({category: 'TOOLBAR-ACTION-',
 				action: 'fullscreen' , currentstate: visible});
-			
+
 			if (uiTheme != 'atlas' && urlParams['embed'] != '1')
 			{
 				this.toggleCompactMode(visible);
@@ -6989,7 +6990,7 @@ App.prototype.updateHeader = function()
 			{
 				initialPosition = this.hsplitPosition;
 			}
-			
+
 			this.hsplitPosition = (visible) ? initialPosition : 0;
 			this.toggleFormatPanel(visible);
 			this.fullscreenMode = !visible;
@@ -7015,22 +7016,22 @@ App.prototype.updateHeader = function()
 			this.toggleElement.style.fontSize = '14px';
 			this.toggleElement.style.textDecoration = 'none';
 			this.toggleElement.style.backgroundImage = 'url(\'' + this.chevronUpImage + '\')';
-				
+
 			this.toggleElement.style.backgroundPosition = '50% 50%';
 			this.toggleElement.style.backgroundRepeat = 'no-repeat';
-			
+
 			if (uiTheme == 'dark')
 			{
 				this.toggleElement.style.filter = 'invert(100%)';
 			}
-			
+
 			// Prevents focus
 			mxEvent.addListener(this.toggleElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
 	        	mxUtils.bind(this, function(evt)
 	    	{
 				evt.preventDefault();
 			}));
-	
+
 			// Toggles compact mode
 			mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function(evt)
 			{
@@ -7039,12 +7040,12 @@ App.prototype.updateHeader = function()
 				this.toggleCompactMode();
 				mxEvent.consume(evt);
 			}));
-		
+
 			if (uiTheme != 'atlas')
 			{
 				this.toolbarContainer.appendChild(this.toggleElement);
 			}
-			
+
 			// Enable compact mode for small screens except for Firefox where the height is wrong
 			if (!mxClient.IS_FF && screen.height <= 740 && typeof this.toggleElement.click !== 'undefined')
 			{
@@ -7065,7 +7066,7 @@ App.prototype.updateHeader = function()
 App.prototype.toggleCompactMode = function(visible)
 {
 	visible = (visible != null) ? visible : this.compactMode;
-	
+
 	if (visible)
 	{
 		this.menubar.container.style.position = 'absolute';
@@ -7098,7 +7099,7 @@ App.prototype.toggleCompactMode = function(visible)
 		this.refresh();
 		this.toggleElement.style.backgroundImage = 'url(\'' + this.chevronDownImage + '\')';
 	}
-	
+
 	this.compactMode = !visible;
 };
 
@@ -7138,7 +7139,7 @@ App.prototype.updateUserElement = function()
 			this.userElement.style.backgroundImage =  'url(' + IMAGE_PATH + '/expanded.gif)';
 			this.userElement.style.backgroundPosition = '100% 60%';
 			this.userElement.style.backgroundRepeat = 'no-repeat';
-			
+
 			this.menubarContainer.appendChild(this.userElement);
 
 			// Prevents focus
@@ -7162,10 +7163,10 @@ App.prototype.updateUserElement = function()
 					div.style.padding = '0px';
 					div.style.cursor = 'default';
 					div.style.minWidth = '300px';
-					
+
 					this.userPanel = div;
 				}
-				
+
 				if (this.userPanel.parentNode != null)
 				{
 					this.userPanel.parentNode.removeChild(this.userPanel);
@@ -7174,7 +7175,7 @@ App.prototype.updateUserElement = function()
 				{
 					var connected = false;
 					this.userPanel.innerHTML = '';
-					
+
 					var img = document.createElement('img');
 
 					img.setAttribute('src', Dialog.prototype.closeImage);
@@ -7182,7 +7183,7 @@ App.prototype.updateUserElement = function()
 					img.className = 'geDialogClose';
 					img.style.top = '8px';
 					img.style.right = '8px';
-					
+
 					mxEvent.addListener(img, 'click', mxUtils.bind(this, function()
 					{
 						if (this.userPanel.parentNode != null)
@@ -7190,13 +7191,13 @@ App.prototype.updateUserElement = function()
 							this.userPanel.parentNode.removeChild(this.userPanel);
 						}
 					}));
-					
+
 					this.userPanel.appendChild(img);
-										
+
 					if (this.drive != null)
 					{
 						var driveUsers = this.drive.getUsersList();
-						
+
 						if (driveUsers.length > 0)
 						{
 							// LATER: Cannot change user while file is open since close will not work with new
@@ -7208,7 +7209,7 @@ App.prototype.updateUserElement = function()
 								if (file != null && file.constructor == DriveFile)
 								{
 									this.spinner.spin(document.body, spinnerMsg);
-										
+
 //									file.close();
 									this.fileLoaded(null);
 
@@ -7224,7 +7225,7 @@ App.prototype.updateUserElement = function()
 									callback();
 								}
 							});
-							
+
 							var createUserRow = mxUtils.bind(this, function (user)
 							{
 								var tr = document.createElement('tr');
@@ -7244,7 +7245,7 @@ App.prototype.updateUserElement = function()
 								img.style.margin = '4px 8px 0 8px';
 								td.appendChild(img);
 								tr.appendChild(td);
-	
+
 								var td = document.createElement('td');
 								td.setAttribute('valign', 'middle');
 								td.style.whiteSpace = 'nowrap';
@@ -7255,17 +7256,17 @@ App.prototype.updateUserElement = function()
 								mxUtils.write(td, user.displayName +
 									((user.isCurrent && driveUsers.length > 1) ?
 									' (' + mxResources.get('default') + ')' : ''));
-	
+
 								if (user.email != null)
 								{
 									mxUtils.br(td);
-	
+
 									var small = document.createElement('small');
 									small.style.color = 'gray';
 									mxUtils.write(small, user.email);
 									td.appendChild(small);
 								}
-	
+
 								var div = document.createElement('div');
 								div.style.marginTop = '4px';
 
@@ -7286,7 +7287,7 @@ App.prototype.updateUserElement = function()
 										{
 											this.stateArg = null;
 											this.drive.setUser(user);
-											
+
 											this.drive.authorize(true, mxUtils.bind(this, function()
 											{
 												this.setMode(App.MODE_GOOGLE);
@@ -7297,16 +7298,16 @@ App.prototype.updateUserElement = function()
 												this.handleError(resp);
 											}), true); //Remember is true since add account imply keeping that account
 										}), mxResources.get('closingFile') + '...');
-										
+
 										mxEvent.consume(evt);
 									}));
 								}
-							
+
 								return tr;
 							});
-							
+
 							connected = true;
-							
+
 							var driveUserTable = document.createElement('table');
 							driveUserTable.style.borderSpacing = '0';
 							driveUserTable.style.fontSize = '10pt';
@@ -7317,9 +7318,9 @@ App.prototype.updateUserElement = function()
 							{
 								driveUserTable.appendChild(createUserRow(driveUsers[i]));
 							}
-							
+
 							this.userPanel.appendChild(driveUserTable);
-							
+
 							var div = document.createElement('div');
 							div.style.textAlign = 'left';
 							div.style.padding = '10px';
@@ -7343,18 +7344,18 @@ App.prototype.updateUserElement = function()
 							btn.className = 'geBtn';
 							btn.style.float = 'right';
 							div.appendChild(btn);
-							
+
 							var btn = mxUtils.button(mxResources.get('addAccount'), mxUtils.bind(this, function()
 							{
 								var authWin = this.drive.createAuthWin();
 								//FIXME This doean't work to set focus back to main window until closing the file is done
 								authWin.blur();
 								window.focus();
-								
+
 								closeFile(mxUtils.bind(this, function()
 								{
 									this.stateArg = null;
-									
+
 									this.drive.authorize(false, mxUtils.bind(this, function()
 									{
 										this.setMode(App.MODE_GOOGLE);
@@ -7372,7 +7373,7 @@ App.prototype.updateUserElement = function()
 							this.userPanel.appendChild(div);
 						}
 					}
-					
+
 					var addUser = mxUtils.bind(this, function(user, logo, logout, label)
 					{
 						if (user != null)
@@ -7381,7 +7382,7 @@ App.prototype.updateUserElement = function()
 							{
 								this.userPanel.appendChild(document.createElement('hr'));
 							}
-							
+
 							connected = true;
 							var userTable = document.createElement('table');
 							userTable.style.borderSpacing = '0';
@@ -7448,18 +7449,18 @@ App.prototype.updateUserElement = function()
 							div.style.textAlign = 'center';
 							div.style.padding = '10px';
 							div.style.whiteSpace = 'nowrap';
-							
+
 							if (logout != null)
 							{
 								var btn = mxUtils.button(mxResources.get('signOut'), logout);
 								btn.className = 'geBtn';
 								div.appendChild(btn);
 							}
-							
+
 							this.userPanel.appendChild(div);
 						}
 					});
-					
+
 					if (this.dropbox != null)
 					{
 						addUser(this.dropbox.getUser(), IMAGE_PATH + '/dropbox-logo.svg', mxUtils.bind(this, function()
@@ -7473,7 +7474,7 @@ App.prototype.updateUserElement = function()
 									this.dropbox.logout();
 									window.location.hash = '';
 								});
-								
+
 								if (!file.isModified())
 								{
 									doLogout();
@@ -7504,7 +7505,7 @@ App.prototype.updateUserElement = function()
 									this.oneDrive.logout();
 									window.location.hash = '';
 								});
-								
+
 								if (!file.isModified())
 								{
 									doLogout();
@@ -7535,7 +7536,7 @@ App.prototype.updateUserElement = function()
 									this.gitHub.logout();
 									window.location.hash = '';
 								});
-								
+
 								if (!file.isModified())
 								{
 									doLogout();
@@ -7552,7 +7553,7 @@ App.prototype.updateUserElement = function()
 							}
 						}), mxResources.get('github'));
 					}
-					
+
 					if (this.gitLab != null)
 					{
 						addUser(this.gitLab.getUser(), IMAGE_PATH + '/gitlab-logo.svg', mxUtils.bind(this, function()
@@ -7598,7 +7599,7 @@ App.prototype.updateUserElement = function()
 									this.trello.logout();
 									window.location.hash = '';
 								});
-								
+
 								if (!file.isModified())
 								{
 									doLogout();
@@ -7615,24 +7616,24 @@ App.prototype.updateUserElement = function()
 							}
 						}), mxResources.get('trello'));
 					}
-					
+
 					if (!connected)
 					{
 						var div = document.createElement('div');
 						div.style.textAlign = 'center';
 						div.style.padding = '10px';
 						div.innerHTML = mxResources.get('notConnected');
-						
+
 						this.userPanel.appendChild(div);
 					}
-					
+
 					var div = document.createElement('div');
 					div.style.textAlign = 'center';
 					div.style.padding = '10px';
 					div.style.background = Editor.isDarkMode() ? '' : 'whiteSmoke';
 					div.style.borderTop = '1px solid #e0e0e0';
 					div.style.whiteSpace = 'nowrap';
-										
+
 					if (urlParams['sketch'] == '1')
 					{
 						var btn = mxUtils.button(mxResources.get('share'), mxUtils.bind(this, function()
@@ -7642,7 +7643,7 @@ App.prototype.updateUserElement = function()
 						btn.className = 'geBtn';
 						div.appendChild(btn);
 						this.userPanel.appendChild(div);
-				
+
 						if (this.commentsSupported())
 						{
 							btn = mxUtils.button(mxResources.get('comments'), mxUtils.bind(this, function()
@@ -7670,10 +7671,10 @@ App.prototype.updateUserElement = function()
 
 					document.body.appendChild(this.userPanel);
 				}
-				
+
 				mxEvent.consume(evt);
 			}));
-			
+
 			mxEvent.addListener(document.body, 'click', mxUtils.bind(this, function(evt)
 			{
 				if (!mxEvent.isConsumed(evt) && this.userPanel != null && this.userPanel.parentNode != null)
@@ -7682,9 +7683,9 @@ App.prototype.updateUserElement = function()
 				}
 			}));
 		}
-		
+
 		var user = null;
-		
+
 		if (this.drive != null && this.drive.getUser() != null)
 		{
 			user = this.drive.getUser();
@@ -7706,11 +7707,11 @@ App.prototype.updateUserElement = function()
 			user = this.gitLab.getUser();
 		}
 		//TODO Trello no user issue
-		
+
 		if (user != null)
 		{
 			this.userElement.innerHTML = '';
-			
+
 			if (screen.width > 560)
 			{
 				mxUtils.write(this.userElement, user.displayName);
@@ -7728,7 +7729,7 @@ App.prototype.updateUserElement = function()
 App.prototype.getCurrentUser = function()
 {
 	var user = null;
-	
+
 	if (this.drive != null && this.drive.getUser() != null)
 	{
 		user = this.drive.getUser();
@@ -7746,17 +7747,17 @@ App.prototype.getCurrentUser = function()
 		user = this.gitHub.getUser();
 	}
 	//TODO Trello no user issue
-	
+
 	return user;
 }
 /**
  * Override depends on mxSettings which is not defined in the minified viewer.
  */
-var editorResetGraph = Editor.prototype.resetGraph;	
+var editorResetGraph = Editor.prototype.resetGraph;
 Editor.prototype.resetGraph = function()
 {
 	editorResetGraph.apply(this, arguments);
-	
+
 	// Overrides default with persisted value
 	if (this.graph.defaultPageFormat == null)
 	{

@@ -450,9 +450,9 @@ Format.prototype.immediateRefresh = function () {
       if (
         (lastEntry && currentLabel == null) ||
         index ==
-          (containsLabel
-            ? this.labelIndex
-            : graph.isSelectionEmpty()
+        (containsLabel
+          ? this.labelIndex
+          : graph.isSelectionEmpty()
             ? this.diagramIndex
             : this.currentIndex)
       ) {
@@ -1965,10 +1965,10 @@ ArrangePanel.prototype.addGroupOps = function (div) {
     copyBtn.setAttribute(
       "title",
       mxResources.get("copyData") +
-        " (" +
-        this.editorUi.actions.get("copyData").shortcut +
-        ")" +
-        " Shift+Click to Extract Data"
+      " (" +
+      this.editorUi.actions.get("copyData").shortcut +
+      ")" +
+      " Shift+Click to Extract Data"
     );
     copyBtn.style.marginBottom = "2px";
     copyBtn.style.width = "210px";
@@ -1986,9 +1986,9 @@ ArrangePanel.prototype.addGroupOps = function (div) {
     pasteBtn.setAttribute(
       "title",
       mxResources.get("pasteData") +
-        " (" +
-        this.editorUi.actions.get("pasteData").shortcut +
-        ")"
+      " (" +
+      this.editorUi.actions.get("pasteData").shortcut +
+      ")"
     );
     pasteBtn.style.marginBottom = "2px";
     pasteBtn.style.width = "210px";
@@ -2015,10 +2015,10 @@ ArrangePanel.prototype.addGroupOps = function (div) {
     clearWaypoints.setAttribute(
       "title",
       mxResources.get("clearWaypoints") +
-        " (" +
-        this.editorUi.actions.get("clearWaypoints").shortcut +
-        ")" +
-        " Shift+Click to Clear Anchor Points"
+      " (" +
+      this.editorUi.actions.get("clearWaypoints").shortcut +
+      ")" +
+      " Shift+Click to Clear Anchor Points"
     );
     count++;
   }
@@ -2386,9 +2386,9 @@ ArrangePanel.prototype.addGeometry = function (container) {
   autosizeBtn.setAttribute(
     "title",
     mxResources.get("autosize") +
-      " (" +
-      this.editorUi.actions.get("autosize").shortcut +
-      ")"
+    " (" +
+    this.editorUi.actions.get("autosize").shortcut +
+    ")"
   );
   autosizeBtn.style.position = "relative";
   autosizeBtn.style.cursor = "pointer";
@@ -3038,23 +3038,23 @@ TextFormatPanel.prototype.addFont = function (container) {
   fontStyleItems[0].setAttribute(
     "title",
     mxResources.get("bold") +
-      " (" +
-      this.editorUi.actions.get("bold").shortcut +
-      ")"
+    " (" +
+    this.editorUi.actions.get("bold").shortcut +
+    ")"
   );
   fontStyleItems[1].setAttribute(
     "title",
     mxResources.get("italic") +
-      " (" +
-      this.editorUi.actions.get("italic").shortcut +
-      ")"
+    " (" +
+    this.editorUi.actions.get("italic").shortcut +
+    ")"
   );
   fontStyleItems[2].setAttribute(
     "title",
     mxResources.get("underline") +
-      " (" +
-      this.editorUi.actions.get("underline").shortcut +
-      ")"
+    " (" +
+    this.editorUi.actions.get("underline").shortcut +
+    ")"
   );
 
   var verticalItem = this.editorUi.toolbar.addItems(
@@ -3084,25 +3084,25 @@ TextFormatPanel.prototype.addFont = function (container) {
     mxResources.get("left"),
     graph.cellEditor.isContentEditing()
       ? function (evt) {
-          graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt);
-          ui.fireEvent(
-            new mxEventObject(
-              "styleChanged",
-              "keys",
-              [mxConstants.STYLE_ALIGN],
-              "values",
-              [mxConstants.ALIGN_LEFT],
-              "cells",
-              ss.cells
-            )
-          );
-        }
-      : callFn(
-          this.editorUi.menus.createStyleChangeFunction(
+        graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt);
+        ui.fireEvent(
+          new mxEventObject(
+            "styleChanged",
+            "keys",
             [mxConstants.STYLE_ALIGN],
-            [mxConstants.ALIGN_LEFT]
+            "values",
+            [mxConstants.ALIGN_LEFT],
+            "cells",
+            ss.cells
           )
-        ),
+        );
+      }
+      : callFn(
+        this.editorUi.menus.createStyleChangeFunction(
+          [mxConstants.STYLE_ALIGN],
+          [mxConstants.ALIGN_LEFT]
+        )
+      ),
     stylePanel3
   );
   var center = this.editorUi.toolbar.addButton(
@@ -3110,25 +3110,25 @@ TextFormatPanel.prototype.addFont = function (container) {
     mxResources.get("center"),
     graph.cellEditor.isContentEditing()
       ? function (evt) {
-          graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt);
-          ui.fireEvent(
-            new mxEventObject(
-              "styleChanged",
-              "keys",
-              [mxConstants.STYLE_ALIGN],
-              "values",
-              [mxConstants.ALIGN_CENTER],
-              "cells",
-              ss.cells
-            )
-          );
-        }
-      : callFn(
-          this.editorUi.menus.createStyleChangeFunction(
+        graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt);
+        ui.fireEvent(
+          new mxEventObject(
+            "styleChanged",
+            "keys",
             [mxConstants.STYLE_ALIGN],
-            [mxConstants.ALIGN_CENTER]
+            "values",
+            [mxConstants.ALIGN_CENTER],
+            "cells",
+            ss.cells
           )
-        ),
+        );
+      }
+      : callFn(
+        this.editorUi.menus.createStyleChangeFunction(
+          [mxConstants.STYLE_ALIGN],
+          [mxConstants.ALIGN_CENTER]
+        )
+      ),
     stylePanel3
   );
   var right = this.editorUi.toolbar.addButton(
@@ -3136,25 +3136,25 @@ TextFormatPanel.prototype.addFont = function (container) {
     mxResources.get("right"),
     graph.cellEditor.isContentEditing()
       ? function (evt) {
-          graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt);
-          ui.fireEvent(
-            new mxEventObject(
-              "styleChanged",
-              "keys",
-              [mxConstants.STYLE_ALIGN],
-              "values",
-              [mxConstants.ALIGN_RIGHT],
-              "cells",
-              ss.cells
-            )
-          );
-        }
-      : callFn(
-          this.editorUi.menus.createStyleChangeFunction(
+        graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt);
+        ui.fireEvent(
+          new mxEventObject(
+            "styleChanged",
+            "keys",
             [mxConstants.STYLE_ALIGN],
-            [mxConstants.ALIGN_RIGHT]
+            "values",
+            [mxConstants.ALIGN_RIGHT],
+            "cells",
+            ss.cells
           )
-        ),
+        );
+      }
+      : callFn(
+        this.editorUi.menus.createStyleChangeFunction(
+          [mxConstants.STYLE_ALIGN],
+          [mxConstants.ALIGN_RIGHT]
+        )
+      ),
     stylePanel3
   );
 
@@ -3683,52 +3683,52 @@ TextFormatPanel.prototype.addFont = function (container) {
 
   var bgPanel = graph.cellEditor.isContentEditing()
     ? this.createColorOption(
-        mxResources.get("backgroundColor"),
-        function () {
-          return currentBgColor;
-        },
-        function (color) {
-          document.execCommand(
-            "backcolor",
-            false,
-            color != mxConstants.NONE ? color : "transparent"
-          );
-          ui.fireEvent(
-            new mxEventObject(
-              "styleChanged",
-              "keys",
-              [mxConstants.STYLE_LABEL_BACKGROUNDCOLOR],
-              "values",
-              [color],
-              "cells",
-              ss.cells
-            )
-          );
+      mxResources.get("backgroundColor"),
+      function () {
+        return currentBgColor;
+      },
+      function (color) {
+        document.execCommand(
+          "backcolor",
+          false,
+          color != mxConstants.NONE ? color : "transparent"
+        );
+        ui.fireEvent(
+          new mxEventObject(
+            "styleChanged",
+            "keys",
+            [mxConstants.STYLE_LABEL_BACKGROUNDCOLOR],
+            "values",
+            [color],
+            "cells",
+            ss.cells
+          )
+        );
+      },
+      graph.shapeBackgroundColor,
+      {
+        install: function (apply) {
+          bgColorApply = apply;
         },
-        graph.shapeBackgroundColor,
-        {
-          install: function (apply) {
-            bgColorApply = apply;
-          },
-          destroy: function () {
-            bgColorApply = null;
-          },
+        destroy: function () {
+          bgColorApply = null;
         },
-        null,
-        true
-      )
+      },
+      null,
+      true
+    )
     : this.createCellColorOption(
-        mxResources.get("backgroundColor"),
-        mxConstants.STYLE_LABEL_BACKGROUNDCOLOR,
-        "default",
-        null,
-        function (color) {
-          graph.updateLabelElements(ss.cells, function (elt) {
-            elt.style.backgroundColor = null;
-          });
-        },
-        graph.shapeBackgroundColor
-      );
+      mxResources.get("backgroundColor"),
+      mxConstants.STYLE_LABEL_BACKGROUNDCOLOR,
+      "default",
+      null,
+      function (color) {
+        graph.updateLabelElements(ss.cells, function (elt) {
+          elt.style.backgroundColor = null;
+        });
+      },
+      graph.shapeBackgroundColor
+    );
   bgPanel.style.fontWeight = "bold";
 
   var borderPanel = this.createCellColorOption(
@@ -3748,140 +3748,140 @@ TextFormatPanel.prototype.addFont = function (container) {
 
   var panel = graph.cellEditor.isContentEditing()
     ? this.createColorOption(
-        mxResources.get("fontColor"),
-        function () {
-          return currentFontColor;
-        },
-        function (color) {
-          if (mxClient.IS_FF) {
-            // Workaround for Firefox that adds the font element around
-            // anchor elements which ignore inherited colors is to move
-            // the font element inside anchor elements
-            var tmp = graph.cellEditor.textarea.getElementsByTagName("font");
-            var oldFonts = [];
-
-            for (var i = 0; i < tmp.length; i++) {
-              oldFonts.push({
-                node: tmp[i],
-                color: tmp[i].getAttribute("color"),
-              });
-            }
+      mxResources.get("fontColor"),
+      function () {
+        return currentFontColor;
+      },
+      function (color) {
+        if (mxClient.IS_FF) {
+          // Workaround for Firefox that adds the font element around
+          // anchor elements which ignore inherited colors is to move
+          // the font element inside anchor elements
+          var tmp = graph.cellEditor.textarea.getElementsByTagName("font");
+          var oldFonts = [];
+
+          for (var i = 0; i < tmp.length; i++) {
+            oldFonts.push({
+              node: tmp[i],
+              color: tmp[i].getAttribute("color"),
+            });
+          }
 
-            document.execCommand(
-              "forecolor",
-              false,
-              color != mxConstants.NONE ? color : "transparent"
-            );
-            ui.fireEvent(
-              new mxEventObject(
-                "styleChanged",
-                "keys",
-                [mxConstants.STYLE_FONTCOLOR],
-                "values",
-                [color],
-                "cells",
-                ss.cells
-              )
-            );
+          document.execCommand(
+            "forecolor",
+            false,
+            color != mxConstants.NONE ? color : "transparent"
+          );
+          ui.fireEvent(
+            new mxEventObject(
+              "styleChanged",
+              "keys",
+              [mxConstants.STYLE_FONTCOLOR],
+              "values",
+              [color],
+              "cells",
+              ss.cells
+            )
+          );
 
-            // Finds the new or changed font element
-            var newFonts =
-              graph.cellEditor.textarea.getElementsByTagName("font");
+          // Finds the new or changed font element
+          var newFonts =
+            graph.cellEditor.textarea.getElementsByTagName("font");
 
-            for (var i = 0; i < newFonts.length; i++) {
+          for (var i = 0; i < newFonts.length; i++) {
+            if (
+              i >= oldFonts.length ||
+              newFonts[i] != oldFonts[i].node ||
+              (newFonts[i] == oldFonts[i].node &&
+                newFonts[i].getAttribute("color") != oldFonts[i].color)
+            ) {
+              var child = newFonts[i].firstChild;
+
+              // Moves the font element to inside the anchor element and adopts all children
               if (
-                i >= oldFonts.length ||
-                newFonts[i] != oldFonts[i].node ||
-                (newFonts[i] == oldFonts[i].node &&
-                  newFonts[i].getAttribute("color") != oldFonts[i].color)
+                child != null &&
+                child.nodeName == "A" &&
+                child.nextSibling == null &&
+                child.firstChild != null
               ) {
-                var child = newFonts[i].firstChild;
-
-                // Moves the font element to inside the anchor element and adopts all children
-                if (
-                  child != null &&
-                  child.nodeName == "A" &&
-                  child.nextSibling == null &&
-                  child.firstChild != null
-                ) {
-                  var parent = newFonts[i].parentNode;
-                  parent.insertBefore(child, newFonts[i]);
-                  var tmp = child.firstChild;
-
-                  while (tmp != null) {
-                    var next = tmp.nextSibling;
-                    newFonts[i].appendChild(tmp);
-                    tmp = next;
-                  }
-
-                  child.appendChild(newFonts[i]);
+                var parent = newFonts[i].parentNode;
+                parent.insertBefore(child, newFonts[i]);
+                var tmp = child.firstChild;
+
+                while (tmp != null) {
+                  var next = tmp.nextSibling;
+                  newFonts[i].appendChild(tmp);
+                  tmp = next;
                 }
 
-                break;
+                child.appendChild(newFonts[i]);
               }
+
+              break;
             }
-          } else {
-            document.execCommand(
-              "forecolor",
-              false,
-              color != mxConstants.NONE ? color : "transparent"
-            );
-            ui.fireEvent(
-              new mxEventObject(
-                "styleChanged",
-                "keys",
-                [mxConstants.STYLE_FONTCOLOR],
-                "values",
-                [color],
-                "cells",
-                ss.cells
-              )
-            );
           }
+        } else {
+          document.execCommand(
+            "forecolor",
+            false,
+            color != mxConstants.NONE ? color : "transparent"
+          );
+          ui.fireEvent(
+            new mxEventObject(
+              "styleChanged",
+              "keys",
+              [mxConstants.STYLE_FONTCOLOR],
+              "values",
+              [color],
+              "cells",
+              ss.cells
+            )
+          );
+        }
+      },
+      defs[mxConstants.STYLE_FONTCOLOR] != null
+        ? defs[mxConstants.STYLE_FONTCOLOR]
+        : graph.shapeForegroundColor,
+      {
+        install: function (apply) {
+          fontColorApply = apply;
         },
-        defs[mxConstants.STYLE_FONTCOLOR] != null
-          ? defs[mxConstants.STYLE_FONTCOLOR]
-          : graph.shapeForegroundColor,
-        {
-          install: function (apply) {
-            fontColorApply = apply;
-          },
-          destroy: function () {
-            fontColorApply = null;
-          },
+        destroy: function () {
+          fontColorApply = null;
         },
-        null,
-        true
-      )
+      },
+      null,
+      true
+    )
     : this.createCellColorOption(
-        mxResources.get("fontColor"),
-        mxConstants.STYLE_FONTCOLOR,
-        "default",
-        function (color) {
-          if (color == mxConstants.NONE) {
-            bgPanel.style.display = "none";
-          } else {
-            bgPanel.style.display = "";
-          }
+      mxResources.get("fontColor"),
+      mxConstants.STYLE_FONTCOLOR,
+      "default",
+      function (color) {
+        if (color == mxConstants.NONE) {
+          bgPanel.style.display = "none";
+        } else {
+          bgPanel.style.display = "";
+        }
 
-          borderPanel.style.display = bgPanel.style.display;
-        },
-        function (color) {
-          if (color == mxConstants.NONE) {
-            graph.setCellStyles(mxConstants.STYLE_NOLABEL, "1", ss.cells);
-          } else {
-            graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, ss.cells);
-          }
+        borderPanel.style.display = bgPanel.style.display;
+      },
+      function (color) {
+        if (color == mxConstants.NONE) {
+          graph.setCellStyles(mxConstants.STYLE_NOLABEL, "1", ss.cells);
+        } else {
+          graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, ss.cells);
+        }
 
-          graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, color, ss.cells);
+        graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, color, ss.cells);
 
-          graph.updateLabelElements(ss.cells, function (elt) {
-            elt.removeAttribute("color");
-            elt.style.color = null;
-          });
-        },
-        graph.shapeForegroundColor
-      );
+        graph.updateLabelElements(ss.cells, function (elt) {
+          elt.removeAttribute("color");
+          elt.style.color = null;
+        });
+      },
+      graph.shapeForegroundColor
+    );
   panel.style.fontWeight = "bold";
 
   colorPanel.appendChild(panel);
@@ -4699,15 +4699,15 @@ TextFormatPanel.prototype.addFont = function (container) {
               setSelected(
                 fontStyleItems[0],
                 css.fontWeight == "bold" ||
-                  css.fontWeight > 400 ||
-                  hasParentOrOnlyChild("B") ||
-                  hasParentOrOnlyChild("STRONG")
+                css.fontWeight > 400 ||
+                hasParentOrOnlyChild("B") ||
+                hasParentOrOnlyChild("STRONG")
               );
               setSelected(
                 fontStyleItems[1],
                 css.fontStyle == "italic" ||
-                  hasParentOrOnlyChild("I") ||
-                  hasParentOrOnlyChild("EM")
+                hasParentOrOnlyChild("I") ||
+                hasParentOrOnlyChild("EM")
               );
               setSelected(fontStyleItems[2], hasParentOrOnlyChild("U"));
               setSelected(sup, hasParentOrOnlyChild("SUP"));
@@ -4872,11 +4872,92 @@ DataFormatPanel.prototype.init = function () {
   this.addDataFont(this.container);
 };
 
+// TODO 数据绑定
 DataFormatPanel.prototype.addDataFont = function (container) {
-  var ui = this.editorUi;
-  var editor = ui.editor;
-  var graph = editor.graph;
-  var ss = ui.getSelectionState();
+  const ui = this.editorUi;
+  const editor = ui.editor;
+  const graph = editor.graph;
+  const ss = ui.getSelectionState();
+  /**
+   * @description 创建面版
+   */
+  const createPanel = this.createPanel
+
+  /**
+   * @description 创建标题
+   */
+  const createTitle = this.createTitle
+
+  /**
+   * @description 不是单一节点则不进入数据绑定
+   */
+  if (!isSingleNode(ss.vertices)) return
+
+  /**
+   * @description 选中节点信息来源
+   * @param {string} nodeInfo.id - 节点ID
+   */
+  const nodeInfo = getNodeInfo(ss.vertices)
+
+  // 解构全局属性layui要用到的模块
+  const { layer, form, tree: layuiTree, jquery: $ } = layui;
+
+  const interactionItems = [
+    {
+      label: "按下",
+      checkboxName: "pressInput",
+      value: "pressEdit",
+      type: 'DOWN'
+    },
+    {
+      label: "抬起",
+      checkboxName: "upliftInput",
+      value: "upliftEdit",
+      type: 'UP'
+    },
+    {
+      label: "单击",
+      checkboxName: "clickInput",
+      value: "clickEdit",
+      type: 'SINGLE'
+    },
+    {
+      label: "双击",
+      checkboxName: "dbClickInput",
+      value: "dbClickEdit",
+      type: 'DOUBLE'
+    },
+  ];
+
+  const dynamicEffect = [
+    {
+      label: "闪烁",
+      checkboxName: "flashingInput",
+      value: "flashingEdit",
+    },
+    {
+      label: "显示/隐藏",
+      checkboxName: "showOrHiddenInput",
+      value: "showOrHiddenEdit",
+    },
+    {
+      label: "旋转",
+      checkboxName: "rotateInput",
+      value: "rotateEdit",
+    },
+  ];
+
+  /**
+   * @description 操作映射表
+   * @returns {Map}
+   */
+  const interactionItemsMap = (() => {
+    const map = new Map()
+    interactionItems.forEach(item => {
+      map.set(item.type, item)
+    })
+    return map
+  })();
 
   // 获取url的请求参数函数
   function getRequest() {
@@ -4903,7 +4984,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
   stylePanel.style.marginLeft = "-2px";
   stylePanel.style.borderWidth = "0px";
   stylePanel.className = "geToolbarContainer";
-  container.appendChild(stylePanel);
+  // container.appendChild(stylePanel);
   var organizationTree = stylePanel.cloneNode(false);
   organizationTree.style.width = "200px";
   organizationTree.style.marginLeft = "0px";
@@ -4917,36 +4998,195 @@ DataFormatPanel.prototype.addDataFont = function (container) {
   organizationTree.appendChild(treeUl);
   container.appendChild(organizationTree);
   let treeList = [];
+
+
+  /**
+   * @description 单一节点
+   */
+  function isSingleNode(vertices) {
+    return Array.isArray(vertices) && vertices.length === 1
+  }
+
+  /**
+   * @description 获取节点信息
+   * @returns {{id: string}} - 当前选中节点源信息
+   */
+  function getNodeInfo(node) {
+    if (isSingleNode(node)) {
+      return node[0]
+    }
+    return {}
+  }
+
+  /**
+   * @description 初始化节点
+   */
+  async function initNode() {
+    createDataSourcePanel()
+    createInteractionPanel()
+    createDynamicEffectPanel()
+    createSubmitPanel()
+    echoData()
+  }
+
+  initNode();
+
+
+  /**
+   * @description 数据回显
+   */
+  async function echoData() {
+    const [err, res] = await to(getNodeBindInfo())
+    if (err || !Object.keys(res).length) return
+    const all = [...res.act, ...res.event]
+    console.log(all)
+    let needUpdateCheckbox = []
+    for (const item of all) {
+      if (!item.enabled) {
+        needUpdateCheckbox.push(interactionItemsMap.get(item.type))
+      }
+    }
+    needUpdateCheckbox = needUpdateCheckbox.filter(Boolean)
+
+    needUpdateCheckbox.forEach((item) => {
+      $('.interaction__container').find(`input[name="${item.value}"]`).prop('checked', true)
+    })
+    form.render('checkbox')
+    getOrgTree()
+  }
+
+  /**
+   * @description 组织树重载
+   */
+  async function getOrgTree() {
+    const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
+    if (err) return
+    
+    function formatTreeData(data) {
+      return data.reduce((prev, next) => {
+        let children = []
+        if (next.children && next.children.length) {
+          children = formatTreeData(next.children)
+        }
+        return [...prev, { id: next.id, title: next.name, children }]
+      }, [])
+    }
+
+    const treeData = formatTreeData(res)
+
+    layuiTree.render({
+      elem: '#organizationTree',
+      data: treeData,
+      onlyIconControl: true,
+      accordion: true,
+      click(node) {
+        // 获取组织下的设备
+        getDevicesByOrganizationId(node.data.id);
+      },
+    })
+  }
+
+
+  /**
+   * @description 获取节点绑定信息
+   */
+  function getNodeBindInfo() {
+    const { id } = nodeInfo
+    return ConfigurationNodeApi.getConfigurationInfo('NODE', id)
+  }
+
+
+
+
+
+  /**
+   * @description 生成数据交互面板
+   * @returns {Array}
+   */
+  function generateDataEventNode() {
+    const eventList = []
+    const eventNodeCls = 'interaction__container'
+    for (const item of interactionItems) {
+      const checkbox = UseLayUi.createCheckBox({ dataSource: item, layFilter: item.checkboxName })
+      const template = `
+        <div class="${eventNodeCls}">
+          ${checkbox}
+          <i id="${item.value}"></i>
+        </div>`
+      eventList.push(template)
+    }
+    return eventList
+  }
+
+  /**
+   * @description 生成操作节点
+   * @param {object[]} list
+   */
+  function generateActionEventNode(list) {
+    const eventList = []
+    const eventNodeCls = 'interaction__container'
+    for (const item of list) {
+      const checkbox = UseLayUi.createCheckBox({ dataSource: item, layFilter: item.checkboxName })
+      const template = `
+        <div class="${eventNodeCls}">
+          ${checkbox}
+          <i id="${item.value}"></i>
+        </div>`
+      eventList.push(template)
+    }
+    return eventList
+  }
+
+
   // 获取组织数据
   (function getTreeList() {
     //调用API,获取保存的内容
     defHttp.get("/yt/organization/me/list").then(function (res) {
       //实例化树形菜单
       treeList = res;
-      $("#organizationTree").tree({
-        data: res,
-        lines: true,
-        formatter(node) {
-          return node.name;
-        },
-        onClick(node) {
+
+      function formatTreeData(data) {
+        return data.reduce((prev, next) => {
+          let children = []
+          if (next.children && next.children.length) {
+            children = formatTreeData(next.children)
+          }
+          return [...prev, { id: next.id, title: next.name, children }]
+        }, [])
+      }
+
+      const treeData = formatTreeData(treeList)
+
+      layuiTree.render({
+        elem: '#organizationTree',
+        data: treeData,
+        onlyIconControl: true,
+        accordion: true,
+        click(node) {
           // 获取组织下的设备
-          getDevicesByOrganizationId(node.id);
+          getDevicesByOrganizationId(node.data.id);
         },
-      });
+      })
     });
   })();
 
   // 选择设备
   var deviceStylePanel = stylePanel.cloneNode(false);
-  deviceStylePanel.style.marginLeft = "0px";
-  deviceStylePanel.style.paddingTop = "8px";
-  deviceStylePanel.style.paddingBottom = "8px";
-  mxUtils.write(deviceStylePanel, "选择设备");
+  deviceStylePanel.className += ' data-source__select-container'
+  deviceStylePanel.setAttribute('id', 'dataSourceDevice');
   container.appendChild(deviceStylePanel);
-  var deviceSelect = document.createElement("select");
-  deviceSelect.setAttribute("id", "device");
-  deviceStylePanel.appendChild(deviceSelect);
+  const dataSourceDevice = UseLayUi.createSelect({
+    elem: '#dataSourceDevice',
+    layFilter: 'device',
+    label: '选择设备',
+    valueField: 'tbDeviceId',
+    className: 'data-panel__select',
+    onClick(data) {
+      console.log(data)
+      getDeviceAttribute(data.value)
+    }
+  })
+
 
   // 获取组织下的所有直连设备和网关子设备
   async function getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(
@@ -4967,30 +5207,26 @@ DataFormatPanel.prototype.addDataFont = function (container) {
       const items = await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(
         organizationId
       );
-      $("#device").combobox({
-        data: items,
-        valueField: "tbDeviceId",
-        textField: "name",
-        onChange(newValue) {
-          getDeviceAttribute(newValue);
-        },
-      });
+      dataSourceDevice.updateOptions(items)
     }
   }
 
   var attributeStylePanel = stylePanel.cloneNode(false);
-  attributeStylePanel.style.marginLeft = "0px";
-  attributeStylePanel.style.paddingTop = "8px";
-  attributeStylePanel.style.paddingBottom = "8px";
-  mxUtils.write(attributeStylePanel, "选择属性");
+  attributeStylePanel.className += ' data-source__select-container'
+  attributeStylePanel.setAttribute('id', 'dataSourceProps')
 
   container.appendChild(attributeStylePanel);
-  var attributeSelect = document.createElement("select");
-  attributeSelect.setAttribute("id", "attribute");
-  attributeStylePanel.appendChild(attributeSelect);
+
+  $(attributeStylePanel).append(UseLayUi.createSelect({
+    layFilter: 'props',
+    label: '选择属性',
+    className: 'data-panel__select'
+  }))
+  UseLayUi.nextTick(() => form.render())
 
   // 获取设备下的属性-key--在改变设备时调用
   function getDeviceAttribute(tbDeviceId) {
+    console.log(tbDeviceId)
     if (tbDeviceId) {
       defHttp
         .get(`/plugins/telemetry/DEVICE/${tbDeviceId}/keys/timeseries`)
@@ -5001,98 +5237,106 @@ DataFormatPanel.prototype.addDataFont = function (container) {
               text: item,
             };
           });
-          $("#attribute").combobox({
-            data: mapRes,
-          });
         });
     }
   }
 
-  // 动态生成菜单中的子项
-  function genarateCheckbox(items) {
-    for (let item of items) {
-      let blockItem = stylePanel.cloneNode(false);
-      blockItem.style.marginLeft = "0px";
-      blockItem.style.paddingTop = "8px";
-      blockItem.style.paddingBottom = "8px";
-      blockItem.style.paddingRight = "14px";
-      blockItem.style.display = "flex";
-      const input = document.createElement("input");
-      input.setAttribute("id", item.checkboxName);
-      const edit = document.createElement("i");
-      edit.style.display = "block";
-      edit.style.width = "20px";
-      edit.style.height = "20px";
-      edit.style.backgroundImage = "url('images/edit20.png')";
-      edit.style.cursor = "pointer";
-      edit.style.marginLeft = "auto";
-      edit.setAttribute("id", item.editName);
-      blockItem.appendChild(input);
-      blockItem.appendChild(edit);
-      container.appendChild(blockItem);
-    }
+  /**
+   * @description 创建数据源模块
+   */
+  function createDataSourcePanel() {
+    const fragment = document.createDocumentFragment()
+    const title = createTitle('数据源')
+    $(title).addClass('override__title--default')
+
+    const defaultPanel = createPanel()
+    $(defaultPanel).addClass('override__panel--default')
+
+    const orgPanel = defaultPanel.cloneNode(false)
+    const orgContainer = `
+      <div>
+        <div>选择组织</div>
+        <div id="organizationTree"></div>
+      </div>`
+    const div = $(orgContainer)
+    $(orgPanel).append(div)
+
+    const devicePanel = defaultPanel.cloneNode(false)
+    const deviceSelect = UseLayUi.createSelect({ label: '选择设备', className: 'data-panel__select' })
+    $(devicePanel).attr('id', 'dataSource-device').append(deviceSelect)
+
+    const propsPanel = defaultPanel.cloneNode(false)
+    const propsSelect = UseLayUi.createSelect({ label: '选择属性', className: 'data-panel__select' })
+    $(propsPanel).attr('id', 'dataSource-props').append(propsSelect)
+
+    $(fragment).append(title).append(orgPanel).append(devicePanel).append(propsPanel)
+
+    $(container).append(fragment)
+
+    UseLayUi.createTree({ elem: '#organizationTree' })
+
+    // TODO current edit
+    // layuiTree.render({
+    //   elem: '#organizationTree',
+    //   data: treeData,
+    //   onlyIconControl: true,
+    //   accordion: true,
+    //   click(node) {
+    //     // 获取组织下的设备
+    //     getDevicesByOrganizationId(node.data.id);
+    //   },
+    // })
+
   }
 
-  // 数据交互模块
-  var interactionStylePanel = this.createPanel();
-  container.appendChild(interactionStylePanel);
-  var dataInteractiveTitle = this.createTitle("数据交互");
-  dataInteractiveTitle.style.padding = "6px 0px 6px 6px";
-  container.appendChild(dataInteractiveTitle);
 
-  const interactionItems = [
-    {
-      label: "按下",
-      checkboxName: "pressInput",
-      editName: "pressEdit",
-    },
-    {
-      label: "抬起",
-      checkboxName: "upliftInput",
-      editName: "upliftEdit",
-    },
-    {
-      label: "单击",
-      checkboxName: "clickInput",
-      editName: "clickEdit",
-    },
-    {
-      label: "双击",
-      checkboxName: "dbClickInput",
-      editName: "dbClickEdit",
-    },
-  ];
-  genarateCheckbox(interactionItems);
 
-  // 数据动效模块
-  var effectStylePanel = this.createPanel();
-  container.appendChild(effectStylePanel);
-  var dataEffectStylePanelTitle = this.createTitle("数据动效");
-  dataEffectStylePanelTitle.style.padding = "6px 0px 6px 6px";
-  container.appendChild(dataEffectStylePanelTitle);
+  /**
+   * @description 创建数据交互模块
+   */
+  function createInteractionPanel() {
+    const fragment = document.createDocumentFragment()
+    const title = createTitle('数据交互')
+    $(title).addClass('override__title--default')
+    fragment.append(title)
+    generateDataEventNode().forEach(item => {
+      const panel = createPanel()
+      $(panel).addClass('override__panel--default').append(item)
+      $(fragment).append(panel)
+    })
+    $(container).append(fragment)
+  }
 
-  const dynamicEffect = [
-    {
-      label: "闪烁",
-      checkboxName: "flashingInput",
-      editName: "flashingEdit",
-    },
-    {
-      label: "显示/隐藏",
-      checkboxName: "showOrHiddenInput",
-      editName: "showOrHiddenEdit",
-    },
-    {
-      label: "旋转",
-      checkboxName: "rotateInput",
-      editName: "rotateEdit",
-    },
-  ];
 
-  genarateCheckbox(dynamicEffect);
+  /**
+   * @description 创建动效面版
+   */
+  function createDynamicEffectPanel() {
+    const fragment = document.createDocumentFragment()
+    const title = createTitle('数据动效')
+    $(title).addClass('override__title--default')
+    fragment.append(title)
+    generateActionEventNode(dynamicEffect).forEach(item => {
+      const panel = createPanel()
+      $(panel).addClass('override__panel--default').append(item)
+      $(fragment).append(panel)
+    })
+    $(container).append(fragment)
+  }
+
+
+
+  /**
+   * @description 创建提交按钮
+   */
+  function createSubmitPanel() {
+    const fragment = document.createDocumentFragment()
+    const panel = createPanel()
+    $(fragment).append(panel).append(`<button type="button" class="layui-btn">保存</button>`)
+    $(container).append(fragment)
+  }
+
 
-  // 解构全局属性layui要用到的模块
-  const { layer, form } = layui;
 
   //  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
   setTimeout(() => {
@@ -5102,18 +5346,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
       editable: false,
       panelMaxHeight: 200,
     };
-    $("#device").combobox(options);
-    $("#attribute").combobox(options);
-    $(".textbox").css({
-      "margin-left": "6px",
-    });
-    for (let item of [...interactionItems, ...dynamicEffect]) {
-      $(`#${item.checkboxName}`).checkbox({
-        label: item.label,
-        value: "press",
-        labelPosition: "after",
-      });
-    }
+
     // 组态id
     let configurationId = getRequest().configurationId;
     // 当前内容页的id
@@ -5142,10 +5375,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
       const findContent = res.event?.find((item) => {
         if (item.content.title === event.data.type) return item;
       });
-      console.log(findContent);
       // 当前租户的根组织id
       const rootOrgId = treeList[0].id;
-      console.log(rootOrgId);
       // 获取根组织下的所有设备
       async function getOrgAllDevices() {
         return Promise.all([
@@ -5156,8 +5387,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
           defHttp.get(`/yt/device/list/SENSOR?organizationId=${rootOrgId}`),
         ]);
       }
-     const deviceList =  await getOrgAllDevices();
-     console.log(deviceList.flat(1))
+      const deviceList = await getOrgAllDevices();
+      console.log(deviceList.flat(1))
       // 打开弹窗
       layer.open({
         title: "创建交互",
@@ -5453,9 +5684,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 
       // 获取页面数组->转换为option
       for (let item of ui.pages) {
-        const option = `<option value="${
-          "data:page/id," + item.getId()
-        }">${item.getName()}</option>`;
+        const option = `<option value="${"data:page/id," + item.getId()
+          }">${item.getName()}</option>`;
         $("#pageSelect").append(option);
       }
       if (findContent?.content.action === "1") {
@@ -5726,17 +5956,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
       });
 
       // 树结构转为数组list
-      function treeToArr(data, pId = 0, res = []) {
-        data.forEach((item) => {
-          res.push({ pId, id: item.id, name: item.name });
-          if (item.children && item.children.length) {
-            treeToArr(item.children, item.id, res);
-          }
-        });
-        return res;
-      }
+      // function treeToArr(data, pId = 0, res = []) {
+      //   data.forEach((item) => {
+      //     res.push({ pId, id: item.id, name: item.name });
+      //     if (item.children && item.children.length) {
+      //       treeToArr(item.children, item.id, res);
+      //     }
+      //   });
+      //   return res;
+      // }
+
       // 深拷贝一下数据并且拍平这个树形结构数据
-      const flatTreeList = treeToArr(JSON.parse(JSON.stringify(treeList)));
+      // const flatTreeList = treeToArr(JSON.parse(JSON.stringify(treeList)));
+
 
       // 打开弹窗
       layer.open({
@@ -5751,12 +5983,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
               <input type="radio" name="type" value="2" title="产品/场景" disabled>
             </div>
           </div>
-            <div class="layui-form-item">
-              <label class="layui-form-label">组织</label>
-              <div class="layui-input-block">
-                <select id="select" lay-ignore/>
-              </div>
-            </div>
+          
+          <div id="orgSelectTree">组织</div>
             
             <div class="layui-form-item">
               <label class="layui-form-label">设备</label>
@@ -5784,6 +6012,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         btn: ["保存", "取消"],
         shade: ["0.7", "#fafafa"],
         async yes(index) {
+          form.verify({
+            required(value, item) {
+              return '必填项不能为空'
+            }
+          })
+          form.on('submit(formModal)', (data) => {
+            console.log('data', data)
+          })
           // 获取动画类型
           let type = null;
           for (let key in animType) {
@@ -5802,7 +6038,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
           // 获取其他数据
           const formModal = {
             ...form.val("formModal"),
-            orgId: $("#select").selectZTreeGet().id,
+            // orgId: $("#select").selectZTreeGet().id,
             configurationId,
             contentId: currentPageId.id,
             id: graphId,
@@ -5811,53 +6047,93 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             },
             type,
           };
+          console.log(formModal)
           await defHttp.post("/yt/configuration/node/act", formModal);
           layer.close(index);
         },
         btn2(index) {
           layer.close(index);
         },
+        success(layero, index) {
+          layero.addClass('layui-form')
+          layero.find('.layui-layer-btn0').attr({ 'lay-submit': '' })
+          form.render()
+        }
       });
 
-      $("#select")
-        .selectZTree({
-          data: flatTreeList,
-          width: 290,
-          showSearch: false,
-          placeholder: "请选择组织",
-          async onReady() {
+      async function updateDeviceOptions(data) {
+        const res = await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(data);
+        $("#deviceSelect").html(`<option value="">请选择设备</option>`);
+        for (let item of res) {
+          // 在追加
+          $("#deviceSelect").append(
+            `<option value="${item.tbDeviceId}">${item.name}</option>`
+          );
+        }
+        $('#attrSelect').empty()
+        form.render();
+      }
+
+      // TODO ORG
+      UseLayUi.createTreeSelect({
+        elem: $('#orgSelectTree'),
+        layFilter: 'orgId',
+        label: '组织',
+        singleUsage: false,
+        treeProps: {
+          data: treeList,
+          onlyIconControl: true,
+          onReady(setValue) {
+            // 初始化回显设置tree select 值
             if (findAnim?.orgId) {
-              $("#select").selectZTreeSet(findAnim?.orgId);
-              const items =
-                await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(
-                  findAnim?.orgId
-                );
-              $("#deviceSelect").empty();
-              $("#deviceSelect").append(`<option value="">请选择设备</option>`);
-              for (let item of items) {
-                // 在追加
-                $("#deviceSelect").append(
-                  `<option value="${item.tbDeviceId}">${item.name}</option>`
-                );
-              }
-              form.render();
+              const findOrg = UseLayUi.findTreeObjectByField(treeList, findAnim.orgId)
+              setValue({ id: findAnim.orgId, title: findOrg ? findOrg.name : '' })
+              updateDeviceOptions(findAnim.orgId)
             }
           },
-        })
-        .on("change", async (ele, { id }) => {
-          const items =
-            await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(id);
-          // 先清空子元素
-          $("#deviceSelect").empty();
-          $("#deviceSelect").append(`<option value="">请选择设备</option>`);
-          for (let item of items) {
-            // 在追加
-            $("#deviceSelect").append(
-              `<option value="${item.tbDeviceId}">${item.name}</option>`
-            );
+          click(node) {
+            updateDeviceOptions(node.data.id)
           }
-          form.render();
-        });
+        }
+      })
+      // $("#select").selectZTree({
+      //   data: flatTreeList,
+      //   width: 290,
+      //   showSearch: false,
+      //   placeholder: "请选择组织",
+      //   async onReady() {
+      //     if (findAnim?.orgId) {
+      //       $("#select").selectZTreeSet(findAnim?.orgId);
+      //       const items =
+      //           await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(
+      //               findAnim?.orgId
+      //           );
+      //       $("#deviceSelect").empty();
+      //       $("#deviceSelect").append(`<option value="">请选择设备</option>`);
+      //       for (let item of items) {
+      //         // 在追加
+      //         $("#deviceSelect").append(
+      //             `<option value="${item.tbDeviceId}">${item.name}</option>`
+      //         );
+      //         }
+      //         form.render();
+      //       }
+      //     },
+      //   })
+      //   .on("change", async (ele, { id }) => {
+      //     const items =
+      //       await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(id);
+      //     // 先清空子元素
+      //     $("#deviceSelect").empty();
+      //     $("#deviceSelect").append(`<option value="">请选择设备</option>`);
+      //     for (let item of items) {
+      //       // 在追加
+      //       $("#deviceSelect").append(
+      //         `<option value="${item.tbDeviceId}">${item.name}</option>`
+      //       );
+      //     }
+      //     form.render();
+      //   });
 
       form.on("select(deviceSelect)", async ({ value }) => {
         if (!value) return;
@@ -5865,8 +6141,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
           `/plugins/telemetry/DEVICE/${value}/keys/timeseries`
         );
         // 先清空子元素
-        $("#attrSelect").empty();
-        $("#attrSelect").append(`<option value="">请选择属性</option>`);
+        $("#attrSelect").html(`<option value="">请选择属性</option>`);
         for (let item of res) {
           // 在追加
           $("#attrSelect").append(`<option value="${item}">${item}</option>`);
@@ -6002,7 +6277,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
       }, 500);
     }
 
-    // 数据交互事件
+    // TODO 数据交互事件
     $("#pressEdit").click({ type: "按下" }, handlePressANDupliftEvent);
     $("#upliftEdit").click({ type: "抬起" }, handlePressANDupliftEvent);
     $("#clickEdit").click({ type: "单击" }, handleClickANDdbClickEvent);
@@ -6016,6 +6291,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     $("#rotateEdit").click({ title: "旋转" }, handleSoundEffectEvent);
   });
 };
+
 /**
  * Adds the label menu items to the given menu and parent.
  */
@@ -6161,9 +6437,9 @@ StyleFormatPanel.prototype.addSvgRule = function (
 
       return rgb && rgb.length === 4
         ? "#" +
-            ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
-            ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
-            ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2)
+        ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
+        ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
+        ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2)
         : "";
     }
 
@@ -6190,7 +6466,7 @@ StyleFormatPanel.prototype.addSvgRule = function (
             graph.setCellStyles(
               mxConstants.STYLE_IMAGE,
               "data:image/svg+xml," +
-                (window.btoa ? btoa(xml) : Base64.encode(xml, true)),
+              (window.btoa ? btoa(xml) : Base64.encode(xml, true)),
               ui.getSelectionState().cells
             );
           }),
@@ -6236,9 +6512,9 @@ StyleFormatPanel.prototype.addEditOps = function (div) {
     btn.setAttribute(
       "title",
       mxResources.get("editStyle") +
-        " (" +
-        this.editorUi.actions.get("editStyle").shortcut +
-        ")"
+      " (" +
+      this.editorUi.actions.get("editStyle").shortcut +
+      ")"
     );
     btn.style.width = "210px";
     btn.style.marginBottom = "2px";
@@ -6349,9 +6625,9 @@ StyleFormatPanel.prototype.addFill = function (container) {
   var tmpColor = mxUtils.getValue(ss.style, fillKey, null);
   gradientPanel.style.display =
     tmpColor != null &&
-    tmpColor != mxConstants.NONE &&
-    ss.fill &&
-    ss.style.shape != "image"
+      tmpColor != mxConstants.NONE &&
+      ss.fill &&
+      ss.style.shape != "image"
       ? ""
       : "none";
 
@@ -6413,7 +6689,7 @@ StyleFormatPanel.prototype.addFill = function (container) {
       fillStyleSelect.style.display = ss.style.sketch == "1" ? "" : "none";
       gradientPanel.style.display =
         !ss.containsImage &&
-        (ss.style.sketch != "1" || fillStyle == "solid" || fillStyle == "auto")
+          (ss.style.sketch != "1" || fillStyle == "solid" || fillStyle == "auto")
           ? ""
           : "none";
     }
@@ -8194,14 +8470,14 @@ StyleFormatPanel.prototype.addStroke = function (container) {
         edgeStyleDiv.className =
           "geSprite " +
           (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
-          "vertical"
+            "vertical"
             ? "geSprite-verticalelbow"
             : "geSprite-horizontalelbow");
       } else if (es == "isometricEdgeStyle") {
         edgeStyleDiv.className =
           "geSprite " +
           (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
-          "vertical"
+            "vertical"
             ? "geSprite-verticalisometric"
             : "geSprite-horizontalisometric");
       } else {
@@ -9770,3 +10046,398 @@ DiagramFormatPanel.prototype.destroy = function () {
     this.gridEnabledListener = null;
   }
 };
+
+// TODO UseLayUi
+class UseLayUi {
+
+  constructor() { }
+
+  static isFunction = fn => {
+    const result = Object.prototype.toString.call(fn)
+    return result === '[object Function]' || result === '[object AsyncFunction]'
+  }
+
+  static dynamicAttr = (attr, value) => value ? `${attr}="${value}"` : ''
+
+  /**
+   * @description format data source to tree structure
+   * @param {object[]} data - data source
+   * @param {Function} [customSetValue = ((record) => ({ id: record.id, title: record.name }))] customSetValue - custom set value && need return value
+   * @returns {object[]}
+   */
+  static formatTreeDataSource(data, customSetValue, idField = 'id', titleField = 'name', childrenField = 'children') {
+    if (!Array.isArray(data) && !data.length) return []
+    customSetValue = customSetValue || ((record) => ({ id: record[idField], title: record[titleField] }))
+    const fn = (data) => {
+      return data.reduce((prev, next = {}) => {
+        let children = []
+        if (next[childrenField] && next[childrenField].length) {
+          children = fn(next.children)
+        }
+        return [...prev, { children, ...customSetValue(next) }]
+      }, [])
+    }
+    return fn(data)
+  }
+
+  static findTreeObjectByField(dataSource, value, findField = 'id', childrenField = 'children') {
+    const map = new Map()
+
+    function find(array) {
+      for (const item of array) {
+        map.set(item[findField], item)
+        if (map.has(item[value])) {
+          break
+        }
+        if (item[childrenField] && Array.isArray(item[childrenField])) {
+          find(item[childrenField])
+        }
+      }
+    }
+
+    if (Array.isArray(dataSource)) {
+      find(dataSource)
+      return map.get(value)
+    }
+  }
+
+  /**
+   * @description create single usage controls
+   * @param {string} content
+   */
+  static createSingleUseFormItem(content, props = '') {
+    return `
+    <div class="layui-form" ${props}>
+      ${content}
+    </div>
+    `
+  }
+
+  /**
+   * @description 判断节点是否在某个节点之内
+   * @param {HTMLElement} parentNode
+   * @param {HTMLElement} childrenNode
+   * @param {boolean} [containsItsOwn = false] containsItsOwn - 是否包含自身
+   * @returns {boolean|*}
+   */
+  static isInNode(parentNode, childrenNode, containsItsOwn = false) {
+    return parentNode === childrenNode
+      ? containsItsOwn
+      : parentNode.contains(childrenNode)
+  }
+
+  /**
+   * @description create layui single select template
+   * @param {string} [options.layFilter] options.layFilter
+   * @param {string} [options.layVerify] options.layVerify
+   * @param {Function} [options.renderFn] options.renderFn
+   * @param {Array} [options.dataSource = []] options.dataSource
+   * @param {string} [options.valueField = id] options.valueField
+   * @param {string} [options.labelField = name] options.labelField - dataSource
+   * @param {string} [options.label = 选择框] options.label - select label
+   * @param {string} [options.className = ''] options.className - css class name
+   * @param {Function} [options.onClick] options.onClick - select on click
+   * @returns {string}
+   */
+  static createSelect(options) {
+    const { form, jquery: $ } = layui
+
+    const {
+      elem,
+      layFilter,
+      layVerify,
+      renderFn,
+      dataSource = [],
+      valueField = 'id',
+      labelField = 'name',
+      label = '',
+      className = '',
+      onClick,
+      singleUsage = true
+    } = options
+
+    const formatDataSource = (dataSource) => {
+      return dataSource.map(record => {
+        return {
+          value: record[valueField],
+          label: record[labelField]
+        }
+      })
+    }
+
+    const getOptionList = (dataSource) => {
+      if (renderFn && this.isFunction(renderFn)) {
+        return dataSource.map(record => renderFn(record))
+      }
+      return formatDataSource(dataSource).map(record => {
+        return `<option value="${record.value}" ${record.disable ? 'disabled=""' : ''}>${record.label}</option>`
+      })
+    }
+
+    const generateOptionTemplate = (dataSource, addPlaceholderOption = true) => {
+      const optionsList = getOptionList(dataSource)
+      if (addPlaceholderOption) optionsList.unshift('<option value="">请选择</option>')
+      return optionsList.join('')
+    }
+
+    if (layFilter) {
+      console.log('has layFilter')
+      form.on(`select(${layFilter})`, (data) => {
+        console.log('enter', data)
+        if (onClick && this.isFunction(onClick)) {
+          onClick(data)
+        }
+      })
+    }
+
+    let template = `
+      <div class="layui-form-item ${className}">
+        <label class="layui-form-label">${label}</label>
+        <div class="layui-input-block"> 
+          <select name="${layFilter}" ${this.dynamicAttr('lay-filter', layFilter)} ${this.dynamicAttr('lay-verify', layVerify)}>
+            ${generateOptionTemplate(dataSource)}
+          </select>
+        </div>
+      </div>`
+
+    const updateOptions = (dataSource) => {
+      if (!elem) return
+      const optionList = generateOptionTemplate(dataSource)
+      $(elem).find('select').html(optionList)
+      form.render('select', layFilter)
+    }
+
+    template = singleUsage ? UseLayUi.createSingleUseFormItem(template, this.dynamicAttr('lay-filter', layFilter)) : template
+
+
+    function mount() {
+      if (elem) {
+        UseLayUi.nextTick(() => {
+          $(elem).html(template)
+        })
+        return { template, updateOptions }
+      }
+      return template
+    }
+    return mount()
+  }
+
+  // TODO Tree Select
+  /**
+   * @description create a tree select controls
+   * @param {string} [options.layFilter] options.layFilter
+   * @param {string} [options.label] options.label
+   * @param {object} [options.treeProps] options.treeProps
+   * @param {HTMLDivElement} [options.elem] options.elem
+   * @param {boolean} [options.singleUsage = true] options.singleUsage
+   * @param {Function} [options.customSetTree = ((record) => ({ id: record.id, title: record.name }))] options.customSetTree
+   * @param {boolean} [options.autoFormatDataSource = true] options.autoFormatDataSource
+   * @param {Function} [options.treeProps.onReady] options.treeProps.onReady
+   */
+  static createTreeSelect(options) {
+    const CLASS_NAME = 'things-kit-tree-select'
+    const SELECT_CLS = 'things-kit-tree-select__tree'
+    const { tree, jquery: $ } = layui
+
+    const {
+      layFilter,
+      label,
+      treeProps = {},
+      elem,
+      className = '',
+      singleUsage = true,
+      customSetTree = undefined,
+      autoFormatDataSource = true,
+      labelField = 'name',
+      valueField = 'id',
+      childrenField = 'children'
+    } = options
+
+    let { data = [], click, onReady } = treeProps
+
+    let template = `
+      <div class="layui-form-item ${CLASS_NAME} ${className}">
+        <label class="layui-form-label">${label}</label>
+        <div class="layui-input-block">
+          <div class="layui-unselect layui-form-select ${SELECT_CLS}">
+            <div class="layui-select-title">
+              <span class="layui-input layui-unselect">请选择</span>
+              <input type="hidden" name="${layFilter}">
+              <i class="layui-edge"></i> 
+            </div>
+            <dl class="layui-anim layui-anim-upbit">
+              <dd>
+                <ul id="${layFilter}"></ul>
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>`
+
+    template = singleUsage ? UseLayUi.createSingleUseFormItem(template) : template
+
+    function setValue({ id, title }) {
+      $(elem)
+        .find('.layui-form-select').removeClass('layui-form-selected').end()
+        .find(".layui-select-title span").html(title).end()
+        .find(`input:hidden[name='${layFilter}']`).val(id);
+    }
+
+    // init mount
+    function mount() {
+      // mount select container
+      $(elem).empty()
+      $(elem).append(template)
+
+      // mount tree
+      UseLayUi.nextTick(() => {
+        tree.render({
+          ...treeProps,
+          ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
+          elem: `#${layFilter}`,
+          click(node) {
+            setValue(node.data)
+            if (UseLayUi.isFunction(click)) click(node)
+          },
+        })
+
+        // focus
+        $(`.${SELECT_CLS}`)
+          .on("click", ".layui-select-title", function (e) {
+            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
+            $(this).parents(`.${SELECT_CLS}`).toggleClass("layui-form-selected");
+            layui.stope(e);
+          })
+          .on('click', '.layui-anim', (e) => {
+            layui.stope(e)
+          })
+          .on("click", "dl i", function (e) {
+            layui.stope(e);
+          })
+
+        // blur
+        $(document)
+          .on("click", function (e) {
+            const target = e.target
+            const parentNode = document.getElementById(layFilter)
+            if (!parentNode) return
+            const showClose = UseLayUi.isInNode(parentNode, target, true)
+            if (showClose) return
+            $(`.${SELECT_CLS}`).removeClass("layui-form-selected")
+          });
+
+        if (UseLayUi.isFunction(onReady)) {
+          onReady(setValue)
+        }
+      })
+    }
+
+    mount()
+  }
+
+  static createCheckBox(options) {
+    const { jquery: $, form } = layui
+    const CLASS_NAME = 'things-kit__checkbox'
+    let {
+      elem,
+      singleUsage = true,
+      layFilter = '',
+      layVerify = '',
+      label = '',
+      laySkin = 'primary',
+      dataSource = [],
+      customSetValue,
+      onChange
+    } = options
+    customSetValue = customSetValue || ((record) => ({ value: record.id, title: record.name }))
+    if (!Array.isArray(dataSource)) {
+      dataSource = [dataSource]
+    }
+
+    function createOptions(dataSource) {
+      return dataSource.map((record) => {
+        return `<input type="checkbox" lay-skin="${laySkin}" ${UseLayUi.dynamicAttr('name', record.value)} ${UseLayUi.dynamicAttr('title', record.label)} ${UseLayUi.dynamicAttr('lay-filter', layFilter)} ${UseLayUi.dynamicAttr('lay-verify', layVerify)} ${UseLayUi.dynamicAttr('checked', record.checked)}>`
+      })
+    }
+
+    let template = `
+     <div class="layui-form-item ${CLASS_NAME}" >
+        <label class="layui-form-label">${label}</label>
+        <div class="layui-input-block">
+          ${createOptions(dataSource).join('')}
+        </div>
+      </div>
+    `
+    template = singleUsage ? UseLayUi.createSingleUseFormItem(template) : template
+
+    function mount() {
+      if (!elem) return template
+      $(elem).empty()
+      $(elem).append(template)
+      form.on(`checkbox(${layFilter})`, (data) => {
+        onChange && (onChange(data))
+      })
+      form.render()
+    }
+
+    return mount()
+  }
+
+  /**
+   * @description 创建树形组件
+   * @param {object} options 
+   * @param {string | object} option.elem - 挂载节点
+   * @param {object[]} [data] option.data - 数据源
+   * @param {string} [id] option.id - 用于基础方法传参使用
+   * @param {boolean} [showCheckbox = false] option.showCheckbox - 显示复选框
+   * @param {boolean|string[]} [edit] option.edit - 是否开启节点操作
+   * @param {boolean} [accordion = false] option.accordion - 手风琴
+   * @param {boolean} [onlyIconControl = false] option.onlyIconControl - 仅允许左侧图标展开收缩
+   * @param {boolean} [isJump = false] option.isJump - 跳转
+   * @param {boolean} [showLine = trueoption.showLine - 显示连接线
+   * @param {object} [text] option.text - 自定义默认值
+   * @param {string} [valueField = 'id'] option.valueField - 值字段
+   * @param {string} [labelField = 'name'] option.labelField - 标签字段
+   * @param {string} [childrenField = 'children'] option.childrenField - 后代节点字段
+   * @param {Function} [customSetValue] option.customSetValue - 后代节点字段
+   * @param {boolean} [autoFormatValue = true] option.autoFormatValue - 自动格式化值
+   */
+  static createTree(options = {}) {
+    const { tree } = layui
+    const { data = [], valueField = 'id', labelField = 'name', childrenField = 'children', customSetValue, autoFormatValue = true } = options
+    tree.render({
+      ...options,
+      data: autoFormatValue ? UseLayUi.formatTreeDataSource(data, customSetValue, valueField, labelField, childrenField) : data,
+    })
+  }
+
+
+  static nextTick(fn) {
+    new Promise((resolve) => {
+      resolve()
+    }).then(() => {
+      fn()
+    })
+  }
+
+
+
+}
+
+
+/**
+ * @description use to function capture await throw error
+ * @param promise
+ * @param errorExt - Additional Information you can pass to the err object
+ */
+function to(promise, errorExt) {
+  return promise
+    .then((data) => [null, data])
+    .catch((err) => {
+      if (errorExt) {
+        const parsedError = Object.assign({}, err, errorExt)
+        return [parsedError, undefined]
+      }
+      return [err, undefined]
+    })
+}

+/**
+    Format 修改的样式
+ */
+
+/*  */
+.override__panel--default {
+    padding: 8px 14px !important;
+    border-bottom: none !important;
+}
+
+.override__title--default {
+    width: 100% !important;
+    padding: 6px 0px 6px 6px !important;
+    border-top: 1px solid #dadce0 !important
+}
+
+.interaction__container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.interaction__container>div {
+    flex: auto;
+}
+
+.interaction__container>i {
+    display: block;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    background-image: url(../images/edit20.png);
+}
+
+
+/* ========= 数据源部分 ============ */
+.data-source__select-container {
+    display: flex;
+    align-items: center;
+    overflow: visible !important;
+    padding: 8px 0 8px 14px !important;
+    margin-left: 0;
+}
+
+.data-panel__select {
+    display: flex;
+    margin-bottom: 0;
+}
+
+.data-panel__select .layui-form-label {
+    padding: 9px 10px 9px 0;
+    width: auto;
+}
+
+.data-panel__select .layui-input-block {
+    flex: auto;
+    margin-left: 0;
+}
+
+
+/* ================ Tree Select ================== */
+
+/*.things-kit-tree-select {*/
+/*    width: 100%;*/
+/*}*/
+
+.things-kit-tree-select__tree .layui-select-title span {
+    line-height: 38px;
+}
+
+.things-kit-tree-select__tree dl {
+    padding: 10px 0;
+}
+
+.things-kit-tree-select__tree dl dd:hover {
+    background-color: #fff;
+}
+
+
+/*.things-kit-tree-select .layui-form-label {*/
+/*    flex: auto;*/
+/*    max-width: 80px;*/
+/*    padding: 9px 0;*/
+/*    width: auto;*/
+/*    border: none;*/
+/*}*/
+
+/*.things-kit-tree-select {*/
+/*    display: flex;*/
+/*    margin-bottom: 0;*/
+/*}*/
+
+/*.things-kit-tree-select .layui-input-block {*/
+/*    margin-left: 0;*/
+/*    padding: 0 10px;*/
+/*    flex: auto;*/
+/*}*/
+
+/* ============== checkbox ===================== */
+
+.things-kit__checkbox .layui-form-label {
+    max-width: 80px;
+    padding: 9px 0;
+    width: auto;
+    border: none;
+}
+
+.things-kit__checkbox {
+    display: flex;
+    margin-bottom: 0;
+}
+
+.things-kit__checkbox .layui-input-block {
+    margin-left: 0;
+    padding: 0 10px;
+    flex: auto;
+}