24.4.15 release

ChangeLog

@@ -1,3 +1,10 @@
+06-JUN-2024: 24.4.15
+
+- Fixes possible clipping in sidebar popup
+- Enables saveAs for read-only files
+- Fixes text editing position for insert layout dialog [drawio-4449]
+- Adds start-/endFillColor styles for connectors [drawio-4438]
+
 05-JUN-2024: 24.4.14
 
 - Adds support for adaptive polling

VERSION

@@ -1 +1 @@
-24.4.14
+24.4.15

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

@@ -2471,8 +2471,9 @@ App.prototype.updateDocumentTitle = function()
 /**
  * Returns a thumbnail of the current file.
  */
-App.prototype.getThumbnail = function(width, fn)
+App.prototype.getThumbnail = function(width, fn, border)
 {
+	border = (border != null) ? border : 0;
 	var result = false;
 
 	try
@@ -2567,7 +2568,7 @@ App.prototype.getThumbnail = function(width, fn)
 		   	{
 		   		// Continues with null in error case
 		   		success();
-		   	}, null, null, null, null, null, null, graph, null, null, null,
+		   	}, null, null, null, null, null, null, graph, border, null, null,
 			   null, 'diagram', null);
 
 		   	result = true;
@@ -3927,28 +3928,39 @@ App.prototype.loadFileSystemEntry = function(fileHandle, success, error)
 
 			reader.onload = mxUtils.bind(this, function(e)
 			{
-				try
+				var doSuccess = mxUtils.bind(this, function(editable)
 				{
-					if (success != null)
+					try
 					{
-						var data = e.target.result;
-
-						if (file.type == 'image/png')
+						if (success != null)
+						{
+							var data = e.target.result;
+
+							if (file.type == 'image/png')
+							{
+								data = this.extractGraphModelFromPng(data);
+							}
+
+							success(new LocalFile(this, data, file.name, null, fileHandle, file, editable));
+						}
+						else
 						{
-							data = this.extractGraphModelFromPng(data);
+							this.openFileHandle(e.target.result, file.name, file, false, fileHandle, editable);
 						}
-
-						success(new LocalFile(this, data, file.name, null, fileHandle, file));
 					}
-					else
+					catch(e)
 					{
-						this.openFileHandle(e.target.result, file.name, file, false, fileHandle);
+						error(e);
 					}
-				}
-				catch(e)
+				});
+
+				fileHandle.createWritable().then(mxUtils.bind(this, function(writable)
 				{
-					error(e);
-				}
+					doSuccess(true);
+				}), mxUtils.bind(this, function(e)
+				{
+					doSuccess(false);
+				}));
 			});
 
 			reader.onerror = error;
@@ -4566,6 +4578,7 @@ App.prototype.saveFile = function(forceDialog, success)
 				file.fileHandle = fileHandle;
 				file.title = desc.name;
 				file.desc = desc;
+				file.editable = null;
 				this.save(desc.name, done);
 			}), null, this.createFileSystemOptions(file.getTitle()));
 		}

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

@@ -1273,13 +1273,23 @@ var CreateGraphDialog = function(editorUi, title, type)
 		graph.view.setTranslate(20, 20);
 		graph.border = 20;
 		graph.panningHandler.useLeftButtonForPanning = true;
+
+		// Fixes in-place editor position
+	    if (mxClient.IS_SVG && graph.view.getDrawPane() != null)
+		{
+			var root = graph.view.getDrawPane().ownerSVGElement;
+
+			if (root != null)
+			{
+				root.style.position = 'absolute';
+			}
+		}
 
 		var vertexStyle = 'rounded=1;';
 		var edgeStyle = 'curved=1;';
 		var startStyle = 'ellipse';
 
 		// FIXME: Does not work in iPad
-		var mxCellRendererInstallCellOverlayListeners = mxCellRenderer.prototype.installCellOverlayListeners;
 		graph.cellRenderer.installCellOverlayListeners = function(state, overlay, shape)
 		{
 			mxCellRenderer.prototype.installCellOverlayListeners.apply(this, arguments);
@@ -1338,7 +1348,7 @@ var CreateGraphDialog = function(editorUi, title, type)
 					v2 = graph.insertVertex(parent, null, 'Entry', geo.x, geo.y, 80, 30, vertexStyle);
 					addOverlay(v2);
 					graph.view.refresh(v2);
-					var e1 = graph.insertEdge(parent, null, '', cell, v2, edgeStyle);
+					graph.insertEdge(parent, null, '', cell, v2, edgeStyle);
 				}, function()
 				{
 					graph.scrollCellToVisible(v2);
@@ -3485,10 +3495,10 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 
 	function create()
 	{
-		if (templateXml == lastAiXml)
+		if (templateXml != null && templateXml == lastAiXml)
 		{
 			EditorUi.logEvent({category: 'OPENAI-DIAGRAM',
-				 action: 'templateUsed',
+				 action: 'templateGenerated',
 				 label: lastAiTitle});
 		}
 
@@ -3834,7 +3844,7 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 		editorUi.generateOpenAiMermaidDiagram(prompt,
 			function(mermaidData, imageData, w, h)
 			{
-				if (selectedElt == generateElt)
+				if (selectedElt == generateElt && generateInput.style.visibility == 'hidden')
 				{
 					generateBackground = 'url(' + 'data:image/svg+xml;base64,' +
 						imageData.substring(imageData.indexOf(',') + 1) + ')';
@@ -13310,63 +13320,58 @@ var FilePropertiesDialog = function(editorUi, publicLink)
 			}
 		};
 	};
+
+	var initialLocked = (file != null) ? file.isLocked() : false;
 
-	if (urlParams['test'] == '1')
-	{
-		var initialLocked = (file != null) ? file.isLocked() : false;
-
-		row = document.createElement('tr');
-		td = document.createElement('td');
-		td.style.whiteSpace = 'nowrap';
-		td.style.overflow = 'hidden';
-		td.style.textOverflow = 'ellipsis';
-		td.style.fontSize = '10pt';
+	row = document.createElement('tr');
+	td = document.createElement('td');
+	td.style.whiteSpace = 'nowrap';
+	td.style.overflow = 'hidden';
+	td.style.textOverflow = 'ellipsis';
+	td.style.fontSize = '10pt';
 
-		// TODO: Use mxResources.get('locked')
-		mxUtils.write(td, 'Locked' + ':');
-
-		row.appendChild(td);
+	mxUtils.write(td, mxResources.get('locked') + ':');
+	row.appendChild(td);
 
-		var lockedInput = document.createElement('input');
-		lockedInput.setAttribute('type', 'checkbox');
-		
-		if (initialLocked)
-		{
-			lockedInput.setAttribute('checked', 'checked');
-			lockedInput.defaultChecked = true;
-		}
-		
-		td = document.createElement('td');
-		td.style.whiteSpace = 'nowrap';
-		td.appendChild(lockedInput);
-		row.appendChild(td);
-		tbody.appendChild(row);
+	var lockedInput = document.createElement('input');
+	lockedInput.setAttribute('type', 'checkbox');
+
+	if (initialLocked)
+	{
+		lockedInput.setAttribute('checked', 'checked');
+		lockedInput.defaultChecked = true;
+	}
+
+	td = document.createElement('td');
+	td.style.whiteSpace = 'nowrap';
+	td.appendChild(lockedInput);
+	row.appendChild(td);
+	tbody.appendChild(row);
 
-		this.init = function()
-		{
-			lockedInput.focus();
-		};
+	this.init = function()
+	{
+		lockedInput.focus();
+	};
 
-		addApply(function(success, error)
+	addApply(function(success, error)
+	{
+		if (editorUi.fileNode != null && initialLocked != lockedInput.checked)
 		{
-			if (editorUi.fileNode != null && initialLocked != lockedInput.checked)
+			window.setTimeout(function()
 			{
-				window.setTimeout(function()
+				if (file != null)
 				{
-					if (file != null)
-					{
-						file.setLocked(lockedInput.checked);
-					}
+					file.setLocked(lockedInput.checked);
+				}
 
-					success();
-				}, 0);
-			}
-			else
-			{
 				success();
-			}
-		});
-	}
+			}, 0);
+		}
+		else
+		{
+			success();
+		}
+	});
 
 	if (isPng || isSvg)
 	{

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

@@ -1839,9 +1839,8 @@ DrawioFile.prototype.addAllSavedStatus = function(status)
 		var rev = (this.isRevisionHistorySupported() && status != mxUtils.htmlEntities(
 			mxResources.get(this.savingStatusKey)) + '...') ? 'data-action="revisionHistory" ' : '';
 		this.ui.editor.setStatus('<div ' + rev + 'title="'+ status + '">' + status +
-			(this.isLocked() && Editor.lockedImage != null ?
-			' <img class="geAdaptiveAsset" data-action="properties" style="margin-left:4px;" src="' +
-					Editor.lockedImage + '"/>' : '') + '</div>');
+			(this.isLocked() ? ' <img class="geToolbarButton geAdaptiveAsset" data-action="properties" ' +
+			'style="margin-left:4px;flex-shrink:0;" src="' + Editor.lockedImage + '"/>' : '') + '</div>');
 	}
 };
 

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

@@ -592,9 +592,8 @@ DrawioFileSync.prototype.updateStatus = function()
 				(!this.file.isEditable() ? '<div class="geStatusBox" title="' +
 					mxUtils.htmlEntities(mxResources.get('readOnly')) + '">' +
 					mxUtils.htmlEntities(mxResources.get('readOnly')) + '</div>' :
-				(this.file.isLocked() && Editor.lockedImage != null ?
-				' <img class="geAdaptiveAsset" data-action="properties" style="margin-left:4px;" src="' +
-					Editor.lockedImage + '"/>' : '')) +
+				(this.file.isLocked() ? ' <img class="geToolbarButton geAdaptiveAsset" data-action="properties" ' +
+					'style="margin-left:4px;flex-shrink:0;" src="' + Editor.lockedImage + '"/>' : '')) +
 				(status != null ? '<div class="geStatusBox" title="' + mxUtils.htmlEntities(status) + '">' +
 					mxUtils.htmlEntities(status) + '</div>' : '') +
 				((msg != null) ? ' <div class="geStatusBox" data-effect="fade" title="' + mxUtils.htmlEntities(msg) + '">' +

src/main/webapp/js/diagramly/DriveClient.js

@@ -1305,6 +1305,39 @@ DriveClient.prototype.getXmlFile = function(resp, success, error, ignoreMime, re
 	}
 };
 
+/**
+ * Returns the checksum stored in the properties of the given file.
+ */
+DriveClient.prototype.getStoredChecksum = function(file)
+{
+	var checksum = null;
+
+	if (file.desc != null && file.desc.properties != null)
+	{
+		for (var i = 0; i < file.desc.properties.length; i++)
+		{
+			if (file.desc.properties[i].key == 'checksum')
+			{
+				var temp = file.desc.properties[i].value;
+
+				if (temp != null && temp.length > 0)
+				{
+					var tokens = temp.split(':');
+
+					if (tokens.length == 2)
+					{
+						checksum = tokens[1];
+					}
+				}
+
+				break;
+			}
+		}
+	}
+
+	return checksum;
+};
+
 /**
  * Translates this point by the given vector.
  * 
@@ -1649,6 +1682,11 @@ DriveClient.prototype.saveFile = function(file, revision, success, errFn, noChec
 													etag = resp.etag;
 												}
 
+												if (reasons.length == 0)
+												{
+													reasons.push(mxResources.get('unknownError'));
+												}
+
 												var temp = reasons.join(', ');
 
 												if (retryCount < this.staleEtagMaxRetries)
@@ -1674,11 +1712,16 @@ DriveClient.prototype.saveFile = function(file, revision, success, errFn, noChec
 													// Logs failed save
 													try
 													{
+														var oldChecksum = this.getStoredChecksum(file);
+
 														EditorUi.logError('Saving to Google Drive failed',
-															null, 'id-' + file.desc.id +
+															null, 'id-' + file.desc.id + 
 															'-from-' + head0 + '.' + mod0 + '-' + this.ui.hashValue(etag0) +
 															'-to-' + resp.headRevisionId + '.' + resp.modifiedDate + '-' +
-															this.ui.hashValue(resp.etag) + ((temp.length > 0) ? '-errors-' + temp : ''),
+															this.ui.hashValue(resp.etag) +
+															((oldChecksum != null) ? '-old-checksum_' + oldChecksum : '') +
+															((checksum != null) ? '-new-checksum_' + checksum : '') +
+															((temp.length > 0) ? '-errors-' + temp : ''),
 															'user-' + ((this.user != null) ? this.user.id : 'nouser') +
 															((file.sync != null) ? '-client_' + file.sync.clientId : '-nosync') +
 															'-retries-' + retryCount);
@@ -2003,7 +2046,7 @@ DriveClient.prototype.saveFile = function(file, revision, success, errFn, noChec
 						{
 							criticalError(e);
 						}
-					})))
+					}), 20))
 				{
 					// If-branch
 					doSave(null, null, file.constructor != DriveLibrary);

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

@@ -468,7 +468,9 @@
         {name: 'fillOpacity', dispName: 'Fill Opacity', type: 'int', min: 0, max: 100, defVal: 100},
         {name: 'strokeOpacity', dispName: 'Stroke Opacity', type: 'int', min: 0, max: 100, defVal: 100},
         {name: 'startFill', dispName: 'Start Fill', type: 'bool', defVal: true},
+		{name: 'startFillColor', dispName: 'Start Fill Color', type: 'color', defVal: null},
         {name: 'endFill', dispName: 'End Fill', type: 'bool', defVal: true},
+		{name: 'endFillColor', dispName: 'End Fill Color', type: 'color', defVal: null},
         {name: 'perimeterSpacing', dispName: 'Terminal Spacing', type: 'float', defVal: 0},
         {name: 'anchorPointDirection', dispName: 'Anchor Direction', type: 'bool', defVal: true},
         {name: 'snapToPoint', dispName: 'Snap to Point', type: 'bool', defVal: false},