22.1.4 release

ChangeLog

@@ -1,3 +1,17 @@
+24-NOV-2023: 22.1.4
+
+- [conf cloud] Fixes diagram list editing older versions and not refreshing [DID-10113]
+- Adds selectParentLayer config switch [drawio-3928]
+- Fixes handling of space separated layer-ids in URL
+- Fixes improve contrast only enabled in dark mode
+- [conf cloud] Improving page IDs import report readability [DID-10039]
+- Selects current page based on browser address bar
+- Fixes PDF export for background images and pages
+- [conf cloud] Allows simple viewer with 3rd party cookies disabled [DID-10047]
+- Fixes relative path for MathJax in embedded HTML
+- Updates DOMPurify from 3.0.5 to 3.0.6
+- Fixes bold font for Google Fonts [drawio-3907]
+
 17-NOV-2023: 22.1.3
 
 - Updates archimate icons [drawio-3863]

VERSION

@@ -1 +1 @@
-22.1.3
+22.1.4

etc/build/build.xml

@@ -36,6 +36,7 @@
 			window.STYLE_PATH = window.STYLE_PATH || 'https://viewer.diagrams.net/styles';
 			window.SHAPES_PATH = window.SHAPES_PATH || 'https://viewer.diagrams.net/shapes';
 			window.STENCIL_PATH = window.STENCIL_PATH || 'https://viewer.diagrams.net/stencils';
+			window.DRAW_MATH_URL = window.DRAW_MATH_URL || 'https://viewer.diagrams.net/math/es5';
 			window.GRAPH_IMAGE_PATH  = window.GRAPH_IMAGE_PATH || 'https://viewer.diagrams.net/img';
 			window.mxImageBasePath = window.mxImageBasePath || 'https://viewer.diagrams.net/mxgraph/images';
 			window.mxBasePath = window.mxBasePath || 'https://viewer.diagrams.net/mxgraph/';

etc/dependencies/package.json

@@ -15,7 +15,7 @@
 	  "mermaid": "10.0.2",
 	  "pako": "2.1.0",
 	  "crypto-js": "3.1.2",
-	  "dompurify": "3.0.5",
+	  "dompurify": "3.0.6",
 	  "spin.js": "2.0.0",
 	  "roughjs": "4.4.1",
 	  "mathjax": "3.2.2",

src/main/webapp/js/diagramly/App.js

@@ -3141,6 +3141,21 @@ App.prototype.start = function()
 							this.loadFile(id, true);
 						}
 					}
+					else
+					{
+						var obj = this.getHashObject();
+
+						if (obj != null && obj.pageId != null && this.currentPage != null &&
+							obj.pageId != this.currentPage.getId())
+						{
+							var page = this.getPageById(obj.pageId);
+
+							if (page != null)
+							{
+								this.selectPage(page);
+							}
+						}
+					}
 				}
 				catch (e)
 				{
@@ -7483,6 +7498,17 @@ App.prototype.updateUserElementIcon = function()
 	}
 };
 
+/**
+ * Adds the listener for automatically saving the diagram for local changes.
+ */
+App.prototype.hideUserPanel = function()
+{
+	if (this.userPanel != null && this.userPanel.parentNode != null)
+	{
+		this.userPanel.parentNode.removeChild(this.userPanel);
+	}
+};
+
 /**
  * Adds the listener for automatically saving the diagram for local changes.
  */
@@ -7502,9 +7528,9 @@ App.prototype.toggleUserPanel = function()
 
 		mxEvent.addListener(document.body, 'click', mxUtils.bind(this, function(evt)
 		{
-			if (!mxEvent.isConsumed(evt) && this.userPanel != null && this.userPanel.parentNode != null)
+			if (!mxEvent.isConsumed(evt))
 			{
-				this.userPanel.parentNode.removeChild(this.userPanel);
+				this.hideUserPanel();
 			}
 		}));
 	}
@@ -7528,10 +7554,7 @@ App.prototype.toggleUserPanel = function()
 
 		mxEvent.addListener(img, 'click', mxUtils.bind(this, function()
 		{
-			if (this.userPanel.parentNode != null)
-			{
-				this.userPanel.parentNode.removeChild(this.userPanel);
-			}
+			this.hideUserPanel();
 		}));
 
 		this.userPanel.appendChild(img);
@@ -7551,8 +7574,6 @@ App.prototype.toggleUserPanel = function()
 					if (file != null && file.constructor == DriveFile)
 					{
 						this.spinner.spin(document.body, spinnerMsg);
-
-//									file.close();
 						this.fileLoaded(null);
 
 						// LATER: Use callback to wait for thumbnail update
@@ -7571,8 +7592,6 @@ App.prototype.toggleUserPanel = function()
 				var createUserRow = mxUtils.bind(this, function (user)
 				{
 					var tr = document.createElement('tr');
-					tr.setAttribute('title', 'User ID: ' + user.id);
-
 					var td = document.createElement('td');
 					td.setAttribute('valig', 'middle');
 					td.style.height = '59px';
@@ -7618,13 +7637,31 @@ App.prototype.toggleUserPanel = function()
 					td.appendChild(div);
 					tr.appendChild(td);
 
-					if (!user.isCurrent)
+					if (user.isCurrent)
+					{
+						tr.setAttribute('title', 'User ID: ' + user.id);
+					}
+					else
 					{
+						tr.setAttribute('title', mxResources.get('login') +
+							' (' + 'User ID: ' + user.id + ')');
 						tr.style.cursor = 'pointer';
 						tr.style.opacity = '0.3';
 
+						mxEvent.addListener(tr, 'mouseenter', mxUtils.bind(this, function()
+						{
+							tr.style.opacity = '1';
+						}));
+
+						mxEvent.addListener(tr, 'mouseleave', mxUtils.bind(this, function()
+						{
+							tr.style.opacity = '0.3';
+						}));
+
 						mxEvent.addListener(tr, 'click', mxUtils.bind(this, function(evt)
 						{
+							this.hideUserPanel();
+
 							closeFile(mxUtils.bind(this, function()
 							{
 								this.stateArg = null;
@@ -7639,7 +7676,7 @@ App.prototype.toggleUserPanel = function()
 								{
 									this.handleError(resp);
 								}), true); //Remember is true since add account imply keeping that account
-							}), mxResources.get('closingFile') + '...');
+							}), mxResources.get('changeUser') + '...');
 
 							mxEvent.consume(evt);
 						}));

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

@@ -511,7 +511,7 @@ var SplashDialog = function(editorUi)
 
 		if (editorUi.mode == App.MODE_GOOGLE && editorUi.drive != null)
 		{
-			var driveUsers =editorUi.drive.getUsersList();
+			var driveUsers = editorUi.drive.getUsersList();
 
 			if (driveUsers.length > 0)
 			{
@@ -4993,7 +4993,7 @@ var SaveDialog = function(editorUi, title, saveFn, disabledModes, data, mimeType
 	right.appendChild(storageSelect);
 
 	// Selects last entry
-	if (SaveDialog.lastValue != null)
+	if (SaveDialog.lastValue != null && entries[SaveDialog.lastValue] != null)
 	{
 		storageSelect.value = SaveDialog.lastValue;
 	}
@@ -10956,7 +10956,7 @@ var LibraryDialog = function(editorUi, name, library, initialImages, file, mode,
 					    editorUi.showError(mxResources.get('error'), mxResources.get('diagramIsNotPublic'),
 							mxResources.get('share'), mxUtils.bind(this, function()
 							{
-								editorUi.drive.showPermissions(file.getId());
+								editorUi.drive.showPermissions(file.getId(), file);
 							}), null, mxResources.get('ok'), mxUtils.bind(this, function()
 							{
 								// Hides dialog

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

@@ -2575,15 +2575,16 @@ DriveClient.prototype.pickLibrary = function(fn)
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
-DriveClient.prototype.showPermissions = function(id)
+DriveClient.prototype.showPermissions = function(id, file)
 {
 	var fallback = mxUtils.bind(this, function()
 	{
 		var dlg = new ConfirmDialog(this.ui, mxResources.get('googleSharingNotAvailable'), mxUtils.bind(this, function()
 		{
-			this.ui.editor.graph.openLink('https://drive.google.com/open?id=' + id);
+			var url = (file != null) ? file.getFolderUrl() : 'https://drive.google.com/open?id=' + id;
+			this.ui.editor.graph.openLink(url);
 		}), null, mxResources.get('open'), null, null, null, null, IMAGE_PATH + '/google-share.png');
-		this.ui.showDialog(dlg.container, 360, 190, true, true);
+		this.ui.showDialog(dlg.container, 400, 150, true, true);
 		dlg.init();
 	});
 

src/main/webapp/js/diagramly/DriveFile.js

@@ -509,7 +509,7 @@ DriveFile.prototype.move = function(folderId, success, error)
  */
 DriveFile.prototype.share = function()
 {
-	this.ui.drive.showPermissions(this.getId());
+	this.ui.drive.showPermissions(this.getId(), this);
 };
 
 /**

src/main/webapp/js/diagramly/Editor.js

@@ -361,6 +361,10 @@
         {
     		return mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) == 'orthogonalEdgeStyle';
         }},
+        {name: 'segment', dispName: 'Segment Size', type: 'int', min: 0, defVal: mxConstants.ENTITY_SEGMENT, isVisible: function(state)
+        {
+    		return mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) == 'entityRelationEdgeStyle';
+        }},
         {name: 'fillOpacity', dispName: 'Fill Opacity', type: 'int', min: 0, max: 100, defVal: 100},
         {name: 'strokeOpacity', dispName: 'Stroke Opacity', type: 'int', min: 0, max: 100, defVal: 100},
         {name: 'startFill', dispName: 'Start Fill', type: 'bool', defVal: true},
@@ -1822,6 +1826,11 @@
 				Graph.prototype.defaultEdgeLength = config.defaultEdgeLength
 			}
 
+			if (config.selectParentLayer != null)
+			{
+				Graph.selectParentLayer = config.selectParentLayer
+			}
+
 			if (config.autosaveDelay != null)
 			{
 				DrawioFile.prototype.autosaveDelay = config.autosaveDelay
@@ -2193,6 +2202,11 @@
      * Prefix for URLs that reference Google fonts.
      */
 	Editor.GOOGLE_FONTS = 'https://fonts.googleapis.com/css?family=';
+
+    /**
+     * Prefix for URLs that reference Google fonts with CSS2.
+     */
+	Editor.GOOGLE_FONTS_CSS2 = 'https://fonts.googleapis.com/css2?family=';
 
 	/**
 	 * Alphabet for global unique IDs.
@@ -3414,7 +3428,7 @@
 						{
 							waiting++;
 
-							this.loadUrl(fontUrl, mxUtils.bind(this, function(css)
+							this.loadUrl(Graph.rewriteGoogleFontUrl(fontUrl), mxUtils.bind(this, function(css)
 		                    {
 								this.cachedGoogleFonts[fontUrl] = css;
 								content.push(css + '\n');
@@ -5626,7 +5640,8 @@
 	 */
 	Graph.isGoogleFontUrl = function(url)
 	{
-		return url.substring(0, Editor.GOOGLE_FONTS.length) == Editor.GOOGLE_FONTS;
+		return url.substring(0, Editor.GOOGLE_FONTS.length) == Editor.GOOGLE_FONTS ||
+			url.substring(0, Editor.GOOGLE_FONTS_CSS2.length) == Editor.GOOGLE_FONTS_CSS2;
 	};
 
 	/**
@@ -5637,6 +5652,21 @@
 		return Graph.isGoogleFontUrl(url);
 	};
 
+	/**
+	 * Uses CSS2 for Google fonts to support bold font style eg.
+	 * https://fonts.googleapis.com/css?family=IBM+Plex+Sans is rewritten as
+	 * https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500
+	 */
+	Graph.rewriteGoogleFontUrl = function(url)
+	{
+		if (url != null && url.substring(0, Editor.GOOGLE_FONTS.length) == Editor.GOOGLE_FONTS)
+		{
+			url = Editor.GOOGLE_FONTS_CSS2 + url.substring(Editor.GOOGLE_FONTS.length) + ':wght@400;500';
+		}
+
+		return url;
+	};
+
 	/**
 	 * Creates the DOM node for the custom font.
 	 */
@@ -5651,7 +5681,7 @@
 			elt.setAttribute('rel', 'stylesheet');
 			elt.setAttribute('type', 'text/css');
 			elt.setAttribute('charset', 'UTF-8');
-			elt.setAttribute('href', url);
+			elt.setAttribute('href', Graph.rewriteGoogleFontUrl(url));
 		}
 		else
 		{
@@ -6656,7 +6686,7 @@
 
 				if (Graph.isCssFontUrl(fontUrl))
 				{
-					prefix += '@import url(' + fontUrl + ');\n';
+					prefix += '@import url(' + Graph.rewriteGoogleFontUrl(fontUrl) + ');\n';
 				}
 				else
 				{
@@ -8516,7 +8546,7 @@
 							if (Graph.isCssFontUrl(fontUrl))
 							{
 						   		doc.writeln('<link rel="stylesheet" href="' +
-						   			mxUtils.htmlEntities(fontUrl) +
+						   			mxUtils.htmlEntities(Graph.rewriteGoogleFontUrl(fontUrl)) +
 						   			'" charset="UTF-8" type="text/css">');
 							}
 							else