22.1.17 release

ChangeLog

@@ -1,3 +1,15 @@
+04-JAN-2023: 21.1.17
+
+- Adds copyAsText in Edit drop down [drawio-3949]
+- Replaces clearWaypoints button with drop down
+- Fixes clipping, replaces hint in filename dialog [drawio-4074]
+- Adds support for using the same URL in DRAWIO_LIGHTBOX_URL [docker-drawio-137]
+- Fixes selection propagation for current root
+- Fixes cursor for immediate edge handling in groups
+- Fixes cursor for immediate edge handling in selected ancestors
+- Fixes scrollbar positions after enter-/exitGroup
+- Fixes move of selected edges in groups
+
 29-DEC-2023: 21.1.16
 
 - Adds simple theme to atlas.min.js

VERSION

@@ -1 +1 @@
-22.1.16
+22.1.17

src/main/mxgraph/handler/mxGraphHandler.js

@@ -465,7 +465,8 @@ mxGraphHandler.prototype.getInitialCellForEvent = function(me)
 
 		while (next != null && !this.graph.isCellSelected(next.cell) &&
 			(model.isVertex(next.cell) || model.isEdge(next.cell)) &&
-			this.isPropagateSelectionCell(state.cell, true, me))
+			this.isPropagateSelectionCell(state.cell, true, me) &&
+			next.cell != this.graph.getCurrentRoot())
 		{
 			state = next;
 			next = this.graph.view.getState(this.graph.getModel().getParent(state.cell));
@@ -544,7 +545,8 @@ mxGraphHandler.prototype.selectCellForEvent = function(cell, me)
 				while (this.graph.view.getState(parent) != null &&
 					(model.isVertex(parent) || (model.isEdge(parent) &&
 					!this.graph.isToggleEvent(me.getEvent()))) &&
-					this.isPropagateSelectionCell(cell, false, me))
+					this.isPropagateSelectionCell(cell, false, me) &&
+					parent != this.graph.getCurrentRoot())
 				{
 					cell = parent;
 					parent = model.getParent(cell);
@@ -1109,7 +1111,7 @@ mxGraphHandler.prototype.mouseMove = function(sender, me)
 			!mxEvent.isAltDown(me.getEvent()) ||
 			graph.isSelectionEmpty())
 		{
-			cells = cells.concat(me.getCell());
+			cells = cells.concat(this.cell);
 		}
 
 		this.start(this.cell, this.mouseDownX, this.mouseDownY,

src/main/mxgraph/view/mxGraph.js

@@ -7465,6 +7465,11 @@ mxGraph.prototype.enterGroup = function(cell)
 	{
 		this.view.setCurrentRoot(cell);
 		this.clearSelection();
+
+		var gb = mxRectangle.fromRectangle(this.getGraphBounds());
+		gb.x -= this.view.translate.x;
+		gb.y -= this.view.translate.y;
+		this.scrollRectToVisible(gb);
 	}
 };
 
@@ -7507,6 +7512,7 @@ mxGraph.prototype.exitGroup = function()
 		if (state != null)
 		{
 			this.setSelectionCell(current);
+			this.scrollCellToVisible(current);
 		}
 	}
 };
@@ -12319,14 +12325,14 @@ mxGraph.prototype.isCellSelected = function(cell)
 /**
  * Function: isAncestorSelected
  * 
- * Returns true if the given cell and parent should propagate
- * selection state to the parent.
+ * Returns true if the given cell or of any of its ancestors in the
+ * current view is selected.
  */
 mxGraph.prototype.isAncestorSelected = function(cell)
 {
 	var parent = this.model.getParent(cell);
 
-	while (parent != null)
+	while (parent != null && parent != this.getCurrentRoot())
 	{
 		if (this.isCellSelected(parent))
 		{

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

@@ -2931,15 +2931,6 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 				typeSelect.style.width = (compact || smallScreen) ? '80px' : '180px';
 				header.appendChild(typeSelect);
 			}
-
-			if (editorUi.editor.fileExtensions != null)
-			{
-				var hint = FilenameDialog.createTypeHint(editorUi,
-					nameInput, editorUi.editor.fileExtensions);
-				hint.style.marginTop = '12px';
-
-				header.appendChild(hint);
-			}
 		}
 	}
 
@@ -5124,17 +5115,12 @@ var CreateDialog = function(editorUi, title, createFn, cancelFn, dlgTitle, btnLa
 
 	div.appendChild(nameInput);
 
-	if (hints != null)
+	if (hints != null && editorUi.editor.diagramFileTypes != null)
 	{
-		if (editorUi.editor.diagramFileTypes != null)
-		{
-			var typeSelect = FilenameDialog.createFileTypes(editorUi, nameInput, editorUi.editor.diagramFileTypes);
-			typeSelect.style.marginLeft = '6px';
-			typeSelect.style.width = '90px';
-			div.appendChild(typeSelect);
-		}
-
-		div.appendChild(FilenameDialog.createTypeHint(editorUi, nameInput, hints));
+		var typeSelect = FilenameDialog.createFileTypes(editorUi, nameInput, editorUi.editor.diagramFileTypes);
+		typeSelect.style.marginLeft = '6px';
+		typeSelect.style.width = '90px';
+		div.appendChild(typeSelect);
 	}
 
 	var copyBtn = null;
@@ -7957,7 +7943,7 @@ var FindWindow = function(ui, x, y, w, h, withReplace)
     var help = ui.menus.createHelpLink('https://www.drawio.com/doc/faq/find-shapes');
     help.style.position = 'relative';
     help.style.marginLeft = '6px';
-    help.style.top = '-1px';
+    help.style.top = '3px';
     div.appendChild(help);
 
 	mxUtils.br(div);
@@ -9538,7 +9524,6 @@ var TagsWindow = function(editorUi, x, y, w, h)
 	if (!editorUi.isOffline() || mxClient.IS_CHROMEAPP)
 	{
 		helpButton = editorUi.menus.createHelpLink('https://www.drawio.com/blog/tags-in-diagrams');
-		helpButton.style.marginLeft = '8px';
 	}
 
 	var tagsComponent = editorUi.editor.graph.createTagsDialog(mxUtils.bind(this, function()
@@ -9580,8 +9565,8 @@ var TagsWindow = function(editorUi, x, y, w, h)
 						}
 					}
 				}
-			}, mxResources.get('enterValue') + ' (' + mxResources.get('tags') + ')', null, null, null, null, null, null, null, 105);
-
+			}, mxResources.get('tags'), null, null, 'https://www.drawio.com/blog/tags-in-diagrams');
+			
 			editorUi.showDialog(dlg.container, 320, 80, true, true);
 			dlg.init();
 		}
@@ -11420,7 +11405,8 @@ var LibraryDialog = function(editorUi, name, library, initialImages, file, mode,
 						}
 						else
 						{
-							var dlg = new FilenameDialog(editorUi, entry.title || '', mxResources.get('ok'), function(newTitle)
+							var dlg = new FilenameDialog(editorUi, entry.title || '',
+								mxResources.get('ok'), function(newTitle)
 							{
 								if (newTitle != null)
 								{
@@ -12647,28 +12633,29 @@ var TemplatesDialog = function(editorUi, callback, cancelCallback,
 			}
 			else if (openDiagram)
 			{
-				openBtn.className = "geTempDlgOpenBtn geTempDlgBtnDisabled geTempDlgBtnBusy";
+				openBtn.className = 'geTempDlgOpenBtn geTempDlgBtnDisabled geTempDlgBtnBusy';
 				startSubmit();
 			}
 			else
 			{
-				createBtn.className = "geTempDlgCreateBtn geTempDlgBtnDisabled geTempDlgBtnBusy";
+				createBtn.className = 'geTempDlgCreateBtn geTempDlgBtnDisabled geTempDlgBtnBusy';
 				var nameTitle = (((editorUi.mode == null || editorUi.mode == App.MODE_GOOGLE ||
-						editorUi.mode == App.MODE_BROWSER) ? mxResources.get('diagramName') : mxResources.get('filename')));
+					editorUi.mode == App.MODE_BROWSER) ? mxResources.get('diagramName') :
+						mxResources.get('filename')));
 				var nameDlg = new FilenameDialog(editorUi, editorUi.defaultFilename + '.drawio',
-						mxResources.get('ok'), startSubmit, nameTitle, function(name)
-						{
-							//TODO validate?
-							var valid = name != null && name.length > 0;
-							
-							if (valid && noDlgHide)
-							{
-								startSubmit(name);
-								return false; //prevent closing
-							}
-							
-							return valid;
-						}, null, null, null, cancelSubmit, withoutType? null : []);
+					mxResources.get('ok'), startSubmit, nameTitle, function(name)
+				{
+					//TODO validate?
+					var valid = name != null && name.length > 0;
+
+					if (valid && noDlgHide)
+					{
+						startSubmit(name);
+						return false; //prevent closing
+					}
+
+					return valid;
+				}, null, null, null, cancelSubmit, withoutType? null : []);
 
 				editorUi.showDialog(nameDlg.container, 350, 80, true, true);
 				nameDlg.init();

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

@@ -4303,12 +4303,11 @@
 						(resp.message == '' && resp.name != null) ? resp.name : resp.message,
 						resp.filename, resp.lineNumber, resp.columnNumber, resp, 'INFO');
 				}
-				else
+
+				if ((urlParams['test'] == '1' || disableLogging) &&
+					window.console != null)
 				{
-					if (window.console != null)
-					{
-						console.error('EditorUi.handleError:', resp);
-					}
+					console.error('EditorUi.handleError:', resp);
 				}
 			}
 			catch (e)
@@ -4966,39 +4965,6 @@
 			((base64Encoded) ? '&binary=1' : ''));
 	};
 
-	/**
-	 * Translates this point by the given vector.
-	 * 
-	 * @param {number} dx X-coordinate of the translation.
-	 * @param {number} dy Y-coordinate of the translation.
-	 */
-	EditorUi.prototype.base64ToBlob = function(base64Data, contentType)
-	{
-	    contentType = contentType || '';
-	    var sliceSize = 1024;
-	    var byteCharacters = atob(base64Data);
-	    var bytesLength = byteCharacters.length;
-	    var slicesCount = Math.ceil(bytesLength / sliceSize);
-	    var byteArrays = new Array(slicesCount);
-
-	    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex)
-	    {
-	        var begin = sliceIndex * sliceSize;
-	        var end = Math.min(begin + sliceSize, bytesLength);
-
-	        var bytes = new Array(end - begin);
-
-	        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset)
-	        {
-	            bytes[i] = byteCharacters[offset].charCodeAt(0);
-	        }
-
-	        byteArrays[sliceIndex] = new Uint8Array(bytes);
-	    }
-
-	    return new Blob(byteArrays, {type: contentType});
-	};
-
 	/**
 	 * Translates this point by the given vector.
 	 * 
@@ -13988,18 +13954,6 @@
 			this.handleError(e);
 		}
 	};
-
-	/**
-	 * Copies the given cells and XML to the clipboard as an embedded image.
-	 */
-	EditorUi.prototype.writeImageToClipboard = function(dataUrl, w, h, error)
-	{
-		var blob = this.base64ToBlob(dataUrl.substring(dataUrl.indexOf(',') + 1), 'image/png');
-		var html = '<img src="' + dataUrl + '" width="' + w + '" height="' + h + '">';
-		var cbi = new ClipboardItem({'image/png': blob,
-			'text/html': new Blob([html], {type: 'text/html'})});
-		navigator.clipboard.write([cbi])['catch'](error);
-	};
 
 	/**
 	 * Creates the format panel and adds overrides.

src/main/webapp/js/diagramly/GitHubClient.js

@@ -698,7 +698,7 @@ GitHubClient.prototype.showCommitDialog = function(filename, isNew, success, can
 	}), mxResources.get('commitMessage'), null, null, null, null, mxUtils.bind(this, function()
 	{
 		cancel();
-	}), null, 280);
+	}));
 
 	this.ui.showDialog(dlg.container, 400, 80, true, false);
 	dlg.init();

src/main/webapp/js/diagramly/GitLabClient.js

@@ -1269,7 +1269,8 @@ GitLabClient.prototype.showGitLabDialog = function(showFiles, fn, hideNoFilesErr
 							{
 								if (inFlightRequests === 0)
 								{
-									var dlg = new FilenameDialog(this.ui, 'org/repo/ref', mxResources.get('ok'), mxUtils.bind(this, function(value)
+									var dlg = new FilenameDialog(this.ui, 'org/repo/ref', mxResources.get('ok'),
+										mxUtils.bind(this, function(value)
 									{
 										if (value != null)
 										{