20.8.1 release

ChangeLog

@@ -1,3 +1,11 @@
+03-JAN-2023: 20.8.1
+
+- Fixes substring not a function for invalid pattern
+- Paints grid in fast zoom preview with no page view
+- Shows shapes before freehand in responsive toolbar
+- Fixes CSS for template dialog in dark mode
+- Fixes possible NPE in format panel
+
 02-JAN-2023: 20.8.0
 
 - Fixes possible NPE for window widths below 360px

README.md

@@ -19,7 +19,7 @@ draw.io is a diagramming or whiteboarding application, depending on which theme
 
 The application is designed to be used largely as-is. It's possible to alter the major parts of the interface, but if you're looking for an editor with very specific editing features, the project is likely not a good base to use.
 
-That is to say, if you wanted to create/deploy a whiteboard or diagramming application where the functionality in the main canvas is as this project provides, it more likely to be a good base to use. 
+That is to say, if you wanted to create/deploy a whiteboard or diagramming application where the functionality in the main canvas is as this project provides, it is more likely to be a good base to use. 
 The default libraries, the menus, the toolbar, the default colours, the storage location, these can all be changed.
 
 If you are using a draw.io project/product and have issues or questions about the editor itself, the issue tracker and discussion in this GitHub project are likely a good place to look.

VERSION

@@ -1 +1 @@
-20.8.0
+20.8.1

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

@@ -3188,9 +3188,11 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 //	});
 	
 	var searchBox = document.createElement('div');
-	searchBox.style.cssText = 'position:absolute;left:30px;width:128px;top:' + divTop + 'px;height:22px;margin-top: 6px;white-space: nowrap';
+	searchBox.style.cssText = 'position:absolute;left:30px;width:128px;top:' + divTop +
+		'px;height:22px;margin-top: 6px;white-space: nowrap;';
 	var tmplSearchInput = document.createElement('input');
-	tmplSearchInput.style.cssText = 'width:105px;height:16px;border:1px solid #d3d3d3;padding: 3px 20px 3px 3px;font-size: 12px';
+	tmplSearchInput.style.cssText = 'width:105px;height:16px;border:1px solid #d3d3d3;' +
+		'padding: 3px 20px 3px 3px;font-size: 12px;border-radius:0px;';
 	tmplSearchInput.setAttribute('placeholder', mxResources.get('search'));
 	tmplSearchInput.setAttribute('type', 'text');
 	searchBox.appendChild(tmplSearchInput);
@@ -3284,6 +3286,7 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 		elt.style.position = 'relative';
 		elt.style.height = w + 'px';
 		elt.style.width = h + 'px';
+		elt.style.border = '1px solid transparent';
 		var xmlData = null, realUrl = url;
 		
 		if (title != null)

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

@@ -12002,12 +12002,12 @@
 									addElt(boxElt, mxResources.get('rectangle') + ' (D)', null, 'D').style.margin = '0 -4px 0 0';
 								}
 
-								if (iw >= 440)
+								if (iw >= 390)
 								{
 									this.sketchPickerMenuElt.appendChild(shapesElt);
 								}
 								
-								if (iw >= 390)
+								if (iw >= 440)
 								{
 									addElt(freehandElt, mxResources.get('freehand') + ' (X)', null, 'X');
 								}

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

@@ -2565,9 +2565,10 @@ var WrapperWindow = function(editorUi, title, x, y, w, h, fn)
 	};
 
 	// Updates the CSS of the background to draw the grid
-	mxGraphView.prototype.validateBackgroundStyles = function()
+	mxGraphView.prototype.validateBackgroundStyles = function(factor, cx, cy)
 	{
 		var graph = this.graph;
+		factor = (factor != null) ? factor : 1;
 		var color = (graph.background == null || graph.background == mxConstants.NONE) ?
 			graph.defaultPageBackgroundColor : graph.background;
 		var gridColor = (color != null && this.gridColor != color.toLowerCase()) ? this.gridColor : '#ffffff';
@@ -2581,10 +2582,10 @@ var WrapperWindow = function(editorUi, title, x, y, w, h, fn)
 			if (mxClient.IS_SVG)
 			{
 				// Generates the SVG required for drawing the dynamic grid
-				image = unescape(encodeURIComponent(this.createSvgGrid(gridColor)));
+				image = unescape(encodeURIComponent(this.createSvgGrid(gridColor, factor)));
 				image = (window.btoa) ? btoa(image) : Base64.encode(image, true);
 				image = 'url(' + 'data:image/svg+xml;base64,' + image + ')'
-				phase = graph.gridSize * this.scale * this.gridSteps;
+				phase = graph.gridSize * this.scale * this.gridSteps * factor;
 			}
 			else
 			{
@@ -2594,6 +2595,13 @@ var WrapperWindow = function(editorUi, title, x, y, w, h, fn)
 			
 			var x0 = 0;
 			var y0 = 0;
+
+			var dx = (cx != null) ? cx - this.translate.x * this.scale : 0;
+			var dy = (cy != null) ? cy - this.translate.y * this.scale : 0;
+
+			var p = graph.gridSize * this.scale * this.gridSteps;
+			var ddx = dx % p;
+			var ddy = dy % p;
 			
 			if (graph.view.backgroundPageShape != null)
 			{
@@ -2604,8 +2612,8 @@ var WrapperWindow = function(editorUi, title, x, y, w, h, fn)
 			}
 			
 			// Computes the offset to maintain origin for grid
-			position = -Math.round(phase - mxUtils.mod(this.translate.x * this.scale - x0, phase)) + 'px ' +
-				-Math.round(phase - mxUtils.mod(this.translate.y * this.scale - y0, phase)) + 'px';
+			position = -Math.round(phase - mxUtils.mod(this.translate.x * this.scale - x0 + dx, phase) + ddx * factor) + 'px ' +
+				-Math.round(phase - mxUtils.mod(this.translate.y * this.scale - y0 + dy, phase) + ddy * factor) + 'px';
 		}
 		
 		var canvas = graph.view.canvas;
@@ -2656,9 +2664,10 @@ var WrapperWindow = function(editorUi, title, x, y, w, h, fn)
 	};
 	
 	// Returns the SVG required for painting the background grid.
-	mxGraphView.prototype.createSvgGrid = function(color)
+	mxGraphView.prototype.createSvgGrid = function(color, factor)
 	{
-		var tmp = this.graph.gridSize * this.scale;
+		factor = (factor != null) ? factor : 1;
+		var tmp = this.graph.gridSize * this.scale * factor;
 		
 		while (tmp < this.minGridSize)
 		{

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

@@ -3398,6 +3398,10 @@ EditorUi.prototype.initCanvas = function()
 						page.offsetTop - graph.container.offsetTop) + 'px')));
 				mxUtils.setPrefixedStyle(page.style, 'transform', 'scale(' + f + ')');
 			}
+			else
+			{
+				graph.view.validateBackgroundStyles(f, cx, cy);
+			}
 
 			graph.view.getDecoratorPane().style.opacity = '0';
 			graph.view.getOverlayPane().style.opacity = '0';

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

@@ -5369,7 +5369,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1')
 		{
 			if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null ||
-				mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, '').substring(0, 2) != '1 ')
+				String(mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, '')).substring(0, 2) != '1 ')
 			{
 				solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor;
 			}
@@ -6516,13 +6516,22 @@ DiagramFormatPanel.prototype.addView = function(div)
 				}
 			});
 
-			bg.getElementsByTagName('input')[0].style.visibility = graph.backgroundImage != null ? 'visible' : 'hidden';
+			var input = bg.getElementsByTagName('input')[0];
 
+			if (input != null)
+			{
+				input.style.visibility = graph.backgroundImage != null ? 'visible' : 'hidden';
+			}
+			
 			var label = bg.getElementsByTagName('div')[0];
-			label.style.display = 'inline-block';
-			label.style.textOverflow = 'ellipsis';
-			label.style.overflow = 'hidden';
-			label.style.maxWidth = '80px';
+			
+			if (label != null)
+			{
+				label.style.display = 'inline-block';
+				label.style.textOverflow = 'ellipsis';
+				label.style.overflow = 'hidden';
+				label.style.maxWidth = '80px';
+			}
 
 			if (mxClient.IS_FF)
 			{

src/main/webapp/styles/grapheditor.css

@@ -379,6 +379,9 @@ html .geToolbarButton:active:not([disabled]) {
 	background: #eee;
 	border-radius:2px;
 }
+.geActiveButton:hover {
+	opacity: 0.7;
+}
 .geActiveButton:active {
 	opacity: 0.3;
 }