7.8.3 release

ChangeLog

@@ -1,3 +1,11 @@
+04-DEC-2017: 7.8.3
+
+- Improves handling of fontsize in format panel
+- Hides link hint for edges while moving points
+- Improves loop routing with control points
+- Adds remove option for links
+- Uses mxGraph 3.8.1 beta 2
+
 03-DEC-2017: 7.8.2
 
 - Adds select descendants for cells with outgoing edges

VERSION

@@ -1 +1 @@
-7.8.2
+7.8.3

etc/mxgraph/mxClient.js

@@ -1021,7 +1021,7 @@ mxGraphView.prototype.getFixedTerminalPoint=function(a,b,c,d){var e=null;null!=d
 mxGraphView.prototype.updateBoundsFromStencil=function(a){var b=null;if(null!=a&&null!=a.shape&&null!=a.shape.stencil&&"fixed"==a.shape.stencil.aspect){var b=mxRectangle.fromRectangle(a),c=a.shape.stencil.computeAspect(a.style,a.x,a.y,a.width,a.height);a.setRect(c.x,c.y,a.shape.stencil.w0*c.width,a.shape.stencil.h0*c.height)}return b};
 mxGraphView.prototype.updatePoints=function(a,b,c,d){if(null!=a){var e=[];e.push(a.absolutePoints[0]);var f=this.getEdgeStyle(a,b,c,d);if(null!=f){c=this.getTerminalPort(a,c,!0);d=this.getTerminalPort(a,d,!1);var g=this.updateBoundsFromStencil(c),k=this.updateBoundsFromStencil(d);f(a,c,d,b,e);null!=g&&c.setRect(g.x,g.y,g.width,g.height);null!=k&&d.setRect(k.x,k.y,k.width,k.height)}else if(null!=b)for(f=0;f<b.length;f++)null!=b[f]&&(c=mxUtils.clone(b[f]),e.push(this.transformControlPoint(a,c)));b=
 a.absolutePoints;e.push(b[b.length-1]);a.absolutePoints=e}};mxGraphView.prototype.transformControlPoint=function(a,b){if(null!=a&&null!=b){var c=a.origin;return new mxPoint(this.scale*(b.x+this.translate.x+c.x),this.scale*(b.y+this.translate.y+c.y))}return null};
-mxGraphView.prototype.isLoopStyleEnabled=function(a,b,c,d){b=this.graph.getConnectionConstraint(a,c,!0);var e=this.graph.getConnectionConstraint(a,d,!1);return mxUtils.getValue(a.style,mxConstants.STYLE_ORTHOGONAL_LOOP,!1)&&(null!=b&&null!=b.point||null!=e&&null!=e.point)?!1:null!=c&&c==d};
+mxGraphView.prototype.isLoopStyleEnabled=function(a,b,c,d){var e=this.graph.getConnectionConstraint(a,c,!0),f=this.graph.getConnectionConstraint(a,d,!1);return!(null==b||2>b.length)||mxUtils.getValue(a.style,mxConstants.STYLE_ORTHOGONAL_LOOP,!1)&&(null!=e&&null!=e.point||null!=f&&null!=f.point)?!1:null!=c&&c==d};
 mxGraphView.prototype.getEdgeStyle=function(a,b,c,d){a=this.isLoopStyleEnabled(a,b,c,d)?mxUtils.getValue(a.style,mxConstants.STYLE_LOOP,this.graph.defaultLoopStyle):mxUtils.getValue(a.style,mxConstants.STYLE_NOEDGESTYLE,!1)?null:a.style[mxConstants.STYLE_EDGE];"string"==typeof a&&(b=mxStyleRegistry.getValue(a),null==b&&this.isAllowEval()&&(b=mxUtils.eval(a)),a=b);return"function"==typeof a?a:null};
 mxGraphView.prototype.updateFloatingTerminalPoints=function(a,b,c){var d=a.absolutePoints,e=d[0];null==d[d.length-1]&&null!=c&&this.updateFloatingTerminalPoint(a,c,b,!1);null==e&&null!=b&&this.updateFloatingTerminalPoint(a,b,c,!0)};mxGraphView.prototype.updateFloatingTerminalPoint=function(a,b,c,d){a.setAbsoluteTerminalPoint(this.getFloatingTerminalPoint(a,b,c,d),d)};
 mxGraphView.prototype.getFloatingTerminalPoint=function(a,b,c,d){b=this.getTerminalPort(a,b,d);var e=this.getNextPoint(a,c,d),f=this.graph.isOrthogonal(a);c=mxUtils.toRadians(Number(b.style[mxConstants.STYLE_ROTATION]||"0"));var g=new mxPoint(b.getCenterX(),b.getCenterY());if(0!=c)var k=Math.cos(-c),l=Math.sin(-c),e=mxUtils.getRotatedPoint(e,k,l,g);k=parseFloat(a.style[mxConstants.STYLE_PERIMETER_SPACING]||0);k+=parseFloat(a.style[d?mxConstants.STYLE_SOURCE_PERIMETER_SPACING:mxConstants.STYLE_TARGET_PERIMETER_SPACING]||

war/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 12/03/2017 03:46 PM
+# 12/05/2017 12:09 AM
 
 app.html
 index.html?offline=1

war/js/diagramly/EditorUi.js

@@ -6066,6 +6066,9 @@
 									    					}
 											    		}));
 								    				}), resizeImages, maxSize, resampleThreshold);
+								    			}), mxUtils.bind(this, function()
+								    			{
+								    				this.handleError({message: mxResources.get('invalidOrMissingFile')});
 								    			}));
 					    					}
 					    				}

war/js/mxgraph/Actions.js

@@ -197,11 +197,11 @@ Actions.prototype.init = function()
 
 	// Navigation actions
 	this.addAction('home', function() { graph.home(); }, null, null, 'Home');
-	this.addAction('exitGroup', function() { graph.exitGroup(); }, null, null, Editor.ctrlKey + '+Shift+Page Up');
-	this.addAction('enterGroup', function() { graph.enterGroup(); }, null, null, Editor.ctrlKey + '+Shift+Page Down');
-	this.addAction('expand', function() { graph.foldCells(false); }, null, null, Editor.ctrlKey + '+Page Down');
-	this.addAction('collapse', function() { graph.foldCells(true); }, null, null, Editor.ctrlKey + '+Page Up');
-
+	this.addAction('exitGroup', function() { graph.exitGroup(); }, null, null, Editor.ctrlKey + '+Shift+Home');
+	this.addAction('enterGroup', function() { graph.enterGroup(); }, null, null, Editor.ctrlKey + '+Shift+End');
+	this.addAction('collapse', function() { graph.foldCells(true); }, null, null, Editor.ctrlKey + '+Home');
+	this.addAction('expand', function() { graph.foldCells(false); }, null, null, Editor.ctrlKey + '+End');
+	
 	// Arrange actions
 	this.addAction('toFront', function() { graph.orderCells(false); }, null, null, Editor.ctrlKey + '+Shift+F');
 	this.addAction('toBack', function() { graph.orderCells(true); }, null, null, Editor.ctrlKey + '+Shift+B');

war/js/mxgraph/EditorUi.js

@@ -499,13 +499,15 @@ EditorUi = function(editor, container, lightbox)
 	// Implements a global current style for edges and vertices that is applied to new cells
 	var insertHandler = function(cells, asText)
 	{
-		graph.getModel().beginUpdate();
+		var model = graph.getModel();
+		
+		model.beginUpdate();
 		try
 		{
 			// Applies only basic text styles
 			if (asText)
 			{
-				var edge = graph.getModel().isEdge(cell);
+				var edge = model.isEdge(cell);
 				var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle;
 				var textStyles = ['fontSize', 'fontFamily', 'fontColor'];
 				
@@ -526,7 +528,7 @@ EditorUi = function(editor, container, lightbox)
 					var cell = cells[i];
 
 					// Removes styles defined in the cell style from the styles to be applied
-					var cellStyle = graph.getModel().getStyle(cell);
+					var cellStyle = model.getStyle(cell);
 					var tokens = (cellStyle != null) ? cellStyle.split(';') : [];
 					var appliedStyles = styles.slice();
 					
@@ -567,8 +569,9 @@ EditorUi = function(editor, container, lightbox)
 					}
 	
 					// Applies the current style to the cell
-					var edge = graph.getModel().isEdge(cell);
+					var edge = model.isEdge(cell);
 					var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle;
+					var newStyle = model.getStyle(cell);
 					
 					for (var j = 0; j < appliedStyles.length; j++)
 					{
@@ -580,16 +583,18 @@ EditorUi = function(editor, container, lightbox)
 							// Special case: Connect styles are not applied here but in the connection handler
 							if (!edge || mxUtils.indexOf(connectStyles, key) < 0)
 							{
-								graph.setCellStyles(key, styleValue, [cell]);
+								newStyle = mxUtils.setStyle(newStyle, key, styleValue);
 							}
 						}
 					}
+					
+					model.setStyle(cell, newStyle);
 				}
 			}
 		}
 		finally
 		{
-			graph.getModel().endUpdate();
+			model.endUpdate();
 		}
 	};
 

war/js/mxgraph/Format.js

@@ -2528,30 +2528,88 @@ TextFormatPanel.prototype.addFont = function(container)
 	var pendingFontSize = null;
 
 	var inputUpdate = this.installInputHandler(input, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize, 1, 999, ' pt',
-	function(fontsize)
+	function(fontSize)
 	{
-		pendingFontSize = fontsize;
-
-		// Workaround for can't set font size in px is to change font size afterwards
-		document.execCommand('fontSize', false, '4');
-		var elts = graph.cellEditor.textarea.getElementsByTagName('font');
+		var handled = false;
 		
-		for (var i = 0; i < elts.length; i++)
+		// KNOWN: Fixes font size issues but bypasses undo
+		if (window.getSelection)
 		{
-			if (elts[i].getAttribute('size') == '4')
+			input.value = fontSize + ' pt';
+			var selection = window.getSelection();
+			var container = selection.getRangeAt(0).commonAncestorContainer;
+			
+			if (container.nodeType == mxConstants.NODETYPE_ELEMENT)
 			{
-				elts[i].removeAttribute('size');
-				elts[i].style.fontSize = pendingFontSize + 'px';
-	
-				// Overrides fontSize in input with the one just assigned as a workaround
-				// for potential fontSize values of parent elements that don't match
-				window.setTimeout(function()
-				{
-					input.value = pendingFontSize + ' pt';
-					pendingFontSize = null;
-				}, 0);
+				var elts = container.getElementsByTagName('*');
 				
-				break;
+				function updateSize(elt)
+				{
+					if (elt.nodeName == 'FONT')
+					{
+						elt.removeAttribute('size');
+						elt.style.fontSize = fontSize + 'px';
+					}
+					else
+					{
+						var css = mxUtils.getCurrentStyle(elt);
+						
+						if (css.fontSize != fontSize + 'px')
+						{
+							if (mxUtils.getCurrentStyle(elt.parentNode).fontSize != fontSize + 'px')
+							{
+								elt.style.fontSize = fontSize + 'px';
+							}
+							else
+							{
+								elt.style.fontSize = '';
+							}
+						}
+					}
+				};
+		
+				if (container != graph.cellEditor.textarea)
+				{
+					updateSize(container);
+					handled = true;
+				}
+				
+				for (var i = 0; i < elts.length; i++)
+				{
+					if (selection.containsNode(elts[i], true))
+					{
+						updateSize(elts[i]);
+						handled = true;
+					}
+				}
+			}
+		}
+		
+		if (!handled)
+		{
+			pendingFontSize = fontSize;
+			
+			// Workaround for can't set font size in px is to change font size afterwards
+			document.execCommand('fontSize', false, '4');
+			var elts = graph.cellEditor.textarea.getElementsByTagName('font');
+			
+			for (var i = 0; i < elts.length; i++)
+			{
+				if (elts[i].getAttribute('size') == '4')
+				{
+					elts[i].removeAttribute('size');
+					elts[i].style.fontSize = pendingFontSize + 'px';
+		
+					// Overrides fontSize in input with the one just assigned as a workaround
+					// for potential fontSize values of parent elements that don't match
+					window.setTimeout(function()
+					{
+						input.value = pendingFontSize + ' pt';
+						pendingFontSize = null;
+					}, 0);
+					
+					break;
+				}
 			}
 		}
 	}, true);
@@ -3182,14 +3240,17 @@ TextFormatPanel.prototype.addFont = function(container)
 				{
 					var selectedElement = graph.getSelectedElement();
 					var node = selectedElement;
-					
+
 					while (node != null && node.nodeType != mxConstants.NODETYPE_ELEMENT)
 					{
 						node = node.parentNode;
 					}
-					
+
 					if (node != null)
 					{
+						// Finds common font size
+						var elts = node.getElementsByTagName('*');
+
 						// Workaround for commonAncestor on range in IE11 returning parent of common ancestor
 						if (node == graph.cellEditor.textarea && graph.cellEditor.textarea.children.length == 1 &&
 							graph.cellEditor.textarea.firstChild.nodeType == mxConstants.NODETYPE_ELEMENT)
@@ -3197,7 +3258,50 @@ TextFormatPanel.prototype.addFont = function(container)
 							node = graph.cellEditor.textarea.firstChild;
 						}
 						
+						function getRelativeLineHeight(fontSize, lineHeight, elt)
+						{
+							if (elt.style.lineHeight.substring(elt.style.lineHeight.length - 1) == '%')
+							{
+								return parseInt(elt.style.lineHeight) / 100;
+							}
+							else
+							{
+								return (lineHeight.substring(css.lineHeight.length - 2) == 'px') ?
+										parseFloat(lineHeight) / fontSize : parseInt(lineHeight);
+							}
+						};
+						
+						//var realCss = mxUtils.getCurrentStyle(selectedElement);
 						var css = mxUtils.getCurrentStyle(node);
+						var fontSize = parseFloat(css.fontSize);
+						var lineHeight = getRelativeLineHeight(fontSize, css.lineHeight, node);
+
+						if (elts.length > 0 && window.getSelection)
+						{
+							var selection = window.getSelection();
+							
+							if (selection.containsNode(elts[0], true))
+							{
+								var temp = mxUtils.getCurrentStyle(elts[0]);
+								fontSize = parseFloat(temp.fontSize);
+								lineHeight = getRelativeLineHeight(fontSize, temp.lineHeight, elts[0]);
+	
+								for (var i = 0; i < elts.length; i++)
+								{
+									if (selection.containsNode(elts[i], true))
+									{
+										temp = mxUtils.getCurrentStyle(elts[i]);
+										fontSize = Math.max(parseFloat(temp.fontSize), fontSize);
+										var lh = getRelativeLineHeight(fontSize, temp.lineHeight, elts[i]);
+										
+										if (lh != lineHeight || isNaN(lh))
+										{
+											lineHeight = '';
+										}
+									}
+								}
+							}
+						}
 						
 						if (css != null)
 						{
@@ -3227,23 +3331,19 @@ TextFormatPanel.prototype.addFont = function(container)
 								}
 								else
 								{
-									input.value = parseFloat(css.fontSize) + ' pt';
+									input.value = (isNaN(fontSize)) ? '' : fontSize + 'px';
 								}
 								
-								var tmp = node.style.lineHeight || css.lineHeight;
-								var lh = parseFloat(tmp);
+								var lh = parseFloat(lineHeight);
 								
-								if (tmp.substring(tmp.length - 2) == 'px')
+								if (!isNaN(lh))
 								{
-									lh = lh / parseFloat(css.fontSize);
+									lineHeightInput.value = Math.round(lh * 100) + ' %';
 								}
-								
-								if (tmp.substring(tmp.length - 1) != '%')
+								else
 								{
-									lh *= 100; 
+									lineHeightInput.value = '100 %';
 								}
-								
-								lineHeightInput.value = lh + ' %';
 							}
 							
 							// Converts rgb(r,g,b) values

war/js/mxgraph/Graph.js

@@ -6789,24 +6789,16 @@ if (typeof mxVertexHandler != 'undefined')
 			this.hint.style.left = Math.round(me.getGraphX() - this.hint.clientWidth / 2) + 'px';
 			this.hint.style.top = (Math.max(me.getGraphY(), point.y) + this.state.view.graph.gridSize) + 'px';
 			
-			if (this.hideEdgeHintThread != null)
+			if (this.linkHint != null)
 			{
-				window.clearTimeout(this.hideEdgeHintThread);
+				this.linkHint.style.display = 'none';
 			}
-			
-			this.hideEdgeHintThread = window.setTimeout(mxUtils.bind(this, function()
-			{
-				if (this.hint != null)
-				{
-					this.hint.style.visibility = 'hidden';
-				}
-			}), 500);
 		};
 	
 		/**
 		 * Updates the hint for the current operation.
 		 */
-		mxEdgeHandler.prototype.removeHint = mxGraphHandler.prototype.removeHint;
+		mxEdgeHandler.prototype.removeHint = mxVertexHandler.prototype.removeHint;
 	
 		/**
 		 * Defines the handles for the UI. Uses data-URIs to speed-up loading time where supported.
@@ -7463,6 +7455,22 @@ if (typeof mxVertexHandler != 'undefined')
 							this.graph.editLink();
 							mxEvent.consume(evt);
 						}));
+						
+						var removeLink = document.createElement('img');
+						removeLink.setAttribute('src', Dialog.prototype.clearImage);
+						removeLink.setAttribute('title', mxResources.get('removeIt', [mxResources.get('link')]));
+						removeLink.setAttribute('width', '13');
+						removeLink.setAttribute('height', '10');
+						removeLink.style.marginLeft = '4px';
+						removeLink.style.marginBottom = '-1px';
+						removeLink.style.cursor = 'pointer';
+						this.linkHint.appendChild(removeLink);
+						
+						mxEvent.addListener(removeLink, 'click', mxUtils.bind(this, function(evt)
+						{
+							this.graph.setLinkForCell(this.state.cell, null);
+							mxEvent.consume(evt);
+						}));
 					}
 				}