21.1.4 release

ChangeLog

@@ -1,3 +1,16 @@
+04-APR-2023: 21.1.4
+
+- Remerge and release of dev branch
+
+03-APR-2023: 21.1.3
+
+- Adds zoom and border properties for XML+SVG files
+- Adds Clear Formatting button in Text style panel
+- Removes fontSource cell styles in clear formatting
+- Fixes possible resolving of defaults in stylesheet
+- Conf Cloud: Support proper versioning for embed -> upload [DID-7828]
+- Enables compression with compressXml [drawio-3484]
+
 29-MAR-2023: 21.1.2
 
 - Fixes handling of ctrl+shift+v on Mac [drawio-291]

VERSION

@@ -1 +1 @@
-21.1.2
+21.1.4

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

@@ -3873,8 +3873,8 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 	// Adds local basic templates
 	categories['basic'] = [{title: 'blankDiagram', select: true}];
 	var templates = categories['basic'];
-
-	if (editorUi.getServiceName() == 'draw.io')
+	
+	if (editorUi.isExternalDataComms() && editorUi.getServiceName() == 'draw.io')
 	{
 		categories['smartTemplate'] = {content: createSmartTemplateContent()};
 	}
@@ -12853,9 +12853,10 @@ var FilePropertiesDialog = function(editorUi)
 	var filename = (file != null && file.getTitle() != null) ?
 		file.getTitle() : editorUi.defaultFilename;
 	var isPng = /(\.png)$/i.test(filename);
+	var isSvg = /(\.svg)$/i.test(filename);
 	var apply = function() { };
 
-	if (isPng)
+	if (isPng || isSvg)
 	{
 		var scale = 1;
 		var border = 0;
@@ -12886,7 +12887,7 @@ var FilePropertiesDialog = function(editorUi)
 		var zoomInput = document.createElement('input');
 		zoomInput.setAttribute('value', (scale * 100) + '%');
 		zoomInput.style.marginLeft = '4px';
-		zoomInput.style.width ='180px';
+		zoomInput.style.width = '120px';
 
 		td = document.createElement('td');
 		td.style.whiteSpace = 'nowrap';
@@ -12906,7 +12907,7 @@ var FilePropertiesDialog = function(editorUi)
 		var borderInput = document.createElement('input');
 		borderInput.setAttribute('value', border);
 		borderInput.style.marginLeft = '4px';
-		borderInput.style.width ='180px';
+		borderInput.style.width = '120px';
 
 		td = document.createElement('td');
 		td.style.whiteSpace = 'nowrap';
@@ -12995,6 +12996,8 @@ var FilePropertiesDialog = function(editorUi)
 		};
 	}
 
+	console.log('here', file.isRealtimeOptional(), file);
+
 	if (file != null && file.isRealtimeOptional())
 	{
 		row = document.createElement('tr');

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

@@ -1854,6 +1854,7 @@
 
 			if (config.compressXml != null)
 			{
+				Editor.defaultCompressed = config.compressXml;
 				Editor.compressXml = config.compressXml;
 			}
 

src/main/webapp/js/diagramly/EditorUi.js

@@ -1214,8 +1214,11 @@
 				{
 					url = null;
 				}
+
+				var props = this.getSvgFileProperties(fileNode);
 
-				xml = this.getEmbeddedSvg(xml, graph, url, null, embeddedCallback, ignoreSelection, redirect);
+				xml = this.getEmbeddedSvg(xml, graph, url, null, embeddedCallback, ignoreSelection, redirect,
+					null, null, props.scale, props.border);
 			}
 
 
@@ -6880,6 +6883,14 @@
 
 		return node;
 	};
+
+	/**
+	 * 
+	 */
+	EditorUi.prototype.getSvgFileProperties = function(node)
+	{
+		return this.getPngFileProperties(node);
+	};
 
 	/**
 	 * 
@@ -8054,6 +8065,47 @@
 
 		fn();
 	};
+
+	/**
+	 * Generates a Mermaid image.
+	 */
+	EditorUi.prototype.extractMermaidMindmap = function(lines)
+	{
+		if (lines[1].indexOf('orientation') > 0)
+		{
+			lines.splice(1, 1);
+		}
+
+		while (lines.length > 1 && lines[1] == '')
+		{
+			lines.splice(1, 1);
+		}
+
+		var newLines = [];
+
+		// Removes dashes in entries
+		for (var i = 2; i < lines.length; i++)
+		{
+			var temp = mxUtils.trim(lines[i]);
+
+			if (temp != '[' && temp != ']' &&
+				temp.substring(0, 2) != '%%' &&
+				temp.substring(0, 2) != '##')
+			{
+				temp = lines[i].replace(/[-|>]/g, ' ')
+
+				if (mxUtils.trim(temp) != '' &&
+					temp.charAt(0) == ' ')
+				{
+					newLines.push(temp);
+				}
+			}
+		}
+
+		// Removes indentiation for root element
+		return 'mindmap\nroot((' + mxUtils.trim(lines[1]) +
+			'))\n' + newLines.join('\n');
+	};
 
 	/**
 	 * Generates a Mermaid image.
@@ -8089,6 +8141,18 @@
 		// Validates diagram type on first line
 		var type = lines[0].split(' ')[0].replace(/:$/, '');
 
+		try
+		{
+			if (type == 'mindmap' && lines.length > 2)
+			{
+				text = this.extractMermaidMindmap(lines);
+			}
+		}
+		catch (e)
+		{
+			// ignore
+		}
+
 		if (type.charAt(0) != '@' && mxUtils.indexOf(
 			EditorUi.mermaidDiagramTypes, type) < 0)
 		{
@@ -8101,7 +8165,7 @@
 
 		return text;
 	};
-
+	
 	/**
 	 * Generates a Mermaid image.
 	 */

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

@@ -348,7 +348,7 @@
 		editorUi.actions.addAction('properties...', function()
 		{
 			var dlg = new FilePropertiesDialog(editorUi);
-			editorUi.showDialog(dlg.container, 320, 120, true, true);
+			editorUi.showDialog(dlg.container, 320, 140, true, true);
 			dlg.init();
 		}).isEnabled = isGraphEnabled;
 
@@ -4644,8 +4644,7 @@
 					var filename = (file.getTitle() != null) ?
 						file.getTitle() : editorUi.defaultFilename;
 
-					if (!/(\.html)$/i.test(filename) &&
-						!/(\.svg)$/i.test(filename))
+					if (!/(\.html)$/i.test(filename))
 					{
 						this.addMenuItems(menu, ['-', 'properties']);
 					}
@@ -4881,8 +4880,7 @@
 						file.getTitle() : editorUi.defaultFilename;
 
 					if ((file.constructor == DriveFile && file.sync != null &&
-						file.sync.isConnected()) || (!/(\.html)$/i.test(filename) &&
-						!/(\.svg)$/i.test(filename)))
+						file.sync.isConnected()) || !/(\.html)$/i.test(filename))
 					{
 						this.addMenuItems(menu, ['properties'], parent);
 					}
@@ -5008,8 +5006,7 @@
 						file.getTitle() : editorUi.defaultFilename;
 
 					if ((file.constructor == DriveFile && file.sync != null &&
-						file.sync.isConnected()) || (!/(\.html)$/i.test(filename) &&
-						!/(\.svg)$/i.test(filename)))
+						file.sync.isConnected()) || !/(\.html)$/i.test(filename))
 					{
 						this.addMenuItems(menu, ['-', 'properties']);
 					}

src/main/webapp/js/grapheditor/Actions.js

@@ -939,21 +939,7 @@ Actions.prototype.init = function()
 
 					if (html == '1' && value == null)
 			    	{
-			    		var label = graph.convertValueToString(state.cell);
-
-			    		if (mxUtils.getValue(state.style, 'nl2Br', '1') != '0')
-						{
-							// Removes newlines from HTML and converts breaks to newlines
-							// to match the HTML output in plain text
-							label = label.replace(/\n/g, '').replace(/<br\s*.?>/g, '\n');
-						}
-
-			    		// Removes HTML tags
-		    			var temp = document.createElement('div');
-		    			temp.innerHTML = Graph.sanitizeHtml(label);
-		    			label = mxUtils.extractTextWithWhitespace(temp.childNodes);
-
-						graph.cellLabelChanged(state.cell, label);
+						graph.removeTextStyleForCell(state.cell);
 						graph.setCellStyles('html', value, [cells[i]]);
 			    	}
 					else if (html == '0' && value == '1')
@@ -1374,6 +1360,26 @@ Actions.prototype.init = function()
 	this.addAction('borderColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BORDERCOLOR); });
 
 	// Format actions
+	this.addAction('removeFormat', function()
+	{
+		if (graph.isEnabled() && !graph.isSelectionEmpty() && !graph.isEditing())
+		{
+			graph.getModel().beginUpdate();
+			try
+			{
+				var cells = graph.getSelectionCells();
+
+				for (var i = 0; i < cells.length; i++)
+				{
+					graph.removeTextStyleForCell(cells[i], true);
+				}
+			}
+			finally
+			{
+				graph.getModel().endUpdate();
+			}
+		}
+	});
 	this.addAction('vertical', function() { ui.menus.toggleStyle(mxConstants.STYLE_HORIZONTAL, true); });
 	this.addAction('shadow', function() { ui.menus.toggleStyle(mxConstants.STYLE_SHADOW); });
 	this.addAction('solid', function()

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

@@ -269,6 +269,17 @@ Editor.isPngData = function(data)
 		data.charCodeAt(5) == 10 && data.charCodeAt(6) == 26 && data.charCodeAt(7) == 10;
 };
 
+/**
+ * Converts HTML to plain text.
+ */
+Editor.convertHtmlToText = function(label)
+{
+	var temp = document.createElement('div');
+	temp.innerHTML = Graph.sanitizeHtml(label);
+
+	return mxUtils.extractTextWithWhitespace(temp.childNodes);
+};
+
 /**
  * Extracts the XML from the compressed or non-compressed text chunk.
  */

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

@@ -2837,8 +2837,35 @@ TextFormatPanel.prototype.init = function()
 {
 	this.container.style.borderBottom = 'none';
 	this.addFont(this.container);
+
+
+
+	// Allows to lock/unload button to be added
+	this.container.appendChild(this.addFontOps(this.createPanel()));
+
+};
+
+
+/**
+ * 
+ */
+TextFormatPanel.prototype.addFontOps = function(div)
+{
+	var ui = this.editorUi;
+	div.style.paddingTop = '8px';
+	div.style.paddingBottom = '6px';
+
+	var count = this.addActions(div, ['removeFormat']);
+
+	if (count == 0)
+	{
+		div.style.display = 'none';
+	}
+
+	return div;
 };
 
+
 /**
  * Adds the label menu items to the given menu and parent.
  */

src/main/webapp/js/grapheditor/Graph.js

@@ -6447,6 +6447,52 @@ HoverIcons.prototype.setCurrentState = function(state)
 	this.currentState = state;
 };
 
+/**
+ * Returns true if the given cell is a table.
+ */
+Graph.prototype.removeTextStyleForCell = function(cell, removeCellStyles)
+{
+	var style = this.getCurrentCellStyle(cell);
+	var result = false;
+
+	this.getModel().beginUpdate();
+	try
+	{
+		if (mxUtils.getValue(style, 'html', '0') == '1')
+		{
+			var label = this.convertValueToString(cell);
+
+			if (mxUtils.getValue(style, 'nl2Br', '1') != '0')
+			{
+				// Removes newlines from HTML and converts breaks to newlines
+				// to match the HTML output in plain text
+				label = label.replace(/\n/g, '').replace(/<br\s*.?>/g, '\n');
+			}
+
+			label = Editor.convertHtmlToText(label);
+			this.cellLabelChanged(cell, label);
+			result = true;
+		}
+
+		if (removeCellStyles)
+		{
+			this.setCellStyles('fontSource', null, [cell]);
+			this.setCellStyles(mxConstants.STYLE_FONTFAMILY, null, [cell]);
+			this.setCellStyles(mxConstants.STYLE_FONTSIZE, null, [cell]);
+			this.setCellStyles(mxConstants.STYLE_FONTSTYLE, null, [cell]);
+			this.setCellStyles(mxConstants.STYLE_FONTCOLOR, null, [cell]);
+			this.setCellStyles(mxConstants.STYLE_LABEL_BORDERCOLOR, null, [cell]);
+			this.setCellStyles(mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null, [cell]);
+		}
+	}
+	finally
+	{
+		this.getModel().endUpdate();
+	}
+
+	return result;
+};
+
 /**
  * Returns true if the given cell is a table.
  */