10.0.4 release

ChangeLog

@@ -1,3 +1,7 @@
+19-DEC-2018: 10.0.4
+
+- Fixes for night mode and responsive UI
+
 18-DEC-2018: 10.0.3
 
 - Disables sync in Chrome OS

VERSION

@@ -1 +1 @@
-10.0.3
+10.0.4

etc/build/cache.txt

@@ -27,6 +27,7 @@ images/delete.png
 images/droptarget.png
 images/help.png
 images/download.png
+images/drawlogo.svg
 images/drawlogo-gray.svg
 images/drawlogo-text-bottom.svg
 images/logo-flat.png

src/main/webapp/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 12/18/2018 02:06 PM
+# 12/19/2018 11:31 AM
 
 app.html
 index.html?offline=1
@@ -32,6 +32,7 @@ images/delete.png
 images/droptarget.png
 images/help.png
 images/download.png
+images/drawlogo.svg
 images/drawlogo-gray.svg
 images/drawlogo-text-bottom.svg
 images/logo-flat.png

src/main/webapp/images/drawlogo-gray.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
 <style type="text/css">
@@ -7,7 +6,6 @@
 	.st1{fill:#8e8e8e;}
 	.st2{fill:#FFFFFF;}
 </style>
-<title>Zeichenfläche 1</title>
 <path class="st0" d="M237.5,227.9c0,5.3-4.3,9.6-9.5,9.6c0,0,0,0,0,0H22.1c-5.3,0-9.6-4.3-9.6-9.5c0,0,0,0,0,0V22.1
 	c0-5.3,4.3-9.6,9.5-9.6c0,0,0,0,0,0h205.9c5.3,0,9.6,4.3,9.6,9.5c0,0,0,0,0,0V227.9z"/>
 <path class="st1" d="M237.5,227.9c0,5.3-4.3,9.6-9.5,9.6c0,0,0,0,0,0H89.6L44.8,192l27.9-45.5l82.7-102.7l82.1,84.5V227.9z"/>

src/main/webapp/images/drawlogo.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1F1F1F;}
+	.st1{fill:#000000;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M237.5,227.9c0,5.3-4.3,9.6-9.5,9.6c0,0,0,0,0,0H22.1c-5.3,0-9.6-4.3-9.6-9.5c0,0,0,0,0,0V22.1
+	c0-5.3,4.3-9.6,9.5-9.6c0,0,0,0,0,0h205.9c5.3,0,9.6,4.3,9.6,9.5c0,0,0,0,0,0V227.9z"/>
+<path class="st1" d="M237.5,227.9c0,5.3-4.3,9.6-9.5,9.6c0,0,0,0,0,0H89.6L44.8,192l27.9-45.5l82.7-102.7l82.1,84.5V227.9z"/>
+<path class="st2" d="M197.1,138.3h-23.7l-25-42.7c5.7-1.2,9.8-6.2,9.7-12V51.5c0-6.8-5.4-12.3-12.2-12.3c0,0-0.1,0-0.1,0h-41.7
+	c-6.8,0-12.3,5.4-12.3,12.2c0,0,0,0.1,0,0.1v32.1c0,5.8,4,10.8,9.7,12l-25,42.7H52.9c-6.8,0-12.3,5.4-12.3,12.2c0,0,0,0.1,0,0.1
+	v32.1c0,6.8,5.4,12.3,12.2,12.3c0,0,0.1,0,0.1,0h41.7c6.8,0,12.3-5.4,12.3-12.2c0,0,0-0.1,0-0.1v-32.1c0-6.8-5.4-12.3-12.2-12.3
+	c0,0-0.1,0-0.1,0h-4l24.8-42.4h19.3l24.9,42.4h-4.1c-6.8,0-12.3,5.4-12.3,12.2c0,0,0,0.1,0,0.1v32.1c0,6.8,5.4,12.3,12.2,12.3
+	c0,0,0.1,0,0.1,0h41.7c6.8,0,12.3-5.4,12.3-12.2c0,0,0-0.1,0-0.1v-32.1c0-6.8-5.4-12.3-12.2-12.3
+	C197.2,138.3,197.2,138.3,197.1,138.3z"/>
+</svg>

src/main/webapp/js/diagramly/DrawioFile.js

@@ -120,6 +120,7 @@ DrawioFile.prototype.reportEnabled = true;
  * Specifies if notify events should be ignored.
  */
 DrawioFile.prototype.stats = {
+	joined: 0, /* number of join messages received */
 	reloads: 0, /* number of times the files was reloaded */
 	checksumErrors: 0, /* number of checksum errors in mergeFile */
 	mergeChecksumErrors: 0, /* number of checksum errors in merge */
@@ -130,8 +131,7 @@ DrawioFile.prototype.stats = {
 	cacheHits: 0, /* number of times the cache returned patches */
 	cacheMiss: 0, /* number of times we have given up to read the cache */
 	conflicts: 0, /* number of write conflicts when saving a file */
-	timeouts: 0, /* number of time we have given up to retry after a write conflict */
-	joined: 0 /* number of join messages received */
+	timeouts: 0 /* number of time we have given up to retry after a write conflict */
 };
 
 /**
@@ -272,8 +272,7 @@ DrawioFile.prototype.mergeFile = function(file, success, error)
 			var uid = (user != null) ? this.ui.hashValue(user.id) : 'unknown';
 	
 			EditorUi.sendReport('Error in mergeFile ' + new Date().toISOString() + ':\n\n' +
-				'File=' + this.getId() + '\n' +
-				'Mode=' + this.getMode() + '\n' +
+				'File=' + this.getId() + ' (' + this.getMode() + ')\n' +
 				((this.sync != null) ? ('Client=' + this.sync.clientId + '\n') : '') +
 				'User=' + uid + '\n' +
 				'Size=' + this.getSize() + '\n' +
@@ -340,15 +339,14 @@ DrawioFile.prototype.checksumError = function(error, patches)
 		}
 	
 		EditorUi.sendReport('Checksum Error ' + new Date().toISOString() + ':\n\n' +
-			'File=' + this.getId() + '\n' +
-			'Mode=' + this.getMode() + '\n' +
+			'File=' + this.getId() + ' (' + this.getMode() + ')\n' +
 			((this.sync != null) ? ('Client=' + this.sync.clientId + '\n') : '') +
 			'User=' + uid + '\n' +
 			'Size=' + this.getSize() + '\n' +
 			'Sync=' + DrawioFile.SYNC + '\n\n' +
+			'Stats:\n' + JSON.stringify(this.stats, null, 2) + '\n' +
 			'Data:\n' + mxUtils.getPrettyXml(file) + '\n' +
-			'Patches:\n' + JSON.stringify(patches, null, 2) + '\n\n' +
-			'Stats:\n' + JSON.stringify(this.stats, null, 2));
+			'Patches:\n' + JSON.stringify(patches, null, 2));
 	}
 	catch (e)
 	{

src/main/webapp/js/diagramly/DrawioFileSync.js

@@ -393,7 +393,7 @@ DrawioFileSync.prototype.updateStatus = function()
 			var label = mxResources.get('lastChange', [str]);
 			
 			this.ui.editor.setStatus('<div style="display:inline-block;">' + mxUtils.htmlEntities(label)  + '</div>' +
-				((msg != null) ? ' (' + msg + ')' : '') +
+				((msg != null) ? ' <span style="opacity:0;">(' + msg + ')</span>' : '') +
 				(this.file.isEditable() ? '' : '<div class="geStatusAlert" style="margin-left:8px;display:inline-block;">' +
 					mxUtils.htmlEntities(mxResources.get('readOnly')) + '</div>') +
 				(this.isConnected() ? '' : '<div class="geStatusAlert geBlink" style="margin-left:8px;display:inline-block;">' +
@@ -419,6 +419,26 @@ DrawioFileSync.prototype.updateStatus = function()
 				}
 			}
 			
+			// Fades in/out last message
+			var spans = this.ui.statusContainer.getElementsByTagName('span');
+			
+			if (spans.length > 0)
+			{
+				var temp = spans[0];
+				mxUtils.setPrefixedStyle(temp.style, 'transition', 'all 0.2s ease');
+				
+				window.setTimeout(mxUtils.bind(this, function()
+				{
+					mxUtils.setOpacity(temp, 100);
+					mxUtils.setPrefixedStyle(temp.style, 'transition', 'all 1s ease');
+					
+					window.setTimeout(mxUtils.bind(this, function()
+					{
+						mxUtils.setOpacity(temp, 0);
+					}), this.updateStatusInterval / 2);
+				}), 0);
+			}
+			
 			this.resetUpdateStatusThread();
 		}
 		else
@@ -551,6 +571,7 @@ DrawioFileSync.prototype.handleMessageData = function(data)
 		{
 			this.lastMessage = mxResources.get((data.a == 'join') ?
 				'userJoined' : 'userLeft', [data.name]);
+			this.resetUpdateStatusThread();
 			this.updateStatus();
 		}
 	}
@@ -878,8 +899,7 @@ DrawioFileSync.prototype.merge = function(patches, checksum, etag, success, erro
 			var uid = (user != null) ? this.ui.hashValue(user.id) : 'unknown';
 	
 			EditorUi.sendReport('Error in merge ' + new Date().toISOString() + ':\n\n' +
-				'File=' + this.file.getId() + '\n' +
-				'Mode=' + this.file.getMode() + '\n' +
+				'File=' + this.file.getId() + ' (' + this.file.getMode() + ')\n' +
 				'Client=' + this.clientId + '\n' +
 				'User=' + uid + '\n' +
 				'Size=' + this.file.getSize() + '\n' +

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

@@ -975,8 +975,24 @@
 	 */
 	EditorUi.prototype.anonymizePatch = function(patch)
 	{
-		delete patch[EditorUi.DIFF_INSERT];
-		delete patch[EditorUi.DIFF_REMOVE];
+		if (patch[EditorUi.DIFF_INSERT] != null)
+		{
+			for (var i = 0; i < patch[EditorUi.DIFF_INSERT].length; i++)
+			{
+				try
+				{
+					var data = patch[EditorUi.DIFF_INSERT][i].data;
+					var doc = mxUtils.parseXml(data);
+					var clone = doc.documentElement.cloneNode(false);
+					clone.removeAttribute('name');
+					patch[EditorUi.DIFF_INSERT][i].data = mxUtils.getXml(clone);
+				}
+				catch (e)
+				{
+					patch[EditorUi.DIFF_INSERT][i].data = e.message;
+				}
+			}
+		}
 		
 		if (patch[EditorUi.DIFF_UPDATE] != null)
 		{

src/main/webapp/js/mxgraph/Editor.js

@@ -725,7 +725,7 @@ OpenFile.prototype.cancel = function(cancel)
 /**
  * Basic dialogs that are available in the viewer (print dialog).
  */
-function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transparent)
+function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transparent, onResize)
 {
 	var dx = 0;
 	
@@ -838,6 +838,17 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa
 	
 	this.resizeListener = mxUtils.bind(this, function()
 	{
+		if (onResize != null)
+		{
+			var newWH = onResize();
+			
+			if (newWH != null)
+			{
+				w0 = w = newWH.w;
+				h0 = h = newWH.h;
+			}
+		}
+		
 		dh = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 		this.bg.style.height = dh + 'px';
 		
@@ -927,11 +938,15 @@ Dialog.prototype.getPosition = function(left, top)
 /**
  * Removes the dialog from the DOM.
  */
-Dialog.prototype.close = function(cancel)
+Dialog.prototype.close = function(cancel, isEsc)
 {
 	if (this.onDialogClose != null)
 	{
-		this.onDialogClose(cancel);
+		if (this.onDialogClose(cancel, isEsc) == false)
+		{
+			return false;
+		}
+		
 		this.onDialogClose = null;
 	}
 	

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

@@ -188,7 +188,7 @@ EditorUi = function(editor, container, lightbox)
 		}
 		else if (!mxEvent.isConsumed(evt) && evt.keyCode == 27 /* Escape */)
 		{
-			this.hideDialog();
+			this.hideDialog(null, true);
 		}
 	});
    	
@@ -3291,7 +3291,7 @@ EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange)
 /**
  * Displays a print dialog.
  */
-EditorUi.prototype.showDialog = function(elt, w, h, modal, closable, onClose, noScroll, trasparent)
+EditorUi.prototype.showDialog = function(elt, w, h, modal, closable, onClose, noScroll, trasparent, onResize)
 {
 	this.editor.graph.tooltipHandler.hideTooltip();
 	
@@ -3300,19 +3300,25 @@ EditorUi.prototype.showDialog = function(elt, w, h, modal, closable, onClose, no
 		this.dialogs = [];
 	}
 	
-	this.dialog = new Dialog(this, elt, w, h, modal, closable, onClose, noScroll, trasparent);
+	this.dialog = new Dialog(this, elt, w, h, modal, closable, onClose, noScroll, trasparent, onResize);
 	this.dialogs.push(this.dialog);
 };
 
 /**
  * Displays a print dialog.
  */
-EditorUi.prototype.hideDialog = function(cancel)
+EditorUi.prototype.hideDialog = function(cancel, isEsc)
 {
 	if (this.dialogs != null && this.dialogs.length > 0)
 	{
 		var dlg = this.dialogs.pop();
-		dlg.close(cancel);
+		
+		if (dlg.close(cancel, isEsc) == false) 
+		{
+			//add the dialog back if dialog closing is cancelled
+			this.dialogs.push(dlg);
+			return;
+		}
 		
 		this.dialog = (this.dialogs.length > 0) ? this.dialogs[this.dialogs.length - 1] : null;
 

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

@@ -957,8 +957,8 @@ 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;fillColor=#ffffff;', 50, 50, '', 'Bidirectional Arrow', null, lineTags + 'bidirectional'),
-	 	this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;html=1;fillColor=#ffffff;', 50, 50, '', 'Arrow', null, lineTags + 'directional directed'),
+	 	this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;startArrow=classic;html=1;', 50, 50, '', 'Bidirectional Arrow', null, lineTags + 'bidirectional'),
+	 	this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;html=1;', 50, 50, '', 'Arrow', null, lineTags + 'directional directed'),
 	 	this.createEdgeTemplateEntry('shape=link;html=1;', 50, 50, '', 'Link', null, lineTags + 'link'),
 	 	this.createEdgeTemplateEntry('endArrow=none;dashed=1;html=1;', 50, 50, '', 'Dashed Line', null, lineTags + 'dashed undirected no'),
 	 	this.createEdgeTemplateEntry('endArrow=none;html=1;', 50, 50, '', 'Line', null, lineTags + 'simple undirected plain blank no'),

src/main/webapp/styles/dark.css

@@ -1,6 +1,12 @@
-html body .geDiagramContainer, html body div.geMenubarContainer, html body div.mxPopupMenu,  html body td.mxPopupMenuIcon, html body .geFormatContainer {
+html body .geDiagramContainer, html body div.geMenubarContainer, html body div.mxPopupMenu, html body td.mxPopupMenuIcon, html body .geFormatContainer, html body div.geMenubarContainer .geStatus:hover {
 	background-color:#2a2a2a;
 }
+html body .geSidebarContainer {
+	border-top: 1px solid #505759;
+}
+html body .geMenubarContainer .geItem:active {
+	opacity: 0.7;
+}
 html body .geFooterContainer, html body #geFooterItem1, html body textarea, html body .mxWindowTitle, html body .geDialogTitle, html body .geDialogFooter {
 	background:#2a2a2a;
 	color:#cccccc;

src/main/webapp/styles/grapheditor.css

@@ -267,13 +267,13 @@
 	border:1px solid transparent;
 	cursor:pointer;
 	opacity:0.6;
-	filter:alpha(opacity=60);
+	_filter:alpha(opacity=60);
 }
 .geToolbarContainer .geButton:hover {
 	border:1px solid gray;
 	border-radius:2px;
 	opacity:1;
-	filter:none !important;
+	_filter:none !important;
 }
 .geToolbarContainer .geButton:active {
 	border:1px solid black;