24.4.13 release

ChangeLog

@@ -1,3 +1,17 @@
+31-MAY-2024: 24.2.13
+
+- Moves polyfill scope
+
+31-MAY-2024: 24.4.12
+
+- Adds empty polyfill for structuredClone to avoid mermaid.js syntax error
+
+31-MAY-2024: 24.4.11
+
+- Updates Mermaid to v10.9.1
+- Fixes cropped PDF output [drawio-desktop-1747]
+- Fixes inconsistent handling of empty diagram nodes
+
 29-MAY-2024: 24.4.10
 
 - Improves edge label positions in Explorer Plugin [drawio-4424]
@@ -6,7 +20,7 @@
 
 27-MAY-2024: 24.4.9
 
-- Uses 4 digits after the decimal poin for inches [drawio-desktop-1739]
+- Uses 4 digits after the decimal point for inches [drawio-desktop-1739]
 - Fixes inconcistent handling of Ctrl and Cmd key for edges
 
 24-MAY-2024: 24.4.8

VERSION

@@ -1 +1 @@
-24.4.10
+24.4.13

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

@@ -2146,13 +2146,28 @@ var ParseDialog = function(editorUi, title, defaultType)
 					k++;
 				}
 
+				if (lines[k].trim() == '---')
+				{
+					do
+					{
+						k++;
+					}
+					while (k < lines.length && lines[k].trim() != '---');
+
+					k++;
+				}
+
 				var diagramType = lines[k].trim().toLowerCase();
 				var sp = diagramType.indexOf(' ');
 				diagramType = diagramType.substring(0, sp > 0 ? sp : diagramType.length);
+				// TODO Better to add only what we support?
 				var inDrawioFormat = typeof mxMermaidToDrawio !== 'undefined' && 
 					type == 'mermaid2drawio' && diagramType != 'gantt' &&
 					diagramType != 'pie' && diagramType != 'timeline' &&
-					diagramType != 'quadrantchart' && diagramType != 'c4context';
+					diagramType != 'quadrantchart' && diagramType != 'c4context' &&
+					diagramType != 'block-beta' && diagramType != 'zenuml' &&
+					diagramType != 'xychart-beta' && diagramType != 'sankey-beta';
+
 
 				var graph = editorUi.editor.graph;
 
@@ -3910,7 +3925,8 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 
 	if (editorUi.isExternalDataComms() &&
 		editorUi.getServiceName() == 'draw.io' &&
-		typeof mxMermaidToDrawio !== 'undefined')
+		typeof mxMermaidToDrawio !== 'undefined' &&
+		window.isMermaidEnabled)
 	{
 		categories['smartTemplate'] = {content: createSmartTemplateContent()};
 	}
@@ -8935,7 +8951,7 @@ var ChatWindow = function(editorUi, x, y, w, h)
 	typeSelect.appendChild(selectionOption);
 	selects.appendChild(typeSelect);
 
-	if (typeof mxMermaidToDrawio !== 'undefined')
+	if (typeof mxMermaidToDrawio !== 'undefined' && window.isMermaidEnabled)
 	{
 		var createOption = document.createElement('option');
 		createOption.setAttribute('value', 'create');
@@ -10047,7 +10063,8 @@ var MoreShapesDialog = function(editorUi, expanded, entries)
 			}
 
 			// Redirects scratchpad and search entries
-			if ((Editor.currentTheme == 'sketch' ||
+			if ((Editor.currentTheme == 'simple' ||
+				Editor.currentTheme == 'sketch' ||
 				Editor.currentTheme == 'min') &&
 				Editor.isSettingsEnabled())
 			{

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

@@ -1650,6 +1650,7 @@
 	 */
 	Editor.parseDiagramNode = function(diagramNode, checked, allowRecurse)
 	{
+		Editor.validateDiagramNode(diagramNode);
 		var text = mxUtils.trim(mxUtils.getTextContent(diagramNode));
 		var node = null;
 
@@ -1690,6 +1691,7 @@
 	 */
 	Editor.getDiagramNodeXml = function(diagramNode)
 	{
+		Editor.validateDiagramNode(diagramNode);
 		var text = mxUtils.getNodeValue(diagramNode);
 		var xml = null;
 
@@ -1710,6 +1712,22 @@
 		return xml;
 	};
 
+	/**
+	 * Initializes diagram nodes with no content.
+	 */
+	Editor.validateDiagramNode = function(diagramNode)
+	{
+		if (mxUtils.trim(mxUtils.getTextContent(diagramNode)).length == 0 &&
+			mxUtils.getChildNodes(diagramNode).length == 0)
+		{
+			var codec = new mxCodec();
+			var model = new mxGraphModel();
+			diagramNode.appendChild(codec.encode(model));
+		}
+
+		return diagramNode;
+	};
+
 	/**
 	 * Static method for parsing PDF files.
 	 */

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

@@ -10814,7 +10814,7 @@
 				{
 					data = this.graph.getAttributeForCell(cell, 'mermaidData');
 
-					if (data != null)
+					if (data != null && window.isMermaidEnabled)
 					{
 						this.editMermaidData(cell, trigger, data);
 					}
@@ -14750,10 +14750,31 @@
 			{
 				// KNOWN: Paste from IE11 to other browsers on Windows
 				// seems to paste the contents of index.html
-				var xml = (asHtml) ? elt.innerHTML :
-					mxUtils.trim((elt.innerText == null) ?
-					mxUtils.getTextContent(elt) : elt.innerText);
 				var compat = false;
+				var xml = '';
+
+				if (asHtml)
+				{
+					// Extracts compatible XML data
+					if (elt.textContent != null &&
+						(elt.textContent.substring(0, 7) == '<mxfile' &&
+						elt.textContent.substring(elt.textContent.length - 9) == '</mxfile>') ||
+						(elt.textContent.substring(0, 13) == '<mxGraphModel' &&
+						elt.textContent.substring(elt.textContent.length - 15) == '</mxGraphModel>'))
+					{
+						// Replaces &nbsp; in text content with normal spaces
+						xml = elt.textContent.replace(/\u00a0/g, ' ');
+					}
+					else
+					{
+						xml = elt.innerHTML;
+					}
+				}
+				else
+				{
+					xml = mxUtils.trim((elt.innerText == null) ?
+						mxUtils.getTextContent(elt) : elt.innerText);
+				}
 
 				// Workaround for junk after XML in VM
 				try
@@ -14982,8 +15003,8 @@
 					gb = graph.getBoundingBox(graph.getSelectionCells());
 				}
 
-				pf.width = gb.width * scale / thisGraph.view.scale;
-				pf.height = gb.height * scale / thisGraph.view.scale;
+				pf.width = (gb.width + 1) * scale / thisGraph.view.scale;
+				pf.height = (gb.height + 1) * scale / thisGraph.view.scale;
 			}
 
 			pf.width = Math.ceil(pf.width * printScale);

src/main/webapp/js/diagramly/Init.js

@@ -15,6 +15,9 @@ window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
 // Checks for SVG support
 window.isSvgBrowser = true;
 
+// Checks for Mermaid support
+window.isMermaidEnabled = typeof structuredClone === 'function';
+
 // CUSTOM_PARAMETERS - URLs for save and export
 // Base URL defines cases where an absolute URL is needed (eg. embedding)
 window.DRAWIO_BASE_URL = window.DRAWIO_BASE_URL || ((/.*\.draw\.io$/.test(window.location.hostname)) || (/.*\.diagrams\.net$/.test(window.location.hostname)) ?
@@ -487,3 +490,15 @@ if ((window.location.hash == null || window.location.hash.length <= 1) &&
 {
 	window.location.hash = urlParams['open'];
 }
+
+// TODO: One day we could remove this. It's just to stop mermaid throwing syntax error on startup for pre v98 browsers
+// Maybe remove in 2027
+if (typeof window.structuredClone !== 'function')
+{
+	window.structuredClone = function(value)
+	{
+		{
+			return value;
+		}
+	}
+}

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

@@ -3269,26 +3269,22 @@
 		{
 			var theme = (urlParams['sketch'] == '1') ? 'sketch' : mxSettings.getUi();
 
-			var item = menu.addItem(mxResources.get('automatic'), null, function()
+			var autoItem = menu.addItem(mxResources.get('automatic'), null, function()
 			{
 				editorUi.setCurrentTheme('');
 			}, parent);
 
-			if (theme != 'kennedy' && theme != 'atlas' &&
-				theme != 'dark' && theme != 'simple' &&
-				theme != 'sketch' && theme != 'min')
-			{
-				menu.addCheckmark(item, Editor.checkmarkImage);
-			}
-
-			item = menu.addItem(mxResources.get('classic'), null, function()
+			var item = menu.addItem(mxResources.get('classic'), null, function()
 			{
 				editorUi.setCurrentTheme((!Editor.isDarkMode()) ? 'kennedy' : 'dark');
 			}, parent);
 
+			var themeFound = false;
+
 			if (theme == 'kennedy' || theme == 'dark')
 			{
 				menu.addCheckmark(item, Editor.checkmarkImage);
+				themeFound = true;
 			}
 
 			for (var i = 0; i < Editor.themes.length; i++)
@@ -3304,10 +3300,15 @@
 					if (theme == key)
 					{
 						menu.addCheckmark(item, Editor.checkmarkImage);
+						themeFound = true;
 					}
-
 				})(Editor.themes[i]));
 			}
+
+			if (!themeFound)
+			{
+				menu.addCheckmark(autoItem, Editor.checkmarkImage);
+			}
 		})));
 
 		var renameAction = this.editorUi.actions.addAction('rename...', mxUtils.bind(this, function()
@@ -3831,8 +3832,8 @@
 
         this.put('insertAdvanced', new Menu(mxUtils.bind(this, function(menu, parent)
         {
-			editorUi.addInsertMenuItems(menu, parent, ['fromText',
-				'plantUml', 'mermaid', '-', 'formatSql']);
+			var advancedItems = ['fromText', 'plantUml'].concat(window.isMermaidEnabled? ['mermaid'] : []).concat(['-', 'formatSql']);
+			editorUi.addInsertMenuItems(menu, parent, advancedItems);
 
 			menu.addItem(mxResources.get('csv') + '...', null, function()
 			{

src/main/webapp/js/diagramly/Minimal.js

@@ -112,6 +112,7 @@ EditorUi.initMinimalTheme = function()
 				menu.funct.apply(this, arguments);
 			}));
 
+			elt.setAttribute('title', label);
 			elt.style.cssText = css;
 			elt.className = 'geTitle';
 			container.appendChild(elt);
@@ -143,11 +144,13 @@ EditorUi.initMinimalTheme = function()
 			else
 			{
 				var elt = addMenu('newLibrary', mxResources.get('newLibrary'));
+				elt.style.display = 'block';
 				elt.style.fontSize = '11px';
 				elt.style.left = '0';
 
 				var elt = addMenu('openLibraryFrom', mxResources.get('openLibraryFrom'));
 				elt.style.borderLeftStyle = 'solid';
+				elt.style.display = 'block';
 				elt.style.fontSize = '11px';
 				elt.style.left = '50%';
 			}

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

@@ -463,7 +463,8 @@
 			{title: mxResources.get('clipart'), id: 'clipart', image: IMAGE_PATH + '/sidebar-clipart.png'},
 			{title: mxResources.get('flowchart'), id: 'flowchart', image: IMAGE_PATH + '/sidebar-flowchart.png'}];
 
-		if (Editor.currentTheme == 'sketch' ||
+		if (Editor.currentTheme == 'simple' ||
+			Editor.currentTheme == 'sketch' ||
 			Editor.currentTheme == 'min')
 		{
 			stdEntries = [{title: mxResources.get('searchShapes'), id: 'search'},

src/main/webapp/js/export.js

@@ -973,8 +973,8 @@ function render(data)
 
 			if (data.crop == '1')
 			{
-				pf.width = gb.width * scale;
-				pf.height = gb.height * scale;
+				pf.width = (gb.width + 1.5) * scale;
+				pf.height = (gb.height + 1.5) * scale;
 			}
 
 			// Starts at first visible page