15.5.1 release

ChangeLog

@@ -1,3 +1,10 @@
+11-OCT_2021: 15.5.1
+
+- Adds embedInline URL parameter
+- Uses system dark mode for default
+- Fixes library depends on current edge style https://github.com/jgraph/drawio/issues/2308
+- Fixes handling of inlineFullscreen iframe
+
 08-OCT-2021: 15.5.0
 
 - Adds inches and meters as units

VERSION

@@ -1 +1 @@
-15.5.0
+15.5.1

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

@@ -1049,7 +1049,7 @@ App.main = function(callback, createUi)
 			if (mxSettings.settings != null)
 			{
 				document.body.style.backgroundColor = (uiTheme == 'dark' ||
-					mxSettings.settings.darkMode) ? '#2a2a2a' : '#ffffff';
+					mxSettings.settings.darkMode) ? Editor.darkColor : '#ffffff';
 				
 				if (mxSettings.settings.autosaveDelay != null)
 				{

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

@@ -9076,7 +9076,7 @@ var LibraryDialog = function(editorUi, name, library, initialImages, file, mode)
 					label.style.bottom = '-18px';
 					label.style.left = '10px';
 					label.style.right = '10px';
-					label.style.backgroundColor = Editor.isDarkMode() ? '#2a2a2a' : '#ffffff';
+					label.style.backgroundColor = Editor.isDarkMode() ? Editor.darkColor : '#ffffff';
 					label.style.overflow = 'hidden';
 					label.style.textAlign = 'center';
 					

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

@@ -922,7 +922,8 @@
 			
 			if (fillStyle == 'auto')
 			{
-				var bg = (this.shape.state != null) ? this.shape.state.view.graph.defaultPageBackgroundColor : '#ffffff';
+				var bg = (this.shape.state != null && this.shape.state.view.graph.defaultPageBackgroundColor != 'transparent') ?
+					this.shape.state.view.graph.defaultPageBackgroundColor : (Editor.isDarkMode() ? Editor.darkColor : '#ffffff');
 				
 				fillStyle = (style.fill != null && (gradient != null || (bg != null &&
 					style.fill.toLowerCase() == bg.toLowerCase()))) ? 'solid' : defs['fillStyle']
@@ -1224,7 +1225,8 @@
 		mxShape.prototype.createHandJiggle = function(c)
 		{
 			if (!this.outline && this.style != null && mxUtils.getValue(this.style,
-				'sketch', (urlParams['rough'] == '1') ?'1' : '0') != '0')
+					'sketch', /*(urlParams['sketch'] != '1' && urlParams['rough'] == '1') ?
+						'1' : */'0') != '0')
 			{
 				if (mxUtils.getValue(this.style, 'sketchStyle', 'rough') == 'comic')
 				{
@@ -3118,10 +3120,14 @@
         	this.embedCssFonts(this.fontCss, mxUtils.bind(this, function(resolvedFontCss)
 			{
         		this.resolvedFontCss = resolvedFontCss;
-        		then();
+
+				if (then != null)
+				{
+        			then();
+				}
 			}));
         }
-        else
+        else if (then != null)
         {
             then();
         }
@@ -5294,12 +5300,12 @@
 						else if (colorset['fill'] == '')
 						{
 							btn.style.backgroundColor = mxUtils.getValue(ui.initialDefaultVertexStyle,
-								mxConstants.STYLE_FILLCOLOR, (Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff');
+								mxConstants.STYLE_FILLCOLOR, (Editor.isDarkMode()) ? Editor.darkColor : '#ffffff');
 						}
 						else
 						{
 							btn.style.backgroundColor = colorset['fill'] || mxUtils.getValue(ui.initialDefaultVertexStyle,
-								mxConstants.STYLE_FILLCOLOR, (Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff');
+								mxConstants.STYLE_FILLCOLOR, (Editor.isDarkMode()) ? Editor.darkColor : '#ffffff');
 						}
 						
 						if (colorset['stroke'] == mxConstants.NONE)
@@ -5309,12 +5315,12 @@
 						else if (colorset['stroke'] == '')
 						{
 							btn.style.border = b + ' ' + mxUtils.getValue(ui.initialDefaultVertexStyle, 
-								mxConstants.STYLE_STROKECOLOR, (!Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff');
+								mxConstants.STYLE_STROKECOLOR, (!Editor.isDarkMode()) ? Editor.darkColor : '#ffffff');
 						}
 						else
 						{
 							btn.style.border = b + ' ' + (colorset['stroke'] || mxUtils.getValue(ui.initialDefaultVertexStyle,
-									mxConstants.STYLE_STROKECOLOR, (!Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff'));
+									mxConstants.STYLE_STROKECOLOR, (!Editor.isDarkMode()) ? Editor.darkColor : '#ffffff'));
 						}
 
 						if (colorset['title'] != null)
@@ -6418,7 +6424,7 @@
 			temp = this.stylesheet;
 			tempBg = this.defaultPageBackgroundColor;
 			this.defaultPageBackgroundColor = (this.defaultThemeName == 'darkTheme') ?
-				'#ffffff' : '#2a2a2a';
+				'#ffffff' : Editor.darkColor;
 			this.stylesheet = this.getDefaultStylesheet();
 			// LATER: Fix math export in dark mode by fetching text nodes before
 			// calling refresh and changing the font color in-place

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

@@ -3707,12 +3707,12 @@
     	{
     		mxClient.link('stylesheet', STYLE_PATH + '/dark.css');
 
-			Dialog.backdropColor = '#2a2a2a';
+			Dialog.backdropColor = Editor.darkColor;
 			Format.inactiveTabBackgroundColor = 'black';
 	    	Graph.prototype.defaultThemeName = 'darkTheme';
-			Graph.prototype.defaultPageBackgroundColor = '#2a2a2a';
+			Graph.prototype.defaultPageBackgroundColor = Editor.darkColor;
 			Graph.prototype.defaultPageBorderColor = '#505759';
-			BaseFormatPanel.prototype.buttonBackgroundColor = '#2a2a2a';
+			BaseFormatPanel.prototype.buttonBackgroundColor = Editor.darkColor;
 			mxGraphHandler.prototype.previewColor = '#cccccc';
 			StyleFormatPanel.prototype.defaultStrokeColor = '#cccccc';
 			mxConstants.DROP_TARGET_COLOR = '#00ff00';
@@ -9001,7 +9001,7 @@
 		// Must be set before UI is created in superclass
 		if (this.isSettingsEnabled())
 		{
-			if (urlParams['sketch'] == '1')
+			if (urlParams['sketch'] == '1' && urlParams['embedInline'] != '1')
 			{
 				this.doSetSketchMode((mxSettings.settings.sketchMode != null &&
 					urlParams['rough'] == null) ? mxSettings.settings.sketchMode :
@@ -10177,14 +10177,17 @@
 		{
 			window.setTimeout(mxUtils.bind(this, function()
 			{
-				 this.spinner.stop();
-				 this.doSetSketchMode(value);
+				this.spinner.stop();
+				this.doSetSketchMode(value);
 				 
-				 // Persist setting
-				 mxSettings.settings.sketchMode = value;
-				 mxSettings.save();
+				// Persist setting
+				if (urlParams['rough'] == null)
+				{
+					mxSettings.settings.sketchMode = value;
+					mxSettings.save();
+				}
 					 
-				 this.fireEvent(new mxEventObject('sketchModeChanged'));
+				this.fireEvent(new mxEventObject('sketchModeChanged'));
 			}), 0);
 		}
 	};
@@ -10205,7 +10208,32 @@
 			this.fireEvent(new mxEventObject('pagesVisibleChanged'));
 		}
 	};
-   
+     
+	/**
+	 * Dynamic change of dark mode.
+	 */
+	EditorUi.prototype.setInlineFullscreen = function(value)
+	{
+		if (Editor.inlineFullscreen != value)
+		{
+			Editor.inlineFullscreen = value;
+			this.fireEvent(new mxEventObject('inlineFullscreenChanged'));
+
+			var parent = window.opener || window.parent;
+			parent.postMessage(JSON.stringify({
+				event: 'resize',
+				fullscreen: Editor.inlineFullscreen,
+				rect: this.diagramContainer.getBoundingClientRect()
+			}), '*');
+
+			window.setTimeout(mxUtils.bind(this, function()
+			{
+				this.refresh();
+				this.actions.get('resetView').funct();
+			}), 10);
+		}
+	};
+
 	/**
 	 * Dynamic change of dark mode.
 	 */
@@ -10217,11 +10245,11 @@
 			Editor.sketchMode = value;
 
 			this.menus.defaultFonts = Menus.prototype.defaultFonts;
-			this.menus.defaultFontSize = 20;
-			graph.defaultVertexStyle = {'pointerEvents': '0', 'fontSize': '20'};
-			graph.defaultEdgeStyle = {'fontSize': '16', 'edgeStyle': 'none', 'rounded': '0',
-				'curved': '1', 'jettySize': 'auto', 'orthogonalLoop': '1', 'endArrow': 'open',
-				'endSize': '14', 'startSize': '14'};
+			this.menus.defaultFontSize = (value) ? 20 : 16;
+			graph.defaultVertexStyle = {'pointerEvents': '0', 'fontSize': this.menus.defaultFontSize};
+			graph.defaultEdgeStyle = {'fontSize': this.menus.defaultFontSize - 4, 'edgeStyle': 'none',
+				'rounded': '0', 'curved': '1', 'jettySize': 'auto', 'orthogonalLoop': '1',
+				'endArrow': 'open',	'endSize': '14', 'startSize': '14'};
 
 			if (value)
 			{
@@ -10249,7 +10277,6 @@
 			graph.currentEdgeStyle = mxUtils.clone(graph.defaultEdgeStyle);
 			Graph.prototype.defaultVertexStyle = graph.defaultVertexStyle;
 			Graph.prototype.defaultEdgeStyle = graph.defaultEdgeStyle;
-
 			this.clearDefaultStyle();
 		}
 	};
@@ -11472,11 +11499,18 @@
 		{
 			if (urlParams['spin'] != '1' || this.spinner.spin(document.body, mxResources.get('loading')))
 			{
+				var initialized = false;
+
 				this.installMessageHandler(mxUtils.bind(this, function(xml, evt, modified, convertToSketch)
 				{
-					this.spinner.stop();
-					this.addEmbedButtons();
-					this.setGraphEnabled(true);
+					if (!initialized)
+					{
+						initialized = true;
+						
+						this.spinner.stop();
+						this.addEmbedButtons();
+						this.setGraphEnabled(true);
+					}
 					
 					if (xml == null || xml.length == 0)
 					{
@@ -11488,6 +11522,7 @@
 					this.mode = App.MODE_EMBED;
 					this.setFileData(xml);
 					
+					// TODO: Check if cellsInserted should be fired instead here
 					if (convertToSketch)
 					{
 						try
@@ -11595,6 +11630,33 @@
 			scale: graph.view.scale, page: graph.view.getBackgroundPageBounds()};
 	};
 	
+	/**
+	 * Adds the buttons for embedded mode.
+	 */
+	EditorUi.prototype.sendEmbeddedSvgExport = function()
+	{
+		this.getEmbeddedSvg(this.getFileData(true, null, null, null, null,
+			null, null, null, null, false),
+			this.editor.graph, null, true, mxUtils.bind(this, function(svg)
+		{
+			this.editor.modified = false;
+			var parent = window.opener || window.parent;
+			parent.postMessage(JSON.stringify({
+				event: 'export',
+				data: Editor.createSvgDataUri(svg)
+			}), '*');
+		}), null, null, true, null, 1, 8);
+
+		this.diagramContainer.removeAttribute('data-bounds');
+		Editor.inlineFullscreen = false;
+		this.editor.graph.model.clear();
+		this.editor.undoManager.clear();
+		this.setBackgroundImage(null);
+		this.editor.modified = false;
+
+		this.fireEvent(new mxEventObject('editInlineStop'));
+	};
+	
 	/**
 	 * Adds the buttons for embedded mode.
 	 */
@@ -11630,6 +11692,7 @@
 			}
 			
 			var data = evt.data;
+			var afterLoad = null;
 			
 			var extractDiagramXml = mxUtils.bind(this, function(data)
 			{
@@ -12250,6 +12313,51 @@
 						{
 							urlParams['noSaveBtn'] = data.noSaveBtn;
 						}
+
+						if (data.rough != null)
+						{
+							var initial = Editor.sketchMode; 
+							this.doSetSketchMode(data.rough);
+
+							if (initial != Editor.sketchMode)
+							{
+								this.fireEvent(new mxEventObject('sketchModeChanged'));
+							}
+						}
+
+						if (data.dark != null)
+						{
+							var initial = Editor.darkMode; 
+							this.doSetDarkMode(data.dark);
+
+							if (initial != Editor.darkMode)
+							{
+								this.fireEvent(new mxEventObject('darkModeChanged'));
+							}
+						}
+
+						if (data.rect != null)
+						{
+							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 = '';
+
+							afterLoad = mxUtils.bind(this, function()
+							{
+								var graph = this.editor.graph;
+								var prev = graph.maxFitScale;
+								graph.maxFitScale = 1;
+								graph.fit(20);
+								graph.maxFitScale = prev;
+								graph.container.scrollTop -= 20;
+								graph.container.scrollLeft -= 20;
+								this.fireEvent(new mxEventObject('editInlineStart', 'data', [data]));
+							});
+						}
 						
 						if (data.noExitBtn != null && urlParams['noExitBtn'] == null)
 						{
@@ -12413,6 +12521,11 @@
 					
 					parent.postMessage(JSON.stringify(resp), '*');
 				}
+
+				if (afterLoad != null)
+				{
+					afterLoad();
+				}
 			});
 			
 			if (data != null && typeof data.substring === 'function' && data.substring(0, 34) == 'data:application/vnd.visio;base64,')
@@ -12492,7 +12605,7 @@
 	 */
 	EditorUi.prototype.addEmbedButtons = function()
 	{
-		if (this.menubar != null)
+		if (this.menubar != null && urlParams['embedInline'] != '1')
 		{
 			var div = document.createElement('div');
 			div.style.display = 'inline-block';
@@ -12504,7 +12617,7 @@
 			var button = document.createElement('button');
 			button.className = 'geBigButton';
 			var lastBtn = button;
-			
+
 			if (urlParams['noSaveBtn'] == '1')
 			{
 				if (urlParams['saveAndExit'] != '0')

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

@@ -190,6 +190,15 @@ if (urlParams['lightbox'] == '1')
 	urlParams['chrome'] = '0';
 }
 
+// Embed inline is embed mode and sketch UI
+if (urlParams['embedInline'] == '1')
+{
+	urlParams['embed'] = '1';
+	urlParams['ui'] = 'sketch';
+	urlParams['proto'] = 'json';
+	urlParams['prefetchFonts'] = '1';
+}
+
 /**
  * Returns the global UI setting before running static draw.io code
  */

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

@@ -255,18 +255,31 @@
 		
         var fullscreenAction = editorUi.actions.addAction('fullscreen', function()
 		{
-			if (document.fullscreenElement == null)
+			if (urlParams['embedInline'] == '1')
 			{
-				document.body.requestFullscreen();
+				editorUi.setInlineFullscreen(!Editor.inlineFullscreen);
 			}
 			else
 			{
-				document.exitFullscreen();
+				if (document.fullscreenElement == null)
+				{
+					document.body.requestFullscreen();
+				}
+				else
+				{
+					document.exitFullscreen();
+				}
 			}
 		});
-		fullscreenAction.visible = document.fullscreenEnabled && document.body.requestFullscreen != null;
+		fullscreenAction.visible = urlParams['embedInline'] == '1' ||
+			(document.fullscreenEnabled && document.body.requestFullscreen != null);
 		fullscreenAction.setToggleAction(true);
-		fullscreenAction.setSelectedCallback(function() { return document.fullscreenElement != null; });
+		fullscreenAction.setSelectedCallback(function()
+		{
+			return urlParams['embedInline'] == '1' ? 
+				Editor.inlineFullscreen :
+				document.fullscreenElement != null;
+		});
 		
 		editorUi.actions.addAction('properties...', function()
 		{
@@ -2278,23 +2291,30 @@
 			
 			editorUi.actions.addAction('exit', function()
 			{
-				var fn = function()
+				if (urlParams['embedInline'] == '1')
 				{
-					editorUi.editor.modified = false;
-					var msg = (urlParams['proto'] == 'json') ? JSON.stringify({event: 'exit',
-						modified: editorUi.editor.modified}) : '';
-					var parent = window.opener || window.parent;
-					parent.postMessage(msg, '*');
-				}
-				
-				if (!editorUi.editor.modified)
-				{
-					fn();
+					editorUi.sendEmbeddedSvgExport();
 				}
 				else
 				{
-					editorUi.confirm(mxResources.get('allChangesLost'), null, fn,
-						mxResources.get('cancel'), mxResources.get('discardChanges'));
+					var fn = function()
+					{
+						editorUi.editor.modified = false;
+						var msg = (urlParams['proto'] == 'json') ? JSON.stringify({event: 'exit',
+							modified: editorUi.editor.modified}) : '';
+						var parent = window.opener || window.parent;
+						parent.postMessage(msg, '*');
+					}
+					
+					if (!editorUi.editor.modified)
+					{
+						fn();
+					}
+					else
+					{
+						editorUi.confirm(mxResources.get('allChangesLost'), null, fn,
+							mxResources.get('cancel'), mxResources.get('discardChanges'));
+					}
 				}
 			});
 		}
@@ -3752,20 +3772,23 @@
 				
 				this.addMenuItems(menu, ['-', 'pageSetup', 'print', '-', 'rename'], parent);
 				
-				if (urlParams['noSaveBtn'] == '1')
+				if (urlParams['embedInline'] != '1')
 				{
-					if (urlParams['saveAndExit'] != '0')
+					if (urlParams['noSaveBtn'] == '1')
 					{
-						this.addMenuItems(menu, ['saveAndExit'], parent);
+						if (urlParams['saveAndExit'] != '0')
+						{
+							this.addMenuItems(menu, ['saveAndExit'], parent);
+						}
 					}
-				}
-				else
-				{
-					this.addMenuItems(menu, ['save'], parent);
-					
-					if (urlParams['saveAndExit'] == '1')
+					else
 					{
-						this.addMenuItems(menu, ['saveAndExit'], parent);
+						this.addMenuItems(menu, ['save'], parent);
+						
+						if (urlParams['saveAndExit'] == '1')
+						{
+							this.addMenuItems(menu, ['saveAndExit'], parent);
+						}
 					}
 				}
 				
@@ -3871,7 +3894,7 @@
 					this.addMenuItems(menu, ['-', 'revisionHistory'], parent);
 				}
 				
-				if (file != null && editorUi.fileNode != null)
+				if (file != null && editorUi.fileNode != null && urlParams['embedInline'] != '1')
 				{
 					var filename = (file.getTitle() != null) ?
 						file.getTitle() : editorUi.defaultFilename;

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

@@ -11,7 +11,16 @@ EditorUi.initMinimalTheme = function()
 		return;
 	}
 	
-    var iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+	var iw = 0;
+
+	try
+	{
+		iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+	}
+	catch (e)
+	{
+		// ignore
+	}
 
 	/**
 	 * 
@@ -290,9 +299,12 @@ EditorUi.initMinimalTheme = function()
 				this.doSetDarkMode(value);
 				
 				// Persist setting
-				mxSettings.settings.darkMode = value;
-				mxSettings.save();
-					
+				if (urlParams['dark'] == null)
+				{
+					mxSettings.settings.darkMode = value;
+					mxSettings.save();
+				}
+
 				this.fireEvent(new mxEventObject('darkModeChanged'));
 			}), 0);
 		}
@@ -320,10 +332,13 @@ EditorUi.initMinimalTheme = function()
 			// Sets instance vars and graph stylesheet
 			this.spinner.opts.color = Editor.isDarkMode() ? '#c0c0c0' : '#000';
 			this.setGridColor(Editor.isDarkMode() ? graph.view.defaultDarkGridColor : graph.view.defaultGridColor);
-			graph.defaultPageBackgroundColor = Editor.isDarkMode() ? '#2a2a2a' : '#ffffff';
 			graph.defaultPageBorderColor = Editor.isDarkMode() ? '#505759' : '#ffffff';
 			graph.defaultThemeName = Editor.isDarkMode() ? 'darkTheme' : 'default-style2';
 			graph.graphHandler.previewColor = Editor.isDarkMode() ? '#cccccc' : 'black';
+			graph.defaultPageBackgroundColor = (urlParams['embedInline'] == '1') ? 'transparent' :
+				(Editor.isDarkMode() ? Editor.darkColor : '#ffffff');
+			document.body.style.backgroundColor = (urlParams['embedInline'] == '1') ? 'transparent' :
+				(Editor.isDarkMode() ? Editor.darkColor : '#ffffff');
 			graph.loadStylesheet();
 			
 			// Destroys windows with code for dark mode
@@ -354,18 +369,16 @@ EditorUi.initMinimalTheme = function()
 			}
 
 			// Sets global vars
-			Dialog.backdropColor = Editor.isDarkMode() ? '#2a2a2a' : 'white';
+			Dialog.backdropColor = Editor.isDarkMode() ? Editor.darkColor : 'white';
 			StyleFormatPanel.prototype.defaultStrokeColor = Editor.isDarkMode() ? '#cccccc' : 'black';
-			BaseFormatPanel.prototype.buttonBackgroundColor = Editor.isDarkMode() ? '#2a2a2a' : 'white';
+			BaseFormatPanel.prototype.buttonBackgroundColor = Editor.isDarkMode() ? Editor.darkColor : 'white';
 			Format.inactiveTabBackgroundColor = Editor.isDarkMode() ? 'black' : '#f0f0f0';
 			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;
-			document.body.style.backgroundColor = Editor.isDarkMode() ?
-				'#2a2a2a' : '#ffffff';
-
+			
 			// Updates CSS
 			styleElt.innerHTML = Editor.createMinimalCss();
 			
@@ -431,7 +444,7 @@ EditorUi.initMinimalTheme = function()
 			'html body .geDialog input, html body .geToolbarContainer input, html body .mxWindow input {padding: 2px; display: inline-block; }' +
 			'html body .mxWindow input[type="checkbox"] {padding: 0px; }' +
 			'div.geDialog { border-radius: 5px; }' +
-			'html body div.geDialog button.geBigButton { color: ' + (Editor.isDarkMode() ? '#2a2a2a' : '#fff') + ' !important; border: none !important; }' +
+			'html body div.geDialog button.geBigButton { color: ' + (Editor.isDarkMode() ? Editor.darkColor : '#fff') + ' !important; border: none !important; }' +
 			'.mxWindow button, .geDialog select, .mxWindow select { display:inline-block; }' +
 			'html body .mxWindow .geColorBtn, html body .geDialog .geColorBtn { background: none; }' +
 			'html body div.diagramContainer button, html body .mxWindow button, html body .geDialog button { min-width: 0px; border-radius: 5px; color: ' + (Editor.isDarkMode() ? '#cccccc' : '#353535') + ' !important; border-style: solid; border-width: 1px; border-color: rgb(216, 216, 216); }' +
@@ -451,19 +464,19 @@ EditorUi.initMinimalTheme = function()
 			'td.mxWindowPane .geSidebarContainer button { padding:2px; box-sizing: border-box; }' +
 			'html body .geMenuItem { font-size:14px; text-decoration: none; font-weight: normal; padding: 6px 10px 6px 10px; border: none; border-radius: 5px; color: #353535; box-shadow: inset 0 0 0 1px rgba(0,0,0,.11), inset 0 -1px 0 0 rgba(0,0,0,.08), 0 1px 2px 0 rgba(0,0,0,.04); }' +
 			// Styling for Minimal
-			'.geTabContainer { border-bottom:1px solid lightgray; border-top:1px solid lightgray; background: ' + (Editor.isDarkMode() ? '#2a2a2a' : '#fff') + ' !important; }' +
-			'.geToolbarContainer { background: ' + (Editor.isDarkMode() ? '#2a2a2a' : '#fff') + '; }' +
-			'div.geSidebarContainer { background-color: ' + (Editor.isDarkMode() ? '#2a2a2a' : '#fff') + '; }' +
-			'div.geSidebarContainer .geTitle { background-color: ' + (Editor.isDarkMode() ? '#2a2a2a' : '#fdfdfd') + '; }' +
+			'.geTabContainer { border-bottom:1px solid lightgray; border-top:1px solid lightgray; background: ' + (Editor.isDarkMode() ? Editor.darkColor : '#fff') + ' !important; }' +
+			'.geToolbarContainer { background: ' + (Editor.isDarkMode() ? Editor.darkColor : '#fff') + '; }' +
+			'div.geSidebarContainer { background-color: ' + (Editor.isDarkMode() ? Editor.darkColor : '#fff') + '; }' +
+			'div.geSidebarContainer .geTitle { background-color: ' + (Editor.isDarkMode() ? Editor.darkColor : '#fdfdfd') + '; }' +
 			'div.mxWindow td.mxWindowPane button { background-image: none; float: none; }' +
 			'td.mxWindowTitle { height: 22px !important; background: none !important; font-size: 13px !important; text-align:center !important; border-bottom:1px solid lightgray; }' +
-			'div.mxWindow, div.mxWindowTitle { background-image: none !important; background-color:' + (Editor.isDarkMode() ? '#2a2a2a' : '#fff') + ' !important; }' +
+			'div.mxWindow, div.mxWindowTitle { background-image: none !important; background-color:' + (Editor.isDarkMode() ? Editor.darkColor : '#fff') + ' !important; }' +
 			'div.mxWindow { border-radius:5px; box-shadow: 0px 0px 2px #C0C0C0 !important;}' +
 			'div.mxWindow *:not(svg *) { font-family: inherit !important; }' +
 			// Minimal Style UI
 			'html div.geVerticalHandle { position:absolute;bottom:0px;left:50%;cursor:row-resize;width:11px;height:11px;background:white;margin-bottom:-6px; margin-left:-6px; border: none; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.11), inset 0 -1px 0 0 rgba(0,0,0,.08), 0 1px 2px 0 rgba(0,0,0,.04); }' +
-			'html div.geInactivePage { background: ' + (Editor.isDarkMode() ? '#2a2a2a' : 'rgb(249, 249, 249)') + ' !important; color: #A0A0A0 !important; } ' +
-			'html div.geActivePage { background:  ' + (Editor.isDarkMode() ? '#2a2a2a' : '#fff') + ' !important;  ' + (Editor.isDarkMode() ? '' : 'color: #353535 !important; } ') +
+			'html div.geInactivePage { background: ' + (Editor.isDarkMode() ? Editor.darkColor : 'rgb(249, 249, 249)') + ' !important; color: #A0A0A0 !important; } ' +
+			'html div.geActivePage { background:  ' + (Editor.isDarkMode() ? Editor.darkColor : '#fff') + ' !important;  ' + (Editor.isDarkMode() ? '' : 'color: #353535 !important; } ') +
 			'html div.mxRubberband { border:1px solid; border-color: #29b6f2 !important; background:rgba(41,182,242,0.4) !important; } ' +
 			'html body div.mxPopupMenu { border-radius:5px; border:1px solid #c0c0c0; padding:5px 0 5px 0; box-shadow: 0px 4px 17px -4px rgba(96,96,96,1); } ' +
 			'html table.mxPopupMenu td.mxPopupMenuItem { color: ' + (Editor.isDarkMode() ? '#cccccc' : '#353535') + '; font-size: 14px; padding-top: 4px; padding-bottom: 4px; }' +
@@ -604,10 +617,10 @@ EditorUi.initMinimalTheme = function()
 			this.buttonContainer.style.paddingTop = '4px';
 		}
     };
-    
+
 	EditorUi.prototype.addEmbedButtons = function()
 	{
-		if (this.buttonContainer != null)
+		if (this.buttonContainer != null && urlParams['embedInline'] != '1')
 		{
 			var div = document.createElement('div');
 			div.style.display = 'inline-block';
@@ -622,16 +635,19 @@ EditorUi.initMinimalTheme = function()
 			
 			if (urlParams['noSaveBtn'] == '1')
 			{
-				var saveAndExitTitle = urlParams['publishClose'] == '1' ? mxResources.get('publish') : mxResources.get('saveAndExit');
-				mxUtils.write(button, saveAndExitTitle);
-				button.setAttribute('title', saveAndExitTitle);
-					
-				mxEvent.addListener(button, 'click', mxUtils.bind(this, function()
+				if (urlParams['saveAndExit'] != '0')
 				{
-					this.actions.get('saveAndExit').funct();
-				}));
-				
-				div.appendChild(button);
+					var saveAndExitTitle = urlParams['publishClose'] == '1' ? mxResources.get('publish') : mxResources.get('saveAndExit');
+					mxUtils.write(button, saveAndExitTitle);
+					button.setAttribute('title', saveAndExitTitle);
+						
+					mxEvent.addListener(button, 'click', mxUtils.bind(this, function()
+					{
+						this.actions.get('saveAndExit').funct();
+					}));
+					
+					div.appendChild(button);
+				}
 			}
 			else
 			{
@@ -683,6 +699,8 @@ EditorUi.initMinimalTheme = function()
 			
 			this.buttonContainer.appendChild(div);
 			this.buttonContainer.style.top = '6px';
+
+			this.editor.fireEvent(new mxEventObject('statusChanged'));
 		}
 	};
 	
@@ -761,12 +779,13 @@ EditorUi.initMinimalTheme = function()
 				this.addMenuItems(menu, ['-', 'lockUnlock'], null, evt);
 			}
 		}
-
+		
 		if (graph.isEnabled() && graph.isSelectionEmpty())
 		{
 			this.addMenuItems(menu, ['-', 'fullscreen']);
 
-			if (Editor.isDarkMode() || (!mxClient.IS_IE && !mxClient.IS_IE11))
+			if (urlParams['embedInline'] != '1' && (Editor.isDarkMode() ||
+				(!mxClient.IS_IE && !mxClient.IS_IE11)))
 			{
 				this.addMenuItems(menu, ['toggleDarkMode']);
 			}
@@ -911,7 +930,7 @@ EditorUi.initMinimalTheme = function()
 		
         var ui = this.editorUi;
         var graph = ui.editor.graph;
-        
+
         ui.actions.get('editDiagram').label = mxResources.get('formatXml') + '...';
         ui.actions.get('createShape').label = mxResources.get('shape') + '...';
         ui.actions.get('outline').label = mxResources.get('outline') + '...';
@@ -1030,13 +1049,15 @@ EditorUi.initMinimalTheme = function()
 			}
 			else if (urlParams['embed'] == '1')
 			{
-				if (urlParams['noSaveBtn'] != '1')
+				if (urlParams['noSaveBtn'] != '1' &&
+					urlParams['embedInline'] != '1')
 				{
 					ui.menus.addMenuItems(menu, ['-', 'save'], parent);
 				}
 				
 				if (urlParams['saveAndExit'] == '1' || 
-					(urlParams['noSaveBtn'] == '1' && urlParams['saveAndExit'] != '0'))
+					(urlParams['noSaveBtn'] == '1' &&
+					urlParams['saveAndExit'] != '0'))
 				{
 					ui.menus.addMenuItems(menu, ['saveAndExit'], parent);
 				}
@@ -1104,7 +1125,7 @@ EditorUi.initMinimalTheme = function()
 				ui.menus.addMenuItems(menu, ['print'], parent);
 			}
 
-			if (file != null && ui.fileNode != null)
+			if (file != null && ui.fileNode != null && urlParams['embedInline'] != '1')
 			{
 				var filename = (file.getTitle() != null) ?
 					file.getTitle() : ui.defaultFilename;
@@ -1121,7 +1142,10 @@ EditorUi.initMinimalTheme = function()
 
             if (urlParams['embed'] == '1')
 			{
-				ui.menus.addMenuItems(menu, ['-', 'exit'], parent);
+				if (urlParams['noExitBtn'] != '1')
+				{
+					ui.menus.addMenuItems(menu, ['-', 'exit'], parent);
+				}
 			}
 			else
 			{
@@ -1234,21 +1258,24 @@ EditorUi.initMinimalTheme = function()
 			menu.addSeparator(parent);
 			ui.menus.addMenuItems(menu, ['scrollbars', 'tooltips', 'ruler', '-', 'copyConnect', 'collapseExpand', '-'], parent);
 
-			if (urlParams['sketch'] == '1')
+			if (urlParams['embedInline'] != '1')
 			{
-				this.addMenuItems(menu, ['toggleSketchMode'], parent);
-			}
+				if (urlParams['sketch'] == '1')
+				{
+					this.addMenuItems(menu, ['toggleSketchMode'], parent);
+				}
 
-			this.addMenuItems(menu, ['toggleDarkMode'], parent);
+				this.addMenuItems(menu, ['toggleDarkMode'], parent);
 
-			if (urlParams['embed'] != '1' && (isLocalStorage || mxClient.IS_CHROMEAPP))
-			{
-				ui.menus.addMenuItems(menu, ['-', 'showStartScreen', 'search', 'scratchpad'], parent);
-			}
+				if (urlParams['embed'] != '1' && (isLocalStorage || mxClient.IS_CHROMEAPP))
+				{
+					ui.menus.addMenuItems(menu, ['-', 'showStartScreen', 'search', 'scratchpad'], parent);
+				}
 
-			if (urlParams['sketch'] == '1')
-			{
-				this.addMenuItems(menu, ['togglePagesVisible'], parent);
+				if (urlParams['sketch'] == '1')
+				{
+					this.addMenuItems(menu, ['togglePagesVisible'], parent);
+				}
 			}
 
 			menu.addSeparator(parent);
@@ -1357,10 +1384,16 @@ EditorUi.initMinimalTheme = function()
 	EditorUi.prototype.init = function()
 	{
 		editorUiInit.apply(this, arguments);
-		this.doSetDarkMode((urlParams['dark'] != null) ?
-			urlParams['dark'] == 1 && !mxClient.IS_IE &&
-			!mxClient.IS_IE11 : mxSettings.settings.darkMode);
-		
+
+		if (urlParams['embedInline'] != '1')
+		{
+			this.doSetDarkMode((urlParams['dark'] != null) ?
+				urlParams['dark'] == 1 && !mxClient.IS_IE &&
+				!mxClient.IS_IE11 : ((mxSettings.settings.darkMode != null) ?
+				mxSettings.settings.darkMode : (window.matchMedia &&
+					window.matchMedia('(prefers-color-scheme: dark)').matches)));
+		}
+
 		var div = document.createElement('div');
 		div.style.cssText = 'position:absolute;left:0px;right:0px;top:0px;overflow-y:auto;overflow-x:hidden;';
 		div.style.bottom = (urlParams['embed'] != '1' || urlParams['libraries'] == '1') ? '63px' : '32px';
@@ -1731,12 +1764,127 @@ EditorUi.initMinimalTheme = function()
 			}
 
 			graph.refresh();
-			graph.view.validateBackground()
+			graph.view.validateBackground();
 		});
 			
 		ui.addListener('darkModeChanged', refreshSidebar);
 		ui.addListener('sketchModeChanged', refreshSidebar);
 
+		var inlineSizeChanged = mxUtils.bind(this, function()
+		{
+			if (Editor.inlineFullscreen)
+			{
+				toolbar.style.left = '10px';
+				toolbar.style.top = '10px';
+				
+				picker.style.left = '10px';
+				picker.style.top = '60px';
+
+				footer.style.top = '10px';
+				footer.style.right = '12px';
+				footer.style.left = '';
+
+				ui.diagramContainer.setAttribute('data-bounds', ui.diagramContainer.style.top + ' ' +
+					ui.diagramContainer.style.left + ' ' + ui.diagramContainer.style.width + ' ' +
+					ui.diagramContainer.style.height);
+
+				ui.diagramContainer.style.top = '0px';
+				ui.diagramContainer.style.left = '0px';
+				ui.diagramContainer.style.bottom = '0px';
+				ui.diagramContainer.style.right = '0px';
+				ui.diagramContainer.style.width = '';
+				ui.diagramContainer.style.height = '';
+			}
+			else
+			{
+				var bounds = ui.diagramContainer.getAttribute('data-bounds');
+
+				if (bounds != null)
+				{
+					ui.diagramContainer.style.background = 'transparent';
+					ui.diagramContainer.removeAttribute('data-bounds');
+					var gb = graph.getGraphBounds();
+					var tokens = bounds.split(' ');
+
+					ui.diagramContainer.style.top = tokens[0];
+					ui.diagramContainer.style.left = tokens[1];
+					ui.diagramContainer.style.width = (gb.width + 50) + 'px';
+					ui.diagramContainer.style.height = (gb.height + 46) + 'px';
+					ui.diagramContainer.style.bottom = '';
+					ui.diagramContainer.style.right = '';
+
+					var parent = window.opener || window.parent;
+					parent.postMessage(JSON.stringify({
+						event: 'resize',
+						rect: ui.diagramContainer.getBoundingClientRect()
+					}), '*');
+					ui.refresh();
+				}
+
+				toolbar.style.left = ui.diagramContainer.offsetLeft + 'px';
+				toolbar.style.top = (ui.diagramContainer.offsetTop -
+					toolbar.offsetHeight - 4) + 'px';
+				
+				picker.style.display = '';
+				picker.style.left = (ui.diagramContainer.offsetLeft -
+					picker.offsetWidth - 4) + 'px';
+				picker.style.top = ui.diagramContainer.offsetTop + 'px';
+
+				footer.style.left = (ui.diagramContainer.offsetLeft +
+					ui.diagramContainer.offsetWidth -
+					footer.offsetWidth) + 'px';
+				footer.style.top = toolbar.style.top;
+				footer.style.right = '';
+
+				ui.bottomResizer.style.left = (ui.diagramContainer.offsetLeft +
+					(ui.diagramContainer.offsetWidth -
+					ui.bottomResizer.offsetWidth) / 2) + 'px';
+				ui.bottomResizer.style.top = (ui.diagramContainer.offsetTop +
+					ui.diagramContainer.offsetHeight -
+					ui.bottomResizer.offsetHeight / 2 - 1) + 'px';
+
+				ui.rightResizer.style.left = (ui.diagramContainer.offsetLeft +
+					ui.diagramContainer.offsetWidth -
+					ui.rightResizer.offsetWidth / 2 - 1) + 'px';
+				ui.rightResizer.style.top = (ui.diagramContainer.offsetTop +
+					(ui.diagramContainer.offsetHeight -
+					ui.bottomResizer.offsetHeight) / 2) + 'px';
+			}
+
+			ui.bottomResizer.style.visibility = (Editor.inlineFullscreen) ? 'hidden' : '';
+			ui.rightResizer.style.visibility = ui.bottomResizer.style.visibility;
+			menubar.style.display = 'none';
+			toolbar.style.visibility = '';
+			footer.style.visibility = '';
+		});
+
+		var editInlineStart = mxUtils.bind(this, function()
+		{
+			this.diagramContainer.style.background = (Editor.inlineFullscreen) ?
+				(Editor.isDarkMode() ? Editor.darkColor : '#ffffff') : 'transparent';
+			inlineSizeChanged();
+		});
+
+		ui.addListener('inlineFullscreenChanged', editInlineStart);
+		ui.addListener('editInlineStart', editInlineStart);
+
+		if (urlParams['embedInline'] == '1')
+		{
+			ui.addListener('darkModeChanged', editInlineStart);
+		}
+
+		ui.addListener('editInlineStop', mxUtils.bind(this, function(evt)
+		{
+			ui.diagramContainer.style.width = '10px';
+			ui.diagramContainer.style.height = '10px';
+			ui.diagramContainer.style.border = '';
+			ui.bottomResizer.style.visibility = 'hidden';
+			ui.rightResizer.style.visibility = 'hidden';
+			toolbar.style.visibility = 'hidden';
+			footer.style.visibility = 'hidden';
+			picker.style.display = 'none';
+		}));
+
 		// Stops panning while freehand is active
 		if (Graph.touchStyle)
 		{
@@ -1860,6 +2008,13 @@ EditorUi.initMinimalTheme = function()
 					menubar.style.visibility = (menubar.clientWidth > 12) ? '' : 'hidden';
 				}));
 			}
+			else
+			{
+				ui.editor.addListener('statusChanged', mxUtils.bind(this, function()
+				{
+					menubar.style.visibility = (menubar.clientWidth > 16) ? '' : 'hidden';
+				}));
+			}
 			
 			elt = addMenu('diagram', null, Editor.menuImage);
 			elt.style.boxShadow = 'none';
@@ -1994,7 +2149,10 @@ EditorUi.initMinimalTheme = function()
 					addAction(ui.actions.get('insertTemplate'), mxResources.get('template'), Editor.templateImage);
 				}
 
-				picker.appendChild(foldImg);
+				if (urlParams['embedInline'] != '1')
+				{
+					picker.appendChild(foldImg);
+				}
 			});
 			
 			mxEvent.addListener(foldImg, 'click', mxUtils.bind(this, function()
@@ -2069,9 +2227,11 @@ EditorUi.initMinimalTheme = function()
         	var redoAction = ui.actions.get('redo');        	
 	        var undoElt = addMenuItem('', undoAction.funct, null, mxResources.get('undo') + ' (' + undoAction.shortcut + ')', undoAction, Editor.undoImage);
 	        var redoElt = addMenuItem('', redoAction.funct, null, mxResources.get('redo') + ' (' + redoAction.shortcut + ')', redoAction, Editor.redoImage);
+			var fullscreenElt = addMenuItem('', fullscreenAction.funct, null, mxResources.get('fullscreen'), fullscreenAction, Editor.fullscreenImage);
 
 			if (footer != null)
 			{
+				fullscreenElt.parentNode.removeChild(fullscreenElt);
 				var deleteAction = ui.actions.get('delete');
 				var deleteElt = addMenuItem('', deleteAction.funct, null, mxResources.get('delete'), deleteAction, Editor.trashImage);
 				deleteElt.style.opacity = '0.1';
@@ -2145,6 +2305,11 @@ EditorUi.initMinimalTheme = function()
 					' (' + Editor.ctrlKey + ' +/Alt+Mousewheel)', zoomInAction, Editor.zoomInImage);
 				footer.appendChild(zoomInElt);
 
+				if (urlParams['embedInline'] == '1')
+				{
+					footer.appendChild(fullscreenElt);
+				}
+
 				var pageMenu = this.createPageMenuTab(false);
 				pageMenu.style.display = 'none';
 				pageMenu.style.position = '';
@@ -2206,7 +2371,6 @@ EditorUi.initMinimalTheme = function()
 			}
 			else
 			{
-				var fullscreenElt = addMenuItem('', fullscreenAction.funct, null, mxResources.get('fullscreen'), fullscreenAction, Editor.fullscreenImage);
 				var fitElt = addMenuItem('', fitFunction, true, mxResources.get('fit') + ' (' + Editor.ctrlKey + '+H)', resetViewAction, Editor.zoomFitImage);
 				
 				menubar.style.cssText = 'position:absolute;left:0px;right:0px;top:0px;height:30px;padding:8px;' +
@@ -2279,37 +2443,40 @@ EditorUi.initMinimalTheme = function()
         
         function refreshMenu()
         {
-        	// Removes all existing menu items
-        	var node = menubar.firstChild;
-        	
-        	while (node != null)
-        	{
-        		var temp = node.nextSibling;
-        		
-        		if (node.className == 'geMenuItem' || node.className == 'geItem')
-        		{
-        			node.parentNode.removeChild(node);
-        		}
-        		
-        		node = temp;
-        	}
-        	
-        	before = menubar.firstChild;
-	        iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-	        var small = iw < 1000 || urlParams['sketch'] == '1';
-			var appElt = null;
-	 
-	        if (!small)
-	        {
-	        	appElt = addMenu('diagram');
-	        }
-
 			if (urlParams['sketch'] == '1')
 			{
-				toolbar.style.left = (picker.offsetTop - picker.offsetHeight / 2 < 58) ? '70px' : '10px';
+				if (urlParams['embedInline'] != '1')
+				{
+					toolbar.style.left = (picker.offsetTop - picker.offsetHeight / 2 < 58) ? '70px' : '10px';
+				}
 			}
 			else
 			{
+				// Removes all existing menu items
+				var node = menubar.firstChild;
+				
+				while (node != null)
+				{
+					var temp = node.nextSibling;
+					
+					if (node.className == 'geMenuItem' || node.className == 'geItem')
+					{
+						node.parentNode.removeChild(node);
+					}
+					
+					node = temp;
+				}
+				
+				before = menubar.firstChild;
+				iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+				var small = iw < 1000 || urlParams['sketch'] == '1';
+				var appElt = null;
+		
+				if (!small)
+				{
+					appElt = addMenu('diagram');
+				}
+
 				var temp = (small) ? addMenu('diagram', null, Editor.drawLogoImage) : null;
 
 				if (temp != null)
@@ -2440,6 +2607,112 @@ EditorUi.initMinimalTheme = function()
             	ui.menus.findReplaceWindow.window.fit();
             }
 		});
+
+		if (urlParams['embedInline'] == '1')
+		{
+			document.body.style.cursor = 'text';
+			picker.style.transform = '';
+
+			mxEvent.addGestureListeners(ui.diagramContainer.parentNode, function(evt)
+			{
+				if (mxEvent.getSource(evt) ==
+					ui.diagramContainer.parentNode)
+				{
+					ui.sendEmbeddedSvgExport();
+				}
+			});
+
+			var div = document.createElement('div');
+			div.style.position = 'absolute';
+			div.style.width = '10px';
+			div.style.height = '10px';
+			div.style.borderRadius = '5px';
+			div.style.border = '1px solid gray';
+			div.style.background = '#ffffff';
+			div.style.cursor = 'row-resize';
+			ui.diagramContainer.parentNode.appendChild(div);
+			ui.bottomResizer = div;
+
+			var x0 = null;
+			var y0 = null;
+			var w0 = null;
+			var h0 = null;
+
+			mxEvent.addGestureListeners(div, function(evt)
+			{
+				h0 = parseInt(ui.diagramContainer.style.height);
+				y0 = mxEvent.getClientY(evt);
+				graph.popupMenuHandler.hideMenu();
+				mxEvent.consume(evt);
+			});
+
+			div = div.cloneNode(false);
+			div.style.cursor = 'col-resize';
+			ui.diagramContainer.parentNode.appendChild(div);
+			ui.rightResizer = div;
+
+			mxEvent.addGestureListeners(div, function(evt)
+			{
+				w0 = parseInt(ui.diagramContainer.style.width);
+				x0 = mxEvent.getClientX(evt);
+				graph.popupMenuHandler.hideMenu();
+				mxEvent.consume(evt);
+			});
+
+			mxEvent.addGestureListeners(document.body, null, function(evt)
+			{
+				var changed = false;
+
+				if (x0 != null)
+				{
+					ui.diagramContainer.style.width = Math.max(20,
+						w0 + mxEvent.getClientX(evt) - x0) + 'px';
+					changed = true;
+				}
+
+				if (y0 != null)
+				{
+					ui.diagramContainer.style.height = Math.max(20,
+						h0 + mxEvent.getClientY(evt) - y0) + 'px';
+					changed = true;
+				}
+
+				if (changed)
+				{
+					var parent = window.opener || window.parent;
+					parent.postMessage(JSON.stringify({
+						event: 'resize',
+						fullscreen: Editor.inlineFullscreen,
+						rect: ui.diagramContainer.getBoundingClientRect()
+					}), '*');
+					ui.fireEvent(new mxEventObject('editInlineStart'));
+					ui.refresh();
+				}
+			}, function(evt)
+			{
+				if (x0 != null || y0 != null)
+				{
+					mxEvent.consume(evt);
+				}
+
+				x0 = null;
+				y0 = null;
+			});
+
+			graph.defaultPageBackgroundColor = 'transparent';
+			this.diagramContainer.style.borderRadius = '4px';
+			document.body.style.backgroundColor = 'transparent';
+			ui.bottomResizer.style.visibility = 'hidden';
+			ui.rightResizer.style.visibility = 'hidden';
+			toolbar.style.visibility = 'hidden';
+			footer.style.visibility = 'hidden';
+			picker.style.display = 'none';
+		}
+		
+		if (urlParams['prefetchFonts'] == '1')
+		{
+			ui.editor.loadFonts();
+		}
 	};	
 };
 

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

@@ -1281,7 +1281,7 @@ EditorUi.prototype.updateTabContainer = function()
 				if (this.pages[index] == this.currentPage)
 				{
 					tab.className = 'geActivePage';
-					tab.style.backgroundColor = Editor.isDarkMode() ? '#2a2a2a' : '#fff';
+					tab.style.backgroundColor = Editor.isDarkMode() ? Editor.darkColor : '#fff';
 				}
 				else
 				{

src/main/webapp/js/diagramly/mxRuler.js

@@ -35,8 +35,8 @@ function mxRuler(editorUi, unit, isVertical, isSecondery)
     	guideClr: '#0000BB'
     } : {
     	bkgClr: '#202020',
-    	outBkgClr: '#2a2a2a',
-    	cornerClr: '#2a2a2a',
+    	outBkgClr: Editor.darkColor,
+    	cornerClr: Editor.darkColor,
     	strokeClr: '#505759',
     	fontClr: '#BBBBBB',
     	guideClr: '#0088cf'
@@ -68,8 +68,8 @@ function mxRuler(editorUi, unit, isVertical, isSecondery)
 	    	guideClr: '#0000BB'
 	    } : {
 	    	bkgClr: '#202020',
-	    	outBkgClr: '#2a2a2a',
-	    	cornerClr: '#2a2a2a',
+	    	outBkgClr: Editor.darkColor,
+	    	cornerClr: Editor.darkColor,
 	    	strokeClr: '#505759',
 	    	fontClr: '#BBBBBB',
 	    	guideClr: '#0088cf'

src/main/webapp/js/grapheditor/Editor.js

@@ -214,11 +214,21 @@ Editor.simpleLabels = false;
  */
 Editor.enableNativeCipboard = window == window.top && !mxClient.IS_FF && navigator.clipboard != null;
 		
+/**
+ * Dynamic change of dark mode for minimal and sketch theme.
+ */
+Editor.sketchMode = false;
+
 /**
  * Dynamic change of dark mode for minimal and sketch theme.
  */
 Editor.darkMode = false;
 
+/**
+ * Dynamic change of dark mode for minimal and sketch theme.
+ */
+Editor.darkColor = '#2a2a2a';
+
 /**
  * Dynamic change of dark mode.
  */

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

@@ -297,7 +297,7 @@ EditorUi = function(editor, container, lightbox)
 						var key = appliedStyles[j];
 						var styleValue = current[key];
 	
-						if (styleValue != null && (key != 'shape' || edge))
+						if (styleValue != null && key != 'edgeStyle' && (key != 'shape' || edge))
 						{
 							// Special case: Connect styles are not applied here but in the connection handler
 							if (!edge || applyAll || mxUtils.indexOf(connectStyles, key) < 0)
@@ -3939,8 +3939,6 @@ EditorUi.prototype.refresh = function(sizeDidChange)
 	
 	var diagContOffset = this.getDiagramContainerOffset();
 	var contLeft = (this.hsplit.parentNode != null) ? (effHsplitPosition + this.splitSize) : 0;
-	this.diagramContainer.style.left =  (contLeft + diagContOffset.x) + 'px';
-	this.diagramContainer.style.top = (tmp + diagContOffset.y) + 'px';
 	this.footerContainer.style.height = this.footerHeight + 'px';
 	this.hsplit.style.top = this.sidebarContainer.style.top;
 	this.hsplit.style.bottom = (this.footerHeight + off) + 'px';
@@ -3957,7 +3955,6 @@ EditorUi.prototype.refresh = function(sizeDidChange)
 		this.footerContainer.style.bottom = off + 'px';
 	}
 	
-	this.diagramContainer.style.right = fw + 'px';
 	var th = 0;
 	
 	if (this.tabContainer != null)
@@ -3969,8 +3966,15 @@ EditorUi.prototype.refresh = function(sizeDidChange)
 	
 	this.sidebarContainer.style.bottom = (this.footerHeight + sidebarFooterHeight + off) + 'px';
 	this.formatContainer.style.bottom = (this.footerHeight + off) + 'px';
-	this.diagramContainer.style.bottom = (this.footerHeight + off + th) + 'px';
-	
+
+	if (urlParams['embedInline'] != '1')
+	{
+		this.diagramContainer.style.left =  (contLeft + diagContOffset.x) + 'px';
+		this.diagramContainer.style.top = (tmp + diagContOffset.y) + 'px';
+		this.diagramContainer.style.right = fw + 'px';
+		this.diagramContainer.style.bottom = (this.footerHeight + off + th) + 'px';
+	}
+
 	if (sizeDidChange)
 	{
 		this.editor.graph.sizeDidChange();

src/main/webapp/plugins/explore.js

@@ -32,8 +32,8 @@ Draw.loadPlugin(function(ui)
 		var container = document.createElement('div');
 		container.style.position = 'absolute';
 		container.style.display = 'block';
-		container.style.background = (uiTheme == 'dark') ?
-			'#2a2a2a' : '#ffffff';
+		container.style.background = (Editor.isDarkMode()) ?
+			Editor.darkColor : '#ffffff';
 		container.style.width = '100%';
 		container.style.height = '100%';
 		container.style.left = '0px';

src/main/webapp/plugins/props.js

@@ -4,7 +4,7 @@
 Draw.loadPlugin(function(ui) {
 	
 	var div = document.createElement('div');
-	div.style.background = Editor.isDarkMode() ? '#2a2a2a' : '#ffffff';
+	div.style.background = Editor.isDarkMode() ? Editor.darkColor : '#ffffff';
 	div.style.border = '1px solid gray';
 	div.style.opacity = '0.8';
 	div.style.padding = '10px';