Merge branch 'dev' of https://github.com/jgraph/drawio into dev

ChangeLog

@@ -1,3 +1,13 @@
+09-JAN-2023: 21.1.18
+
+- Fixes overridden configurations [drawio-desktop-1564]
+- Removes multiple javascript protocol prefixes
+- Adds exit menu and fixed isModified detection [drawio-desktop-1222]
+- Fixed text replace when search query is " or ' [drawio-desktop-1152]
+- Fixes error messages of new files in offline mode [drawio-nextcloud-62]
+- Experimental support for vertical writing mode [drawio-4068]
+- Fixes relative links in SVG export
+
 04-JAN-2023: 21.1.17
 
 - Adds copyAsText in Edit drop down [drawio-3949]

VERSION

@@ -1 +1 @@
-22.1.17
+22.1.18

src/main/mxgraph/shape/mxText.js

@@ -222,6 +222,31 @@ mxText.prototype.configurePointerEvents = function(c)
 	// do nothing
 };
 
+/**
+ * Function: getActualTextDirection
+ * 
+ * Returns the actual text direction.
+ */
+mxText.prototype.getActualTextDirection = function()
+{
+	var dir = this.textDirection;
+
+	if (dir == mxConstants.TEXT_DIRECTION_AUTO)
+	{
+		dir = this.getAutoDirection();
+	}
+
+	if (dir != mxConstants.TEXT_DIRECTION_LTR &&
+		dir != mxConstants.TEXT_DIRECTION_RTL &&
+		dir != mxConstants.TEXT_DIRECTION_VERTICAL_LR &&
+		dir != mxConstants.TEXT_DIRECTION_VERTICAL_RL)
+	{
+		dir = null;
+	}
+
+	return dir;
+};
+
 /**
  * Function: paint
  * 
@@ -238,11 +263,13 @@ mxText.prototype.paint = function(c, update)
 
 	this.updateTransform(c, x, y, w, h);
 	this.configureCanvas(c, x, y, w, h);
+
+	var dir = this.getActualTextDirection();
 
 	if (update)
 	{
 		c.updateText(x, y, w, h, this.align, this.valign, this.wrap, this.overflow,
-				this.clipped, this.getTextRotation(), this.node);
+				this.clipped, this.getTextRotation(), dir, this.node);
 	}
 	else
 	{
@@ -266,19 +293,7 @@ mxText.prototype.paint = function(c, update)
 		// Handles trailing newlines to make sure they are visible in rendering output
 		val = (!mxUtils.isNode(this.value) && this.replaceLinefeeds && fmt == 'html') ?
 			val.replace(/\n/g, '<br/>') : val;
-
-		var dir = this.textDirection;
-
-		if (dir == mxConstants.TEXT_DIRECTION_AUTO && !realHtml)
-		{
-			dir = this.getAutoDirection();
-		}
-
-		if (dir != mxConstants.TEXT_DIRECTION_LTR && dir != mxConstants.TEXT_DIRECTION_RTL)
-		{
-			dir = null;
-		}
-
+
 		c.text(x, y, w, h, val, this.align, this.valign, this.wrap, fmt,
 			this.overflow, this.clipped, this.getTextRotation(), dir);
 	}
@@ -801,8 +816,9 @@ mxText.prototype.redrawHtmlShapeWithCss3 = function()
 	var flex = 'position: absolute; left: ' + Math.round(this.bounds.x) + 'px; ' +
 		'top: ' + Math.round(this.bounds.y) + 'px; pointer-events: none; ';
 	var block = this.getTextCss();
+	var dir = this.getActualTextDirection();
 
-	mxSvgCanvas2D.createCss(w + 2, h, this.align, this.valign, this.wrap, this.overflow, this.clipped,
+	mxSvgCanvas2D.createCss(w + 2, h, this.align, this.valign, this.wrap, this.overflow, this.clipped, dir,
 		(this.background != null) ? mxUtils.htmlEntities(this.background) : null,
 		(this.border != null) ? mxUtils.htmlEntities(this.border) : null,
 		flex, block, this.scale, mxUtils.bind(this, function(dx, dy, flex, item, block, ofl)
@@ -1215,6 +1231,7 @@ mxText.prototype.updateValue = function()
 
 		if (divs.length > 0)
 		{
+			// LATER: Add vertical writing-mode support
 			var dir = this.textDirection;
 
 			if (dir == mxConstants.TEXT_DIRECTION_AUTO && this.dialect != mxConstants.DIALECT_STRICTHTML)

src/main/mxgraph/util/mxConstants.js

@@ -2238,6 +2238,22 @@
 	 */
 	TEXT_DIRECTION_RTL: 'rtl',
 
+	/**
+	 * Variable: TEXT_DIRECTION_VERTICAL_LR
+	 * 
+	 * Constant for vertical text direction left to right. Default is ltr.
+	 * Use this value for vertical left to right text direction.
+	 */
+	TEXT_DIRECTION_VERTICAL_LR: 'vertical-lr',
+
+	/**
+	 * Variable: TEXT_DIRECTION_VERTICAL_RL
+	 * 
+	 * Constant for vertical text direction right to left. Default is rtl.
+	 * Use this value for vertical right to left text direction.
+	 */
+	TEXT_DIRECTION_VERTICAL_RL: 'vertical-rl',
+
 	/**
 	 * Variable: DIRECTION_MASK_NONE
 	 * 

src/main/mxgraph/util/mxSvgCanvas2D.js

@@ -1602,11 +1602,11 @@ mxSvgCanvas2D.prototype.createDiv = function(str)
 /**
  * Updates existing DOM nodes for text rendering. LATER: Merge common parts with text function below.
  */
-mxSvgCanvas2D.prototype.updateText = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, node)
+mxSvgCanvas2D.prototype.updateText = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, node)
 {
 	if (node != null && node.firstChild != null && node.firstChild.firstChild != null)
 	{
-		this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, node.firstChild);
+		this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, node.firstChild);
 	}
 };
 
@@ -1632,7 +1632,7 @@ mxSvgCanvas2D.prototype.addForeignObject = function(x, y, w, h, str, align, vali
 
 	fo.appendChild(div);
 	group.appendChild(fo);
-	this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, group);
+	this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, group);
 
 	// Alternate content if foreignObject not supported
 	if (this.root.ownerDocument != document)
@@ -1655,18 +1655,19 @@ mxSvgCanvas2D.prototype.addForeignObject = function(x, y, w, h, str, align, vali
 /**
  * Updates existing DOM nodes for text rendering.
  */
-mxSvgCanvas2D.prototype.updateTextNodes = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, g)
+mxSvgCanvas2D.prototype.updateTextNodes = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, g)
 {
 	var s = this.state.scale;
 
-	mxSvgCanvas2D.createCss(w + this.foreignObjectPadding, h, align, valign, wrap, overflow, clip,
+	mxSvgCanvas2D.createCss(w + this.foreignObjectPadding, h, align, valign, wrap, overflow, clip, dir,
 		(this.state.fontBackgroundColor != null) ? this.state.fontBackgroundColor : null,
 		(this.state.fontBorderColor != null) ? this.state.fontBorderColor : null,
 		'display: flex; align-items: unsafe ' +
 		((valign == mxConstants.ALIGN_TOP) ? 'flex-start' :
 		((valign == mxConstants.ALIGN_BOTTOM) ? 'flex-end' : 'center'))  + '; ' +
 		'justify-content: unsafe ' + ((align == mxConstants.ALIGN_LEFT) ? 'flex-start' :
-		((align == mxConstants.ALIGN_RIGHT) ? 'flex-end' : 'center'))  + '; ',
+		((align == mxConstants.ALIGN_RIGHT) ? 'flex-end' : 'center')) + '; ' +
+		((dir != null && dir.substring(0, 9) == 'vertical-') ? 'writing-mode: ' + dir + ';' : ''),
 		this.getTextCss(), s, mxUtils.bind(this, function(dx, dy, flex, item, block)
 	{
 		x += this.state.dx;
@@ -1748,10 +1749,11 @@ mxSvgCanvas2D.prototype.updateTextNodes = function(x, y, w, h, align, valign, wr
 /**
  * Updates existing DOM nodes for text rendering.
  */
-mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, bg, border, flex, block, s, callback)
+mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, dir, bg, border, flex, block, s, callback)
 {
 	var item = 'box-sizing: border-box; font-size: 0; text-align: ' + ((align == mxConstants.ALIGN_LEFT) ? 'left' :
 		((align == mxConstants.ALIGN_RIGHT) ? 'right' : 'center')) + '; ';
+	var vertical = dir != null && dir.substring(0, 9) == 'vertical-';
 	var pt = mxUtils.getAlignmentAsPoint(align, valign);
 	var ofl = 'overflow: hidden; ';
 	var fw = 'width: 1px; ';
@@ -1802,7 +1804,15 @@ mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, bg
 	else
 	{
 		ofl = '';
-		dy = 0;
+
+		if (vertical)
+		{
+			dx =0;
+		}
+		else
+		{
+			dy = 0;
+		}
 	}
 
 	var bgc = '';
@@ -1826,14 +1836,29 @@ mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, bg
 		item += bgc;
 	}
 
-	if (wrap && w > 0)
+	if (wrap && ((vertical && h > 0) || (!vertical && w > 0)))
 	{
 		block += 'white-space: normal; word-wrap: ' + mxConstants.WORD_WRAP + '; ';
-		fw = 'width: ' + Math.round(w) + 'px; ';
-
+
+		if (vertical)
+		{
+			fh = 'height: ' + Math.round(h) + 'px; ';
+		}
+		else
+		{
+			fw = 'width: ' + Math.round(w) + 'px; ';
+		}
+
 		if (ofl != '' && overflow != 'fill')
 		{
-			dy = 0;
+			if (vertical)
+			{
+				dx = 0;
+			}
+			else
+			{
+				dy = 0;
+			}
 		}
 	}
 	else
@@ -1915,7 +1940,7 @@ mxSvgCanvas2D.prototype.text = function(x, y, w, h, str, align, valign, wrap, fo
 			// Ignores invalid XHTML labels
 			if (div != null)
 			{
-				if (dir != null)
+				if (dir != null && dir.substring(0, 9) == 'vertical-')
 				{
 					div.setAttribute('dir', dir);
 				}
@@ -2245,7 +2270,7 @@ mxSvgCanvas2D.prototype.plainText = function(x, y, w, h, str, align, valign, wra
 		tr += 'rotate(' + rotation  + ',' + this.format(x * s.scale) + ',' + this.format(y * s.scale) + ')';
 	}
 
-	if (dir != null)
+	if (dir != null && dir.substring(0, 9) != 'vertical-')
 	{
 		node.setAttribute('direction', dir);
 	}

src/main/mxgraph/view/mxCellEditor.js

@@ -700,6 +700,9 @@ mxCellEditor.prototype.resize = function()
 	 		// TODO: Fix word wrapping preview for edge labels in helloworld.html
 			if (this.graph.isWrapping(state.cell) && (this.bounds.width >= 2 || this.bounds.height >= 2))
 			{
+				var dir = this.textDirection = mxUtils.getValue(state.style,
+					mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
+				var vertical = dir != null && dir.substring(0, 9) == 'vertical-';
 				this.textarea.style.wordWrap = mxConstants.WORD_WRAP;
 				this.textarea.style.whiteSpace = 'normal';
 
@@ -727,6 +730,10 @@ mxCellEditor.prototype.resize = function()
 
 						this.textarea.style.width = tmp + 'px';
 					}
+					else if (vertical)
+					{
+						this.textarea.style.maxHeight = (this.bounds.height / scale) + 'px';
+					}
 					else
 					{
 						this.textarea.style.maxWidth = tmp + 'px';
@@ -865,7 +872,6 @@ mxCellEditor.prototype.isLegacyEditor = function()
  */
 mxCellEditor.prototype.updateTextAreaStyle = function(state)
 {
-	var scale = this.graph.getView().scale;
 	var size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
 	var family = mxUtils.getValue(state.style, mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY);
 	var color = mxUtils.getValue(state.style, mxConstants.STYLE_FONTCOLOR, 'black');
@@ -898,6 +904,7 @@ mxCellEditor.prototype.updateTextAreaStyle = function(state)
 	this.textarea.style.fontFamily = family;
 	this.textarea.style.textAlign = align;
 	this.textarea.style.outline = 'none';
+	this.textarea.style.writingMode = '';
 	this.textarea.style.color = color;
 
 	var borderColor = this.getBorderColor(state);
@@ -911,24 +918,29 @@ mxCellEditor.prototype.updateTextAreaStyle = function(state)
 		this.textarea.style.border = 'none';
 	}
 
-	var dir = this.textDirection = mxUtils.getValue(state.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
+	var dir = this.textDirection = mxUtils.getValue(state.style,
+		mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
+	this.textarea.removeAttribute('dir');
 
 	if (dir == mxConstants.TEXT_DIRECTION_AUTO)
 	{
-		if (state != null && state.text != null && state.text.dialect != mxConstants.DIALECT_STRICTHTML &&
+		if (state != null && state.text != null &&
+			state.text.dialect != mxConstants.DIALECT_STRICTHTML &&
 			!mxUtils.isNode(state.text.value))
 		{
 			dir = state.text.getAutoDirection();
 		}
 	}
-
-	if (dir == mxConstants.TEXT_DIRECTION_LTR || dir == mxConstants.TEXT_DIRECTION_RTL)
+
+	if (dir == mxConstants.TEXT_DIRECTION_LTR ||
+		dir == mxConstants.TEXT_DIRECTION_RTL)
 	{
 		this.textarea.setAttribute('dir', dir);
 	}
-	else
+	else if (dir == mxConstants.TEXT_DIRECTION_VERTICAL_LR ||
+		dir == mxConstants.TEXT_DIRECTION_VERTICAL_RL)
 	{
-		this.textarea.removeAttribute('dir');
+		this.textarea.style.writingMode = dir;
 	}
 };
 

src/main/mxgraph/view/mxPrintPreview.js

@@ -1060,6 +1060,10 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
 	// Resets the translation
 	var translate = view.getTranslate();
 	view.translate = new mxPoint(dx, dy);
+
+	// Avoids destruction of existing handlers
+	var updateHandler = this.graph.selectionCellsHandler.updateHandler;
+	this.graph.selectionCellsHandler.updateHandler = function() {};
 
 	// Redraws only states that intersect the clip
 	var redraw = this.graph.cellRenderer.redraw;
@@ -1152,7 +1156,7 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
 					tmp.style.height = '';
 				}
 				// Tries to fetch all text labels and only text labels
-				else if (tmp.style.cursor != 'default' && name != 'div')
+				else if (!this.isTextLabel(tmp))
 				{
 					tmp.parentNode.removeChild(tmp);
 				}
@@ -1179,6 +1183,7 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
 		this.graph.setEnabled(graphEnabled);
 		this.graph.container = previousContainer;
 		this.graph.cellRenderer.redraw = redraw;
+		this.graph.selectionCellsHandler.updateHandler = updateHandler;
 		view.canvas = canvas;
 		view.backgroundPane = backgroundPane;
 		view.drawPane = drawPane;
@@ -1189,6 +1194,16 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
 	}
 };
 
+/**
+ * Function: isTextLabel
+ * 
+ * Returns true if the given node is a test label.
+ */
+mxPrintPreview.prototype.isTextLabel = function(node)
+{
+	return tmp.style.cursor == 'default' || node.nodeName.toLowerCase() == 'div';
+};
+
 /**
  * Function: getLinkForCellState
  *