24.0.1 release

ChangeLog

@@ -1,3 +1,12 @@
+02-MAR-2024: 24.0.1
+
+- Updates DOMPurify from 3.0.8 to 3.0.9
+- Adds contrast URL parameter [drawio-3701]
+- Fixes preview of SVG export with embedded fonts
+- [conf cloud] Adds migration support for pageInfo parameter, templateUrl to re-indexing, improves tinyUrl parsing regex
+- [conf cloud] Adds support for templateUrl with pageInfo in viewer
+- [conf cloud] Shows custom contents based on macros in the page instead of page custom contents (easier deletion and no re-indexing)
+
 29-FEB-2024: 24.0.0
 
 - Adds shape shadow style option [drawio-1671]

VERSION

@@ -1 +1 @@
-24.0.0
+24.0.1

etc/dependencies/package.json

@@ -15,7 +15,7 @@
 	  "mermaid": "10.0.2",
 	  "pako": "2.1.0",
 	  "crypto-js": "3.1.2",
-	  "dompurify": "3.0.8",
+	  "dompurify": "3.0.9",
 	  "spin.js": "2.0.0",
 	  "roughjs": "4.4.1",
 	  "mathjax": "3.2.2",

src/main/mxgraph/util/mxSvgCanvas2D.js

@@ -1160,7 +1160,7 @@ mxSvgCanvas2D.prototype.createDashPattern = function(scale)
 		{
 			for (var i = 0; i < dash.length; i++)
 			{
-				pat[i] = Number(dash[i]) * scale;
+				pat[i] = Math.round(Number(dash[i]) * scale * 100) / 100;
 			}
 		}
 	}

src/main/webapp/js/diagramly/Devel.js

@@ -56,7 +56,7 @@ if (!mxIsElectron && location.protocol !== 'http:')
 			'https://dl.dropboxusercontent.com https://api.openai.com https://drawio.dev ' +
 			'https://*.google.com https://fonts.gstatic.com https://fonts.googleapis.com; ' +
 			// font-src about: is required for MathJax HTML-CSS output with STIX
-			'img-src * data: blob:; media-src * data:; font-src * about:; ' +
+			'img-src * data: blob:; media-src * data:; font-src * data: about:; ' +
 			// www.draw.io required for browser data migration to app.diagrams.net and
 			// viewer.diagrams.net required for iframe embed preview
 			'frame-src %frame-src% \'self\' https://viewer.diagrams.net https://www.draw.io https://*.google.com; ' +

src/main/webapp/js/diagramly/Editor.js

@@ -462,8 +462,20 @@
         {name: 'perimeterSpacing', dispName: 'Terminal Spacing', type: 'float', defVal: 0},
         {name: 'anchorPointDirection', dispName: 'Anchor Direction', type: 'bool', defVal: true},
         {name: 'snapToPoint', dispName: 'Snap to Point', type: 'bool', defVal: false},
+        {name: 'dashPattern', dispName: 'Dash Pattern', type: 'numbers', defVal: ''},
         {name: 'fixDash', dispName: 'Fixed Dash', type: 'bool', defVal: false},
-        {name: 'editable', dispName: 'Editable', type: 'bool', defVal: true},
+		{name: 'flowAnimationDuration', dispName: 'Flow Duration', type: 'int', defVal: 500, isVisible: function(state)
+		{
+			return mxUtils.getValue(state.style, 'flowAnimation', null) == '1';
+		}},
+		{name: 'flowAnimationTimingFunction', dispName: 'Flow Timing', type: 'enum', defVal: 'linear',
+			enumList: [{val: 'linear', dispName: 'Linear'}, {val: 'ease', dispName: 'Ease'}, {val: 'ease-in', dispName: 'Ease-in'},
+			{val: 'ease-out', dispName: 'Ease-out'}, {val: 'ease-in-out', dispName: 'Ease-in-out'}], isVisible: function(state)
+			{
+				return mxUtils.getValue(state.style, 'flowAnimation', null) == '1';
+			}
+		},
+		{name: 'editable', dispName: 'Editable', type: 'bool', defVal: true},
         {name: 'metaEdit', dispName: 'Edit Dialog', type: 'bool', defVal: false},
         {name: 'backgroundOutline', dispName: 'Background Outline', type: 'bool', defVal: false},
         {name: 'bendable', dispName: 'Bendable', type: 'bool', defVal: true},
@@ -5299,11 +5311,13 @@
 						function setInputVal()
 						{
 							var inputVal = input.value;
-							inputVal = inputVal.length == 0 && pType != 'string'? 0 : inputVal;
+							inputVal = inputVal.length == 0 && pType != 'string' &&
+								pType != 'numbers'? 0 : inputVal;
 
 							if (prop.allowAuto)
 							{
-								if (inputVal.trim != null && inputVal.trim().toLowerCase() == 'auto')
+								if (inputVal.trim != null && inputVal.trim().
+									toLowerCase() == 'auto')
 								{
 									inputVal = 'auto';
 									pType = 'string';
@@ -5324,7 +5338,17 @@
 								inputVal = prop.max;
 							}
 
-							var newVal = encodeURIComponent((pType == 'int'? parseInt(inputVal) : inputVal) + '');
+							var newVal = null;
+
+							try
+							{
+								newVal = (pType == 'numbers') ? inputVal.match(/\d+/g).map(Number).join(' ') :
+									encodeURIComponent((pType == 'int'? parseInt(inputVal) : inputVal) + '');
+							}
+							catch(e)
+							{
+								// ignores parsing errors
+							}
 
 							applyStyleVal(pName, newVal, prop);
 						}

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

@@ -11775,6 +11775,11 @@
 				if (darkMode || urlParams['dark'] == '1' ||
 					Editor.currentTheme == 'dark')
 				{
+					if (urlParams['contrast'] != null)
+					{
+						Editor.enableCssDarkMode = urlParams['contrast'] != '0';
+					}
+
 					this.setDarkMode(true);
 				}
 			}

src/main/webapp/js/grapheditor/Format.js

@@ -1574,14 +1574,19 @@ ArrangePanel.prototype.init = function()
 	if (ss.containsLabel)
 	{
 		// Adds functions from hidden style format panel
-		var span = document.createElement('div');
-		span.style.width = '100%';
-		span.style.marginTop = '0px';
-		span.style.fontWeight = 'bold';
-		span.style.padding = '10px 0 0 14px';
-		mxUtils.write(span, mxResources.get('style'));
-		this.container.appendChild(span);
-
+		// No title required for more than one selected cell
+		// as no actions are added in this case
+		if (ss.cells.length == 1)
+		{
+			var span = document.createElement('div');
+			span.style.width = '100%';
+			span.style.marginTop = '0px';
+			span.style.fontWeight = 'bold';
+			span.style.padding = '10px 0 0 14px';
+			mxUtils.write(span, mxResources.get('style'));
+			this.container.appendChild(span);
+		}
+
 		new StyleFormatPanel(this.format, this.editorUi, this.container);
 	}
 };
@@ -7048,11 +7053,6 @@ DiagramFormatPanel.prototype.addGridOption = function(container)
  */
 DiagramFormatPanel.prototype.addDocumentProperties = function(div)
 {
-	// Hook for subclassers
-	var ui = this.editorUi;
-	var editor = ui.editor;
-	var graph = editor.graph;
-
 	div.appendChild(this.createTitle(mxResources.get('options')));
 
 	return div;

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

@@ -2931,16 +2931,6 @@ Graph.prototype.init = function(container)
 		};
 	}
 
-	// Adds or updates CSS for flowAnimation style
-	this.addListener(mxEvent.SIZE, mxUtils.bind(this, function(sender, evt)
-	{
-		if (this.container != null && this.flowAnimationStyle)
-		{
-			var id = this.flowAnimationStyle.getAttribute('id');
-			this.flowAnimationStyle.innerHTML = this.getFlowAnimationStyleCss(id);
-		}
-	}));
-
 	this.initLayoutManager();
 };
 
@@ -6533,6 +6523,66 @@ Graph.prototype.getTooltipForCell = function(cell)
 	return tip;
 };
 
+/**
+ * 
+ */
+Graph.prototype.addFlowAnimation = function(node, style, scale, animationId)
+{
+	var dashArray = node.getAttribute('stroke-dasharray');
+	var tokens = [];
+
+	if (dashArray == '' || dashArray == null)
+	{
+		tokens = String(mxUtils.getValue(style, mxConstants.STYLE_DASH_PATTERN, '8')).split(' ');
+		var sw = (mxUtils.getValue(style, mxConstants.STYLE_FIX_DASH, false) == 1 ||
+			style['dashPattern'] == null) ? 1 : mxUtils.getNumber(style,
+				mxConstants.STYLE_STROKEWIDTH, 1);
+
+		if (tokens.length > 0)
+		{
+			for (var i = 0; i < tokens.length; i++)
+			{
+				tokens[i] = Math.round(Number(tokens[i]) * scale * sw * 100) / 100;
+			}
+		}
+
+		node.setAttribute('stroke-dasharray', tokens.join(' '));
+	}
+	else
+	{
+		tokens = dashArray.split(' ');
+	}
+
+	if (tokens.length > 0)
+	{
+		var sum = 0;
+
+		for (var i = 0; i < tokens.length; i++)
+		{
+			var temp = parseFloat(tokens[i]);
+
+			if (!isNaN(temp))
+			{
+				sum += parseFloat(tokens[i]);
+			}
+		}
+
+		// If an odd number of values is provided, then the list of
+		// values is repeated to yield an even number of values
+		if (tokens.length % 2 != 0)
+		{
+			sum *= 2;
+		}
+
+		var d = Math.round((sum / scale / 16) * parseInt(mxUtils.getValue(
+			style, 'flowAnimationDuration', 500)));
+		var tf = mxUtils.getValue(style, 'flowAnimationTimingFunction', 'linear');
+		node.style.animation = animationId + ' ' + d + 'ms ' +
+			mxUtils.htmlEntities(tf) + ' infinite';
+		node.style.strokeDashoffset = sum;
+	}
+};
+
 /**
  * Adds rack child layout style.
  */
@@ -6558,18 +6608,12 @@ Graph.prototype.getFlowAnimationStyle = function()
 /**
  * Adds rack child layout style.
  */
-Graph.prototype.getFlowAnimationStyleCss = function(id, scale)
+Graph.prototype.getFlowAnimationStyleCss = function(id)
 {
-	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: ' + (scale * -16) + ';\n' +
-	  '}\n' +
+	return '@keyframes ' + id + ' {\n' +
+	'  to {\n' +
+	'    stroke-dashoffset: 0;\n' +
+	'  }\n' +
 	'}';
 };
 
@@ -8344,21 +8388,13 @@ TableLayout.prototype.execute = function(parent)
 			this.state.view.graph.model.isEdge(this.state.cell) &&
 			mxUtils.getValue(this.state.style, 'flowAnimation', '0') == '1')
 		{
+			var anim = this.state.view.graph.getFlowAnimationStyle();
 			var paths = this.node.getElementsByTagName('path');
 
-			if (paths.length > 1)
+			if (anim != null && paths.length > 1)
 			{
-				if (mxUtils.getValue(this.state.style, mxConstants.STYLE_DASHED, '0') != '1')
-				{
-					paths[1].setAttribute('stroke-dasharray', (this.state.view.scale * 8));
-				}
-
-				var anim = this.state.view.graph.getFlowAnimationStyle();
-
-				if (anim != null)
-				{
-					paths[1].setAttribute('class', anim.getAttribute('id'));
-				}
+				this.state.view.graph.addFlowAnimation(paths[1], this.state.style,
+					this.state.view.scale, anim.getAttribute('id'));
 			}
 		}
 	};
@@ -11888,41 +11924,39 @@ if (typeof mxVertexHandler !== 'undefined')
 					}
 
 					// Adds flow animation
+					var animationId = 'ge-export-svg-flow-animation';
 					var prevStroke = canvas.stroke;
 
 					canvas.stroke = function()
 					{
-						if (this.root != null && this.node != null &&
-							this.node.nodeName == 'path' &&
+						var node = this.node;
+
+						// Updates dash pattern
+						prevStroke.apply(this, arguments);
+
+						if (this.root != null && node != null &&
+							node.nodeName == 'path' &&
 							origEnabledFlowAnimation &&
 							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);
+								style.innerHTML = graph.getFlowAnimationStyleCss(animationId);
+								style.setAttribute('id', animationId);
 								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'));
+							graph.addFlowAnimation(node, state.style, scale, animationId);
 						}
-
-						prevStroke.apply(this, arguments);
 					};
 
 					if ((ignoreSelection && lookup == null) || selected)