21.8.2 release

ChangeLog

@@ -1,3 +1,15 @@
+24-SEP-2023: 21.8.2
+
+- Confirm escape key for insert layout [drawio-3880]
+- Scrolls cell to visible after remove from group
+
+22-SEP-2023: 21.8.1
+
+- Attempt to fix NPE in GraphViewer
+- [conf cloud] Fixed custom templates loading in the editor [DID-9482]
+- [conf cloud] Prevent calling theme callback multiple times for the same event [DID-9505]
+- Fixes independent drag of cell with part=1 [DS-950]
+
 20-SEP-2023: 21.8.0
 
 - Ports Cache servlet to AWS Lambda [TI-11]

VERSION

@@ -1 +1 @@
-21.8.0
+21.8.2

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

@@ -1478,12 +1478,6 @@ var CreateGraphDialog = function(editorUi, title, type)
 		{
 			editorUi.confirm(mxResources.get('areYouSure'), function()
 			{
-				if (container.parentNode != null)
-				{
-					graph.destroy();
-					container.parentNode.removeChild(container);
-				}
-
 				editorUi.hideDialog();
 			});
 		})
@@ -1516,12 +1510,6 @@ var CreateGraphDialog = function(editorUi, title, type)
 				editorUi.editor.graph.setSelectionCells(cells);
 			}
 
-			if (container.parentNode != null)
-			{
-				graph.destroy();
-				container.parentNode.removeChild(container);
-			}
-
 			editorUi.hideDialog();
 		});
 
@@ -1532,6 +1520,8 @@ var CreateGraphDialog = function(editorUi, title, type)
 		{
 			div.appendChild(cancelBtn);
 		}
+
+		this.graph = graph;
 	};
 
 	this.container = div;

src/main/webapp/js/diagramly/GraphViewer.js

@@ -201,7 +201,6 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
 				if (this.responsive && this.graph.dialect == mxConstants.DIALECT_SVG)
 				{
 					var root = this.graph.view.getDrawPane().ownerSVGElement;
-					var canvas = this.graph.view.getCanvas();
 
 					if (this.graphConfig.border != null)
 					{
@@ -301,7 +300,7 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
 
 					if (diagrams.length > 0)
 					{
-						//Find the page index if the pageId is provided
+						// Finds index for given page ID
 						if (this.pageId != null)
 						{
 							for (var i = 0; i < diagrams.length; i++)
@@ -315,8 +314,7 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
 						}
 
 						var graphGetGlobalVariable = this.graph.getGlobalVariable;
-						var self = this;
-
+
 						this.graph.getGlobalVariable = function(name)
 						{
 							var diagram = diagrams[self.currentPage];

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

@@ -3642,7 +3642,30 @@
 					else
 					{
 						var dlg = new CreateGraphDialog(editorUi, title, method);
-						editorUi.showDialog(dlg.container, 620, 420, true, false);
+						editorUi.showDialog(dlg.container, 620, 420, true, false, function(cancel, isEsc)
+						{
+							if (isEsc)
+							{
+								editorUi.confirm(mxResources.get('areYouSure'), function()
+								{
+									editorUi.hideDialog();
+								});
+
+								return false;
+							}
+							else if (dlg.graph != null)
+							{
+								if (dlg.graph.container.parentNode != null)
+								{
+									dlg.graph.container.parentNode.
+										removeChild(dlg.graph.container);
+								}
+
+								dlg.graph.destroy();
+								dlg.graph = null;
+							}
+						});
+
 						// Executed after dialog is added to dom
 						dlg.init();
 					}

src/main/webapp/js/grapheditor/Actions.js

@@ -690,6 +690,11 @@ Actions.prototype.init = function()
 		    	}
 
 				graph.removeCellsFromParent(temp);
+
+				if (temp.length > 0)
+				{
+					graph.scrollCellToVisible(temp[0]);
+				}
 			}
 		}
 	});

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

@@ -5520,14 +5520,21 @@ EditorUi.prototype.hideDialog = function(cancel, isEsc, matchContainer)
 		}
 
 		var dlg = this.dialogs.pop();
+
+		// Temporary override to restore order of dialogs
+		// if dialogs are added in the close callback
+		var temp = this.dialogs.slice();
+		this.dialogs = [];
 
 		if (dlg.close(cancel, isEsc) == false) 
 		{
-			//add the dialog back if dialog closing is cancelled
-			this.dialogs.push(dlg);
+			// Adds the dialog back if dialog closing is cancelled
+			this.dialogs = temp.concat(dlg).concat(this.dialogs);
+
 			return;
 		}
-
+
+		this.dialogs = temp;
 		this.dialog = (this.dialogs.length > 0) ? this.dialogs[this.dialogs.length - 1] : null;
 		this.editor.fireEvent(new mxEventObject('hideDialog'));
 

src/main/webapp/js/grapheditor/Graph.js

@@ -2816,7 +2816,6 @@ Graph.prototype.init = function(container)
 		};
 	}
 
-
 	// Adds or updates CSS for flowAnimation style
 	this.addListener(mxEvent.SIZE, mxUtils.bind(this, function(sender, evt)
 	{
@@ -6215,15 +6214,17 @@ Graph.prototype.getFlowAnimationStyle = function()
 /**
  * Adds rack child layout style.
  */
-Graph.prototype.getFlowAnimationStyleCss = function(id)
+Graph.prototype.getFlowAnimationStyleCss = function(id, scale)
 {
+	scale = (scale != null) ? scale : this.view.scale;
+
 	return '.' + id + ' {\n' +
 	  'animation: ' + id + ' 0.5s linear;\n' +
 	  'animation-iteration-count: infinite;\n' +
 	'}\n' +
 	'@keyframes ' + id + ' {\n' +
 	  'to {\n' +
-	    'stroke-dashoffset: ' + (this.view.scale * -16) + ';\n' +
+	    'stroke-dashoffset: ' + (scale * -16) + ';\n' +
 	  '}\n' +
 	'}';
 };
@@ -11452,7 +11453,6 @@ if (typeof mxVertexHandler !== 'undefined')
 				svgCanvas.textEnabled = showText;
 
 				imgExport = (imgExport != null) ? imgExport : this.createSvgImageExport();
-				var imgExportDrawCellState = imgExport.drawCellState;
 
 				// Ignores custom links
 				var imgExportGetLinkForCellState = imgExport.getLinkForCellState;
@@ -11468,8 +11468,10 @@ if (typeof mxVertexHandler !== 'undefined')
 				{
 					return state.view.graph.getLinkTargetForCell(state.cell);
 				};
-
-				// Implements ignoreSelection flag
+
+				// Implements ignoreSelection flag and flow animation
+				var imgExportDrawCellState = imgExport.drawCellState;
+
 				imgExport.drawCellState = function(state, canvas)
 				{
 					var graph = state.view.graph;
@@ -11485,13 +11487,53 @@ if (typeof mxVertexHandler !== 'undefined')
 							graph.isCellSelected(parent);
 						parent = graph.model.getParent(parent);
 					}
-
+
+					// Adds flow animation
+					var prevStroke = canvas.stroke;
+
+					canvas.stroke = function()
+					{
+						if (this.root != null && this.node != null &&
+							this.node.nodeName == 'path' &&
+							graph.enableFlowAnimation &&
+							graph.model.isEdge(state.cell) &&
+							mxUtils.getValue(state.style, 'flowAnimation', '0') == '1')
+						{
+							if (imgExport.flowAnimationStyle == null)
+							{
+								var id = 'ge-export-svg-flow-animation';
+								var svgDoc = this.root.ownerDocument;
+								var style = (svgDoc.createElementNS != null) ?
+									svgDoc.createElementNS(mxConstants.NS_SVG, 'style') :
+									svgDoc.createElement('style');
+								svgDoc.setAttributeNS != null? style.setAttributeNS('type', 'text/css') :
+									style.setAttribute('type', 'text/css');
+								style.innerHTML = graph.getFlowAnimationStyleCss(id, scale);
+								style.setAttribute('id', id);
+								svgDoc.getElementsByTagName('defs')[0].appendChild(style);
+
+								imgExport.flowAnimationStyle = style;
+							}
+
+							if (mxUtils.getValue(this.state.style, mxConstants.STYLE_DASHED, '0') != '1')
+							{
+								this.node.setAttribute('stroke-dasharray', (scale * 8));
+							}
+
+							this.node.setAttribute('class', imgExport.flowAnimationStyle.getAttribute('id'));
+						}
+
+						prevStroke.apply(this, arguments);
+					};
+
 					if ((ignoreSelection && lookup == null) || selected)
 					{
 						graph.view.redrawEnumerationState(state);
 						imgExportDrawCellState.apply(this, arguments);
 						this.doDrawShape(state.secondLabel, canvas);
 					}
+
+					canvas.stroke = prevStroke;
 				};
 
 				var viewRoot = (this.view.currentRoot != null) ?
@@ -14412,7 +14454,7 @@ if (typeof mxVertexHandler !== 'undefined')
 		/**
 		 * Updates the hint for the current operation.
 		 */
-		mxEdgeHandler.prototype.updateHint = function(me, point)
+		mxEdgeHandler.prototype.updateHint = function(me, point, edge)
 		{
 			if (this.hint == null)
 			{
@@ -14425,10 +14467,18 @@ if (typeof mxVertexHandler !== 'undefined')
 			var x = this.roundLength(point.x / s - t.x);
 			var y = this.roundLength(point.y / s - t.y);
 			var unit = this.graph.view.unit;
-			
+
 			this.hint.innerHTML = formatHintText(x, unit) + ', ' + formatHintText(y, unit);
 			this.hint.style.visibility = 'visible';
-
+
+			if (edge != null)
+			{
+				edge.view.updateEdgeBounds(edge);
+				this.hint.innerHTML += ' (' + ((unit == mxConstants.POINTS) ?
+					Math.round(edge.length / s) : formatHintText(
+						edge.length / s, unit)) + ')';
+			}			
+
 			if (this.isSource || this.isTarget)
 			{
 				if (this.constraintHandler != null &&

src/main/webapp/js/grapheditor/Sidebar.js

@@ -1197,7 +1197,7 @@ Sidebar.prototype.addSearchPalette = function(expand)
 
 	mxEvent.addListener(input, 'keydown', mxUtils.bind(this, function(evt)
 	{
-		if (evt.keyCode == 13 /* Enter */ || evt.keyCode == 229 /* Next on Android */)
+		if (evt.keyCode == 13 /* Enter */)
 		{
 			find();
 			mxEvent.consume(evt);