15.8.7 release

ChangeLog

@@ -1,3 +1,15 @@
+29-NOV-2021: 15.8.7
+
+- Fixed string replace when label has a new line https://github.com/jgraph/drawio/issues/2015
+- Removes dots fill pattern https://github.com/jgraph/drawio/issues/2443
+- Fixes parsing of base64 PNG with XML and no prefix
+- Hides empty table section in Arrange panel
+- Ignores cached style in table background
+- Shows error if popup is blocked in Google Drive
+- Adds 2px between scrollbar and elements
+- Uses rgb for default colors in output https://github.com/jgraph/drawio/issues/2445
+- Fixes rgb values in SVG gradient IDs [DID-3797]
+
 24-NOV-2021: 15.8.6
 
 - Adds support for refresh token to github

VERSION

@@ -1 +1 @@
-15.8.6
+15.8.7

etc/notionExtension/contentScript.js

@@ -595,6 +595,22 @@
 		var defs = doc.getElementsByTagName('defs');
 		var style = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
 		style.appendChild(doc.createTextNode(
+			'[stroke="rgb(0, 0, 0)"] {stroke: #f0f0f0}\n' +
+			'[stroke="rgb(255, 255, 255)"] {stroke: ' + backgroundColor + '}\n' +
+			'[fill="rgb(0, 0, 0)"] {fill: #f0f0f0}\n' +
+			'[fill="rgb(255, 255, 255)"] {fill: ' + backgroundColor + '}\n' +
+			'g[fill="rgb(0, 0, 0)"] text {fill: #f0f0f0}\n' +
+			'div[data-drawio-colors*="color: rgb(0, 0, 0)"] div ' +
+			'{color: #f0f0f0 !important;}\n' +
+			'div[data-drawio-colors*="background-color: rgb(255, 255, 255)"] div ' +
+			'{background-color: ' + backgroundColor + '  !important;}' +
+			'div[data-drawio-colors*="border-color: rgb(0, 0, 0)"] div ' +
+			'{border-color: #f0f0f0  !important;}' +
+			'div[data-drawio-colors*="background-color: rgb(255, 255, 255)"] ' +
+			'{background-color: ' + backgroundColor + '  !important;}' +
+			'div[data-drawio-colors*="border-color: rgb(0, 0, 0)"] ' +
+			'{border-color: #f0f0f0  !important;}' +
+			// Invert old rgba output
 			'[stroke="rgba(0, 0, 0, 1)"] {stroke: #f0f0f0}\n' +
 			'[stroke="rgba(255, 255, 255, 1)"] {stroke: ' + backgroundColor + '}\n' +
 			'[fill="rgba(0, 0, 0, 1)"] {fill: #f0f0f0}\n' +

etc/notionExtension/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "draw.io for Notion",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Insert draw.io diagrams in Notion pages and edit them",
   "permissions": [
   	"storage",

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

@@ -4630,9 +4630,9 @@ App.prototype.loadTemplate = function(url, onload, onerror, templateFilename, as
 			}
 			else
 			{
-				if (/(\.png)($|\?)/i.test(filterFn) || this.isPngData(data))
+				if (/(\.png)($|\?)/i.test(filterFn) || Editor.isPngData(data))
 				{
-					data = this.extractGraphModelFromPng(responseData);
+					data = Editor.extractGraphModelFromPng(responseData);
 				}
 				
 				onload(data);

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

@@ -7220,6 +7220,9 @@ var FindWindow = function(ui, x, y, w, h, withReplace)
 			substr = mxUtils.htmlEntities(substr);
 			var tagPos = [], p = -1;
 			
+			//Original position (startIndex) counts for \n which is removed when tags are removed, so handle <br> separately
+			str = str.replace(/<br>/ig, '\n');
+
 			while((p = str.indexOf('<', p + 1)) > -1)
 			{
 				tagPos.push(p);
@@ -7262,7 +7265,7 @@ var FindWindow = function(ui, x, y, w, h, withReplace)
 				tagDiff += tags[i].length;
 			}
 			
-			return newStr;
+			return newStr.replace(/\n/g, '<br>');
 		};
 		
 		var replaceFindBtn = mxUtils.button(mxResources.get('replFind'), function()

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

@@ -282,7 +282,7 @@ DriveClient.prototype.execute = function(fn)
 				fn();
 			}), mxUtils.bind(this, function(resp)
 			{
-				var msg = mxResources.get('cannotLogin');
+				var msg = (resp.message != null) ? resp.message : mxResources.get('cannotLogin');
 				
 				// Handles special domain policy errors
 				if (resp != null && resp.error != null)
@@ -732,6 +732,10 @@ DriveClient.prototype.authorizeStep2 = function(state, immediate, success, error
 				
 					popup.focus();
 				}
+				else if (error != null)
+				{
+					error({message: mxResources.get('allowPopups')});
+				}
 			}
 		}
 	}

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

@@ -932,7 +932,7 @@
 			
 			if (fillStyle == 'auto')
 			{
-				var bg = mxUtils.hex2rgba((this.shape.state != null) ?
+				var bg = mxUtils.hex2rgb((this.shape.state != null) ?
 					this.shape.state.view.graph.shapeBackgroundColor :
 					(Editor.isDarkMode() ? Editor.darkColor : '#ffffff'));
 				fillStyle = (style.fill != null && (gradient != null || (bg != null &&
@@ -5867,8 +5867,8 @@
 	{
 		if (style != null)
 		{
-			var bg = mxUtils.hex2rgba(this.shapeBackgroundColor);
-			var fg = mxUtils.hex2rgba(this.shapeForegroundColor);
+			var bg = mxUtils.hex2rgb(this.shapeBackgroundColor);
+			var fg = mxUtils.hex2rgb(this.shapeForegroundColor);
 
 			this.replaceDefaultColor(style, mxConstants.STYLE_FONTCOLOR, fg);
 			this.replaceDefaultColor(style, mxConstants.STYLE_FILLCOLOR, bg);

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

@@ -708,16 +708,6 @@
 			data.charCodeAt(6) == 0x1A && data.charCodeAt(7) == 0xE1) || (data.charCodeAt(0) == 0x3C && data.charCodeAt(1) == 0x3F &&
 			data.charCodeAt(2) == 0x78 && data.charCodeAt(3) == 0x6D && data.charCodeAt(3) == 0x6C));
 	};
-	
-	/**
-	 * Returns true if the given binary data is a PNG file.
-	 */
-	EditorUi.prototype.isPngData = function(data)
-	{
-		return data.length > 8 && data.charCodeAt(0) == 137 && data.charCodeAt(1) == 80 &&
-			data.charCodeAt(2) == 78 && data.charCodeAt(3) == 71 && data.charCodeAt(4) == 13 &&
-			data.charCodeAt(5) == 10 && data.charCodeAt(6) == 26 && data.charCodeAt(7) == 10;
-	};
 
 	/**
 	 * Adds keyboard shortcuts for page handling.

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

@@ -1767,9 +1767,20 @@ mxStencilRegistry.allowEval = false;
 			this.appIcon.style.webkitAppRegion = 'no-drag';
 		}
 		
-		if (this.menubar != null && uiTheme !== 'atlas')
+		if (this.menubar != null)
 		{
 			this.menubar.container.style.webkitAppRegion = 'no-drag';
+			
+			if (uiTheme == 'atlas')
+			{
+				this.menubar.container.style.width = 'fit-content';
+			}
+			
+			if (this.menubar.langIcon != null)
+			{
+				this.menubar.langIcon.parentNode.removeChild(this.menubar.langIcon);
+				menubarContainer.appendChild(this.menubar.langIcon);
+			}
 		}
 		
 		const remote = require('@electron/remote');

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

@@ -1201,11 +1201,6 @@
 							elt.style.top = '0px';
 						}
 						
-						if (urlParams['winCtrls'] == '1')
-						{
-							elt.style.right = '95px';
-						}
-
 						var icon = document.createElement('div');
 						icon.style.backgroundImage = 'url(' + Editor.globeImage + ')';
 						icon.style.backgroundPosition = 'center center';
@@ -1219,6 +1214,15 @@
 						elt.appendChild(icon);
 						mxUtils.setOpacity(elt, 40);
 						
+						if (urlParams['winCtrls'] == '1')
+						{
+							elt.style.right = '95px';
+							elt.style.width = '19px';
+							elt.style.height = '19px';
+							elt.style.webkitAppRegion = 'no-drag';
+							icon.style.webkitAppRegion = 'no-drag';
+						}
+
 						if (uiTheme == 'atlas' || uiTheme == 'dark')
 						{
 							elt.style.opacity = '0.85';
@@ -1226,6 +1230,7 @@
 						}
 
 						document.body.appendChild(elt);
+						menubar.langIcon = elt;
 					}
 				}
 

src/main/webapp/js/diagramly/Minimal.js

@@ -2433,13 +2433,13 @@ EditorUi.initMinimalTheme = function()
 				pagesVisibleChanged();
 				
 				ui.tabContainer.style.visibility = 'hidden';
-				menubar.style.cssText = 'position:absolute;right:12px;top:10px;height:30px;z-index:1;border-radius:4px;' +
+				menubar.style.cssText = 'position:absolute;right:14px;top:10px;height:30px;z-index:1;border-radius:4px;' +
 					'box-shadow:0px 0px 3px 1px #d1d1d1;padding:6px 0px 6px 6px;border-bottom:1px solid lightgray;' +
 					'text-align:right;white-space:nowrap;overflow:hidden;user-select:none;';
 				toolbar.style.cssText = 'position:absolute;left:10px;top:10px;height:30px;z-index:1;border-radius:4px;' +
 					'box-shadow:0px 0px 3px 1px #d1d1d1;padding:6px;border-bottom:1px solid lightgray;' +
 					'text-align:right;white-space:nowrap;overflow:hidden;user-select:none;';
-				footer.style.cssText = 'position:absolute;right:12px;bottom:12px;height:28px;z-index:1;border-radius:4px;' +
+				footer.style.cssText = 'position:absolute;right:14px;bottom:14px;height:28px;z-index:1;border-radius:4px;' +
 					'box-shadow:0px 0px 3px 1px #d1d1d1;padding:8px;white-space:nowrap;user-select:none;';
 				wrapper.appendChild(toolbar);
 				wrapper.appendChild(footer);

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

@@ -169,9 +169,10 @@ Editor.tableImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
 /**
  * All fill styles supported by rough.js.
  */
-Editor.roughFillStyles = [{val: 'auto', dispName: 'Auto'}, {val: 'hachure', dispName: 'Hachure'}, {val: 'solid', dispName: 'Solid'},
-	{val: 'zigzag', dispName: 'ZigZag'}, {val: 'cross-hatch', dispName: 'Cross Hatch'}, {val: 'dots', dispName: 'Dots'},
-	{val: 'dashed', dispName: 'Dashed'}, {val: 'zigzag-line', dispName: 'ZigZag Line'}];
+Editor.roughFillStyles = [{val: 'auto', dispName: 'Auto'}, {val: 'hachure', dispName: 'Hachure'},
+	{val: 'solid', dispName: 'Solid'}, {val: 'zigzag', dispName: 'ZigZag'},
+	{val: 'cross-hatch', dispName: 'Cross Hatch'}, {val: 'dashed', dispName: 'Dashed'},
+	{val: 'zigzag-line', dispName: 'ZigZag Line'}];
 
 /**
  * Graph themes for the format panel.
@@ -243,6 +244,16 @@ Editor.isPngDataUrl = function(url)
 	return url != null && url.substring(0, 15) == 'data:image/png;'
 };
 
+/**
+ * Returns true if the given binary data is a PNG file.
+ */
+Editor.isPngData = function(data)
+{
+	return data.length > 8 && data.charCodeAt(0) == 137 && data.charCodeAt(1) == 80 &&
+		data.charCodeAt(2) == 78 && data.charCodeAt(3) == 71 && data.charCodeAt(4) == 13 &&
+		data.charCodeAt(5) == 10 && data.charCodeAt(6) == 26 && data.charCodeAt(7) == 10;
+};
+
 /**
  * Extracts the XML from the compressed or non-compressed text chunk.
  */
@@ -252,7 +263,7 @@ Editor.extractGraphModelFromPng = function(data)
 	
 	try
 	{
-		var base64 = data.substring(data.indexOf(';base64,') + 8);
+		var base64 = data.substring(data.indexOf(',') + 1);
 
 		// Workaround for invalid character error in Safari
 		var binary = (window.atob && !mxClient.IS_SF) ? atob(base64) : Base64.decode(base64, true);

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

@@ -4497,7 +4497,7 @@ EditorUi.prototype.pickColor = function(color, apply)
 	var h = 230 + ((Math.ceil(ColorDialog.prototype.presetColors.length / 12) +
 		Math.ceil(ColorDialog.prototype.defaultColors.length / 12)) * 17);
 	
-	var dlg = new ColorDialog(this, color || 'none', function(color)
+	var dlg = new ColorDialog(this, mxUtils.rgba2hex(color) || 'none', function(color)
 	{
 		graph.cellEditor.restoreSelection(selState);
 		apply(color);
@@ -4505,6 +4505,7 @@ EditorUi.prototype.pickColor = function(color, apply)
 	{
 		graph.cellEditor.restoreSelection(selState);
 	});
+	
 	this.showDialog(dlg.container, 230, h, true, false);
 	dlg.init();
 };

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

@@ -1184,7 +1184,6 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol
 			div.style.margin = '3px';
 			div.style.border = '1px solid black';
 			div.style.backgroundColor = (tempColor == 'default') ? defaultColorValue : tempColor;
-
 			btn.innerHTML = '';
 			btn.appendChild(div);
 
@@ -1215,10 +1214,10 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol
 				callbackFn(color == 'null' ? null : color);
 			}
 
+			value = color;
+
 			if (!disableUpdate)
 			{
-				value = color;
-				
 				// Checks if the color value needs to be updated in the model
 				if (forceUpdate || hideCheckbox || getColorFn() != value)
 				{
@@ -1887,6 +1886,10 @@ ArrangePanel.prototype.addTable = function(div)
 			btns[2].style.marginRight = '10px';
 		}
 	}
+	else
+	{
+		div.style.display = 'none';
+	}
 	
 	return div;
 };
@@ -3574,10 +3577,10 @@ TextFormatPanel.prototype.addFont = function(container)
 	arrow.style.cssFloat = 'right';
 	
 	var bgColorApply = null;
-	var currentBgColor = '#ffffff';
+	var currentBgColor = graph.shapeBackgroundColor;
 	
 	var fontColorApply = null;
-	var currentFontColor = '#000000';
+	var currentFontColor = graph.shapeForegroundColor;
 		
 	var bgPanel = (graph.cellEditor.isContentEditing()) ? this.createColorOption(mxResources.get('backgroundColor'), function()
 	{
@@ -3588,7 +3591,7 @@ TextFormatPanel.prototype.addFont = function(container)
 		ui.fireEvent(new mxEventObject('styleChanged',
 			'keys', [mxConstants.STYLE_LABEL_BACKGROUNDCOLOR],
 			'values', [color], 'cells', ss.cells));
-	}, '#ffffff',
+	}, graph.shapeBackgroundColor,
 	{
 		install: function(apply) { bgColorApply = apply; },
 		destroy: function() { bgColorApply = null; }
@@ -3607,7 +3610,10 @@ TextFormatPanel.prototype.addFont = function(container)
 		graph.shapeForegroundColor);
 	borderPanel.style.fontWeight = 'bold';
 	
-	var defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
+	var defs = (ss.vertices.length >= 1) ?
+		graph.stylesheet.getDefaultVertexStyle() :
+		graph.stylesheet.getDefaultEdgeStyle();
+
 	var panel = (graph.cellEditor.isContentEditing()) ? this.createColorOption(mxResources.get('fontColor'), function()
 	{
 		return currentFontColor;
@@ -3678,7 +3684,7 @@ TextFormatPanel.prototype.addFont = function(container)
 				'keys', [mxConstants.STYLE_FONTCOLOR],
 				'values', [color], 'cells', ss.cells));
 		}
-	}, (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000',
+	}, (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : graph.shapeForegroundColor,
 	{
 		install: function(apply) { fontColorApply = apply; },
 		destroy: function() { fontColorApply = null; }
@@ -4457,50 +4463,32 @@ TextFormatPanel.prototype.addFont = function(container)
 								}
 							}
 							
-							// Converts rgb(r,g,b) values
-							var color = css.color.replace(
-									/\brgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+)\s*)?\)/g,
-									function($0, $1, $2, $3, $4)
-									{
-										return '#' + ('0' + Number($1).toString(16)).substr(-2) +
-											('0' + Number($2).toString(16)).substr(-2) +
-											('0' + Number($3).toString(16)).substr(-2) + (($4 != null) ?
-											('0' + Number($4).toString(16)).substr(-2) : '');
-								    });
-							var color2 = css.backgroundColor.replace(
-								/\brgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+)\s*)?\)/g,
-								function($0, $1, $2, $3, $4)
-								{
-									return '#' + ('0' + Number($1).toString(16)).substr(-2) +
-										('0' + Number($2).toString(16)).substr(-2) +
-										('0' + Number($3).toString(16)).substr(-2) + (($4 != null) ?
-										('0' + Number($4).toString(16)).substr(-2) : '');
-								});
-
 							// Updates the color picker for the current font
 							if (fontColorApply != null)
 							{
-								if (color.charAt(0) == '#')
+								if (css.color == 'rgba(0, 0, 0, 0)' ||
+									css.color == 'transparent')
 								{
-									currentFontColor = color;
+									currentFontColor = mxConstants.NONE;
 								}
 								else
 								{
-									currentFontColor = '#000000';
+									currentFontColor = mxUtils.rgba2hex(css.color)
 								}
-								
+
 								fontColorApply(currentFontColor, true);
 							}
 							
 							if (bgColorApply != null)
 							{
-								if (color2.charAt(0) == '#')
+								if (css.backgroundColor == 'rgba(0, 0, 0, 0)' ||
+									css.backgroundColor == 'transparent')
 								{
-									currentBgColor = color2;
+									currentBgColor = mxConstants.NONE;
 								}
 								else
 								{
-									currentBgColor = null;
+									currentBgColor = mxUtils.rgba2hex(css.backgroundColor);
 								}
 								
 								bgColorApply(currentBgColor, true);
@@ -4814,7 +4802,10 @@ StyleFormatPanel.prototype.addFill = function(container)
 		mxEvent.consume(evt);
 	});
 	
-	var defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
+	var defs = (ss.vertices.length >= 1) ?
+		graph.stylesheet.getDefaultVertexStyle() :
+		graph.stylesheet.getDefaultEdgeStyle();
+
 	var gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR,
 		(defs[mxConstants.STYLE_GRADIENTCOLOR] != null) ? defs[mxConstants.STYLE_GRADIENTCOLOR] : '#ffffff', function(color)
 	{

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

@@ -11562,7 +11562,34 @@ if (typeof mxVertexHandler != 'undefined')
 			
 			return color;
 		};
+				
+		/**
+		 * Returns the border color to be used for the editing box. This returns
+		 * the label border for edge labels and null for all other cases.
+		 */
+		mxCellEditor.prototype.getBorderColor = function(state)
+		{
+			var color = mxUtils.getValue(state.style, mxConstants.STYLE_LABEL_BORDERCOLOR, null);
+
+			if ((color == null || color == mxConstants.NONE) &&
+				(state.cell.geometry != null && state.cell.geometry.width > 0) &&
+				(mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0) != 0 ||
+				mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 0))
+			{
+				color = mxUtils.getValue(state.style, mxConstants.STYLE_STROKECOLOR, null);
+			}
+
+			if (color == mxConstants.NONE)
+			{
+				color = null;
+			}
+			
+			return color;
+		};
 		
+		/**
+		 * Returns the minimum editing size.
+		 */
 		mxCellEditor.prototype.getMinimumSize = function(state)
 		{
 			var scale = this.graph.getView().scale;

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

@@ -1313,7 +1313,7 @@ Menus.prototype.pickColor = function(key, cmd, defaultValue)
 		// Saves and restores text selection for in-place editor
 		var selState = graph.cellEditor.saveSelection();
 		
-		var dlg = new ColorDialog(this.editorUi, defaultValue || '000000', mxUtils.bind(this, function(color)
+		var dlg = new ColorDialog(this.editorUi, defaultValue || graph.shapeForegroundColor, mxUtils.bind(this, function(color)
 		{
 			graph.cellEditor.restoreSelection(selState);
 			document.execCommand(cmd, false, (color != mxConstants.NONE) ? color : 'transparent');
@@ -1335,6 +1335,7 @@ Menus.prototype.pickColor = function(key, cmd, defaultValue)
 		{
 			graph.cellEditor.restoreSelection(selState);
 		});
+
 		this.editorUi.showDialog(dlg.container, 230, h, true, true);
 		dlg.init();
 	}
@@ -1347,22 +1348,22 @@ Menus.prototype.pickColor = function(key, cmd, defaultValue)
 	
 		this.colorDialog.currentColorKey = key;
 		var state = graph.getView().getState(graph.getSelectionCell());
-		var color = 'none';
+		var color = mxConstants.NONE;
 		
 		if (state != null)
 		{
 			color = state.style[key] || color;
 		}
 		
-		if (color == 'none')
+		if (color == mxConstants.NONE)
 		{
-			color = 'ffffff';
-			this.colorDialog.picker.fromString('ffffff');
-			this.colorDialog.colorInput.value = 'none';
+			color = graph.shapeBackgroundColor.substring(1);
+			this.colorDialog.picker.fromString(color);
+			this.colorDialog.colorInput.value = mxConstants.NONE;
 		}
 		else
 		{
-			this.colorDialog.picker.fromString(color);
+			this.colorDialog.picker.fromString(mxUtils.rgba2hex(color));
 		}
 	
 		this.editorUi.showDialog(this.colorDialog.container, 230, h, true, true);

src/main/webapp/js/grapheditor/Shapes.js

@@ -13,7 +13,7 @@
 		if (state != null)
 		{
 			var graph = state.view.graph;
-			var start = graph.getActualStartSize(state.cell);
+			var start = graph.getActualStartSize(state.cell, true);
 			var rows = graph.model.getChildCells(state.cell, true);
 			
 			if (rows.length > 0)