21.7.4 release

ChangeLog

@@ -1,7 +1,23 @@
+08-SEP-2023: 21.7.4
+
+- AWS shapes update to Q2 2023 [drawio-3677]
+
+08-SEP-2023: 21.7.3
+
+- Adds title attribute support for custom links
+- Adds Ctrl+Alt+X for copy as image [drawio-3754]
+- Changed app name in shortcuts edit link to draw.io
+- Uses pre-line for newlines in tooltips [DID-9327]
+- Adds WebP image export [drawio-553]
+- Enables text selection in lightbox [drawio-3732]
+- [conf cloud] Added support for custom templates in page IDs import [DID-9320]
+- [conf cloud] Showing actual filename in viewer title tooltip when displayName is different [DID-9241]
+- Handles possible JSON parsing error in DriveClient
+
 01-SEP-2023: 21.7.2
 
 - Fixes library item zoom on label select [DID-9295]
-- Conf Cloud: Added support for diagram names with spaces (untrimmed) [DID-9038]
+- [conf cloud]] Added support for diagram names with spaces (untrimmed) [DID-9038]
 
 30-AUG-2023: 21.7.1
 

VERSION

@@ -1 +1 @@
-21.7.2
+21.7.4

src/main/webapp/js/diagramly/Dialogs.js

@@ -6153,6 +6153,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn, showPages, showN
 	pageRadio.setAttribute('name', 'geLinkDialogOption');
 
 	var pageSelect = document.createElement('select');
+	pageSelect.style.maxWidth = '100%';
 	pageSelect.style.width = '380px';
 
 	var newWindowCheckbox = document.createElement('input');
@@ -6350,19 +6351,28 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn, showPages, showN
 	var btns = document.createElement('div');
 	btns.style.marginTop = '18px';
 	btns.style.textAlign = 'center';
-
-	var helpBtn = mxUtils.button(mxResources.get('help'), function()
-	{
-		editorUi.openLink('https://www.drawio.com/doc/faq/custom-links');
-	});
-
-	helpBtn.style.verticalAlign = 'middle';
-	helpBtn.className = 'geBtn';
-	btns.appendChild(helpBtn);
 
-	if (editorUi.isOffline() && !mxClient.IS_CHROMEAPP)
+	if (!editorUi.isOffline())
 	{
-		helpBtn.style.display = 'none';
+		var link = document.createElement('a');
+		link.setAttribute('href', 'https://www.drawio.com/doc/faq/custom-links');
+		link.setAttribute('title', mxResources.get('help'));
+		link.setAttribute('target', '_blank');
+		link.style.marginLeft = '8px';
+		link.style.cursor = 'help';
+
+		var icon = document.createElement('img');
+		mxUtils.setOpacity(icon, 50);
+		icon.style.height = '16px';
+		icon.style.width = '16px';
+		icon.setAttribute('border', '0');
+		icon.setAttribute('valign', 'middle');
+		icon.style.marginTop = (mxClient.IS_IE11) ? '0px' : '-4px';
+		icon.setAttribute('src', Editor.helpImage);
+		link.appendChild(icon);
+		icon.className = 'geAdaptiveAsset';
+
+		btns.appendChild(link);
 	}
 
 	var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
@@ -6412,7 +6422,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn, showPages, showN
 	selectDropdown.className = 'geBtn';
 	selectDropdown.style.position = 'relative';
 	selectDropdown.style.top = '1px';
-	selectDropdown.style.maxWidth = '120px';
+	selectDropdown.style.maxWidth = '100px';
 	var selectFn = {};
 
 	var option = document.createElement('option');

src/main/webapp/js/diagramly/DriveClient.js

@@ -848,30 +848,40 @@ DriveClient.prototype.updateUser = function(success, error)
 
 		this.ui.editor.loadUrl(url, mxUtils.bind(this, function(data)
 		{
-	    	var info = JSON.parse(data);
-
-	    	// Requests more information about the user (email address is sometimes not in info)
-	    	this.executeRequest({url: '/about'}, mxUtils.bind(this, function(resp)
-	    	{
-	    		var email = mxResources.get('notAvailable');
-	    		var name = email;
-	    		var pic = null;
-
-	    		if (resp != null && resp.user != null)
-	    		{
-	    			email = resp.user.emailAddress;
-	    			name = resp.user.displayName;
-	    			pic = (resp.user.picture != null) ? resp.user.picture.url : null;
-	    		}
-
-	    		this.setUser(new DrawioUser(info.id, email, name, pic, info.locale));
-	    		this.userId = info.id;
-
-	    		if (success != null)
+			try
+			{
+				var info = JSON.parse(data);
+
+				// Requests more information about the user (email address is sometimes not in info)
+				this.executeRequest({url: '/about'}, mxUtils.bind(this, function(resp)
 				{
-					success();
+					var email = mxResources.get('notAvailable');
+					var name = email;
+					var pic = null;
+
+					if (resp != null && resp.user != null)
+					{
+						email = resp.user.emailAddress;
+						name = resp.user.displayName;
+						pic = (resp.user.picture != null) ? resp.user.picture.url : null;
+					}
+
+					this.setUser(new DrawioUser(info.id, email, name, pic, info.locale));
+					this.userId = info.id;
+
+					if (success != null)
+					{
+						success();
+					}
+				}), error);
+			}
+			catch (e)
+			{
+				if (error != null)
+				{
+					error(e);
 				}
-	    	}), error);
+			}
 		}), error, null, null, null, null, headers);
 	}
 	catch (e)

src/main/webapp/js/diagramly/EditorUi.js

@@ -423,6 +423,7 @@
 	{
 		EditorUi.prototype.useCanvasForExport = false;
 		EditorUi.prototype.jpgSupported = false;
+		EditorUi.prototype.webpSupported = false;
 
 		// Checks if canvas is supported
 		try
@@ -467,14 +468,16 @@
 			// ignore
 		}
 
-		// Checks for client-side JPG support
+		// Checks for client-side JPG and WebP support
 		try
 		{
 		    var canvas = document.createElement('canvas');
 		    canvas.width = canvas.height = 1;
 		    var uri = canvas.toDataURL('image/jpeg');
-
 		    EditorUi.prototype.jpgSupported = (uri.match('image/jpeg') !== null);
+
+			uri = canvas.toDataURL('image/webp');
+		    EditorUi.prototype.webpSupported = (uri.match('image/webp') !== null);
 		}
 		catch (e)
 		{
@@ -6507,7 +6510,7 @@
 		var div = document.createElement('div');
 		div.style.whiteSpace = 'nowrap';
 		var graph = this.editor.graph;
-		var height = (format == 'jpeg') ? 220 : 300;
+		var height = (format == 'jpeg' || format == 'webp') ? 220 : 300;
 
 		var hd = document.createElement('h3');
 		mxUtils.write(hd, title);
@@ -6630,7 +6633,7 @@
 
 		var defaultTransparent = false; /*graph.background == mxConstants.NONE || graph.background == null*/; 
 		var transparent = this.addCheckbox(div, mxResources.get('transparentBackground'),
-			defaultTransparent, null, null, format != 'jpeg');
+			defaultTransparent, null, null, format != 'jpeg' && format != 'webp');
 
 		var themeSelect = null;
 
@@ -6679,15 +6682,15 @@
 
 		var grid = null;
 
-		if (format == 'png' || format == 'jpeg')
+		if (format == 'png' || format == 'jpeg' || format == 'webp')
 		{
 			grid = this.addCheckbox(div, mxResources.get('grid'), false,
 				this.isOffline() || !this.canvasSupported, false, true); 
 			height += 30;
 		}
 
 		var include = this.addCheckbox(div, mxResources.get('includeCopyOfMyDiagram'),
-			defaultInclude, null, null, format != 'jpeg');
+			defaultInclude, null, null, format != 'jpeg' && format != 'webp');
 		include.style.marginBottom = '16px';
 
 		var cb5 = document.createElement('input');
@@ -14580,12 +14583,39 @@
 		}
 		else if (href.substring(0, 5) == 'data:')
 		{
-			title = mxResources.get('action');
+			title = this.getCustomLinkTitle(href);
 		}
 
 		return title;
 	};
-
+
+	/**
+	 * 
+	 */
+	EditorUi.prototype.getCustomLinkTitle = function(href)
+	{
+		var result = mxResources.get('action');
+
+		if (href.substring(0, 17) == 'data:action/json,')
+		{
+			try
+			{
+				var link = JSON.parse(href.substring(17));
+
+				if (link != null && link.title != null)
+				{
+					result = link.title;
+				}
+			}
+			catch (e)
+			{
+				// ignore
+			}
+		}
+
+		return result;
+	};
+
 	/**
 	 * 
 	 */

src/main/webapp/js/diagramly/GraphViewer.js

@@ -474,7 +474,7 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
 				}
 				else if (this.graphConfig.title != null && this.showTitleAsTooltip)
 				{
-					container.setAttribute('title', this.graphConfig.title);
+					container.setAttribute('title', this.graphConfig.titleTooltip || this.graphConfig.title);
 				}
 
 				if (!this.responsive)
@@ -1602,7 +1602,7 @@ GraphViewer.prototype.addToolbar = function()
 		var filename = container.ownerDocument.createElement('div');
 		filename.style.cssText = 'display:inline-block;position:relative;padding:3px 6px 0 6px;' +
 			'vertical-align:top;font-family:Helvetica,Arial;font-size:12px;top:4px;cursor:default;color:#000;';
-		filename.setAttribute('title', this.graphConfig.title);
+		filename.setAttribute('title', this.graphConfig.titleTooltip || this.graphConfig.title);
 		mxUtils.write(filename, this.graphConfig.title);
 		mxUtils.setOpacity(filename, 70);
 
@@ -2178,20 +2178,20 @@ Dialog.prototype.getDocumentSize = function()
 /**
  * 
  */
-GraphViewer.prototype.updateTitle = function(title)
+GraphViewer.prototype.updateTitle = function(title, titleTooltip)
 {
 	title = title || '';
 
 	if (this.showTitleAsTooltip && this.graph != null && this.graph.container != null)
 	{
-		this.graph.container.setAttribute('title', title);
+		this.graph.container.setAttribute('title', titleTooltip || title);
     }
 
 	if (this.filename != null)
 	{
 		this.filename.innerText = '';
 		mxUtils.write(this.filename, title);
-		this.filename.setAttribute('title', title);
+		this.filename.setAttribute('title', titleTooltip || title);
 	}
 };