24.1.0 release

ChangeLog

@@ -1,4 +1,12 @@
-22-MAR_2024: 24.0.8
+23-MAR-2024: 24.1.0
+
+- Improves save performance for files with images [DID-11006]
+
+23-MAR-2024: 24.0.9
+
+Improves remote changes handling in DrawioFileSync.fastForward
+
+22-MAR-2024: 24.0.8
 
 - Fixes background of ID property
 - Fixes lost page links in pasted cells

VERSION

@@ -1 +1 @@
-24.0.8
+24.1.0

src/main/mxgraph/util/mxUtils.js

@@ -1094,6 +1094,38 @@ var mxUtils =
 		return str + postfix;
 	},
 
+	/**
+	 * Function: getNodeValue
+	 * 
+	 * Returns the node value of the specified node and its
+	 * text and cdata children as a string. The node values
+	 * are trimmed and concatenated. Returns null if no value
+	 * was found.
+	 * 
+	 * Parameters:
+	 * 
+	 * node - DOM node to return the node value for.
+	 */
+	getNodeValue: function(node)
+	{
+		node = node.firstChild;
+		var result = [];
+
+		while (node != null)
+		{
+			if ((node.nodeType == mxConstants.NODETYPE_TEXT ||
+				node.nodeType == mxConstants.NODETYPE_CDATA) &&
+				node.nodeValue != null)
+			{
+				result.push(mxUtils.trim(node.nodeValue));
+			}
+
+			node = node.nextSibling;
+		}
+
+		return (result.length > 0) ? result.join('') : '';
+	},
+
 	/**
 	 * Function: getTextContent
 	 * 

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

@@ -11539,10 +11539,18 @@ var LibraryDialog = function(editorUi, name, library, initialImages, file, mode,
 
 						for (var i = 0; i < pages.length; i++)
 						{
-							var temp = mxUtils.getTextContent(pages[i]);
-							var cells = editorUi.stringToCells(Graph.decompress(temp));
-							var size = editorUi.editor.graph.getBoundingBoxFromGeometry(cells);
-							addButton(null, null, 0, 0, 0, 0, {xml: temp, w: size.width, h: size.height});
+							var xml = Editor.getDiagramNodeXml(pages[i]);
+							var cells = editorUi.stringToCells(xml);
+
+							if (cells.length > 0)
+							{
+								var size = editorUi.editor.graph.getBoundingBoxFromGeometry(cells);
+
+								if (size != null)
+								{
+									addButton(null, null, 0, 0, 0, 0, {xml: xml, w: size.width, h: size.height});
+								}
+							}
 						}
 
 						done = true;
@@ -11552,7 +11560,7 @@ var LibraryDialog = function(editorUi, name, library, initialImages, file, mode,
 				{
 					if (window.console != null)
 					{
-						console.log('Error in library dialog: ' + e);
+						console.error('Error in library dialog: ' + e);
 					}
 				}
 
@@ -12911,7 +12919,30 @@ var FilePropertiesDialog = function(editorUi, publicLink)
 		file.getTitle() : editorUi.defaultFilename;
 	var isPng = /(\.png)$/i.test(filename);
 	var isSvg = /(\.svg)$/i.test(filename);
-	var apply = function() { };
+	var apply = function(success, error)
+	{
+		success();
+	};
+
+	function addApply(fn)
+	{
+		var prevApply = apply;
+
+		apply = function(success, error)
+		{
+			try
+			{
+				fn(function()
+				{
+					prevApply(success, error);
+				}, error);
+			}
+			catch (e)
+			{
+				error(e);
+			}
+		};
+	};
 
 	if (isPng || isSvg)
 	{
@@ -12983,8 +13014,8 @@ var FilePropertiesDialog = function(editorUi, publicLink)
 				document.execCommand('selectAll', false, null);
 			}
 		};
-		
-		apply = function()
+
+		addApply(function(success, error)
 		{
 			if (editorUi.fileNode != null)
 			{
@@ -12996,9 +13027,9 @@ var FilePropertiesDialog = function(editorUi, publicLink)
 					file.fileChanged();
 				}
 			}
-			
-			editorUi.hideDialog();
-		};
+
+			success();
+		});
 	}
 	else if (!/(\.html)$/i.test(filename) &&
 		!/(\.svg)$/i.test(filename))
@@ -13034,22 +13065,30 @@ var FilePropertiesDialog = function(editorUi, publicLink)
 		{
 			compressedInput.focus();
 		};
-		
-		apply = function()
+
+		addApply(function(success, error)
 		{
 			if (editorUi.fileNode != null && initialCompressed != compressedInput.checked)
 			{
-				editorUi.fileNode.setAttribute('compressed',
-					(compressedInput.checked) ? 'true' : 'false');
-
-				if (file != null)
+				window.setTimeout(function()
 				{
-					file.fileChanged();
-				}
+					editorUi.fileNode.setAttribute('compressed',
+						(compressedInput.checked) ? 'true' : 'false');
+
+					if (file != null)
+					{
+						file.compressionChanged(compressedInput.checked);
+						file.fileChanged();
+					}
+
+					success();
+				}, 0);
 			}
-
-			editorUi.hideDialog();
-		};
+			else
+			{
+				success();
+			}
+		});
 	}
 
 	if (file != null && file.isRealtimeOptional())
@@ -13076,28 +13115,17 @@ var FilePropertiesDialog = function(editorUi, publicLink)
 			collabInput.defaultChecked = true;
 		}
 
-		prevApply = apply;
-		apply = function()
+		addApply(function(success, error)
 		{
-			prevApply();
-			editorUi.hideDialog();
-
 			if (collabInput.checked != initialCollab)
 			{
-				if (editorUi.spinner.spin(document.body, mxResources.get('updatingDocument')))
-				{
-					file.setRealtimeEnabled(collabInput.checked, mxUtils.bind(this, function(resp)
-					{
-						editorUi.spinner.stop();
-					}), mxUtils.bind(this, function(resp)
-					{
-						editorUi.spinner.stop();
-						editorUi.showError(mxResources.get('error'), (resp != null && resp.error != null) ?
-							resp.error.message : mxResources.get('unknownError'), mxResources.get('ok'));
-					}));
-				}
+				file.setRealtimeEnabled(collabInput.checked, success, error);
 			}
-		};
+			else
+			{
+				success();
+			}
+		});
 
 		this.init = (this.init != null) ? this.init : function()
 		{
@@ -13201,15 +13229,29 @@ var FilePropertiesDialog = function(editorUi, publicLink)
 
 	this.init = (this.init != null) ? this.init : function() { };
 
-	var genericBtn = mxUtils.button(mxResources.get('apply'), apply);
+	var genericBtn = mxUtils.button(mxResources.get('apply'), function()
+	{
+		if (editorUi.spinner.spin(document.body, mxResources.get('updatingDocument')))
+		{
+			apply(function()
+			{
+				editorUi.spinner.stop();
+				editorUi.hideDialog();
+			}, function(e)
+			{
+				editorUi.spinner.stop();
+				editorUi.handleError(e, mxResources.get('error'));
+			});
+		}
+	});
 	genericBtn.className = 'geBtn gePrimaryBtn';
 
 	row = document.createElement('tr');
 	td = document.createElement('td');
 	td.colSpan = 2;
 	td.style.paddingTop = '20px';
 	td.style.whiteSpace = 'nowrap';
-	td.setAttribute('align', 'center');
+	td.setAttribute('align', 'right');
 
 	var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
 	{

src/main/webapp/js/diagramly/DiffSync.js

@@ -733,7 +733,16 @@ EditorUi.prototype.getPagesForNode = function(node, nodeName)
 	{
 		var page = new DiagramPage(node.ownerDocument.createElement('diagram'));
 		page.setName(mxResources.get('pageWithNumber', [1]));
-		mxUtils.setTextContent(page.node, Graph.compressNode(node, true));
+
+		if (Editor.internalCompression)
+		{
+			mxUtils.setTextContent(page.node, Graph.compressNode(node, true));
+		}
+		else
+		{
+			page.node.appendChild(node.cloneNode(true));
+		}
+
 		pages.push(page);
 	}
 

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

@@ -478,6 +478,11 @@ DrawioFile.prototype.mergeFile = function(file, success, error, diffShadow, imme
 			}
 			else
 			{
+				this.invalidChecksum = false;
+				this.inConflictState = false;
+				this.setDescriptor(file.getDescriptor());
+				this.descriptorChanged();
+
 				EditorUi.debug('File.mergeFile', [this],
 					'file', [file], 'ignored', ignored);
 
@@ -1863,7 +1868,7 @@ DrawioFile.prototype.addAllSavedStatus = function(status)
 /**
  * Adds the listener for automatically saving the diagram for local changes.
  */
-DrawioFile.prototype.saveDraft = function()
+DrawioFile.prototype.saveDraft = function(data)
 {
 	try
 	{
@@ -1882,7 +1887,7 @@ DrawioFile.prototype.saveDraft = function()
 		var draft = {type: 'draft',
 			created: this.created,
 			modified: new Date().getTime(),
-			data: this.ui.getFileData(),
+			data: (data != null) ? data : this.ui.getFileData(),
 			title: this.getTitle(),
 			fileObject: this.fileObject,
 			aliveCheck: this.ui.draftAliveCheck};
@@ -2360,6 +2365,54 @@ DrawioFile.prototype.isOverdue = function()
 	return this.ageStart != null && (Date.now() - this.ageStart.getTime()) >= this.ui.warnInterval;
 };
 
+/**
+ * Invoked when the compression has changed.
+ */
+DrawioFile.prototype.compressionChanged = function(compressed)
+{
+	// Changes the internal compressed data in the pages to the current state
+	var pages = (this.ownPages != null) ? this.ownPages : this.ui.pages;
+
+	if (!Editor.internalCompression && pages != null)
+	{
+		for (var i = 0; i < pages.length; i++)
+		{
+			var pageNode = pages[i].node;
+
+			if (pageNode != null && (this.ui.currentPage == null ||
+				this.ui.currentPage.getId() != pages[i].getId()))
+			{
+				var models = pageNode.getElementsByTagName('mxGraphModel');
+				var modelNode = (models.length > 0) ? models[0] : null;
+				var xml = Graph.decompress(mxUtils.getNodeValue(pageNode));
+
+				if (compressed)
+				{
+					if (xml.length == 0 && modelNode != null)
+					{
+						EditorUi.removeChildNodes(pageNode);
+						mxUtils.setTextContent(pageNode, Graph.compressNode(modelNode));
+
+						EditorUi.debug('DrawioFile.compressionChanged',
+							[this], 'Page ' + i + ' compressed');
+					}
+				}
+				else
+				{
+					if (xml.length > 0 && modelNode == null)
+					{
+						EditorUi.removeChildNodes(pageNode);
+						pageNode.appendChild(mxUtils.parseXml(xml).documentElement);
+
+						EditorUi.debug('DrawioFile.compressionChanged',
+							[this], 'Page ' + i + ' decompressed');
+					}
+				}
+			}
+		}
+	}
+};
+
 /**
  * Adds the listener for automatically saving the diagram for local changes.
  */

src/main/webapp/js/diagramly/DrawioFileSync.js

@@ -964,7 +964,10 @@ DrawioFileSync.prototype.receiveRemoteChanges = function(data)
  */
 DrawioFileSync.prototype.scheduleCleanup = function(lazy)
 {
-	var delay = (lazy == false) ? 0 : this.cleanupDelay;
+	// Adds 2 secs per 10MB of file size to allow for remote save with
+	// local fastForward before cleanup is triggered
+	var sizeDelaySec = Math.min(15, Math.floor(this.file.getSize() / 5000000));
+	var delay = (lazy == false) ? 0 : this.cleanupDelay + sizeDelaySec * 1000;
 	var prev = this.cleanupThread;
 
 	if (lazy != true || this.cleanupThread != null)
@@ -1522,8 +1525,24 @@ DrawioFileSync.prototype.fastForward = function(desc)
 	this.file.patchDescriptor(this.file.getDescriptor(), desc);
 	this.file.setShadowPages(this.ui.clonePages(this.ui.pages));
 	this.file.theirPages = this.ui.clonePages(this.ui.pages);
+
+	// Forces update of internal page state for remote changes
+	// Note that clonePages does not clone the needsUpdate flag
+	var prevOwnPages = this.file.ownPages;
 	this.file.ownPages = this.ui.clonePages(this.ui.pages);
 
+	for (var i = 0; i < this.file.ownPages.length; i++)
+	{
+		if (this.ui.getHashValueForPages([this.file.ownPages[i]]) !=
+			this.ui.getHashValueForPages([prevOwnPages[i]]))
+		{
+			this.file.ownPages[i].needsUpdate = true;
+
+			EditorUi.debug('DrawioFileSync.fastForward', [this],
+				this.file.ownPages[i].getName() + ' needs update');
+		}
+	}
+
 	var thread = this.cleanupThread;
 	window.clearTimeout(this.cleanupThread);
 	this.cleanupThread = null;