9.2.5 release

Former-commit-id: 3a1f323e427d944ad208c5e3ef35cea286c9cd4f

ChangeLog

@@ -1,3 +1,10 @@
+14-OCT-2018: 9.2.5
+
+- Adds customPresetColors, override config option
+- Adds enabledLibraries, libraries config option
+- Adds templateFile config option
+- Uses mxGraph 3.9.11 beta 1
+
 11-OCT-2018: 9.2.4
 
 - Adds font, customFonts and -ColorSchemes config options

VERSION

@@ -1 +1 @@
-9.2.4
+9.2.5

src/main/webapp/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 10/11/2018 02:31 PM
+# 10/14/2018 12:44 PM
 
 app.html
 index.html?offline=1

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

@@ -456,87 +456,7 @@ App.main = function(callback, createUi)
 			frame.setAttribute('src', 'offline.html');
 			document.body.appendChild(frame);
 		}
-		
-		/**
-		 * Loading plugins.
-		 */
-		if (urlParams['plugins'] != '0' && urlParams['offline'] != '1')
-		{
-			var plugins = mxSettings.getPlugins();
-			var pluginsLoaded = {};
-			var temp = urlParams['p'];
-			App.initPluginCallback();
 
-			if (temp != null)
-			{
-				// Used to request draw.io sources in dev mode
-				var drawDevUrl = '';
-
-				if (urlParams['drawdev'] == '1')
-				{
-					drawDevUrl = document.location.protocol + '//drawhost.jgraph.com/';
-				}
-				
-				// Mapping from key to URL in App.plugins
-				var t = temp.split(';');
-				
-				for (var i = 0; i < t.length; i++)
-				{
-					var url = App.pluginRegistry[t[i]];
-					
-					if (url != null && pluginsLoaded[url] == null)
-					{
-						pluginsLoaded[url] = true;
-						mxscript(drawDevUrl + url);
-					}
-					else if (window.console != null)
-					{
-						console.log('Unknown plugin:', t[i]);
-					}
-				}
-			}
-			else if (urlParams['chrome'] != '0' && !EditorUi.isElectronApp)
-			{
-				mxscript(App.FOOTER_PLUGIN_URL, null, null, null, mxClient.IS_SVG);
-			}
-			
-			if (plugins != null && plugins.length > 0 && urlParams['plugins'] != '0')
-			{
-				// Loading plugins inside the asynchronous block below stops the page from loading so a 
-				// hardcoded message for the warning dialog is used since the resources are loadd below
-				var warning = 'The page has requested to load the following plugin(s):\n \n {1}\n \n Would you like to load these plugin(s) now?\n \n NOTE : Only allow plugins to run if you fully understand the security implications of doing so.\n';
-				var tmp = window.location.protocol + '//' + window.location.host;
-				var local = true;
-				
-				for (var i = 0; i < plugins.length && local; i++)
-				{
-					if (plugins[i].charAt(0) != '/' && plugins[i].substring(0, tmp.length) != tmp)
-					{
-						local = false;
-					}
-				}
-				
-				if (local || mxUtils.confirm(mxResources.replacePlaceholders(warning, [plugins.join('\n')]).replace(/\\n/g, '\n')))
-				{
-					for (var i = 0; i < plugins.length; i++)
-					{
-						try
-						{
-							if (pluginsLoaded[plugins[i]] == null)
-							{
-								pluginsLoaded[url] = true;
-								mxscript(plugins[i]);
-							}
-						}
-						catch (e)
-						{
-							// ignore
-						}
-					}
-				}
-			}
-		}
-		
 		// Loads gapi for all browsers but IE8 and below if not disabled or if enabled and in embed mode
 		// Special case: Cannot load in asynchronous code below
 		if (typeof window.DriveClient === 'function' &&
@@ -673,28 +593,90 @@ App.main = function(callback, createUi)
 			};
 		});
 	};
-	
-	function doConfigure(config)
+
+	function doMain()
 	{
-		try
+		
+		/**
+		 * Loading plugins.
+		 */
+		if (urlParams['plugins'] != '0' && urlParams['offline'] != '1')
 		{
-			var config = JSON.parse(decodeURIComponent(
-					window.location.hash.substring(2)));
-			Editor.configure(config, true);
+			var plugins = mxSettings.getPlugins();
+			var pluginsLoaded = {};
+			var temp = urlParams['p'];
+			App.initPluginCallback();
+
+			if (temp != null)
+			{
+				// Used to request draw.io sources in dev mode
+				var drawDevUrl = '';
+
+				if (urlParams['drawdev'] == '1')
+				{
+					drawDevUrl = document.location.protocol + '//drawhost.jgraph.com/';
+				}
+				
+				// Mapping from key to URL in App.plugins
+				var t = temp.split(';');
+				
+				for (var i = 0; i < t.length; i++)
+				{
+					var url = App.pluginRegistry[t[i]];
+					
+					if (url != null && pluginsLoaded[url] == null)
+					{
+						pluginsLoaded[url] = true;
+						mxscript(drawDevUrl + url);
+					}
+					else if (window.console != null)
+					{
+						console.log('Unknown plugin:', t[i]);
+					}
+				}
+			}
+			else if (urlParams['chrome'] != '0' && !EditorUi.isElectronApp)
+			{
+				mxscript(App.FOOTER_PLUGIN_URL, null, null, null, mxClient.IS_SVG);
+			}
 			
-			if (config.open != null)
+			if (plugins != null && plugins.length > 0 && urlParams['plugins'] != '0')
 			{
-				window.location.hash = config.open;
+				// Loading plugins inside the asynchronous block below stops the page from loading so a 
+				// hardcoded message for the warning dialog is used since the resources are loadd below
+				var warning = 'The page has requested to load the following plugin(s):\n \n {1}\n \n Would you like to load these plugin(s) now?\n \n NOTE : Only allow plugins to run if you fully understand the security implications of doing so.\n';
+				var tmp = window.location.protocol + '//' + window.location.host;
+				var local = true;
+				
+				for (var i = 0; i < plugins.length && local; i++)
+				{
+					if (plugins[i].charAt(0) != '/' && plugins[i].substring(0, tmp.length) != tmp)
+					{
+						local = false;
+					}
+				}
+				
+				if (local || mxUtils.confirm(mxResources.replacePlaceholders(warning, [plugins.join('\n')]).replace(/\\n/g, '\n')))
+				{
+					for (var i = 0; i < plugins.length; i++)
+					{
+						try
+						{
+							if (pluginsLoaded[plugins[i]] == null)
+							{
+								pluginsLoaded[url] = true;
+								mxscript(plugins[i]);
+							}
+						}
+						catch (e)
+						{
+							// ignore
+						}
+					}
+				}
 			}
 		}
-		catch (e)
-		{
-			console.log(e);
-		}
-	};
-	
-	function doMain()
-	{
+		
 		// Adds required resources (disables loading of fallback properties, this can only
 		// be used if we know that all keys are defined in the language specific file)
 		mxResources.loadDefaultBundle = false;
@@ -719,6 +701,7 @@ App.main = function(callback, createUi)
 					{
 						mxEvent.removeListener(window, 'message', configHandler);					
 						Editor.configure(data.config, true);
+						mxSettings.load();
 						doMain();
 					}
 				}

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

@@ -2649,7 +2649,7 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 	leftHighlight = (leftHighlight != null) ? leftHighlight : '#ebf2f9';
 	rightHighlight = (rightHighlight != null) ? rightHighlight : '#e6eff8';
 	rightHighlightBorder = (rightHighlightBorder != null) ? rightHighlightBorder : '1px solid #ccd9ea';
-	templateFile = (templateFile != null) ? templateFile : TEMPLATE_PATH + '/index.xml';
+	templateFile = (templateFile != null) ? templateFile : EditorUi.templateFile;
 	
 	var outer = document.createElement('div');
 	outer.style.height = '100%';
@@ -2775,7 +2775,8 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 		while (i0 < templates.length && (first || mxUtils.mod(i0, 30) != 0))
 		{
 			var tmp = templates[i0++];
-			addButton(tmp.url, tmp.libs, tmp.title, tmp.tooltip? tmp.tooltip : tmp.title, tmp.select, tmp.imgUrl, tmp.info, tmp.onClick);
+			addButton(tmp.url, tmp.libs, tmp.title, tmp.tooltip? tmp.tooltip : tmp.title,
+				tmp.select, tmp.imgUrl, tmp.info, tmp.onClick, tmp.preview);
 			first = false;
 		}
 	};
@@ -3025,7 +3026,7 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 		selectedElt.style.border = rightHighlightBorder;
 	};
 
-	function addButton(url, libs, title, tooltip, select, imgUrl, infoObj, onClick)
+	function addButton(url, libs, title, tooltip, select, imgUrl, infoObj, onClick, preview)
 	{
 		var elt = document.createElement('div');
 		elt.className = 'geTemplate';
@@ -3057,9 +3058,9 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 		}
 		else if (url != null && url.length > 0)
 		{
-			var png = url.substring(0, url.length - 4) + '.png';
+			var png = preview || (TEMPLATE_PATH + '/' + url.substring(0, url.length - 4) + '.png');
 			
-			elt.style.backgroundImage = 'url(' + TEMPLATE_PATH + '/' + url.substring(0, url.length - 4) + '.png)';
+			elt.style.backgroundImage = 'url(' + png + ')';
 			elt.style.backgroundPosition = 'center center';
 			elt.style.backgroundRepeat = 'no-repeat';
 			
@@ -3070,8 +3071,14 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 				createButton.setAttribute('disabled', 'disabled');
 				elt.style.backgroundColor = 'transparent';
 				elt.style.border = '1px solid transparent';
+				var realUrl = url;
+				
+				if (/^https?:\/\//.test(realUrl) && !editorUi.isCorsEnabledForUrl(realUrl))
+				{
+					realUrl = PROXY_URL + '?url=' + encodeURIComponent(realUrl);
+				}
 				
-				mxUtils.get(TEMPLATE_PATH + '/' + url, mxUtils.bind(this, function(req)
+				mxUtils.get(realUrl, mxUtils.bind(this, function(req)
 				{
 					if (req.getStatus() >= 200 && req.getStatus() <= 299)
 					{
@@ -3206,8 +3213,14 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 		outer.appendChild(list);
 		outer.appendChild(div);
 		var indexLoaded = false;
+		var realUrl = templateFile;
 		
-		mxUtils.get(templateFile, function(req)
+		if (/^https?:\/\//.test(realUrl) && !editorUi.isCorsEnabledForUrl(realUrl))
+		{
+			realUrl = PROXY_URL + '?url=' + encodeURIComponent(realUrl);
+		}
+		
+		mxUtils.get(realUrl, function(req)
 		{
 			// Workaround for index loaded 3 times in iOS offline mode
 			if (!indexLoaded)
@@ -3224,8 +3237,13 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 						
 						if (url != null)
 						{
-							var slash = url.indexOf('/');
-							var category = url.substring(0, slash);
+							var category = node.getAttribute('section');
+							
+							if (category == null)
+							{
+								var slash = url.indexOf('/');
+								category = url.substring(0, slash);
+							}
 							
 							var list = categories[category];
 							
@@ -3237,7 +3255,8 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 							}
 							
 							list.push({url: node.getAttribute('url'), libs: node.getAttribute('libs'),
-								title: node.getAttribute('title'), tooltip: node.getAttribute('url')});
+								title: node.getAttribute('title'), tooltip: node.getAttribute('url'),
+								preview: node.getAttribute('preview')});
 						}
 					}
 					
@@ -6390,7 +6409,58 @@ var MoreShapesDialog = function(editorUi, expanded, entries)
 {
 	entries = (entries != null) ? entries : editorUi.sidebar.entries;
 	var div = document.createElement('div');
-
+	var newEntries = [];
+	
+	// Adds custom sections first
+	if (editorUi.sidebar.customLibraries != null)
+	{
+		for (var i = 0; i < editorUi.sidebar.customLibraries.length; i++)
+		{
+			var section = editorUi.sidebar.customLibraries[i];
+			var tmp = {title: editorUi.getResource(section.title), entries: []};
+			
+			for (var j = 0; j < section.entries.length; j++)
+			{
+				var entry = section.entries[j];
+				tmp.entries.push({id: entry.id, title:
+					editorUi.getResource(entry.title),
+					desc: editorUi.getResource(entry.desc),
+					image: entry.preview});
+			}
+			
+			newEntries.push(tmp);
+		}
+	}
+	
+	// Adds built-in sections and filter entries
+	for (var i = 0; i < entries.length; i++)
+	{
+		if (editorUi.sidebar.enabledLibraries == null)
+		{
+			newEntries.push(entries[i]);
+		}
+		else
+		{
+			var tmp = {title: entries[i].title, entries: []};
+			
+			for (var j = 0; j < entries[i].entries.length; j++)
+			{
+				if (mxUtils.indexOf(editorUi.sidebar.enabledLibraries,
+					entries[i].entries[j].id) >= 0)
+				{
+					tmp.entries.push(entries[i].entries[j]);
+				}
+			}
+			
+			if (tmp.entries.length > 0)
+			{
+				newEntries.push(tmp);
+			}
+		}
+	}
+	
+	entries = newEntries;
+	
 	if (expanded)
 	{
 		var hd = document.createElement('div');
@@ -6480,17 +6550,35 @@ var MoreShapesDialog = function(editorUi, expanded, entries)
 						{
 							if (evt == null || mxEvent.getSource(evt).nodeName != 'INPUT')
 							{
+								preview.style.textAlign = 'center';
+								preview.style.padding = '0px';
+								preview.style.color = '';
+								preview.innerHTML = '';
+								
+								if (entry.desc != null)
+								{
+									var pre = document.createElement('pre');
+									pre.style.boxSizing = 'border-box';
+									pre.style.fontFamily = 'inherit';
+									pre.style.margin = '20px';
+									pre.style.right = '0px';
+									pre.style.textAlign = 'left';
+									mxUtils.write(pre, entry.desc);
+									preview.appendChild(pre);
+								}
+								
 								if (entry.imageCallback != null)
 								{
 									entry.imageCallback(preview);
 								}
 								else if (entry.image != null)
 								{
-									preview.innerHTML = '<img border="0" src="' + entry.image + '"/>';
+									preview.innerHTML += '<img border="0" src="' + entry.image + '"/>';
 								}
-								else
+								else if (entry.desc == null)
 								{
-									preview.innerHTML = '<br>';
+									preview.style.padding = '20px';
+									preview.style.color = 'rgb(179, 179, 179)';
 									mxUtils.write(preview, mxResources.get('noPreview'));
 								}
 								

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

@@ -69,6 +69,9 @@
 	 */
 	Editor.enableCustomProperties = true;
 
+	/**
+	 * Common properties for all edges.
+	 */
 	Editor.commonEdgeProperties = [
         {type: 'separator'},
         {name: 'arcSize', dispName: 'Arc Size', type: 'float', min:0, defVal: mxConstants.LINE_ARCSIZE},
@@ -95,7 +98,10 @@
         {name: 'deletable', dispName: 'Deletable', type: 'bool', defVal: true},
         {name: 'loopStyle', dispName: 'Loop Style', type: 'bool', defVal: true}
 	];
-	
+
+	/**
+	 * Common properties for all vertices.
+	 */
 	Editor.commonVertexProperties = [
         {type: 'separator'},
         {name: 'fillOpacity', dispName: 'Fill Opacity', type: 'int', min: 0, max: 100, defVal: 100},
@@ -266,13 +272,30 @@
 			Menus.prototype.defaultFonts = config.defaultFonts || Menus.prototype.defaultFonts;
 			ColorDialog.prototype.presetColors = config.presetColors || ColorDialog.prototype.presetColors;
 			ColorDialog.prototype.defaultColors = config.defaultColors || ColorDialog.prototype.defaultColors;
-			StyleFormatPanel.prototype.customColorSchemes = config.customColorSchemes || StyleFormatPanel.prototype.customColorSchemes;
 			StyleFormatPanel.prototype.defaultColorSchemes = config.defaultColorSchemes || StyleFormatPanel.prototype.defaultColorSchemes;
 			Graph.prototype.defaultEdgeLength = config.defaultEdgeLength || Graph.prototype.defaultEdgeLength;
 			
+			if (config.templateFile != null)
+			{
+				EditorUi.templateFile = config.templateFile;
+			}
+			
 			if (config.customFonts)
 			{
-				Menus.prototype.defaultFonts = config.customFonts.concat(Menus.prototype.defaultFonts);
+				Menus.prototype.defaultFonts = config.customFonts.
+					concat(Menus.prototype.defaultFonts);
+			}
+			
+			if (config.customPresetColors)
+			{
+				ColorDialog.prototype.presetColors = config.customPresetColors.
+					concat(ColorDialog.prototype.presetColors);
+			}
+			
+			if (config.customColorSchemes != null)
+			{
+				StyleFormatPanel.prototype.defaultColorSchemes = config.customColorSchemes.
+					concat(StyleFormatPanel.prototype.defaultColorSchemes);
 			}
 			
 			// Custom CSS injected directly into the page
@@ -286,6 +309,18 @@
 			  	t.parentNode.insertBefore(s, t);
 			}
 			
+			// Configures the custom libraries
+			if (config.libraries != null)
+			{
+				Sidebar.prototype.customLibraries = config.libraries;
+			}
+			
+			// Defines the enabled built-in libraries.
+			if (config.enabledLibraries != null)
+			{
+				Sidebar.prototype.enabledLibraries = config.enabledLibraries;
+			}
+			
 			// Overrides default libraries
 			if (config.defaultLibraries != null)
 			{
@@ -1948,12 +1983,12 @@
 						select.value = pValue;
 						
 						div.appendChild(select);
-						
+
 						mxEvent.addListener(select, 'change', function()
 						{
 							var newVal = mxUtils.htmlEntities(select.value);
 							applyStyleVal(pName, newVal, prop);
-							td.innerHTML = newVal;
+							//set value triggers a redraw of the panel which removes the select and updates the row
 						});
 			
 						select.focus();
@@ -2001,12 +2036,8 @@
 						
 						div.appendChild(input);
 
-						var dontSet = false;
-						
 						function setInputVal()
 						{
-							if (dontSet) return;
-							
 							var inputVal = input.value;
 							
 							if (prop.min != null && inputVal < prop.min)
@@ -2021,7 +2052,6 @@
 							var newVal = mxUtils.htmlEntities((pType == "int"? parseInt(inputVal) : inputVal) + '');
 							
 							applyStyleVal(pName, newVal, prop);
-							td.innerHTML = newVal;
 						}
 						
 						mxEvent.addListener(input, 'change', setInputVal);
@@ -2030,13 +2060,7 @@
 							if (e.keyCode == 13) 
 							{
 								setInputVal();
-								
-								try
-								{
-									dontSet = true;
-									div.removeChild(input);
-								}
-								catch(e){}
+								//set value triggers a redraw of the panel which removes the input
 							}
 						});
 						
@@ -2100,6 +2124,22 @@
 				{
 					collapseImg.src = Sidebar.prototype.collapsedImage;
 					display = 'none';
+					
+					for (var e = div.childNodes.length - 1; e >= 0 ; e--)
+					{
+						//Blur can be executed concurrently with this method and the element is removed before removing it here
+						try
+						{
+							var child = div.childNodes[e]; 
+							var nodeName = child.nodeName.toUpperCase();
+							
+							if (nodeName == 'INPUT' || nodeName == 'SELECT')
+							{
+								div.removeChild(child);
+							}
+						}
+						catch(ex){}
+					}
 				}
 				
 				for (var r = 0; r < rows.length; r++)
@@ -2323,11 +2363,6 @@
 			{
 				this.editorUi.currentScheme = 0;
 			}
-			
-			if (this.customColorSchemes != null)
-			{
-				this.defaultColorSchemes = this.customColorSchemes.concat(this.defaultColorSchemes);
-			}
 
 			var left = document.createElement('div');
 			left.style.cssText = 'position:absolute;left:10px;top:8px;bottom:8px;width:20px;margin:4px;opacity:0.5;' +

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

@@ -19,7 +19,12 @@
 	 */
 	EditorUi.enableLogging = /.*\.draw\.io$/.test(window.location.hostname) &&
 		window.location.hostname != 'support.draw.io';
-
+	
+	/**
+	 * Specifies the URL for the templates index file.
+	 */
+	EditorUi.templateFile = TEMPLATE_PATH + '/index.xml';
+	
 	/**
 	 * Switch to enable PlantUML in the insert from text dialog.
 	 * NOTE: This must also be enabled on the server-side.
@@ -123,16 +128,6 @@
 	 */
 	EditorUi.prototype.closableScratchpad = true;
 
-	/**
-	 * Specifies if current edge style should be persisted. Default is false.
-	 */
-	EditorUi.prototype.persistCurrentEdgeStyle = false;
-
-	/**
-	 * Specifies if current vertex style should be persisted. Default is false.
-	 */
-	EditorUi.prototype.persistCurrentVertexStyle = false;
-	
 	/**
 	 * Capability check for canvas export
 	 */
@@ -2091,35 +2086,7 @@
 			}
 			else
 			{
-				for (var i = 0; i < imgs.length; i++)
-				{
-					var img = imgs[i];
-					var data = img.data;
-		
-					if (data != null)
-					{
-						data = this.convertDataUri(data);
-						var s = 'shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;';
-						
-						if (img.aspect == 'fixed')
-						{
-							s += 'aspect=fixed;'
-						}
-						
-						content.appendChild(this.sidebar.createVertexTemplate(s + 'image=' +
-							data, img.w, img.h, '', img.title || '', false, false, true));
-					}
-					else if (img.xml != null)
-					{
-						var cells = this.stringToCells(this.editor.graph.decompress(img.xml));
-						
-						if (cells.length > 0)
-						{
-							content.appendChild(this.sidebar.createVertexTemplateFromCells(
-								cells, img.w, img.h, img.title || '', true, false, true));
-						}
-					}
-				}
+				this.addLibraryEntries(imgs, content);
 			}
 		});
 
@@ -2666,6 +2633,53 @@
 		title.style.paddingRight = (buttons.childNodes.length * btnWidth) + 'px';
 	};
 
+	/**
+	 * Adds the library entries to the given DOM node.
+	 */
+	EditorUi.prototype.addLibraryEntries = function(imgs, content)
+	{
+		for (var i = 0; i < imgs.length; i++)
+		{
+			var img = imgs[i];
+			var data = img.data;
+
+			if (data != null)
+			{
+				data = this.convertDataUri(data);
+				var s = 'shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;';
+				
+				if (img.aspect == 'fixed')
+				{
+					s += 'aspect=fixed;'
+				}
+				
+				content.appendChild(this.sidebar.createVertexTemplate(s + 'image=' +
+					data, img.w, img.h, '', img.title || '', false, false, true));
+			}
+			else if (img.xml != null)
+			{
+				var cells = this.stringToCells(this.editor.graph.decompress(img.xml));
+				
+				if (cells.length > 0)
+				{
+					content.appendChild(this.sidebar.createVertexTemplateFromCells(
+						cells, img.w, img.h, img.title || '', true, false, true));
+				}
+			}
+		}
+	};
+
+	/**
+	 * Extracts the resource for the current language from the given multi language
+	 * resource object of the form {es: "...", de: "...", main: "..."} where the keys
+	 * are country codes and main defines the fallback if no resource for the current
+	 * country code exists.
+	 */
+	EditorUi.prototype.getResource = function(obj)
+	{
+		return (obj != null) ? (obj[mxLanguage] || obj.main) : null;
+	};
+	
 	/**
 	 * EditorUi Overrides
 	 */
@@ -7258,18 +7272,6 @@
 		this.clearDefaultStyle = function()
 		{
 			clearDefaultStyle.apply(this, arguments);
-			
-			if (!this.persistCurrentEdgeStyle)
-			{
-				mxSettings.setCurrentEdgeStyle(this.editor.graph.currentEdgeStyle);
-				mxSettings.save();
-			}
-			
-			if (!this.persistCurrentVertexStyle)
-			{
-				mxSettings.setCurrentVertexStyle(this.editor.graph.currentVertexStyle);
-				mxSettings.save();
-			}
 		};
 		
 		// Sets help link for placeholders
@@ -8133,29 +8135,8 @@
 			// Gets recent colors from settings
 			ColorDialog.recentColors = mxSettings.getRecentColors();
 
-			/**
-			 * Persists current edge style.
-			 */
-			this.editor.graph.currentEdgeStyle = mxSettings.getCurrentEdgeStyle();
-			this.editor.graph.currentVertexStyle = mxSettings.getCurrentVertexStyle();
-			
 			// Updates UI to reflect current edge style
 			this.fireEvent(new mxEventObject('styleChanged', 'keys', [], 'values', [], 'cells', []));
-			
-			this.addListener('styleChanged', mxUtils.bind(this, function(sender, evt)
-			{
-				if (this.persistCurrentEdgeStyle)
-				{
-					mxSettings.setCurrentEdgeStyle(this.editor.graph.currentEdgeStyle);
-					mxSettings.save();
-				}
-				
-				if (this.persistCurrentVertexStyle)
-				{
-					mxSettings.setCurrentVertexStyle(this.editor.graph.currentVertexStyle);
-					mxSettings.save();
-				}
-			}));
 
 			/**
 			 * Persists copy on connect switch.

src/main/webapp/js/diagramly/Init.js

@@ -4,6 +4,9 @@ window.urlParams = window.urlParams || {};
 // isLocalStorage controls access to local storage
 window.isLocalStorage = window.isLocalStorage || false;
 
+// Disables loading settings in configured mode
+window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
+
 // Checks for SVG support
 window.isSvgBrowser = window.isSvgBrowser || (navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 9);
 

src/main/webapp/js/diagramly/Settings.js

@@ -10,7 +10,7 @@ var mxSettings =
 	/**
 	 * Defines current version of settings.
 	 */
-	currentVersion: 16,
+	currentVersion: 17,
 	
 	defaultFormatWidth: (screen.width < 600) ? '0' : '240',
 	
@@ -136,22 +136,6 @@ var mxSettings =
 	{
 		mxSettings.settings.formatWidth = formatWidth;
 	},
-	getCurrentEdgeStyle: function()
-	{
-		return mxSettings.settings.currentEdgeStyle;
-	},
-	setCurrentEdgeStyle: function(value)
-	{
-		mxSettings.settings.currentEdgeStyle = value;
-	},
-	getCurrentVertexStyle: function()
-	{
-		return mxSettings.settings.currentVertexStyle;
-	},
-	setCurrentVertexStyle: function(value)
-	{
-		mxSettings.settings.currentVertexStyle = value;
-	},
 	isCreateTarget: function()
 	{
 		return mxSettings.settings.createTarget;
@@ -179,8 +163,6 @@ var mxSettings =
 			plugins: [],
 			recentColors: [],
 			formatWidth: mxSettings.defaultFormatWidth,
-			currentEdgeStyle: Graph.prototype.defaultEdgeStyle,
-			currentVertexStyle: Graph.prototype.defaultVertexStyle,
 			createTarget: false,
 			pageFormat: mxGraph.prototype.pageFormat,
 			search: true,
@@ -228,7 +210,8 @@ var mxSettings =
 		{
 			var temp = JSON.parse(value);
 			
-			if (temp.configVersion != Editor.configVersion)
+			if ((Editor.config != null && Editor.config.override) ||
+				temp.configVersion != Editor.configVersion)
 			{
 				mxSettings.settings = null;
 			}
@@ -271,22 +254,6 @@ var mxSettings =
 					delete mxSettings.settings.lastAlert;
 				}
 				
-				if (mxSettings.settings.currentEdgeStyle == null)
-				{
-					mxSettings.settings.currentEdgeStyle = Graph.prototype.defaultEdgeStyle;
-				}
-				else if (mxSettings.settings.version <= 10)
-				{
-					// Adds new defaults for jetty size and loop routing
-					mxSettings.settings.currentEdgeStyle['orthogonalLoop'] = 1;
-					mxSettings.settings.currentEdgeStyle['jettySize'] = 'auto';
-				}
-				
-				if (mxSettings.settings.currentVertexStyle == null)
-				{
-					mxSettings.settings.currentVertexStyle = Graph.prototype.defaultVertexStyle;
-				}
-				
 				if (mxSettings.settings.createTarget == null)
 				{
 					mxSettings.settings.createTarget = false;

src/main/webapp/js/diagramly/sidebar/Sidebar.js

@@ -127,6 +127,19 @@
 	 */
 	Sidebar.prototype.electrical = ['LogicGates', 'Resistors', 'Capacitors', 'Inductors', 'SwitchesRelays', 'Diodes', 'Sources', 'Transistors', 'Misc', 'Audio', 'PlcLadder', 'Abstract', 'Optical', 'VacuumTubes', 'Waveforms', 'Instruments', 'RotMech', 'Transmission'];
 
+	/**
+	 * Description of custom libraries, see https://desk.draw.io/a/solutions/articles/16000058316
+	 */
+	Sidebar.prototype.customLibraries = null;
+	
+	/**
+	 * Array of strings for the built-in libraries to be enabled in the more shapes dialog. Null means all,
+	 * empty array means none, possible keys are listed for the libs parameter at
+	 * 
+	 * https://desk.draw.io/support/solutions/articles/16000042546
+	 */
+	Sidebar.prototype.enabledLibraries = null;
+
 	/**
 	 *
 	 */
@@ -302,6 +315,36 @@
 				{
 					return elts[0].style.display != 'none';
 				}
+				
+				break;
+			}
+		}
+		
+		if (this.customLibraries != null)
+		{
+			for (var i = 0; i < this.customLibraries.length; i++)
+			{
+				var section = this.customLibraries[i];
+				
+				for (var j = 0; j < section.entries.length; j++)
+				{
+					var entry = section.entries[j];
+					
+					if (entry.id == key)
+					{
+						if (entry.libs != null && entry.libs.length > 0)
+						{
+							var elts = this.palettes[entry.id + '.0'];
+							
+							if (elts != null)
+							{
+								return elts[0].style.display != 'none';
+							}
+						}
+					
+						break;
+					}
+				}
 			}
 		}
 		
@@ -334,6 +377,31 @@
 			}
 		}
 		
+		if (this.customLibraries != null)
+		{
+			for (var i = 0; i < this.customLibraries.length; i++)
+			{
+				var section = this.customLibraries[i];
+				
+				for (var j = 0; j < section.entries.length; j++)
+				{
+					var entry = section.entries[j];
+					
+					if (entry.libs != null && entry.libs.length > 0)
+					{
+						var libs = [];
+						
+						for (var k = 0; k < entry.libs.length; k++)
+						{
+							libs.push(entry.id + '.' + k);
+						}
+						
+						this.showPalettes('', libs, mxUtils.indexOf(tmp, entry.id) >= 0);
+					}
+				}
+			}
+		}
+		
 		if (remember)
 		{
 			mxSettings.setLibraries(stc);
@@ -686,7 +754,91 @@
 		}
 
 		this.addSearchPalette(true);
-		this.addGeneralPalette(true);
+		
+		// Adds custom sections first
+		if (this.customLibraries != null)
+		{
+			for (var i = 0; i < this.customLibraries.length; i++)
+			{
+				var section = this.customLibraries[i];
+				
+				for (var j = 0; j < section.entries.length; j++)
+				{
+					var entry = section.entries[j];
+					
+					for (var k = 0; k < entry.libs.length; k++)
+					{
+						(mxUtils.bind(this, function(lib)
+						{
+							this.addPalette(entry.id + '.' + k, this.editorUi.getResource(lib.title),
+								false, mxUtils.bind(this, function(content, title)
+							{
+								var dataLoaded = mxUtils.bind(this, function(images)
+								{
+									this.editorUi.addLibraryEntries(images, content);
+								});
+								
+								var showError = mxUtils.bind(this, function(err)
+								{
+									content.innerHTML = '';
+									var div = document.createElement('div');
+									div.style.color = 'rgb(179, 179, 179)';
+									div.style.textAlign = 'center';
+									div.style.paddingTop = '6px';
+									mxUtils.write(div, err);
+									content.appendChild(div);
+								});
+								
+								if (lib.data)
+								{
+									dataLoaded(lib.data);
+								}
+								else
+								{
+									content.style.display = 'none';
+									title.innerHTML = '';
+									mxUtils.write(title, mxResources.get('loading') + '...');
+									var url = lib.url;
+									
+									if (!this.editorUi.isCorsEnabledForUrl(url))
+									{
+										url = PROXY_URL + '?url=' + encodeURIComponent(url);
+									}
+									
+									this.editorUi.loadUrl(url, mxUtils.bind(this, function(data)
+									{
+										content.style.display = 'block';
+										title.innerHTML = '';
+										mxUtils.write(title, this.editorUi.getResource(lib.title));
+
+										try
+										{
+											var doc = mxUtils.parseXml(data);
+											
+											if (doc.documentElement.nodeName == 'mxlibrary')
+											{
+												var images = JSON.parse(mxUtils.getTextContent(doc.documentElement));
+												dataLoaded(images);
+											}
+											else
+											{
+												showError(mxResources.get('notALibraryFile'));
+											}
+										}
+										catch (e)
+										{
+											showError(mxResources.get('error') + ': ' + e.message);
+										}
+									}));
+								}
+							}));
+						}))(entry.libs[k]);
+					}
+				}
+			}
+		}
+		
+		this.addGeneralPalette(this.customLibraries == null);
 		this.addMiscPalette(false);
 		this.addAdvancedPalette(false);
 		this.addUmlPalette(false);

src/main/webapp/js/mxgraph/EditorUi.js

@@ -3331,6 +3331,8 @@ EditorUi.prototype.pickColor = function(color, apply)
 {
 	var graph = this.editor.graph;
 	var selState = graph.cellEditor.saveSelection();
+	var h = 226 + ((Math.ceil(ColorDialog.prototype.presetColors.length / 12) +
+		Math.ceil(ColorDialog.prototype.defaultColors.length / 12)) * 17);
 	
 	var dlg = new ColorDialog(this, color || 'none', function(color)
 	{
@@ -3340,7 +3342,7 @@ EditorUi.prototype.pickColor = function(color, apply)
 	{
 		graph.cellEditor.restoreSelection(selState);
 	});
-	this.showDialog(dlg.container, 230, 430, true, false);
+	this.showDialog(dlg.container, 230, h, true, false);
 	dlg.init();
 };
 

src/main/webapp/js/mxgraph/Menus.js

@@ -875,6 +875,8 @@ Menus.prototype.promptChange = function(menu, label, hint, defaultValue, key, pa
 Menus.prototype.pickColor = function(key, cmd, defaultValue)
 {
 	var graph = this.editorUi.editor.graph;
+	var h = 226 + ((Math.ceil(ColorDialog.prototype.presetColors.length / 12) +
+			Math.ceil(ColorDialog.prototype.defaultColors.length / 12)) * 17);
 	
 	if (cmd != null && graph.cellEditor.isContentEditing())
 	{
@@ -889,7 +891,7 @@ Menus.prototype.pickColor = function(key, cmd, defaultValue)
 		{
 			graph.cellEditor.restoreSelection(selState);
 		});
-		this.editorUi.showDialog(dlg.container, 230, 430, true, true);
+		this.editorUi.showDialog(dlg.container, 230, h, true, true);
 		dlg.init();
 	}
 	else
@@ -919,7 +921,7 @@ Menus.prototype.pickColor = function(key, cmd, defaultValue)
 			this.colorDialog.picker.fromString(color);
 		}
 	
-		this.editorUi.showDialog(this.colorDialog.container, 230, 430, true, true);
+		this.editorUi.showDialog(this.colorDialog.container, 230, h, true, true);
 		this.colorDialog.init();
 	}
 };

src/main/webapp/js/mxgraph/Sidebar.js

@@ -3402,13 +3402,14 @@ Sidebar.prototype.addFoldingHandler = function(title, content, funct)
 					
 					window.setTimeout(function()
 					{
-						var fo = mxClient.NO_FO;
-						mxClient.NO_FO = Editor.prototype.originalNoForeignObject;
-						funct(content);
-						mxClient.NO_FO = fo;
 						content.style.display = 'block';
 						title.style.cursor = '';
 						title.innerHTML = prev;
+
+						var fo = mxClient.NO_FO;
+						mxClient.NO_FO = Editor.prototype.originalNoForeignObject;
+						funct(content, title);
+						mxClient.NO_FO = fo;
 					}, 0);
 				}
 				else

src/main/webapp/templates/index.xml

@@ -30,7 +30,6 @@
 <template url="flowcharts/flowchart_1.xml" libs="general;flowchart"/>
 <template url="flowcharts/flowchart_2.xml" libs="general;flowchart"/>
 <template url="flowcharts/workflow_1.xml" libs="general;flowchart"/>
-
 <template url="gcp/backup_and_archive_api_hosting.xml" libs="gcp2"/>
 <template url="gcp/backup_and_archive_disaster_recovery_cold_standby_server.xml" libs="gcp2"/>
 <template url="gcp/backup_and_archive_disaster_recovery_warm_static_site.xml" libs="gcp2"/>
@@ -86,7 +85,6 @@
 <template url="gcp/websites_mobile_site_hosting.xml" libs="gcp2"/>
 <template url="gcp/websites_multiple_network_interfaces.xml" libs="gcp2"/>
 <template url="gcp/websites_static_hosting.xml" libs="gcp2"/>
-		
 <template url="layout/blog_wireframe.xml" libs="general;mockups"/>
 <template url="layout/bootstrap.xml" libs="general;bootstrap"/>
 <template url="layout/wireframe_1.xml" libs="general;mockups"/>