perf: Upgrade drawio

docker-compose.yml

@@ -113,7 +113,7 @@ services:
 
   drawio-webapp:
     container_name: "dootask-drawio-webapp-${APP_ID}"
-    image: "jgraph/drawio:20.8.20"
+    image: "jgraph/drawio:24.7.17"
     volumes:
       - ./docker/drawio/webapp/index.html:/usr/local/tomcat/webapps/draw/index.html
       - ./docker/drawio/webapp/stencils:/usr/local/tomcat/webapps/draw/stencils

docker/drawio/webapp/README.md

@@ -1,3 +1,3 @@
 # Change
 
-diff https://github.com/jgraph/drawio/tree/1a858166fb4f1330cf23e58941e3fbec1dcd16f8
+diff https://github.com/jgraph/drawio/tree/acd938b1e42cff3be3b629e6239cdec9a9baddcc

docker/drawio/webapp/index.html

@@ -16,7 +16,7 @@
 	<meta name="msapplication-config" content="images/browserconfig.xml">
     <meta name="mobile-web-app-capable" content="yes">
 	<meta name="theme-color" content="#d89000">
-	<script type="text/javascript">
+	<script id="geBootstrap" type="text/javascript">
 		window.EXPORT_URL = window.location.origin + "/drawio/export/";
 		window.DRAWIO_LIGHTBOX_URL = window.location.origin + "/drawio/webapp";
 		setInterval(function() {window.ICONSEARCH_PATH = window.location.origin + "/drawio/iconsearch";}, 1000)
@@ -24,7 +24,7 @@
 		/**
 		 * URL Parameters and protocol description are here:
 		 *
-		 * https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported
+		 * https://www.drawio.com/doc/faq/supported-url-parameters
 		 *
 		 * Parameters for developers:
 		 *
@@ -77,7 +77,8 @@
 		}
 		
 		// Global variable for desktop
-		var mxIsElectron = window && window.process && window.process.type;
+		var mxIsElectron = navigator.userAgent != null && navigator.userAgent.toLowerCase().indexOf(' electron/') > -1 && 
+							navigator.userAgent.indexOf(' draw.io/') > -1;
 
 		// Redirects page if required
 		if (urlParams['dev'] != '1')
@@ -225,7 +226,7 @@
 
 			if (mxIsElectron)
 			{
-				// 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');
+				mxmeta(null, 'default-src \'self\'; script-src \'self\' \'sha256-6g514VrT/cZFZltSaKxIVNFF46+MFaTSDTPB8WfYK+c=\'; connect-src \'self\' https://*.draw.io https://*.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com; img-src * data:; media-src *; font-src *; frame-src \'none\'; style-src \'self\' \'unsafe-inline\' https://fonts.googleapis.com; base-uri \'none\';child-src \'self\';object-src \'none\';', 'Content-Security-Policy');
 			}
 		})();
 		
@@ -257,19 +258,15 @@
 		if (urlParams['dev'] == '1')
 		{
 			// Used to request grapheditor/mxgraph sources in dev mode
-			var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main';
+			var mxDevUrl = '';
 			
 			// Used to request draw.io sources in dev mode
-			var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/';
+			var drawDevUrl = '';
-			var geBasePath = drawDevUrl + '/js/grapheditor';
+			var geBasePath = 'js/grapheditor';
-			var mxBasePath = mxDevUrl + '/mxgraph';
+			var mxBasePath = 'mxgraph/src';
 			
 			if (document.location.protocol == 'file:')
 			{
-				geBasePath = './js/grapheditor';
-				mxBasePath = './mxgraph';
-				drawDevUrl = './';
-
 				// Forces includes for dev environment in node.js
 				mxForceIncludes = true;
 			}
@@ -332,14 +329,14 @@
 								});
 							});
 						}
-						else if (!supportedDomain)
+						else if (!supportedDomain || navigator.onLine)
 						{
 							mxscript('js/PostConfig.js');
 						}
 					});
 				};
 				
-				if (!supportedDomain || mxIsElectron)
+				if (!supportedDomain || mxIsElectron || navigator.onLine)
 				{
 					mxscript('js/PreConfig.js', loadAppJS);
 				}
@@ -361,12 +358,10 @@
 			}
 		};
 	</script>
-    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
+    <link rel="icon" href="favicon.ico" sizes="any">
-	<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-	<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
     <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
+	<link rel="stylesheet" media="(forced-colors: active)" href="styles/high-contrast.css" id="high-contrast-stylesheet">
     <link rel="canonical" href="https://app.diagrams.net">
 	<link rel="manifest" href="images/manifest.json">
 	<link rel="shortcut icon" href="favicon.ico">
@@ -452,7 +447,7 @@
 		</p>
 	</div>
 </div>
-<script type="text/javascript">
+<script id="geMain" type="text/javascript">
 /**
  * Main
  */

docker/drawio/webapp/js/diagramly/ElectronApp.js

@@ -2,6 +2,7 @@ window.PLUGINS_BASE_PATH = '.';
 window.TEMPLATE_PATH = 'templates';
 window.DRAW_MATH_URL = 'math/es5';
 window.DRAWIO_BASE_URL = '.'; //Prevent access to online website since it is not allowed
+window.DRAWIO_SERVER_URL = '.';
 FeedbackDialog.feedbackUrl = 'https://log.draw.io/email';
 EditorUi.draftSaveDelay = 5000;
 //Disables eval for JS (uses shapes-14-6-5.min.js)
@@ -51,43 +52,51 @@ mxStencilRegistry.allowEval = false;
 
 	PrintDialog.previewEnabled = false;
 	
-	PrintDialog.electronPrint = function(editorUi, allPages, pagesFrom, pagesTo,
+	PrintDialog.electronPrint = function(editorUi, args)
-			fit, sheetsAcross, sheetsDown, zoom, pageScale, pageFormat)
 	{
-		var xml = '', title = '';
+		var graph = editorUi.editor.graph;
 		var file = editorUi.getCurrentFile();
 
 		if (file)
 		{
 			file.updateFileData();
-			xml = editorUi.getFileData(true, null, null, null, null, false,
-				null, null, null, false, true);
-			title = file.title;
 		}
 
-		var extras = {globalVars: editorUi.editor.graph.getExportVariables()};
+		var xml = editorUi.getFileData(true, null, null, null,
+			!args.selection, false, null, null, null, false, true);
+		
+		var extras = {globalVars: graph.getExportVariables()};
 
 		if (Graph.translateDiagram)
 		{
 			extras.diagramLanguage = Graph.diagramLanguage;
 		}
 
+		if (args.grid)
+		{
+			extras.grid = {
+				size: graph.gridSize,
+				steps: graph.view.gridSteps,
+				color: graph.view.gridColor
+			};
+		}
+		
 		new mxElectronRequest('export', {
+			fileTitle: editorUi.getBaseFilename(true),
 			print: true,
 			format: 'pdf',
 			xml: xml,
-			from: pagesFrom - 1,
+			from: args.pagesFrom - 1,
-			to: pagesTo - 1,
+			to: args.pagesTo - 1,
-			allPages: allPages,
+			allPages: args.allPages ? '1' : '0',
-			pageWidth: pageFormat.width,
+			pageScale: 1,
-			pageHeight: pageFormat.height,
+			fit: args.fit ? '1' : '0',
-			pageScale: pageScale,
+			sheetsAcross: args.sheetsAcross,
-			fit: fit,
+			sheetsDown: args.sheetsDown,
-			sheetsAcross: sheetsAcross,
+			scale: args.scale,
-			sheetsDown: sheetsDown,
-			scale: zoom,
 			extras: JSON.stringify(extras),
-			fileTitle: title
+			border: args.border,
+			crop: args.crop ? '1' : '0'
 		}).send(function(){}, function(){});
 	};
 	
@@ -148,7 +157,9 @@ mxStencilRegistry.allowEval = false;
 						{
 							plugins[i] = './' + plugins[i];
 						}
-						else
+
+						// External plugins in App Data folder (Needs enabling plugins)
+						if (!plugins[i].startsWith('./plugins/'))
 						{
 							let pluginFile = await requestSync({
 								action: 'getPluginFile',
@@ -281,15 +292,14 @@ mxStencilRegistry.allowEval = false;
 			}
 			
 			this.addMenuItems(menu, ['-', 'pageSetup', 'print'], parent);
-			// LATER: Find API for application.quit
 		})));
 	};
 
 	var graphCreateLinkForHint = Graph.prototype.createLinkForHint;
 	
-	Graph.prototype.createLinkForHint = function(href, label)
+	Graph.prototype.createLinkForHint = function(href, label, associatedCell)
 	{
-		var a = graphCreateLinkForHint.call(this, href, label);
+		var a = graphCreateLinkForHint.call(this, href, label, associatedCell);
 		
 		if (href != null && !this.isCustomLink(href))
 		{
@@ -311,17 +321,17 @@ mxStencilRegistry.allowEval = false;
 
 	// Initializes the user interface
 	var editorUiInit = EditorUi.prototype.init;
-	EditorUi.prototype.init = function()
+	EditorUi.prototype.init = async function()
 	{
 		editorUiInit.apply(this, arguments);
 
 		var editorUi = this;
 		var graph = this.editor.graph;
 		
-		electron.registerMsgListener('isModified', () =>
+		electron.registerMsgListener('isModified', (uniqueId) =>
 		{
 			const currentFile = editorUi.getCurrentFile();
-			let reply = {isModified: false, draftPath: null};
+			let reply = {isModified: false, draftPath: null, uniqueId: uniqueId};
 
 			if (currentFile != null)
 			{
@@ -528,6 +538,22 @@ mxStencilRegistry.allowEval = false;
 		editorUi.keyHandler.bindAction(78, true, 'new'); // Ctrl+N
 		editorUi.keyHandler.bindAction(79, true, 'open'); // Ctrl+O
 
+		var isFullScreen = await requestSync('isFullscreen');
+
+		var fullscreenAction = editorUi.actions.addAction('fullscreen', async function()
+		{
+			electron.sendMessage('toggleFullscreen');
+			isFullScreen = await requestSync('isFullscreen');
+		});
+
+		fullscreenAction.visible = true;
+		fullscreenAction.setToggleAction(true);
+		
+		fullscreenAction.setSelectedCallback(function()
+		{
+			return isFullScreen;
+		});
+		
 		function createGraph()
 		{
 			var graph = new Graph();
@@ -767,6 +793,13 @@ mxStencilRegistry.allowEval = false;
 				});
 			}, true).container, 360, 225, true, false);
 		});
+
+		editorUi.actions.addAction('exit', function()
+		{
+			electron.request({
+				action: 'exit'
+			});
+		});
 	}
 	
 	var appLoad = App.prototype.load;
@@ -935,8 +968,8 @@ mxStencilRegistry.allowEval = false;
 							'inConflictState', file.inConflictState,
 							'unwatchedSaves', file.unwatchedSaves);
 						
-						//File is changed (not just accessed) && File is not already in a conflict state
+						// File not deleted, changed (not just accessed) and not already in conflict state
-						if (curr.mtimeMs != prev.mtimeMs && !file.inConflictState)
+						if (curr.mtimeMs != 0 && curr.mtimeMs != prev.mtimeMs && !file.inConflictState)
 						{
 							//Ignore our own changes
 							if (file.unwatchedSaves || (file.stat != null && file.stat.mtimeMs == curr.mtimeMs))
@@ -1009,6 +1042,7 @@ mxStencilRegistry.allowEval = false;
 			{
 				var library = new DesktopLibrary(this, data, fileEntry);
 				this.loadLibrary(library);
+				this.showSidebar();
 			}
 			catch (e)
 			{
@@ -1108,16 +1142,11 @@ mxStencilRegistry.allowEval = false;
 						this.hideDialog();
 						fn(fileEntry, drafts[index].data, stat, null, true);
 						await requestSync({action: 'deleteFile', file: drafts[index].path});
-					}), mxUtils.bind(this, function(index)
+					}), mxUtils.bind(this, async function(index)
 					{
 						index = index || 0;
-
-						// Discard draft
-						this.confirm(mxResources.get('areYouSure'), null, mxUtils.bind(this, async function()
-						{
 						await requestSync({action: 'deleteFile', file: drafts[index].path});
 						this.hideDialog();
-						}), mxResources.get('no'), mxResources.get('yes'));
 					}), null, null, null, (drafts.length > 1) ? drafts : null);
 					
 					this.showDialog(dlg.container, 640, 480, true, false);
@@ -1162,6 +1191,7 @@ mxStencilRegistry.allowEval = false;
 						try
 						{
 							this.loadLibrary(new LocalLibrary(this, xml, name));
+							this.showSidebar();
 						}
 						catch (e)
 						{
@@ -1187,7 +1217,24 @@ mxStencilRegistry.allowEval = false;
 				if (tmp != null)
 				{
 					var name = fileEntry.name;
-					fn(null, tmp, null, name.substring(0, name.lastIndexOf('.')) + '.drawio', false);
+
+					if (name.substring(name.length - 4) == '.pdf')
+					{
+						name = name.substring(0, name.length - 4);
+					}
+
+					name = name.substring(0, name.lastIndexOf('.')) + '.drawio';
+					
+					fn(null, tmp, null, name, false);
+
+					// Fixes ignore filename in above callback
+					var file = this.getCurrentFile();
+
+					if (file != null)
+					{
+						file.rename(name);
+					}
+
 					checkDrafts();
 					return;
 				}
@@ -1213,7 +1260,9 @@ mxStencilRegistry.allowEval = false;
 						if (file != null && file.fileObject != null && file.fileObject.path == path)
 						{
 							file.setEditable(false);
-							this.editor.setStatus('<div class="geStatusAlert">' + mxResources.get('readOnly') + '</div>');
+							this.editor.setStatus('<div class="geStatusBox" title="' +
+								mxUtils.htmlEntities(mxResources.get('readOnly')) + '">' +
+								mxUtils.htmlEntities(mxResources.get('readOnly')) + '</div>');
 						}
 					}
 				}));
@@ -1289,66 +1338,6 @@ mxStencilRegistry.allowEval = false;
 		this.stat = stat;
 	};
 	
-	LocalFile.prototype.reloadFile = function(success)
-	{
-		if (this.fileObject == null)
-		{
-			this.ui.handleError({message: mxResources.get('fileNotFound')});
-		}
-		else
-		{
-			this.ui.spinner.stop();
-
-			var fn = mxUtils.bind(this, function()
-			{
-				this.setModified(false);
-				var page = this.ui.currentPage;
-				var viewState = this.ui.editor.graph.getViewState();
-				var selection = this.ui.editor.graph.getSelectionCells();
-
-				if (this.ui.spinner.spin(document.body, mxResources.get('loading')))
-				{
-					this.ui.readGraphFile(mxUtils.bind(this, function(fileEntry, data, stat, name, isModified)
-					{
-						this.ui.spinner.stop();
-
-						var file = new LocalFile(this.ui, data, '');
-						file.fileObject = fileEntry;
-						file.stat = stat;
-						file.setModified(isModified? true : false);
-						this.ui.fileLoaded(file);
-						this.ui.restoreViewState(page, viewState, selection);
-
-						if (this.backupPatch != null)
-						{
-							this.patch([this.backupPatch]);
-						}
-
-						if (success != null)
-						{
-							success();
-						}
-					}), mxUtils.bind(this, function(err)
-					{
-						this.handleFileError(err);
-					}), this.fileObject.path);
-				}
-			});
-
-			if (this.isModified() && this.backupPatch == null)
-			{
-				this.ui.confirm(mxResources.get('allChangesLost'), mxUtils.bind(this, function()
-				{
-					this.handleFileSuccess(DrawioFile.SYNC == 'manual');
-				}), fn, mxResources.get('cancel'), mxResources.get('discardChanges'));
-			}
-			else
-			{
-				fn();
-			}
-		}
-	};
-
 	LocalFile.prototype.isAutosave = function()
 	{
 		return this.fileObject != null && DrawioFile.prototype.isAutosave.apply(this, arguments);
@@ -1369,8 +1358,6 @@ mxStencilRegistry.allowEval = false;
 		return false;
 	};
 	
-	// Restores default implementation of open with autosave
-	LocalFile.prototype.open = DrawioFile.prototype.open;
 	var autoSaveEnabled = false;
 
 	LocalFile.prototype.save = function(revision, success, error, unloading, overwrite)
@@ -1402,16 +1389,6 @@ mxStencilRegistry.allowEval = false;
 		return stat != null && this.stat != null && stat.mtimeMs != this.stat.mtimeMs;
 	};
 	
-	LocalFile.prototype.isEditable = function()
-	{
-		return this.editable != null? this.editable : this.ui.editor.editable;
-	};
-
-	LocalFile.prototype.setEditable = function(editable)
-	{
-		this.editable = editable;
-	};
-
 	LocalFile.prototype.saveFile = async function(revision, success, error, unloading, overwrite)
 	{
 		//Safeguard in case saveFile is called from online code in the future
@@ -1579,7 +1556,9 @@ mxStencilRegistry.allowEval = false;
 	{
 		try
 		{
-			var lastDir = localStorage.getItem('.lastSaveDir');
+			var lastDir = (this.fileObject != null && this.fileObject.path != null) ?
+				await requestSync({action: 'dirname', path: this.fileObject.path}) :
+				localStorage.getItem('.lastSaveDir');
 			var name = this.ui.normalizeFilename(this.getTitle(),
 				this.constructor == LocalLibrary ? 'xml' : null);
 			var ext = null;
@@ -1619,8 +1598,11 @@ mxStencilRegistry.allowEval = false;
 		}
 	};
 	
-	LocalFile.prototype.saveDraft = function()
+	LocalFile.prototype.saveDraft = function(data)
 	{
+		// Save draft only if file is not saved (prevents creating draft file after actual file is saved)
+		if (!this.isModified()) return;
+
 		if (this.fileObject == null)
 		{
 			//Use indexed db for unsaved files
@@ -1631,7 +1613,7 @@ mxStencilRegistry.allowEval = false;
 			electron.request({
 				action: 'saveDraft',
 				fileObject: this.fileObject,
-				data: this.ui.getFileData()
+				data: (data != null) ? data : this.ui.getFileData()
 			}, mxUtils.bind(this, function(draftFileName)
 			{
 				this.fileObject.draftFileName = draftFileName;
@@ -1827,22 +1809,42 @@ mxStencilRegistry.allowEval = false;
 	App.prototype.checkForUpdates = function()
 	{
 		electron.sendMessage('checkForUpdates');
-	}
+	};
 	
 	App.prototype.toggleSpellCheck = function()
 	{
 		electron.sendMessage('toggleSpellCheck');
-	}
+	};
 
 	App.prototype.toggleStoreBkp = function()
 	{
 		electron.sendMessage('toggleStoreBkp');
-	}
+	};
+	
+	App.prototype.toggleGoogleFonts = function()
+	{
+		electron.sendMessage('toggleGoogleFonts');
+	};
 
 	App.prototype.openDevTools = function()
 	{
 		electron.sendMessage('openDevTools');
-	}
+	};
+		
+	App.prototype.desktopZoomIn = function()
+	{
+		electron.sendMessage('zoomIn');
+	};
+
+	App.prototype.desktopZoomOut = function()
+	{
+		electron.sendMessage('zoomOut');
+	};
+
+	App.prototype.desktopResetZoom = function()
+	{
+		electron.sendMessage('resetZoom');
+	};
 
 	/**
 	 * Copies the given cells and XML to the clipboard as an embedded image.
@@ -1945,12 +1947,14 @@ mxStencilRegistry.allowEval = false;
 		return this.response;
 	}
 	
-	//Direct export to pdf
+	// Direct export to pdf
-	EditorUi.prototype.createDownloadRequest = function(filename, format, ignoreSelection,
+	EditorUi.prototype.createDownloadRequest = function(filename, format, ignoreSelection, base64,
-		base64, transparent, currentPage, scale, border, grid, includeXml, pageRange, w, h)
+		transparent, currentPage, scale, border, grid, includeXml, pageRange, w, h, crop, margin,
+		fit, sheetsAcross, sheetsDown)
 	{
-		var params = this.downloadRequestBuilder(filename, format, ignoreSelection,
+		var params = this.downloadRequestBuilder(filename, format, ignoreSelection, base64,
-			base64, transparent, currentPage, scale, border, grid, includeXml, pageRange, w, h);
+			transparent, currentPage, scale, border, grid, includeXml, pageRange, w, h, crop,
+			margin, fit, sheetsAcross, sheetsDown);
 		
 		return new mxElectronRequest('export', params);
 	};
@@ -1992,8 +1996,8 @@ mxStencilRegistry.allowEval = false;
 				}
 				else 
 				{
-					editorUi.exportImage(s, false, true,
+					editorUi.exportImage(s, false, true, false,
-						false, false, b, true, false, 'jpeg');
+						false, b, true, false, 'jpeg');
 				}
 			}
 			else 
@@ -2079,6 +2083,11 @@ mxStencilRegistry.allowEval = false;
 				          { name: 'XML Documents', extensions: ['xml'] }
 				       ];
 				break;
+				case 'txt':
+					filters = [
+				          { name: 'Plain Text', extensions: ['txt'] }
+				       ];
+				break;
 			};
 			
 			dlgConfig['filters'] = filters;
@@ -2105,10 +2114,10 @@ mxStencilRegistry.allowEval = false;
 					}, mxUtils.bind(this, function ()
 				    {
 						this.spinner.stop();
-		        	}), mxUtils.bind(this, function ()
+		        	}), mxUtils.bind(this, function (e)
 				    {
 						this.spinner.stop();
-						this.handleError({message: mxResources.get('errorSavingFile')});
+						this.handleError(e, mxResources.get('errorSavingFile'));
 		        	}));
 				}
 			}
@@ -2123,6 +2132,7 @@ mxStencilRegistry.allowEval = false;
 		{
 			var library = new DesktopLibrary(this, data, fileEntry);
 			this.loadLibrary(library);
+			this.showSidebar();
 			success(library);
 		}), error, libPath);
 	};

resources/drawio

@@ -1 +1 @@
-Subproject commit 1a858166fb4f1330cf23e58941e3fbec1dcd16f8
+Subproject commit acd938b1e42cff3be3b629e6239cdec9a9baddcc