21.6.6 release

ChangeLog

@@ -1,3 +1,9 @@
+28-JUL-2023: 21.6.6
+
+- Adds improve contrast, fixes CSS for old dark mode
+- [conf cloud] Added config option to generate SVG preview when a diagram is published (generateSVGs: true) [DID-8942]
+- [vsdx] Split EMF conversion into chunks to reduce the chance of timeout and reduce + retries on error
+
 20-JUL-2023: 21.6.5
 
 - Fixes mxIsElectron undefined error in editor.js

VERSION

@@ -1 +1 @@
-21.6.5
+21.6.6

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

@@ -6994,20 +6994,20 @@ App.prototype.updateHeader = function()
 			this.appIconClicked(evt);
 		}));
 
-		if (!Editor.enableCssDarkMode)
+		var updateBackground = mxUtils.bind(this, function()
 		{
-			var updateBackground = mxUtils.bind(this, function()
+			if (Editor.enableCssDarkMode)
+			{
+				this.appIcon.style.backgroundColor = '#f08705';
+			}
+			else
 			{
 				this.appIcon.style.backgroundColor = (!Editor.isDarkMode()) ? '#f08705' : '';
-			});
+			}
+		});
 
-			this.addListener('darkModeChanged', updateBackground);
-			updateBackground();
-		}
-		else
-		{
-			this.appIcon.style.backgroundColor = '#f08705';
-		}
+		this.addListener('darkModeChanged', updateBackground);
+		updateBackground();
 
 		mxUtils.setPrefixedStyle(this.appIcon.style, 'transition', 'all 125ms linear');
 
@@ -7453,11 +7453,7 @@ App.prototype.updateUserElementIcon = function()
 				icon.style.left = '16px';
 				icon.style.width = '12px';
 				icon.style.height = '12px';
-
-				if (Editor.enableCssDarkMode)
-				{
-					icon.className = 'geAdaptiveAsset';
-				}
+				icon.className = 'geAdaptiveAsset';
 
 				var err = file.getRealtimeError();
 				var state = file.getRealtimeState();

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

@@ -10142,6 +10142,12 @@
 			}
 
 			this.formatWidth = mxSettings.getFormatWidth();
+
+			if ((Editor.config == null || Editor.config.enableCssDarkMode == null) &&
+				mxSettings.settings.enableCssDarkMode != null)
+			{
+				Editor.enableCssDarkMode = mxSettings.settings.enableCssDarkMode;
+			}
 		}
 
 		editorUiCreateUi.apply(this, arguments);
@@ -11511,13 +11517,13 @@
 			this.fitWindows();
 		}));
 
-		if (!Editor.enableCssDarkMode)
+		this.addListener('darkModeChanged', mxUtils.bind(this, function(evt)
 		{
-			this.addListener('darkModeChanged', mxUtils.bind(this, function(evt)
+			if (!Editor.enableCssDarkMode)
 			{
 				this.inlineSizeChanged();
-			}));
-		}
+			}
+		}));
 
 		this.addListener('editInlineStop', mxUtils.bind(this, function(evt)
 		{
@@ -12990,11 +12996,13 @@
 				this.editor.addListener('fileLoaded', initPicker);
 				this.addListener('sketchModeChanged', initPicker);
 				this.addListener('currentThemeChanged', initPicker);
-
-				if (!Editor.enableCssDarkMode)
+				this.addListener('darkModeChanged', mxUtils.bind(this, function()
 				{
-					this.addListener('darkModeChanged', initPicker);
-				}
+					if (!Editor.enableCssDarkMode)
+					{
+						initPicker();
+					}
+				}));
 
 				initPicker(true);
 
@@ -13960,6 +13968,25 @@
 			(!this.editor.chromeless || this.editor.editable) &&
 			mxSettings.settings.darkMode == null)));
 	};
+
+	/**
+	 * Dynamic change of dark mode.
+	 */
+	EditorUi.prototype.setCssDarkModeEnabled = function(value)
+	{
+		var prev = Editor.isDarkMode() || Editor.cssDarkMode;
+
+		if (prev)
+		{
+			this.setDarkMode(false);
+		}
+
+		Editor.enableCssDarkMode = value;
+		mxSettings.settings.enableCssDarkMode = Editor.enableCssDarkMode;
+		mxSettings.save();
+		this.setDarkMode(prev);
+		this.fireEvent(new mxEventObject('cssDarkModeEnabledChanged'));
+	};
 
 	/**
 	 * Dynamic change of dark mode.
@@ -16306,15 +16333,27 @@
 								this.editor.graph.setEnabled(false);
 								var graph = this.editor.graph;
 
-								var postDataBack = mxUtils.bind(this, function(uri)
+								var postDataBack = mxUtils.bind(this, function(uri, svg)
 								{
+									if (data.withSvg)
+									{
+										data.withSvg = false;
+										this.getEmbeddedSvg(xml, this.editor.graph, null, true, function(svg)
+										{
+											postDataBack(uri, svg);
+										}, null, null, data.embedImages, this.editor.graph.background, 
+										data.scale, data.border, data.shadow);	
+										return;
+									}
+
 									this.editor.graph.setEnabled(true);
 									this.spinner.stop();
 
 									var msg = this.createLoadMessage('export');
 									msg.format = data.format;
 									msg.message = data;
 									msg.data = uri;
+									msg.svg = svg;
 									msg.xml = xml;
 									parent.postMessage(JSON.stringify(msg), '*');
 								});
@@ -18291,11 +18330,13 @@
 			this.restoreOpenLibraries();
 		});
 
-		if (!Editor.enableCssDarkMode)
+		this.addListener('darkModeChanged', mxUtils.bind(this, function()
 		{
-			this.addListener('darkModeChanged', refreshSidebar);
-		}
-
+			if (!Editor.enableCssDarkMode)
+			{
+				refreshSidebar();
+			}
+		}));
 		this.addListener('sketchModeChanged', refreshSidebar);
 		this.addListener('currentThemeChanged', refreshSidebar);
 

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

@@ -1738,12 +1738,8 @@ GraphViewer.prototype.createToolbarButton = function(fn, imgSrc, tip, enabled)
 	img.setAttribute('border', '0');
 	img.setAttribute('src', imgSrc);
 	img.style.width = '18px';
-
-	if (Editor.enableCssDarkMode)
-	{
-		img.className = 'geAdaptiveAsset';
-	}
-
+	img.className = 'geAdaptiveAsset';
+
 	if (enabled == null || enabled)
 	{
 		mxEvent.addListener(a, 'mouseenter', function()
@@ -1955,18 +1951,7 @@ GraphViewer.prototype.showLocalLightbox = function(container)
 	closeImg.setAttribute('src', Editor.closeBlackImage);
 	closeImg.style.cssText = 'position:fixed;top:32px;right:32px;';
 	closeImg.style.cursor = 'pointer';
-
-	if (this.darkMode)
-	{
-		if (Editor.enableCssDarkMode)
-		{
-			closeImg.className = 'geAdaptiveAsset';
-		}
-		else
-		{
-			closeImg.style.filter = 'invert(1)';
-		}
-	}
+	closeImg.className = 'geAdaptiveAsset';
 
 	mxEvent.addListener(closeImg, 'click', function()
 	{

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

@@ -30,12 +30,8 @@
 		icon.setAttribute('valign', 'bottom');
 		icon.setAttribute('src', Editor.helpImage);
 		link.appendChild(icon);
+		icon.className = 'geAdaptiveAsset';
 
-		if (Editor.enableCssDarkMode)
-		{
-			icon.className = 'geAdaptiveAsset';
-		}
-
 		mxEvent.addGestureListeners(link, mxUtils.bind(this, function(evt)
 		{
 			this.editorUi.hideCurrentMenu();
@@ -1344,9 +1340,9 @@
 		});
 
 		// Adds action for converting dark mode colors
-		if (Editor.enableCssDarkMode)
+		editorUi.actions.put('convertDarkModeColors', new Action('Dark Mode Colors...', function(evt)
 		{
-			editorUi.actions.put('convertDarkModeColors', new Action('Dark Mode Colors...', function(evt)
+			if (Editor.enableCssDarkMode)
 			{
 				if (editorUi.darkModeColorsWindow == null)
 				{
@@ -1355,8 +1351,8 @@
 				}
 
 				editorUi.darkModeColorsWindow.window.setVisible(true);
-			}));
-		}
+			}
+		}));
 
 		// Adds fullscreen toggle to zoom menu in sketch and min
         var viewZoomMenu = this.get('viewZoom');
@@ -2776,6 +2772,21 @@
 				});
 			}
 		}
+
+		var action = editorUi.actions.addAction('improveContrast', function()
+		{
+			editorUi.setCssDarkModeEnabled(!Editor.enableCssDarkMode);
+		});
+
+		action.isEnabled = function()
+		{
+			return Editor.isDarkMode() || Editor.cssDarkMode;
+		};
+		action.setToggleAction(true);
+		action.setSelectedCallback(function()
+		{
+			return Editor.enableCssDarkMode;
+		});
 
 		var action = editorUi.actions.addAction('search', function()
 		{
@@ -3249,7 +3260,7 @@
 							'dark' : 'light') + ')');
 				}
 			}
-			
+
 			if (urlParams['embed'] != '1')
 			{
 				this.addMenuItems(menu, ['-', 'toggleSimpleMode'], parent);
@@ -3271,6 +3282,8 @@
 							'dark' : 'light') + ')');
 				}
 			}
+
+			this.addMenuItems(menu, ['-', 'improveContrast'], parent);
 		})));
 
 		editorUi.actions.addAction('addToScratchpad', function(evt)