14.6.2 release

ChangeLog

@@ -1,3 +1,11 @@
+19-APR-2021: 14.6.2
+
+- Fixes private Gitlab instance URL parsing
+
+15-APR-2021: 14.6.1
+
+- Improvements to sketch theme
+
 13-APR-2021: 14.6.0
 
 - Updates to workbox 6.1.2

VERSION

@@ -1 +1 @@
-14.6.0
+14.6.2

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

@@ -51,6 +51,7 @@ if (!mxIsElectron && location.protocol !== 'http:')
 				'https://*.googleapis.com wss://*.pusher.com https://*.pusher.com ' +
 				'https://api.github.com https://raw.githubusercontent.com https://gitlab.com ' +
 				'https://graph.microsoft.com https://*.sharepoint.com  https://*.1drv.com ' +
+				'https://dl.dropboxusercontent.com ' +
 				'https://*.google.com https://fonts.gstatic.com https://fonts.googleapis.com; ' +
 			// font-src about: is required for MathJax HTML-CSS output with STIX
 			'img-src * data:; media-src * data:; font-src * about:; ' +

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

@@ -9,14 +9,27 @@
 		/**
 		 * Enables paste from Lucidchart
 		 */
-		html4.ATTRIBS["span::data-lucid-content"] = 0;
-		html4.ATTRIBS["span::data-lucid-type"] = 0;
+		html4.ATTRIBS['span::data-lucid-content'] = 0;
+		html4.ATTRIBS['span::data-lucid-type'] = 0;
 		
 		/**
 		 * Enables custom fonts in labels.
 		 */
 		html4.ATTRIBS['font::data-font-src'] = 0;
 	}
+			
+	/**
+	 * Dynamic change of dark mode for minimal and sketch theme.
+	 */
+	Editor.darkMode = false;
+	
+	/**
+	 * Dynamic change of dark mode.
+	 */
+	Editor.isDarkMode = function(value)
+	{
+		return Editor.darkMode || uiTheme == 'dark';
+	};
 	
 	/**
 	 * Specifies the app name. Default is document.title.
@@ -5143,12 +5156,12 @@
 						else if (colorset['fill'] == '')
 						{
 							btn.style.backgroundColor = mxUtils.getValue(ui.initialDefaultVertexStyle,
-								mxConstants.STYLE_FILLCOLOR, (uiTheme == 'dark') ?'#2a2a2a' : '#ffffff');
+								mxConstants.STYLE_FILLCOLOR, (Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff');
 						}
 						else
 						{
 							btn.style.backgroundColor = colorset['fill'] || mxUtils.getValue(ui.initialDefaultVertexStyle,
-								mxConstants.STYLE_FILLCOLOR, (uiTheme == 'dark') ?'#2a2a2a' : '#ffffff');
+								mxConstants.STYLE_FILLCOLOR, (Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff');
 						}
 						
 						if (colorset['stroke'] == mxConstants.NONE)
@@ -5158,12 +5171,12 @@
 						else if (colorset['stroke'] == '')
 						{
 							btn.style.border = '1px solid ' + mxUtils.getValue(ui.initialDefaultVertexStyle, 
-								mxConstants.STYLE_STROKECOLOR, (uiTheme != 'dark') ?'#2a2a2a' : '#ffffff');
+								mxConstants.STYLE_STROKECOLOR, (!Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff');
 						}
 						else
 						{
 							btn.style.border = '1px solid ' + (colorset['stroke'] || mxUtils.getValue(ui.initialDefaultVertexStyle,
-									mxConstants.STYLE_STROKECOLOR, (uiTheme != 'dark') ?'#2a2a2a' : '#ffffff'));
+									mxConstants.STYLE_STROKECOLOR, (!Editor.isDarkMode()) ?'#2a2a2a' : '#ffffff'));
 						}
 					}
 					else
@@ -5193,7 +5206,7 @@
 
 			if (this.format.currentScheme == null)
 			{
-				setScheme((uiTheme == 'dark') ? 1 : 0);
+				setScheme((Editor.isDarkMode()) ? 1 : 0);
 			}
 			else
 			{

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

@@ -3629,10 +3629,10 @@
     		mxClient.link('stylesheet', STYLE_PATH + '/dark.css');
 
 			Dialog.backdropColor = '#2a2a2a';
+			Format.inactiveTabBackgroundColor = 'black';
 	    	Graph.prototype.defaultThemeName = 'darkTheme';
 			Graph.prototype.defaultPageBackgroundColor = '#2a2a2a';
 			Graph.prototype.defaultPageBorderColor = '#505759';
-			Format.prototype.inactiveTabBackgroundColor = 'black';
 			BaseFormatPanel.prototype.buttonBackgroundColor = '#2a2a2a';
 			Sidebar.prototype.dragPreviewBorder = '1px dashed #cccccc';
 			mxGraphHandler.prototype.previewColor = '#cccccc';
@@ -5855,7 +5855,7 @@
 			defaultTransparent, null, null, format != 'jpeg');
 		var keepTheme = null;
 		
-		if (uiTheme == 'dark')
+		if (Editor.isDarkMode())
 		{
 			keepTheme = this.addCheckbox(div, mxResources.get('dark'), true); 
 			height += 26;
@@ -6840,13 +6840,14 @@
 						
 						if (action.open != null && action.open.substring(0, 13) == 'data:page/id,')
 						{
-							var newId = mapping[action.open.substring(action.open.indexOf(',') + 1)];
+							var oldId = action.open.substring(action.open.indexOf(',') + 1);
+							var newId = mapping[oldId];
 							
 							if (newId != null)
 							{
 								action.open = 'data:page/id,' + newId;
 							}
-							else
+							else if (this.getPageById(oldId) == null)
 							{
 								delete action.open;
 							}
@@ -9930,11 +9931,11 @@
 			/**
 			 * Persists default grid color.
 			 */
-			this.editor.graph.view.gridColor = mxSettings.getGridColor(uiTheme == 'dark');
+			this.editor.graph.view.gridColor = mxSettings.getGridColor(Editor.isDarkMode());
 			
 			this.addListener('gridColorChanged', mxUtils.bind(this, function(sender, evt)
 			{
-				mxSettings.setGridColor(this.editor.graph.view.gridColor, uiTheme == 'dark');
+				mxSettings.setGridColor(this.editor.graph.view.gridColor, Editor.isDarkMode());
 				mxSettings.save();
 			}));
 

src/main/webapp/js/diagramly/ElectronApp.js

@@ -451,7 +451,6 @@ mxStencilRegistry.allowEval = false;
 						    					else
 						    					{
 						    						asImage = true;
-						    						data = btoa(data);
 						    					}
 					    					}
 						    			}
@@ -477,13 +476,8 @@ mxStencilRegistry.allowEval = false;
 											};
 											
 											var format = path.substring(path.lastIndexOf('.') + 1);
-											
-											if (format == 'svg')
-											{
-												format = 'svg+xml';
-											}
-											
-											img.src = 'data:image/' + format + ';base64,' + data;
+											img.src = (format == 'svg') ? Editor.createSvgDataUri(data) :
+												'data:image/' + format + ';base64,' + data;
 										}
 										else
 										{

src/main/webapp/js/diagramly/GitLabClient.js

@@ -49,8 +49,9 @@ GitLabClient.prototype.authenticate = function(success, error)
 			this.ui.showAuthDialog(this, true, mxUtils.bind(this, function(remember, authSuccess)
 			{
 				var state = '123';
-				var href = window.location.href;
-				var dir = href.substring(0, href.lastIndexOf('/'));
+				var href = window.location.href.split('?');
+				var dir = href[0].substring(0, href[0].lastIndexOf('/'));
+
 				var redirectUri = encodeURIComponent(dir + '/gitlab.html');
 				var win = window.open(DRAWIO_GITLAB_URL + '/oauth/authorize?client_id=' +
 					this.clientId + '&scope=' + this.scope + '&redirect_uri=' + redirectUri +

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

@@ -2392,12 +2392,11 @@
 
 		this.put('theme', new Menu(mxUtils.bind(this, function(menu, parent)
 		{
-			var theme = mxSettings.getUi();
+			var theme = (urlParams['sketch'] == '1') ? 'sketch' : mxSettings.getUi();
 
 			var item = menu.addItem(mxResources.get('automatic'), null, function()
 			{
 				mxSettings.setUi('');
-				mxSettings.save();
 				editorUi.alert(mxResources.get('restartForChangeRequired'));
 			}, parent);
 			
@@ -2410,10 +2409,9 @@
 
 			menu.addSeparator(parent);
 			
-			item = menu.addItem(mxResources.get('kennedy'), null, function()
+			item = menu.addItem(mxResources.get('default'), null, function()
 			{
 				mxSettings.setUi('kennedy');
-				mxSettings.save();
 				editorUi.alert(mxResources.get('restartForChangeRequired'));
 			}, parent);
 
@@ -2425,7 +2423,6 @@
 			item = menu.addItem(mxResources.get('minimal'), null, function()
 			{
 				mxSettings.setUi('min');
-				mxSettings.save();
 				editorUi.alert(mxResources.get('restartForChangeRequired'));
 			}, parent);
 			
@@ -2437,7 +2434,6 @@
 			item = menu.addItem(mxResources.get('atlas'), null, function()
 			{
 				mxSettings.setUi('atlas');
-				mxSettings.save();
 				editorUi.alert(mxResources.get('restartForChangeRequired'));
 			}, parent);
 			
@@ -2449,7 +2445,6 @@
 			item = menu.addItem(mxResources.get('dark'), null, function()
 			{
 				mxSettings.setUi('dark');
-				mxSettings.save();
 				editorUi.alert(mxResources.get('restartForChangeRequired'));
 			}, parent);
 			
@@ -2458,19 +2453,17 @@
 				menu.addCheckmark(item, Editor.checkmarkImage);
 			}
 			
-			if (urlParams['test'] == '1')
-			{			
-				item = menu.addItem(mxResources.get('sketch'), null, function()
-				{
-					mxSettings.setUi('sketch');
-					mxSettings.save();
-					editorUi.alert(mxResources.get('restartForChangeRequired'));
-				}, parent);
-				
-				if (theme == 'sketch')
-				{
-					menu.addCheckmark(item, Editor.checkmarkImage);
-				}
+			menu.addSeparator(parent);
+			
+			item = menu.addItem(mxResources.get('sketch'), null, function()
+			{
+				mxSettings.setUi('sketch');
+				editorUi.alert(mxResources.get('restartForChangeRequired'));
+			}, parent);
+			
+			if (theme == 'sketch')
+			{
+				menu.addCheckmark(item, Editor.checkmarkImage);
 			}
 		})));
 

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

@@ -31,7 +31,23 @@ var mxSettings =
 	},
 	setUi: function(ui)
 	{
-		mxSettings.settings.ui = ui;
+		// Writes to main configuration
+		var value = localStorage.getItem('.drawio-config');
+		
+		if (value == null)
+		{
+			value = mxSettings.getDefaults();
+		}
+		else
+		{
+			value = JSON.parse(value);
+		}
+		
+		value.ui = ui;
+		
+		delete value.isNew;
+		value.version = mxSettings.currentVersion;
+		localStorage.setItem('.drawio-config', JSON.stringify(value));
 	},
 	getShowStartScreen: function()
 	{
@@ -200,10 +216,9 @@ var mxSettings =
 	{
 		mxSettings.settings.isRulerOn = value;
 	},
-	init: function()
+	getDefaults: function()
 	{
-		mxSettings.settings = 
-		{
+		return {
 			language: '',
 			configVersion: Editor.configVersion,
 			customFonts: [],
@@ -228,6 +243,10 @@ var mxSettings =
 			isRulerOn: false
 		};
 	},
+	init: function()
+	{
+		mxSettings.settings = mxSettings.getDefaults();
+	},
 	save: function()
 	{
 		if (isLocalStorage && typeof(JSON) !== 'undefined')

src/main/webapp/js/diagramly/mxFreehand.js

@@ -17,6 +17,7 @@ function mxFreehand(graph)
 	var lastPart;
 	var closedPath = false; 
 	var autoClose = true;
+	var autoInsert = false;
 	var buffer = []; // Contains the last positions of the mouse cursor
 	var enabled = false;
 	var stopClickEnabled = true
@@ -31,6 +32,11 @@ function mxFreehand(graph)
 		autoClose = isAutoClose;
 	};
 
+	this.setAutoInsert = function(value)//TODO add auto closed settings
+	{
+		autoInsert = value;
+	};
+	
 	this.setStopClickEnabled = function(enabled)
 	{
 		stopClickEnabled = enabled;
@@ -79,11 +85,16 @@ function mxFreehand(graph)
 	        partPathes.push(path);
 	        path = null;
 	        
-			if (doStop)
+			if (doStop || autoInsert)
 			{
 				this.stopDrawing();
 			}
 			
+			if (autoInsert)
+			{
+				this.startDrawing();
+			}
+			
 	        mxEvent.consume(e);
 	    }
 	});
@@ -198,6 +209,10 @@ function mxFreehand(graph)
         setEnabled(false);
 	};
 	
+	// Used to retrieve default styles
+	var edge = new mxCell();
+	edge.edge = true;
+	
 	mxEvent.addGestureListeners(svgElement, function (e) 
 	{
 		if (!enabled)
@@ -205,12 +220,14 @@ function mxFreehand(graph)
 			return;
 		}
 		
+		var defaultStyle = graph.getCurrentCellStyle(edge);
 		var strokeWidth = parseFloat(graph.currentVertexStyle[mxConstants.STYLE_STROKEWIDTH] || 1);
 		strokeWidth = Math.max(1, strokeWidth * graph.view.scale);
 	    path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-	    path.setAttribute("fill", "none");
-	    path.setAttribute("stroke", graph.currentVertexStyle[mxConstants.STYLE_STROKECOLOR] || "#000");
-	    path.setAttribute("stroke-width", strokeWidth);
+	    path.setAttribute('fill', 'none');
+	    path.setAttribute('stroke', mxUtils.getValue(graph.currentVertexStyle, mxConstants.STYLE_STROKECOLOR,
+			mxUtils.getValue(defaultStyle, mxConstants.STYLE_STROKECOLOR, '#000')));
+	    path.setAttribute('stroke-width', strokeWidth);
 	    
 	    if (graph.currentVertexStyle[mxConstants.STYLE_DASHED] == '1')
 	    {
@@ -226,10 +243,10 @@ function mxFreehand(graph)
 	    buffer = [];
 	    var pt = getMousePosition(e);
 	    appendToBuffer(pt);
-	    strPath = "M" + pt.x + " " + pt.y;
+	    strPath = 'M' + pt.x + ' ' + pt.y;
 	    drawPoints.push(pt);
 	    lastPart = [];
-	    path.setAttribute("d", strPath);
+	    path.setAttribute('d', strPath);
 	    svgElement.appendChild(path);
 	    mxEvent.consume(e);
 	}, function (e) 
@@ -293,22 +310,22 @@ function mxFreehand(graph)
 	    if (pt) 
 	    {
 	        // Get the smoothed part of the path that will not change
-	        strPath += " L" + pt.x + " " + pt.y;
+	        strPath += ' L' + pt.x + ' ' + pt.y;
 	        drawPoints.push(pt);
 	        // Get the last part of the path (close to the current mouse position)
 	        // This part will change if the mouse moves again
-	        var tmpPath = "";
+	        var tmpPath = '';
 	        lastPart = [];
 	        
 	        for (var offset = 2; offset < buffer.length; offset += 2) 
 	        {
 	            pt = getAveragePoint(offset);
-	            tmpPath += " L" + pt.x + " " + pt.y;
+	            tmpPath += ' L' + pt.x + ' ' + pt.y;
 	            lastPart.push(pt);
 	        }
 
 	        // Set the complete current path coordinates
-	        path.setAttribute("d", strPath + tmpPath);
+	        path.setAttribute('d', strPath + tmpPath);
 	    }
 	};
 };

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

@@ -7,6 +7,11 @@ Format = function(editorUi, container)
 	this.container = container;
 };
 
+/**
+ * Background color for inactive tabs.
+ */
+Format.inactiveTabBackgroundColor = '#f1f3f4';
+
 /**
  * Returns information about the current selection.
  */
@@ -27,11 +32,6 @@ Format.prototype.currentIndex = 0;
  */
 Format.prototype.showCloseButton = true;
 
-/**
- * Background color for inactive tabs.
- */
-Format.prototype.inactiveTabBackgroundColor = '#f1f3f4';
-
 /**
  * Background color for inactive tabs.
  */
@@ -426,7 +426,7 @@ Format.prototype.immediateRefresh = function()
 				
 				if (currentLabel != null)
 				{
-					currentLabel.style.backgroundColor = this.inactiveTabBackgroundColor;
+					currentLabel.style.backgroundColor = Format.inactiveTabBackgroundColor;
 					currentLabel.style.borderBottomWidth = '1px';
 				}
 
@@ -481,12 +481,12 @@ Format.prototype.immediateRefresh = function()
 			diagramPanel.style.display = 'none';
 			label.style.width = (this.showCloseButton) ? '106px' : '50%';
 			label.style.cursor = 'pointer';
-			label.style.backgroundColor = this.inactiveTabBackgroundColor;
+			label.style.backgroundColor = Format.inactiveTabBackgroundColor;
 			
 			var label2 = label.cloneNode(false);
 			label2.style.borderLeftWidth = '1px';
 			label2.style.borderRightWidth = '1px';
-			label2.style.backgroundColor = this.inactiveTabBackgroundColor;
+			label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
 			
 			addClickHandler(label, diagramPanel, idx++);
 			
@@ -509,7 +509,7 @@ Format.prototype.immediateRefresh = function()
 			label2.style.borderLeftWidth = '1px';
 			label2.style.borderRightWidth = '1px';
 			label2.style.borderBottomWidth = '1px';
-			label2.style.backgroundColor = this.inactiveTabBackgroundColor;
+			label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
 			label2.style.position = 'absolute';
 			label2.style.right = '0px';
 			label2.style.top = '0px';
@@ -547,7 +547,7 @@ Format.prototype.immediateRefresh = function()
 	}
 	else
 	{
-		label.style.backgroundColor = this.inactiveTabBackgroundColor;
+		label.style.backgroundColor = Format.inactiveTabBackgroundColor;
 		label.style.borderLeftWidth = '1px';
 		label.style.cursor = 'pointer';
 		label.style.width = (containsLabel) ? '50%' : '33.3%';
@@ -555,8 +555,8 @@ Format.prototype.immediateRefresh = function()
 		var label3 = label2.cloneNode(false);
 
 		// Workaround for ignored background in IE
-		label2.style.backgroundColor = this.inactiveTabBackgroundColor;
-		label3.style.backgroundColor = this.inactiveTabBackgroundColor;
+		label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
+		label3.style.backgroundColor = Format.inactiveTabBackgroundColor;
 		
 		// Style
 		if (containsLabel)
@@ -3390,15 +3390,16 @@ TextFormatPanel.prototype.addFont = function(container)
 	extraPanel.style.paddingTop = '2px';
 	extraPanel.style.paddingBottom = '4px';
 	
-	// LATER: Fix toggle using '' instead of 'null'
 	var wwCells = graph.filterSelectionCells(mxUtils.bind(this, function(cell)
 	{
 		var state = graph.view.getState(cell);
-	
+		
 		return state == null ||
 			this.format.isAutoSizeState(state) ||
 			graph.getModel().isEdge(cell) ||
-			!graph.isCellResizable(cell);
+			(!graph.isTableRow(cell) &&
+			!graph.isTableCell(cell) &&
+			!graph.isCellResizable(cell));
 	}));
 	
 	var wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE,

src/main/webapp/js/grapheditor/Sidebar.js

@@ -1085,7 +1085,7 @@ Sidebar.prototype.addGeneralPalette = function(expand)
 			
 		    return this.createEdgeTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Curve');
 	 	})),
-	 	this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;startArrow=classic;html=1;', 50, 50, '', 'Bidirectional Arrow', null, lineTags + 'bidirectional'),
+	 	this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;startArrow=classic;html=1;', 100, 100, '', 'Bidirectional Arrow', null, lineTags + 'bidirectional'),
 	 	this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;html=1;', 50, 50, '', 'Arrow', null, lineTags + 'directional directed'),
 	 	this.createEdgeTemplateEntry('endArrow=none;dashed=1;html=1;', 50, 50, '', 'Dashed Line', null, lineTags + 'dashed undirected no'),
 	 	this.createEdgeTemplateEntry('endArrow=none;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;', 50, 50, '', 'Dotted Line', null, lineTags + 'dotted undirected no'),