24.2.5 release

ChangeLog

@@ -1,3 +1,15 @@
+12-APR-2024: 24.2.5
+
+- [conf cloud] Improves embedding from URL and CSV via proxy and confluence attachments [DID-11234]
+- Fixes possible DOM error in mxGraph.panGraph
+- Sorts files and folders in OneDrive picker [drawio-2870]
+- Checks size in Graph.clipSvgDataUri [drawio-desktop-1686]
+- Fixes C4 shape container names [drawio-4312]
+
+10-APR-2024: 24.2.4
+
+- Release skipped
+
 08-APR-2024: 24.2.3
 
 - Adds Editor.fontSizeUnit, fixes possible unhandled font element

VERSION

@@ -1 +1 @@
-24.2.3
+24.2.5

src/main/mxgraph/util/mxUtils.js

@@ -809,7 +809,7 @@ var mxUtils =
 	 */
 	htmlEntities: function(s, newline, quotes, tab)
 	{
-		s = String(s || '');
+		s = String((s != null) ? s : '');
 
 		s = s.replace(/&/g,'&'); // 38 26
 		s = s.replace(/</g,'&lt;'); // 60 3C

src/main/mxgraph/view/mxGraph.js

@@ -8064,7 +8064,14 @@ mxGraph.prototype.panGraph = function(dx, dy)
 					// Inserts elements only if not empty
 					if (this.shiftPreview1.firstChild != null)
 					{
-						this.container.insertBefore(this.shiftPreview1, canvas.parentNode);
+						if (canvas.parentNode != null && canvas.parentNode.parentNode == this.container)
+						{
+							this.container.insertBefore(this.shiftPreview1, canvas.parentNode);
+						}
+						else
+						{
+							this.container.appendChild(this.shiftPreview1);
+						}
 					}
 
 					if (this.shiftPreview2.firstChild != null)

src/main/mxgraph/view/mxGraphView.js

@@ -770,25 +770,6 @@ mxGraphView.prototype.validateBackgroundImage = function()
 			this.backgroundImage.dialect = this.graph.dialect;
 			this.backgroundImage.init(this.backgroundPane);
 			this.backgroundImage.redraw();
-
-			// Workaround for ignored event on background in IE8 standards mode
-			if (document.documentMode == 8 && !mxClient.IS_EM)
-			{
-				mxEvent.addGestureListeners(this.backgroundImage.node,
-					mxUtils.bind(this, function(evt)
-					{
-						this.graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt));
-					}),
-					mxUtils.bind(this, function(evt)
-					{
-						this.graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
-					}),
-					mxUtils.bind(this, function(evt)
-					{
-						this.graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt));
-					})
-				);
-			}
 		}
 
 		this.redrawBackgroundImage(this.backgroundImage, bg);

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

@@ -640,6 +640,17 @@ App.main = function(callback, createUi)
 		{
 			return;
 		}
+
+		// Checks if electron is defined in Electron app
+		if (mxIsElectron && typeof electron === 'undefined')
+		{
+			alert('Runtime Environment not found.');
+			document.body.innerHTML = '<div style="margin-top:10%;text-align:center;">' +
+				'<img src="mxgraph/images/warning.png" align="top" style="padding-right:6px;"/>' +
+				'Runtime Environment not found.</div>';
+
+			return;
+		}
 
 		App.isMainCalled = true;
 		// Handles uncaught errors before the app is loaded

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

@@ -1674,8 +1674,9 @@ DriveClient.prototype.saveFile = function(file, revision, success, errFn, noChec
 													// Logs failed save
 													try
 													{
-														EditorUi.logError('Critical: Saving to Google Drive failed ' + file.desc.id,
-															null, 'from-' + head0 + '.' + mod0 + '-' + this.ui.hashValue(etag0) +
+														EditorUi.logError('Critical: Saving to Google Drive failed',
+															null, 'id-' + file.desc.id +
+															'-from-' + head0 + '.' + mod0 + '-' + this.ui.hashValue(etag0) +
 															'-to-' + resp.headRevisionId + '.' + resp.modifiedDate + '-' +
 															this.ui.hashValue(resp.etag) + ((temp.length > 0) ? '-errors-' + temp : ''),
 															'user-' + ((this.user != null) ? this.user.id : 'nouser') +

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

@@ -9135,6 +9135,11 @@
 			}
 		};
 
+		if (!editorUi.isOffline())
+		{
+			buttons.appendChild(editorUi.createHelpIcon('https://www.drawio.com/doc/faq/print-diagram'));
+		}
+
 		var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
 		{
 			editorUi.hideDialog();
@@ -9146,32 +9151,35 @@
 			buttons.appendChild(cancelBtn);
 		}
 
-		if (!editorUi.isOffline())
-		{
-			var helpBtn = mxUtils.button(mxResources.get('help'), function()
-			{
-				graph.openLink('https://www.drawio.com/doc/faq/print-diagram');
-			});
-
-			helpBtn.className = 'geBtn';
-			buttons.appendChild(helpBtn);
-		}
-
 		if (PrintDialog.previewEnabled)
 		{
 			var previewBtn = mxUtils.button(mxResources.get('preview'), function()
 			{
-				editorUi.hideDialog();
-				preview(false);
+				try
+				{
+					preview(false);
+					editorUi.hideDialog();
+				}
+				catch (e)
+				{
+					editorUi.handleError(e);
+				}
 			});
 			previewBtn.className = 'geBtn';
 			buttons.appendChild(previewBtn);
 		}
 
 		var printBtn = mxUtils.button(mxResources.get((!PrintDialog.previewEnabled) ? 'ok' : 'print'), function()
 		{
-			editorUi.hideDialog();
-			preview(true);
+			try
+			{
+				preview(true);
+				editorUi.hideDialog();
+			}
+			catch (e)
+			{
+				editorUi.handleError(e);
+			}
 		});
 		printBtn.className = 'geBtn gePrimaryBtn';
 		buttons.appendChild(printBtn);

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

@@ -8448,7 +8448,7 @@
 			if (!this.doImportVisio && !this.loadingExtensions && !this.isOffline(true))
 			{
 				this.loadingExtensions = true;
-				mxscript('js/extensions.min.js', delayed, null, null, null, handleError);
+				mxscript(window.DRAWIO_SERVER_URL + 'js/extensions.min.js', delayed, null, null, null, handleError);
 			}
 			else
 			{
@@ -8513,7 +8513,7 @@
 			if (!this.doImportGraphML && !this.loadingExtensions && !this.isOffline(true))
 			{
 				this.loadingExtensions = true;
-				mxscript('js/extensions.min.js', delayed, null, null, null, handleError);
+				mxscript(window.DRAWIO_SERVER_URL + 'js/extensions.min.js', delayed, null, null, null, handleError);
 			}
 			else
 			{
@@ -8578,7 +8578,7 @@
 				if (typeof VsdxExport === 'undefined' && !this.loadingExtensions && !this.isOffline(true))
 				{
 					this.loadingExtensions = true;
-					mxscript('js/extensions.min.js', delayed, null, null, null, handleError);
+					mxscript(window.DRAWIO_SERVER_URL + 'js/extensions.min.js', delayed, null, null, null, handleError);
 				}
 				else
 				{
@@ -8709,7 +8709,7 @@
 				}
 				else
 				{
-					mxscript('js/extensions.min.js', delayed,
+					mxscript(window.DRAWIO_SERVER_URL + 'js/extensions.min.js', delayed,
 						null, null, null, handleError);
 				}
 			}
@@ -9061,7 +9061,7 @@
 			}
 			else
 			{
-				mxscript('js/extensions.min.js', delayed,
+				mxscript(window.DRAWIO_SERVER_URL + 'js/extensions.min.js', delayed,
 					null, null, null, onerror);
 			}
 		}
@@ -9756,7 +9756,7 @@
 		if (typeof JSZip === 'undefined' && !this.loadingExtensions && !this.isOffline(true))
 		{
 			this.loadingExtensions = true;
-			mxscript('js/extensions.min.js', delayed,
+			mxscript(window.DRAWIO_SERVER_URL + 'js/extensions.min.js', delayed,
 				null, null, null, onerror);
 		}
 		else
@@ -16959,7 +16959,7 @@
 					}
 					else
 					{
-						mxscript('js/orgchart.min.js', onload, null, null, null, onerror);
+						mxscript(window.DRAWIO_SERVER_URL + 'js/orgchart.min.js', onload, null, null, null, onerror);
 					}
 				}
 			}

src/main/webapp/js/diagramly/Menus.js

@@ -4647,7 +4647,14 @@
 			{
 				menu.addItem(mxResources.get('insertPage'), null, mxUtils.bind(this, function()
 				{
-					editorUi.insertPage();
+					try
+					{
+						editorUi.insertPage();
+					}
+					catch (e)
+					{
+						editorUi.handleError(e);
+					}
 				}), parent);
 
 				menu.addSeparator(parent);

src/main/webapp/js/diagramly/Pages.js

@@ -1731,7 +1731,15 @@ EditorUi.prototype.createPageInsertTab = function()
 	return this.createControlTab(mxResources.get('insertPage'),
 		Editor.plusImage, mxUtils.bind(this, function(evt)
 		{
-			this.insertPage();
+			try
+			{
+				this.insertPage();
+			}
+			catch (e)
+			{
+				this.handleError(e);
+			}
+
 			mxEvent.consume(evt);
 		}));
 };

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

@@ -92,7 +92,7 @@
 		        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>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
+		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
 
 			   	return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Data Container');
 			}),				
@@ -107,7 +107,7 @@
 		        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>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
+		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
 
 			   	return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Microservice Container');
 			}),				
@@ -122,7 +122,7 @@
 		        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>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
+		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
 
 			   	return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Message Bus Container');
 			}),				
@@ -137,7 +137,7 @@
 		        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>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
+		    	bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%:&nbsp;%c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>');
 
 			   	return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Web Browser Container');
 			}),				

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

@@ -2508,6 +2508,7 @@ Graph.clipSvgDataUri = function(dataUri, ignorePreserveAspect)
 							}
 
 							var vb = svgs[0].getAttribute('viewBox');
+							var viewBox = null;
 
 							if (vb != null && !isNaN(w) && !isNaN(h))
 							{
@@ -2517,17 +2518,25 @@ Graph.clipSvgDataUri = function(dataUri, ignorePreserveAspect)
 								{
 									fx = parseFloat(tokens[2]) / w;
 									fy = parseFloat(tokens[3]) / h;
+
+									viewBox = new mxRectangle(parseFloat(tokens[0]), parseFloat(tokens[1]),
+										parseFloat(tokens[2]), parseFloat(tokens[3]));
 								}
 							}
 
 							var size = svgs[0].getBBox();
-
+							
 							if (size.width > 0 && size.height > 0)
 							{
-								div.getElementsByTagName('svg')[0].setAttribute('viewBox', size.x +
-									' ' + size.y + ' ' + size.width + ' ' + size.height);
-								div.getElementsByTagName('svg')[0].setAttribute('width', size.width / fx);
-								div.getElementsByTagName('svg')[0].setAttribute('height', size.height / fy);
+								// SVG is only updated if area is less than 70%
+								if (viewBox == null || (size.width * size.height) <
+									(viewBox.width * viewBox.height * 0.7))
+								{
+									div.getElementsByTagName('svg')[0].setAttribute('viewBox', size.x +
+										' ' + size.y + ' ' + size.width + ' ' + size.height);
+									div.getElementsByTagName('svg')[0].setAttribute('width', size.width / fx);
+									div.getElementsByTagName('svg')[0].setAttribute('height', size.height / fy);
+								}
 							}
 						}
 						catch (e)
@@ -12074,7 +12083,7 @@ if (typeof mxVertexHandler !== 'undefined')
 		/**
 		 * Hook for creating the canvas used in getSvg.
 		 */
-		Graph.prototype.disableSvgLinks = function(node)
+		Graph.prototype.disableSvgLinks = function(node, visit)
 		{
 			var links = node.getElementsByTagName('a');
 
@@ -12092,6 +12101,11 @@ if (typeof mxVertexHandler !== 'undefined')
 					links[i].style.pointerEvents = 'none';
 					links[i].setAttribute('href', '');
 				}
+
+				if (visit)
+				{
+					visit(links[i]);
+				}
 			}
 		};