24.2.0 release

ChangeLog

@@ -1,10 +1,18 @@
+26-MAR-2024: 24.2.0
+
+- Naming fix for [draw-3336]
+- Updates DOMPurify from 3.0.9 to 3.0.11
+- Fixes export with invalid background page
+- Fixes C4 strings [drawio-2612,3581]
+- First iteration support for OS high constrast [drawio-4296]
+
 23-MAR-2024: 24.1.0
 
 - Improves save performance for files with images [DID-11006]
 
 23-MAR-2024: 24.0.9
 
-Improves remote changes handling in DrawioFileSync.fastForward
+- Improves remote changes handling in DrawioFileSync.fastForward
 
 22-MAR-2024: 24.0.8
 

VERSION

@@ -1 +1 @@
-24.1.0
+24.2.0

etc/dependencies/package.json

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

src/main/mxgraph/io/mxCodec.js

@@ -471,22 +471,14 @@ mxCodec.prototype.getConstructor = function(name)
 {
 	var ctor = null;
 
-	try
+	if (mxCodec.allowlist == null || mxUtils.indexOf(
+			mxCodec.allowlist, name) >= 0)
 	{
-		if (mxCodec.allowlist == null || mxUtils.indexOf(
-				mxCodec.allowlist, name) >= 0)
-		{
-			ctor = window[name];
-		}
-		else if (window.console != null)
-		{
-			console.error('mxCodec.getConstructor: ' + name +
-				' not allowed in mxCodec.allowlist');
-		}
+		ctor = window[name];
 	}
-	catch (err)
+	else
 	{
-		// ignore
+		throw new Error('Unknown object type \"' + name + '\"');
 	}
 
 	return ctor;

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

@@ -1080,6 +1080,8 @@ App.main = function(callback, createUi)
 				}
 				else
 				{
+					// Note: Lazy loading stencils.min.js in viewer.diagrams.net
+					// has no impact as stencils.min.js is pre-cached in PWA
 					mxStencilRegistry.allowEval = false;
 					App.loadScripts(['js/shapes-14-6-5.min.js', 'js/stencils.min.js',
 						'js/extensions.min.js'], realMain, function(e)
@@ -5471,8 +5473,24 @@ App.prototype.loadFile = function(id, sameWindow, file, success, force)
 								{
 									return peerChar + id;
 								};
-
-								window.location.hash = '#' + currentFile.getHash();
+
+								var hash = '#' + currentFile.getHash();
+
+								try
+								{
+									var obj = this.getHashObject();
+
+									if (obj != null && !mxUtils.isEmptyObject(obj))
+									{
+										hash = hash + '#' + encodeURIComponent(JSON.stringify(obj));
+									}
+								}
+								catch (e)
+								{
+									// ignore
+								}
+
+								window.location.replace(hash);
 							}
 							else if (file == currentFile && file.getMode() == null)
 							{

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

@@ -5823,14 +5823,17 @@
 
 					picker.innerText = '';
 
-					for (var i = 0; i < colorsets.length; i++)
+					if (colorsets != null)
 					{
-						if (i > 0 && mxUtils.mod(i, 4) == 0)
+						for (var i = 0; i < colorsets.length; i++)
 						{
-							mxUtils.br(picker);
+							if (i > 0 && mxUtils.mod(i, 4) == 0)
+							{
+								mxUtils.br(picker);
+							}
+
+							addButton(colorsets[i]);
 						}
-
-						addButton(colorsets[i]);
 					}
 				});
 

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

@@ -10429,18 +10429,18 @@
 		else
 		{
 			this.showDialog(new ConfirmDialog(this, mxResources.get('resizeLargeImages'),
-			function(remember)
-			{
-				wrapper(remember, true);
-			},
-			function(remember)
-			{
-				wrapper(remember, false);
-			}, mxResources.get('resize'), mxResources.get('actualSize'),
-			'<img style="margin-top:8px;" src="' + Editor.loResImage + '"/>',
-			'<img style="margin-top:8px;" src="' + Editor.hiResImage + '"/>',
-			isLocalStorage || mxClient.IS_CHROMEAPP).container, 340,
-			(isLocalStorage || mxClient.IS_CHROMEAPP) ? 220 : 200, true, true);
+				function(remember)
+				{
+					wrapper(remember, true);
+				},
+				function(remember)
+				{
+					wrapper(remember, false);
+				}, mxResources.get('resize'), mxResources.get('actualSize'),
+				'<img style="margin-top:8px;" src="' + Editor.loResImage + '"/>',
+				'<img style="margin-top:8px;" src="' + Editor.hiResImage + '"/>',
+				isLocalStorage || mxClient.IS_CHROMEAPP).container, 340,
+				(isLocalStorage || mxClient.IS_CHROMEAPP) ? 226 : 200, true, true);
 		}
 	};
 
@@ -19402,13 +19402,21 @@ var CommentsWindow = function(editorUi, x, y, w, h, saveCallback)
 	function showError(commentDiv)
 	{
 		commentDiv.style.border = '1px solid red';
-		commentDiv.removeChild(commentDiv.busyImg);
+
+		if (commentDiv.busyImg.parentNode == commentDiv)
+		{
+			commentDiv.removeChild(commentDiv.busyImg);
+		}
 	};
 
 	function showDone(commentDiv)
 	{
 		commentDiv.style.border = '';
-		commentDiv.removeChild(commentDiv.busyImg);
+
+		if (commentDiv.busyImg.parentNode == commentDiv)
+		{
+			commentDiv.removeChild(commentDiv.busyImg);
+		}
 	};
 
 	function addComment(comment, parentArr, parent, level, showResolved)
@@ -19436,7 +19444,9 @@ var CommentsWindow = function(editorUi, x, y, w, h, saveCallback)
 
 		var userImg = document.createElement('img');
 		userImg.className = 'geCommentUserImg';
-		userImg.src = comment.user.pictureUrl || Editor.userImage;
+		userImg.src = (comment.user != null &&
+			comment.user.pictureUrl != null) ?
+			comment.user.pictureUrl : Editor.userImage;
 		headerDiv.appendChild(userImg);
 
 		var headerTxt = document.createElement('div');
@@ -19445,7 +19455,8 @@ var CommentsWindow = function(editorUi, x, y, w, h, saveCallback)
 
 		var usernameDiv = document.createElement('div');
 		usernameDiv.className = 'geCommentUsername';
-		mxUtils.write(usernameDiv, comment.user.displayName || '');
+		mxUtils.write(usernameDiv, (comment.user != null) ?
+			comment.user.displayName : '');
 		headerTxt.appendChild(usernameDiv);
 
 		var dateDiv = document.createElement('div');
@@ -19576,7 +19587,9 @@ var CommentsWindow = function(editorUi, x, y, w, h, saveCallback)
 
 		var user = editorUi.getCurrentUser();
 
-		if (user != null && user.id == comment.user.id && !readOnly && !comment.isLocked)
+		if (user != null && comment.user != null &&
+			user.id == comment.user.id &&
+			!readOnly && !comment.isLocked)
 		{
 			addAction(mxResources.get('edit'), function()
 			{

src/main/webapp/js/diagramly/sidebar/Sidebar-C4.js

@@ -88,8 +88,8 @@
 		    	bg.vertex = true;
 		    	bg.setValue(mxUtils.createXmlDocument().createElement('object'));
 		    	bg.setAttribute('placeholders', '1');
-		        bg.setAttribute('c4Type', 'Container name');
-		        bg.setAttribute('c4Container', 'Container');
+		        bg.setAttribute('c4Name', 'Container name');
+		        bg.setAttribute('c4Type', 'Container');
 		        bg.setAttribute('c4Technology', 'e.g. Oracle Database 12');
 		        bg.setAttribute('c4Description', 'Description of storage type container role/responsibility.');
 		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</b></font><div>[%c4Container%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
@@ -103,8 +103,8 @@
 		    	bg.vertex = true;
 		    	bg.setValue(mxUtils.createXmlDocument().createElement('object'));
 		    	bg.setAttribute('placeholders', '1');
-		        bg.setAttribute('c4Type', 'Container name');
-		        bg.setAttribute('c4Container', 'Container');
+		        bg.setAttribute('c4Name', 'Container name');
+		        bg.setAttribute('c4Type', 'Container');
 		        bg.setAttribute('c4Technology', 'e.g. Micronaut, etc.');
 		        bg.setAttribute('c4Description', 'Description of microservice type container role/responsibility.');
 		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</b></font><div>[%c4Container%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
@@ -118,8 +118,8 @@
 		    	bg.vertex = true;
 		    	bg.setValue(mxUtils.createXmlDocument().createElement('object'));
 		    	bg.setAttribute('placeholders', '1');
-		        bg.setAttribute('c4Type', 'Container name');
-		        bg.setAttribute('c4Container', 'Container');
+		        bg.setAttribute('c4Name', 'Container name');
+		        bg.setAttribute('c4Type', 'Container');
 		        bg.setAttribute('c4Technology', 'e.g. Apache Kafka, etc.');
 		        bg.setAttribute('c4Description', 'Description of message bus type container role/responsibility.');
 		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</b></font><div>[%c4Container%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
@@ -133,8 +133,8 @@
 		    	bg.vertex = true;
 		    	bg.setValue(mxUtils.createXmlDocument().createElement('object'));
 		    	bg.setAttribute('placeholders', '1');
-		        bg.setAttribute('c4Type', 'Container name');
-		        bg.setAttribute('c4Container', 'Container');
+		        bg.setAttribute('c4Name', 'Container name');
+		        bg.setAttribute('c4Type', 'Container');
 		        bg.setAttribute('c4Technology', 'e.g. JavaScript, Angular etc.');
 		        bg.setAttribute('c4Description', 'Description of web browser container role/responsibility.');
 		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</b></font><div>[%c4Container%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');

src/main/webapp/js/diagramly/sidebar/Sidebar.js

@@ -471,6 +471,9 @@
 				concat(stdEntries);
 		}
 
+		// Get current year as yyyy
+		var year = new Date().getFullYear();
+
 		this.entries = [{title: mxResources.get('standard'), entries: stdEntries},
             			{title: mxResources.get('software'),
             			entries: [{title: 'Active Directory', id: 'active_directory', image: IMAGE_PATH + '/sidebar-active_directory.png'},
@@ -490,7 +493,7 @@
             			entries: [{title: 'Allied Telesis', id: 'allied_telesis', image: IMAGE_PATH + '/sidebar-allied_telesis.png'},
 								{title: 'AWS17', id: 'aws3', image: IMAGE_PATH + '/sidebar-aws3.png'},
 								{title: 'AWS18', id: 'aws4b', image: IMAGE_PATH + '/sidebar-aws4b.png'},
-								{title: 'AWS19', id: 'aws4', image: IMAGE_PATH + '/sidebar-aws4.png'},
+								{title: 'AWS ' + year, id: 'aws4', image: IMAGE_PATH + '/sidebar-aws4.png'},
 								// TODO: Add isometric containers  		                          
 								{title: mxResources.get('aws3d'), id: 'aws3d', image: IMAGE_PATH + '/sidebar-aws3d.png'},
 								{title: mxResources.get('azure'), id: 'azure2', image: IMAGE_PATH + '/sidebar-azure.png'},
@@ -1227,9 +1230,6 @@
 		}
 
 	};
-
-
-
 
 	/**
 	 * Overridden to manually create search index for stencil files which are not pre-loaded

src/main/webapp/js/grapheditor/Format.js

@@ -2530,6 +2530,7 @@ ArrangePanel.prototype.addGeometry = function(container)
 
 		if (geo.relative)
 		{
+			geo.offset = (geo.offset != null) ? geo.offset : new mxPoint();
 			geo.offset.x = value;
 		}
 		else
@@ -2543,6 +2544,7 @@ ArrangePanel.prototype.addGeometry = function(container)
 
 		if (geo.relative)
 		{
+			geo.offset = (geo.offset != null) ? geo.offset : new mxPoint();
 			geo.offset.y = value;
 		}
 		else

src/main/webapp/js/grapheditor/Graph.js

@@ -11759,16 +11759,17 @@ if (typeof mxVertexHandler !== 'undefined')
 					(((ignoreSelection && lookup == null) || nocrop ||
 					exportType == 'diagram') ? this.getGraphBounds() :
 					this.getBoundingBox(this.getSelectionCells()));
+				var bgImg = this.backgroundImage;
+				var tr = this.view.translate;
 				var vs = this.view.scale;
-
-				if (exportType == 'diagram' && this.backgroundImage != null)
+
+				if (exportType == 'diagram' && bgImg != null &&
+					bgImg.width != null && bgImg.height != null)
 				{
 					bounds = mxRectangle.fromRectangle(bounds);
-					bounds.add(new mxRectangle(
-						(this.view.translate.x + this.backgroundImage.x) * vs,
-						(this.view.translate.y + this.backgroundImage.y) * vs,
-					 	this.backgroundImage.width * vs,
-					 	this.backgroundImage.height * vs));
+					bounds.add(new mxRectangle((tr.x + bgImg.x) * vs,
+						(tr.y + bgImg.y) * vs, bgImg.width * vs,
+					 	bgImg.height * vs));
 				}
 
 				if (bounds == null)
@@ -11895,14 +11896,12 @@ if (typeof mxVertexHandler !== 'undefined')
 				};
 
 				// Paints background image
-				var bgImg = this.backgroundImage;
-
-				if (bgImg != null)
+				if (bgImg != null && bgImg.width != null && bgImg.height != null)
 				{
 					var s2 = vs / scale;
-					var tr = this.view.translate;
-					var tmp = new mxRectangle((bgImg.x + tr.x) * s2, (bgImg.y + tr.y) * s2,
-						bgImg.width * s2, bgImg.height * s2);
+					var tmp = new mxRectangle((bgImg.x + tr.x) * s2,
+						(bgImg.y + tr.y) * s2, bgImg.width * s2,
+						bgImg.height * s2);
 
 					// Checks if visible
 					if (mxUtils.intersects(bounds, tmp))

src/main/webapp/js/grapheditor/Sidebar.js

@@ -3270,7 +3270,8 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 
 				this.previewElement.style.display = '';
 			}
-			else if (dragSource.currentHighlight.state != null &&
+			else if (dragSource.currentHighlight != null &&
+				dragSource.currentHighlight.state != null &&
 				graph.model.isEdge(dragSource.currentHighlight.state.cell))
 			{
 				// Centers drop cells when splitting edges

src/main/webapp/resources/dia.txt

@@ -179,7 +179,8 @@ dashed=Dashed
 decideLater=Decide later
 default=Default
 delete=Delete
-deleteColumn=Delete Column
+deleteAll=Delete all
+deleteColumn=Delete column
 deleteLibrary401=Insufficient permissions to delete this library
 deleteLibrary404=Selected library could not be found
 deleteLibrary500=Error deleting library
@@ -798,6 +799,7 @@ untitledDiagram=Untitled Diagram
 untitledLayer=Untitled Layer
 untitledLibrary=Untitled Library
 unknownError=Unknown error
+unknownUser=Unknown user
 updateExistingDrawing=Update existing drawing
 updateFile=Update {1}
 updatingDocument=Updating Document. Please wait...