9.1.7 release

Former-commit-id: 05640694a0375283e124b98975afd322458fc409

ChangeLog

@@ -1,3 +1,11 @@
+21-SEP-2018: 9.1.7
+
+- Adds flow plugin
+- Uses mxGraph 3.9.9
+- Adds metro color palette
+- Fixes VSDX export in IE11
+- Adds plugins menu in embed mode
+
 18-SEP-2018: 9.1.6
 
 - Updates connection arrows and handle colors

VERSION

@@ -1 +1 @@
-9.1.6
+9.1.7

src/main/java/com/mxgraph/io/gliffy/importer/GliffyDiagramConverter.java

@@ -194,8 +194,9 @@ public class GliffyDiagramConverter
 			mxCell startTerminal = getTerminalCell(obj, true);
 			mxCell endTerminal = getTerminalCell(obj, false);
 
-			drawioDiagram.addCell(obj.getMxObject(), parent, null, startTerminal, endTerminal);
-
+			obj.getMxObject().setTerminal(startTerminal, true);
+			obj.getMxObject().setTerminal(endTerminal, false);
+			
 			setWaypoints(obj, startTerminal, endTerminal);
 		}
 	}
@@ -808,7 +809,7 @@ public class GliffyDiagramConverter
 			{
 				GliffySvg svg = graphic.Svg;
 				cell.setVertex(true);
-				style.append("shape=image;aspect=fixed;");
+				style.append("shape=image;imageAspect=0;");
 				Resource res = gliffyDiagram.embeddedResources.get(svg.embeddedResourceId);
 
 				style.append("image=data:image/svg+xml,").append(res.getBase64EncodedData()).append(";");

src/main/webapp/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 09/18/2018 06:12 PM
+# 09/21/2018 10:56 AM
 
 app.html
 index.html?offline=1

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

@@ -202,7 +202,8 @@ App.pluginRegistry = {'4xAKTrabTpTzahoLthkwPNUn': '/plugins/explore.js',
 	'trees': '/plugins/trees/trees.js', 'import': '/plugins/import.js',
 	'replay': '/plugins/replay.js', 'anon': '/plugins/anonymize.js',
 	'tr': '/plugins/trello.js', 'f5': '/plugins/rackF5.js',
-	'tickets': '/plugins/tickets.js', 'webcola': '/plugins/webcola/webcola.js'};
+	'tickets': '/plugins/tickets.js', 'flow': '/plugins/flow.js',
+	'webcola': '/plugins/webcola/webcola.js'};
 
 /**
  * Function: authorize

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

@@ -1200,10 +1200,10 @@
 		 */
 
 		mxCellRenderer.defaultShapes['partialRectangle'].prototype.customProperties = [
-	        {name: 'top', dispName: 'Top Line', type: 'boolean'},
-	        {name: 'bottom', dispName: 'Bottom Line', type: 'boolean'},
-	        {name: 'left', dispName: 'Left Line', type: 'boolean'},
-	        {name: 'right', dispName: 'Right Line', type: 'boolean'}
+	        {name: 'top', dispName: 'Top Line', type: 'bool', defVal: 1},
+	        {name: 'bottom', dispName: 'Bottom Line', type: 'bool', defVal: 1},
+	        {name: 'left', dispName: 'Left Line', type: 'bool', defVal: 1},
+	        {name: 'right', dispName: 'Right Line', type: 'bool', defVal: 1}
 	      ];
 		
 		mxCellRenderer.defaultShapes['swimlane'].prototype.customProperties = [
@@ -1234,6 +1234,14 @@
 			{fill: '#dae8fc', stroke: '#6c8ebf'}, {fill: '#d5e8d4', stroke: '#82b366'},
 			{fill: '#ffe6cc', stroke: '#d79b00'}, {fill: '#fff2cc', stroke: '#d6b656'},
 			{fill: '#f8cecc', stroke: '#b85450'}, {fill: '#e1d5e7', stroke: '#9673a6'}],
+			[{fill: '#60a917', stroke: '#60a917'}, {fill: '#008a00', stroke: '#008a00'},
+			{fill: '#1ba1e2', stroke: '#1ba1e2'}, {fill: '#0050ef', stroke: '#0050ef'},
+			{fill: '#6a00ff', stroke: '#6a00ff'}, {fill: '#aa00ff', stroke: '#aa00ff'},
+			{fill: '#d80073', stroke: '#d80073'}, {fill: '#a20025', stroke: '#a20025'}],
+			[{fill: '#e51400', stroke: '#e51400'}, {fill: '#fa6800', stroke: '#fa6800'},
+			{fill: '#f0a30a', stroke: '#f0a30a'}, {fill: '#e3c800', stroke: '#e3c800'},
+			{fill: '#6d8764', stroke: '#6d8764'}, {fill: '#647687', stroke: '#647687'},
+			{fill: '#76608a', stroke: '#76608a'}, {fill: '#a0522d', stroke: '#a0522d'}],
 			[null, {fill: mxConstants.NONE, stroke: '#36393d'},
 			{fill: '#fad7ac', stroke: '#b46504'}, {fill: '#fad9d5', stroke: '#ae4132'},
 			{fill: '#b0e3e6', stroke: '#0e8088'}, {fill: '#b1ddf0', stroke: '#10739e'},
@@ -1280,6 +1288,7 @@
 				handleCustomProp(state.shape.customProperties);
 			}
 			
+			//This currently is not needed but let's keep it in case we needed in the future
 			var userCustomProp = cell.getAttribute('customProperties');
 			
 			if (userCustomProp != null)
@@ -1363,80 +1372,73 @@
 			div.appendChild(btn);
 			mxUtils.br(div);
 			
-			styleFormatPanelAddStyleOps.apply(this, arguments);
+			return styleFormatPanelAddStyleOps.apply(this, arguments);
+		};
+
+		/**
+		 * Create Properties Panel
+		 */
+		StyleFormatPanel.prototype.addProperties = function(div, properties, state)
+		{
+			var that = this;
+			var graph = this.editorUi.editor.graph;
+			var secondLevel = [];
 			
-			mxUtils.br(div);
+			function insertAfter(newElem, curElem)
+			{
+				curElem.parentNode.insertBefore(newElem, curElem.nextSibling);
+			};
 			
-			var btn = mxUtils.button(mxResources.get('addProperty', null, 'Add Property'), mxUtils.bind(this, function(evt)
+			function applyStyleVal(pName, newVal, prop, delIndex)
 			{
-				this.editorUi.showDialog(new AddCustomPropertyDialog(this.editorUi, function(ui, name, type, dispName, enumList)
+				graph.getModel().beginUpdate();
+				try
 				{
-					var property = {name: name, type: type, dispName: dispName}
-					
-					if (type == "enum")
+					if (prop.index != null)
 					{
-						var list = [];
-						for (var i = 0; i < enumList.length; i++)
+						var allVals = [];
+						var curVal = prop.parentRow.nextSibling;
+						
+						while(curVal && curVal.getAttribute('data-pName') == pName)
 						{
-							list.push({val: enumList[i], dispName: enumList[i]});
+							allVals.push(curVal.getAttribute('data-pValue'));
+							curVal = curVal.nextSibling;
 						}
-						property.enumList = list;
-					}
-					
-					var cells = graph.getSelectionCells();
-					
-					for (var i = 0; i < cells.length; i++)
-					{
-						var curProps = cells[i].getAttribute('customProperties');
 						
-						if (curProps)
+						if (prop.index < allVals.length)
 						{
-							try
+							if (delIndex != null)
 							{
-								curProps = JSON.parse(curProps);
+								allVals.splice(delIndex, 1);
 							}
-							catch(e)
+							else
 							{
-								curProps = [];
+								allVals[prop.index] = newVal;
 							}
 						}
 						else
 						{
-							curProps = [];
+							allVals.push(newVal);
+						}
+						
+						if (prop.size != null && allVals.length > prop.size) //trim the array to the specifies size
+						{
+							allVals = allVals.slice(0, prop.size);
 						}
 						
-						curProps.push(property);
+						newVal = allVals.join(',');
 						
-						graph.setAttributeForCell(cells[i], 'customProperties', JSON.stringify(curProps));
+						if (prop.countProperty != null)
+						{
+							graph.setCellStyles(prop.countProperty, allVals.length, graph.getSelectionCells());
+							that.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', [prop.countProperty],
+									'values', [allVals.length], 'cells', graph.getSelectionCells()));
+						}
 					}
-				}).container, 300, 130, true, true);
-			}));
-			
-			btn.setAttribute('title', mxResources.get('addProperty', null, 'Add Property'));
-			btn.style.width = '202px';
-			btn.style.marginTop = '2px';
-			div.appendChild(btn);
-			
-			return div;
-		};
 
-		/**
-		 * Create Properties Panel
-		 */
-		StyleFormatPanel.prototype.addProperties = function(div, properties, state)
-		{
-			var that = this;
-			var graph = this.editorUi.editor.graph;
-
-			function applyStyleVal(pName, newVal)
-			{
-				graph.getModel().beginUpdate();
-				try
-				{
 					graph.setCellStyles(pName, newVal, graph.getSelectionCells());
 					that.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', [pName],
 							'values', [newVal], 'cells', graph.getSelectionCells()));
-
 				}
 				finally
 				{
@@ -1455,21 +1457,21 @@
 				elem.style.zIndex = 5;
 			};
 			
-			function createColorBtn(pName, pValue)
+			function createColorBtn(pName, pValue, prop)
 			{
 				var clrDiv = document.createElement("div");
 				clrDiv.style.width = '32px';
 				clrDiv.style.height = '4px';
 				clrDiv.style.margin = "2px";
 				clrDiv.style.border = "1px solid black";
-				clrDiv.style.backgroundColor = pValue;
+				clrDiv.style.background = !pValue || pValue == "none"? 'url(\'' + Dialog.prototype.noColorImage + '\')' : pValue;
 
 				btn = mxUtils.button('', mxUtils.bind(that, function(evt)
 				{
 					this.editorUi.pickColor(pValue, function(color)
 					{
-						clrDiv.style.backgroundColor = color;
-						applyStyleVal(pName, color);
+						clrDiv.style.background = color == "none"? 'url(\'' + Dialog.prototype.noColorImage + '\')' : color;
+						applyStyleVal(pName, color, prop);
 					});
 					mxEvent.consume(evt);
 				}));
@@ -1482,7 +1484,70 @@
 				return btn;
 			};
 			
-			function createCheckbox(pName, pValue)
+			function createDynArrList(pName, pValue, subType, defVal, countProperty, myRow, flipBkg)
+			{
+				if (pValue != null)
+				{
+					var vals = pValue.split(',');
+					secondLevel.push({name: pName, values: vals, type: subType, defVal: defVal, countProperty: countProperty, parentRow: myRow, isDeletable: true, flipBkg: flipBkg});
+				}
+				
+				btn = mxUtils.button('+', mxUtils.bind(that, function(evt)
+				{
+					var beforeElem = myRow;
+					var index = 0;
+					
+					while (beforeElem.nextSibling != null)
+					{
+						var cur = beforeElem.nextSibling;
+						var elemPName = cur.getAttribute('data-pName');
+
+						if (elemPName == pName)
+						{
+							beforeElem = beforeElem.nextSibling;
+							index++;
+						}
+						else
+						{
+							break;
+						}
+					}
+					
+					var newProp = {type: subType, parentRow: myRow, index: index, isDeletable: true, defVal: defVal, countProperty: countProperty};
+					var arrItem = createPropertyRow(pName, "", newProp, index % 2 == 0, flipBkg);
+					applyStyleVal(pName, defVal, newProp);
+					insertAfter(arrItem, beforeElem);
+					
+					mxEvent.consume(evt);
+				}));
+				
+				btn.style.height = '16px';
+				btn.style.width = '25px';
+				btn.className = 'geColorBtn';
+				
+				return btn;
+			};
+			
+			function createStaticArrList(pName, pValue, subType, defVal, size, myRow, flipBkg)
+			{
+				if (size > 0)
+				{
+					var vals = new Array(size);
+					
+					var curVals = pValue != null? pValue.split(',') : [];
+					
+					for (var i = 0; i < size; i++) 
+					{
+						vals[i] = curVals[i] != null? curVals[i] : (defVal != null? defVal : "");
+					}
+						
+					secondLevel.push({name: pName, values: vals, type: subType, defVal: defVal, parentRow: myRow, flipBkg: flipBkg, size: size});
+				}
+				
+				return document.createElement('div'); //empty cell
+			};
+			
+			function createCheckbox(pName, pValue, prop)
 			{
 				var input = document.createElement('input');
 				input.type = "checkbox";
@@ -1490,32 +1555,53 @@
 				
 				mxEvent.addListener(input, 'change', function() 
 				{
-					applyStyleVal(pName, input.checked? '1' : '0');
+					applyStyleVal(pName, input.checked? '1' : '0', prop);
 				});
 				return input;
 			};
 			
-			function createPropertyRow(pName, pDiplayName, pValue, pType, pEnumList, isOdd)
+			function createPropertyRow(pName, pValue, prop, isOdd, flipBkg)
 			{
+				var pDiplayName = prop.dispName;
+				var pType = prop.type;
 				var row = document.createElement('tr');
-				row.className = "propRow" + (isOdd? "Alt" : "");
+				row.className = "propRow" + (flipBkg? 'Dark' : '') + (isOdd? "Alt" : "");
+				row.setAttribute('data-pName', pName);
+				row.setAttribute('data-pValue', pValue);
+				var rightAlig = false;
+				
+				if (prop.index != null)
+				{
+					row.setAttribute('data-index', prop.index);
+					pDiplayName = (pDiplayName != null? pDiplayName : "") + "[" + prop.index + "]";
+					rightAlig = true;
+				}
+				
 				var td = document.createElement('td');
 				td.className = "propRowCell";
 				td.innerHTML = mxUtils.htmlEntities(mxResources.get(pDiplayName, null, pDiplayName));
+				
+				if (rightAlig)
+				{
+					td.style.textAlign = "right";
+				}
+					
 				row.appendChild(td);
 				td = document.createElement('td');
 				td.className = "propRowCell";
 				
 				if (pType == "color")
 				{
-					td.appendChild(createColorBtn(pName, pValue));
+					td.appendChild(createColorBtn(pName, pValue, prop));
 				}
-				else if (pType == "bool")
+				else if (pType == "bool" || pType == "boolean")
 				{
-					td.appendChild(createCheckbox(pName, pValue));
+					td.appendChild(createCheckbox(pName, pValue, prop));
 				}
 				else if (pType == "enum")
 				{
+					var pEnumList = prop.enumList;
+					
 					for (var i = 0; i < pEnumList.length; i++)
 					{
 						var op = pEnumList[i];
@@ -1553,12 +1639,20 @@
 						mxEvent.addListener(select, 'change', function()
 						{
 							var newVal = mxUtils.htmlEntities(select.value);
-							applyStyleVal(pName, newVal);
+							applyStyleVal(pName, newVal, prop);
 							td.innerHTML = newVal;
 						});
 						select.focus();
 					}));
 				}
+				else if (pType == 'dynamicArr')
+				{
+					td.appendChild(createDynArrList(pName, pValue, prop.subType, prop.subDefVal, prop.countProperty, row, flipBkg));
+				}
+				else if (pType == 'staticArr')
+				{
+					td.appendChild(createStaticArrList(pName, pValue, prop.subType, prop.subDefVal, prop.size, row, flipBkg));
+				}
 				else
 				{
 					td.innerHTML = pValue;
@@ -1573,6 +1667,16 @@
 						{
 							input.type = "number";
 							input.step = pType == "int"? "1" : "any";
+							
+							if (prop.min != null)
+							{
+								input.min = parseFloat(prop.min); 
+							}
+							
+							if (prop.max != null)
+							{
+								input.max = parseFloat(prop.max);
+							}
 						}
 						
 						document.body.appendChild(input);
@@ -1582,8 +1686,20 @@
 						
 						function setInputVal()
 						{
-							var newVal = mxUtils.htmlEntities(pType == "int"? parseInt(input.value) + '' : input.value);
-							applyStyleVal(pName, newVal);
+							var inputVal = input.value;
+							
+							if (prop.min != null && inputVal < prop.min)
+							{
+								inputVal = prop.min;
+							} 
+							else if (prop.max != null && inputVal > prop.max)
+							{
+								inputVal = prop.max;
+							}
+
+							var newVal = mxUtils.htmlEntities((pType == "int"? parseInt(inputVal) : inputVal) + '');
+							
+							applyStyleVal(pName, newVal, prop);
 							td.innerHTML = newVal;
 						}
 						
@@ -1605,6 +1721,24 @@
 						input.focus();
 					}));
 				}
+
+				if (prop.isDeletable)
+				{
+					var delBtn = mxUtils.button('-', mxUtils.bind(that, function(evt)
+					{
+						//delete the node by refreshing the properties
+						applyStyleVal(pName, "", prop, prop.index);
+						
+						mxEvent.consume(evt);
+					}));
+					
+					delBtn.style.height = '16px';
+					delBtn.style.width = '25px';
+					delBtn.style.float = 'right';
+					delBtn.className = 'geColorBtn';
+					td.appendChild(delBtn);
+				}
+				
 				row.appendChild(td);
 				return row;
 			};
@@ -1628,15 +1762,43 @@
 			grid.appendChild(hrow);
 			
 			var isOdd = false;
+			var flipBkg = false;
+			
 			for (var key in properties)
 			{
-				var pValue = mxUtils.htmlEntities(state.style[key]);
 				var prop = properties[key];
+				var pValue = state.style[key] != null? mxUtils.htmlEntities(state.style[key] + '') : prop.defVal; //or undefined if defVal is undefined
 
-				grid.appendChild(createPropertyRow(key, prop.dispName, pValue, prop.type, prop.enumList, isOdd));
+				if (prop.type == 'separator')
+				{
+					flipBkg = !flipBkg;
+					continue;
+				}
+				else if (prop.type == 'staticArr') //if dynamic values are needed, a more elegant technique is needed to replace such values
+				{
+					prop.size = parseInt(state.style[prop.sizeProperty]) || 0;
+				}
+				
+				grid.appendChild(createPropertyRow(key, pValue, prop, isOdd, flipBkg));
+				
 				isOdd = !isOdd;
 			}
 			
+			for (var i = 0; i < secondLevel.length; i++)
+			{
+				var prop = secondLevel[i];
+				var insertElem = prop.parentRow;
+					
+				for (var j = 0; j < prop.values.length; j++)
+				{
+					//mxUtils.clone failed because of the HTM element, so manual cloning is used
+					var iProp = {type: prop.type, parentRow: prop.parentRow, isDeletable: prop.isDeletable, index: j, defVal: prop.defVal, countProperty: prop.countProperty, size: prop.size};
+					var arrItem = createPropertyRow(prop.name, prop.values[j], iProp, j % 2 == 0, prop.flipBkg);
+					insertAfter(arrItem, insertElem);
+					insertElem = arrItem;
+				}
+			}
+			
 			div.appendChild(grid);
 			
 			return div;

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

@@ -1464,9 +1464,7 @@
 				this.addMenuItems(menu, ['exportPdf'], parent);
 			}
 
-			// LATER: Fix namespace prefix (NS1, NS2..) in XML
-			// serializer for VSDX export in IE11 and earlier
-			if (!mxClient.IS_IE11 && !mxClient.IS_IE && (typeof(VsdxExport) !== 'undefined' || !editorUi.isOffline()))
+			if (!mxClient.IS_IE && (typeof(VsdxExport) !== 'undefined' || !editorUi.isOffline()))
 			{
 				this.addMenuItems(menu, ['exportVsdx'], parent);
 			}
@@ -2553,7 +2551,7 @@
 				this.addMenuItems(menu, ['showStartScreen'], parent);
 			}
 
-			if (!editorUi.isOfflineApp() && urlParams['embed'] != '1' && isLocalStorage)
+			if (!editorUi.isOfflineApp() && isLocalStorage)
 			{
 				this.addMenuItem(menu, 'plugins', parent);
 			}

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

@@ -266,7 +266,6 @@ EditorUi.initMinimalTheme = function()
     mxWindow.prototype.minimizeImage = Graph.createSvgImage(14, 10, '<path d="M 3 7 L 7 3 L 11 7" stroke="#C0C0C0" stroke-width="2" fill="#ffffff"/>').src;
     mxWindow.prototype.normalizeImage = Graph.createSvgImage(14, 10, '<path d="M 3 3 L 7 7 L 11 3" stroke="#C0C0C0" stroke-width="2" fill="#ffffff"/>').src;
     mxConstraintHandler.prototype.pointImage = Graph.createSvgImage(5, 5, '<path d="m 0 0 L 5 5 M 0 5 L 5 0" stroke="' + fill + '"/>');
-    HoverIcons.prototype.arrowSpacing = 0;
     mxOutline.prototype.sizerImage = null;
     
     mxConstants.VERTEX_SELECTION_COLOR = '#C0C0C0';
@@ -278,7 +277,6 @@ EditorUi.initMinimalTheme = function()
 
     mxConstants.HIGHLIGHT_STROKEWIDTH = 5;
     mxConstants.HIGHLIGHT_OPACITY = 35;
-    mxConstants.HIGHLIGHT_SIZE = 5;
     mxConstants.OUTLINE_COLOR = '#29b6f2';
     mxConstants.OUTLINE_HANDLE_FILLCOLOR = '#29b6f2';
     mxConstants.OUTLINE_HANDLE_STROKECOLOR = '#fff';
@@ -846,7 +844,7 @@ EditorUi.initMinimalTheme = function()
 				ui.menus.addMenuItems(menu, ['-', 'search', 'scratchpad', '-', 'showStartScreen'], parent);
 			}
 
-			if (!ui.isOfflineApp() && urlParams['embed'] != '1' && isLocalStorage)
+			if (!ui.isOfflineApp() && isLocalStorage)
 			{
 				menu.addSeparator(parent);
 	        	ui.menus.addMenuItem(menu, 'plugins', parent);

src/main/webapp/js/diagramly/vsdx/VsdxExport.js

@@ -600,9 +600,8 @@ function VsdxExport(editorUi)
 
         var root = createElt(xmlDoc, that.XMLNS, "PageContents");
         
-        // LATER: Fix NS1, NS2... namespaces in IE11-
-        root.setAttribute("xmlns:r", that.XMLNS_R);
-        root.setAttribute("xml:space", that.XML_SPACE);
+        root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', that.XMLNS);
+        root.setAttributeNS('http://www.w3.org/2000/xmlns/', "xmlns:r", that.XMLNS_R);
         
         var shapes = createElt(xmlDoc, that.XMLNS, "Shapes");
         root.appendChild(shapes);
@@ -689,8 +688,8 @@ function VsdxExport(editorUi)
 		var pagesRelsXmlDoc = mxUtils.createXmlDocument();
 	
 		var pagesRoot = createElt(pagesXmlDoc, that.XMLNS, "Pages");
-		pagesRoot.setAttribute("xmlns:r", that.XMLNS_R);
-		pagesRoot.setAttribute("xml:space", that.XML_SPACE);
+		pagesRoot.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', that.XMLNS);
+		pagesRoot.setAttributeNS('http://www.w3.org/2000/xmlns/', "xmlns:r", that.XMLNS_R);
 
 		var pagesRelsRoot = createElt(pagesRelsXmlDoc, that.RELS_XMLNS, "Relationships");
 		
@@ -713,7 +712,7 @@ function VsdxExport(editorUi)
 			pageSheet.appendChild(createCellElem("DrawingScale", 1, pagesXmlDoc));
 		
 			var relE = createElt(pagesXmlDoc, that.XMLNS,"Rel");
-			relE.setAttribute("r:id", "rId" + i);
+			relE.setAttributeNS(that.XMLNS_R, "r:id", "rId" + i);
 
 			//Layer (not needed!, it works without it)
 			var layerSec = createElt(pagesXmlDoc, that.XMLNS, "Section");

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

@@ -4584,7 +4584,7 @@ if (typeof mxVertexHandler != 'undefined')
 		mxConstants.LABEL_HANDLE_FILLCOLOR = '#cee7ff';
 		mxConstants.GUIDE_COLOR = '#0088cf';
 		mxConstants.HIGHLIGHT_OPACITY = 30;
-		mxConstants.HIGHLIGHT_SIZE = 8;
+	    mxConstants.HIGHLIGHT_SIZE = 5;
 		
 		// Enables snapping to off-grid terminals for edge waypoints
 		mxEdgeHandler.prototype.snapToTerminals = true;

src/main/webapp/plugins/flow.js

@@ -0,0 +1,104 @@
+/**
+ * Flow plugin.
+ */
+Draw.loadPlugin(function(ui)
+{
+	// Adds resource for action
+	mxResources.parse('toggleFlow=Toggle Flow...');
+	
+	// Max number of edges per page
+	var pageSize = 20;
+
+	var uiCreatePopupMenu = ui.menus.createPopupMenu;
+	ui.menus.createPopupMenu = function(menu, cell, evt)
+	{
+		uiCreatePopupMenu.apply(this, arguments);
+		
+		var graph = ui.editor.graph;
+		
+		if (graph.model.isEdge(graph.getSelectionCell()))
+		{
+			this.addMenuItems(menu, ['-', 'toggleFlow'], null, evt);
+		}
+	};
+
+	//
+	// Main function
+	//
+	function toggleFlow(cells)
+	{
+		for (var i = 0; i < cells.length; i++)
+		{
+			if (ui.editor.graph.model.isEdge(cells[i]))
+			{
+				var state = ui.editor.graph.view.getState(cells[i]);
+				var paths = state.shape.node.getElementsByTagName('path');
+				
+				if (paths.length > 1)
+				{
+					if (paths[1].getAttribute('class') == 'mxEdgeFlow')
+					{
+						paths[1].removeAttribute('class');
+		
+						if (mxUtils.getValue(state.style, mxConstants.STYLE_DASHED, '0') != '1')
+						{
+							paths[1].removeAttribute('stroke-dasharray');
+						}
+					}
+					else
+					{
+						paths[1].setAttribute('class', 'mxEdgeFlow');
+		
+						if (mxUtils.getValue(state.style, mxConstants.STYLE_DASHED, '0') != '1')
+						{
+							paths[1].setAttribute('stroke-dasharray', '8');
+						}
+					}
+				}
+			}
+		}
+	};
+	
+	// Adds action
+	ui.actions.addAction('toggleFlow', function()
+	{
+		var cell = ui.editor.graph.getSelectionCell();
+		
+		if (ui.editor.graph.model.isEdge(cell))
+		{
+			toggleFlow(ui.editor.graph.getSelectionCells());
+		}
+	});
+	
+	// Click handler for chromeless mode
+	if (ui.editor.isChromelessView())
+	{
+		ui.editor.graph.click = function(me)
+		{
+			if (ui.editor.graph.model.isEdge(me.getCell()))
+			{
+				toggleFlow(me.getCell());
+			}
+		};
+	}
+	
+	try
+	{
+		var style = document.createElement('style')
+		style.type = 'text/css';
+		style.innerHTML = ['.mxEdgeFlow {',
+			  'animation: mxEdgeFlow 0.5s linear;',
+			  'animation-iteration-count: infinite;',
+			'}',
+			'@keyframes mxEdgeFlow {',
+			  'to {',
+			    'stroke-dashoffset: -16;',
+			  '}',
+			'}'].join('\n');
+		document.getElementsByTagName('head')[0].appendChild(style);
+	}
+	catch (e)
+	{
+		// ignore
+	}
+});

src/main/webapp/shapes/bpmn/mxBpmnShape2.js

@@ -38,17 +38,6 @@ function mxBpmnShape(bounds, fill, stroke, strokewidth)
  */
 mxUtils.extend(mxBpmnShape, mxShape);
 
-mxBpmnShape.prototype.customProperties = [
-	{name: 'fillColor', dispName: 'Fill Color', type: 'color'},
-	{name: 'rounded', dispName: 'Rounded', type: 'bool'},
-	{name: 'strokeWidth', dispName: 'Stroke Width', type: 'int'},
-	{name: 'floatVal', dispName: 'Float Value', type: 'float'},
-	{name: 'fontFamily', dispName: 'Font Family', type: 'string'},
-	{name: 'verticalAlign', dispName: 'Vertical Align', type: 'enum', 
-		enumList: [{val: 'middle', dispName: 'Middle'}, {val: 'bottom', dispName: 'Bottom'}, {val: 'top', dispName: 'Top'}]
-	},
-];
-
 mxBpmnShape.prototype.eventTypeEnum = { 
 		START_STANDARD : 'standard', 
 		EVENT_SP_INT : 'eventInt', 

src/main/webapp/styles/grapheditor.css

@@ -721,6 +721,10 @@ html td.mxWindowTitle {
 	border: 1px solid #e9e9e9;	
 }
 
+.propRowDark {
+	border: 1px solid #4472C4;
+}
+
 .propHeader>.propHeaderCell {
     border-top: 0;
     border-bottom: 0;
@@ -750,10 +754,23 @@ html td.mxWindowTitle {
     background: #fff;
 }
 
-.propRowAtl>.propRowCell {
+.propRowAlt>.propRowCell {
     background: #fcfcfc;
 }
 
+.propRowDark>.propRowCell {
+    background: #fff;
+    color: #305496;
+    font-weight: bold;
+}
+
+.propRowDarkAlt>.propRowCell {
+    background: #D9E1F2;
+    color: #305496;
+    font-weight: bold;
+}
+
 .propEditor input:invalid {
   border: 1px solid red;
 }
+