14.3.2 release

ChangeLog

@@ -1,3 +1,11 @@
+15-FEB-2021: 14.3.2
+
+- Adds flow animation style
+- Makes grid steps configurable
+- Adds ctrl+drop to insert dropped content as new page
+- Uses app.diagrams.net for editing [DID-1717]
+- Fixes drag and drop for SVG+XML files
+
 11-FEB-2021: 14.3.1
 
 - Adds support for regional direction to back-ends

VERSION

@@ -1 +1 @@
-14.3.1
+14.3.2

src/main/webapp/js/clear.js

@@ -29,10 +29,14 @@ try
 			writeln('OK');
 		}
 		
-		var link = document.createElement('a');
+		if ((/test\.draw\.io$/.test(window.location.hostname)) ||
-		link.setAttribute('href', './');
+			(/app\.diagrams\.net$/.test(window.location.hostname)))
-		link.appendChild(document.createTextNode('Start App'));
+		{
-		document.body.appendChild(link);
+			var link = document.createElement('a');
+			link.setAttribute('href', './');
+			link.appendChild(document.createTextNode('Start App'));
+			document.body.appendChild(link);
+		}
 	});
 }
 catch (e)

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

@@ -652,27 +652,32 @@ App.main = function(callback, createUi)
 			}
 		}
 
-		// Runs as progressive web app if service workers are supported
 		try
 		{
-			if (Editor.enableServiceWorker)
+			// Removes PWA cache on www.draw.io to force use of new domain via redirect
+			if (Editor.enableServiceWorker && (urlParams['offline'] == '0' ||
+				/www\.draw\.io$/.test(window.location.hostname) ||
+				(urlParams['offline'] != '1' && urlParams['dev'] == '1')))
 			{
-				// Removes PWA cache on www.draw.io to force use of new domain via redirect
+				App.clearServiceWorker(function()
-				if (urlParams['offline'] == '0' || /www\.draw\.io$/.test(window.location.hostname) ||
-					(urlParams['offline'] != '1' && urlParams['dev'] == '1'))
 				{
-					App.clearServiceWorker(function()
+					if (urlParams['offline'] == '0')
 					{
-						if (urlParams['offline'] == '0')
+						alert('Cache cleared');
-						{
+					}
-							alert('Cache cleared');
+				});
-						}
+			}
-					});
+			else
+			{
+				// Runs as progressive web app if service workers are supported
+				if (Editor.enableServiceWorker)
+				{
+					navigator.serviceWorker.register('/service-worker.js');
 				}
-				else
+				
+				if (urlParams['offline'] == '1' || urlParams['dev'] != '1')
 				{
 					mxStencilRegistry.allowEval = false;
-					navigator.serviceWorker.register('/service-worker.js');
 					App.loadScripts(['js/shapes.min.js', 'js/stencils.min.js', 'js/extensions.min.js']);
 				}
 			}

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

@@ -4629,26 +4629,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn, showPages)
 					// Creates one picker and reuses it to avoid polluting the DOM
 					if (editorUi.linkPicker == null)
 					{
-						var view = new google.picker.DocsView(google.picker.ViewId.FOLDERS)
+						var picker = editorUi.drive.createLinkPicker();
-				        		.setParent('root')
-				        		.setIncludeFolders(true)
-				        		.setSelectFolderEnabled(true);
-						var view2 = new google.picker.DocsView()
-							.setIncludeFolders(true)
-				            .setSelectFolderEnabled(true);
-						var view21 = new google.picker.DocsView()
-							.setIncludeFolders(true)
-							.setEnableDrives(true)
-				            .setSelectFolderEnabled(true);
-						var picker = new google.picker.PickerBuilder()
-							.setAppId(editorUi.drive.appId)	
-							.setLocale(mxLanguage)
-							.setOAuthToken(editorUi.drive.token)
-							.enableFeature(google.picker.Feature.SUPPORT_DRIVES)
-						    .addView(view)
-							.addView(view2)
-							.addView(view21)
-							.addView(google.picker.ViewId.RECENTLY_PICKED);
 
 						editorUi.linkPicker = picker.setCallback(function(data)
 						{

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

@@ -2029,6 +2029,46 @@ DriveClient.prototype.createUploadRequest = function(id, metadata, data, revisio
 	return reqObj;
 };
 
+/**
+ * Translates this point by the given vector.
+ * 
+ * @param {number} dx X-coordinate of the translation.
+ * @param {number} dy Y-coordinate of the translation.
+ */
+DriveClient.prototype.createLinkPicker = function()
+{
+	var name = 'linkPicker';
+	var picker = pickers[name];
+	
+	if (picker == null || pickers[name + 'Token'] != _token)
+	{
+		pickers[name + 'Token'] = _token;
+
+		var view = new google.picker.DocsView(google.picker.ViewId.FOLDERS)
+			.setParent('root')
+			.setIncludeFolders(true)
+			.setSelectFolderEnabled(true);
+		var view2 = new google.picker.DocsView()
+			.setIncludeFolders(true)
+			.setSelectFolderEnabled(true);
+		var view21 = new google.picker.DocsView()
+			.setIncludeFolders(true)
+			.setEnableDrives(true)
+			.setSelectFolderEnabled(true);
+		picker = new google.picker.PickerBuilder()
+			.setAppId(this.appId)	
+			.setLocale(mxLanguage)
+			.setOAuthToken(pickers[name + 'Token'])
+			.enableFeature(google.picker.Feature.SUPPORT_DRIVES)
+			.addView(view)
+			.addView(view2)
+			.addView(view21)
+			.addView(google.picker.ViewId.RECENTLY_PICKED);
+	}
+	
+	return picker;
+};
+
 /**
  * Translates this point by the given vector.
  * 

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

@@ -351,7 +351,8 @@
         {name: 'cloneable', dispName: 'Cloneable', type: 'bool', defVal: true},
         {name: 'deletable', dispName: 'Deletable', type: 'bool', defVal: true},
         {name: 'orthogonalLoop', dispName: 'Loop Routing', type: 'bool', defVal: false},
-        {name: 'noJump', dispName: 'No Jumps', type: 'bool', defVal: false}
+        {name: 'noJump', dispName: 'No Jumps', type: 'bool', defVal: false},
+        {name: 'flowAnimation', dispName: 'Flow Animation', type: 'bool', defVal: false}
 	].concat(Editor.commonProperties);
 
 	/**
@@ -1787,6 +1788,17 @@
 			{
 				Graph.prototype.defaultEdgeStyle = config.defaultEdgeStyle;
 			}
+
+			// Overrides grid steps
+			if (config.gridSteps != null)
+			{
+				var val = parseInt(config.gridSteps);
+				
+				if (!isNaN(val) && val > 0)
+				{
+					mxGraphView.prototype.gridSteps = val;
+				}
+			}
 			
 			if (config.emptyDiagramXml)
 			{
@@ -7152,6 +7164,10 @@
 					// Switches stylesheet for print output in dark mode
 					var temp = null;
 					
+					// Disables dashed printing of flowAnimation
+					var enableFlowAnimation = graph.enableFlowAnimation;
+					graph.enableFlowAnimation = false;
+					
 					if (graph.themes != null && graph.defaultThemeName == 'darkTheme')
 					{
 						temp = graph.stylesheet;
@@ -7162,6 +7178,9 @@
 					// Generates the print output
 					pv.open(null, null, forcePageBreaks, true);
 					
+					// Restores flowAnimation
+					graph.enableFlowAnimation = enableFlowAnimation;
+					
 					// Restores the stylesheet
 					if (temp != null)
 					{
@@ -7259,7 +7278,7 @@
 
 					if (tempGraph == null)
 					{
-						tempGraph = editorUi.createTemporaryGraph(graph.stylesheet);//getStylesheet());
+						tempGraph = editorUi.createTemporaryGraph(graph.stylesheet);
 
 						// Restores graph settings that are relevant for printing
 						var pageVisible = true;

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

@@ -6625,7 +6625,7 @@
 	/**
 	 * Imports the given XML into the existing diagram.
 	 */
-	EditorUi.prototype.importXml = function(xml, dx, dy, crop, noErrorHandling)
+	EditorUi.prototype.importXml = function(xml, dx, dy, crop, noErrorHandling, addNewPage)
 	{
 		dx = (dx != null) ? dx : 0;
 		dy = (dy != null) ? dy : 0;
@@ -6651,7 +6651,7 @@
 					{
 						var diagrams = node.getElementsByTagName('diagram');
 
-						if (diagrams.length == 1)
+						if (diagrams.length == 1 && !addNewPage)
 						{
 							node = Editor.parseDiagramNode(diagrams[0]);
 							
@@ -6674,7 +6674,7 @@
 								}
 							}
 						}
-						else if (diagrams.length > 1)
+						else if (diagrams.length > 0)
 						{
 							var pages = [];
 							var i0 = 0;
@@ -7458,7 +7458,7 @@
 	 * Imports the given XML into the existing diagram.
 	 * TODO: Make this function asynchronous
 	 */
-	EditorUi.prototype.insertTextAt = function(text, dx, dy, html, asImage, crop, resizeImages)
+	EditorUi.prototype.insertTextAt = function(text, dx, dy, html, asImage, crop, resizeImages, addNewPage)
 	{
 		crop = (crop != null) ? crop : true;
 		resizeImages = (resizeImages != null) ? resizeImages : true;
@@ -7494,7 +7494,7 @@
 					
 					if (xml != null && xml.length > 0)
 					{
-						return this.importXml(xml, dx, dy, crop, true);
+						return this.importXml(xml, dx, dy, crop, true, addNewPage);
 					}
 	    		}
 				
@@ -7505,7 +7505,7 @@
 					
 					if (xml != null && xml.length > 0)
 					{
-						return this.importXml(xml, dx, dy, crop, true);
+						return this.importXml(xml, dx, dy, crop, true, addNewPage);
 					}
 				}
 				
@@ -7526,7 +7526,7 @@
 							xml = decodeURIComponent(text.substring(text.indexOf(',') + 1));
 						}
 						
-						var result = this.importXml(xml, dx, dy, crop, true); 
+						var result = this.importXml(xml, dx, dy, crop, true, addNewPage); 
 	
 						if (result.length > 0)
 						{
@@ -7589,7 +7589,7 @@
 			
 				if (this.isCompatibleString(text))
 				{
-					return this.importXml(text, dx, dy, crop);
+					return this.importXml(text, dx, dy, crop, null, addNewPage);
 				}
 				else if (text.length > 0)
 				{
@@ -7598,7 +7598,8 @@
 						this.convertLucidChart(text, mxUtils.bind(this, function(xml)
 						{
 							this.editor.graph.setSelectionCells(
-								this.importXml(xml, dx, dy, crop));
+								this.importXml(xml, dx, dy, crop,
+								null, addNewPage));
 						}), mxUtils.bind(this, function(e)
 						{
 							this.handleError(e);
@@ -7944,12 +7945,13 @@
 	/**
 	 * Imports the given XML into the existing diagram.
 	 */
-	EditorUi.prototype.importFile = function(data, mimeType, dx, dy, w, h, filename, done, file, crop, ignoreEmbeddedXml)
+	EditorUi.prototype.importFile = function(data, mimeType, dx, dy, w, h, filename,
+		done, file, crop, ignoreEmbeddedXml, evt)
 	{
 		crop = (crop != null) ? crop : true;
 		var async = false;
 		var cells = null;
-		
+
 		var handleResult = mxUtils.bind(this, function(xml)
 		{
 			var importedCells = null;
@@ -7960,7 +7962,10 @@
 			}
 			else
 			{
-				importedCells = this.importXml(xml, dx, dy, crop);
+				console.log('here', evt,mxEvent.isControlDown(evt));
+				
+				importedCells = this.importXml(xml, dx, dy, crop, null,
+					(evt != null) ? mxEvent.isControlDown(evt) : null);
 			}
 			
 			if (done != null)
@@ -7979,7 +7984,8 @@
 				
 				if (xml != null && xml.length > 0)
 				{
-					cells = this.importXml(xml, dx, dy, crop);
+					cells = this.importXml(xml, dx, dy, crop, null, (evt != null) ?
+						mxEvent.isControlDown(evt) : null);
 					containsModel = true;
 				}
 			}
@@ -8054,7 +8060,8 @@
 		}
 		else if (!/(\.v(sd|dx))($|\?)/i.test(filename) && !/(\.vs(s|x))($|\?)/i.test(filename))
 		{
-			cells = this.insertTextAt(this.validateFileData(data), dx, dy, true, null, crop);
+			cells = this.insertTextAt(this.validateFileData(data), dx, dy, true,
+				null, crop, null, (evt != null) ? mxEvent.isControlDown(evt) : null);
 		}
 		
 		if (!async && done != null)
@@ -8069,7 +8076,7 @@
 	 * 
 	 */
 	EditorUi.prototype.importFiles = function(files, x, y, maxSize, fn, resultFn, filterFn, barrierFn,
-		resizeDialog, maxBytes, resampleThreshold, ignoreEmbeddedXml)
+		resizeDialog, maxBytes, resampleThreshold, ignoreEmbeddedXml, evt)
 	{
 		maxSize = (maxSize != null) ? maxSize : this.maxImageSize;
 		maxBytes = (maxBytes != null) ? maxBytes : this.maxImageBytes;
@@ -8115,7 +8122,8 @@
 					}
 					else
 					{
-						return this.importFile(data, mimeType, x, y, w, h, filename, done, file, crop, ignoreEmbeddedXml);
+						return this.importFile(data, mimeType, x, y, w, h, filename,
+							done, file, crop, ignoreEmbeddedXml, evt);
 					}
 				}
 				catch (e)
@@ -9331,8 +9339,8 @@
 								y = null;
 							}
 							
-							this.importFiles(evt.dataTransfer.files, x, y, this.maxImageSize, null, null, null, null,
+							this.importFiles(evt.dataTransfer.files, x, y, this.maxImageSize, null, null, null,
-								mxEvent.isControlDown(evt), null, null, mxEvent.isShiftDown(evt));
+								null, mxEvent.isControlDown(evt), null, null, mxEvent.isShiftDown(evt), evt);
 				    	}
 		    		}
 				    else
@@ -9404,7 +9412,8 @@
 				    		
 				    		var doInsert = mxUtils.bind(this, function()
 				    		{
-				    			graph.setSelectionCells(this.insertTextAt(html, x, y, true, asImage, null, resizeImages));
+				    			graph.setSelectionCells(this.insertTextAt(html, x, y, true,
+				    				asImage, null, resizeImages, mxEvent.isControlDown(evt)));
 				    		});
 				    		
 				    		if (asImage && html != null && html.length > this.resampleThreshold)
@@ -9449,7 +9458,8 @@
 			    evt.preventDefault();
 			}), false);
 		}
-		
+
+		graph.enableFlowAnimation = true;
 		this.initPages();
 
 		// Embedded mode

src/main/webapp/js/diagramly/Extensions.js

@@ -8,7 +8,7 @@ LucidImporter = {};
 (function()
 {
 	// Global import transformation
-	var defaultFontSize = '11';
+	var defaultFontSize = '13';
 	var defaultLucidFont = 'Liberation Sans';
 	var scale = 0.75;
 	var dx = 0;
@@ -3857,6 +3857,11 @@ LucidImporter = {};
 		return '';
 	};
 	
+	function fix1Digit(num)
+	{
+		return  Math.round(num * 10) / 10;	
+	};
+	
 	// actual code start
 	//TODO This can be optimized more
 	function convertTxt2Html(txt, srcM, props)
@@ -4016,21 +4021,67 @@ LucidImporter = {};
 			if (t != null)
 			{
 				str += '<li style="text-align:' + (styles['a']? styles['a'].v : (props.TextAlign || 'center')) + ';';
+				var color, fontSize;
 				
-				if (nonBlockStyles != null && nonBlockStyles['c'])
+				// Find font size/color
+				if (nonBlockStyles != null)
 				{
-					var v = rgbToHex(nonBlockStyles['c'].v);
+					if (nonBlockStyles['c'])
-					
-					if (v != null)
 					{
-						v = v.substring(0, 7);
+						color = nonBlockStyles['c'].v;
-						str += 'color:' + v + ';';
 					}
+					
+					if (nonBlockStyles['s'])
+					{
+						fontSize = nonBlockStyles['s'].v;
+					}
+				}
+					
+				try
+				{
+					var s = m[i], e = ends[j];
+					var it = i;
+					
+					if (s && e && s.s < e.e) //s can be null when all starts are used, e ends after s BUT sometimes there are errors in the file
+					{
+						var curS = s.s;
+		
+						while(s != null && s.s == curS)
+						{
+							if (s.n == 's')
+							{
+								fontSize = s.v;
+							}
+							else if (s.n == 'c')
+							{
+								color = s.v;
+							}
+							
+							s = m[++it];
+						}
+					}					
+				}
+				catch(e)
+				{
+					console.log(e);
+				}
+				
+				color = rgbToHex(color);
+				
+				if (color != null)
+				{
+					color = color.substring(0, 7);
+					str += 'color:' + color + ';';
+				}
+				
+				if (fontSize != null)
+				{
+					str += 'font-size:' + fix1Digit(fontSize * scale) + 'px;';
 				}
 				
 				str += '">';
 				openBlockTags.push('li');
-				str += '<span style="font-size:' + defaultFontSize + 'px;';
+				str += '<span style="';
 				openBlockTags.push('span');
 			}
 			
@@ -4048,34 +4099,34 @@ LucidImporter = {};
 					jc = 'flex-end';
 				}
 				
-				str += 'display: flex; justify-content: ' + jc + '; text-align: ' + tmp + '; align-items: baseline; font-size: 0; line-height: 1;';
+				str += 'display: flex; justify-content: ' + jc + '; text-align: ' + tmp + '; align-items: baseline; font-size: 0; line-height: 1.25;';
 			}
 			
 			if (styles['il'])
 			{
-				str += 'margin-left: ' + Math.max(0, Math.round(styles['il'].v * scale - (listActive? 28 : 0))) + 'px;';
+				str += 'margin-left: ' + Math.max(0, fix1Digit(styles['il'].v * scale - (listActive? 28 : 0))) + 'px;';
 			}
 
 			if (styles['ir'])
 			{
-				str += 'margin-right: ' + Math.round(styles['ir'].v * scale) + 'px;';
+				str += 'margin-right: ' + fix1Digit(styles['ir'].v * scale) + 'px;';
 			}
 
 			if (styles['mt'])
 			{
-				str += 'margin-top: ' + Math.round(styles['mt'].v * scale) + 'px;';
+				str += 'margin-top: ' + fix1Digit(styles['mt'].v * scale) + 'px;';
 			}
 
 			if (styles['mb'])
 			{
-				str += 'margin-bottom: ' + Math.round(styles['mb'].v * scale) + 'px;';
+				str += 'margin-bottom: ' + fix1Digit(styles['mb'].v * scale) + 'px;';
 			}
 
-			str += '">';
+			str += 'margin-top: -2px;">';
 			
 			if (!listActive)
 			{
-				str += '<span style="font-size:' + defaultFontSize + 'px;">';
+				str += '<span>';// Is this needed?
 				openBlockTags.push('span');
 			}
 			
@@ -4106,7 +4157,7 @@ LucidImporter = {};
 			openTags.push('span');
 			tagCount++;
 
-			str += 'font-size:' + (styles['s']? Math.floor(styles['s'].v * scale) : defaultFontSize) + 'px;';
+			str += 'font-size:' + (styles['s']? fix1Digit(styles['s'].v * scale) : defaultFontSize) + 'px;';
 
 			if (styles['c'])
 			{
@@ -4201,6 +4252,12 @@ LucidImporter = {};
 				str = str.trim();
 			}
 			
+			//If an endTag is called with no open tags, add a dummy startTag to have a font size
+			if (openTags.length == 0 && str.length > 0)
+			{
+				str = startTag({dummy: 1}) + str;
+			}
+			
 			str = str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 			
 			do
@@ -4321,7 +4378,7 @@ LucidImporter = {};
 		{
 			if (curE != maxE)
 			{
-				html += txt.substring(curE, maxE);
+				html += startTag({dummy: 1}) + endTag(txt, curE, maxE);
 			}
 			
 			html += endBlockTag(true); 
@@ -4658,7 +4715,7 @@ LucidImporter = {};
 					{
 						isV = true;
 						
-						return 'fontSize=' + Math.floor(currM.v * scale) + ';';
+						return 'fontSize=' + fix1Digit(currM.v * scale) + ';';
 					}
 				}
 				i++;
@@ -4897,7 +4954,7 @@ LucidImporter = {};
 				{
 					if (currM.n == 'il')
 					{
-						return 'spacingLeft=' + currM.v * scale + ';';
+						return 'spacingLeft=' + fix1Digit(currM.v * scale) + ';';
 					}
 					/*else
 					{
@@ -4938,7 +4995,7 @@ LucidImporter = {};
 					{
 						isIR = true;
 						
-						return 'spacingRight=' + currM.v * scale + ';';
+						return 'spacingRight=' + fix1Digit(currM.v * scale) + ';';
 					}
 				}
 				
@@ -4968,7 +5025,7 @@ LucidImporter = {};
 					if (currM.v != null)
 					{
 						isMT = true;
-						return 'spacingTop=' + currM.v * scale + ';';
+						return 'spacingTop=' + fix1Digit(currM.v * scale) + ';';
 					}
 				}
 				
@@ -4998,7 +5055,7 @@ LucidImporter = {};
 					if (currM.v != null)
 					{
 						isMB = true;
-						return 'spacingBottom=' + currM.v * scale + ';';
+						return 'spacingBottom=' + fix1Digit(currM.v * scale) + ';';
 					}
 				}
 				
@@ -5014,7 +5071,7 @@ LucidImporter = {};
 		//adds global spacing
 		if (typeof properties.InsetMargin === 'number')
 		{
-				return 'spacing=' + Math.max(0, Math.round(parseInt(properties.InsetMargin) * scale)) + ';';
+			return 'spacing=' + Math.max(0, fix1Digit((properties.InsetMargin) * scale)) + ';';
 		}
 	
 		return '';
@@ -5122,7 +5179,7 @@ LucidImporter = {};
 			{
 				if (properties.Rounding > 0)
 				{
-					return 'rounded=1;absoluteArcSize=1;arcSize=' + Math.round(properties.Rounding * scale) + ';';
+					return 'rounded=1;absoluteArcSize=1;arcSize=' + fix1Digit(properties.Rounding * scale) + ';';
 				}
 			}
 //			else if (properties.Rounding == null)
@@ -5317,7 +5374,7 @@ LucidImporter = {};
 	
 	function getStrokeWidth(properties)
 	{
-		return properties.LineWidth != null? createStyle(mxConstants.STYLE_STROKEWIDTH, Math.round(parseFloat(properties.LineWidth) * scale), '1') : '';
+		return properties.LineWidth != null? createStyle(mxConstants.STYLE_STROKEWIDTH, fix1Digit(parseFloat(properties.LineWidth) * scale), '1') : '';
 	}
 	
 	function getImage(properties, action, url)
@@ -5832,7 +5889,7 @@ LucidImporter = {};
 			{
 				if (obj.Value.m[i].n == 's')
 				{
-					size = scale * parseFloat(obj.Value.m[i].v);
+					size = fix1Digit(scale * parseFloat(obj.Value.m[i].v));
 				}
 				else if (obj.Value.m[i].n == 'c')
 				{

src/main/webapp/js/diagramly/GraphViewer.js

@@ -148,6 +148,7 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
 			var render = mxUtils.bind(this, function()
 			{
 				this.graph = new Graph(container);
+				this.graph.enableFlowAnimation = true;
 				this.graph.defaultPageBackgroundColor = 'transparent';
 				this.graph.transparentBackground = false;
 				
@@ -218,7 +219,7 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
 					this.editor.defaultGraphOverflow = 'visible';
 				}
 				
-				//Extract graph model from html & svg formats 
+				//Extract graph model from html & svg formats
 				this.xmlNode = this.editor.extractGraphModel(this.xmlNode, true);
 				
 				if (this.xmlNode != xmlNode)
@@ -1827,7 +1828,11 @@ GraphViewer.processElements = function(classname)
 		catch (e)
 		{
 			div.innerHTML = e.message;
-			throw e;
+			
+			if (window.console != null)
+			{
+				console.error(e);
+			}
 		}
 	});
 };

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

@@ -789,8 +789,12 @@
 						try
 						{
 							localStorage.removeItem('.configuration');
-							localStorage.removeItem('.drawio-config');
+							
-							localStorage.removeItem('.mode');
+							if (mxEvent.isShiftDown(evt))
+							{
+								localStorage.removeItem('.drawio-config');
+								localStorage.removeItem('.mode');
+							}
 							
 							editorUi.hideDialog();
 							editorUi.alert(mxResources.get('restartForChangeRequired'));

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

@@ -1569,28 +1569,46 @@ Graph.clipSvgDataUri = function(dataUri)
 			div.style.visibility = 'hidden';
 			
 			// Adds the text and inserts into DOM for updating of size
-			div.innerHTML = atob(dataUri.substring(26));
+			var data = decodeURIComponent(escape(atob(dataUri.substring(26))));
+			var idx = data.indexOf('<svg');
 			
-			// Removes all attributes starting with on
+			if (idx >= 0)
-			Graph.sanitizeSvg(div);
-			
-			// Gets the size and removes from DOM
-			var svgs = div.getElementsByTagName('svg');
-			
-			if (svgs.length > 0)
 			{
-				document.body.appendChild(div);
+				// Strips leading XML declaration and doctypes
-				var size = svgs[0].getBBox();
+				div.innerHTML = data.substring(idx);
-				document.body.removeChild(div);
+				
-			
+				// Removes all attributes starting with on
-				if (size.width > 0 && size.height > 0)
+				Graph.sanitizeSvg(div);
+				
+				// Gets the size and removes from DOM
+				var svgs = div.getElementsByTagName('svg');
+
+				if (svgs.length > 0)
 				{
-					div.getElementsByTagName('svg')[0].setAttribute('viewBox', size.x +
+					document.body.appendChild(div);
-						' ' + size.y + ' ' + size.width + ' ' + size.height);
-					div.getElementsByTagName('svg')[0].setAttribute('width', size.width);
-					div.getElementsByTagName('svg')[0].setAttribute('height', size.height);
 					
-					dataUri = 'data:image/svg+xml;base64,' + btoa(div.innerHTML);
+					try
+					{
+						var size = svgs[0].getBBox();
+
+						if (size.width > 0 && size.height > 0)
+						{
+							div.getElementsByTagName('svg')[0].setAttribute('viewBox', size.x +
+								' ' + size.y + ' ' + size.width + ' ' + size.height);
+							div.getElementsByTagName('svg')[0].setAttribute('width', size.width);
+							div.getElementsByTagName('svg')[0].setAttribute('height', size.height);
+						}
+					}
+					catch (e)
+					{
+						// ignore
+					}
+					finally
+					{	
+						document.body.removeChild(div);
+					}
+					
+					dataUri = Editor.createSvgDataUri(mxUtils.getXml(svgs[0]));
 				}
 			}
 		}
@@ -1793,6 +1811,11 @@ Graph.prototype.builtInProperties = ['label', 'tooltip', 'placeholders', 'placeh
  */
 Graph.prototype.standalone = false;
 
+/**
+ * Enables move of bends/segments without selecting.
+ */
+Graph.prototype.enableFlowAnimation = false;
+
 /**
  * Installs child layout styles.
  */
@@ -1849,6 +1872,16 @@ Graph.prototype.init = function(container)
 		});
 	};
 	
+	// Adds or updates CSS for flowAnimation style
+	this.addListener(mxEvent.SIZE, mxUtils.bind(this, function(sender, evt)
+	{
+		if (this.container != null && this.flowAnimationStyle)
+		{
+			var id = this.flowAnimationStyle.getAttribute('id');
+			this.flowAnimationStyle.innerHTML = this.getFlowAnimationStyleCss(id);
+		}
+	}));
+
 	this.initLayoutManager();
 };
 
@@ -4137,6 +4170,44 @@ Graph.prototype.getTooltipForCell = function(cell)
 	return tip;
 };
 
+/**
+ * Adds rack child layout style.
+ */
+Graph.prototype.getFlowAnimationStyle = function()
+{
+	var head = document.getElementsByTagName('head')[0];
+	
+	if (head != null && this.flowAnimationStyle == null)
+	{
+		this.flowAnimationStyle = document.createElement('style')
+		this.flowAnimationStyle.setAttribute('id',
+			'geEditorFlowAnimation-' + Editor.guid());
+		this.flowAnimationStyle.type = 'text/css';
+		var id = this.flowAnimationStyle.getAttribute('id');
+		this.flowAnimationStyle.innerHTML = this.getFlowAnimationStyleCss(id);
+
+		head.appendChild(this.flowAnimationStyle);
+	}
+
+	return this.flowAnimationStyle;
+};
+
+/**
+ * Adds rack child layout style.
+ */
+Graph.prototype.getFlowAnimationStyleCss = function(id)
+{
+	return '.' + id + ' {\n' +
+	  'animation: ' + id + ' 0.5s linear;\n' +
+	  'animation-iteration-count: infinite;\n' +
+	'}\n' +
+	'@keyframes ' + id + ' {\n' +
+	  'to {\n' +
+	    'stroke-dashoffset: ' + (this.view.scale * -16) + ';\n' +
+	  '}\n' +
+	'}';
+};
+
 /**
  * Turns the given string into an array.
  */
@@ -5672,7 +5743,40 @@ TableLayout.prototype.execute = function(parent)
 		
 		return state;
 	};
+	
+	/**
+	 * Overrides paint to add flowAnimation style.
+	 */
+	var mxShapePaint = mxShape.prototype.paint;
+	
+	mxShape.prototype.paint = function()
+	{
+		mxShapePaint.apply(this, arguments);
 
+		if (this.state != null && this.node != null &&
+			this.state.view.graph.enableFlowAnimation &&
+			this.state.view.graph.model.isEdge(this.state.cell) &&
+			mxUtils.getValue(this.state.style, 'flowAnimation', '0') == '1')
+		{
+			var paths = this.node.getElementsByTagName('path');
+			
+			if (paths.length > 1)
+			{
+				if (mxUtils.getValue(this.state.style, mxConstants.STYLE_DASHED, '0') != '1')
+				{
+					paths[1].setAttribute('stroke-dasharray', (this.state.view.scale * 8));
+				}
+				
+				var anim = this.state.view.graph.getFlowAnimationStyle();
+				
+				if (anim != null)
+				{
+					paths[1].setAttribute('class', anim.getAttribute('id'));
+				}
+			}
+		}
+	};
+	
 	/**
 	 * Forces repaint if routed points have changed.
 	 */

src/main/webapp/mxgraph/mxClient.js

@@ -1,4 +1,4 @@
-var mxClient={VERSION:"14.3.1",IS_IE:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("MSIE"),IS_IE6:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("MSIE 6"),IS_IE11:null!=navigator.userAgent&&!!navigator.userAgent.match(/Trident\/7\./),IS_EDGE:null!=navigator.userAgent&&!!navigator.userAgent.match(/Edge\//),IS_QUIRKS:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("MSIE")&&(null==document.documentMode||5==document.documentMode),IS_EM:"spellcheck"in document.createElement("textarea")&&
+var mxClient={VERSION:"14.3.2",IS_IE:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("MSIE"),IS_IE6:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("MSIE 6"),IS_IE11:null!=navigator.userAgent&&!!navigator.userAgent.match(/Trident\/7\./),IS_EDGE:null!=navigator.userAgent&&!!navigator.userAgent.match(/Edge\//),IS_QUIRKS:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("MSIE")&&(null==document.documentMode||5==document.documentMode),IS_EM:"spellcheck"in document.createElement("textarea")&&
 8==document.documentMode,VML_PREFIX:"v",OFFICE_PREFIX:"o",IS_NS:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("Mozilla/")&&0>navigator.userAgent.indexOf("MSIE")&&0>navigator.userAgent.indexOf("Edge/"),IS_OP:null!=navigator.userAgent&&(0<=navigator.userAgent.indexOf("Opera/")||0<=navigator.userAgent.indexOf("OPR/")),IS_OT:null!=navigator.userAgent&&0<=navigator.userAgent.indexOf("Presto/")&&0>navigator.userAgent.indexOf("Presto/2.4.")&&0>navigator.userAgent.indexOf("Presto/2.3.")&&0>navigator.userAgent.indexOf("Presto/2.2.")&&
 0>navigator.userAgent.indexOf("Presto/2.1.")&&0>navigator.userAgent.indexOf("Presto/2.0.")&&0>navigator.userAgent.indexOf("Presto/1."),IS_SF:/Apple Computer, Inc/.test(navigator.vendor),IS_ANDROID:0<=navigator.appVersion.indexOf("Android"),IS_IOS:/iP(hone|od|ad)/.test(navigator.platform),IS_GC:/Google Inc/.test(navigator.vendor),IS_CHROMEAPP:null!=window.chrome&&null!=chrome.app&&null!=chrome.app.runtime,IS_FF:"undefined"!==typeof InstallTrigger,IS_MT:0<=navigator.userAgent.indexOf("Firefox/")&&0>
 navigator.userAgent.indexOf("Firefox/1.")&&0>navigator.userAgent.indexOf("Firefox/2.")||0<=navigator.userAgent.indexOf("Iceweasel/")&&0>navigator.userAgent.indexOf("Iceweasel/1.")&&0>navigator.userAgent.indexOf("Iceweasel/2.")||0<=navigator.userAgent.indexOf("SeaMonkey/")&&0>navigator.userAgent.indexOf("SeaMonkey/1.")||0<=navigator.userAgent.indexOf("Iceape/")&&0>navigator.userAgent.indexOf("Iceape/1."),IS_VML:"MICROSOFT INTERNET EXPLORER"==navigator.appName.toUpperCase(),IS_SVG:"MICROSOFT INTERNET EXPLORER"!=

src/main/webapp/service-worker.js

@@ -6,11 +6,11 @@ if (workbox)
 	workbox.precaching.precacheAndRoute([
   {
     "url": "js/app.min.js",
-    "revision": "a2325780f416a14a1c9f3f06f8ed6c2d"
+    "revision": "aa86fcda2372ecd386f81cf66d169d83"
   },
   {
     "url": "js/extensions.min.js",
-    "revision": "55851b6a2150f678be7c76e2ed22ab65"
+    "revision": "c9e827e61a4923312643ac8ec2e4b4e5"
   },
   {
     "url": "js/stencils.min.js",
@@ -58,7 +58,7 @@ if (workbox)
   },
   {
     "url": "js/viewer-static.min.js",
-    "revision": "ca5d647f27aa8841f962bcf260fed362"
+    "revision": "c98a030e112941ea19629c7c9c7c4add"
   },
   {
     "url": "connect/jira/editor-1-3-3.html",
@@ -126,7 +126,7 @@ if (workbox)
   },
   {
     "url": "connect/confluence/viewer.js",
-    "revision": "13a998bf7cd4b3ce20988de54a24f781"
+    "revision": "050701c8fced7704411d306849da119a"
   },
   {
     "url": "connect/confluence/viewer-1-4-42.html",