17.1.1 release

ChangeLog

@@ -1,3 +1,10 @@
+10-MAR-2022: 17.0.2
+
+- Uses tab key for nesting in list elements https://github.com/jgraph/drawio/issues/2673
+- Adds protocol and editor version to p2p message
+- Replaces consensus with improved consistency check
+- Fixes Gliffy DnD import
+
 09-MAR-2022: 17.0.1
 
 - Changes freehand drawing to filled path

VERSION

@@ -1 +1 @@
-17.1.0
+17.1.1

src/main/webapp/electron.js

@@ -1471,7 +1471,7 @@ ipcMain.on('export', exportDiagram);
 // Renderer Helper functions
 //================================================================
 
-const { COPYFILE_EXCL } = fs.constants;
+const { O_DIRECT, O_SYNC, O_DSYNC, O_CREAT, O_WRONLY, O_TRUNC } = fs.constants;
 const DRAFT_PREFEX = '~$';
 const DRAFT_EXT = '.dtmp';
 const BKP_PREFEX = '~$';
@@ -1544,6 +1544,7 @@ async function saveFile(fileObject, data, origStat, overwrite, defEnc)
 	var retryCount = 0;
 	var backupCreated = false;
 	var bkpPath = path.join(path.dirname(fileObject.path), BKP_PREFEX + path.basename(fileObject.path) + BKP_EXT);
+	var writeEnc = defEnc || fileObject.encoding;
 
 	var writeFile = async function()
 	{
@@ -1552,10 +1553,20 @@ async function saveFile(fileObject, data, origStat, overwrite, defEnc)
 			throw new Error('empty data');
 		}
 		else
-		{
-			var writeEnc = defEnc || fileObject.encoding;
-			
-			await fsProm.writeFile(fileObject.path, data, writeEnc);
+		{			
+			let fh;
+
+			try
+			{
+				//O_DIRECT | O_SYNC | O_DSYNC are to reduce OS buffering and reduce risk of file corruption
+				fh = await fsProm.open(fileObject.path, O_DIRECT | O_SYNC | O_DSYNC | O_CREAT | O_WRONLY | O_TRUNC);
+				await fsProm.writeFile(fh, data, writeEnc);
+			}
+			finally
+			{
+				await fh?.close();
+			}
+
 			let stat2 = await fsProm.stat(fileObject.path);
 			// Workaround for possible writing errors is to check the written
 			// contents of the file and retry 3 times before showing an error
@@ -1576,10 +1587,11 @@ async function saveFile(fileObject, data, origStat, overwrite, defEnc)
 			}
 			else
 			{
-				if (backupCreated)
+				//We'll keep the backup file in case the original file is corrupted. TODO When should we delete the backup file?
+				/*if (backupCreated)
 				{
 					fs.unlink(bkpPath, (err) => {}); //Ignore errors!
-				}
+				}*/
 
 				return stat2;
 			}
@@ -1589,12 +1601,24 @@ async function saveFile(fileObject, data, origStat, overwrite, defEnc)
 	async function doSaveFile()
 	{
 		//Copy file to backup file (after conflict and stat is checked)
+		let bkpFh;
+
 		try
 		{
-			await fsProm.copyFile(fileObject.path, bkpPath, COPYFILE_EXCL);
+			//Use file read then write to open the backup file direct sync write to reduce the chance of file corruption
+			let fileContent = await fsProm.readFile(fileObject.path, writeEnc);
+			bkpFh = await fsProm.open(bkpPath, O_DIRECT | O_SYNC | O_DSYNC | O_CREAT | O_WRONLY | O_TRUNC);
+			await fsProm.writeFile(bkpFh, fileContent, writeEnc);
 			backupCreated = true;
 		}
-		catch (e) {} //Ignore
+		catch (e) 
+		{
+			console.log(e); //Ignore
+		}
+		finally 
+		{
+			await bkpFh?.close();
+		}
 					
 		return await writeFile();
 	};

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

@@ -4537,25 +4537,25 @@ App.prototype.loadTemplate = function(url, onload, onerror, templateFilename, as
 {
 	var base64 = false;
 	var realUrl = url;
+	var filterFn = (templateFilename != null) ? templateFilename : url;
+	var isVisioFilename = /(\.v(dx|sdx?))($|\?)/i.test(filterFn) ||
+		/(\.vs(x|sx?))($|\?)/i.test(filterFn);
+	var binary = /\.png$/i.test(filterFn) || /\.pdf$/i.test(filterFn);
 	
 	if (!this.editor.isCorsEnabledForUrl(realUrl))
 	{
-		// Always uses base64 response to check magic numbers for file type
+		base64 = binary || isVisioFilename;
 		var nocache = 't=' + new Date().getTime();
-		realUrl = PROXY_URL + '?url=' + encodeURIComponent(url) + '&base64=1&' + nocache;
-		base64 = true;
+		realUrl = PROXY_URL + '?url=' + encodeURIComponent(url) +
+			'&' + nocache + ((base64) ? '&base64=1' : '');
 	}
 
-	var filterFn = (templateFilename != null) ? templateFilename : url;
-	
 	this.editor.loadUrl(realUrl, mxUtils.bind(this, function(responseData)
 	{
 		try
 		{
 			var data = (!base64) ? responseData : ((window.atob && !mxClient.IS_IE && !mxClient.IS_IE11) ?
 				atob(responseData) : Base64.decode(responseData));
-			var isVisioFilename = /(\.v(dx|sdx?))($|\?)/i.test(filterFn) ||
-				/(\.vs(x|sx?))($|\?)/i.test(filterFn);
 			
 			if (isVisioFilename || this.isVisioData(data))
 			{

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

@@ -207,16 +207,10 @@ DrawioFile.prototype.synchronizeFile = function(success, error)
 	{
 		if (this.sync != null)
 		{
-			// Removes unsaved remote changes
-			if (this.ownPages != null && this.ui.pages != null)
+			this.sync.fileChanged(mxUtils.bind(this, function()
 			{
-				var patch = this.ui.diffPages(
-					this.ui.pages, this.ownPages);
-				this.patch([patch]);
-				this.snapshot = this.ui.getXmlFileData();
-			}
-
-			this.sync.fileChanged(success, error);
+				this.sync.checkConsistency(success, error);
+			}), error);
 		}
 		else
 		{

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

@@ -195,21 +195,21 @@ DrawioFileSync.prototype.maxSyncMessageSize = 9000;
  * values help to group sending out changes, smaller
  * values reduce latency.
  */
-DrawioFileSync.prototype.syncSendMessageDelay = 100;
+DrawioFileSync.prototype.syncSendMessageDelay = 300;
 
 /**
  * Delay for received sync message processing in ms.
  * Larger values help to sort and merge messages,
  * smaller values reduce latency.
  */
-DrawioFileSync.prototype.syncReceiveMessageDelay = 300;
+DrawioFileSync.prototype.syncReceiveMessageDelay = 100;
 
 /**
- * Inactivity time to drop remote changes that have not been saved
+ * Inactivity time to undo remote changes that have not been saved
  * to the file. Larger values give time to save, smaller values
- * require less inactivity time and give better responsiveness.
+ * require less inactivity time by the user.
  */
-DrawioFileSync.prototype.consistencyCheckDelay = 10000;
+DrawioFileSync.prototype.consistencyCheckDelay = 18000;
 
 /**
  * Counter for local message IDs.
@@ -340,32 +340,43 @@ DrawioFileSync.prototype.start = function()
  */
 DrawioFileSync.prototype.updateRealtime = function()
 {
-	if (this.file.isRealtimeEnabled() && this.file.isRealtimeSupported())
+	if (this.isValidState())
 	{
-		if (this.file.ownPages == null)
+		if (this.file.isRealtimeEnabled() && this.file.isRealtimeSupported())
 		{
-			var data = this.ui.getXmlFileData();
-			this.file.ownPages = this.ui.getPagesForNode(data);
-			this.file.snapshot = data;
+			if (this.file.ownPages == null)
+			{
+				var data = this.ui.getXmlFileData();
+				this.file.ownPages = this.ui.getPagesForNode(data);
+				this.file.snapshot = data;
+			}
 		}
-	}
-	else if (this.file.ownPages != null)
-	{
-		this.checkConsistency();
-		this.file.ownPages = null;
-		this.file.snapshot = null;
-	}
+		else if (this.file.ownPages != null)
+		{
+			// Removes pending remote changes
+			var patch = this.ui.diffPages(this.ui.pages,
+				this.file.ownPages);
 
-	if (DrawioFileSync.ENABLE_SOCKETS && this.file.ownPages != null &&
-		this.p2pCollab == null && this.channelId != null)
-	{
-		this.p2pCollab = new P2PCollab(this.ui, this, this.channelId);
-		this.p2pCollab.joinFile();
-	}
-	else if (this.file.ownPages == null && this.p2pCollab != null)
-	{
-		this.p2pCollab.destroy();
-		this.p2pCollab = null;
+			if (!mxUtils.isEmptyObject(patch))
+			{
+				this.file.patch([patch]);
+			}
+
+			this.file.ownPages = null;
+			this.file.snapshot = null;
+		}
+
+		if (DrawioFileSync.ENABLE_SOCKETS && this.file.ownPages != null &&
+			this.p2pCollab == null && this.channelId != null)
+		{
+			this.p2pCollab = new P2PCollab(this.ui, this, this.channelId);
+			this.p2pCollab.joinFile();
+		}
+		else if (this.file.ownPages == null && this.p2pCollab != null)
+		{
+			this.p2pCollab.destroy();
+			this.p2pCollab = null;
+		}
 	}
 };
 
@@ -885,22 +896,24 @@ DrawioFileSync.prototype.sendLocalChanges = function(changes)
 		if (this.localChanges == null)
 		{
 			this.localChanges = changes;
-
-			window.setTimeout(mxUtils.bind(this, function()
-			{
-				if (this.ui.getCurrentFile() == this.file)
-				{
-					this.doSendLocalChanges(this.localChanges);
-				}
-
-				this.localChanges = null;
-			}), this.syncSendMessageDelay);
 		}
 		else
 		{
 			this.localChanges = this.localChanges.concat(changes);
 		}
 
+		window.clearTimeout(this.sendLocalChangesThread);
+
+		this.sendLocalChangesThread = window.setTimeout(mxUtils.bind(this, function()
+		{
+			if (this.ui.getCurrentFile() == this.file && this.localChanges != null)
+			{
+				this.doSendLocalChanges(this.localChanges);
+			}
+
+			this.localChanges = null;
+		}), this.syncSendMessageDelay);
+
 		if (urlParams['test'] == '1')
 		{
 			EditorUi.debug('Sync.sendLocalChanges', [this],
@@ -1047,7 +1060,7 @@ DrawioFileSync.prototype.doReceiveRemoteChanges = function(changes)
 };
 
 /**
- * Removes transient remote changes that have not been saved.
+ * Schedules a consistency check.
  */
 DrawioFileSync.prototype.scheduleConsistencyCheck = function()
 {
@@ -1055,34 +1068,75 @@ DrawioFileSync.prototype.scheduleConsistencyCheck = function()
 
 	this.consistencyCheckThread = window.setTimeout(mxUtils.bind(this, function()
 	{
-		this.checkConsistency();
+		this.checkConsistency(null, mxUtils.bind(this, function(err)
+		{
+			this.file.handleFileError(err);
+		}));
 	}), this.consistencyCheckDelay);
 };
 
 /**
- * Removes transient remote changes that have not been saved.
+ * Removes transient remote changes that have not been saved and
+ * merges all changes from the latest version of the file.
  */
-DrawioFileSync.prototype.checkConsistency = function()
+DrawioFileSync.prototype.checkConsistency = function(success, error)
 {
 	window.clearTimeout(this.consistencyCheckThread);
 
-	if (this.ui.getCurrentFile() == this.file &&
-		!this.file.inConflictState &&
+	if (this.isValidState() && !this.file.inConflictState &&
 		this.file.ownPages != null)
 	{
-		var patch = this.ui.diffPages(
-			this.ui.pages, this.file.ownPages);
+		var patch = this.ui.diffPages(this.ui.pages,
+			this.file.ownPages);
 
 		if (!mxUtils.isEmptyObject(patch))
 		{
 			this.file.patch([patch]);
 		}
 
-		if (urlParams['test'] == '1')
+		this.file.getLatestVersion(mxUtils.bind(this, function(newFile)
 		{
-			EditorUi.debug('Sync.consistencyCheck',
-				[this], 'patch', [patch]);
-		}
+			try
+			{
+				if (this.isValidState() && !this.file.inConflictState &&
+					this.file.ownPages != null)
+				{
+					var pages = this.ui.getPagesForNode(
+						mxUtils.parseXml(newFile.data).
+						documentElement);
+					var patches = [this.ui.diffPages(this.ui.pages, pages),
+						this.ui.diffPages(pages, this.file.ownPages)];
+					
+					if (!this.file.ignorePatches(patches))
+					{
+						this.file.patch(patches);
+					}
+				}
+
+				if (urlParams['test'] == '1')
+				{
+					EditorUi.debug('Sync.consistencyCheck',
+						[this], 'patch', [patch],
+						'patches', patches);
+				}
+
+				if (success != null)
+				{
+					success();
+				}
+			}
+			catch (e)
+			{
+				if (error != null)
+				{
+					error(e);
+				}
+			}
+		}), error);
+	}
+	else if (success != null)
+	{
+		success();
 	}
 };
 
@@ -1097,10 +1151,6 @@ DrawioFileSync.prototype.patchOwnPages = function(patches, pending, local)
 		{
 			if (this.file.ownPages != null)
 			{
-				var consensus = this.ui.diffPages(
-					this.file.ownPages,
-					this.ui.pages);
-				
 				for (var i = 0; i < patches.length; i++)
 				{
 					if (patches[i] != null)
@@ -1126,22 +1176,14 @@ DrawioFileSync.prototype.patchOwnPages = function(patches, pending, local)
 					this.file.patch(pending);
 				}
 
-				if (!mxUtils.isEmptyObject(consensus))
-				{
-					this.file.patch([consensus]);
-
-					if (!local)
-					{
-						this.sendLocalChanges([consensus]);
-					}
-				}
-
 				this.scheduleConsistencyCheck();
 
 				if (urlParams['test'] == '1')
 				{
-					EditorUi.debug('Sync.patchOwnPages', [this], 'patches', patches,
-						'pending', pending, 'consensus', consensus, 'local', local);
+					EditorUi.debug('Sync.patchOwnPages', [this],
+						'patches', patches,
+						'pending', pending,
+						'local', local);
 				}
 			}
 		}));

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

@@ -11507,7 +11507,7 @@
 					handleResult(xml);
 				}));
 			}
-			else if (Graph.fileSupport && !new XMLHttpRequest().upload &&
+			else if (Graph.fileSupport && new XMLHttpRequest().upload &&
 				this.isRemoteFileFormat(data, name))
 			{
 				if (this.isOffline())

src/main/webapp/js/diagramly/P2PCollab.js

@@ -41,7 +41,7 @@ function P2PCollab(ui, sync, channelId)
 			}
 			else
 			{
-				this.joinFile();
+				this.joinFile(true);
 			}
 		}
 		catch (e)
@@ -68,7 +68,9 @@ function P2PCollab(ui, sync, channelId)
 		//Converting to a string such that webRTC works also
 		var msg = JSON.stringify({from: myClientId, id: messageId,
 			type: type, sessionId: sync.clientId, userId: user.id,
-			username: user.displayName, data: data});
+			username: user.displayName, data: data,
+			protocol: DrawioFileSync.PROTOCOL,
+			editor: EditorUi.VERSION});
 		
 		if (NO_P2P && type != 'cursor')
 		{
@@ -186,23 +188,6 @@ function P2PCollab(ui, sync, channelId)
 
 	this.selectionChangeListener = function(sender, evt)
 	{
-		// Logging possible NPE in FF
-		if (evt == null)
-		{
-			try
-			{
-				EditorUi.logEvent({category: 'NPE-NULL-EVENT',
-					action: 'P2PCollab.selectionChangeListener'});
-			}
-			catch (e)
-			{
-				// ignore
-			}
-
-			return;
-		}
-		// End of debugging
-
 		var mapToIds = function(c)
 		{
 			return c.id;
@@ -576,7 +561,7 @@ function P2PCollab(ui, sync, channelId)
 		}
 	};
 
-	this.joinFile = function()
+	this.joinFile = function(check)
 	{
 		if (destroyed) return;
 
@@ -613,6 +598,11 @@ function P2PCollab(ui, sync, channelId)
 				joinInProgress = false;
 				sync.file.fireEvent(new mxEventObject('realtimeStateChanged'));
 				EditorUi.debug('P2PCollab: open socket', socket.joinId);
+
+				if (check)
+				{
+					sync.scheduleConsistencyCheck();
+				}
 			});
 		
 			ws.addEventListener('message', mxUtils.bind(this, function(event)
@@ -671,7 +661,7 @@ function P2PCollab(ui, sync, channelId)
 					{
 						EditorUi.debug('P2PCollab: calling rejoin on', ws.joinId);
 						rejoinCalled = true;
-						this.joinFile();
+						this.joinFile(true);
 					}
 				}
 
@@ -695,7 +685,7 @@ function P2PCollab(ui, sync, channelId)
 					{
 						EditorUi.debug('P2PCollab: calling rejoin on', ws.joinId);
 						rejoinCalled = true;
-						this.joinFile();
+						this.joinFile(true);
 					}
 				}
 

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

@@ -519,23 +519,6 @@ EditorUi.prototype.initPages = function()
 		// Adds a graph model listener to update the view
 		this.editor.graph.model.addListener(mxEvent.CHANGE, mxUtils.bind(this, function(sender, evt)
 		{
-			// Logging possible NPE in FF
-			if (evt == null)
-			{
-				try
-				{
-					EditorUi.logEvent({category: 'NPE-NULL-EVENT',
-						action: 'EditorUi.initPages'});
-				}
-				catch (e)
-				{
-					// ignore
-				}
-
-				return;
-			}
-			// End of debugging
-
 			var edit = evt.getProperty('edit');
 			var changes = edit.changes;
 			

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

@@ -30,7 +30,7 @@ function mxFreehand(graph)
 	var enabled = false;
 	var stopClickEnabled = true;
 	var perfectFreehandOptions = {
-		size: 8,
+		size: 12,
 		thinning: 0.5,
 		smoothing: 0.5,
 		streamline: 0.5,

src/main/webapp/js/diagramly/sidebar/Sidebar-AWS3D.js

@@ -134,23 +134,23 @@
 					w * 0.455, h * 0.26, '', 'Arrow NW', null, null, this.getTagsForStencil(gn, 'arrow ne north east northeast', dt).join(' ')),
 			this.createVertexTemplateEntry(s + 'arrowlessNE;fillColor=#000000;aspect=fixed;', 
 					w * 0.316, h * 0.18, '', 'Arrowless NE', null, null, this.getTagsForStencil(gn, 'arrow ne north east northeast', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'dashedEdgeDouble;fillColor=#000000;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'dashedEdgeDouble2;strokeColor=#2D6195;aspect=fixed;', 
 					w * 0.316, h * 0.18, '', 'Dashed Edge Double Arrow', null, null, this.getTagsForStencil(gn, 'arrow ne north east northeast', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'dashedArrowlessEdge;fillColor=#000000;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'dashedArrowlessEdge2;strokeColor=#2D6195;aspect=fixed;', 
 					w * 0.316, h * 0.18, '', 'Dashed Arrowless Edge', null, null, this.getTagsForStencil(gn, 'arrow ne north east northeast', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'dashedEdge;fillColor=#000000;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'dashedEdge2;strokeColor=#2D6195;aspect=fixed;', 
 					w * 0.316, h * 0.18, '', 'Dashed Edge', null, null, this.getTagsForStencil(gn, 'arrow ne north east northeast', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'flatEdge;fillColor=#000000;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'flatEdge2;strokeColor=none;fillColor=#F4B934;aspect=fixed;', 
 					w * 0.632, h * 0.36, '', 'Flat Edge', null, null, this.getTagsForStencil(gn, 'arrow ne north east northeast', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'flatDoubleEdge;fillColor=#000000;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'flatDoubleEdge2;strokeColor=none;fillColor=#F4B934;aspect=fixed;', 
 					w * 2.528, h * 1.44, '', 'Flat Double Edge', null, null, this.getTagsForStencil(gn, 'arrow ne north east northeast', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'arrowhead;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'arrowhead2;fillColor=#000000;aspect=fixed;', 
 					w * 0.19, h * 0.11, '', 'Arrowhead', null, null, this.getTagsForStencil(gn, 'arrowhead', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'edge;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'edge2;strokeColor=#000000;aspect=fixed;', 
 					w * 0.97, h * 1.074, '', 'Edge', null, null, this.getTagsForStencil(gn, 'edge', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'reference;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'reference2;fillColor=#2d6195;strokeColor=none;aspect=fixed;', 
 					w * 0.295, h * 0.195, '', 'Reference', null, null, this.getTagsForStencil(gn, 'reference', dt).join(' ')),
-			this.createVertexTemplateEntry(s + 'spot;aspect=fixed;', 
+			this.createVertexTemplateEntry(s + 'spot2;fillColor=#F4B934;strokeColor=none;aspect=fixed;', 
 					w * 0.62, h * 0.36, '', 'Spot', null, null, this.getTagsForStencil(gn, 'spot', dt).join(' ')),
 		 	this.createEdgeTemplateEntry('edgeStyle=isometricEdgeStyle;endArrow=none;html=1;', 50, 100, 'isometric edge', 'Isometric Edge 1'),
 		 	this.createEdgeTemplateEntry('edgeStyle=isometricEdgeStyle;endArrow=none;html=1;elbow=vertical;', 50, 100, 'isometric edge', 'Isometric Edge 2')

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

@@ -1916,9 +1916,20 @@ EditorUi.prototype.onKeyDown = function(evt)
 			{
 				try
 				{
-					if (graph.cellEditor.isContentEditing() && graph.cellEditor.isTextSelected())
+					var nesting = graph.cellEditor.isContentEditing() && graph.cellEditor.isTextSelected();
+
+					if (window.getSelection && graph.cellEditor.isContentEditing() &&
+						!nesting && !mxClient.IS_IE && !mxClient.IS_IE11)
+					{
+						var selection = window.getSelection();
+						var container = (selection.rangeCount > 0) ? selection.getRangeAt(0).commonAncestorContainer : null;
+						nesting = container != null && (container.nodeName == 'LI' || (container.parentNode != null &&
+							container.parentNode.nodeName == 'LI'));
+					}
+
+					if (nesting)
 					{
-						// (Shift+)tab indents/outdents with text selection
+						// (Shift+)tab indents/outdents with text selection or inside list elements
 						document.execCommand(mxEvent.isShiftDown(evt) ? 'outdent' : 'indent', false, null);
 					}
 					// Shift+tab applies value with cursor

src/main/webapp/shapes/mxAWS3D.js

@@ -314,6 +314,68 @@ mxShapeAws3dDashedEdgeDouble.prototype.paintVertexShape = function(c, x, y, w, h
 
 mxCellRenderer.registerShape(mxShapeAws3dDashedEdgeDouble.prototype.cst.DASHED_EDGE_DOUBLE, mxShapeAws3dDashedEdgeDouble);
 
+//**********************************************************************************************************************************************************
+//Dashed edge with double arrow v2
+//**********************************************************************************************************************************************************
+/**
+* Extends mxShape.
+*/
+function mxShapeAws3dDashedEdgeDouble2(bounds, fill, stroke, strokewidth)
+{
+	mxShape.call(this);
+	this.bounds = bounds;
+	this.fill = fill;
+	this.stroke = stroke;
+	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
+};
+
+/**
+* Extends mxShape.
+*/
+mxUtils.extend(mxShapeAws3dDashedEdgeDouble2, mxShape);
+
+mxShapeAws3dDashedEdgeDouble2.prototype.cst = {
+		DASHED_EDGE_DOUBLE2 : 'mxgraph.aws3d.dashedEdgeDouble2'
+};
+
+/**
+* Function: paintVertexShape
+* 
+* Paints the vertex shape.
+*/
+mxShapeAws3dDashedEdgeDouble2.prototype.paintVertexShape = function(c, x, y, w, h)
+{
+	c.translate(x, y);
+	var strokeColor = mxUtils.getValue(this.style, 'strokeColor', '#000000');
+	
+	c.save();
+	c.setStrokeColor('none');
+	c.setFillColor(strokeColor);
+	c.begin();
+	c.moveTo(21, 5.5);
+	c.lineTo(0, 0);
+	c.lineTo(9.7, 12.2);
+	c.fillAndStroke();
+	
+	c.begin();
+	c.moveTo(w - 21, h - 5.5);
+	c.lineTo(w, h);
+	c.lineTo(w - 9.7, h - 12.2);
+	c.fillAndStroke();
+	
+	c.restore();
+	c.setStrokeWidth('4');
+	c.setDashed('true');
+	c.setLineCap('round');
+	
+	c.begin();
+	c.moveTo(7.675, 4.425);
+	c.lineTo(w - 7.675, h - 4.425);
+	c.stroke();
+};
+
+mxCellRenderer.registerShape(mxShapeAws3dDashedEdgeDouble2.prototype.cst.DASHED_EDGE_DOUBLE2, mxShapeAws3dDashedEdgeDouble2);
+
 //**********************************************************************************************************************************************************
 //Dashed arrowless edge
 //**********************************************************************************************************************************************************
@@ -360,6 +422,51 @@ mxShapeAws3dDashedArrowlessEdge.prototype.paintVertexShape = function(c, x, y, w
 
 mxCellRenderer.registerShape(mxShapeAws3dDashedArrowlessEdge.prototype.cst.DASHED_ARROWLESS_EDGE, mxShapeAws3dDashedArrowlessEdge);
 
+//**********************************************************************************************************************************************************
+//Dashed arrowless edge
+//**********************************************************************************************************************************************************
+/**
+* Extends mxShape.
+*/
+function mxShapeAws3dDashedArrowlessEdge2(bounds, fill, stroke, strokewidth)
+{
+	mxShape.call(this);
+	this.bounds = bounds;
+	this.fill = fill;
+	this.stroke = stroke;
+	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
+};
+
+/**
+* Extends mxShape.
+*/
+mxUtils.extend(mxShapeAws3dDashedArrowlessEdge2, mxShape);
+
+mxShapeAws3dDashedArrowlessEdge2.prototype.cst = {
+		DASHED_ARROWLESS_EDGE2 : 'mxgraph.aws3d.dashedArrowlessEdge2'
+};
+
+/**
+* Function: paintVertexShape
+* 
+* Paints the vertex shape.
+*/
+mxShapeAws3dDashedArrowlessEdge2.prototype.paintVertexShape = function(c, x, y, w, h)
+{
+	c.translate(x, y);
+	
+	c.setStrokeWidth('4');
+	c.setDashed('true');
+	c.setLineCap('round');
+	
+	c.begin();
+	c.moveTo(0, 0);
+	c.lineTo(w, h);
+	c.stroke();
+};
+
+mxCellRenderer.registerShape(mxShapeAws3dDashedArrowlessEdge2.prototype.cst.DASHED_ARROWLESS_EDGE2, mxShapeAws3dDashedArrowlessEdge2);
+
 //**********************************************************************************************************************************************************
 //Dashed edge
 //**********************************************************************************************************************************************************
@@ -416,6 +523,62 @@ mxShapeAws3dDashedEdge.prototype.paintVertexShape = function(c, x, y, w, h)
 
 mxCellRenderer.registerShape(mxShapeAws3dDashedEdge.prototype.cst.DASHED_EDGE, mxShapeAws3dDashedEdge);
 
+//**********************************************************************************************************************************************************
+//Dashed edge v2
+//**********************************************************************************************************************************************************
+/**
+* Extends mxShape.
+*/
+function mxShapeAws3dDashedEdge2(bounds, fill, stroke, strokewidth)
+{
+	mxShape.call(this);
+	this.bounds = bounds;
+	this.fill = fill;
+	this.stroke = stroke;
+	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
+};
+
+/**
+* Extends mxShape.
+*/
+mxUtils.extend(mxShapeAws3dDashedEdge2, mxShape);
+
+mxShapeAws3dDashedEdge2.prototype.cst = {
+		DASHED_EDGE2 : 'mxgraph.aws3d.dashedEdge2'
+};
+
+/**
+* Function: paintVertexShape
+* 
+* Paints the vertex shape.
+*/
+mxShapeAws3dDashedEdge2.prototype.paintVertexShape = function(c, x, y, w, h)
+{
+	c.translate(x, y);
+	var strokeColor = mxUtils.getValue(this.style, 'strokeColor', '#000000');
+	
+	c.save();
+	c.setStrokeColor('none');
+	c.setFillColor(strokeColor);
+	c.begin();
+	c.moveTo(w - 21, 5.5);
+	c.lineTo(w, 0);
+	c.lineTo(w - 9.7, 12.2);
+	c.fillAndStroke();
+	
+	c.restore();
+	c.setStrokeWidth('4');
+	c.setDashed('true');
+	c.setLineCap('round');
+	
+	c.begin();
+	c.moveTo(w - 7.675, 4.425);
+	c.lineTo(0, h);
+	c.stroke();
+};
+
+mxCellRenderer.registerShape(mxShapeAws3dDashedEdge2.prototype.cst.DASHED_EDGE2, mxShapeAws3dDashedEdge2);
+
 //**********************************************************************************************************************************************************
 //Flat edge
 //**********************************************************************************************************************************************************
@@ -464,6 +627,53 @@ mxShapeAws3dFlatEdge.prototype.paintVertexShape = function(c, x, y, w, h)
 
 mxCellRenderer.registerShape(mxShapeAws3dFlatEdge.prototype.cst.FLAT_EDGE, mxShapeAws3dFlatEdge);
 
+//**********************************************************************************************************************************************************
+//Flat edge v2
+//**********************************************************************************************************************************************************
+/**
+* Extends mxShape.
+*/
+function mxShapeAws3dFlatEdge2(bounds, fill, stroke, strokewidth)
+{
+	mxShape.call(this);
+	this.bounds = bounds;
+	this.fill = fill;
+	this.stroke = stroke;
+	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
+};
+
+/**
+* Extends mxShape.
+*/
+mxUtils.extend(mxShapeAws3dFlatEdge2, mxShape);
+
+mxShapeAws3dFlatEdge2.prototype.cst = {
+		FLAT_EDGE2 : 'mxgraph.aws3d.flatEdge2'
+};
+
+/**
+* Function: paintVertexShape
+* 
+* Paints the vertex shape.
+*/
+mxShapeAws3dFlatEdge2.prototype.paintVertexShape = function(c, x, y, w, h)
+{
+	c.translate(x, y);
+	
+	c.begin();
+	c.moveTo(w - 46, 8.8);
+	c.lineTo(w - 61.2, 0);
+	c.lineTo(w, 0);
+	c.lineTo(w, 35.5);
+	c.lineTo(w - 15.4, 26.5);
+	c.lineTo(30.7, h);
+	c.lineTo(0, h - 17.7);
+	c.close();
+	c.fillAndStroke();
+};
+
+mxCellRenderer.registerShape(mxShapeAws3dFlatEdge2.prototype.cst.FLAT_EDGE2, mxShapeAws3dFlatEdge2);
+
 //**********************************************************************************************************************************************************
 //Flat double edge
 //**********************************************************************************************************************************************************
@@ -525,6 +735,65 @@ mxShapeAws3dFlatDoubleEdge.prototype.paintVertexShape = function(c, x, y, w, h)
 
 mxCellRenderer.registerShape(mxShapeAws3dFlatDoubleEdge.prototype.cst.FLAT_DOUBLE_EDGE, mxShapeAws3dFlatDoubleEdge);
 
+//**********************************************************************************************************************************************************
+//Flat double edge v2
+//**********************************************************************************************************************************************************
+/**
+* Extends mxShape.
+*/
+function mxShapeAws3dFlatDoubleEdge2(bounds, fill, stroke, strokewidth)
+{
+	mxShape.call(this);
+	this.bounds = bounds;
+	this.fill = fill;
+	this.stroke = stroke;
+	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
+};
+
+/**
+* Extends mxShape.
+*/
+mxUtils.extend(mxShapeAws3dFlatDoubleEdge2, mxShape);
+
+mxShapeAws3dFlatDoubleEdge2.prototype.cst = {
+		FLAT_DOUBLE_EDGE2 : 'mxgraph.aws3d.flatDoubleEdge2'
+};
+
+/**
+* Function: paintVertexShape
+* 
+* Paints the vertex shape.
+*/
+mxShapeAws3dFlatDoubleEdge2.prototype.paintVertexShape = function(c, x, y, w, h)
+{
+	c.translate(x, y);
+	
+	c.begin();
+	c.moveTo(15.3, 61.9);
+	c.lineTo(30.8, 53.2);
+	c.lineTo(15.4, 44.2);
+	c.lineTo(0, 53.2);
+	c.lineTo(15.4, 8.8);
+	c.lineTo(92.1, 0);
+	c.lineTo(76.5, 8.8);
+	c.lineTo(92.1, 17.7);
+	c.lineTo(107.4, 8.8);
+	
+	c.lineTo(w - 15.3, h - 61.9);
+	c.lineTo(w - 30.8, h - 53.2);
+	c.lineTo(w - 15.4, h - 44.2);
+	c.lineTo(w, h - 53.2);
+	c.lineTo(w - 15.4, h - 8.8);
+	c.lineTo(w - 92.1, h);
+	c.lineTo(w - 76.5, h - 8.8);
+	c.lineTo(w - 92.1, h - 17.7);
+	c.lineTo(w - 107.4, h - 8.8);
+	c.close();
+	c.fillAndStroke();
+};
+
+mxCellRenderer.registerShape(mxShapeAws3dFlatDoubleEdge2.prototype.cst.FLAT_DOUBLE_EDGE2, mxShapeAws3dFlatDoubleEdge2);
+
 //**********************************************************************************************************************************************************
 //AMI
 //**********************************************************************************************************************************************************

src/main/webapp/stencils/aws3d.xml

@@ -13,6 +13,18 @@
         <fill/>
     </foreground>
 </shape>
+<shape aspect="variable" h="11" name="Arrowhead2" strokewidth="inherit" w="19">
+    <connections/>
+    <foreground>
+        <path>
+            <move x="0" y="0"/>
+            <line x="19" y="5.5"/>
+            <line x="9.5" y="11"/>
+            <close/>
+        </path>
+        <fillstroke/>
+    </foreground>
+</shape>
 <shape aspect="variable" h="70.6" name="Content" strokewidth="inherit" w="30.8">
     <connections/>
     <foreground>
@@ -104,6 +116,21 @@
         <stroke/>
     </foreground>
 </shape>
+<shape aspect="variable" h="107.4" name="Edge2" strokewidth="inherit" w="97">
+    <connections/>
+    <foreground>
+        <fillcolor color="none"/>
+        <strokewidth width="2"/>
+        <path>
+            <move x="27.2" y="0"/>
+            <line x="0" y="17.3"/>
+            <line x="97" y="72"/>
+            <line x="97" y="89.8"/>
+            <line x="66.3" y="107.4"/>
+        </path>
+        <stroke/>
+    </foreground>
+</shape>
 <shape aspect="variable" h="57.06" name="Email" strokewidth="inherit" w="42.55">
     <connections/>
     <foreground>
@@ -470,6 +497,22 @@
         <fill/>
     </foreground>
 </shape>
+<shape aspect="variable" h="19.5" name="Reference2" strokewidth="inherit" w="29.5">
+    <connections/>
+    <foreground>
+        <path>
+            <move x="28.5" y="0"/>
+            <arc large-arc-flag="0" rx="1" ry="1" sweep-flag="1" x="29.5" x-axis-rotation="0" y="1"/>
+            <line x="29.5" y="18.5"/>
+            <arc large-arc-flag="0" rx="1" ry="1" sweep-flag="1" x="28.5" x-axis-rotation="0" y="19.5"/>
+            <line x="9.8" y="19.5"/>
+            <line x="0" y="9.8"/>
+            <line x="9.8" y="0"/>
+            <close/>
+        </path>
+        <fillstroke/>
+    </foreground>
+</shape>
 <shape aspect="variable" h="60" name="Snapshot1" strokewidth="inherit" w="92">
     <connections/>
     <foreground>
@@ -566,4 +609,17 @@
         <fill/>
     </foreground>
 </shape>
+<shape aspect="variable" h="36" name="Spot2" strokewidth="inherit" w="62">
+    <connections/>
+    <foreground>
+        <path>
+            <move x="31" y="0"/>
+            <line x="62" y="18"/>
+            <line x="31" y="36"/>
+            <line x="0" y="18"/>
+            <close/>
+        </path>
+        <fillstroke/>
+    </foreground>
+</shape>
 </shapes>