10.0.34 release

Former-commit-id: 2efe1bb3463cbb8d4af0b30a7bd7904031ace35c

ChangeLog

@@ -1,3 +1,19 @@
+12-JAN-2019: 10.0.34
+
+- Fixes save dialog icon CSS flow
+
+12-JAN-2019: 10.0.33
+
+- Adds support for strikeThrough style (beta)
+- Adds dark opacity styles for note and cube
+- Enables device storage on iOS
+
+11-JAN-2019: 10.0.32
+
+- Adds page view in format panel for read-only files
+- Minor fixes for collaborative editing
+- Uses mxGraph 3.9.13 beta 8
+
 11-JAN-2019: 10.0.31
 
 - Fixes critical bug for cell lookups

VERSION

@@ -1 +1 @@
-10.0.31
+10.0.34

etc/build/cache.txt

@@ -1,5 +1,6 @@
 app.html
 index.html?offline=1
+index.html?offline=1&ui=min
 index.html?offline=1&https=0
 offline.html
 open.html

src/main/webapp/cache.manifest

@@ -1,10 +1,11 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 01/10/2019 11:39 PM
+# 01/12/2019 08:41 PM
 
 app.html
 index.html?offline=1
+index.html?offline=1&ui=min
 index.html?offline=1&https=0
 offline.html
 open.html

src/main/webapp/index.html

@@ -26,7 +26,6 @@
 		 *
 		 * - dev=1: For developers only
 		 * - test=1: For developers only
-		 * - drawdev=1: For developers only
 		 * - export=URL for export: For developers only
 		 * - ignoremime=1: For developers only (see DriveClient.js). Use Cmd-S to override mime.
 		 * - createindex=1: For developers only (see etc/build/README)
@@ -318,12 +317,7 @@
 			var mxBasePath = mxDevUrl + '/javascript/src';
 			
 			// Used to request draw.io sources in dev mode
-			var drawDevUrl = '';
-
-			if (urlParams['drawdev'] == '1')
-			{
-				drawDevUrl = document.location.protocol + '//drawhost.jgraph.com/';
-			}
+			var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/';
 			
 			mxscript(drawDevUrl + 'js/diagramly/Init.js');
 			mxscript(geBasePath + '/Init.js');

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

@@ -474,14 +474,6 @@ App.main = function(callback, createUi)
 
 			if (temp != null)
 			{
-				// Used to request draw.io sources in dev mode
-				var drawDevUrl = '';
-
-				if (urlParams['drawdev'] == '1')
-				{
-					drawDevUrl = document.location.protocol + '//drawhost.jgraph.com/';
-				}
-				
 				// Mapping from key to URL in App.plugins
 				var t = temp.split(';');
 				

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

@@ -285,7 +285,7 @@ var StorageDialog = function(editorUi, fn, rowLimit)
 		addLogo(IMAGE_PATH + '/onedrive-logo.svg', mxResources.get('oneDrive'), App.MODE_ONEDRIVE, 'oneDrive');
 	}
 
-	if (!mxClient.IS_IOS || urlParams['storage'] == 'device')
+	if (/*!mxClient.IS_IOS || */urlParams['storage'] == 'device')
 	{
 		addLogo(IMAGE_PATH + '/osa_drive-harddisk.png', mxResources.get('device'), App.MODE_DEVICE);
 	}
@@ -3673,7 +3673,7 @@ var CreateDialog = function(editorUi, title, createFn, cancelFn, dlgTitle, btnLa
 	}
 	
 	if (!Editor.useLocalStorage || urlParams['storage'] == 'device' ||
-		(editorUi.getCurrentFile() != null && !mxClient.IS_IOS))
+		(editorUi.getCurrentFile() != null/* && !mxClient.IS_IOS*/))
 	{
 		var deviceOption = document.createElement('option');
 		deviceOption.setAttribute('value', App.MODE_DEVICE);
@@ -3830,7 +3830,7 @@ var CreateDialog = function(editorUi, title, createFn, cancelFn, dlgTitle, btnLa
 		btns.appendChild(openBtn);
 	}
 	
-	if (!mxClient.IS_IOS || !showButtons)
+	if (/*!mxClient.IS_IOS || */!showButtons)
 	{
 		var createBtn = mxUtils.button(btnLabel || mxResources.get('create'), function()
 		{
@@ -4836,7 +4836,7 @@ var AboutDialog = function(editorUi)
 
 	var small = document.createElement('small');
 	small.style.color = clr;
-	small.innerHTML = '&copy; 2005-2018 <a href="https://about.draw.io/" style="color:inherit;" target="_blank">JGraph Ltd</a>.<br>All Rights Reserved.';
+	small.innerHTML = '&copy; 2005-2019 <a href="https://about.draw.io/" style="color:inherit;" target="_blank">JGraph Ltd</a>.<br>All Rights Reserved.';
 	div.appendChild(small);
 	
 	mxEvent.addListener(div, 'click', function(e)

src/main/webapp/js/diagramly/DiffSync.js

@@ -428,78 +428,81 @@ EditorUi.prototype.patchPage = function(page, diff, resolver, updateEdgeParents)
  */
 EditorUi.prototype.patchCellRecursive = function(page, model, cell, parentLookup, diff)
 {
-	var temp = parentLookup[cell.getId()];
-	var inserted = (temp != null && temp.inserted != null) ? temp.inserted : {};
-	var moved = (temp != null && temp.moved != null) ? temp.moved : {};
-	var index = 0;
-	
-	// Restores existing order
-	var childCount = model.getChildCount(cell);
-	var prev = '';
-	
-	for (var i = 0; i < childCount; i++)
+	if (cell != null)
 	{
-		var cellId = model.getChildAt(cell, i).getId();
+		var temp = parentLookup[cell.getId()];
+		var inserted = (temp != null && temp.inserted != null) ? temp.inserted : {};
+		var moved = (temp != null && temp.moved != null) ? temp.moved : {};
+		var index = 0;
 		
-		if (moved[prev] == null &&
-			(diff[EditorUi.DIFF_UPDATE] == null ||
-			diff[EditorUi.DIFF_UPDATE][cellId] == null ||
-			(diff[EditorUi.DIFF_UPDATE][cellId].previous == null &&
-			diff[EditorUi.DIFF_UPDATE][cellId].parent == null)))
-		{
-			moved[prev] = cellId;
-		}
-		
-		prev = cellId;
-	}
-
-	var addCell = mxUtils.bind(this, function(child)
-	{
-		var id = (child != null) ? child.getId() : '';
+		// Restores existing order
+		var childCount = model.getChildCount(cell);
+		var prev = '';
 		
-		if (child != null)
+		for (var i = 0; i < childCount; i++)
 		{
-			if (model.getChildAt(cell, index) != child)
+			var cellId = model.getChildAt(cell, i).getId();
+			
+			if (moved[prev] == null &&
+				(diff[EditorUi.DIFF_UPDATE] == null ||
+				diff[EditorUi.DIFF_UPDATE][cellId] == null ||
+				(diff[EditorUi.DIFF_UPDATE][cellId].previous == null &&
+				diff[EditorUi.DIFF_UPDATE][cellId].parent == null)))
 			{
-				model.add(cell, child, index);
+				moved[prev] = cellId;
 			}
-
-			this.patchCellRecursive(page, model,
-				child, parentLookup, diff);
-			index++;
+			
+			prev = cellId;
 		}
-
-		var mov = moved[id];
+	
+		var addCell = mxUtils.bind(this, function(child)
+		{
+			var id = (child != null) ? child.getId() : '';
+			
+			if (child != null)
+			{
+				if (model.getChildAt(cell, index) != child)
+				{
+					model.add(cell, child, index);
+				}
+	
+				this.patchCellRecursive(page, model,
+					child, parentLookup, diff);
+				index++;
+			}
+	
+			var mov = moved[id];
+			
+			if (mov != null)
+			{
+				delete moved[id];
+				addCell(model.getCell(mov));
+			}
+			
+			var ins = inserted[id];
+			
+			if (ins != null)
+			{
+				delete inserted[id];
+				addCell(this.getCellForJson(ins));
+			}
+		});
 		
-		if (mov != null)
+		addCell();
+	
+		// Handles orphaned moved pages
+		for (var id in moved)
 		{
+			addCell(model.getCell(moved[id]));
 			delete moved[id];
-			addCell(model.getCell(mov));
 		}
-		
-		var ins = inserted[id];
-		
-		if (ins != null)
+	
+		// Handles orphaned inserted pages
+		for (var id in inserted)
 		{
+			addCell(this.getCellForJson(inserted[id]));
 			delete inserted[id];
-			addCell(this.getCellForJson(ins));
 		}
-	});
-	
-	addCell();
-
-	// Handles orphaned moved pages
-	for (var id in moved)
-	{
-		addCell(model.getCell(moved[id]));
-		delete moved[id];
-	}
-
-	// Handles orphaned inserted pages
-	for (var id in inserted)
-	{
-		addCell(this.getCellForJson(inserted[id]));
-		delete inserted[id];
 	}
 };
 
@@ -514,7 +517,7 @@ EditorUi.prototype.patchCell = function(model, cell, diff, resolve)
 		if (resolve == null || (resolve.xmlValue == null &&
 			(resolve.value == null || resolve.value == '')))
 		{
-			if (diff.value != null)
+			if ('value' in diff)
 			{
 				model.setValue(cell, diff.value);
 			}
@@ -1030,7 +1033,7 @@ EditorUi.prototype.diffCell = function(oldCell, newCell)
 		}
 		else
 		{
-			diff.value = (newCell.value != null) ? newCell.value : '';
+			diff.value = (newCell.value != null) ? newCell.value : null;
 		}
 	}
 	

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

@@ -171,7 +171,7 @@ DrawioFile.prototype.synchronizeFile = function(success, error)
 /**
 * Adds the listener for automatically saving the diagram for local changes.
 */
-DrawioFile.prototype.updateFile = function(success, error, abort)
+DrawioFile.prototype.updateFile = function(success, error, abort, shadow)
 {
 	this.getLatestVersion(mxUtils.bind(this, function(latestFile)
 	{
@@ -181,7 +181,7 @@ DrawioFile.prototype.updateFile = function(success, error, abort)
 			{
 				if (latestFile != null)
 				{
-					this.mergeFile(latestFile, success, error);
+					this.mergeFile(latestFile, success, error, shadow);
 				}
 				else
 				{
@@ -202,7 +202,7 @@ DrawioFile.prototype.updateFile = function(success, error, abort)
 /**
  * Adds the listener for automatically saving the diagram for local changes.
  */
-DrawioFile.prototype.mergeFile = function(file, success, error)
+DrawioFile.prototype.mergeFile = function(file, success, error, diffShadow)
 {
 	try
 	{
@@ -223,7 +223,8 @@ DrawioFile.prototype.mergeFile = function(file, success, error)
 			this.ui.pages) : null;
 		
 		// Patches the current document
-		var patches = [this.ui.diffPages(shadow, this.shadowPages)];
+		var patches = [this.ui.diffPages((diffShadow != null) ?
+			diffShadow : shadow, this.shadowPages)];
 
 		if (!this.ignorePatches(patches))
 		{
@@ -311,8 +312,13 @@ DrawioFile.prototype.getAnonymizedXmlForPages = function(pages)
 	{
 		for (var i = 0; i < pages.length; i++)
 		{
-			var temp = this.ui.anonymizeNode(enc.encode(
-				new mxGraphModel(pages[i].root)));
+			var temp = enc.encode(new mxGraphModel(pages[i].root));
+			
+			if (urlParams['dev'] != '1')
+			{
+				temp = this.ui.anonymizeNode(temp);
+			}
+			
 			temp.setAttribute('id', pages[i].getId());
 			
 			if (pages[i].viewState)
@@ -419,9 +425,6 @@ DrawioFile.prototype.checksumError = function(error, patches, details, etag)
 		
 		var fn = mxUtils.bind(this, function(file)
 		{
-			var data = this.compressReportData(
-				this.getAnonymizedXmlForPages(
-				this.shadowPages), 25000);
 			var json = this.compressReportData(
 				JSON.stringify(patches, null, 2));
 			var remote = (file != null) ? this.compressReportData(
@@ -433,8 +436,7 @@ DrawioFile.prototype.checksumError = function(error, patches, details, etag)
 				'Checksum Error',
 				((details != null) ? (details) : '') +
 				'\n\nPatches:\n' + json +
-				'\n\nLocal:\n' + data +
-				((remote != null) ? ('\nRemote:\n' + remote) : ''),
+				((remote != null) ? ('\n\nRemote:\n' + remote) : ''),
 				err, 70000);
 		});
 
@@ -470,6 +472,9 @@ DrawioFile.prototype.sendErrorReport = function(title, details, error, max)
 {
 	try
 	{
+		var data = this.compressReportData(
+			this.getAnonymizedXmlForPages(
+			this.shadowPages), 25000);
 		var user = this.getCurrentUser();
 		var uid = (user != null) ? this.ui.hashValue(user.id) : 'unknown';
 		var cid = (this.sync != null) ? this.sync.clientId : 'no sync';
@@ -501,6 +506,7 @@ DrawioFile.prototype.sendErrorReport = function(title, details, error, max)
 			'\nSync=' + DrawioFile.SYNC +
 			'\n\nStats:\n' + JSON.stringify(this.stats, null, 2) +
 			((details != null) ? ('\n\n' + details) : '') +
+			'\n\nLocal:\n' + data +
 			'\n\nStack:\n' + stack, max);
 	}
 	catch (e)

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

@@ -68,7 +68,7 @@ DrawioFileSync = function(file)
  * be incremented if new messages are added or the format is changed.
  * This must be numeric to compare older vs newer protocol versions.
  */
-DrawioFileSync.PROTOCOL = 4;
+DrawioFileSync.PROTOCOL = 5;
 
 //Extends mxEventSource
 mxUtils.extend(DrawioFileSync, mxEventSource);
@@ -784,7 +784,7 @@ DrawioFileSync.prototype.catchup = function(etag, secret, success, error, abort)
 							if (temp.length > 0)
 							{
 								this.file.stats.cacheHits++;
-								this.merge(temp, checksum, etag, success, error, details);
+								this.merge(temp, checksum, etag, success, error, abort, details);
 							}
 							// Retries if cache entry was not yet there
 							else if (cacheReadyRetryCount <= this.maxCacheReadyRetries &&
@@ -819,7 +819,7 @@ DrawioFileSync.prototype.catchup = function(etag, secret, success, error, abort)
 /**
  * Adds the listener for automatically saving the diagram for local changes.
  */
-DrawioFileSync.prototype.reload = function(success, error, abort)
+DrawioFileSync.prototype.reload = function(success, error, abort, shadow)
 {
 	this.file.updateFile(mxUtils.bind(this, function()
 	{
@@ -837,13 +837,13 @@ DrawioFileSync.prototype.reload = function(success, error, abort)
 		{
 			error(err);
 		}
-	}), abort);
+	}), abort, shadow);
 };
 
 /**
  * Adds the listener for automatically saving the diagram for local changes.
  */
-DrawioFileSync.prototype.merge = function(patches, checksum, etag, success, error, details)
+DrawioFileSync.prototype.merge = function(patches, checksum, etag, success, error, abort, details)
 {
 	try
 	{
@@ -890,14 +890,19 @@ DrawioFileSync.prototype.merge = function(patches, checksum, etag, success, erro
 				var to = this.ui.hashValue(etag);
 				
 				this.file.checksumError(error, patches,
-					'Checksum: ' + checksum +
-					'\nFrom: ' + from +
+					'From: ' + from +
 					'\nTo: ' + to +
 					((details != null && details.length > 0) ? ('\nDetails: ' +
 						details.join(', ')) : '') +
+					'\nChecksum: ' + checksum +
 					'\nCurrent: ' + current +
 					((currentDetails != null) ? ('\nCurrent Details: ' +
 						JSON.stringify(currentDetails)) : ''), etag);
+
+				// Uses current state as shadow to compute diff since
+				// shadowPages has been modified in-place above
+				// LATER: Check if fallback to reload is possible
+//				this.reload(success, error, abort, this.ui.pages);
 				
 				// Abnormal termination
 				return;
@@ -934,7 +939,9 @@ DrawioFileSync.prototype.merge = function(patches, checksum, etag, success, erro
 		
 		try
 		{
-			this.file.sendErrorReport('Error in merge', null, e);
+			this.file.sendErrorReport('Error in merge',
+				'Patches:\n' + this.file.compressReportData(
+					JSON.stringify(patches, null, 2)), e);
 		}
 		catch (e2)
 		{

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

@@ -1073,9 +1073,22 @@ DriveClient.prototype.saveFile = function(file, revision, success, error, noChec
 										executeSave(true);
 										
 										// Logs overwrite
-										EditorUi.logError('Warning: Stale Etag Overwrite',
-											null, file.desc.id + '.' + file.desc.headRevisionId,
-											(this.user != null) ? this.user.id : 'unknown');
+										try
+										{
+											EditorUi.sendReport('Warning: Stale Etag Overwrite ' +
+												new Date().toISOString() + ':' +
+												'\n\nBrowser=' + navigator.userAgent +
+												'\nFile=' + this.ui.hashValue(file.getId()) +
+												'\nUser=' + ((this.user != null) ?
+												this.ui.hashValue(this.user.id) : 'unknown'));
+											EditorUi.logError('Warning: Stale Etag Overwrite',
+												null, file.desc.id + '.' + file.desc.headRevisionId,
+												(this.user != null) ? this.user.id : 'unknown');
+										}
+										catch (e)
+										{
+											// ignore
+										}
 									}
 								}
 								else if (error != null)
@@ -1568,7 +1581,7 @@ DriveClient.prototype.pickFolder = function(fn)
 	}), mxUtils.bind(this, function()
 	{
 		showPicker();
-	}), mxResources.get('yes'), mxResources.get('noPickFolder') + '...');
+	}), mxResources.get('yes'), mxResources.get('noPickFolder') + '...', true);
 };
 
 /**

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

@@ -1416,7 +1416,9 @@
 		];
 		
 		mxCellRenderer.defaultShapes['cube'].prototype.customProperties = [
-	        {name: 'size', dispName: 'Size', type: 'float', min:0, defVal:20 }
+	        {name: 'size', dispName: 'Size', type: 'float', min:0, defVal:20 },
+	        {name: 'darkOpacity', dispName: 'Dark Opacity', type: 'float', min:-1, max:1, defVal:0 },
+	        {name: 'darkOpacity2', dispName: 'Dark Opacity 2', type: 'float', min:-1, max:1, defVal:0 }
 		];
 		
 		mxCellRenderer.defaultShapes['step'].prototype.customProperties = [
@@ -1434,7 +1436,8 @@
 		];
 		
 		mxCellRenderer.defaultShapes['note'].prototype.customProperties = [
-	        {name: 'size', dispName: 'Fold Size', type: 'float', min:0, defVal: 30}
+	        {name: 'size', dispName: 'Fold Size', type: 'float', min:0, defVal: 30},
+	        {name: 'darkOpacity', dispName: 'Dark Opacity', type: 'float', min:-1, max:1, defVal:0 },
 	    ];
 		
 		mxCellRenderer.defaultShapes['card'].prototype.customProperties = [

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

@@ -2164,6 +2164,12 @@
 		{
 			try
 			{
+				// Workaround for delayed scroll repaint with min UI in Safari
+				if (mxClient.IS_SF && uiTheme == 'min')
+				{
+					this.diagramContainer.style.visibility = '';
+				}
+				
 				// Order is significant, current file needed for correct
 				// file format for initial save after starting realtime
 				this.setCurrentFile(file);
@@ -2383,7 +2389,6 @@
 			details.attrCount = 0;
 			details.eltCount = 0;
 			details.nodeCount = 0;
-			details.cellCount = 0;
 		}
 		
 		for (var i = 0; i < pages.length; i++)
@@ -2409,7 +2414,6 @@
 			{
 				details.eltCount += diagram.getElementsByTagName('*').length;
 				details.nodeCount += diagram.getElementsByTagName('mxCell').length;
-				details.cellCount += model.getDescendants(model.root).length;
 			}
 			
 			hash = ((hash << 5) - hash + this.hashValue(diagram, function(obj, key, value, isXml)
@@ -3662,7 +3666,7 @@
 	 * @param {number} dx X-coordinate of the translation.
 	 * @param {number} dy Y-coordinate of the translation.
 	 */
-	EditorUi.prototype.confirm = function(msg, okFn, cancelFn, okLabel, cancelLabel)
+	EditorUi.prototype.confirm = function(msg, okFn, cancelFn, okLabel, cancelLabel, closable)
 	{
 		var resume = (this.spinner != null && this.spinner.pause != null) ? this.spinner.pause() : function() {};
 		
@@ -3683,7 +3687,7 @@
 				cancelFn();
 			}
 		}, okLabel, cancelLabel);
-		this.showDialog(dlg.container, 340, 90, true, false);
+		this.showDialog(dlg.container, 340, 90, true, closable);
 		dlg.init();
 	};
 
@@ -3825,10 +3829,10 @@
 				win.close();
 			}
 		}
-		else if (mxClient.IS_IOS)
-		{
-			this.showTextDialog(filename + ':', data);
-		}
+//		else if (mxClient.IS_IOS)
+//		{
+//			this.showTextDialog(filename + ':', data);
+//		}
 		else
 		{
 			var a = document.createElement('a');
@@ -4007,7 +4011,7 @@
 			this.hideDialog();
 		}), mxResources.get('saveAs'), mxResources.get('download'), false, allowBrowser, allowTab,
 			null, count > 1, (count > 4 && (!allowBrowser || count < 6)) ? 3 : 4, data, mimeType, base64Encoded);
-		var noServices = (mxClient.IS_IOS) ? 0 : 1;
+		var noServices = 1; //(mxClient.IS_IOS) ? 0 : 1;
 		var height = (count == noServices) ? 160 : ((count > 4) ? 390 : 270);
 		this.showDialog(dlg.container, 420, height, true, true);
 		dlg.init();
@@ -4277,7 +4281,7 @@
 			this.hideDialog();
 		}), mxResources.get('saveAs'), mxResources.get('download'), false, false, allowTab,
 			null, count > 1, (count > 4) ? 3 : 4, data, mimeType, base64Encoded);
-		var noServices = (mxClient.IS_IOS) ? 0 : 1;
+		var noServices = 1; //(mxClient.IS_IOS) ? 0 : 1;
 		var height = (count == noServices) ? 160 : ((count > 4) ? 390 : 270);
 		this.showDialog(dlg.container, 380, height, true, true);
 		dlg.init();
@@ -11339,7 +11343,7 @@
 			serviceCount++
 		}
 		
-		if (!mxClient.IS_IOS)
+		//if (!mxClient.IS_IOS)
 		{
 			serviceCount++
 		}

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

@@ -950,7 +950,10 @@
 	
 			editorUi.actions.addAction('testChecksum', mxUtils.bind(this, function()
 			{
-		    	var dlg = new TextareaDialog(editorUi, 'Paste Data:', '',
+				var xml = (editorUi.pages != null && editorUi.getCurrentFile() != null) ?
+					editorUi.getCurrentFile().getAnonymizedXmlForPages(editorUi.pages) : '';
+
+		    	var dlg = new TextareaDialog(editorUi, 'Paste Data:', xml,
 		    		function(newValue)
 				{
 					if (newValue.length > 0)
@@ -2272,7 +2275,7 @@
 				}, parent);
 			}
 			
-			if (!mxClient.IS_IOS)
+			//if (!mxClient.IS_IOS)
 			{
 				menu.addItem(mxResources.get('device') + '...', null, function()
 				{
@@ -2393,7 +2396,7 @@
 					}, parent);
 				}
 				
-				if (!mxClient.IS_IOS)
+				//if (!mxClient.IS_IOS)
 				{
 					menu.addItem(mxResources.get('device') + '...', null, function()
 					{
@@ -2485,7 +2488,7 @@
 					}, parent);
 				}
 				
-				if (!mxClient.IS_IOS)
+				//if (!mxClient.IS_IOS)
 				{
 					menu.addItem(mxResources.get('device') + '...', null, function()
 					{

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

@@ -169,6 +169,7 @@ EditorUi.initMinimalTheme = function()
 	            div.style.cssText = 'position:absolute;left:0;right:0;border-top:1px solid lightgray;' +
 	                'height:24px;bottom:31px;text-align:center;cursor:pointer;padding:6px 0 0 0;';
 	            div.className = 'geTitle';
+	            div.innerHTML = '<span style="font-size:18px;margin-right:5px;">+</span>';
 	            mxUtils.write(div, mxResources.get('moreShapes'));
 	            container.appendChild(div);
 	            
@@ -901,6 +902,8 @@ EditorUi.initMinimalTheme = function()
             menu.addSeparator(parent);
             ui.menus.addSubmenu('insertLayout', menu, parent);
             ui.menus.addSubmenu('insertAdvanced', menu, parent);
+            menu.addSeparator(parent);
+			menu.addItem(mxResources.get('more') + '...', null, ui.actions.get('toggleShapes').funct, parent);
         })));
 
         var methods = ['horizontalFlow', 'verticalFlow', '-', 'horizontalTree', 'verticalTree',

src/main/webapp/js/mxgraph/Graph.js

@@ -4897,8 +4897,8 @@ if (typeof mxVertexHandler != 'undefined')
 					
 					if (constraints != null)
 					{
-						// Requires an array of arrays with x, y (0..1) and an optional
-						// perimeter (0 or 1), eg. points=[[0,0,1],[0,1,0],[1,1]]
+						// Requires an array of arrays with x, y (0..1), an optional
+						// [perimeter (0 or 1), dx, and dy] eg. points=[[0,0,1,-10,10],[0,1,0],[1,1]]
 						var result = [];
 						
 						try
@@ -4908,7 +4908,8 @@ if (typeof mxVertexHandler != 'undefined')
 							for (var i = 0; i < c.length; i++)
 							{
 								var tmp = c[i];
-								result.push(new mxConnectionConstraint(new mxPoint(tmp[0], tmp[1]), (tmp.length > 2) ? tmp[2] != '0' : true));
+								result.push(new mxConnectionConstraint(new mxPoint(tmp[0], tmp[1]), (tmp.length > 2) ? tmp[2] != '0' : true,
+										null, (tmp.length > 3) ? tmp[3] : 0, (tmp.length > 4) ? tmp[4] : 0));
 							}
 						}
 						catch (e)

src/main/webapp/js/mxgraph/Shapes.js

@@ -14,30 +14,66 @@
 	};
 	mxUtils.extend(CubeShape, mxCylinder);
 	CubeShape.prototype.size = 20;
-	CubeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
+	CubeShape.prototype.darkOpacity = 0;
+	CubeShape.prototype.darkOpacity2 = 0;
+	
+	CubeShape.prototype.paintVertexShape = function(c, x, y, w, h)
 	{
 		var s = Math.max(0, Math.min(w, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))));
-
-		if (isForeground)
-		{
-			path.moveTo(s, h);
-			path.lineTo(s, s);
-			path.lineTo(0, 0);
-			path.moveTo(s, s);
-			path.lineTo(w, s);
-			path.end();
-		}
-		else
+		var op = Math.max(-1, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'darkOpacity', this.darkOpacity))));
+		var op2 = Math.max(-1, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'darkOpacity2', this.darkOpacity2))));
+		c.translate(x, y);
+		
+		c.begin();
+		c.moveTo(0, 0);
+		c.lineTo(w - s, 0);
+		c.lineTo(w, s);
+		c.lineTo(w, h);
+		c.lineTo(s, h);
+		c.lineTo(0, h - s);
+		c.lineTo(0, 0);
+		c.close();
+		c.end();
+		c.fillAndStroke();
+		
+		if (!this.outline)
 		{
-			path.moveTo(0, 0);
-			path.lineTo(w - s, 0);
-			path.lineTo(w, s);
-			path.lineTo(w, h);
-			path.lineTo(s, h);
-			path.lineTo(0, h - s);
-			path.lineTo(0, 0);
-			path.close();
-			path.end();
+			c.setShadow(false);
+	
+			if (op != 0)
+			{
+				c.setFillAlpha(Math.abs(op));
+				c.setFillColor((op < 0) ? '#FFFFFF' : '#000000');
+				c.begin();
+				c.moveTo(0, 0);
+				c.lineTo(w - s, 0);
+				c.lineTo(w, s);
+				c.lineTo(s, s);
+				c.close();
+				c.fill();
+			}
+
+			if (op2 != 0)
+			{
+				c.setFillAlpha(Math.abs(op2));
+				c.setFillColor((op2 < 0) ? '#FFFFFF' : '#000000');
+				c.begin();
+				c.moveTo(0, 0);
+				c.lineTo(s, s);
+				c.lineTo(s, h);
+				c.lineTo(0, h - s);
+				c.close();
+				c.fill();
+			}
+			
+			c.begin();
+			c.moveTo(s, h);
+			c.lineTo(s, s);
+			c.lineTo(0, 0);
+			c.moveTo(s, s);
+			c.lineTo(w, s);
+			c.end();
+			c.stroke();
 		}
 	};
 	CubeShape.prototype.getLabelMargins = function(rect)
@@ -188,27 +224,47 @@
 	};
 	mxUtils.extend(NoteShape, mxCylinder);
 	NoteShape.prototype.size = 30;
-	NoteShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
+	NoteShape.prototype.darkOpacity = 0;
+	
+	NoteShape.prototype.paintVertexShape = function(c, x, y, w, h)
 	{
 		var s = Math.max(0, Math.min(w, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))));
-
-		if (isForeground)
-		{
-			path.moveTo(w - s, 0);
-			path.lineTo(w - s, s);
-			path.lineTo(w, s);
-			path.end();
-		}
-		else
+		var op = Math.max(-1, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'darkOpacity', this.darkOpacity))));
+		c.translate(x, y);
+		
+		c.begin();
+		c.moveTo(0, 0);
+		c.lineTo(w - s, 0);
+		c.lineTo(w, s);
+		c.lineTo(w, h);
+		c.lineTo(0, h);
+		c.lineTo(0, 0);
+		c.close();
+		c.end();
+		c.fillAndStroke();
+		
+		if (!this.outline)
 		{
-			path.moveTo(0, 0);
-			path.lineTo(w - s, 0);
-			path.lineTo(w, s);
-			path.lineTo(w, h);
-			path.lineTo(0, h);
-			path.lineTo(0, 0);
-			path.close();
-			path.end();
+			c.setShadow(false);
+	
+			if (op != 0)
+			{
+				c.setFillAlpha(Math.abs(op));
+				c.setFillColor((op < 0) ? '#FFFFFF' : '#000000');
+				c.begin();
+				c.moveTo(w - s, 0);
+				c.lineTo(w - s, s);
+				c.lineTo(w, s);
+				c.close();
+				c.fill();
+			}
+			
+			c.begin();
+			c.moveTo(w - s, 0);
+			c.lineTo(w - s, s);
+			c.lineTo(w, s);
+			c.end();
+			c.stroke();
 		}
 	};
 

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

@@ -938,11 +938,11 @@ Sidebar.prototype.addGeneralPalette = function(expand)
 	 	this.createVertexTemplateEntry('ellipse;shape=cloud;whiteSpace=wrap;html=1;', 120, 80, '', 'Cloud', null, null, 'cloud network'),
 	 	this.createVertexTemplateEntry('shape=document;whiteSpace=wrap;html=1;boundedLbl=1;', 120, 80, '', 'Document'),
 	 	this.createVertexTemplateEntry('shape=internalStorage;whiteSpace=wrap;html=1;backgroundOutline=1;', 80, 80, '', 'Internal Storage'),
-	 	this.createVertexTemplateEntry('shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;', 120, 80, '', 'Cube'),
+	 	this.createVertexTemplateEntry('shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;', 120, 80, '', 'Cube'),
 	 	this.createVertexTemplateEntry('shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;', 120, 80, '', 'Step'),
 	 	this.createVertexTemplateEntry('shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;', 120, 60, '', 'Trapezoid'),
 	 	this.createVertexTemplateEntry('shape=tape;whiteSpace=wrap;html=1;', 120, 100, '', 'Tape'),
-	 	this.createVertexTemplateEntry('shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;', 80, 100, '', 'Note'),
+	 	this.createVertexTemplateEntry('shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;', 80, 100, '', 'Note'),
 	    this.createVertexTemplateEntry('shape=card;whiteSpace=wrap;html=1;', 80, 100, '', 'Card'),
 	    this.createVertexTemplateEntry('shape=callout;whiteSpace=wrap;html=1;perimeter=calloutPerimeter;', 120, 80, '', 'Callout', null, null, 'bubble chat thought speech message'),
 	 	this.createVertexTemplateEntry('shape=umlActor;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;html=1;outlineConnect=0;', 30, 60, 'Actor', 'Actor', false, null, 'user person human stickman'),