20.8.16 release

.snyk

@@ -0,0 +1,4 @@
+# Snyk (https://snyk.io) policy file
+exclude:
+ global:
+   - etc/vsdx/src/com/mxgraph/vsdxImport

ChangeLog

@@ -1,3 +1,11 @@
+02-FEB-2023: 20.8.16
+
+- Fixes overriden CSS for buttons and button states [drawio-3326]
+- Uses manifest version 3 in Notion Chrome extension
+- Fixes possible NPE in async resize handler
+- Clear default style action disables sketch mode [drawio-3331]
+- View sketch option no longer updates existing cells[drawio-3331]
+
 01-FEB-2023: 20.8.15
 
 - Adds debug output, improves UX in Notion extension

VERSION

@@ -1 +1 @@
-20.8.15
+20.8.16

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

@@ -371,13 +371,13 @@ App.loadScripts = function(scripts, onload, onerror)
 			{
 				onload();
 			}
-		}, null, null, null, function(e)
+		}, null, null, null, function(message)
 		{
 			failed = true;
 
 			if (onerror != null)
 			{
-				onerror(e);
+				onerror(new Error(message));
 			}
 		});
 	}
@@ -1047,7 +1047,7 @@ App.main = function(callback, createUi)
 						}
 						else
 						{
-							EditorUi.logError(e.message, null, null, e);
+							EditorUi.logError(e.message, null, null, null, e);
 							alert(e.message);
 						}
 					}
@@ -1061,7 +1061,13 @@ App.main = function(callback, createUi)
 				{
 					mxStencilRegistry.allowEval = false;
 					App.loadScripts(['js/shapes-14-6-5.min.js', 'js/stencils.min.js',
-						'js/extensions.min.js'], realMain);
+						'js/extensions.min.js'], realMain, function(e)
+						{
+							document.body.innerHTML = '';
+							var pre = document.createElement('pre');
+							mxUtils.write(pre, e.stack);
+							document.body.appendChild(pre);
+						});
 				}
 			}, function(xhr)
 			{
@@ -1155,7 +1161,7 @@ App.main = function(callback, createUi)
 						}
 					}
 				}
-			
+				
 				// 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;
@@ -1164,16 +1170,10 @@ App.main = function(callback, createUi)
 			}
 			catch (e)
 			{
-				if (EditorUi.isElectronApp)
-				{
-					mxLog.show();
-					mxLog.debug(e.stack);
-				}
-				else
-				{
-					EditorUi.logError(e.message, null, null, e);
-					alert(e.message);
-				}
+				document.body.innerHTML = '';
+				var pre = document.createElement('pre');
+				mxUtils.write(pre, e.stack);
+				document.body.appendChild(pre);
 			}
 		};
 
@@ -1285,15 +1285,10 @@ App.main = function(callback, createUi)
 	}
 	catch (e)
 	{
-		if (window.console != null && !EditorUi.isElectronApp)
-		{
-			console.error(e);
-		}
-		else
-		{
-			mxLog.show();
-			mxLog.debug(e.stack);
-		}
+		document.body.innerHTML = '';
+		var pre = document.createElement('pre');
+		mxUtils.write(pre, e.stack);
+		document.body.appendChild(pre);
 	}
 };
 
@@ -2939,64 +2934,80 @@ App.prototype.loadGapi = function(then)
  */
 App.prototype.load = function()
 {
-	// Checks if we're running in embedded mode
-	if (urlParams['embed'] != '1')
+	try
 	{
-		if (this.spinner.spin(document.body, mxResources.get('starting')))
+		// Checks if we're running in embedded mode
+		if (urlParams['embed'] != '1')
 		{
-			try
-			{
-				this.stateArg = (urlParams['state'] != null && this.drive != null) ? JSON.parse(decodeURIComponent(urlParams['state'])) : null;
-			}
-			catch (e)
-			{
-				// ignores invalid state args
-			}
-			
-			this.editor.graph.setEnabled(this.getCurrentFile() != null);
-			
-			// Passes the userId from the state parameter to the client
-			if ((window.location.hash == null || window.location.hash.length == 0) &&
-				this.drive != null && this.stateArg != null && this.stateArg.userId != null)
+			if (this.spinner.spin(document.body, mxResources.get('starting')))
 			{
-				this.drive.setUserId(this.stateArg.userId);
-			}
+				try
+				{
+					this.stateArg = (urlParams['state'] != null && this.drive != null) ? JSON.parse(decodeURIComponent(urlParams['state'])) : null;
+				}
+				catch (e)
+				{
+					// ignores invalid state args
+				}
+				
+				this.editor.graph.setEnabled(this.getCurrentFile() != null);
+				
+				// Passes the userId from the state parameter to the client
+				if ((window.location.hash == null || window.location.hash.length == 0) &&
+					this.drive != null && this.stateArg != null && this.stateArg.userId != null)
+				{
+					this.drive.setUserId(this.stateArg.userId);
+				}
 
-			// Legacy support for fileId parameter which is moved to the hash tag
-			if (urlParams['fileId'] != null)
-			{
-				window.location.hash = 'G' + urlParams['fileId'];
-				window.location.search = this.getSearch(['fileId']);
-			}
-			else
-			{
-				// Asynchronous or disabled loading of client
-				if (this.drive == null)
+				// Legacy support for fileId parameter which is moved to the hash tag
+				if (urlParams['fileId'] != null)
 				{
-					if (this.mode == App.MODE_GOOGLE)
-					{
-						this.mode = null;
-					}
-					
-					this.start();
+					window.location.hash = 'G' + urlParams['fileId'];
+					window.location.search = this.getSearch(['fileId']);
 				}
 				else
 				{
-					this.loadGapi(mxUtils.bind(this, function()
+					// Asynchronous or disabled loading of client
+					if (this.drive == null)
 					{
+						if (this.mode == App.MODE_GOOGLE)
+						{
+							this.mode = null;
+						}
+						
 						this.start();
-					}));
+					}
+					else
+					{
+						this.loadGapi(mxUtils.bind(this, function()
+						{
+							this.start();
+						}));
+					}
 				}
 			}
 		}
+		else
+		{
+			this.restoreLibraries();
+			
+			if (urlParams['gapi'] == '1')
+			{
+				this.loadGapi(function() {});
+			}
+		}
 	}
-	else
+	catch (e)
 	{
-		this.restoreLibraries();
-		
-		if (urlParams['gapi'] == '1')
+		if (EditorUi.isElectronApp)
+		{
+			mxLog.show();
+			mxLog.debug(e.stack);
+		}
+		else
 		{
-			this.loadGapi(function() {});
+			EditorUi.logError(e.message, null, null, null, e);
+			alert(e.message);
 		}
 	}
 };

src/main/webapp/js/diagramly/Devel.js

@@ -304,3 +304,6 @@ if (urlParams['orgChartDev'] == '1')
 
 // Miro Import
 mxscript(drawDevUrl + 'js/diagramly/miro/MiroImporter.js');
+
+// Mermaid to draw.io converter
+mxscript(drawDevUrl + 'js/mermaid/mermaid2drawio.js');

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

@@ -13146,79 +13146,49 @@ var ConnectionPointsDialog = function(editorUi, cell)
 		editingGraph.fit(8);
 		editingGraph.center();
 
-		var zoomInBtn = mxUtils.button('', function()
+		var zoomInBtn = editorUi.createToolbarButton(Editor.zoomInImage,
+			mxResources.get('zoomIn'), function()
 		{
 			editingGraph.zoomIn();
-		});
-		zoomInBtn.className = 'geSprite geSprite-zoomin';
-		zoomInBtn.setAttribute('title', mxResources.get('zoomIn'));
-		zoomInBtn.style.position = 'relative';
-		zoomInBtn.style.outline = 'none';
-		zoomInBtn.style.border = 'none';
-		zoomInBtn.style.margin = '2px';
-		zoomInBtn.style.cursor = 'pointer';
-		zoomInBtn.style.top = (mxClient.IS_FF) ? '-6px' : '0px';
-		mxUtils.setOpacity(zoomInBtn, 60);
-		
-		var zoomOutBtn = mxUtils.button('', function()
+		}, 20);
+	
+		zoomInBtn.setAttribute('disabled', 'disabled');
+	
+		var zoomOutBtn = editorUi.createToolbarButton(Editor.zoomOutImage,
+			mxResources.get('zoomOut'), function()
 		{
 			editingGraph.zoomOut();
-		});
-		zoomOutBtn.className = 'geSprite geSprite-zoomout';
-		zoomOutBtn.setAttribute('title', mxResources.get('zoomOut'));
-		zoomOutBtn.style.position = 'relative';
-		zoomOutBtn.style.outline = 'none';
-		zoomOutBtn.style.border = 'none';
-		zoomOutBtn.style.margin = '2px';
-		zoomOutBtn.style.cursor = 'pointer';
-		zoomOutBtn.style.top = (mxClient.IS_FF) ? '-6px' : '0px';
-		mxUtils.setOpacity(zoomOutBtn, 60);
-
-		var zoomFitBtn = mxUtils.button('', function()
-		{
-			editingGraph.fit(8);
-			editingGraph.center();
-		});
-		zoomFitBtn.className = 'geSprite geSprite-fit';
-		zoomFitBtn.setAttribute('title', mxResources.get('fit'));
-		zoomFitBtn.style.position = 'relative';
-		zoomFitBtn.style.outline = 'none';
-		zoomFitBtn.style.border = 'none';
-		zoomFitBtn.style.margin = '2px';
-		zoomFitBtn.style.cursor = 'pointer';
-		zoomFitBtn.style.top = (mxClient.IS_FF) ? '-6px' : '0px';
-		mxUtils.setOpacity(zoomFitBtn, 60);
-		
-		var zoomActualBtn = mxUtils.button('', function()
-		{
-			editingGraph.zoomActual();
+		}, 20);
+	
+		zoomOutBtn.setAttribute('disabled', 'disabled');
+	
+		var zoomFitBtn = editorUi.createToolbarButton(Editor.zoomFitImage,
+			mxResources.get('fit'), function()
+		{
+			if (editingGraph.view.scale == 1)
+			{
+				editingGraph.maxFitScale = 8;
+				editingGraph.fit(8);
+			}
+			else
+			{
+				editingGraph.zoomActual();
+			}
+
 			editingGraph.center();
-		});
-		zoomActualBtn.className = 'geSprite geSprite-actualsize';
-		zoomActualBtn.setAttribute('title', mxResources.get('actualSize'));
-		zoomActualBtn.style.position = 'relative';
-		zoomActualBtn.style.outline = 'none';
-		zoomActualBtn.style.border = 'none';
-		zoomActualBtn.style.margin = '2px';
-		zoomActualBtn.style.cursor = 'pointer';
-		zoomActualBtn.style.top = (mxClient.IS_FF) ? '-6px' : '0px';
-		mxUtils.setOpacity(zoomActualBtn, 60);
-
-		var deleteBtn = mxUtils.button('', removeCPoints);
-		deleteBtn.className = 'geSprite geSprite-delete';
-		deleteBtn.setAttribute('title', mxResources.get('delete'));
-		deleteBtn.style.position = 'relative';
-		deleteBtn.style.outline = 'none';
-		deleteBtn.style.border = 'none';
-		deleteBtn.style.margin = '2px';
-		deleteBtn.style.float = 'right';
-		deleteBtn.style.cursor = 'pointer';
-		mxUtils.setOpacity(deleteBtn, 10); //Disabled
+		}, 20);
 
+		var deleteBtn = editorUi.createToolbarButton(Editor.trashImage,
+			mxResources.get('delete'), removeCPoints, 20);
+		mxUtils.setOpacity(deleteBtn, 10); //Disabled
+		
 		var zoomBtns = document.createElement('div');
+		zoomBtns.style.display = 'flex';
+		zoomBtns.style.alignItems = 'center';
+		zoomBtns.style.paddingTop = '6px';
+
 		zoomBtns.appendChild(zoomInBtn);
 		zoomBtns.appendChild(zoomOutBtn);
-		zoomBtns.appendChild(zoomActualBtn);
 		zoomBtns.appendChild(zoomFitBtn);
 		zoomBtns.appendChild(deleteBtn);
 
@@ -13230,13 +13200,10 @@ var ConnectionPointsDialog = function(editorUi, cell)
 		pCount.setAttribute('value', '1');
 		pCount.style.width = '45px';
 		pCount.style.position = 'relative';
-		pCount.style.top = (mxClient.IS_FF) ? '0px' : '-4px';
 		pCount.style.margin = '0 4px 0 4px';
-		zoomBtns.appendChild(pCount);
 
 		var sideSelect = document.createElement('select');
 		sideSelect.style.position = 'relative';
-		sideSelect.style.top = (mxClient.IS_FF) ? '0px' : '-4px';
 		var sides = ['left', 'right', 'top', 'bottom'];
 
 		for (var i = 0; i < sides.length; i++)
@@ -13248,8 +13215,6 @@ var ConnectionPointsDialog = function(editorUi, cell)
 			sideSelect.appendChild(option);
 		}
 
-		zoomBtns.appendChild(sideSelect);
-
 		var addBtn = mxUtils.button(mxResources.get('add'), function()
 		{
 			var count = parseInt(pCount.value);
@@ -13289,10 +13254,10 @@ var ConnectionPointsDialog = function(editorUi, cell)
 			editingGraph.setSelectionCells(cells);
 		});
 
-		addBtn.style.position = 'relative';
-		addBtn.style.marginLeft = '8px';
-		addBtn.style.top = (mxClient.IS_FF) ? '0px' : '-4px';
+		addBtn.style.marginLeft = 'auto';
 		zoomBtns.appendChild(addBtn);
+		zoomBtns.appendChild(pCount);
+		zoomBtns.appendChild(sideSelect);
 		
 		//Point properties
 		var pointPropsDiv = document.createElement('div');
@@ -13499,16 +13464,27 @@ var ConnectionPointsDialog = function(editorUi, cell)
 		buttons.style.marginTop = '10px';
 		buttons.style.textAlign = 'right';
 
+		if (!editorUi.isOffline())
+		{
+			var helpBtn = mxUtils.button(mxResources.get('help'), function()
+			{
+				editorUi.openLink('https://www.diagrams.net/doc/faq/shape-connection-points-customise');
+			});
+			
+			helpBtn.className = 'geBtn';
+			buttons.appendChild(helpBtn);
+		}
+
 		if (editorUi.editor.cancelFirst)
 		{
 			buttons.appendChild(cancelBtn);
-			buttons.appendChild(resetBtn);
-			buttons.appendChild(applyBtn);
 		}
-		else
+		
+		buttons.appendChild(resetBtn);
+		buttons.appendChild(applyBtn);
+
+		if (!editorUi.editor.cancelFirst)
 		{
-			buttons.appendChild(resetBtn);
-			buttons.appendChild(applyBtn);
 			buttons.appendChild(cancelBtn);
 		}
 

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

@@ -1356,7 +1356,7 @@ DriveClient.prototype.saveFile = function(file, revision, success, errFn, noChec
 	
 			try
 			{
-				EditorUi.logError(e.message, null, null, e);
+				EditorUi.logError(e.message, null, null, null, e);
 				
 //				EditorUi.sendReport('Critical error in DriveClient.saveFile ' +
 //					new Date().toISOString() + ':' +

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

@@ -4834,7 +4834,7 @@
 	var editoUiAddChromelessToolbarItems = EditorUi.prototype.addChromelessToolbarItems;
 
 	/**
-	 * Image export in viewer is only allowed for same domain or hosted environments but
+	 * Image export in viewer is only allowed for same domain or hosted environments
 	 * but disabled to avoid cross domain image export in canvas which isn't allowed.
 	 */
 	EditorUi.prototype.isChromelessImageExportEnabled = function()
@@ -5018,7 +5018,7 @@
 					this.exportDialog.style.height = '50px';
 					this.exportDialog.style.padding = '4px 2px 4px 2px';
 					this.exportDialog.style.color = '#ffffff';
-					mxUtils.setOpacity(this.exportDialog, 70);
+					mxUtils.setOpacity(this.exportDialog, 80);
 					this.exportDialog.style.left = r.left + 'px';
 					this.exportDialog.style.bottom = parseInt(this.chromelessToolbar.style.bottom) +
 						this.chromelessToolbar.offsetHeight + 4 + 'px';
@@ -5041,7 +5041,10 @@
 						top: '28px',
 						zIndex: 2e9 // The z-index (defaults to 2000000000)
 					});
+
 					spinner.spin(this.exportDialog);
+				   	document.body.appendChild(this.exportDialog);
+					mxEvent.addListener(this.editor.graph.container, 'click', clickHandler);
 					
 				   	this.editor.exportToCanvas(mxUtils.bind(this, function(canvas)
 				   	{
@@ -5072,12 +5075,16 @@
 						}));
 				   	}), null, this.thumbImageCache, null, mxUtils.bind(this, function(e)
 				   	{
-				   		this.spinner.stop();
+				   		spinner.stop();
+						
+						if (this.exportDialog != null && this.exportDialog.parentNode != null)
+						{
+							this.exportDialog.parentNode.removeChild(this.exportDialog);
+							this.exportDialog = null;
+						}
+
 				   		this.handleError(e);
 				   	}), null, null, null, null, null, null, null, Editor.defaultBorder);
-					
-					mxEvent.addListener(this.editor.graph.container, 'click', clickHandler);
-				   	document.body.appendChild(this.exportDialog);
 				}
 				
 				mxEvent.consume(evt);
@@ -8071,9 +8078,21 @@
 	 */
 	EditorUi.prototype.generateMermaidImage = function(data, config, success, error)
 	{
-		var ui = this;
+		var onerror = mxUtils.bind(this, function(e)
+		{
+			this.loadingMermaid = false;
+
+			if (error != null)
+			{
+				error(e);
+			}
+			else
+			{
+				this.handleError(e);
+			}
+		});
 		
-		var delayed = function()
+		var delayed = mxUtils.bind(this, function()
 		{
 			try
 			{
@@ -8090,7 +8109,7 @@
 				
 				mermaid.mermaidAPI.initialize(config);
 	    		
-				mermaid.mermaidAPI.render('geMermaidOutput-' + new Date().getTime(), data, function(svg)
+				mermaid.mermaidAPI.render('geMermaidOutput-' + new Date().getTime(), data,  mxUtils.bind(this, function(svg)
 				{
 					try
 					{
@@ -8125,7 +8144,7 @@
 								}
 							}
 							
-							success(ui.convertDataUri(Editor.createSvgDataUri(svg)), w, h);
+							success(this.convertDataUri(Editor.createSvgDataUri(svg)), w, h);
 						}
 						else
 						{
@@ -8136,13 +8155,13 @@
 					{
 						error(e);
 					}
-				});
+				}));
 			}
 			catch (e)
 			{
 				error(e);
 			}
-		};
+		});
 
 		if (typeof mermaid === 'undefined' && !this.loadingMermaid && !this.isOffline(true))
 		{
@@ -8150,18 +8169,23 @@
 			
 			if (urlParams['dev'] == '1')
 			{
-				mxscript('js/mermaid/mermaid.min.js',
-					delayed, null, null, null, error);
+				mxMermaidToDrawio.addListener(mxUtils.bind(this, function(modelXml)
+				{
+					this.importXml(modelXml, null, null, null, null, null, true);
+				}));
+				
+				mxscript('js/mermaid/mermaid.min.js', delayed,
+					null, null, null, onerror);
 			}
 			else
 			{
-				mxscript('js/extensions.min.js',
-					delayed, null, null, null, error);
+				mxscript('js/extensions.min.js', delayed,
+					null, null, null, onerror);
 			}
 		}
 		else
 		{
-			delayed();
+			window.setTimeout(delayed, 0);
 		}
 	};
 	
@@ -9988,14 +10012,6 @@
 
 			return result;
 		};
-
-		// Extends clear default style to clear persisted settings
-		var clearDefaultStyle = this.clearDefaultStyle;
-		
-		this.clearDefaultStyle = function()
-		{
-			clearDefaultStyle.apply(this, arguments);
-		};
 		
 		// Sets help link for placeholders
 		if (!this.isOffline() && typeof window.EditDataDialog !== 'undefined')
@@ -10333,6 +10349,18 @@
 			this.keyHandler.bindAction(88, false, 'insertFreehand'); // X
 			this.keyHandler.bindAction(75, true, 'toggleShapes', true); // Ctrl+Shift+K
 			this.altShiftActions[83] = 'synchronize'; // Alt+Shift+S
+			
+			if (urlParams['embedInline'] == '1')
+			{
+				graph.addListener(mxEvent.ESCAPE, function(sender, evt)
+				{
+					if (evt != null && graph.isEnabled() && !graph.isEditing() &&
+						evt.getProperty('event') != null)
+					{
+						ui.actions.get('exit').funct();
+					}
+				});
+			}
 
 		    this.installImagePasteHandler();
 		    this.installNativeClipboardHandler();
@@ -11990,10 +12018,10 @@
 					elt.style.fontWeight = '500';
 					elt.style.paddingTop = '4px';
 					elt.style.paddingRight = '14px';
-					elt.style.backgroundImage = 'url(' + Editor.expandMoreImage + ')';
-					elt.style.backgroundPosition = 'right 1px center';
+					elt.style.backgroundImage = 'url(' + Editor.thinExpandImage + ')';
+					elt.style.backgroundPosition = 'right 0px center';
 					elt.style.backgroundRepeat = 'no-repeat';
-					elt.style.backgroundSize = '16px';
+					elt.style.backgroundSize = '18px';
 					elt.style.opacity = '0.7';
 					elt.style.height = '12px';
 				}
@@ -13389,112 +13417,169 @@
 	 */
 	EditorUi.prototype.setDarkMode = function(value)
 	{
-		this.doSetDarkMode(value);
-		this.fireEvent(new mxEventObject('darkModeChanged'));
+		this.doSetDarkMode(value, mxUtils.bind(this, function()
+		{
+			this.fireEvent(new mxEventObject('darkModeChanged'));
+		}), mxUtils.bind(this, function(e)
+		{
+			if (window.console != null)
+			{
+				console.error(e);
+			}
+
+			this.editor.setStatus(e.message);
+		}));
 	};
 	
 	/**
-	 * Links to dark.css
+	 * Creates dark mode style node.
 	 */
-	var darkStyle = document.createElement('link');
-	darkStyle.setAttribute('rel', 'stylesheet');
-	darkStyle.setAttribute('href', STYLE_PATH + '/dark.css');
-	darkStyle.setAttribute('charset', 'UTF-8');
-	darkStyle.setAttribute('type', 'text/css');
+	EditorUi.prototype.createDarkStyle = function()
+	{
+		var darkStyle = document.createElement('link');
+		darkStyle.setAttribute('rel', 'stylesheet');
+		darkStyle.setAttribute('href', STYLE_PATH + '/dark.css');
+		darkStyle.setAttribute('charset', 'UTF-8');
+		darkStyle.setAttribute('type', 'text/css');
 
+		return darkStyle;
+	};
+	
 	/**
 	 * Dynamic change of dark mode.
 	 */
-	EditorUi.prototype.doSetDarkMode = function(value)
+	EditorUi.prototype.doSetDarkMode = function(value, success, error)
 	{
-		if (Editor.darkMode != value)
+		var delayed = mxUtils.bind(this, function()
 		{
-			var graph = this.editor.graph;
-			Editor.darkMode = value;
-
-			// Sets instance vars and graph stylesheet
-			this.spinner.opts.color = Editor.isDarkMode() ? '#c0c0c0' : '#000';
-			graph.view.defaultGridColor = Editor.isDarkMode() ?
-				mxGraphView.prototype.defaultDarkGridColor : mxGraphView.prototype.defaultGridColor;
-			graph.view.gridColor = graph.view.defaultGridColor;
-			graph.defaultPageBackgroundColor = (urlParams['embedInline'] == '1') ? 'transparent' :
-				Editor.isDarkMode() ? Editor.darkColor : '#ffffff';
-			graph.defaultPageBorderColor = Editor.isDarkMode() ? '#000000' : '#ffffff';
-			graph.shapeBackgroundColor = Editor.isDarkMode() ? Editor.darkColor : '#ffffff';
-			graph.shapeForegroundColor = Editor.isDarkMode() ? Editor.lightColor : '#000000';
-			graph.defaultThemeName = Editor.isDarkMode() ? 'darkTheme' : 'default-style2';
-			graph.graphHandler.previewColor = Editor.isDarkMode() ? '#cccccc' : 'black';
-			mxGraphHandler.prototype.previewColor = graph.graphHandler.previewColor;
-			document.body.style.backgroundColor = (urlParams['embedInline'] == '1') ? 'transparent' :
-				(Editor.isDarkMode() ? Editor.darkColor : '#ffffff');
-			graph.loadStylesheet();
-			
-			// Destroys windows with code for dark mode
-		    if (this.actions.layersWindow != null)
-		    {
-				var wasVisible = this.actions.layersWindow.window.isVisible();
-			
-		    	this.actions.layersWindow.window.setVisible(false);
-		    	this.actions.layersWindow.destroy();
-		    	this.actions.layersWindow = null;
-
-				if (wasVisible)
+			if (Editor.darkMode != value)
+			{
+				var graph = this.editor.graph;
+				Editor.darkMode = value;
+
+				// Sets instance vars and graph stylesheet
+				this.spinner.opts.color = Editor.isDarkMode() ? '#c0c0c0' : '#000';
+				graph.view.defaultGridColor = Editor.isDarkMode() ?
+					mxGraphView.prototype.defaultDarkGridColor : mxGraphView.prototype.defaultGridColor;
+				graph.view.gridColor = graph.view.defaultGridColor;
+				graph.defaultPageBackgroundColor = (urlParams['embedInline'] == '1') ? 'transparent' :
+					Editor.isDarkMode() ? Editor.darkColor : '#ffffff';
+				graph.defaultPageBorderColor = Editor.isDarkMode() ? '#000000' : '#ffffff';
+				graph.shapeBackgroundColor = Editor.isDarkMode() ? Editor.darkColor : '#ffffff';
+				graph.shapeForegroundColor = Editor.isDarkMode() ? Editor.lightColor : '#000000';
+				graph.defaultThemeName = Editor.isDarkMode() ? 'darkTheme' : 'default-style2';
+				graph.graphHandler.previewColor = Editor.isDarkMode() ? '#cccccc' : 'black';
+				mxGraphHandler.prototype.previewColor = graph.graphHandler.previewColor;
+				document.body.style.backgroundColor = (urlParams['embedInline'] == '1') ? 'transparent' :
+					(Editor.isDarkMode() ? Editor.darkColor : '#ffffff');
+				graph.loadStylesheet();
+				
+				// Destroys windows with code for dark mode
+				if (this.actions.layersWindow != null)
 				{
-					window.setTimeout(this.actions.get('layers').funct, 0);
+					var wasVisible = this.actions.layersWindow.window.isVisible();
+				
+					this.actions.layersWindow.window.setVisible(false);
+					this.actions.layersWindow.destroy();
+					this.actions.layersWindow = null;
+
+					if (wasVisible)
+					{
+						window.setTimeout(this.actions.get('layers').funct, 0);
+					}
 				}
-		    }
 
-			if (this.menus.commentsWindow != null)
-			{
-		    	this.menus.commentsWindow.window.setVisible(false);
-				this.menus.commentsWindow.destroy();
-				this.menus.commentsWindow = null;
-			}
-			
-			if (this.ruler != null)
-			{
-				this.ruler.updateStyle();
+				if (this.menus.commentsWindow != null)
+				{
+					this.menus.commentsWindow.window.setVisible(false);
+					this.menus.commentsWindow.destroy();
+					this.menus.commentsWindow = null;
+				}
+				
+				if (this.ruler != null)
+				{
+					this.ruler.updateStyle();
+				}
+
+				// Sets global vars
+				Graph.prototype.defaultPageBackgroundColor = graph.defaultPageBackgroundColor;
+				Graph.prototype.defaultPageBorderColor = graph.defaultPageBorderColor;
+				Graph.prototype.shapeBackgroundColor = graph.shapeBackgroundColor;
+				Graph.prototype.shapeForegroundColor = graph.shapeForegroundColor;
+				Graph.prototype.defaultThemeName = graph.defaultThemeName;
+				StyleFormatPanel.prototype.defaultStrokeColor = Editor.isDarkMode() ? '#cccccc' : 'black';
+				Format.inactiveTabBackgroundColor = Editor.isDarkMode() ? '#000000' : '#e4e4e4';
+				Dialog.backdropColor = Editor.isDarkMode() ? Editor.darkColor : 'white';
+				mxConstants.DROP_TARGET_COLOR = Editor.isDarkMode() ? '#00ff00' : '#0000FF';
+				Editor.helpImage = (Editor.isDarkMode() && mxClient.IS_SVG) ?
+					Editor.darkHelpImage : Editor.lightHelpImage;
+				Editor.checkmarkImage = (Editor.isDarkMode() && mxClient.IS_SVG) ?
+					Editor.darkCheckmarkImage : Editor.lightCheckmarkImage;
+				
+				// Updates CSS
+				if (this.sketchStyleElt != null)
+				{
+					this.sketchStyleElt.innerHTML = Editor.createMinimalCss();
+				}
+				else if (Editor.styleElt != null)
+				{
+					Editor.styleElt.innerHTML = Editor.createMinimalCss();
+				}
 			}
 
-			// Sets global vars
-			Graph.prototype.defaultPageBackgroundColor = graph.defaultPageBackgroundColor;
-			Graph.prototype.defaultPageBorderColor = graph.defaultPageBorderColor;
-			Graph.prototype.shapeBackgroundColor = graph.shapeBackgroundColor;
-			Graph.prototype.shapeForegroundColor = graph.shapeForegroundColor;
-			Graph.prototype.defaultThemeName = graph.defaultThemeName;
-			StyleFormatPanel.prototype.defaultStrokeColor = Editor.isDarkMode() ? '#cccccc' : 'black';
-			Format.inactiveTabBackgroundColor = Editor.isDarkMode() ? '#000000' : '#e4e4e4';
-			Dialog.backdropColor = Editor.isDarkMode() ? Editor.darkColor : 'white';
-			mxConstants.DROP_TARGET_COLOR = Editor.isDarkMode() ? '#00ff00' : '#0000FF';
-			Editor.helpImage = (Editor.isDarkMode() && mxClient.IS_SVG) ?
-				Editor.darkHelpImage : Editor.lightHelpImage;
-			Editor.checkmarkImage = (Editor.isDarkMode() && mxClient.IS_SVG) ?
-				Editor.darkCheckmarkImage : Editor.lightCheckmarkImage;
-			
-			// Updates CSS
-			if (this.sketchStyleElt != null)
-			{
-				this.sketchStyleElt.innerHTML = Editor.createMinimalCss();
-			}
-			else if (Editor.styleElt != null)
-			{
-				Editor.styleElt.innerHTML = Editor.createMinimalCss();
-			}
-			
 			// Adds or removes link to CSS
 			if (Editor.isDarkMode())
 			{
-				if (darkStyle.parentNode == null)
+				if (this.darkStyle.parentNode == null)
 				{
 					var head = document.getElementsByTagName('head')[0];
-					head.appendChild(darkStyle);
+					head.appendChild(this.darkStyle);
 				}
 			}
-			else if (darkStyle.parentNode != null)
+			else if (this.darkStyle.parentNode != null)
 			{
-				darkStyle.parentNode.removeChild(darkStyle);
+				this.darkStyle.parentNode.removeChild(this.darkStyle);
 			}
+
+			success();
+		});
+
+		if (this.darkStyle != null)
+		{
+			delayed();
 		}
+		else
+		{
+			var darkStyle = this.createDarkStyle();
+
+			this.createTimeout(null, mxUtils.bind(this, function(timeout)
+			{
+				darkStyle.onerror = mxUtils.bind(this, function(e)
+				{
+					if (timeout.clear())
+					{
+						error(new Error(mxResources.get('errorLoadingFile') +
+							' ' + darkStyle.getAttribute('href')));
+					}
+				});
+
+				darkStyle.onload = mxUtils.bind(this, function()
+				{
+					if (timeout.clear())
+					{
+						this.darkStyle = darkStyle;
+						delayed();
+					}
+				});
+
+				var head = document.getElementsByTagName('head')[0];
+				head.appendChild(darkStyle);
+			}), mxUtils.bind(this, function()
+			{
+				error(new Error(mxResources.get('timeout') +
+					' ' + darkStyle.getAttribute('href')));
+			}));
+		};
 	};
 
 	/**
@@ -13644,14 +13729,17 @@
 				var ds = mxUtils.getDocumentSize();
 				this.diagramContainer.style.top = tokens[0];
 				this.diagramContainer.style.left = tokens[1];
-				var w = Math.min(gb.width + 50, ds.width -
-						parseInt(this.diagramContainer.style.left) - 20);
-				var h = Math.min(gb.height + 46, ds.height -
-						parseInt(this.diagramContainer.style.top) - 20);
-				this.diagramContainer.style.width = ((this.minInlineWidth != null) ?
-					Math.max(this.minInlineWidth, w) : w) + 'px';
-				this.diagramContainer.style.height = ((this.minInlineHeight != null) ?
-					Math.max(this.minInlineHeight, h) : h) + 'px';
+
+				var w = parseInt(tokens[2]);
+				var h = parseInt(tokens[3]);
+
+				w = Math.min((this.minInlineWidth != null) ? Math.max(
+					this.minInlineWidth, w) : w, ds.width - 80);
+				h = Math.min((this.minInlineHeight != null) ? Math.max(
+					this.minInlineHeight, h) : h, ds.height - 80);
+				
+				this.diagramContainer.style.width = w + 'px';
+				this.diagramContainer.style.height = h + 'px';
 				this.diagramContainer.style.bottom = '';
 				this.diagramContainer.style.right = '';
 
@@ -15980,29 +16068,38 @@
 						if (data.rect != null)
 						{
 							var border = this.embedExportBorder;
-	
-							this.diagramContainer.style.border = '2px solid #295fcc';
-							this.diagramContainer.style.top = data.rect.top + 'px';
-							this.diagramContainer.style.left = data.rect.left + 'px';
-							this.diagramContainer.style.height = data.rect.height + 'px';
-							this.diagramContainer.style.width = data.rect.width + 'px';
-							this.diagramContainer.style.bottom = '';
-							this.diagramContainer.style.right = '';
+							this.diagramContainer.style.left = Math.max(60, data.rect.left) + 'px';
+							this.diagramContainer.style.top = Math.max(40, data.rect.top) + 'px';
 
 							// Inline min width and height
 							this.minInlineWidth = data.minWidth;
 							this.minInlineHeight = data.minHeight;
 
+							this.diagramContainer.style.border = '2px solid #295fcc';
+							this.diagramContainer.style.bottom = '';
+							this.diagramContainer.style.right = '';
+							
 							// Data is extracted diagram in async code
 							var maxFitScale = data.maxFitScale;
-							
+							var w = data.rect.width + 2 * border;
+							var h0 = data.rect.height + 2 * border;
+
 							afterLoad = mxUtils.bind(this, function()
 							{
+								var ds = mxUtils.getDocumentSize();
+								w = Math.min((this.minInlineWidth != null) ? Math.max(
+									this.minInlineWidth, w) : w, ds.width - 80);
+								var h = Math.min((this.minInlineHeight != null) ? Math.max(
+									this.minInlineHeight, h0) : h0, ds.height - 80);
+								
+								this.diagramContainer.style.width = w + 'px';
+								this.diagramContainer.style.height = h + 'px';
+								
 								var graph = this.editor.graph;
 								var prev = graph.maxFitScale;
 								graph.maxFitScale = maxFitScale;
-
-								graph.fit(2 * border);
+								
+								graph.fit(2 * border, null, null, null, null, null, h0);
 								this.setPageVisible(false);
 
 								if (this.minInlineWidth != null &&
@@ -16016,12 +16113,36 @@
 								graph.maxFitScale = prev;
 								graph.container.scrollTop -= border;
 								graph.container.scrollLeft -= border;
-								this.fireEvent(new mxEventObject('editInlineStart', 'data', [data]));
 
 								window.setTimeout(mxUtils.bind(this, function()
 								{
+									this.fireEvent(new mxEventObject('editInlineStart', 'data', [data]));
 									graph.container.focus();
-								}), 0);
+
+									// Makes sure exit button is inside viewport
+									if (this.sketchFooterMenuElt != null)
+									{
+										this.sketchFooterMenuElt.scrollIntoView();
+									}
+
+									// Moves format window to top of graph
+									if (this.formatWindow != null &&
+										this.formatWindow.window != null &&
+										this.formatWindow.window.isVisible())
+									{
+										this.formatWindow.window.div.style.top =
+											graph.container.style.top;
+									}
+
+									// Centers horizontally
+									var bounds = graph.getGraphBounds();
+
+									if (graph.container.clientWidth > bounds.width + 2 * border)
+									{
+										graph.container.scrollLeft = bounds.x + ((bounds.width +
+											border) - graph.container.clientWidth) / 2;
+									}
+								}), 10);
 							});
 						}
 						

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

@@ -2494,6 +2494,19 @@
 		action.label = mxResources.get('searchShapes');
 		action.setToggleAction(true);
 		action.setSelectedCallback(function() { return editorUi.sidebar.isEntryVisible('search'); });
+
+		editorUi.actions.get('clearDefaultStyle').funct = function(exit)
+		{
+			if (graph.isEnabled())
+			{
+				editorUi.clearDefaultStyle();
+
+				if (Editor.sketchMode)
+				{
+					editorUi.setSketchMode(false);
+				}
+			}
+		};
 		
 		if (urlParams['embed'] == '1')
 		{
@@ -2580,7 +2593,7 @@
 							mxResources.get('cancel'), mxResources.get('discardChanges'));
 					}
 				}
-			});
+			}, null, null, (urlParams['embedInline'] == '1') ? 'Escape' : null);
 		}
 		
 		this.put('exportAs', new Menu(mxUtils.bind(this, function(menu, parent)

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

@@ -2284,9 +2284,9 @@ EditorUi.prototype.isImmediateEditingEvent = function(evt)
  */
 EditorUi.prototype.updateCssForMarker = function(markerDiv, prefix, shape, marker, fill)
 {
-	markerDiv.style.verticalAlign = 'top';
-	markerDiv.style.height = '21px';
-	markerDiv.style.width = '21px';
+	markerDiv.style.display = 'inline-flex';
+	markerDiv.style.alignItems = 'center';
+	markerDiv.style.justifyContent = 'center';
 	markerDiv.innerText = '';
 
 	if (shape == 'flexArrow')
@@ -2302,8 +2302,6 @@ EditorUi.prototype.updateCssForMarker = function(markerDiv, prefix, shape, marke
 		{
 			var img = document.createElement('img');
 			img.className = 'geAdaptiveAsset';
-			img.style.position = 'absolute';
-			img.style.marginTop = '0.5px';
 			img.setAttribute('src', src);
 			markerDiv.className = '';
 
@@ -2319,12 +2317,8 @@ EditorUi.prototype.updateCssForMarker = function(markerDiv, prefix, shape, marke
 			markerDiv.className = 'geSprite geSprite-noarrow';
 			markerDiv.innerHTML = mxUtils.htmlEntities(mxResources.get('none'));
 			markerDiv.style.backgroundImage = 'none';
-			markerDiv.style.verticalAlign = 'top';
-			markerDiv.style.marginTop = '4px';
-			markerDiv.style.fontSize = '10px';
+			markerDiv.style.fontSize = '11px';
 			markerDiv.style.filter = 'none';
-			markerDiv.style.color = this.defaultStrokeColor;
-			markerDiv.nextSibling.style.marginTop = '0px';
 		}
 	}
 };

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

@@ -351,6 +351,7 @@ Format.prototype.immediateRefresh = function()
 	{
 		mxUtils.write(label, mxResources.get('text'));
 		div.appendChild(label);
+		label.style.borderLeftStyle = 'none';
 		this.panels.push(new TextFormatPanel(this, ui, div));
 	}
 	else
@@ -1220,73 +1221,43 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa
 /**
  * 
  */
-BaseFormatPanel.prototype.addArrow = function(elt, height, topAlign)
+BaseFormatPanel.prototype.addArrow = function(elt)
 {
-	height = (height != null) ? height : 10;
-	
+	elt.className = 'geColorBtn';
+	elt.style.display = 'inline-flex';
+	elt.style.alignItems = 'top';
+	elt.style.boxSizing = 'border-box';
+	elt.style.width = '64px';
+	elt.style.height = '22px';
+	elt.style.borderWidth = '1px';
+	elt.style.borderStyle = 'solid';
+	elt.style.margin = '2px 2px 2px 3px';
+
 	var arrow = document.createElement('div');
-	arrow.style.borderLeft = '1px solid #a0a0a0';
+	arrow.className = 'geAdaptiveAsset';
 	arrow.style.display = 'inline-block';
-	arrow.style.height = height + 'px';
-	arrow.style.paddingRight = '4px';
-	arrow.style.padding = '6px';
-
-	if (topAlign)
-	{
-		arrow.style.verticalAlign = 'top';
-		arrow.style.marginLeft = '1px';
-	}
-	else
-	{
-		var m = (10 - height);
-		
-		if (m == 2)
-		{
-			arrow.style.paddingTop = 6 + 'px';
-		}
-		else if (m > 0)
-		{
-			arrow.style.paddingTop = (6 - m) + 'px';
-		}
-		else
-		{
-			arrow.style.marginTop = '-2px';
-		}
-	}
-
-	var img = document.createElement('img');
-	img.setAttribute('border', '0');
-	img.setAttribute('valign', 'middle');
-	img.setAttribute('src', Toolbar.prototype.dropDownImage);
-	arrow.appendChild(img);
-
-	var img = arrow.getElementsByTagName('img')[0];
-	img.style.position = 'relative';
-	img.style.left = '1px';
-	img.style.top = (mxClient.IS_FF) ? '0px' : '-4px';
-	mxUtils.setOpacity(arrow, 70);
+	arrow.style.backgroundImage = 'url(' + Editor.thinExpandImage + ')';
+	arrow.style.backgroundRepeat = 'no-repeat';
+	arrow.style.backgroundPosition = '-2px 1px';
+	arrow.style.backgroundSize = '18px 18px';
+	arrow.style.opacity = '0.5';
+	arrow.style.height = '100%';
+	arrow.style.width = '14px';
 	
+	elt.appendChild(arrow);
+
 	var symbol = elt.getElementsByTagName('div')[0];
 	
 	if (symbol != null)
 	{
-		symbol.style.paddingRight = '6px';
-		symbol.style.marginLeft = '4px';
-		symbol.style.marginTop = '-1px';
 		symbol.style.display = 'inline-block';
-		mxUtils.setOpacity(symbol, 60);
+		symbol.style.backgroundPositionX = 'center';
+		symbol.style.textAlign = 'center';
+		symbol.style.height = '100%';
+		symbol.style.flexGrow = '1';
+		symbol.style.opacity = '0.6';
 	}
 
-	mxUtils.setOpacity(elt, 100);
-	elt.style.border = '1px solid #a0a0a0';
-	elt.style.backgroundColor = this.buttonBackgroundColor;
-	elt.style.backgroundImage = 'none';
-	elt.style.width = 'auto';
-	elt.className += ' geColorBtn';
-	mxUtils.setPrefixedStyle(elt.style, 'borderRadius', '3px');
-	
-	elt.appendChild(arrow);
-	
 	return symbol;
 };
 
@@ -1376,7 +1347,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han
 	var graph = ui.editor.graph;
 	var div = this.createPanel();
 	div.style.paddingTop = '10px';
-	div.style.paddingBottom = '10px';
+	div.style.paddingBottom = '12px';
 	mxUtils.write(div, label);
 	div.style.fontWeight = 'bold';
 	
@@ -2026,7 +1997,7 @@ ArrangePanel.prototype.addAngle = function(div)
 	var graph = editor.graph;
 	var ss = ui.getSelectionState();
 
-	div.style.paddingBottom = '8px';
+	div.style.paddingBottom = '12px';
 	
 	var span = document.createElement('div');
 	span.style.position = 'absolute';
@@ -2895,16 +2866,18 @@ TextFormatPanel.prototype.addFont = function(container)
 		
 		var cssMenu = this.editorUi.toolbar.addMenu(mxResources.get('style'),
 			mxResources.get('style'), true, 'formatBlock', cssPanel, null, true);
-		cssMenu.style.color = 'rgb(112, 112, 112)';
+		this.addArrow(cssMenu);
+		cssMenu.style.width = '211px';
+		cssMenu.style.alignItems = 'center';
+		cssMenu.style.justifyContent = 'center';
 		cssMenu.style.whiteSpace = 'nowrap';
 		cssMenu.style.overflow = 'hidden';
 		cssMenu.style.margin = '0px';
-		this.addArrow(cssMenu);
-		cssMenu.style.width = '200px';
-		cssMenu.style.height = '15px';
-		
+		cssMenu.style.position = 'relative';
+
 		var arrow = cssMenu.getElementsByTagName('div')[0];
-		arrow.style.cssFloat = 'right';
+		arrow.style.position = 'absolute';
+		arrow.style.right = '2px';
 		container.appendChild(cssPanel);
 	}
 	
@@ -2919,14 +2892,19 @@ TextFormatPanel.prototype.addFont = function(container)
 	
 	var fontMenu = this.editorUi.toolbar.addMenu('Helvetica', mxResources.get('fontFamily'),
 		true, 'fontFamily', stylePanel, null, true);
-	fontMenu.style.color = 'rgb(112, 112, 112)';
+	
+	this.addArrow(fontMenu);
+	fontMenu.style.width = '211px';
+	fontMenu.style.alignItems = 'center';
+	fontMenu.style.justifyContent = 'center';
 	fontMenu.style.whiteSpace = 'nowrap';
 	fontMenu.style.overflow = 'hidden';
 	fontMenu.style.margin = '0px';
-	
-	this.addArrow(fontMenu);
-	fontMenu.style.width = '200px';
-	fontMenu.style.height = '15px';
+	fontMenu.style.position = 'relative';
+
+	var arrow = fontMenu.getElementsByTagName('div')[0];
+	arrow.style.position = 'absolute';
+	arrow.style.right = '2px';
 	
 	var stylePanel2 = stylePanel.cloneNode(false);
 	stylePanel2.style.marginLeft = '-3px';
@@ -3101,6 +3079,7 @@ TextFormatPanel.prototype.addFont = function(container)
 	
 	// Label position
 	var stylePanel4 = stylePanel.cloneNode(false);
+	stylePanel4.removeAttribute('class');
 	stylePanel4.style.marginLeft = '0px';
 	stylePanel4.style.paddingTop = '8px';
 	stylePanel4.style.paddingBottom = '4px';
@@ -3140,6 +3119,7 @@ TextFormatPanel.prototype.addFont = function(container)
 	
 	// Writing direction
 	var stylePanel5 = stylePanel.cloneNode(false);
+	stylePanel5.removeAttribute('class');
 	stylePanel5.style.marginLeft = '0px';
 	stylePanel5.style.paddingTop = '4px';
 	stylePanel5.style.paddingBottom = '4px';
@@ -4371,12 +4351,13 @@ StyleFormatPanel.prototype.init = function()
 		this.container.appendChild(this.addLineJumps(this.createPanel()));
 		var opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY);
 		opacityPanel.style.paddingTop = '8px';
-		opacityPanel.style.paddingBottom = '8px';
+		opacityPanel.style.paddingBottom = '10px';
 		this.container.appendChild(opacityPanel);
 		this.container.appendChild(this.addEffects(this.createPanel()));
 	}
 
 	var opsPanel = this.createPanel();
+	opsPanel.style.paddingTop = '8px';
 	
 	if (ss.cells.length == 1)
 	{
@@ -4867,9 +4848,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	styleSelect.style.height = '22px';
 	styleSelect.style.padding = '0px';
 	styleSelect.style.marginTop = '-3px';
+	styleSelect.style.textAlign = 'center';
 	styleSelect.style.boxSizing = 'border-box';
-	styleSelect.style.left = '94px';
-	styleSelect.style.width = '80px';
+	styleSelect.style.left = '90px';
+	styleSelect.style.width = '83px';
 	styleSelect.style.borderWidth = '1px';
 	styleSelect.style.borderStyle = 'solid';
 
@@ -4956,15 +4938,15 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	
 	// Used if only edges selected
 	var stylePanel = colorPanel.cloneNode(false);
+	stylePanel.style.display = 'inline-flex';
+	stylePanel.style.alignItems = 'top';
 	stylePanel.style.fontWeight = 'normal';
 	stylePanel.style.whiteSpace = 'nowrap';
 	stylePanel.style.position = 'relative';
-	stylePanel.style.paddingLeft = '0px';
-	stylePanel.style.marginBottom = '2px';
+	stylePanel.style.paddingLeft = '5px';
 	stylePanel.style.overflow = 'hidden';
 	stylePanel.style.marginTop = '2px';
 	stylePanel.style.width = '220px';
-	stylePanel.className = 'geToolbarContainer';
 
 	var addItem = mxUtils.bind(this, function(menu, width, cssName, keys, values)
 	{
@@ -4996,7 +4978,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	
 	// Used for mixed selection (vertices and edges)
 	var altStylePanel = stylePanel.cloneNode(false);
-	
+
 	var edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', mxResources.get('connection'), false, mxUtils.bind(this, function(menu)
 	{
 		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'],
@@ -5028,7 +5010,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	input.style.textAlign = 'right';
 	input.style.marginTop = '2px';
 	input.style.width = '52px';
-	input.style.height = '21px';
+	input.style.height = '22px';
 	input.style.left = '146px';
 	input.style.borderWidth = '1px';
 	input.style.borderStyle = 'solid';
@@ -5076,14 +5058,14 @@ StyleFormatPanel.prototype.addStroke = function(container)
 
 	var stepper = this.createStepper(input, update, 1, 9);
 	stepper.style.display = input.style.display;
-	stepper.style.marginTop = '2px';
+	stepper.style.top = '2px';
 	stepper.style.left = '198px';
 	stylePanel.appendChild(stepper);
 
 	var altStepper = this.createStepper(altInput, altUpdate, 1, 9);
 	altStepper.style.display = altInput.style.display;
-	altStepper.style.marginTop = '2px';
 	altInput.style.position = 'absolute';
+	altStepper.style.top = '2px';
 	altStepper.style.left = '198px';
 	altStylePanel.appendChild(altStepper);
 	
@@ -5120,8 +5102,8 @@ StyleFormatPanel.prototype.addStroke = function(container)
 			var item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
 			item.setAttribute('title', mxResources.get('none'));
 
-			var font = document.createElement('font');
-			font.style.fontSize = '10px';
+			var font = document.createElement('span');
+			font.style.fontSize = '11px';
 			mxUtils.write(font, mxResources.get('none'));
 			item.firstChild.firstChild.appendChild(font);
 
@@ -5186,8 +5168,8 @@ StyleFormatPanel.prototype.addStroke = function(container)
 			var item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
 			item.setAttribute('title', mxResources.get('none'));
 
-			var font = document.createElement('font');
-			font.style.fontSize = '10px';
+			var font = document.createElement('span');
+			font.style.fontSize = '11px';
 			mxUtils.write(font, mxResources.get('none'));
 			item.firstChild.firstChild.appendChild(font);
 			
@@ -5245,66 +5227,51 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		}
 	}));
 
-	var elt = this.addArrow(edgeShape, 8);
-	elt.nextSibling.style.position = 'relative';
-	elt.nextSibling.style.top = '-2px';
-	elt = this.addArrow(edgeStyle, 10);
-	elt.nextSibling.style.position = 'relative';
-	elt.nextSibling.style.top = '-3px';
-	edgeStyle.getElementsByTagName('img')[0].style.top = '-1px';
-	this.addArrow(lineStart, null, true);
-	this.addArrow(lineEnd, null, true);
-	
-	var symbol = this.addArrow(pattern, 9);
-	symbol.className = 'geIcon';
-	symbol.style.width = 'auto';
+	this.addArrow(edgeShape);
+	this.addArrow(edgeStyle).style.marginTop = '-1px';
+	this.addArrow(lineStart);
+	this.addArrow(lineEnd);
 	
-	var altSymbol = this.addArrow(altPattern, 9);
+	var symbol = this.addArrow(pattern);
+	symbol.className = 'geIcon';
+	pattern.style.width = '134px';
+
+	var altSymbol = this.addArrow(altPattern);
 	altSymbol.className = 'geIcon';
 	altSymbol.style.width = '22px';
 	
 	var solid = document.createElement('div');
-	solid.style.width = '84px';
-	solid.style.height = '1px';
+	solid.style.width = '102px';
+	solid.style.height = '10px';
 	solid.style.borderBottom = '1px solid ' + this.defaultStrokeColor;
-	solid.style.marginBottom = '7px';
+	solid.style.marginLeft = '10px';
 	symbol.appendChild(solid);
 	
 	var altSolid = document.createElement('div');
-	altSolid.style.width = '23px';
-	altSolid.style.height = '1px';
+	altSolid.style.width = '30px';
+	altSolid.style.height = '10px';
 	altSolid.style.borderBottom = '1px solid ' + this.defaultStrokeColor;
-	altSolid.style.marginBottom = '7px';
+	altSolid.style.marginLeft = '10px';
 	altSymbol.appendChild(altSolid);
 
-	pattern.style.height = '15px';
-	pattern.style.marginLeft = '16px';
-	altPattern.style.height = '15px';
-	altPattern.style.marginLeft = '3px';
-	edgeShape.style.marginLeft = '10px';
-	edgeShape.style.height = '15px';
-	edgeStyle.style.marginLeft = '10px';
-	edgeStyle.style.height = '17px';
-	lineStart.style.marginLeft = '3px';
-	lineStart.style.height = '17px';
-	lineEnd.style.marginLeft = '3px';
-	lineEnd.style.height = '17px';
-
 	container.appendChild(colorPanel);
 	container.appendChild(altStylePanel);
 	container.appendChild(stylePanel);
 
 	var arrowPanel = stylePanel.cloneNode(false);
+	arrowPanel.style.display = 'block';
 	arrowPanel.style.padding = '5px 4px 6px 0px';
 	arrowPanel.style.fontWeight = 'normal';
 	
 	var span = document.createElement('div');
 	span.style.position = 'absolute';
+	span.style.maxWidth = '78px';
+	span.style.overflow = 'hidden';
+	span.style.textOverflow = 'ellipsis';
 	span.style.marginLeft = '0px';
 	span.style.marginBottom = '12px';
 	span.style.marginTop = '2px';
 	span.style.fontWeight = 'normal';
-	span.style.width = '76px';
 	
 	mxUtils.write(span, mxResources.get('lineend'));
 	arrowPanel.appendChild(span);
@@ -5340,8 +5307,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	});
 
 	mxUtils.br(arrowPanel);
-	this.addLabel(arrowPanel, mxResources.get('spacing'), 98, 52);
-	this.addLabel(arrowPanel, mxResources.get('size'), 30, 52);
+	this.addLabel(arrowPanel, mxResources.get('spacing'),
+		98, 64).style.fontSize = '11px';
+	this.addLabel(arrowPanel, mxResources.get('size'),
+		30, 64).style.fontSize = '11px';
 	mxUtils.br(arrowPanel);
 	
 	var perimeterPanel = colorPanel.cloneNode(false);
@@ -5623,7 +5592,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container)
 		
 		var span = document.createElement('div');
 		span.style.position = 'absolute';
-		span.style.maxWidth = '82px';
+		span.style.maxWidth = '78px';
 		span.style.overflow = 'hidden';
 		span.style.textOverflow = 'ellipsis';
 		
@@ -5636,8 +5605,9 @@ StyleFormatPanel.prototype.addLineJumps = function(container)
 		styleSelect.style.padding = '0px';
 		styleSelect.style.marginTop = '-2px';
 		styleSelect.style.boxSizing = 'border-box';
-		styleSelect.style.right = '76px';
-		styleSelect.style.width = '54px';
+		styleSelect.style.textAlign = 'center';
+		styleSelect.style.right = '84px';
+		styleSelect.style.width = '64px';
 		styleSelect.style.borderWidth = '1px';
 		styleSelect.style.borderStyle = 'solid';
 
@@ -5678,7 +5648,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container)
 		
 		var jumpSizeUpdate;
 		
-		var jumpSize = this.addUnitInput(container, 'pt', 16, 42, function()
+		var jumpSize = this.addUnitInput(container, 'pt', 16, 52, function()
 		{
 			jumpSizeUpdate.apply(this, arguments);
 		});
@@ -5965,8 +5935,6 @@ DiagramStylePanel.prototype.addView = function(div)
 	var defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor'];
 	
 	div.style.whiteSpace = 'normal';
-	div.style.borderStyle = 'none';
-	div.style.paddingBottom = '0px';
 	div.style.paddingLeft = '18px';
 	div.style.paddingTop = '6px';
 	
@@ -6096,7 +6064,7 @@ DiagramStylePanel.prototype.addView = function(div)
 	{
 		// Wrapper needed to catch events
 		var div = document.createElement('div');
-		div.style.background = (Editor.isDarkMode()) ? Editor.darkColor : '#ffffff';
+		div.style.background = (Editor.isDarkMode() ? '#2a252f' : '#f1f3f4');
 		div.style.position = 'absolute';
 		div.style.display = 'inline-block';
 		div.style.overflow = 'hidden';
@@ -6106,6 +6074,7 @@ DiagramStylePanel.prototype.addView = function(div)
 		container.appendChild(div);
 		
 		var graph2 = new Graph(div, null, null, graph.getStylesheet());
+		graph2.shapeBackgroundColor = div.style.background;
 		graph2.resetViewOnRootChange = false;
 		graph2.foldingEnabled = false;
 		graph2.gridEnabled = false;
@@ -6658,10 +6627,6 @@ DiagramFormatPanel.prototype.addView = function(div)
 			return Editor.sketchMode;
 		}, function(checked)
 		{
-			graph.updateCellStyles({'sketch': (checked) ? '1' : null,
-				'curveFitting': (checked) ? Editor.sketchDefaultCurveFitting : null,
-				'jiggle': (checked) ? Editor.sketchDefaultJiggle : null},
-				graph.getVerticesAndEdges());
 			ui.setSketchMode(checked);
 		},
 		{
@@ -6934,6 +6899,7 @@ DiagramFormatPanel.prototype.addPaperSize = function(div)
 	{
 		accessor.set(graph.pageFormat);
 	});
+
 	this.addKeyHandler(accessor.heightInput, function()
 	{
 		accessor.set(graph.pageFormat);	

src/main/webapp/resources/dia_ar.txt

@@ -102,7 +102,7 @@ chatWindowTitle=‫دردشة‬
 chooseAnOption=‫اختر خيارا‬
 chromeApp=‫تطبيق Chrome‬
 collaborativeEditingNotice=‫ملاحظات مهمة عن مشاركة التعديل‬
-compare=‫قارن‬
+compare=‫يقارن‬
 compressed=‫مضغوط‬
 commitMessage=‫أكد علي تسجيل الرسالة‬
 configLinkWarn=‫هذة الوصلة تقوم بتغيرات علي draw.io . اضغط علي موافق لو كنت تثق فيمن ارسله اليك‬

src/main/webapp/styles/dark.css

@@ -14,7 +14,8 @@ html body .geStatus > *, html body .geUser {
 html body .geDiagramContainer {
 	background-color:var(--dark-color);
 }
-html body div.geMenubarContainer, html body td.mxPopupMenuIcon, html body .geFormatContainer, html body div.geMenubarContainer .geStatus:hover {
+html body div.geMenubarContainer, html body .geFormatContainer,
+html body div.geMenubarContainer .geStatus:hover {
 	background-color:var(--panel-color);
 	border-color:#000000;
 }
@@ -87,7 +88,7 @@ html body .geTemplate {
 html body .geSidebar {
 	opacity:0.7;
 }
-html body .geSidebarContainer div.geDropTarget {
+html body.geEditor .geSidebarContainer div.geDropTarget {
 	color:#767676;
 	border-color:#767676;
 }
@@ -99,7 +100,8 @@ html body.geEditor .geBigButton:not([disabled]) {
 }
 html body.geEditor .geBtn, html body.geEditor button,
 html body.geEditor button:hover:not([disabled]),
-html body.geEditor button:focus, html body.geEditor select {
+html body.geEditor button:focus, html body.geEditor select,
+html body.geEditor .geColorBtn {
 	background:none;
 	border: 1px solid var(--border-color);
 	color:#aaaaaa;
@@ -108,21 +110,19 @@ html body .geBtn:hover:not([disabled]) {
 	color: #c0c0c0;
 }
 html body.geEditor button:hover:not([disabled]),
-html body.geEditor select:hover:not([disabled]) {
+html body.geEditor select:hover:not([disabled]),
+html body.geEditor .geColorBtn:hover:not([disabled]) {
 	background:var(--dark-color);
 	border: 1px solid var(--border-color);
 }
 html body.geEditor .geSidebar, html body.geEditor .geSidebarContainer .geTitle, html body.geEditor input, html body.geEditor textarea,
-html body.geEditor .geColorBtn, html body.geEditor .geBaseButton, html body.geEditor .geSidebarTooltip, html body.geEditor .geBaseButton,
-html body.geEditor .geSidebarContainer .geDropTarget, html body.geEditor .geToolbarContainer, html body.geEditor select {
+html body.geEditor .geBaseButton, html body.geEditor .geSidebarTooltip, html body.geEditor .geBaseButton, html body.geEditor select,
+html body.geEditor .geSidebarContainer .geDropTarget, html body.geEditor .geToolbarContainer {
 	background:var(--panel-color);
 	border-color:var(--dark-color);
 	box-shadow:none;
 	color:#aaaaaa;
 }
-html body.geEditor select {
-	background:var(--header-color);
-}
 html body.geEditor button, html body.geEditor input,
 html body.geEditor textarea, html body.geEditor select,
 .geInsertTablePicker, .geInsertTablePicker * {
@@ -135,7 +135,7 @@ html body .geMenubarContainer .geToolbarContainer, html body div.geToolbarContai
 html body .geSketch .geToolbarContainer {
 	border-style:none;
 }
-html body .geToolbarContainer {
+html body.geEditor .geColorBtn, html body .geToolbarContainer {
 	box-shadow:none;
 }
 html body .geSidebarTooltip {
@@ -143,7 +143,9 @@ html body .geSidebarTooltip {
 }
 html body .geSprite, html body .geSocialFooter img, html body .mxPopupMenuItem>img, .geAdaptiveAsset {
 	filter:invert(100%);
-	color:#333333;
+}
+.geAdaptiveAsset {
+	color: #333333;
 }
 .geInverseAdaptiveAsset {
 	filter:none !important
@@ -191,12 +193,12 @@ html body .geBackgroundPage {
 html body tr.mxPopupMenuItem {
 	color:#cccccc;
 }
-html body tr.mxPopupMenuItemHover {
-	background:#000000;
+html body.geEditor table.mxPopupMenu tr.mxPopupMenuItemHover {
+	background:var(--dark-color);
 	color:#cccccc;
 }
 html body .geSidebarContainer .geTitle:hover, html body .geSidebarContainer .geItem:hover,
-html body .geMenubarContainer .geItem:hover, html body .geBaseButton:hover {
+html body .geMenubarContainer .geItem:hover, html body.geEditor .geBaseButton:hover {
 	background:var(--dark-color);
 }
 html body .geToolbarContainer .geSeparator {

src/main/webapp/styles/grapheditor.css

@@ -3,7 +3,8 @@
 	--border-color: #dadce0;
 	--text-color: #707070;
 }
-.geEditor *, div.mxWindow, .mxWindowTitle {
+.geEditor *, div.mxWindow, .mxWindowTitle,
+.geEditor .geToolbarContainer .geColorButton {
 	border-color:var(--border-color);
 }
 html div.mxWindow, .geDialog, .geSketch .geToolbarContainer {
@@ -119,7 +120,8 @@ html > body > div > div.geToolbarContainer.geSimpleMainMenu .geToolbarContainer{
 	display:block;
 	width:100%;
 }
-.geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel, .geSidebar, .geSidebarContainer .geTitle, .geSidebar .geItem, .mxPopupMenuItem {
+.geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel,
+.geSidebar, .geSidebar .geItem, .mxPopupMenuItem {
 	-webkit-transition: all 0.1s ease-in-out;
 	-moz-transition: all 0.1s ease-in-out;
 	-o-transition: all 0.1s ease-in-out;
@@ -225,15 +227,15 @@ a.geStatus .geStatusMessage {
 	-moz-box-shadow: 2px 2px 3px 0px #ddd;
 	box-shadow: 2px 2px 3px 0px #ddd;
 }
-.geEditor input, .geEditor button, .geEditor select {
+.geEditor input, .geEditor button, .geEditor select, .geColorBtn {
 	border: 1px solid #d8d8d8;
 	border-radius: 4px;
 }
-.geEditor button, .geEditor select {
+.geEditor button, .geEditor select, .geColorBtn {
 	background:#eee;
 }
 .geEditor button:hover:not([disabled], .geBigButton, .geShareBtn),
-.geEditor select:hover:not([disabled]) {
+.geEditor select:hover:not([disabled]), .geColorBtn:hover:not([disabled]) {
 	background:#e5e5e5;
 }
 .geColorDropper {
@@ -302,22 +304,13 @@ a.geStatus .geStatusMessage {
 	background-color: #4d90fe;
 	background-image: linear-gradient(#4d90fe 0px,#357ae8 100%);
 }
-.geColorBtn {
+html .geColorBtn {
 	padding: 0px;
 }
-.geColorBtn:hover {
-	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-	border: 1px solid rgba(0,0,0,0.7);
-}
-.geColorBtn:active {
-	opacity: 0.7;
-}
-.geColorBtn:disabled {
+html .geColorBtn:disabled {
 	opacity: 0.5;
 }
-.gePrimaryBtn {
+html .gePrimaryBtn {
 	background-color: #4d90fe;
 	background-image: linear-gradient(#4d90fe 0px,#4787ed 100%);
 	border: 1px solid #3079ed;
@@ -952,7 +945,7 @@ html td.mxPopupMenuItem {
 	font-size:10pt;
 }
 html td.mxPopupMenuIcon {
-	background-color:white;
+	background-color:transparent;
 	padding:0px;
 }
 td.mxPopupMenuIcon .geIcon {
@@ -962,11 +955,6 @@ td.mxPopupMenuIcon .geIcon {
 	border:1px solid transparent;
 	opacity:0.5;
 }
-td.mxPopupMenuIcon .geIcon:hover {
-	border:1px solid gray;
-	border-radius:2px;
-	opacity:1;
-}
 html tr.mxPopupMenuItemHover {
 	background-color: #e0e0e0;
 	color: black;