15.6.3 release

ChangeLog

@@ -1,3 +1,10 @@
+31-OCT-2021: 15.6.3
+
+- Hides dragHandle while editing diagram
+- Fixes inline embed resize moves format panel
+- Fixes handling of default colors in SVG output
+- Notion extension improvements
+
 28-OCT-2021: 15.6.2
 
 - Fixes bounding box scale for SVG clipping https://github.com/jgraph/drawio/issues/2257

VERSION

@@ -1 +1 @@
-15.6.2
+15.6.3

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

@@ -1419,7 +1419,12 @@ App.prototype.init = function()
 		{
 			this.updateUserElement();
 			this.restoreLibraries();
-		}))
+
+			this.showBanner('GithubFooter', 'Click to install GitHub app', mxUtils.bind(this, function()
+			{
+				this.openLink('https://github.com/apps/draw-io-app');
+			}));
+		}));
 	}
 	
 	/**

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

@@ -932,11 +932,13 @@
 			
 			if (fillStyle == 'auto')
 			{
-				var bg = (this.shape.state != null && this.shape.state.view.graph.defaultPageBackgroundColor != 'transparent') ?
-					this.shape.state.view.graph.defaultPageBackgroundColor : (Editor.isDarkMode() ? Editor.darkColor : '#ffffff');
+				var bg = mxUtils.hex2rgba((this.shape.state != null &&
+					this.shape.state.view.graph.defaultPageBackgroundColor != 'transparent') ?
+					this.shape.state.view.graph.defaultPageBackgroundColor :
+					(Editor.isDarkMode() ? Editor.darkColor : '#ffffff'));
 				
 				fillStyle = (style.fill != null && (gradient != null || (bg != null &&
-					style.fill.toLowerCase() == bg.toLowerCase()))) ? 'solid' : defs['fillStyle']
+					style.fill == bg))) ? 'solid' : defs['fillStyle'];
 			}
 			
 			style['fillStyle'] = fillStyle;
@@ -7522,9 +7524,10 @@
 	/**
 	 * Adds a shadow filter to the given svg root.
 	 */
-	Graph.prototype.addSvgShadow = function(svgRoot, group, createOnly)
+	Graph.prototype.addSvgShadow = function(svgRoot, group, createOnly, extend)
 	{
 		createOnly = (createOnly != null) ? createOnly : false;
+		extend = (extend != null) ? extend : true;
 		
 		var svgDoc = svgRoot.ownerDocument;
 		
@@ -7601,7 +7604,7 @@
 			{
 				group.setAttribute('filter', 'url(#' + this.shadowId + ')');
 				
-				if (!isNaN(parseInt(svgRoot.getAttribute('width'))))
+				if (!isNaN(parseInt(svgRoot.getAttribute('width'))) && extend)
 				{
 					svgRoot.setAttribute('width', parseInt(svgRoot.getAttribute('width')) + 6);
 					svgRoot.setAttribute('height', parseInt(svgRoot.getAttribute('height')) + 6);

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

@@ -6758,6 +6758,8 @@
 		redirect, embedImages, background, scale, border, shadow, keepTheme)
 	{
 		embedImages = (embedImages != null) ? embedImages : true;
+		border = (border != null) ? border : 0;
+
 		var bg = (background != null) ? background : graph.background;
 		
 		if (bg == mxConstants.NONE)
@@ -6772,7 +6774,7 @@
 		
 		if (graph.shadowVisible || shadow)
 		{
-			graph.addSvgShadow(svgRoot);
+			graph.addSvgShadow(svgRoot, null, null, border == 0);
 		}
 
 		if (xml != null)
@@ -11674,7 +11676,7 @@
 	/**
 	 * Adds the buttons for embedded mode.
 	 */
-	EditorUi.prototype.sendEmbeddedSvgExport = function()
+	EditorUi.prototype.sendEmbeddedSvgExport = function(noExit)
 	{
 		var graph = this.editor.graph;
 
@@ -11687,8 +11689,11 @@
 
 		if (!this.editor.modified)
 		{
-			parent.postMessage(JSON.stringify({event: 'exit',
-				point: this.embedExitPoint}), '*');
+			if (!noExit)
+			{
+				parent.postMessage(JSON.stringify({event: 'exit',
+					point: this.embedExitPoint}), '*');
+			}
 		}
 		else
 		{
@@ -11705,19 +11710,23 @@
 			{
 				parent.postMessage(JSON.stringify({
 					event: 'export', point: this.embedExitPoint,
+					exit: (noExit != null) ? !noExit : true,
 					data: Editor.createSvgDataUri(svg)
 				}), '*');
 			}), null, null, true, bg, 1, this.embedExportBorder);
 		}
 
-		this.diagramContainer.removeAttribute('data-bounds');
-		Editor.inlineFullscreen = false;
-		graph.model.clear();
-		this.editor.undoManager.clear();
-		this.setBackgroundImage(null);
-		this.editor.modified = false;
+		if (!noExit)
+		{
+			this.diagramContainer.removeAttribute('data-bounds');
+			Editor.inlineFullscreen = false;
+			graph.model.clear();
+			this.editor.undoManager.clear();
+			this.setBackgroundImage(null);
+			this.editor.modified = false;
 
-		this.fireEvent(new mxEventObject('editInlineStop'));
+			this.fireEvent(new mxEventObject('editInlineStop'));
+		}
 	};
 	
 	/**
@@ -12070,6 +12079,12 @@
 
 						return;
 					}
+					else if (data.action == 'snapshot')
+					{
+						this.sendEmbeddedSvgExport(true);
+
+						return;
+					}
 					else if (data.action == 'export')
 					{
 						if (data.format == 'png' || data.format == 'xmlpng')

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

@@ -1274,7 +1274,10 @@ EditorUi.initMinimalTheme = function()
 
 			if (urlParams['embedInline'] != '1')
 			{
-				this.addMenuItems(menu, ['toggleDarkMode'], parent);
+				if (Editor.isDarkMode() || (!mxClient.IS_IE && !mxClient.IS_IE11))
+				{
+					this.addMenuItems(menu, ['toggleDarkMode'], parent);
+				}
 
 				if (urlParams['embed'] != '1' && (isLocalStorage || mxClient.IS_CHROMEAPP))
 				{
@@ -1798,6 +1801,8 @@ EditorUi.initMinimalTheme = function()
 			{
 				this.sidebar.graph.stylesheet.styles =
 					mxUtils.clone(graph.stylesheet.styles);
+				this.sidebar.graph.defaultPageBackgroundColor =
+					graph.defaultPageBackgroundColor;
 				this.sidebar.graph.defaultForegroundColor =
 					graph.defaultForegroundColor;
 				this.sidebar.container.innerHTML = '';
@@ -2762,7 +2767,6 @@ EditorUi.initMinimalTheme = function()
 				y0 = null;
 			});
 
-			graph.defaultPageBackgroundColor = 'transparent';
 			this.diagramContainer.style.borderRadius = '4px';
 			document.body.style.backgroundColor = 'transparent';
 			ui.bottomResizer.style.visibility = 'hidden';

src/main/webapp/js/diagramly/Pages.js

@@ -357,6 +357,7 @@ EditorUi.prototype.getImageForPage = function(page, sourcePage, sourceGraph)
 	sourceGraph = (sourceGraph != null) ? sourceGraph : this.editor.graph;
 	var graphGetGlobalVariable = sourceGraph.getGlobalVariable;
 	var graph = this.createTemporaryGraph(sourceGraph.getStylesheet());
+	graph.defaultPageBackgroundColor = sourceGraph.defaultPageBackgroundColor;
 	graph.defaultForegroundColor = sourceGraph.defaultForegroundColor;
 	var index = this.getPageIndex((sourcePage != null) ?
 		sourcePage : this.currentPage);

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

@@ -6188,7 +6188,11 @@ DiagramStylePanel.prototype.addView = function(div)
 		container.appendChild(div);
 		
 		var graph2 = new Graph(div, null, null, graph.getStylesheet());
-		graph2.defaultForegroundColor = graph.defaultForegroundColor;
+		
+		graph2.defaultPageBackgroundColor =
+			graph.defaultPageBackgroundColor;
+		graph2.defaultForegroundColor =
+			graph.defaultForegroundColor;
 		graph2.resetViewOnRootChange = false;
 		graph2.foldingEnabled = false;
 		graph2.gridEnabled = false;

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

@@ -9678,6 +9678,7 @@ if (typeof mxVertexHandler != 'undefined')
 				crisp = (crisp != null) ? crisp : true;
 				ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
 				showText = (showText != null) ? showText : true;
+				hasShadow = (hasShadow != null) ? hasShadow : false;
 	
 				var bounds = (exportType == 'page') ? this.view.getBackgroundPageBounds() :
 					(((ignoreSelection && lookup == null) || nocrop ||
@@ -9727,10 +9728,12 @@ if (typeof mxVertexHandler != 'undefined')
 					// KNOWN: Ignored in IE9-11, adds namespace for each image element instead. No workaround.
 					root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', mxConstants.NS_XLINK);
 				}
-				
+
 				var s = scale / vs;
-				var w = Math.max(1, Math.ceil(bounds.width * s) + 2 * border) + ((hasShadow) ? 5 : 0);
-				var h = Math.max(1, Math.ceil(bounds.height * s) + 2 * border) + ((hasShadow) ? 5 : 0);
+				var w = Math.max(1, Math.ceil(bounds.width * s) + 2 * border) +
+					((hasShadow && border == 0) ? 5 : 0);
+				var h = Math.max(1, Math.ceil(bounds.height * s) + 2 * border) +
+					((hasShadow && border == 0) ? 5 : 0);
 				
 				root.setAttribute('version', '1.1');
 				root.setAttribute('width', w + 'px');
@@ -11013,17 +11016,18 @@ if (typeof mxVertexHandler != 'undefined')
 		var mxCellRendererPostConfigureShape = mxCellRenderer.prototype.postConfigureShape;
 		mxCellRenderer.prototype.postConfigureShape = function(state)
 		{
-			var bg = state.view.graph.defaultPageBackgroundColor;
-			var fg = state.view.graph.defaultForegroundColor;
+			// Uses rgba to distinguish from user-defined values in output
+			var bg = mxUtils.hex2rgba(state.view.graph.defaultPageBackgroundColor);
+			var fg = mxUtils.hex2rgba(state.view.graph.defaultForegroundColor);
 
 			this.resolveDefaultColor(state, 'fill', state.shape, bg);
+			this.resolveDefaultColor(state, 'color', state.text, fg);
+			this.resolveDefaultColor(state, 'border', state.text, fg);
 			this.resolveDefaultColor(state, 'stroke', state.shape, fg);
 			this.resolveDefaultColor(state, 'laneFill', state.shape, bg);
-			this.resolveDefaultColor(state, 'imageBackground', state.shape, bg);
-			this.resolveDefaultColor(state, 'labelBackgroundColor', state.shape, bg);
-			this.resolveDefaultColor(state, 'imageBorder', state.shape, fg);
 			this.resolveDefaultColor(state, 'background', state.text, bg);
-			this.resolveDefaultColor(state, 'color', state.text, fg);
+			this.resolveDefaultColor(state, 'imageBorder', state.shape, fg);
+			this.resolveDefaultColor(state, 'imageBackground', state.shape, bg);
 
 			mxCellRendererPostConfigureShape.apply(this, arguments);
 		};
@@ -11033,7 +11037,7 @@ if (typeof mxVertexHandler != 'undefined')
 		 */
 		mxCellRenderer.prototype.resolveDefaultColor = function(state, field, shape, defaultValue)
 		{
-			if (shape != null && shape[field] == 'default')
+			if (shape != null && shape[field] == 'default' && defaultValue != null)
 			{
 				shape[field] = defaultValue;
 			}

src/main/webapp/styles/default.xml

@@ -6,21 +6,21 @@
 		<add as="fontFamily" value="Helvetica"/>
 		<add as="align" value="center"/>
 		<add as="verticalAlign" value="middle"/>
-		<add as="fillColor" value="#ffffff"/>
-		<add as="strokeColor" value="#000000"/>
-		<add as="fontColor" value="#000000"/>
+		<add as="fillColor" value="default"/>
+		<add as="strokeColor" value="default"/>
+		<add as="fontColor" value="default"/>
 	</add>
 	<add as="defaultEdge">
 		<add as="shape" value="connector"/>
-		<add as="labelBackgroundColor" value="#ffffff"/>
+		<add as="labelBackgroundColor" value="default"/>
 		<add as="endArrow" value="classic"/>
 		<add as="fontSize" value="11"/>
 		<add as="fontFamily" value="Helvetica"/>
 		<add as="align" value="center"/>
 		<add as="verticalAlign" value="middle"/>
 		<add as="rounded" value="1"/>
-		<add as="strokeColor" value="#000000"/>
-		<add as="fontColor" value="#000000"/>
+		<add as="strokeColor" value="default"/>
+		<add as="fontColor" value="default"/>
 	</add>
 	<add as="text">
 		<add as="fillColor" value="none"/>
@@ -30,7 +30,7 @@
 		<add as="verticalAlign" value="top"/>
 	</add>
 	<add as="edgeLabel" extend="text">
-		<add as="labelBackgroundColor" value="#ffffff"/>
+		<add as="labelBackgroundColor" value="default"/>
 		<add as="fontSize" value="11"/>
 	</add>
 	<add as="label">
@@ -49,7 +49,7 @@
 		<add as="verticalLabelPosition" value="bottom"/>
 		<add as="verticalAlign" value="top"/>
 		<add as="spacingTop" value="4"/>
-		<add as="labelBackgroundColor" value="#ffffff"/>
+		<add as="labelBackgroundColor" value="default"/>
 		<add as="spacing" value="0"/>
 		<add as="spacingLeft" value="0"/>
 		<add as="spacingTop" value="6"/>