20.5.3 release

ChangeLog

@@ -1,3 +1,10 @@
+06-NOV-2022: 20.5.3
+
+- Uses static Graph.sanitizeHtml
+- Sanitizes status bar content
+- Fixes icon stroke width
+- Shows crop option only if image style is used
+
 04-NOV-2022: 20.5.2
 
 - Fixes infinite redirection in embed + proxy (https://huntr.dev/bounties/28d79d99-81a4-46f3-9455-89658bca424b/)

VERSION

@@ -1 +1 @@
-20.5.2
+20.5.3

src/main/webapp/connect/common/js/mxReader.js

@@ -239,7 +239,7 @@ DrawioViewer.prototype.init = function()
 			}
 			else
 			{
-				result = state.view.graph.sanitizeHtml(result);
+				result = Graph.sanitizeHtml(result);
 			}
 		}
 		

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

@@ -7401,7 +7401,7 @@ var FindWindow = function(ui, x, y, w, h, withReplace)
 				{
 					if (state.style != null && state.style['html'] == '1')
 					{
-						tmp.innerHTML = graph.sanitizeHtml(graph.getLabel(state.cell));
+						tmp.innerHTML = Graph.sanitizeHtml(graph.getLabel(state.cell));
 						label = mxUtils.extractTextWithWhitespace([tmp]);
 					}
 					else

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

@@ -6964,7 +6964,7 @@
 		if (this.isHtmlLabel(cell))
 		{
 			var temp = document.createElement('div');
-			temp.innerHTML = this.sanitizeHtml(this.getLabel(cell));
+			temp.innerHTML = Graph.sanitizeHtml(this.getLabel(cell));
 			var links = temp.getElementsByTagName('a');
 			var changed = false;
 			

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

@@ -7298,7 +7298,7 @@
 		
 		if (graph.isHtmlLabel(cell))
 		{
-			temp.innerHTML = graph.sanitizeHtml(graph.getLabel(cell));
+			temp.innerHTML = Graph.sanitizeHtml(graph.getLabel(cell));
 			var links = temp.getElementsByTagName('a');
 			var changed = false;
 			
@@ -9736,9 +9736,27 @@
 					{
 						this.addMenuItems(menu, ['delete', '-'], null, evt);
 					}
+					else
+					{
+						this.addPopupMenuArrangeItems(menu, cell, evt);
+					}
 			
-					this.addMenuItems(menu, ['cut', 'copy', 'copyAsImage',
-						'duplicate', '-', 'lockUnlock'], null, evt);
+					this.addMenuItems(menu, ['-', 'cut', 'copy', 'copyAsImage',
+						'duplicate', 'lockUnlock'], null, evt);
+					
+					// Shows crop option for images
+					if (!this.isShowCellEditItems() && graph.getSelectionCount() == 1 &&
+						graph.isCellEditable(cell) && graph.getModel().isVertex(cell))
+					{
+						var state = graph.view.getState(cell);
+					
+						if (state != null && mxUtils.getValue(state.style,
+							mxConstants.STYLE_IMAGE, null) != null)
+						{
+							menu.addSeparator();
+							this.addMenuItem(menu, 'crop', null, evt);
+						}
+					}
 				}
 			};
 
@@ -10187,7 +10205,7 @@
 					    {
 				    		var html = evt.dataTransfer.getData('text/html');
 				    		var div = document.createElement('div');
-				    		div.innerHTML = graph.sanitizeHtml(html);
+				    		div.innerHTML = Graph.sanitizeHtml(html);
 				    		
 				    		// The default is based on the extension
 				    		var asImage = null;
@@ -13462,7 +13480,7 @@
 										if (data != null && data.length > 0)
 										{
 											var div = document.createElement('div');
-								    		div.innerHTML = this.editor.graph.sanitizeHtml(data);
+								    		div.innerHTML = Graph.sanitizeHtml(data);
 		
 								    		// Extracts single image
 								    		var imgs = div.getElementsByTagName('img');
@@ -15497,7 +15515,7 @@
 	
 		    				if (key == 'label')
 		    				{
-		    					label = graph.sanitizeHtml(value);
+		    					label = Graph.sanitizeHtml(value);
 		    				}
 		    				else if (key == 'labelname' && value.length > 0 && value != '-')
 		    				{

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

@@ -942,7 +942,7 @@ Actions.prototype.init = function()
 			    		
 			    		// Removes HTML tags
 		    			var temp = document.createElement('div');
-		    			temp.innerHTML = graph.sanitizeHtml(label);
+		    			temp.innerHTML = Graph.sanitizeHtml(label);
 		    			label = mxUtils.extractTextWithWhitespace(temp.childNodes);
 		    			
 						graph.cellLabelChanged(state.cell, label);
@@ -960,7 +960,7 @@ Actions.prototype.init = function()
 			    			label = label.replace(/\n/g, '<br/>');
 						}
 			    		
-			    		graph.cellLabelChanged(state.cell, graph.sanitizeHtml(label));
+			    		graph.cellLabelChanged(state.cell, Graph.sanitizeHtml(label));
 			    		graph.setCellStyles('html', value, [cells[i]]);
 			    	}
 				}

src/main/webapp/js/grapheditor/EditorUi.js

@@ -4680,7 +4680,7 @@ EditorUi.prototype.createStatusContainer = function()
  */
 EditorUi.prototype.setStatusText = function(value)
 {
-	this.statusContainer.innerHTML = value;
+	this.statusContainer.innerHTML = Graph.sanitizeHtml(value);
 
 	// Wraps simple status messages in a div for styling
 	if (this.statusContainer.getElementsByTagName('div').length == 0 &&
@@ -4736,7 +4736,7 @@ EditorUi.prototype.createStatusDiv = function(value)
 {
 	var div = document.createElement('div');
 	div.setAttribute('title', value);
-	div.innerHTML = value;
+	div.innerHTML = Graph.sanitizeHtml(value);
 
 	return div;
 };
@@ -5235,7 +5235,7 @@ EditorUi.prototype.parseHtmlData = function(data)
 		var hasMeta = data.substring(0, 6) == '<meta ';
 		elt = document.createElement('div');
 		elt.innerHTML = ((hasMeta) ? '<meta charset="utf-8">' : '') +
-			this.editor.graph.sanitizeHtml(data);
+			Graph.sanitizeHtml(data);
 		asHtml = true;
 		
 		// Workaround for innerText not ignoring style elements in Chrome

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

@@ -4554,7 +4554,7 @@ StyleFormatPanel.prototype.addEditOps = function(div)
 				var editOption = document.createElement('option');
 				editOption.setAttribute('value', ops[i]);
 				var title = mxResources.get(ops[i]);
-				mxUtils.write(editOption, title + '...');
+				mxUtils.write(editOption, title + ((ops[i] == 'edit') ? '' : '...'));
 
 				if (action != null && action.shortcut != null)
 				{
@@ -4580,6 +4580,29 @@ StyleFormatPanel.prototype.addEditOps = function(div)
 					action.funct();
 				}
 			}));
+			
+			if (ss.image && ss.cells.length > 0)
+			{
+				var graph = this.editorUi.editor.graph;
+				var state = graph.view.getState(graph.getSelectionCell());
+
+				if (state != null && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null)
+				{
+					var btn = mxUtils.button(mxResources.get('crop') + '...',
+						mxUtils.bind(this, function(evt)
+					{
+						this.editorUi.actions.get('crop').funct();
+					}));
+
+					btn.setAttribute('title', mxResources.get('editImage'));
+					editSelect.style.width = '104px';
+					btn.style.width = '104px';
+					btn.style.marginLeft = '2px';
+					btn.style.marginBottom = '2px';
+
+					div.appendChild(btn);
+				}
+			}
 		}
 	}
 

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

@@ -740,7 +740,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone)
 			}
 			else
 			{
-				result = state.view.graph.sanitizeHtml(result);
+				result = Graph.sanitizeHtml(result);
 			}
 		}
 		
@@ -12068,7 +12068,7 @@ if (typeof mxVertexHandler !== 'undefined')
 						content = mxUtils.replaceTrailingNewlines(content, '<div><br></div>');
 					}
 					
-				    content = this.graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '').replace(/&lt;br\s*.?&gt;/g, '<br>') : content, true);
+				    content = Graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '').replace(/&lt;br\s*.?&gt;/g, '<br>') : content, true);
 					this.textarea.className = 'mxCellEditor mxPlainTextEditor';
 					
 					var size = mxConstants.DEFAULT_FONTSIZE;
@@ -12102,7 +12102,7 @@ if (typeof mxVertexHandler !== 'undefined')
 				    	content = content.substring(0, content.length - 1);
 				    }
 				    
-					content = this.graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '<br/>') : content, true)
+					content = Graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '<br/>') : content, true)
 					this.textarea.className = 'mxCellEditor geContentEditable';
 					
 					var size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
@@ -12239,7 +12239,7 @@ if (typeof mxVertexHandler !== 'undefined')
 					result = result.replace(/\n/g, '<br/>');
 				}
 				
-				result = this.graph.sanitizeHtml(result, true);
+				result = Graph.sanitizeHtml(result, true);
 				
 				return result;
 			}
@@ -12254,7 +12254,7 @@ if (typeof mxVertexHandler !== 'undefined')
 			}
 			else
 			{
-				var result = this.graph.sanitizeHtml(this.textarea.innerHTML, true);
+				var result = Graph.sanitizeHtml(this.textarea.innerHTML, true);
 	
 				if (mxUtils.getValue(state.style, 'nl2Br', '1') == '1')
 				{

src/main/webapp/js/grapheditor/Menus.js

@@ -1469,8 +1469,18 @@ Menus.prototype.createPopupMenu = function(menu, cell, evt)
 	
 	this.addPopupMenuHistoryItems(menu, cell, evt);
 	this.addPopupMenuEditItems(menu, cell, evt);
-	this.addPopupMenuStyleItems(menu, cell, evt);
-	this.addPopupMenuArrangeItems(menu, cell, evt);
+
+	
+	if (this.isShowStyleItems())
+	{
+		this.addPopupMenuStyleItems(menu, cell, evt);
+	}
+
+	if (this.isShowArrangeItems())
+	{
+		this.addPopupMenuArrangeItems(menu, cell, evt);
+	}
+
 	this.addPopupMenuCellItems(menu, cell, evt);
 	this.addPopupMenuSelectionItems(menu, cell, evt);
 };
@@ -1502,8 +1512,7 @@ Menus.prototype.addPopupMenuEditItems = function(menu, cell, evt)
 			this.addMenuItems(menu, ['delete', '-', ], null, evt);
 		}
 
-		this.addMenuItems(menu, ['cut', 'copy', 'duplicate',
-			'-', 'lockUnlock'], null, evt);
+		this.addMenuItems(menu, ['cut', 'copy', 'duplicate', 'lockUnlock'], null, evt);
 	}
 };
 
@@ -1520,16 +1529,13 @@ Menus.prototype.isShowStyleItems = function()
  */
 Menus.prototype.addPopupMenuStyleItems = function(menu, cell, evt)
 {
-	if (this.isShowStyleItems())
+	if (this.editorUi.editor.graph.getSelectionCount() == 1)
 	{
-		if (this.editorUi.editor.graph.getSelectionCount() == 1)
-		{
-			this.addMenuItems(menu, ['-', 'setAsDefaultStyle'], null, evt);
-		}
-		else if (this.editorUi.editor.graph.isSelectionEmpty())
-		{
-			this.addMenuItems(menu, ['-', 'clearDefaultStyle'], null, evt);
-		}
+		this.addMenuItems(menu, ['-', 'setAsDefaultStyle'], null, evt);
+	}
+	else if (this.editorUi.editor.graph.isSelectionEmpty())
+	{
+		this.addMenuItems(menu, ['-', 'clearDefaultStyle'], null, evt);
 	}
 };
 
@@ -1546,29 +1552,23 @@ Menus.prototype.isShowArrangeItems = function()
  */
 Menus.prototype.addPopupMenuArrangeItems = function(menu, cell, evt)
 {
-	if (this.isShowArrangeItems())
+	var graph = this.editorUi.editor.graph;
+	
+	// Shows group actions
+	if (graph.getSelectionCount() > 1 || (graph.getSelectionCount() > 0 &&
+		!graph.getModel().isEdge(cell) && !graph.isSwimlane(cell) &&
+		graph.getModel().getChildCount(cell) > 0 && graph.isCellEditable(cell)))
 	{
-		var graph = this.editorUi.editor.graph;
+		this.addMenuItems(menu, ['group', 'ungroup'], null, evt);
+	}
+	
+	if (graph.getEditableCells(graph.getSelectionCells()).length > 0)
+	{
+		this.addMenuItems(menu, ['-', 'toFront', 'toBack'], null, evt);
 		
-		if (graph.getEditableCells(graph.getSelectionCells()).length > 0)
+		if (this.isShowCellEditItems() && graph.getSelectionCount() == 1)
 		{
-			this.addMenuItems(menu, ['-', 'toFront', 'toBack'], null, evt);
-			
-			if (graph.getSelectionCount() == 1)
-			{
-				this.addMenuItems(menu, ['bringForward', 'sendBackward'], null, evt);
-			}
-		}
-
-		if (graph.getSelectionCount() > 1)	
-		{
-			this.addMenuItems(menu, ['-', 'group'], null, evt);
-		}
-		else if (graph.getSelectionCount() == 1 && !graph.getModel().isEdge(cell) &&
-			!graph.isSwimlane(cell) && graph.getModel().getChildCount(cell) > 0 &&
-			graph.isCellEditable(cell))
-		{
-			this.addMenuItems(menu, ['-', 'ungroup'], null, evt);
+			this.addMenuItems(menu, ['bringForward', 'sendBackward'], null, evt);
 		}
 	}
 };
@@ -1639,8 +1639,10 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt)
 		{
 			this.addMenuItems(menu, ['-', 'clearWaypoints'], null, evt);
 		}
-	
-		if (graph.getSelectionCount() == 1 && graph.isCellEditable(cell))
+		
+		if (this.isShowCellEditItems() &&
+			graph.getSelectionCount() == 1 &&
+			graph.isCellEditable(cell))
 		{
 			this.addPopupMenuCellEditItems(menu, cell, evt);
 		}
@@ -1660,25 +1662,22 @@ Menus.prototype.isShowCellEditItems = function()
  */
 Menus.prototype.addPopupMenuCellEditItems = function(menu, cell, evt, parent)
 {
-	if (this.isShowCellEditItems())
+	var graph = this.editorUi.editor.graph;
+	var state = graph.view.getState(cell);
+	this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], parent, evt);
+	
+	// Shows edit image action if there is an image in the style
+	if (graph.getModel().isVertex(cell) && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null)
 	{
-		var graph = this.editorUi.editor.graph;
-		var state = graph.view.getState(cell);
-		this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], parent, evt);
-		
-		// Shows edit image action if there is an image in the style
-		if (graph.getModel().isVertex(cell) && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null)
-		{
-			menu.addSeparator();
-			this.addMenuItem(menu, 'image', parent, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...';
-			this.addMenuItem(menu, 'crop', parent, evt);
-		}
+		menu.addSeparator();
+		this.addMenuItem(menu, 'image', parent, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...';
+		this.addMenuItem(menu, 'crop', parent, evt);
+	}
 
-		if ((graph.getModel().isVertex(cell) && graph.getModel().getChildCount(cell) == 0)
-				|| graph.isContainer(cell)) //Allow vertex only excluding group (but allowing container [e.g, swimlanes])
-		{
-			this.addMenuItem(menu, 'editConnectionPoints', parent, evt);
-		}
+	if ((graph.getModel().isVertex(cell) && graph.getModel().getChildCount(cell) == 0)
+			|| graph.isContainer(cell)) //Allow vertex only excluding group (but allowing container [e.g, swimlanes])
+	{
+		this.addMenuItem(menu, 'editConnectionPoints', parent, evt);
 	}
 };
 

src/main/webapp/plugins/props.js

@@ -105,7 +105,7 @@ Draw.loadPlugin(function(ui) {
 	
 			if (attrs != null)
 			{
-				var label = graph.sanitizeHtml(graph.getLabel(cell));
+				var label = Graph.sanitizeHtml(graph.getLabel(cell));
 				
 				if (label != null && label.length > 0)
 				{
@@ -137,7 +137,7 @@ Draw.loadPlugin(function(ui) {
 				
 				if (label != '')
 				{
-					div.innerHTML = '<h1>' + graph.sanitizeHtml(label) + '</h1>';
+					div.innerHTML = '<h1>' + Graph.sanitizeHtml(label) + '</h1>';
 				}
 				else
 				{