13.2.4 release

ChangeLog

@@ -1,3 +1,9 @@
+13-JUN-2020: 13.2.4
+
+- Uses tables in Misc and ER sidebar
+- Adds table size in Arrange panel
+- Uses mxGraph 4.2.0 beta 9
+
 11-JUN-2020: 13.2.3
 
 - Uses base for fonts in SVG export

VERSION

@@ -1 +1 @@
-13.2.3
+13.2.4

src/main/java/com/mxgraph/online/AbsAuthServlet.java

@@ -16,6 +16,8 @@ import java.net.URL;
 import java.security.SecureRandom;
 import java.util.HashMap;
 import java.util.Map;
+import java.util.logging.Level;
+import java.util.logging.Logger;
 
 import javax.cache.Cache;
 import javax.cache.CacheException;
@@ -33,6 +35,7 @@ import com.google.appengine.api.memcache.stdimpl.GCacheFactory;
 @SuppressWarnings("serial")
 abstract public class AbsAuthServlet extends HttpServlet
 {
+	private static final Logger log = Logger.getLogger(AbsAuthServlet.class.getName());
 	private static final boolean DEBUG = false;
 	private static final String SEPARATOR = "/:::/";
 	public static final int X_WWW_FORM_URLENCODED = 1;
@@ -128,8 +131,8 @@ abstract public class AbsAuthServlet extends HttpServlet
 		{
 			String state = new BigInteger(256, random).toString(32);
 			String key = new BigInteger(256, random).toString(32);
-			String casheKey = request.getRemoteAddr() + ":" + key;
-			tokens.put(casheKey, state);
+			tokens.put(key, state);
+			log.log(Level.INFO, "AUTH-SERVLET: [" + request.getRemoteAddr() + "] Added state (" + key + " -> " + state + ")");
 			response.setStatus(HttpServletResponse.SC_OK);
 			//Chrome blocks this cookie when draw.io is running in an iframe. The cookie is added to parent frame. TODO FIXME
 			response.setHeader("Set-Cookie", STATE_COOKIE + "=" + key + "; Max-Age=" + COOKIE_AGE + ";path=" + cookiePath + "; Secure; HttpOnly; SameSite=none"); //10 min to finish auth
@@ -176,8 +179,9 @@ abstract public class AbsAuthServlet extends HttpServlet
 					if (STATE_COOKIE.equals(cookie.getName()))
 					{
 						//Get the cached state based on the cookie key 
-						String cacheKey = request.getRemoteAddr() + ":" + cookie.getValue();
+						String cacheKey = cookie.getValue();
 						cookieToken = (String) tokens.get(cacheKey);
+						log.log(Level.INFO, "AUTH-SERVLET: [" + request.getRemoteAddr() + "] Found cookie state (" + cacheKey + " -> " + cookieToken + ")");
 						//Delete cookie & cache after being used since it is a single use
 						tokens.remove(cacheKey);
 						response.setHeader("Set-Cookie", STATE_COOKIE + "= ;path=" + cookiePath + "; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; HttpOnly; SameSite=none");
@@ -217,6 +221,7 @@ abstract public class AbsAuthServlet extends HttpServlet
 			//TODO after code is propagated, remove the version check
 			else if ("2".equals(version) && (stateToken == null || !stateToken.equals(cookieToken)))
 			{
+				log.log(Level.WARNING, "AUTH-SERVLET: [" + request.getRemoteAddr() + "] STATE MISMATCH (state: " + stateToken + " != cookie: " + cookieToken + ")");
 				response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
 			}
 			else

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

@@ -1748,7 +1748,7 @@ CreateGraphDialog.prototype.connectImage = new mxImage((mxClient.IS_SVG) ? 'data
 /**
  * Constructs a new parse dialog.
  */
-var BackgroundImageDialog = function(editorUi, applyFn)
+var BackgroundImageDialog = function(editorUi, applyFn, img)
 {
 	var div = document.createElement('div');
 	div.style.whiteSpace = 'nowrap';
@@ -1761,8 +1761,6 @@ var BackgroundImageDialog = function(editorUi, applyFn)
 	mxUtils.write(div, mxResources.get('image') + ' ' + mxResources.get('url') + ':');
 	mxUtils.br(div);
 	
-	var img = editorUi.editor.graph.backgroundImage;
-	
 	var urlInput = document.createElement('input');
 	urlInput.setAttribute('type', 'text');
 	urlInput.style.marginTop = '4px';
@@ -1771,27 +1769,48 @@ var BackgroundImageDialog = function(editorUi, applyFn)
 	urlInput.value = (img != null) ? img.src : '';
 	
 	var resetting = false;
+	var ignoreEvt = false;
 	
-	var urlChanged = function()
+	var urlChanged = function(evt, done)
 	{
-		if (!resetting && urlInput.value != '' && !editorUi.isOffline())
+		// Skips blur event if called from apply button
+		if (evt == null || !ignoreEvt)
 		{
-			editorUi.loadImage(mxUtils.trim(urlInput.value), function(img)
+			urlInput.value = mxUtils.trim(urlInput.value);
+				
+			if (!resetting && urlInput.value != '' && !editorUi.isOffline())
 			{
-				widthInput.value = img.width;
-				heightInput.value = img.height;
-			}, function()
+				editorUi.loadImage(urlInput.value, function(img)
+				{
+					widthInput.value = img.width;
+					heightInput.value = img.height;
+					
+					if (done != null)
+					{
+						done(urlInput.value);
+					}
+				}, function()
+				{
+					editorUi.showError(mxResources.get('error'), mxResources.get('fileNotFound'), mxResources.get('ok'));
+					widthInput.value = '';
+					heightInput.value = '';
+					
+					if (done != null)
+					{
+						done(null);
+					}
+				});
+			}
+			else
 			{
-				editorUi.showError(mxResources.get('error'), mxResources.get('fileNotFound'), mxResources.get('ok'));
-				urlInput.value = '';
 				widthInput.value = '';
 				heightInput.value = '';
-			});
-		}
-		else
-		{
-			widthInput.value = '';
-			heightInput.value = '';
+				
+				if (done != null)
+				{
+					done('');
+				}
+			}
 		}
 	};
 	
@@ -1913,12 +1932,7 @@ var BackgroundImageDialog = function(editorUi, applyFn)
 		heightInput.value = '';
 		resetting = false;
 	});
-	mxEvent.addListener(resetBtn, 'mousedown', function()
-	{
-		// Blocks processing a image URL while clicking reset
-		resetting = true;
-	});
-	mxEvent.addListener(resetBtn, 'touchstart', function()
+	mxEvent.addGestureListeners(resetBtn, function()
 	{
 		// Blocks processing a image URL while clicking reset
 		resetting = true;
@@ -1955,6 +1969,7 @@ var BackgroundImageDialog = function(editorUi, applyFn)
 	
 	var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
 	{
+		resetting = true;
 		editorUi.hideDialog();
 	});
 	
@@ -1965,11 +1980,22 @@ var BackgroundImageDialog = function(editorUi, applyFn)
 		btns.appendChild(cancelBtn);
 	}
 
-	var applyBtn = mxUtils.button(mxResources.get('apply'), function()
+	applyBtn = mxUtils.button(mxResources.get('apply'), function()
 	{
 		editorUi.hideDialog();
-		applyFn((urlInput.value != '') ? new mxImage(mxUtils.trim(urlInput.value), widthInput.value, heightInput.value) : null);
+		
+		urlChanged(null, function(url)
+		{
+			applyFn((url != '' && url != null) ? new mxImage(urlInput.value,
+				widthInput.value, heightInput.value) : null, url == null);
+		});
+	});
+	
+	mxEvent.addGestureListeners(applyBtn, function()
+	{
+		ignoreEvt = true;
 	});
+	
 	applyBtn.className = 'geBtn gePrimaryBtn';
 	btns.appendChild(applyBtn);
 	
@@ -2115,8 +2141,8 @@ var ParseDialog = function(editorUi, title, defaultType)
 						name = name.substring(0, name.lastIndexOf(' '));
 					}
 					
-					tableCell = new mxCell(name, new mxGeometry(dx, 0, 160, 26),
-						'swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;marginBottom=0;align=center;');
+					tableCell = new mxCell(name, new mxGeometry(dx, 0, 160, 40),
+						'shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;align=center;resizeLast=1;');
 					tableCell.vertex = true;
 					cells.push(tableCell);
 					
@@ -2126,9 +2152,6 @@ var ParseDialog = function(editorUi, title, defaultType)
 		   			{
 		   				tableCell.geometry.width = size.width + 10;
 		   			}
-		   			
-		   			// For primary key lookups
-		   			rows = {};
 				}
 				else if (tableCell != null && tmp.charAt(0) == ')')
 				{
@@ -2143,28 +2166,32 @@ var ParseDialog = function(editorUi, title, defaultType)
 					{
 						var pk = name.toLowerCase().indexOf('primary key');
 						name = name.replace(/primary key/i, '');
-						var rowCell = new mxCell(name, new mxGeometry(0, 0, 90, 26),
-							'shape=partialRectangle;top=0;left=0;right=0;bottom=0;align=left;verticalAlign=top;spacingTop=-2;fillColor=none;spacingLeft=34;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;dropTarget=0;');
-			   			rowCell.vertex = true;
-		
-						var left = sb.cloneCell(rowCell, (pk > 0) ? 'PK' : '');
-			   			left.connectable = false;
-			   			left.style = 'shape=partialRectangle;top=0;left=0;bottom=0;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[];portConstraint=eastwest;part=1;'
-			   			left.geometry.width = 30;
-			   			left.geometry.height = 26;
-			   			rowCell.insert(left);
-			   			
-			   			var size = editorUi.editor.graph.getPreferredSizeForCell(rowCell);
+						
+						var rowCell = new mxCell('', new mxGeometry(0, 0, 160, 30),
+							'shape=partialRectangle;collapsible=0;dropTarget=0;pointerEvents=0;fillColor=none;' +
+							'points=[[0,0.5],[1,0.5]];portConstraint=eastwest;top=0;left=0;right=0;bottom=' +
+							((pk > 0) ? '1' : '0') + ';');
+						rowCell.vertex = true;
+						
+						var left = new mxCell((pk > 0) ? 'PK' : '', new mxGeometry(0, 0, 30, 30),
+							'shape=partialRectangle;overflow=hidden;connectable=0;fillColor=none;top=0;left=0;bottom=0;right=0;' + ((pk > 0) ? 'fontStyle=1;' : ''));
+						left.vertex = true;
+						rowCell.insert(left);
+						
+						var right = new mxCell(name, new mxGeometry(30, 0, 130, 30),
+							'shape=partialRectangle;overflow=hidden;connectable=0;fillColor=none;top=0;left=0;bottom=0;right=0;align=left;spacingLeft=6;' + ((pk > 0) ? 'fontStyle=5;' : ''));
+						right.vertex = true;
+						rowCell.insert(right);
+						
+			   			var size = editorUi.editor.graph.getPreferredSizeForCell(right);
 			   			
-			   			if (size != null && tableCell.geometry.width < size.width + 10)
+			   			if (size != null && tableCell.geometry.width < size.width + 30)
 			   			{
-			   				tableCell.geometry.width = Math.min(220, size.width + 10);
+			   				tableCell.geometry.width = Math.min(320, Math.max(tableCell.geometry.width, size.width + 30));
 			   			}
 			   			
 			   			tableCell.insert(rowCell);
-			   			tableCell.geometry.height += 26;
-			   			
-			   			rows[rowCell.value] = rowCell;
+			   			tableCell.geometry.height += 30;
 					}
 				}
 			}
@@ -9020,7 +9047,7 @@ var EditShapeDialog = function(editorUi, cell, title, w, h)
 	this.container = table;
 };
 
-var CustomDialog = function(editorUi, content, okFn, cancelFn, okButtonText, helpLink, buttonsContent, hideCancel)
+var CustomDialog = function(editorUi, content, okFn, cancelFn, okButtonText, helpLink, buttonsContent, hideCancel, cancelButtonText)
 {
 	var div = document.createElement('div');
 	div.appendChild(content);
@@ -9045,7 +9072,7 @@ var CustomDialog = function(editorUi, content, okFn, cancelFn, okButtonText, hel
 		btns.appendChild(helpBtn);
 	}
 	
-	var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
+	var cancelBtn = mxUtils.button(cancelButtonText || mxResources.get('cancel'), function()
 	{
 		editorUi.hideDialog();
 		
@@ -10476,7 +10503,7 @@ AspectDialog.prototype.createPageItem = function(pageId, pageName, pageNode, pag
 	var $listItem = document.createElement('div');
 	$listItem.className = 'geAspectDlgListItem';
 	$listItem.setAttribute('data-page-id', pageId)
-	$listItem.innerHTML = '<div style="max-width: 100%; max-height: 100%;"></div><div class="geAspectDlgListItemText">' + pageName + '</div>';
+	$listItem.innerHTML = '<div style="max-width: 100%; max-height: 100%;"></div><div class="geAspectDlgListItemText">' + mxUtils.htmlEntities(pageName) + '</div>';
 	
 	this.pagesContainer.appendChild($listItem);
 	
@@ -10519,7 +10546,7 @@ AspectDialog.prototype.createLayerItem = function(layer, pageId, graph, pageNode
 	var $listItem = document.createElement('div');
 	$listItem.setAttribute('data-layer-id', layer.id);
 	$listItem.className = 'geAspectDlgListItem';
-	$listItem.innerHTML = '<div style="max-width: 100%; max-height: 100%;"></div><div class="geAspectDlgListItemText">' + layerName + '</div>';
+	$listItem.innerHTML = '<div style="max-width: 100%; max-height: 100%;"></div><div class="geAspectDlgListItemText">' + mxUtils.htmlEntities(layerName) + '</div>';
 	this.layersContainer.appendChild($listItem);
 	
 	this.createViewer($listItem.childNodes[0], pageNode, layer.id);

src/main/webapp/js/diagramly/DrawioFile.js

@@ -1521,7 +1521,15 @@ DrawioFile.prototype.addUnsavedStatus = function(err)
 			
 			if (EditorUi.enableDrafts && this.getMode() == null)
 			{
-				this.saveDraft();
+				if (this.saveDraftThread != null)
+				{
+					window.clearTimeout(this.saveDraftThread);
+				}
+				
+				this.saveDraftThread = window.setTimeout(mxUtils.bind(this, function()
+				{
+					this.saveDraft();
+				}), 0);
 			}
 		}
 	}

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

@@ -3920,6 +3920,7 @@
 			div.style.position = 'relative';
 			div.style.padding = '0';
 			var grid = document.createElement('table');
+			grid.className = 'geProperties';
 			grid.style.whiteSpace = 'nowrap';
 			grid.style.width = '100%';
 			//create header row

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

@@ -3554,19 +3554,19 @@
 	/**
 	 * Hides the current menu.
 	 */
-	EditorUi.prototype.showBackgroundImageDialog = function(apply)
+	EditorUi.prototype.showBackgroundImageDialog = function(apply, img)
 	{
-		apply = (apply != null) ? apply : mxUtils.bind(this, function(image)
+		apply = (apply != null) ? apply : mxUtils.bind(this, function(image, failed)
 		{
-			var change = new ChangePageSetup(this, null, image);
-			change.ignoreColor = true;
-			
-			this.editor.graph.model.execute(change);
+			if (!failed)
+			{
+				var change = new ChangePageSetup(this, null, image);
+				change.ignoreColor = true;
+				
+				this.editor.graph.model.execute(change);
+			}
 		});
-		var dlg = new BackgroundImageDialog(this, mxUtils.bind(this, function(image)
-		{
-			apply(image);
-		}));
+		var dlg = new BackgroundImageDialog(this, apply, img);
 		this.showDialog(dlg.container, 360, 200, true, true);
 		dlg.init();
 	};

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

@@ -1318,9 +1318,9 @@
 					var bbox = graph.getBoundingBoxFromGeometry(cells);
 					cells = graph.moveCells(cells, -bbox.x, -bbox.y);
 					
-					editorUi.showTextDialog('Create Sidebar Entry', 'sb.createVertexTemplateFromData(\'' +
-						Graph.compress(mxUtils.getXml(graph.encodeCells(cells))) +
-						'\', width, height, \'Title\');');
+					editorUi.showTextDialog('Create Sidebar Entry', 'this.addDataEntry(\'tag1 tag2\', ' +
+						bbox.width + ', ' + bbox.height + ', \'The Title\', \'' +
+						Graph.compress(mxUtils.getXml(graph.encodeCells(cells))) + '\'),');
 				}
 			}));
 	

src/main/webapp/js/mxgraph/Editor.js

@@ -1557,23 +1557,26 @@ var PageSetupDialog = function(editorUi)
 		{
 			changeImageLink.removeAttribute('title');
 			changeImageLink.style.fontSize = '';
-			changeImageLink.innerHTML = mxResources.get('change') + '...';
+			changeImageLink.innerHTML = mxUtils.htmlEntities(mxResources.get('change')) + '...';
 		}
 		else
 		{
 			changeImageLink.setAttribute('title', newBackgroundImage.src);
 			changeImageLink.style.fontSize = '11px';
-			changeImageLink.innerHTML = newBackgroundImage.src.substring(0, 42) + '...';
+			changeImageLink.innerHTML = mxUtils.htmlEntities(newBackgroundImage.src.substring(0, 42)) + '...';
 		}
 	};
 	
 	mxEvent.addListener(changeImageLink, 'click', function(evt)
 	{
-		editorUi.showBackgroundImageDialog(function(image)
+		editorUi.showBackgroundImageDialog(function(image, failed)
 		{
-			newBackgroundImage = image;
-			updateBackgroundImage();
-		});
+			if (!failed)
+			{
+				newBackgroundImage = image;
+				updateBackgroundImage();
+			}
+		}, newBackgroundImage);
 		
 		mxEvent.consume(evt);
 	});
@@ -1605,10 +1608,11 @@ var PageSetupDialog = function(editorUi)
 	var applyBtn = mxUtils.button(mxResources.get('apply'), function()
 	{
 		editorUi.hideDialog();
+		var gridSize = parseInt(gridSizeInput.value);
 		
-		if (graph.gridSize !== gridSizeInput.value)
+		if (!isNaN(gridSize) && graph.gridSize !== gridSize)
 		{
-			graph.setGridSize(parseInt(gridSizeInput.value));
+			graph.setGridSize(gridSize);
 		}
 
 		var change = new ChangePageSetup(editorUi, newBackgroundColor,

src/main/webapp/js/mxgraph/EditorUi.js

@@ -4120,7 +4120,7 @@ EditorUi.prototype.showDataDialog = function(cell)
 /**
  * Hides the current menu.
  */
-EditorUi.prototype.showBackgroundImageDialog = function(apply)
+EditorUi.prototype.showBackgroundImageDialog = function(apply, img)
 {
 	apply = (apply != null) ? apply : mxUtils.bind(this, function(image)
 	{
@@ -4130,7 +4130,7 @@ EditorUi.prototype.showBackgroundImageDialog = function(apply)
 		this.editor.graph.model.execute(change);
 	});
 	
-	var newValue = mxUtils.prompt(mxResources.get('backgroundImage'), '');
+	var newValue = mxUtils.prompt(mxResources.get('backgroundImage'), (img != null) ? img.src : '');
 	
 	if (newValue != null && newValue.length > 0)
 	{
@@ -4138,11 +4138,11 @@ EditorUi.prototype.showBackgroundImageDialog = function(apply)
 		
 		img.onload = function()
 		{
-			apply(new mxImage(newValue, img.width, img.height));
+			apply(new mxImage(newValue, img.width, img.height), false);
 		};
 		img.onerror = function()
 		{
-			apply(null);
+			apply(null, true);
 			mxUtils.alert(mxResources.get('fileNotFound'));
 		};
 		

src/main/webapp/js/mxgraph/Format.js

@@ -112,9 +112,9 @@ Format.prototype.createSelectionState = function()
 Format.prototype.initSelectionState = function()
 {
 	return {vertices: [], edges: [], x: null, y: null, width: null, height: null, style: {},
-		containsImage: false, containsLabel: false, fill: true, glass: true, rounded: true,
-		comic: true, autoSize: false, image: true, shadow: true, lineJumps: true,
-		resizable: true, movable: true, rotatable: true};
+		containsImage: false, containsLabel: false, fill: true, glass: true, rounded: true,  comic: true,
+		autoSize: false, image: true, shadow: true, lineJumps: true, resizable: true,
+		table: false, cell: false, row: false, movable: true, rotatable: true};
 };
 
 /**
@@ -130,6 +130,9 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
 		result.rotatable = result.rotatable && graph.isCellRotatable(cell);
 		result.movable = result.movable && graph.isCellMovable(cell) &&
 			!graph.isTableRow(cell) && !graph.isTableCell(cell);
+		result.table = result.table || graph.isTable(cell);
+		result.cell = result.cell || graph.isTableCell(cell);
+		result.row = result.row || graph.isTableRow(cell);
 		result.vertices.push(cell);
 		var geo = graph.getCellGeometry(cell);
 		
@@ -1698,7 +1701,7 @@ ArrangePanel.prototype.addGroupOps = function(div)
 		count++;
 	}
 	else if (graph.getSelectionCount() == 1 && !graph.getModel().isEdge(cell) && !graph.isSwimlane(cell) &&
-			graph.getModel().getChildCount(cell) > 0)
+		!graph.isTable(cell) && !ss.row && !ss.cell && graph.getModel().getChildCount(cell) > 0)
 	{
 		btn = mxUtils.button(mxResources.get('ungroup'), function(evt)
 		{
@@ -1754,8 +1757,8 @@ ArrangePanel.prototype.addGroupOps = function(div)
 		}
 	}
 	
-	if (graph.getSelectionCount() == 1 && graph.getModel().isVertex(cell) &&
-   		graph.getModel().isVertex(graph.getModel().getParent(cell)))
+	if (graph.getSelectionCount() == 1 && graph.getModel().isVertex(cell) && !ss.row &&
+		!ss.cell && graph.getModel().isVertex(graph.getModel().getParent(cell)))
 	{
 		if (count > 0)
 		{
@@ -1971,7 +1974,7 @@ ArrangePanel.prototype.addAngle = function(div)
 	var update = null;
 	var btn = null;
 	
-	if (ss.rotatable)
+	if (ss.rotatable && !ss.table && !ss.row && !ss.cell)
 	{
 		mxUtils.write(span, mxResources.get('angle'));
 		div.appendChild(span);
@@ -2152,7 +2155,17 @@ ArrangePanel.prototype.addGeometry = function(container)
 	});
 	
 	div.appendChild(autosizeBtn);
-	this.addLabel(div, mxResources.get('width'), 84);
+	
+	if (rect.row)
+	{
+		width.style.visibility = 'hidden';
+		width.nextSibling.style.visibility = 'hidden';
+	}
+	else
+	{
+		this.addLabel(div, mxResources.get('width'), 84);
+	}
+	
 	this.addLabel(div, mxResources.get('height'), 20);
 	mxUtils.br(div);
 
@@ -2165,15 +2178,30 @@ ArrangePanel.prototype.addGeometry = function(container)
 		mxConstants.STYLE_ASPECT, null, 'fixed', 'null');
 	opt.style.width = '100%';
 	wrapper.appendChild(opt);
-	div.appendChild(wrapper);
+		
+	if (!rect.cell && !rect.row)
+	{
+		div.appendChild(wrapper);
+	}
+	else
+	{
+		autosizeBtn.style.visibility = 'hidden';
+	}
 	
 	var constrainCheckbox = opt.getElementsByTagName('input')[0];
 	this.addKeyHandler(width, listener);
 	this.addKeyHandler(height, listener);
 	
-	widthUpdate = this.addGeometryHandler(width, function(geo, value)
+	widthUpdate = this.addGeometryHandler(width, function(geo, value, cell)
 	{
-		if (geo.width > 0)
+		if (graph.isTableCell(cell))
+		{
+			graph.setTableColumnWidth(cell, value - geo.width, true);
+			
+			// Blocks processing in caller
+			return true;
+		}
+		else if (geo.width > 0)
 		{
 			var value = Math.max(1, panel.fromUnit(value));
 			
@@ -2185,9 +2213,21 @@ ArrangePanel.prototype.addGeometry = function(container)
 			geo.width = value;
 		}
 	});
-	heightUpdate = this.addGeometryHandler(height, function(geo, value)
+	heightUpdate = this.addGeometryHandler(height, function(geo, value, cell)
 	{
-		if (geo.height > 0)
+		if (graph.isTableCell(cell))
+		{
+			cell = graph.model.getParent(cell);
+		}
+		
+		if (graph.isTableRow(cell))
+		{
+			graph.setTableRowHeight(cell, value - geo.height);
+			
+			// Blocks processing in caller
+			return true;
+		}
+		else if (geo.height > 0)
 		{
 			var value = Math.max(1, panel.fromUnit(value));
 			
@@ -2200,7 +2240,7 @@ ArrangePanel.prototype.addGeometry = function(container)
 		}
 	});
 	
-	if (rect.resizable)
+	if (rect.resizable || rect.row || rect.cell)
 	{
 		container.appendChild(div);
 	}
@@ -2226,6 +2266,7 @@ ArrangePanel.prototype.addGeometry = function(container)
 	}, this.getUnitStep(), null, null, this.isFloatUnit());
 
 	mxUtils.br(div2);
+
 	this.addLabel(div2, mxResources.get('left'), 84);
 	this.addLabel(div2, mxResources.get('top'), 20);
 	
@@ -2350,17 +2391,19 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn)
 							if (geo != null)
 							{
 								geo = geo.clone();
-								fn(geo, value);
-								
-								var state = graph.view.getState(cells[i]);
 								
-								if (state != null && graph.isRecursiveVertexResize(state))
+								if (!fn(geo, value, cells[i]))
 								{
-									graph.resizeChildCells(cells[i], geo);
+									var state = graph.view.getState(cells[i]);
+									
+									if (state != null && graph.isRecursiveVertexResize(state))
+									{
+										graph.resizeChildCells(cells[i], geo);
+									}
+									
+									graph.getModel().setGeometry(cells[i], geo);
+									graph.constrainChildCells(cells[i]);
 								}
-								
-								graph.getModel().setGeometry(cells[i], geo);
-								graph.constrainChildCells(cells[i]);
 							}
 						}
 					}
@@ -5545,7 +5588,7 @@ DiagramFormatPanel.prototype.addView = function(div)
 		{
 			var btn = mxUtils.button(mxResources.get('image'), function(evt)
 			{
-				ui.showBackgroundImageDialog();
+				ui.showBackgroundImageDialog(null, ui.editor.graph.backgroundImage);
 				mxEvent.consume(evt);
 			})
 		

src/main/webapp/js/mxgraph/Graph.js

@@ -4464,9 +4464,9 @@ Graph.prototype.createTable = function(rowCount, colCount, w, h, title, startSiz
 	tableStyle = (tableStyle != null) ? tableStyle : 'shape=table;html=1;whiteSpace=wrap;startSize=' +
 		((title != null) ? startSize : '0') + ';container=1;collapsible=0;childLayout=tableLayout;';
 	rowStyle = (rowStyle != null) ? rowStyle : 'shape=partialRectangle;html=1;whiteSpace=wrap;collapsible=0;dropTarget=0;' +
-    	'pointerEvents=0;fillColor=none;strokeColor=none;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;left=0;right=0;';
+    	'pointerEvents=0;fillColor=none;top=0;left=0;bottom=0;right=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;';
 	cellStyle = (cellStyle != null) ? cellStyle : 'shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;' +
-		'strokeColor=none;fillColor=none;';
+		'overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;';
 	
 	return this.createParent(this.createVertex(null, null, (title != null) ? title : '',
 		0, 0, colCount * w, rowCount * h + ((title != null) ? startSize : 0), tableStyle),
@@ -4810,11 +4810,12 @@ TableLayout.prototype.getRowLayout = function(row, width)
  * 
  * Places the cells at the given positions in the given row.
  */
-TableLayout.prototype.layoutRow = function(row, positions, height)
+TableLayout.prototype.layoutRow = function(row, positions, height, tw)
 {
 	var model = this.graph.getModel();
 	var cells = model.getChildCells(row, true);
 	var off = this.graph.getActualStartSize(row, true);
+	var x = off.x;
 	var sw = 0;
 	
 	if (positions != null)
@@ -4838,17 +4839,21 @@ TableLayout.prototype.layoutRow = function(row, positions, height)
 			{
 				cell.x = positions[i];
 				cell.width = positions[i + 1] - cell.x;
+				
+				// Fills with last cell if not enough cells
+				if (i == cells.length - 1 && i < positions.length - 2)
+				{
+					cell.width = tw - cell.x - off.x - off.width;
+				}
 			}
 			else
 			{
+				cell.x = x;
+				x += cell.width;
+				
 				if (i == cells.length - 1)
 				{
-					var geo = this.graph.getCellGeometry(row);
-	
-					if (geo != null)
-					{
-						cell.width = geo.width - off.x - off.width - sw;
-					}
+					cell.width = tw - off.x - off.width - sw;
 				}
 				else
 				{	
@@ -4935,7 +4940,7 @@ TableLayout.prototype.execute = function(parent)
 					}
 					
 					// Updates cell geometries
-					sw = Math.max(sw, this.layoutRow(rows[i], pos, row.height));
+					sw = Math.max(sw, this.layoutRow(rows[i], pos, row.height, tw));
 				}
 				
 				if (fixedRows && th < sh)
@@ -6235,7 +6240,8 @@ if (typeof mxVertexHandler != 'undefined')
 		{
 			mapping = (mapping != null) ? mapping : new Object();
 			
-			// Updates source and target table heights for moving rows
+			// Updates source and target table heights and matches
+			// column count for moving rows between tables
 			for (var i = 0; i < cells.length; i++)
 			{
 				if (target != null && this.isTableRow(cells[i]))
@@ -6268,6 +6274,34 @@ if (typeof mxVertexHandler != 'undefined')
 							table.height += row.height;
 							this.model.setGeometry(target, table);
 						}
+						
+						// Matches column count
+						var rows = this.model.getChildCells(target, true);
+						
+						if (rows.length > 0)
+						{
+							var sourceCols = this.model.getChildCells(cells[i], true);
+							var cols = this.model.getChildCells(rows[0], true);
+							var count = cols.length - sourceCols.length;
+							
+							if (count > 0)
+							{
+								for (var j = 0; j < count; j++)
+								{
+									var cell = this.cloneCell(sourceCols[sourceCols.length - 1]);
+									cell.value = '';
+									
+									this.model.add(cells[i], cell);
+								}
+							}
+							else if (count < 0)
+							{
+								for (var j = 0; j > count; j--)
+								{
+									this.model.remove(sourceCols[sourceCols.length - count - 1]);
+								}
+							}	 
+						}
 					}
 				}
 			}
@@ -6277,7 +6311,7 @@ if (typeof mxVertexHandler != 'undefined')
 			if (clone)
 			{
 				this.updateCustomLinks(this.createCellMapping(mapping,
-						this.createCellLookup(cells)), result);
+					this.createCellLookup(cells)), result);
 			}
 			
 			return result;
@@ -7501,6 +7535,15 @@ if (typeof mxVertexHandler != 'undefined')
 			cells = (cells != null) ? cells : this.getSelectionCells();
 			append = (append != null) ? append : true;
 			
+			// Duplicates rows for table cells
+			for (var i = 0; i < cells.length; i++)
+			{
+				if (this.isTableCell(cells[i]))
+				{
+					cells[i] = this.model.getParent(cells[i]);
+				}
+			}
+			
 			cells = this.model.getTopmostCells(cells);
 			
 			var model = this.getModel();
@@ -9685,19 +9728,6 @@ if (typeof mxVertexHandler != 'undefined')
 			return result;
 		};
 
-		/**
-		 * Creates the shape used to draw the selection border.
-		 */
-		var vertexHandlerIsMoveCustomHandlePreviewToFront = mxVertexHandler.prototype.isMoveCustomHandlePreviewToFront;
-		mxVertexHandler.prototype.isMoveCustomHandlePreviewToFront = function(handle)
-		{
-			return vertexHandlerIsMoveCustomHandlePreviewToFront.apply(this, arguments) ||
-				(this.graph.isTable(this.state.cell) && (mxUtils.getValue(this.state.style,
-				mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) == mxConstants.NONE ||
-				(this.graph.isSwimlane(this.state.cell) && mxUtils.getValue(this.state.style,
-				mxConstants.STYLE_SWIMLANE_FILLCOLOR, mxConstants.NONE) == mxConstants.NONE)));
-		};
-		
 		/**
 		 * Creates the shape used to draw the selection border.
 		 */
@@ -9902,15 +9932,19 @@ if (typeof mxVertexHandler != 'undefined')
 								}
 							};
 							
+							var shiftPressed = false;
+							
 							handle.setPosition = function(bounds, pt, me)
 							{
 								dx = Math.max(Graph.minTableColumnWidth - bounds.width,
 									pt.x - bounds.x - bounds.width);
+								shiftPressed = mxEvent.isShiftDown(me.getEvent());
 								
-								if (nextCol != null)
+								if (nextCol != null && !shiftPressed)
 								{
-									dx = Math.min(nextCol.x + nextCol.width - colState.x -
-										colState.width - Graph.minTableColumnWidth, dx);
+									dx = Math.min((nextCol.x + nextCol.width - colState.x -
+										colState.width) / graph.view.scale -
+										Graph.minTableColumnWidth, dx);
 								}
 							};
 							
@@ -9918,8 +9952,8 @@ if (typeof mxVertexHandler != 'undefined')
 							{
 								if (dx != 0)
 								{
-									graph.setTableColumnWidth(this.state.cell, dx,
-										mxEvent.isShiftDown(me.getEvent()));
+									graph.setTableColumnWidth(this.state.cell,
+										dx, shiftPressed);
 								}
 								
 								dx = 0;
@@ -9955,7 +9989,7 @@ if (typeof mxVertexHandler != 'undefined')
 							{
 								if (this.shape != null && this.state.shape != null)
 								{
-									this.shape.stroke = (dy == 0) ? mxConstants.NONE : sel.stroke;;
+									this.shape.stroke = (dy == 0) ? mxConstants.NONE : sel.stroke;
 									this.shape.bounds.x = this.state.x;
 									this.shape.bounds.width = this.state.width;
 									this.shape.bounds.y = this.state.y + this.state.height +
@@ -10049,6 +10083,7 @@ if (typeof mxVertexHandler != 'undefined')
 					if (rowState != null && model.isVertex(rowState.cell))
 					{
 						// Adds handle to move row
+						// LATER: Move to overlay pane to hide during zoom but keep padding
 						var moveHandle = mxUtils.createImage(Editor.rowMoveImage);
 						moveHandle.style.position = 'absolute';
 						moveHandle.style.cursor = 'pointer';

src/main/webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draw.io",
-  "version": "13.1.4",
+  "version": "13.2.4",
   "description": "diagrams.net desktop",
   "main": "electron.js",
   "scripts": {

src/main/webapp/styles/grapheditor.css

@@ -777,6 +777,9 @@ html td.mxWindowTitle {
  	color:rgb(112, 112, 112);
  	padding:4px;
 }
+table.geProperties tr td {
+	height:21px;
+}
 .gePropHeader, .gePropRow {
 	border: 1px solid #e9e9e9;	
 }