21.1.1 release

ChangeLog

@@ -1,3 +1,10 @@
+23-MAR-2023: 21.1.1
+
+- Fixes possible f.replace is not a function
+- Fixes detection for Firefox browser [drawio-3456]
+- Fixes OutlineWindow is not defined in viewer
+- Fixes block layout in link info for multiple links
+
 23-MAR-2023: 21.1.0
 
 - Updates Pako compression library to 2.1.0

VERSION

@@ -1 +1 @@
-21.1.0
+21.1.1

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

@@ -10389,8 +10389,6 @@
 		{
 			// Defines additional hotkeys
 			this.keyHandler.bindAction(70, true, 'findReplace'); // Ctrl+F
-			this.keyHandler.bindAction(67, true, 'copyStyle', true); // Ctrl+Shift+C
-			this.keyHandler.bindAction(86, true, 'pasteStyle', true); // Ctrl+Shift+V
 			this.keyHandler.bindAction(77, true, 'editGeometry', true); // Ctrl+Shift+M
 			this.keyHandler.bindAction(75, true, 'tags'); // Ctrl+K
 			this.keyHandler.bindAction(65, false, 'insertText'); // A
@@ -10402,6 +10400,8 @@
 			this.keyHandler.bindAction(67, false, 'insertEdge'); // C
 			this.keyHandler.bindAction(88, false, 'insertFreehand'); // X
 			this.keyHandler.bindAction(75, true, 'toggleShapes', true); // Ctrl+Shift+K
+			this.altShiftActions[81] = 'copyStyle'; // Alt+Shift+Q
+			this.altShiftActions[87] = 'pasteStyle'; // Alt+Shift+W
 			this.altShiftActions[83] = 'synchronize'; // Alt+Shift+S
 
 			if (urlParams['embedInline'] == '1')
@@ -15332,56 +15332,66 @@
 	 */
 	EditorUi.prototype.sendEmbeddedSvgExport = function(noExit)
 	{
-		var graph = this.editor.graph;
-
-		if (graph.isEditing())
+		try
 		{
-			graph.stopEditing(!graph.isInvokesStopCellEditing());
-		}
+			var graph = this.editor.graph;
 
-		var parent = window.opener || window.parent;
+			if (graph.isEditing())
+			{
+				graph.stopEditing(!graph.isInvokesStopCellEditing());
+			}
 
-		if (!this.editor.modified)
-		{
-			if (!noExit)
+			var parent = window.opener || window.parent;
+			
+			if (!this.editor.modified)
 			{
-				parent.postMessage(JSON.stringify({event: 'exit',
-					point: this.embedExitPoint}), '*');
+				if (!noExit)
+				{
+					parent.postMessage(JSON.stringify({event: 'exit',
+						point: this.embedExitPoint}), '*');
+				}
 			}
-		}
-		else
-		{
-			var bg = graph.background;
-
-			if (bg == null || bg == mxConstants.NONE)
+			else
 			{
-				bg = this.embedExportBackground;
+				var bg = graph.background;
+
+				if (bg == null || bg == mxConstants.NONE)
+				{
+					bg = this.embedExportBackground;
+				}
+
+				this.getEmbeddedSvg(this.getFileData(true, null, null, null, null,
+					null, null, null, null, false), graph, null, true,
+					mxUtils.bind(this, function(svg)
+				{
+					parent.postMessage(JSON.stringify({
+						event: 'export', point: this.embedExitPoint,
+						exit: (noExit != null) ? !noExit : true,
+						data: Editor.createSvgDataUri(svg)
+					}), '*');
+				}), null, null, true, bg, 1, this.embedExportBorder);
 			}
 
-			this.getEmbeddedSvg(this.getFileData(true, null, null, null, null,
-				null, null, null, null, false), graph, null, true,
-				mxUtils.bind(this, function(svg)
+			if (!noExit)
 			{
-				parent.postMessage(JSON.stringify({
-					event: 'export', point: this.embedExitPoint,
-					exit: (noExit != null) ? !noExit : true,
-					data: Editor.createSvgDataUri(svg)
-				}), '*');
-			}), null, null, true, bg, 1, this.embedExportBorder);
-		}
+				this.diagramContainer.removeAttribute('data-bounds');
+				Editor.inlineFullscreen = false;
+				graph.model.clear();
+				this.editor.undoManager.clear();
+				this.setBackgroundImage(null);
+				this.editor.modified = false;
 
-		if (!noExit)
+				if (urlParams['embed'] != '1')
+				{
+					this.fireEvent(new mxEventObject('editInlineStop'));
+				}
+			}
+		}
+		catch (e)
 		{
-			this.diagramContainer.removeAttribute('data-bounds');
-			Editor.inlineFullscreen = false;
-			graph.model.clear();
-			this.editor.undoManager.clear();
-			this.setBackgroundImage(null);
-			this.editor.modified = false;
-
-			if (urlParams['embed'] != '1')
+			if (!noExit)
 			{
-				this.fireEvent(new mxEventObject('editInlineStop'));
+				this.handleError(e);
 			}
 		}
 	};

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

@@ -637,7 +637,7 @@
 				editorUi.showDialog(dlg.container, 300, dlgH, true, true);
 			}
 		}));
-		
+
 		editorUi.actions.addAction('open...', function()
 		{
 			editorUi.pickFile();
@@ -808,15 +808,15 @@
 			{
 				currentStyle = graph.copyStyle(graph.getSelectionCell())
 			}
-		}, null, null, Editor.ctrlKey + '+Shift+C');
+		}, null, null, 'Alt+Shift+Q');
 
 		editorUi.actions.addAction('pasteStyle', function()
 		{
 			if (graph.isEnabled() && !graph.isSelectionEmpty() && currentStyle != null)
 			{
 				graph.pasteStyle(currentStyle, graph.getSelectionCells())
 			}
-		}, null, null, Editor.ctrlKey + '+Shift+V');
+		}, null, null, 'Alt+Shift+W');
 
 		editorUi.actions.put('exportSvg', new Action(mxResources.get('formatSvg') + '...', function()
 		{

src/main/webapp/js/grapheditor/Editor.js

@@ -1203,7 +1203,13 @@ var ErrorDialog = function(editorUi, title, message, buttonText, fn, retry, butt
 	var p2 = document.createElement('div');
 	p2.style.lineHeight = '1.2em';
 	p2.style.padding = '6px';
-	p2.innerHTML = message.replace(/\n/g, '<br/>');
+
+	if (typeof message === 'string')
+	{
+		message = message.replace(/\n/g, '<br/>');
+	}
+
+	p2.innerHTML = message;
 	div.appendChild(p2);
 
 	var btns = document.createElement('div');

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

@@ -12,6 +12,7 @@ EditorUi = function(editor, container, lightbox)
 	this.editor = editor || new Editor();
 	this.container = container || document.body;
 
+	var ui = this;
 	var graph = this.editor.graph;
 	graph.lightbox = lightbox;
 
@@ -504,23 +505,24 @@ EditorUi = function(editor, container, lightbox)
 				this.diagramContainer.removeAttribute('title');
 			}
 		}));
-
-	   	// Escape key hides dialogs, adds space+drag panning
-		var spaceKeyPressed = false;
 
 		// Overrides hovericons to disable while space key is pressed
 		var hoverIconsIsResetEvent = this.hoverIcons.isResetEvent;
 
 		this.hoverIcons.isResetEvent = function(evt, allowShift)
 		{
-			return spaceKeyPressed || hoverIconsIsResetEvent.apply(this, arguments);
+			return ui.isSpaceDown() || hoverIconsIsResetEvent.apply(this, arguments);
 		};
 
 		this.keydownHandler = mxUtils.bind(this, function(evt)
 		{
-			if (evt.which == 32 /* Space */ && !graph.isEditing())
+			if (evt.which == 16 /* Shift */)
+			{
+				this.shiftDown = true;
+			}
+			else if (evt.which == 32 /* Space */ && !graph.isEditing())
 			{
-				spaceKeyPressed = true;
+				this.spaceDown = true;
 				this.hoverIcons.reset();
 				graph.container.style.cursor = 'move';
 
@@ -541,7 +543,8 @@ EditorUi = function(editor, container, lightbox)
 		this.keyupHandler = mxUtils.bind(this, function(evt)
 		{
 			graph.container.style.cursor = '';
-			spaceKeyPressed = false;
+			this.spaceDown = false;
+			this.shiftDown = false;
 		});
 
 		mxEvent.addListener(document, 'keyup', this.keyupHandler);
@@ -552,7 +555,7 @@ EditorUi = function(editor, container, lightbox)
 		{
 			// Ctrl+left button is reported as right button in FF on Mac
 			return panningHandlerIsForcePanningEvent.apply(this, arguments) ||
-				spaceKeyPressed || (mxEvent.isMouseEvent(me.getEvent()) &&
+				ui.isSpaceDown() || (mxEvent.isMouseEvent(me.getEvent()) &&
 				(this.usePopupTrigger || !mxEvent.isPopupTrigger(me.getEvent())) &&
 				((!mxEvent.isControlDown(me.getEvent()) &&
 				mxEvent.isRightMouseButton(me.getEvent())) ||
@@ -575,7 +578,7 @@ EditorUi = function(editor, container, lightbox)
 
 		graph.isZoomWheelEvent = function()
 		{
-			return spaceKeyPressed || graphIsZoomWheelEvent.apply(this, arguments);
+			return ui.isSpaceDown() || graphIsZoomWheelEvent.apply(this, arguments);
 		};
 
 		// Switches toolbar for text editing
@@ -630,8 +633,6 @@ EditorUi = function(editor, container, lightbox)
 				nodes = newNodes;
 			}
 		});
-
-		var ui = this;
 
 		// Overrides cell editor to update toolbar
 		var cellEditorStartEditing = graph.cellEditor.startEditing;
@@ -1224,6 +1225,16 @@ EditorUi.prototype.hsplitClickEnabled = false;
  */
 EditorUi.prototype.updateDefaultStyle = false;
 
+/**
+ * Whether the default styles should be updated when styles are changed. Default is true.
+ */
+EditorUi.prototype.spaceDown = false;
+
+/**
+ * Whether the default styles should be updated when styles are changed. Default is true.
+ */
+EditorUi.prototype.shiftDown = false;
+
 /**
  * Installs the listeners to update the action states.
  */
@@ -2189,6 +2200,22 @@ EditorUi.prototype.hideShapePicker = function(cancel)
 	}
 };
 
+/**
+ * Whether the default styles should be updated when styles are changed. Default is true.
+ */
+EditorUi.prototype.isSpaceDown = function()
+{
+	return this.spaceDown;
+};
+
+/**
+ * Whether the default styles should be updated when styles are changed. Default is true.
+ */
+EditorUi.prototype.isShiftDown = function()
+{
+	return this.shiftDown;
+};
+
 /**
  * Returns true if the given event should start editing. This implementation returns true.
  */
@@ -6126,7 +6153,7 @@ EditorUi.prototype.createKeyHandler = function(editor)
 	{
 		if (graph.isEnabled())
 		{
-			// TODO: Add alt modified state in core API, here are some specific cases
+			// TODO: Add alt modifier state in core API, here are some specific cases
 			if (mxEvent.isShiftDown(evt) && mxEvent.isAltDown(evt))
 			{
 				var action = editorUi.actions.get(editorUi.altShiftActions[evt.keyCode]);
@@ -6253,10 +6280,10 @@ EditorUi.prototype.createKeyHandler = function(editor)
 	keyHandler.bindAction(107, true, 'zoomIn'); // Ctrl+Plus
 	keyHandler.bindAction(109, true, 'zoomOut'); // Ctrl+Minus
 	keyHandler.bindAction(80, true, 'print'); // Ctrl+P
-	keyHandler.bindAction(79, true, 'outline', true); // Ctrl+Shift+O
-
+
 	if (!this.editor.chromeless || this.editor.editable)
 	{
+		keyHandler.bindAction(79, true, 'outline', true); // Ctrl+Shift+O
 		keyHandler.bindControlKey(36, function() { if (graph.isEnabled()) { graph.foldCells(true); }}); // Ctrl+Home
 		keyHandler.bindControlKey(35, function() { if (graph.isEnabled()) { graph.foldCells(false); }}); // Ctrl+End
 		keyHandler.bindControlKey(13, function() { ui.ctrlEnter(); }); // Ctrl+Enter

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

@@ -14303,7 +14303,12 @@ if (typeof mxVertexHandler !== 'undefined')
 
 					if (link != null)
 					{
-						this.linkHint.appendChild(this.graph.createLinkForHint(link));
+						var wrapper = document.createElement('div');
+						wrapper.style.display = 'flex';
+						wrapper.style.alignItems = 'center';
+						wrapper.appendChild(this.graph.createLinkForHint(link));
+
+						this.linkHint.appendChild(wrapper);
 
 						if (this.graph.isEnabled() && typeof this.graph.editLink === 'function' &&
 							!this.graph.isCellLocked(this.state.cell))
@@ -14312,12 +14317,12 @@ if (typeof mxVertexHandler !== 'undefined')
 							changeLink.className = 'geAdaptiveAsset';
 							changeLink.setAttribute('src', Editor.editImage);
 							changeLink.setAttribute('title', mxResources.get('editLink'));
-							changeLink.setAttribute('width', '11');
-							changeLink.setAttribute('height', '11');
-							changeLink.style.marginLeft = '10px';
+							changeLink.setAttribute('width', '14');
+							changeLink.setAttribute('height', '14');
+							changeLink.style.marginLeft = '6px';
 							changeLink.style.marginBottom = '-1px';
 							changeLink.style.cursor = 'pointer';
-							this.linkHint.appendChild(changeLink);
+							wrapper.appendChild(changeLink);
 
 							mxEvent.addListener(changeLink, 'click', mxUtils.bind(this, function(evt)
 							{
@@ -14333,7 +14338,7 @@ if (typeof mxVertexHandler !== 'undefined')
 								[mxResources.get('link')]));
 							trashLink.style.marginLeft = '4px';
 
-							this.linkHint.appendChild(trashLink);
+							wrapper.appendChild(trashLink);
 
 							mxEvent.addListener(trashLink, 'click', mxUtils.bind(this, function(evt)
 							{