10.9.2 release

ChangeLog

@@ -1,3 +1,10 @@
+09-JUL-2019: 10.9.2
+
+- Fixes reset of handles after remote style changes
+- Fixes background color for rotated text editing
+- Improves command line export in Electron
+- Uses mxGraph 4.0.2 beta 3
+
 09-JUL-2019: 10.9.1
 
 - Fixes NPE in Electron and ChromeOS apps

VERSION

@@ -1 +1 @@
-10.9.1
+10.9.2

src/main/webapp/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 07/09/2019 07:25 AM
+# 07/09/2019 03:09 PM
 
 app.html
 index.html?offline=1

src/main/webapp/electron.js

@@ -325,8 +325,8 @@ app.on('ready', e =>
 					{
 						var filePath = path.join(dir, file);
 						stat = fs.statSync(filePath);
-					    
-						if (stat.isFile())
+						
+						if (stat.isFile() && path.basename(filePath).charAt(0) != '.')
 						{
 							files.push(filePath);
 						}
@@ -356,7 +356,12 @@ app.on('ready', e =>
 						
 						try
 						{
-							expArgs.xml = fs.readFileSync(curFile, 'utf-8');
+							expArgs.xml = fs.readFileSync(curFile, (path.extname(curFile) === '.png') ? null : 'utf-8');
+							
+							if (path.extname(curFile) === '.png')
+							{
+								expArgs.xml = new Buffer(expArgs.xml).toString('base64');
+							}
 							
 							var mockEvent = {
 								reply: function(msg, data)
@@ -375,7 +380,7 @@ app.on('ready', e =>
 											{
 												if (outType.isDir)
 												{
-													outFileName = path.join(program.output, path.basename(curFile, path.extname(curFile))) + '.' + format;
+													outFileName = path.join(program.output, path.basename(curFile)) + '.' + format;
 												}
 												else
 												{
@@ -384,11 +389,11 @@ app.on('ready', e =>
 											}
 											else if (inStat.isFile())
 											{
-												outFileName = path.join(path.dirname(paths[0]), path.basename(paths[0], path.extname(paths[0]))) + '.' + format;
+												outFileName = path.join(path.dirname(paths[0]), path.basename(paths[0])) + '.' + format;
 											}
 											else //dir
 											{
-												outFileName = path.join(path.dirname(curFile), path.basename(curFile, path.extname(curFile))) + '.' + format;
+												outFileName = path.join(path.dirname(curFile), path.basename(curFile)) + '.' + format;
 											}
 											
 											try

src/main/webapp/export3.html

@@ -51,7 +51,7 @@
 			catch(e){}
 
 			//PNG+XML format
-			if (extras != null && extras.isPng)
+			if (data.xml.substring(0, 5) == 'iVBOR' || (extras != null && extras.isPng))
 			{
 				var pngData = 'data:image/png;base64,' + data.xml;
 				//A hacky way to invoke extractGraphModelFromPng without EditorUi instance
@@ -61,8 +61,27 @@
 			}
 			
 			// Parses XML
-			var xmlDoc = mxUtils.parseXml(data.xml);
+			var doc = mxUtils.parseXml(data.xml);
+			var node = Editor.extractGraphModel(doc.documentElement, true);
 			
+			if (node == null)
+			{
+				//Electron pdf export
+				try 
+				{
+					const { ipcRenderer } = require('electron');
+					
+					ipcRenderer.send('render-finished', null);
+				}
+				catch(e)
+				{
+					console.log(e);
+				}
+				
+				return graph;
+			}
+			
+			var xmlDoc = node.ownerDocument;
 			var diagrams = null;
 			var from = 0;
 			
@@ -577,47 +596,32 @@
 			renderMath(document.body);
 			// Immediate return if not waiting for any content
 			decrementWaitCounter();
+			
+			return graph;
 		};
 		
-		//Code taken from https://github.com/languitar/drawio-batch
-		//Must be called after rendering is finished
-		function getSvgData()
+		/**
+		 * Returns the exported SVG for the given graph (see EditorUi.exportSvg).
+		 */
+		function getSvgData(graph)
 		{
-			// extracts the inline SVG element used for rendering the diagram and puts it into a file with appropriate SVG headers
-
-		    // get the rendered page content as valid SVG
-	        const xmlns = 'http://www.w3.org/2000/xmlns/'
-	        const xlinkns = 'http://www.w3.org/1999/xlink'
-	        const svgns = 'http://www.w3.org/2000/svg'
-
-	        svg = document.getElementsByTagName('svg')[0]
-	        svg.setAttribute('version', '1.1')
-
-	        var defsEl = document.createElement('defs')
-	        svg.insertBefore(defsEl, svg.firstChild)
-
-	        var styleEl = document.createElement('style')
-	        defsEl.appendChild(styleEl)
-	        styleEl.setAttribute('type', 'text/css')
-
-	        // removing attributes so they aren't doubled up
-	        svg.removeAttribute('xmlns')
-	        svg.removeAttribute('xlink')
-
-	        // These are needed for the svg
-	        if (!svg.hasAttributeNS(xmlns, 'xmlns')) {
-	          svg.setAttributeNS(xmlns, 'xmlns', svgns)
-	        }
-
-	        if (!svg.hasAttributeNS(xmlns, 'xmlns:xlink')) {
-	          svg.setAttributeNS(xmlns, 'xmlns:xlink', xlinkns)
-	        }
-
-	        //This page(code) is designed for Chrome (Puppeteer or Electron) which supports this 
-	        var source = (new XMLSerializer()).serializeToString(svg);
-	        
-	        return '<?xml version="1.0" standalone="no"?>\r\n' + source;
-		}
+			var bg = graph.background;
+			
+			if (bg == mxConstants.NONE)
+			{
+				bg = null;
+			}
+			
+			var svgRoot = graph.getSvg(bg, 1, 0, false, null, true, null, null, null);
+			
+			if (graph.shadowVisible)
+			{
+				graph.addSvgShadow(svgRoot);
+			}
+			
+			return '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
+				mxUtils.getXml(svgRoot);
+		};
 		
 		//Electron pdf export
 		if (mxIsElectron)
@@ -625,15 +629,16 @@
 			try 
 			{
 				const { ipcRenderer } = require('electron');
+				var graph = null;
 				
 				ipcRenderer.on('render', (event, arg) => 
 				{
-					render(arg);
+					graph = render(arg);
 				});
 				
 				ipcRenderer.on('get-svg-data', (event, arg) => 
 				{
-					ipcRenderer.send('svg-data', getSvgData());
+					ipcRenderer.send('svg-data', getSvgData(graph));
 				});
 			}
 			catch(e)
@@ -645,5 +650,4 @@
 </head>
 <body style="margin:0px;">
 	<div id="graph" style="width:100%;height:100%;"></div>
-</body>
 </html>

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

@@ -313,7 +313,123 @@
 		'Edward Morrison,Brand Manager,emo,Office 2,Evan Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-10-3-128.png\n' +
 		'Ron Donovan,System Admin,rdo,Office 3,Evan Miller,me@example.com,#d5e8d4,#82b366,"emo,tva",https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-2-128.png\n' +
 		'Tessa Valet,HR Director,tva,Office 4,Evan Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-3-128.png\n';
+	
+	/**
+	 * Helper function to extract the graph model XML node.
+	 */
+	Editor.extractGraphModel = function(node, allowMxFile)
+	{
+		if (node != null && typeof(pako) !== 'undefined')
+		{
+			var tmp = node.ownerDocument.getElementsByTagName('div');
+			var divs = [];
+			
+			if (tmp != null && tmp.length > 0)
+			{
+				for (var i = 0; i < tmp.length; i++)
+				{
+					if (tmp[i].getAttribute('class') == 'mxgraph')
+					{
+						divs.push(tmp[i]);
+						break;
+					}	
+				}
+			}
+			
+			if (divs.length > 0)
+			{
+				var data = divs[0].getAttribute('data-mxgraph');
+
+				if (data != null)
+				{
+					var config = JSON.parse(data);
+
+					if (config != null && config.xml != null)
+					{
+						var doc2 = mxUtils.parseXml(config.xml);
+						node = doc2.documentElement;
+					}
+				}
+				else
+				{
+					var divs2 = divs[0].getElementsByTagName('div');
+					
+					if (divs2.length > 0)
+					{
+						var data = mxUtils.getTextContent(divs2[0]);
+		        		data = Graph.decompress(data);
+		        		
+		        		if (data.length > 0)
+		        		{
+		        			var doc2 = mxUtils.parseXml(data);
+		        			node = doc2.documentElement;
+		        		}
+					}
+				}
+			}
+		}
+		
+		if (node != null && node.nodeName == 'svg')
+		{
+			var tmp = node.getAttribute('content');
+			
+			if (tmp != null && tmp.charAt(0) != '<' && tmp.charAt(0) != '%')
+			{
+				tmp = unescape((window.atob) ? atob(tmp) : Base64.decode(cont, tmp));
+			}
+			
+			if (tmp != null && tmp.charAt(0) == '%')
+			{
+				tmp = decodeURIComponent(tmp);
+			}
+			
+			if (tmp != null && tmp.length > 0)
+			{
+				node = mxUtils.parseXml(tmp).documentElement;
+			}
+			else
+			{
+				throw {message: mxResources.get('notADiagramFile')};
+			}
+		}
+		
+		if (node != null && !allowMxFile)
+		{
+			var diagramNode = null;
+			
+			if (node.nodeName == 'diagram')
+			{
+				diagramNode = node;
+			}
+			else if (node.nodeName == 'mxfile')
+			{
+				var diagrams = node.getElementsByTagName('diagram');
 
+				if (diagrams.length > 0)
+				{
+					diagramNode = diagrams[Math.max(0, Math.min(diagrams.length - 1, urlParams['page'] || 0))];
+				}
+			}
+			
+			if (diagramNode != null)
+			{
+				var tmp = Graph.decompress(mxUtils.getTextContent(diagramNode));
+				
+				if (tmp != null && tmp.length > 0)
+				{
+					node = mxUtils.parseXml(tmp).documentElement;
+				}
+			}
+		}
+		
+		if (node != null && node.nodeName != 'mxGraphModel' && (!allowMxFile || node.nodeName != 'mxfile'))
+		{
+			node = null;
+		}
+		
+		return node;
+	};
+	
 	/**
 	 * Disables the shadow option in the format panel.
 	 */
@@ -679,115 +795,7 @@
 	 */
 	Editor.prototype.extractGraphModel = function(node, allowMxFile)
 	{
-		if (node != null && typeof(pako) !== 'undefined')
-		{
-			var tmp = node.ownerDocument.getElementsByTagName('div');
-			var divs = [];
-			
-			if (tmp != null && tmp.length > 0)
-			{
-				for (var i = 0; i < tmp.length; i++)
-				{
-					if (tmp[i].getAttribute('class') == 'mxgraph')
-					{
-						divs.push(tmp[i]);
-						break;
-					}	
-				}
-			}
-			
-			if (divs.length > 0)
-			{
-				var data = divs[0].getAttribute('data-mxgraph');
-
-				if (data != null)
-				{
-					var config = JSON.parse(data);
-
-					if (config != null && config.xml != null)
-					{
-						var doc2 = mxUtils.parseXml(config.xml);
-						node = doc2.documentElement;
-					}
-				}
-				else
-				{
-					var divs2 = divs[0].getElementsByTagName('div');
-					
-					if (divs2.length > 0)
-					{
-						var data = mxUtils.getTextContent(divs2[0]);
-		        		data = Graph.decompress(data);
-		        		
-		        		if (data.length > 0)
-		        		{
-		        			var doc2 = mxUtils.parseXml(data);
-		        			node = doc2.documentElement;
-		        		}
-					}
-				}
-			}
-		}
-		
-		if (node != null && node.nodeName == 'svg')
-		{
-			var tmp = node.getAttribute('content');
-			
-			if (tmp != null && tmp.charAt(0) != '<' && tmp.charAt(0) != '%')
-			{
-				tmp = unescape((window.atob) ? atob(tmp) : Base64.decode(cont, tmp));
-			}
-			
-			if (tmp != null && tmp.charAt(0) == '%')
-			{
-				tmp = decodeURIComponent(tmp);
-			}
-			
-			if (tmp != null && tmp.length > 0)
-			{
-				node = mxUtils.parseXml(tmp).documentElement;
-			}
-			else
-			{
-				throw {message: mxResources.get('notADiagramFile')};
-			}
-		}
-		
-		if (node != null && !allowMxFile)
-		{
-			var diagramNode = null;
-			
-			if (node.nodeName == 'diagram')
-			{
-				diagramNode = node;
-			}
-			else if (node.nodeName == 'mxfile')
-			{
-				var diagrams = node.getElementsByTagName('diagram');
-
-				if (diagrams.length > 0)
-				{
-					diagramNode = diagrams[Math.max(0, Math.min(diagrams.length - 1, urlParams['page'] || 0))];
-				}
-			}
-			
-			if (diagramNode != null)
-			{
-				var tmp = Graph.decompress(mxUtils.getTextContent(diagramNode));
-				
-				if (tmp != null && tmp.length > 0)
-				{
-					node = mxUtils.parseXml(tmp).documentElement;
-				}
-			}
-		}
-		
-		if (node != null && node.nodeName != 'mxGraphModel' && (!allowMxFile || node.nodeName != 'mxfile'))
-		{
-			node = null;
-		}
-		
-		return node;
+		return Editor.extractGraphModel.apply(this, arguments);
 	};
 	
 	/**

src/main/webapp/js/mxgraph/Graph.js

@@ -4479,7 +4479,7 @@ HoverIcons.prototype.setCurrentState = function(state)
 	    	var shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
 	
 	    	// Extracts and decodes stencil XML if shape has the form shape=stencil(value)
-	    	if (shape != null && shape.substring(0, 8) == 'stencil(')
+	    	if (shape != null && typeof shape === 'string' && shape.substring(0, 8) == 'stencil(')
 	    	{
 	    		try
 	    		{
@@ -4610,7 +4610,7 @@ mxStencilRegistry.getBasenameForStencil = function(name)
 {
 	var tmp = null;
 	
-	if (name != null)
+	if (name != null && typeof name === 'string')
 	{
 		var parts = name.split('.');
 		
@@ -7189,7 +7189,7 @@ if (typeof mxVertexHandler != 'undefined')
 			
 			return guide;
 		};
-	
+		
 		/**
 		 * HTML in-place editor
 		 */
@@ -7365,8 +7365,6 @@ if (typeof mxVertexHandler != 'undefined')
 						{
 							checkNode(this.textarea, clone);
 						}
-						
-						this.textarea.innerHTML = this.graph.sanitizeHtml(this.textarea.innerHTML, true);
 					}), 0);
 				}));
 			}
@@ -7649,23 +7647,26 @@ if (typeof mxVertexHandler != 'undefined')
 				this.graph.getModel().endUpdate();
 			}
 		};
-
+		
 		/**
 		 * Returns the background color to be used for the editing box. This returns
 		 * the label background for edge labels and null for all other cases.
 		 */
 		mxCellEditor.prototype.getBackgroundColor = function(state)
 		{
-			var color = null;
-			
-			if (this.graph.getModel().isEdge(state.cell) || this.graph.getModel().isEdge(this.graph.getModel().getParent(state.cell)))
+			var color = mxUtils.getValue(state.style, mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, 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))
 			{
-				var color = mxUtils.getValue(state.style, mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null);
-				
-				if (color == mxConstants.NONE)
-				{
-					color = null;
-				}
+				color = mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, null);
+			}
+
+			if (color == mxConstants.NONE)
+			{
+				color = null;
 			}
 			
 			return color;