28.0.1 release

Author: davidjgraph

ChangeLog

@@ -1,3 +1,42 @@
+10-JUL-2025: 28.0.1
+
+- Adds some HTML to SVG conversion
+
+10-JUL-2025: 28.0.0
+
+- Fixes possible ClipboardItem.supports is not a function
+- Fixes possible overflow for sidebars on small screens
+- Fixes Alt+Click in sidebar and shape picker [jgraph/drawio#4720]
+- Fixes possible NPE in mxGraph.intersects
+- Removes Twitter and Facebook button in Embed dialog [DID-15625]
+- Enables PlantUML menu option if URL was customized [DID-15625]\
+- Adds gapi-stealth URL parameter for stealth mode with Google Drive [DID-15625]
+- Adds resizing for metadata dialog [jgraph/drawio#375,jgraph/drawio#5142]
+- Hides Publish and Embed menu when offline [DID-15625]
+- Hides Publish and Embed menu when offline in Minimal theme [DID-15625]
+- Updates icon cache
+
+30-JUN-2025: 27.2.0
+
+- Adds copy as SVG, improves handling of clipboard data
+- Fixes theme buttons on touch devices
+- Fixes justifyfull [jgraph/drawio#526]
+- Fixes enter keystroke in omni search box
+- Fixes use of generic font-families [jgraph/drawio#4998]
+- Fixes window tooltips i18n [jgraph/drawio#4654]
+- Adds shadows option for print and PDF export, uses CSS filter for global shadow [jgraph/drawio-desktop#2133]
+- Fixes floating panels on mobile [jgraph/drawio#5134]
+- Fixes exported SVG image sizes [jgraph/drawio#4814]
+- Fixes diagram insert position in Notion extension [jgraph/drawio#5123]
+- Fixes disabled dark mode in Firefox 140
+- Adds miterlimit property for shapes [jgraph/drawio#4706]
+- Fixes PDF title and page numbers [jgraph/drawio-desktop#2130,jgraph/drawio#4102]
+- Adds experimental pipe shape, improves edge style panel [jgraph/drawio#5144]
+- Fixes miter limit default value
+- Adds support for SVG background images with dark mode
+- Fixes offsets in image export [jgraph/drawio#5122]
+- Fixes possible NPE in Find dialog [jgraph/drawio#5143]
+
 16-JUN-2025: 27.1.6
 
 - Hides dark mode toggle in unsupported browsers

VERSION

@@ -1 +1 @@
-27.1.6
+28.0.1

src/main/webapp/export3.html

@@ -13,9 +13,6 @@
 				page-break-inside: avoid;
 				page-break-after: always;
 			}
-			g[style*="filter: drop-shadow("] {
-				filter: none !important;
-			}
 		}
 	</style>
 	<link rel="stylesheet" href="mxgraph/css/common.css" charset="UTF-8" type="text/css">

src/main/webapp/js/app.min.js

@@ -3,7 +3,6 @@ window.TEMPLATE_PATH = 'templates';
 window.DRAW_MATH_URL = 'math/es5';
 window.DRAWIO_BASE_URL = '.'; //Prevent access to online website since it is not allowed
 window.DRAWIO_SERVER_URL = '.';
-FeedbackDialog.feedbackUrl = 'https://log.draw.io/email';
 EditorUi.draftSaveDelay = 5000;
 //Disables eval for JS (uses shapes-14-6-5.min.js)
 mxStencilRegistry.allowEval = false;
@@ -222,11 +221,6 @@ mxStencilRegistry.allowEval = false;
 		menusInit.apply(this, arguments);
 
 		var editorUi = this.editorUi;
-
-		editorUi.actions.put('useOffline', new Action('useOffline' + '...', function()
-		{
-			editorUi.openLink('https://www.draw.io/')
-		}));
 
 		this.put('openRecent', new Menu(function(menu, parent)
 		{
@@ -634,15 +628,15 @@ mxStencilRegistry.allowEval = false;
 		{
 			origCut();
 			cloneMxCLipboardToSys();
-		}, null, 'sprite-cut', Editor.ctrlKey + '+X');
+		}, null, '', Editor.ctrlKey + '+X');
 
 		var origCopy = this.actions.get('copy').funct;
 
 		editorUi.actions.addAction('copy', function()
 		{
 			origCopy();
 			cloneMxCLipboardToSys();
-		}, null, 'sprite-copy', Editor.ctrlKey + '+C');
+		}, null, '', Editor.ctrlKey + '+C');
 
 		//Get data from system clipboard for pase/pasteHere
 		var origPaste = this.actions.get('paste').funct;
@@ -651,7 +645,7 @@ mxStencilRegistry.allowEval = false;
 		{
 			cloneSysCLipboardToMx();
 			origPaste();
-		}, false, 'sprite-paste', Editor.ctrlKey + '+V');
+		}, false, '', Editor.ctrlKey + '+V');
 
 		var origPasteHere = this.actions.get('pasteHere').funct;
 
@@ -669,7 +663,7 @@ mxStencilRegistry.allowEval = false;
 			var pasteHere = this.actions.get('pasteHere');
 
 			paste.setEnabled(this.editor.graph.cellEditor.isContentEditing() || 
-					(graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent())));
+				(graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent())));
 			pasteHere.setEnabled(paste.isEnabled());
 		};
 
@@ -1838,7 +1832,7 @@ mxStencilRegistry.allowEval = false;
 	/**
 	 * Copies the given cells and XML to the clipboard as an embedded image.
 	 */
-	EditorUi.prototype.writeImageToClipboard = async function(dataUrl, w, h, error)
+	EditorUi.prototype.writeImageToClipboard = async function(dataUrl, w, h, type, success, error)
 	{
 		try
 		{
@@ -1847,10 +1841,18 @@ mxStencilRegistry.allowEval = false;
 				method: 'writeImage',
 				data: {dataUrl: dataUrl, w: w, h: h}
 			});
+
+			if (success != null)
+			{
+				success();
+			}
 		}
 		catch (e)
 		{
-			error(e);
+			if (error != null)
+			{
+				error(e);
+			}
 		}
 	};
 
@@ -1874,7 +1876,7 @@ mxStencilRegistry.allowEval = false;
 
 	EditorUi.prototype.saveRequest = function(filename, format, fn, data, base64Encoded, mimeType)
 	{
-		var xhr = fn(null, '1');
+		var xhr = fn(filename, '1');
 
 		if (xhr != null && this.spinner.spin(document.body, mxResources.get('saving')))
 		{
@@ -1939,11 +1941,11 @@ mxStencilRegistry.allowEval = false;
 	// Direct export to pdf
 	EditorUi.prototype.createDownloadRequest = function(filename, format, ignoreSelection, base64,
 		transparent, currentPage, scale, border, grid, includeXml, pageRange, w, h, crop, margin,
-		fit, sheetsAcross, sheetsDown)
+		fit, sheetsAcross, sheetsDown, shadows)
 	{
 		var params = this.downloadRequestBuilder(filename, format, ignoreSelection, base64,
 			transparent, currentPage, scale, border, grid, includeXml, pageRange, w, h, crop,
-			margin, fit, sheetsAcross, sheetsDown);
+			margin, fit, sheetsAcross, sheetsDown, shadows);
 
 		return new mxElectronRequest('export', params);
 	};
@@ -1976,7 +1978,8 @@ mxStencilRegistry.allowEval = false;
 
 			editorUi.hideDialog();
 
-			if ((format == 'png' || format == 'jpg' || format == 'jpeg') && editorUi.isExportToCanvas())
+			if ((format == 'png' || format == 'jpg' || format == 'jpeg') &&
+				editorUi.editor.isExportToCanvas())
 			{
 				if (format == 'png')
 				{

src/main/webapp/js/diagramly/ElectronApp.js

@@ -3,6 +3,31 @@ var mxIsElectron = navigator.userAgent != null &&
 	navigator.userAgent.indexOf(' draw.io/') > -1;
 var GOOGLE_APPS_MAX_AREA = 25000000;
 var GOOGLE_SHEET_MAX_AREA = 1000000; // The maximum number of pixels is 1 million.
+var shadowBlocker = null;
+
+/**
+ * Adds shadow blocker style.
+ */
+function addShadowBlocker()
+{
+	if (shadowBlocker == null)
+	{
+		shadowBlocker = document.createElement('style');
+		shadowBlocker.setAttribute('type', 'text/css');
+		shadowBlocker.innerHTML = '@media print {\n' +
+			'    g[style*="filter: drop-shadow("] {\n' +
+			'        filter: none !important;\n' +
+			'    }\n' +
+			'}\n';
+		
+		var head = document.getElementsByTagName('head')[0];
+		
+		if (head != null)
+		{
+			head.appendChild(shadowBlocker);
+		}
+	}
+}
 
 /**
  * Adds meta tag to the page.
@@ -84,6 +109,11 @@ var cssPreload = {};
 
 function render(data)
 {
+	if (data.shadows == '0')
+	{
+		addShadowBlocker();
+	}
+	
 	if (data.csv != null)
 	{
 		// CSV loads orgChart asynchronously and needs mxscript
@@ -189,9 +219,14 @@ function render(data)
 		Graph.translateDiagram = true;
 	}
 
-	if (extras != null && extras.globalVars != null && extras.globalVars.filename != null)
+	if (data.fileTitle != null)
 	{
-		document.title = extras.globalVars.filename + '.pdf';
+		document.title = data.fileTitle;
+	}
+	else if (extras != null && extras.globalVars != null &&
+		extras.globalVars.filename != null)
+	{
+		document.title = extras.globalVars.filename;
 	}
 
 	// Overrides graph bounds to include background images
@@ -216,13 +251,13 @@ function render(data)
 		return bounds;
 	};
 
-	//PNG+XML format
+	// PNG+XML format
 	if (data.xml.substring(0, 5) == 'iVBOR' || (extras != null && extras.isPng))
 	{
 		data.xml = Editor.extractGraphModelFromPng('data:image/png;base64,' + data.xml);
 	}
 
-	//IE11 sends incorrect xml
+	// IE11 sends incorrect xml
 	if (data.xml.substring(0, 11) == '<#document>')
 	{
 		data.xml = data.xml.substring(11, data.xml.length - 12);
@@ -832,11 +867,6 @@ function render(data)
 				graph.pageScale = ps;
 			}
 
-			if (data.fileTitle != null)
-			{
-				document.title = data.fileTitle;
-			}
-			
 			var pf = graph.pageFormat;
 			var temp = data.scale;
 			pf.width = Math.ceil(pf.width * graph.pageScale);
@@ -1076,7 +1106,18 @@ function render(data)
 					{
 						div.classList.add('geDisableMathJax')
 					}
-
+					
+					// Adds shadow
+					if (xmlDoc.documentElement.getAttribute('shadow') == '1')
+					{
+						var svgs = div.getElementsByTagName('svg');
+						
+						for (var i = 0; i < svgs.length; i++)
+						{
+							graph.addSvgShadow(svgs[i]);
+						}
+					}
+					
 					waitForGoogleFontImports(div);
 				};
 
@@ -1096,25 +1137,6 @@ function render(data)
 				preview.appendGraph(graph, scale, x0, y0, null, null, anchorId, pf);
 			}
 
-			// Adds shadow
-			// NOTE: Shadow rasterizes output
-			/*if (mxClient.IS_SVG && xmlDoc.documentElement.getAttribute('shadow') == '1')
-			{
-				var svgs = document.getElementsByTagName('svg');
-				
-				for (var i = 0; i < svgs.length; i++)
-				{
-					var svg = svgs[i];
-
-					var filter = graph.addSvgShadow(svg, null, true);
-					filter.setAttribute('id', 'shadow-' + i);
-					svg.appendChild(filter);
-					svg.setAttribute('filter', 'url(#' + 'shadow-' + i + ')');
-				}
-				
-				border = 7;
-			}*/
-			
 			bounds = new mxRectangle(0, 0, pf.width, pf.height);
 		}
 		else
@@ -1141,13 +1163,11 @@ function render(data)
 			}
 
 			// Adds shadow
-			// NOTE: PDF shadow rasterizes output so it's disabled
-			if (data.format != 'pdf' && mxClient.IS_SVG && xmlDoc.documentElement.getAttribute('shadow') == '1')
+			if (xmlDoc.documentElement.getAttribute('shadow') == '1')
 			{
-				graph.addSvgShadow(graph.view.canvas.ownerSVGElement, null, true);
-				graph.setShadowVisible(true);
-				bounds.width += 7;
-				bounds.height += 7;
+				var size = graph.setShadowVisible(true);
+				bounds.width += size;
+				bounds.height += size;
 			}
 
 			document.body.style.width = Math.ceil(bounds.x + bounds.width) + 'px';
@@ -1195,7 +1215,7 @@ function render(data)
 				return (diagrams == null) ? 'Page-1' :
 					(diagrams[from].getAttribute('name') || ('Page-' + (from + 1)));
 			}
-			else if (name == 'pagenumber')
+			else if (name == 'pagenumber' && data.from != null)
 			{
 				return from + 1;
 			}