24.2.3 release

ChangeLog

@@ -1,3 +1,13 @@
+08-APR-2024: 24.2.3
+
+- Adds Editor.fontSizeUnit, fixes possible unhandled font element
+- Disables dots fillStyle in sketch mode
+- Updates Rough.js from 4.4.1 to 4.6.6
+- Enables rubberband on locked shapes [drawio-desktop-1684]
+- Fixes saving of embed HTML in desktop [drawio-4301]
+- Updates DOMPurify from 3.0.11 to 3.1.0
+- Fixes ignored anchor links in SVG for Chrome PDF export
+
 03-APR-2024: 24.2.2
 
 - [conf cloud] Fixes timeout error fetching custom libraries when libraries page not found [DID-11193]

VERSION

@@ -1 +1 @@
-24.2.2
+24.2.3

etc/dependencies/package.json

@@ -15,9 +15,9 @@
 	  "mermaid": "10.0.2",
 	  "pako": "2.1.0",
 	  "crypto-js": "3.1.2",
-	  "dompurify": "3.0.11",
+	  "dompurify": "3.1.0",
 	  "spin.js": "2.0.0",
-	  "roughjs": "4.4.1",
+	  "roughjs": "4.6.6",
 	  "mathjax": "3.2.2",
 	  "jscolor": "^3.8.0"
 	}

src/main/mxgraph/handler/mxGraphHandler.js

@@ -638,7 +638,11 @@ mxGraphHandler.prototype.mouseDown = function(sender, me)
 			}
 
 			this.cellWasClicked = true;
-			this.consumeMouseEvent(mxEvent.MOUSE_DOWN, me);
+
+			if (!this.graph.isCellLocked(cell))
+			{
+				this.consumeMouseEvent(mxEvent.MOUSE_DOWN, me);
+			}
 		}
 	}
 };

src/main/mxgraph/handler/mxRubberband.js

@@ -170,7 +170,8 @@ mxRubberband.prototype.isForceRubberbandEvent = function(me)
 mxRubberband.prototype.mouseDown = function(sender, me)
 {
 	if (!me.isConsumed() && this.isEnabled() && this.graph.isEnabled() &&
-		me.getState() == null && !mxEvent.isMultiTouchEvent(me.getEvent()))
+		(me.getState() == null || this.graph.isCellLocked(me.getCell())) &&
+		!mxEvent.isMultiTouchEvent(me.getEvent()))
 	{
 		var offset = mxUtils.getOffset(this.graph.container);
 		var origin = mxUtils.getScrollOrigin(this.graph.container);

src/main/mxgraph/io/mxCodec.js

@@ -306,11 +306,11 @@ mxCodec.prototype.addElement = function(node)
  * Function: isObjectIgnored
  *
  * Returns true if the given object is ignored by the codec. This
- * implementation always returns false.
+ * implementation returns false if the given object is not null.
  */
 mxCodec.prototype.isObjectIgnored = function(obj)
 {
-	return false;
+	return obj == null;
 };
 
 /**
@@ -526,7 +526,12 @@ mxCodec.prototype.encodeCell = function(cell, node, includeChildren)
 {
 	if (!this.isObjectIgnored(cell))
 	{
-		node.appendChild(this.encode(cell));
+		var cellNode = this.encode(cell);
+
+		if (cellNode != null)
+		{
+			node.appendChild(cellNode);
+		}
 
 		if (includeChildren == null || includeChildren)
 		{

src/main/mxgraph/shape/mxShape.js

@@ -66,6 +66,14 @@ function mxShape(stencil)
 	this.initStyles();
 };
 
+/**
+ * Variable: forceFilledPointerEvents
+ *
+ * Specifies if pointerEvents should be forced for filled shapes. Default is
+ * false.
+ */
+mxShape.forceFilledPointerEvents = true;
+
 /**
  * Variable: dialect
  *
@@ -1051,10 +1059,10 @@ mxShape.prototype.configureCanvas = function(c, x, y, w, h)
  */
 mxShape.prototype.configurePointerEvents = function(c)
 {
-	if (this.style != null && (this.fill == null ||
-		this.fill == mxConstants.NONE || this.opacity == 0 ||
-		this.fillOpacity == 0) && mxUtils.getValue(this.style,
-		mxConstants.STYLE_POINTER_EVENTS, '1') == '0')
+	if (this.style != null && (!mxShape.forceFilledPointerEvents ||
+		(this.fill == null || this.fill == mxConstants.NONE ||
+		this.opacity == 0 || this.fillOpacity == 0)) &&
+		mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '0')
 	{
 		c.pointerEvents = false;
 	}

src/main/mxgraph/util/mxSvgCanvas2D.js

@@ -935,7 +935,9 @@ mxSvgCanvas2D.prototype.addNode = function(filled, stroked)
 		}
 
 		// Adds stroke tolerance
-		if (this.strokeTolerance > 0 && (!filled || s.fillColor == null))
+		if (this.strokeTolerance > 0 && (!filled || s.fillColor == null ||
+			(!mxShape.forceFilledPointerEvents && !this.pointerEvents &&
+				this.originalRoot == null)))
 		{
 			this.addTolerance(node);
 		}

src/main/mxgraph/view/mxPrintPreview.js

@@ -647,6 +647,9 @@ mxPrintPreview.prototype.open = function(css, targetWindow, forcePageBreaks, kee
 				{
 					var anchor = doc.createElement('a');
 					anchor.setAttribute('id', id);
+					// Workaround for PDF export in Chrome where anchor links
+					// are only working when referenced outside SVG elements
+					anchor.setAttribute('href', '#' + id);
 					div.insertBefore(anchor, div.firstChild);
 				}
 

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

@@ -726,7 +726,8 @@ var EmbedDialog = function(editorUi, result, timeout, ignoreSize, previewFn, tit
 	var previewBtn = null;
 
 	// Loads forever in IE9
-	if (EmbedDialog.showPreviewOption && (!mxClient.IS_CHROMEAPP || validUrl) && !navigator.standalone && (validUrl ||
+	if (EmbedDialog.showPreviewOption && !mxIsElectron &&
+		(!mxClient.IS_CHROMEAPP || validUrl) && !navigator.standalone && (validUrl ||
 		(mxClient.IS_SVG && (document.documentMode == null || document.documentMode > 9))))
 	{
 		previewBtn = mxUtils.button((previewTitle != null) ? previewTitle :
@@ -798,7 +799,7 @@ var EmbedDialog = function(editorUi, result, timeout, ignoreSize, previewFn, tit
 
 	if (!validUrl || result.length > 7500)
 	{
-		var downloadBtn = mxUtils.button(mxResources.get('download'), function()
+		var downloadBtn = mxUtils.button(mxResources.get(mxIsElectron ? 'save' : 'download'), function()
 		{
 			editorUi.hideDialog();
 			editorUi.saveData((filename != null) ? filename : 'embed.txt', 'txt', result, 'text/plain');

src/main/webapp/js/diagramly/DrawioFile.js

@@ -660,6 +660,22 @@ DrawioFile.prototype.checksumError = function(error, patches, details, etag, fun
 				{
 					var type = (data != null) ? 'Report' : 'Error';
 					var latest = this.ui.getHashValueForPages(latestFile.getShadowPages());
+					var latestVersion = 'unknown';
+
+					try
+					{
+						var node = (latestFile.initialData != null && latestFile.initialData.length > 0) ?
+							mxUtils.parseXml(latestFile.initialData).documentElement : null;
+
+						if (node != null && node.getAttribute('version') != null)
+						{
+							latestVersion = node.getAttribute('version');
+						}
+					}
+					catch (e)
+					{
+						// ignore
+					}
 
 					EditorUi.logError('Checksum ' + type + ' in ' + functionName + ' ' + id,
 						null, this.getMode() + '.' + this.getId(),
@@ -672,8 +688,9 @@ DrawioFile.prototype.checksumError = function(error, patches, details, etag, fun
 						((current != null) ? ('-current_' + current) : '') +
 						((rev != null) ? ('-rev_' + this.ui.hashValue(rev)) : '') +
 						((latest != null) ? ('-latest_' + latest) : '') +
-						((latestFile != null) ? ('-latestRev_' + this.ui.hashValue(
-							latestFile.getCurrentRevisionId())) : ''));
+						'-latestRev_' + this.ui.hashValue(
+							latestFile.getCurrentRevisionId()) +
+						('-latestVersion_' + latestVersion));
 
 					EditorUi.logEvent({category: 'CHECKSUM-ERROR-SYNC-FILE-' + id,
 						action: functionName, label: 'user_' + uid + ((this.sync != null) ?
@@ -2756,14 +2773,21 @@ DrawioFile.prototype.contentChanged = function()
  */
 DrawioFile.prototype.close = function(unloading)
 {
-	this.updateFileData();
-	this.stats.closed++;
+	try
+	{
+		this.updateFileData();
 
-	if (this.isAutosave() && this.isModified())
+		if (this.isAutosave() && this.isModified())
+		{
+			this.save(this.isAutosaveRevision(), null, null, unloading);
+		}
+	}
+	catch (e)
 	{
-		this.save(this.isAutosaveRevision(), null, null, unloading);
+		// ignore
 	}
-
+
+	this.stats.closed++;
 	this.destroy();
 };
 

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

@@ -640,11 +640,12 @@
         {
         	var fillColor = mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, null);
 
-        	return format.editorUi.editor.graph.isSwimlane(state.vertices[0]) ||
+        	return !mxShape.forceFilledPointerEvents ||
+				(format.editorUi.editor.graph.isSwimlane(state.vertices[0]) ||
         		fillColor == null || fillColor == mxConstants.NONE ||
 				mxUtils.getValue(state.style, mxConstants.STYLE_FILL_OPACITY, 100) == 0 ||
 				mxUtils.getValue(state.style, mxConstants.STYLE_OPACITY, 100) == 0 ||
-				state.style['pointerEvents'] != null;
+				state.style['pointerEvents'] != null);
         }},
         {name: 'moveCells', dispName: 'Move Cells on Fold', type: 'bool', defVal: false, isVisible: function(state, format)
         {
@@ -1046,6 +1047,12 @@
 
 			var fillStyle = mxUtils.getValue(this.shape.style, 'fillStyle', 'auto');
 
+			// Dots fill style is disable due to performance problems
+			if (fillStyle == 'dots')
+			{
+				fillStyle = 'auto';
+			}
+
 			if (fillStyle == 'auto')
 			{
 				// One of the following backgrounds for solid fill
@@ -1064,7 +1071,7 @@
 				fillStyle = (style.fill != null && (gradient != null || mxUtils.indexOf(
 					bg, mxUtils.hex2rgb(style.fill)) >= 0)) ? 'solid' : defs['fillStyle'];
 			}
-			
+
 			style['fillStyle'] = fillStyle;
 
 			return style;

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

@@ -1118,7 +1118,7 @@ mxStencilRegistry.allowEval = false;
 						this.hideDialog();
 						fn(fileEntry, drafts[index].data, stat, null, true);
 						await requestSync({action: 'deleteFile', file: drafts[index].path});
-					}), mxUtils.bind(this, function(index)
+					}), mxUtils.bind(this, async function(index)
 					{
 						index = index || 0;
 						await requestSync({action: 'deleteFile', file: drafts[index].path});
@@ -1583,7 +1583,9 @@ mxStencilRegistry.allowEval = false;
 	{
 		try
 		{
-			var lastDir = localStorage.getItem('.lastSaveDir');
+			var lastDir = (this.fileObject != null && this.fileObject.path != null) ?
+				await requestSync({action: 'dirname', path: this.fileObject.path}) :
+				localStorage.getItem('.lastSaveDir');
 			var name = this.ui.normalizeFilename(this.getTitle(),
 				this.constructor == LocalLibrary ? 'xml' : null);
 			var ext = null;
@@ -2091,6 +2093,11 @@ mxStencilRegistry.allowEval = false;
 				          { name: 'XML Documents', extensions: ['xml'] }
 				       ];
 				break;
+				case 'txt':
+					filters = [
+				          { name: 'Plain Text', extensions: ['txt'] }
+				       ];
+				break;
 			};
 
 			dlgConfig['filters'] = filters;
@@ -2117,10 +2124,10 @@ mxStencilRegistry.allowEval = false;
 					}, mxUtils.bind(this, function ()
 				    {
 						this.spinner.stop();
-		        	}), mxUtils.bind(this, function ()
+		        	}), mxUtils.bind(this, function (e)
 				    {
 						this.spinner.stop();
-						this.handleError({message: mxResources.get('errorSavingFile')});
+						this.handleError(e, mxResources.get('errorSavingFile'));
 		        	}));
 				}
 			}

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

@@ -2540,7 +2540,9 @@
 						editorUi.createHtml(publicUrl, zoomEnabled, initialZoom, linkTarget, linkColor, fit, allPages,
 							layers, tags, lightbox, editLink, mxUtils.bind(this, function(html, scriptTag)
 							{
-								var dlg = new EmbedDialog(editorUi, html + '\n' + scriptTag, null, null, function()
+								// Comment is workaround for file data check in checkFileContent for Electron
+								var dlg = new EmbedDialog(editorUi, '<!-- ' + editorUi.editor.appName + ' diagram -->\n' +
+									html + '\n' + scriptTag + '\n', null, null, function()
 								{
 									var wnd = window.open();
 									var doc = wnd.document;

src/main/webapp/js/grapheditor/Editor.js

@@ -252,6 +252,11 @@ Editor.darkColor = (Editor.enableCssDarkMode) ? '#121212' : '#18141D';
  */
 Editor.lightColor = '#f0f0f0';
 
+/**
+ * Label for the font size unit. Default is 'pt'.
+ */
+Editor.fontSizeUnit = 'pt';
+
 /**
  * Returns the current state of the dark mode.
  */