28.2.5 release

Author: davidjgraph

ChangeLog

@@ -1,3 +1,15 @@
+24-SEP-2025: 28.2.5
+
+- Fixes handling of alpha values in inverted colors [DID-16387]
+
+22-SEP-2025: 28.2.4
+
+- Adds support for HEX colors with transparency
+- Adds dash-dot line pattern [jgraph/drawio-desktop#2184]
+- [conf cloud] Adds option to build page IDs mapping manually using DB files [DID-15536]
+- Fixes possible NPE for VSDX import [jgraph/drawio#3507]
+- Changes unconnected terminal dims to [0,0] [jgraph/drawio#5242]
+
 16-SEP-2025: 28.2.3
 
 - Adds dropbox.com to connect-src CSP

README.md

@@ -1,6 +1,6 @@
 About
 -----
-draw.io, this project, is a configurable diagramming/whiteboarding visualization application. draw.io is jointly owned and developed by JGraph Ltd and draw.io AG.
+draw.io, this project, is a configurable diagramming/whiteboarding visualization application. draw.io is jointly owned and developed by draw.io Ltd and draw.io AG.
 
 As well as running this project, we run a production-grade deployment of the diagramming interface at https://app.diagrams.net.
 

VERSION

@@ -1 +1 @@
-28.2.3
+28.2.5

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

@@ -17,41 +17,6 @@ App = function(editor, container, lightbox)
 		(urlParams['lightbox'] == '1' || (uiTheme == 'min' &&
 		urlParams['chrome'] != '0')));
 
-	// Logs unloading of window with modifications for Google Drive file
-	if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp)
-	{
-		window.onunload = mxUtils.bind(this, function()
-		{
-			var file = this.getCurrentFile();
-			
-			if (file != null && file.isModified())
-			{
-				var evt = {category: 'DISCARD-FILE-' + file.getHash(),
-					action: ((file.savingFile) ? 'saving' : '') +
-					((file.savingFile && file.savingFileTime != null) ? '_' +
-						Math.round((Date.now() - file.savingFileTime.getTime()) / 1000) : '') +
-					((file.saveLevel != null) ? ('-sl_' + file.saveLevel) : '') +
-					'-age_' + ((file.ageStart != null) ? Math.round((Date.now() - file.ageStart.getTime()) / 1000) : 'x') +
-					((this.editor.autosave) ? '' : '-nosave') +
-					((file.isAutosave()) ? '' : '-noauto') +
-					'-open_' + ((file.opened != null) ? Math.round((Date.now() - file.opened.getTime()) / 1000) : 'x') +
-					'-save_' + ((file.lastSaved != null) ? Math.round((Date.now() - file.lastSaved.getTime()) / 1000) : 'x') +
-					'-change_' + ((file.lastChanged != null) ? Math.round((Date.now() - file.lastChanged.getTime()) / 1000) : 'x') +
-					'-alive_' + Math.round((Date.now() - App.startTime.getTime()) / 1000),
-					label: (file.sync != null) ? ('client_' + file.sync.clientId) : 'nosync'};
-					
-				if (file.constructor == DriveFile && file.desc != null && this.drive != null)
-				{
-					evt.label += ((this.drive.user != null) ? ('-user_' + this.drive.user.id) : '-nouser') + '-rev_' +
-						file.desc.headRevisionId + '-mod_' + file.desc.modifiedDate + '-size_' + file.getSize() +
-						'-mime_' + file.desc.mimeType;
-				}
-
-				// EditorUi.logEvent(evt);
-			}
-		});
-	}
-
 	// Logs changes to autosave
 	this.editor.addListener('autosaveChanged', mxUtils.bind(this, function()
 	{

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

@@ -1370,7 +1370,7 @@ GraphViewer.prototype.addToolbar = function()
 				fadeThead2 = null;
 			}
 
-			toolbar.style.display = '';
+			toolbar.style.display = 'flex';
 			mxUtils.setOpacity(toolbar, opacity || 30);
 		});
 

src/main/webapp/js/diagramly/GraphViewer.js

@@ -4774,7 +4774,7 @@ var com;
                             case 102:
                             case 103:
                                 var index = quickStyleLineMatrix - 100;
-                                if (lineStyles === this.lineStyles) {
+                                if (lineStyles === this.lineStyles && this.variantLineIdx[this.themeVariantStl] != null) {
                                     lineStyle = this.lineStyles[this.variantLineIdx[this.themeVariantStl][index] - 1];
                                 }
                                 else {

src/main/webapp/js/diagramly/vsdx/importer.js

@@ -64,6 +64,7 @@ var ColorPicker = function()
 	cross.style.top = '-8px';
 
 	var currentHsv = [0, 0, 1];
+	var currentAlpha = 1;
 
 	function hsv2rgb(h, s, v)
 	{
@@ -172,7 +173,9 @@ var ColorPicker = function()
 			var color = '#' +
 				('0' + Math.round(rgb[0] * 255).toString(16)).slice(-2) +
 				('0' + Math.round(rgb[1] * 255).toString(16)).slice(-2) +
-				('0' + Math.round(rgb[2] * 255).toString(16)).slice(-2);
+				('0' + Math.round(rgb[2] * 255).toString(16)).slice(-2) +
+				(currentAlpha < 1 ?
+					('0' + Math.round(currentAlpha * 255).toString(16)).slice(-2) : '');
 
 			if (quiet != true)
 			{
@@ -215,7 +218,9 @@ var ColorPicker = function()
 			this.fromString('#' +
 				('0' + Math.floor(temp[0] * 255).toString(16)).slice(-2) +
 				('0' + Math.floor(temp[1] * 255).toString(16)).slice(-2) +
-				('0' + Math.floor(temp[2] * 255).toString(16)).slice(-2));
+				('0' + Math.floor(temp[2] * 255).toString(16)).slice(-2) +
+				(currentAlpha < 1 ?
+					('0' + Math.round(currentAlpha * 255).toString(16)).slice(-2) : ''));
 		}
 		else if (sliderActive)
 		{
@@ -288,6 +293,7 @@ var ColorPicker = function()
 		}
 
 		currentHsv[2] = hsv[2];
+		currentAlpha = rgb.a;
 		update(quiet);
 	};
 
@@ -358,7 +364,7 @@ var ColorDialog = function(editorUi, color, apply, cancelFn, defaultColor, defau
 	var darkInput = document.createElement('input');
 	darkInput.style.textOverflow = 'ellipsis';
 	darkInput.style.margin = '0 4px';
-	darkInput.style.maxWidth = '60px';
+	darkInput.style.maxWidth = '70px';
 	darkInput.style.width = '100%';
 
 	var darkSelect = document.createElement('select');

src/main/webapp/js/grapheditor/Dialogs.js

@@ -55,7 +55,7 @@ Format.wireEdgeImage = Graph.createSvgImage(20, 22, '<path transform="translate(
 	'<path transform="translate(4,0)" stroke-dashoffset="8" stroke-dasharray="8 8" stroke-width="3.5" d="M 0 10 L 34 10" stroke="green" fill="black"/>', 42, 20);
 Format.arrowImage = Graph.createSvgImage(20, 22, '<path transform="translate(4,3)" stroke-width="2.5" d="M 0 6 L 24 6 L 24 2 L 32 8 L 24 14 L 24 10 L 0 10 Z" stroke="black" fill="none"/>', 42, 20);
 Format.simpleArrowImage = Graph.createSvgImage(20, 22, '<path transform="translate(4,3)" stroke-width="2.5" d="M 0 6 L 4 6 L 4 10 L 0 10 Z M 7 6 L 18 6 L 18 2 L 25 8 L 18 14 L 18 10 L 7 10 Z M 28 6 L 28 6 L 32 6 L 32 10 L 28 10 Z" stroke="black" fill="none"/>', 42, 20);
-Format.straightImage = Graph.createSvgImage(16, 18, '<path transform="translate(3,4)" stroke-width="4.5" d="M 0 26 L 4 26 L 4 30 L 0 30 Z M 4 26 L 26 4 M 26 0 L 30 0 L 30 4 L 26 4 Z" stroke="black" fill="none"/>', 36, 36);
+Format.straightImage = Graph.createSvgImage(16, 18, '<path transform="translate(3,4)" stroke-width="2.5" d="M 0 26 L 4 26 L 4 30 L 0 30 Z M 4 26 L 26 4 M 26 0 L 30 0 L 30 4 L 26 4 Z" stroke="black" fill="none"/>', 36, 36);
 Format.orthogonalImage = Graph.createSvgImage(16, 18, '<path transform="translate(3,4)" stroke-width="2.5" d="M 0 26 L 4 26 L 4 30 L 0 30 Z M 2 26 L 2 14 L 28 14 L 28 4 M 26 0 L 30 0 L 30 4 L 26 4 Z" stroke="black" fill="none"/>', 36, 36);
 Format.horizontalElbowImage = Graph.createSvgImage(16, 18, '<path transform="translate(3,3)rotate(270,0,0)scale(-1,1)" stroke-width="2.5" d="M 0 26 L 4 26 L 4 30 L 0 30 Z M 2 26 L 2 14 L 28 14 L 28 4 M 26 0 L 30 0 L 30 4 L 26 4 Z M 14 11 L 14 5 M 14 3 L 16 5 L 12 5 Z M 14 17 L 14 23 M 14 25 L 16 23 L 12 23 Z" stroke="black" fill="none"/>', 36, 36);
 Format.verticalElbowImage = Graph.createSvgImage(16, 18, '<path transform="translate(3,4)" stroke-width="2.5" d="M 0 26 L 4 26 L 4 30 L 0 30 Z M 2 26 L 2 14 L 28 14 L 28 4 M 26 0 L 30 0 L 30 4 L 26 4 Z M 14 11 L 14 5 M 14 3 L 16 5 L 12 5 Z M 14 17 L 14 23 M 14 25 L 16 23 L 12 23 Z" stroke="black" fill="none"/>', 36, 36);
@@ -4976,6 +4976,34 @@ StyleFormatPanel.prototype.getCustomColors = function()
 	return result;
 };
 
+/**
+ * Adds the label menu items to the given menu and parent.
+ */
+StyleFormatPanel.prototype.addDashPattern = function(elt, pattern)
+{
+	var tokens = pattern.split(' ');
+
+	if (tokens.length >= 2)
+	{
+		var sum = 0;
+
+		for (var i = 0; i < tokens.length; i++)
+		{
+			sum += parseInt(tokens[i]);
+		}
+		
+		var img = Graph.createSvgImage(sum, 1, '<line transform="translate(0,1)" x1="0" y1="0" x2="' + sum +
+			'" y2="0" stroke-dasharray="' + pattern + '" stroke-width="2" stroke="black"/>', sum, 1);
+		elt.style.backgroundImage = 'url(' + img.src + ')';
+		elt.style.backgroundSize = sum + 'px 1px';
+		elt.style.backgroundRepeat = 'repeat-x';
+	}
+	else
+	{
+		elt.style.borderBottomStyle = pattern;
+	}
+};
+
 /**
  * Adds the label menu items to the given menu and parent.
  */
@@ -5087,23 +5115,8 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	var addItem = mxUtils.bind(this, function(menu, width, pattern, keys, values)
 	{
 		var item = this.editorUi.menus.styleChange(menu, '', keys, values, '', null);
-			var pat = document.createElement('div');
-		var tokens = pattern.split(' ');
-
-		if (tokens.length == 2)
-		{
-			var len = parseInt(tokens[0]) + parseInt(tokens[1]);
-			var fill = parseInt(tokens[0]) / len * 100;
-			pat.style.borderBottomStyle = 'none';
-			pat.style.backgroundImage = 'linear-gradient(to right, ' +
-				'black ' + fill + '%, transparent 0%)';
-			pat.style.backgroundSize = len + 'px 1px';
-		}
-		else
-		{
-			pat.style.borderBottomStyle = pattern;
-		}
-		
+		var pat = document.createElement('div');
+		this.addDashPattern(pat, pattern);
 		item.firstChild.firstChild.className = 'geStyleMenuItem';
 		item.firstChild.firstChild.style.width = width + 'px';
 		item.firstChild.firstChild.appendChild(pat);
@@ -5117,6 +5130,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		addItem(menu, 110, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed') + ' (1)');
 		addItem(menu, 110, '8 8', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '8 8']).setAttribute('title', mxResources.get('dashed') + ' (2)');
 		addItem(menu, 110, '12 12', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '12 12']).setAttribute('title', mxResources.get('dashed') + ' (3)');
+		addItem(menu, 110, '8 4 1 4', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '8 4 1 4']).setAttribute('title', mxResources.get('dashed') + ' (4)');
 		addItem(menu, 110, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
 		addItem(menu, 110, '1 2', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
 		addItem(menu, 110, '1 4', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
@@ -5155,6 +5169,8 @@ StyleFormatPanel.prototype.addStroke = function(container)
 			['1', '8 8']).setAttribute('title', mxResources.get('dashed') + ' (2)');
 		addItem(menu, 40, '12 12', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
 			['1', '12 12']).setAttribute('title', mxResources.get('dashed') + ' (3)');
+		addItem(menu, 40, '8 4 1 4', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
+			['1', '8 4 1 4']).setAttribute('title', mxResources.get('dashed') + ' (4)');
 		addItem(menu, 40, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
 			['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
 		addItem(menu, 40, '1 2', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
@@ -5603,15 +5619,8 @@ StyleFormatPanel.prototype.addStroke = function(container)
 
 			if (tokens.length >= 2)
 			{
-				var len = parseInt(tokens[0]) + parseInt(tokens[1]);
-				var fill = parseInt(tokens[0]) / len * 100;
-
 				solid.style.borderBottom = '1px solid transparent';
-				solid.style.backgroundImage = 'linear-gradient(to right, ' +
-					'black ' + fill + '%, transparent 0%)';
-				solid.style.backgroundPosition = 'bottom left';
-				solid.style.backgroundSize = len +'px 1px';
-				solid.style.backgroundRepeat = 'repeat-x';
+				this.addDashPattern(solid, pat);
 			}
 			else
 			{
@@ -6641,11 +6650,7 @@ DiagramStylePanel.prototype.addGraphStyles = function(div)
 				}));
 			}
 
-			// Workaround for broken cache in IE11
-			if (!mxClient.IS_IE && !mxClient.IS_IE11)
-			{
-				this.format.cachedStyleEntries[index] = panel;
-			}
+			this.format.cachedStyleEntries[index] = panel;
 		}
 
 		entries.appendChild(panel);

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

@@ -76,9 +76,9 @@ Menus.prototype.init = function()
 		Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE],
 			['orthogonalEdgeStyle', null, null], null, null, true, Format.orthogonalImage.src)).setAttribute('title', mxResources.get('orthogonal'));
 		Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE],
-			['elbowEdgeStyle', null, null, null], null, null, true, Format.horizontalElbowImage.src)).setAttribute('title', mxResources.get('simple'));
+			['elbowEdgeStyle', null, null, null], null, null, true, Format.horizontalElbowImage.src)).setAttribute('title', mxResources.get('vertical'));
 		Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE],
-			['elbowEdgeStyle', 'vertical', null, null], null, null, true, Format.verticalElbowImage.src)).setAttribute('title', mxResources.get('simple'));
+			['elbowEdgeStyle', 'vertical', null, null], null, null, true, Format.verticalElbowImage.src)).setAttribute('title', mxResources.get('horizontal'));
 		Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE],
 			['isometricEdgeStyle', null, null, null], null, null, true, Format.horizontalIsometricImage.src)).setAttribute('title', mxResources.get('isometric'));
 		Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE],