10.9.3 release

ChangeLog

@@ -1,3 +1,11 @@
+10-JUL-2019: 10.9.3
+
+- Fixes trailing newline in plain text labels
+- Allows inserting multiple lists from text
+- Adds treeMoving style for moving subtrees
+- Fixes table cell align and color editing
+- Uses mxGraph 4.0.2 beta 4
+
 09-JUL-2019: 10.9.2
 
 - Fixes reset of handles after remote style changes

VERSION

@@ -1 +1 @@
-10.9.2
+10.9.3

src/main/webapp/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 07/09/2019 03:09 PM
+# 07/10/2019 10:52 AM
 
 app.html
 index.html?offline=1

src/main/webapp/electron.js

@@ -195,6 +195,7 @@ app.on('ready', e =>
 	program
         .version(app.getVersion())
         .usage('[options] [input file/folder]')
+        .allowUnknownOption()
         .option('-c, --create', 'creates a new empty file if no file is passed')
         .option('-x, --export', 'export the input file/folder based on the given options')
         .option('-r, --recursive', 'for a folder input, recursively convert all files in sub-folders also')
@@ -212,9 +213,9 @@ app.on('ready', e =>
 			'sets the border width around the diagram (default: 0)', parseInt)
 		.option('-s, --scale <scale>',
 			'scales the diagram size', parseFloat)
-		.option('-w, --width <width>',
+		.option('--width <width>',
 			'fits the generated image/pdf into the specified width, preserves aspect ratio.', parseInt)
-		.option('-h, --height <height>',
+		.option('--height <height>',
 			'fits the generated image/pdf into the specified height, preserves aspect ratio.', parseInt)
 		.option('--crop',
 			'crops PDF to diagram size')
@@ -472,6 +473,10 @@ app.on('ready', e =>
     	
     	return;
 	}
+    else if (program.help)
+	{
+    	return;
+	}
     
     let win = createWindow()
     

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

@@ -2213,65 +2213,87 @@ var ParseDialog = function(editorUi, title, defaultType)
 			if (lines.length > 0)
 			{
 				var graph = editorUi.editor.graph;
-				
-				var listCell = new mxCell(lines[0], new mxGeometry(0, 0, 160, 26 + 4),
-				    'swimlane;fontStyle=1;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;marginBottom=0;swimlaneFillColor=#ffffff;');
-				listCell.vertex = true;
-				
-				var size = graph.getPreferredSizeForCell(listCell);
-		
-	   			if (size != null && listCell.geometry.width < size.width + 10)
-	   			{
-	   				listCell.geometry.width = size.width + 10;
-	   			}
-				
-	   			var inserted = [listCell];
-	   			
-				if (lines.length > 1)
+				var listCell = null;
+				var cells = [];
+				var x0 = 0;
+
+				for (var i = 0; i < lines.length; i++)
 				{
-					for (var i = 1; i < lines.length; i++)
+					if (lines[i].charAt(0) != ';')
 					{
-						if (lines[i] == '--')
+						if (lines[i].length == 0)
 						{
-							var divider = new mxCell('', new mxGeometry(0, 0, 40, 8), 'line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;');
-							divider.vertex = true;
-							listCell.geometry.height += divider.geometry.height;
-							listCell.insert(divider);
-							inserted.push(divider);
+							listCell = null;
 						}
-						else if (lines[i].length > 0 && lines[i].charAt(0) != ';')
+						else
 						{
-							var field = new mxCell(lines[i], new mxGeometry(0, 0, 60, 26), 'text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;');
-							field.vertex = true;
-							
-							var size = graph.getPreferredSizeForCell(field);
-		   			
-				   			if (size != null && field.geometry.width < size.width)
-				   			{
-				   				field.geometry.width = size.width;
-				   			}
-							
-				   			listCell.geometry.width = Math.max(listCell.geometry.width, field.geometry.width);
-							listCell.geometry.height += field.geometry.height;
-							listCell.insert(field);
-							inserted.push(field);
+							if (listCell == null)
+							{
+								listCell = new mxCell(lines[i], new mxGeometry(x0, 0, 160, 26 + 4),
+									'swimlane;fontStyle=1;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;marginBottom=0;swimlaneFillColor=#ffffff;');
+								listCell.vertex = true;
+								cells.push(listCell);
+
+								var size = graph.getPreferredSizeForCell(listCell);
+						
+					   			if (size != null && listCell.geometry.width < size.width + 10)
+					   			{
+					   				listCell.geometry.width = size.width + 10;
+					   			}
+					   			
+					   			x0 += listCell.geometry.width + 40;
+							}
+							else if (lines[i] == '--')
+							{
+								var divider = new mxCell('', new mxGeometry(0, 0, 40, 8), 'line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;');
+								divider.vertex = true;
+								listCell.geometry.height += divider.geometry.height;
+								listCell.insert(divider);
+							}
+							else if (lines[i].length > 0)
+							{
+								var field = new mxCell(lines[i], new mxGeometry(0, 0, 60, 26), 'text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;');
+								field.vertex = true;
+								
+								var size = graph.getPreferredSizeForCell(field);
+			   			
+					   			if (size != null && field.geometry.width < size.width)
+					   			{
+					   				field.geometry.width = size.width;
+					   			}
+								
+					   			listCell.geometry.width = Math.max(listCell.geometry.width, field.geometry.width);
+								listCell.geometry.height += field.geometry.height;
+								listCell.insert(field);
+							}
 						}
 					}
 				}
 				
-				graph.getModel().beginUpdate();
-				try
-				{
-					listCell = graph.importCells([listCell], insertPoint.x, insertPoint.y)[0];
-					graph.fireEvent(new mxEventObject('cellsInserted', 'cells', [listCell].concat(listCell.children)));
-				}
-				finally
+				if (cells.length > 0)
 				{
-					graph.getModel().endUpdate();
+					graph.getModel().beginUpdate();
+					try
+					{
+						cells = graph.importCells(cells, insertPoint.x, insertPoint.y);
+						var inserted = [];
+						
+						for (var i = 0; i < cells.length; i++)
+						{
+							inserted.push(cells[i]);
+							inserted = inserted.concat(cells[i].children);
+						}
+						
+						graph.fireEvent(new mxEventObject('cellsInserted', 'cells', inserted));
+					}
+					finally
+					{
+						graph.getModel().endUpdate();
+					}
+					
+					graph.setSelectionCells(cells);
+					graph.scrollCellToVisible(graph.getSelectionCell());
 				}
-				
-				graph.setSelectionCell(listCell);
-				graph.scrollCellToVisible(graph.getSelectionCell());
 			}
 		}
 		else
@@ -2456,7 +2478,8 @@ var ParseDialog = function(editorUi, title, defaultType)
 	{
 		if (typeSelect.value == 'list')
 		{
-			return 'Person\n-name: String\n-birthDate: Date\n--\n+getName(): String\n+setName(String): void\n+isBirthday(): boolean';
+			return 'Person\n-name: String\n-birthDate: Date\n--\n+getName(): String\n+setName(String): void\n+isBirthday(): boolean\n\n' +
+				'Address\n-street: String\n-city: String\n-state: String';
 		}
 		else if (typeSelect.value == 'table')
 		{

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

@@ -203,7 +203,9 @@
         {name: 'resizeHeight', dispName: 'Resize Height', type: 'bool', defVal: false},
         {name: 'rotatable', dispName: 'Rotatable', type: 'bool', defVal: true},
         {name: 'cloneable', dispName: 'Cloneable', type: 'bool', defVal: true},
-        {name: 'deletable', dispName: 'Deletable', type: 'bool', defVal: true}
+        {name: 'deletable', dispName: 'Deletable', type: 'bool', defVal: true},
+        {name: 'treeFolding', dispName: 'Tree Folding', type: 'bool', defVal: false},
+        {name: 'treeMoving', dispName: 'Tree Moving', type: 'bool', defVal: false}
 	];
 	/**
 	 * Default value for the CSV import dialog.

src/main/webapp/js/diagramly/Minimal.js

@@ -175,7 +175,7 @@ EditorUi.initMinimalTheme = function()
 
 	    if (ui.sidebarWindow == null)
 	    {
-	        var w = Math.min(graph.container.clientWidth - 10, 242);
+	        var w = Math.min(graph.container.clientWidth - 10, 218);
 	        
 	        ui.sidebarWindow = new WrapperWindow(ui, mxResources.get('shapes'), 10, 56,
 	           w - 6, Math.min(650, graph.container.clientHeight - 30),

src/main/webapp/js/diagramly/Trees.js

@@ -103,6 +103,21 @@
 		{
 			return model.isVertex(cell) && hasTreeParent(cell);
 		};
+
+		function isTreeMoving(cell)
+		{
+			var result = false;
+			
+			if (cell != null)
+			{
+				var state = graph.view.getState(cell);
+				var style = (state != null) ? state.style : graph.getCellStyle(cell);
+	
+				result = style['treeMoving'] == '1';
+			}
+			
+			return result;
+		};
 	
 		function hasTreeParent(cell)
 		{
@@ -112,8 +127,6 @@
 			{
 				var parent = model.getParent(cell);
 				var pstate = graph.view.getState(parent);
-				
-				var state = graph.view.getState(parent);
 				var style = (pstate != null) ? pstate.style : graph.getCellStyle(parent);
 	
 				result = style['containerType'] == 'tree';
@@ -1072,7 +1085,7 @@
 		{
 			var cells = [initialCell];
 			
-			if (isTreeVertex(initialCell) && !hasLayoutParent(initialCell))
+			if ((isTreeMoving(initialCell) || isTreeVertex(initialCell)) && !hasLayoutParent(initialCell))
 			{
 				// Gets the subtree from cell downwards
 				graph.traverse(initialCell, true, function(vertex, edge)
@@ -1102,7 +1115,7 @@
 		{
 			vertexHandlerInit.apply(this, arguments);
 			
-			if (isTreeVertex(this.state.cell) && this.graph.getOutgoingEdges(this.state.cell).length > 0)
+			if ((isTreeMoving(this.state.cell) || isTreeVertex(this.state.cell)) && this.graph.getOutgoingEdges(this.state.cell).length > 0)
 			{
 				this.moveHandle = mxUtils.createImage(moveImage);
 				this.moveHandle.setAttribute('title', 'Move Subtree');
@@ -1184,56 +1197,56 @@
 					
 					var cell = new mxCell('Central Idea', new mxGeometry(160, 60, 100, 40),
 					    	'ellipse;whiteSpace=wrap;html=1;align=center;' +
-					    	'container=1;recursiveResize=0;treeFolding=1;');
-				    	cell.vertex = true;
-				    	
-				    	var cell2 = new mxCell('Topic', new mxGeometry(320, 40, 80, 20),
-					    	'whiteSpace=wrap;html=1;rounded=1;arcSize=50;align=center;verticalAlign=middle;' +
-			    			'container=1;recursiveResize=0;strokeWidth=1;autosize=1;spacing=4;treeFolding=1;');
-				    	cell2.vertex = true;
-	
-				    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
+					    	'container=1;recursiveResize=0;treeFolding=1;treeMoving=1;');
+			    	cell.vertex = true;
+			    	
+			    	var cell2 = new mxCell('Topic', new mxGeometry(320, 40, 80, 20),
+				    	'whiteSpace=wrap;html=1;rounded=1;arcSize=50;align=center;verticalAlign=middle;' +
+		    			'container=1;recursiveResize=0;strokeWidth=1;autosize=1;spacing=4;treeFolding=1;treeMoving=1;');
+			    	cell2.vertex = true;
+
+			    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
 						'startArrow=none;endArrow=none;segment=10;curved=1;');
 					edge.geometry.relative = true;
 					edge.edge = true;
 	
 					cell.insertEdge(edge, true);
 					cell2.insertEdge(edge, false);
-						
-				    	var cell3 = new mxCell('Branch', new mxGeometry(320, 80, 72, 26),
-				    		'whiteSpace=wrap;html=1;shape=partialRectangle;top=0;left=0;bottom=1;right=0;points=[[0,1],[1,1]];' +
-				    		'strokeColor=#000000;fillColor=none;align=center;verticalAlign=bottom;routingCenterY=0.5;' +
-				    		'snapToPoint=1;container=1;recursiveResize=0;autosize=1;treeFolding=1;');
-				    	cell3.vertex = true;
-	
-				    	var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
+					
+			    	var cell3 = new mxCell('Branch', new mxGeometry(320, 80, 72, 26),
+			    		'whiteSpace=wrap;html=1;shape=partialRectangle;top=0;left=0;bottom=1;right=0;points=[[0,1],[1,1]];' +
+			    		'strokeColor=#000000;fillColor=none;align=center;verticalAlign=bottom;routingCenterY=0.5;' +
+			    		'snapToPoint=1;container=1;recursiveResize=0;autosize=1;treeFolding=1;treeMoving=1;');
+			    	cell3.vertex = true;
+
+			    	var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
 						'startArrow=none;endArrow=none;segment=10;curved=1;');
 					edge2.geometry.relative = true;
 					edge2.edge = true;
 	
 					cell.insertEdge(edge2, true);
 					cell3.insertEdge(edge2, false);
-				    	
-				    	var cell4 = new mxCell('Topic', new mxGeometry(20, 40, 80, 20),
-					    	'whiteSpace=wrap;html=1;rounded=1;arcSize=50;align=center;verticalAlign=middle;' +
-			    			'container=1;recursiveResize=0;strokeWidth=1;autosize=1;spacing=4;treeFolding=1;');
-				    	cell4.vertex = true;
-		
-				    	var edge3 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
+			    	
+			    	var cell4 = new mxCell('Topic', new mxGeometry(20, 40, 80, 20),
+				    	'whiteSpace=wrap;html=1;rounded=1;arcSize=50;align=center;verticalAlign=middle;' +
+		    			'container=1;recursiveResize=0;strokeWidth=1;autosize=1;spacing=4;treeFolding=1;treeMoving=1;');
+			    	cell4.vertex = true;
+	
+			    	var edge3 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
 						'startArrow=none;endArrow=none;segment=10;curved=1;');
 					edge3.geometry.relative = true;
 					edge3.edge = true;
 		
 					cell.insertEdge(edge3, true);
 					cell4.insertEdge(edge3, false);
-						
-				    	var cell5 = new mxCell('Branch', new mxGeometry(20, 80, 72, 26),
-				    		'whiteSpace=wrap;html=1;shape=partialRectangle;top=0;left=0;bottom=1;right=0;points=[[0,1],[1,1]];' +
-				    		'strokeColor=#000000;fillColor=none;align=center;verticalAlign=bottom;routingCenterY=0.5;' +
-				    		'snapToPoint=1;container=1;recursiveResize=0;autosize=1;treeFolding=1;');
-				    	cell5.vertex = true;
-		
-				    	var edge4 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
+					
+			    	var cell5 = new mxCell('Branch', new mxGeometry(20, 80, 72, 26),
+			    		'whiteSpace=wrap;html=1;shape=partialRectangle;top=0;left=0;bottom=1;right=0;points=[[0,1],[1,1]];' +
+			    		'strokeColor=#000000;fillColor=none;align=center;verticalAlign=bottom;routingCenterY=0.5;' +
+			    		'snapToPoint=1;container=1;recursiveResize=0;autosize=1;treeFolding=1;treeMoving=1;');
+			    	cell5.vertex = true;
+	
+			    	var edge4 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
 						'startArrow=none;endArrow=none;segment=10;curved=1;');
 					edge4.geometry.relative = true;
 					edge4.edge = true;
@@ -1257,22 +1270,22 @@
 				this.addEntry('tree mindmap central idea', function()
 				{
 					var cell = new mxCell('Central Idea', new mxGeometry(0, 0, 100, 40),
-					    	'ellipse;whiteSpace=wrap;html=1;align=center;' +
-					    	'container=1;recursiveResize=0;treeFolding=1;');
-				    	cell.vertex = true;
-				    	
-				    	return sb.createVertexTemplateFromCells([cell], cell.geometry.width,
-				    		cell.geometry.height, cell.value);
+				    	'ellipse;whiteSpace=wrap;html=1;align=center;' +
+				    	'container=1;recursiveResize=0;treeFolding=1;treeMoving=1;');
+			    	cell.vertex = true;
+			    	
+			    	return sb.createVertexTemplateFromCells([cell], cell.geometry.width,
+			    		cell.geometry.height, cell.value);
 				}),
 				this.addEntry('tree mindmap branch', function()
 				{
-				    	var cell = new mxCell('Branch', new mxGeometry(0, 0, 80, 20),
-				    		'whiteSpace=wrap;html=1;shape=partialRectangle;top=0;left=0;bottom=1;right=0;points=[[0,1],[1,1]];' +
-				    		'strokeColor=#000000;fillColor=none;align=center;verticalAlign=bottom;routingCenterY=0.5;' +
-				    		'snapToPoint=1;container=1;recursiveResize=0;autosize=1;treeFolding=1;');
-				    	cell.vertex = true;
-		
-				    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
+			    	var cell = new mxCell('Branch', new mxGeometry(0, 0, 80, 20),
+			    		'whiteSpace=wrap;html=1;shape=partialRectangle;top=0;left=0;bottom=1;right=0;points=[[0,1],[1,1]];' +
+			    		'strokeColor=#000000;fillColor=none;align=center;verticalAlign=bottom;routingCenterY=0.5;' +
+			    		'snapToPoint=1;container=1;recursiveResize=0;autosize=1;treeFolding=1;treeMoving=1;');
+			    	cell.vertex = true;
+	
+			    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
 						'startArrow=none;endArrow=none;segment=10;curved=1;');
 					edge.geometry.setTerminalPoint(new mxPoint(-40, 40), true);
 					edge.geometry.relative = true;
@@ -1286,12 +1299,12 @@
 				this.addEntry('tree mindmap sub topic', function()
 				{
 			   		var cell = new mxCell('Sub Topic', new mxGeometry(0, 0, 72, 26),
-				    		'whiteSpace=wrap;html=1;rounded=1;arcSize=50;align=center;verticalAlign=middle;' +
-				    		'container=1;recursiveResize=0;strokeWidth=1;autosize=1;spacing=4;treeFolding=1;');
-				    	cell.vertex = true;
-		
-				    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
-						'startArrow=none;endArrow=none;segment=10;curved=1;');
+			    		'whiteSpace=wrap;html=1;rounded=1;arcSize=50;align=center;verticalAlign=middle;' +
+			    		'container=1;recursiveResize=0;strokeWidth=1;autosize=1;spacing=4;treeFolding=1;treeMoving=1;');
+			    	cell.vertex = true;
+	
+			    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=entityRelationEdgeStyle;' +
+			    		'startArrow=none;endArrow=none;segment=10;curved=1;');
 					edge.geometry.setTerminalPoint(new mxPoint(-40, 40), true);
 					edge.geometry.relative = true;
 					edge.edge = true;
@@ -1306,34 +1319,34 @@
 					var orgchart = new mxCell('Orgchart', new mxGeometry(0, 0, 280, 220),
 						'swimlane;html=1;startSize=20;horizontal=1;containerType=tree;');
 					orgchart.vertex = true;
-					
-				    	var cell = new mxCell('Organization', new mxGeometry(80, 40, 120, 60),
-				    		'whiteSpace=wrap;html=1;align=center;treeFolding=1;' +
-				        	'container=1;recursiveResize=0;');
-					    graph.setAttributeForCell(cell, 'treeRoot', '1');
-				    	cell.vertex = true;
-				    	
-				    	var cell2 = new mxCell('Division', new mxGeometry(20, 140, 100, 60),
-				    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
-				    		'container=1;recursiveResize=0;treeFolding=1;');
-				    	cell2.vertex = true;
-		
-				    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0),
-				    		'edgeStyle=elbowEdgeStyle;elbow=vertical;' +
+				
+			    	var cell = new mxCell('Organization', new mxGeometry(80, 40, 120, 60),
+			    		'whiteSpace=wrap;html=1;align=center;treeFolding=1;treeMoving=1;' +
+			        	'container=1;recursiveResize=0;');
+				    graph.setAttributeForCell(cell, 'treeRoot', '1');
+			    	cell.vertex = true;
+			    	
+			    	var cell2 = new mxCell('Division', new mxGeometry(20, 140, 100, 60),
+			    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
+			    		'container=1;recursiveResize=0;treeFolding=1;treeMoving=1;');
+			    	cell2.vertex = true;
+	
+			    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0),
+			    		'edgeStyle=elbowEdgeStyle;elbow=vertical;' +
 						'startArrow=none;endArrow=none;rounded=0;');
 					edge.geometry.relative = true;
 					edge.edge = true;
 	
 					cell.insertEdge(edge, true);
 					cell2.insertEdge(edge, false);
-				    	
-				    	var cell3 = new mxCell('Division', new mxGeometry(160, 140, 100, 60),
-				    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
-				    		'container=1;recursiveResize=0;treeFolding=1;');
-				    	cell3.vertex = true;
-		
-				    	var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0),
-				    		'edgeStyle=elbowEdgeStyle;elbow=vertical;' +
+			    	
+			    	var cell3 = new mxCell('Division', new mxGeometry(160, 140, 100, 60),
+			    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
+			    		'container=1;recursiveResize=0;treeFolding=1;treeMoving=1;');
+			    	cell3.vertex = true;
+	
+			    	var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0),
+			    		'edgeStyle=elbowEdgeStyle;elbow=vertical;' +
 						'startArrow=none;endArrow=none;rounded=0;');
 					edge2.geometry.relative = true;
 					edge2.edge = true;
@@ -1352,26 +1365,26 @@
 				}),
 				this.addEntry('tree root', function()
 				{
-				    	var cell = new mxCell('Organization', new mxGeometry(0, 0, 120, 60),
-				    		'whiteSpace=wrap;html=1;align=center;treeFolding=1;' +
-				        	'container=1;recursiveResize=0;');
-					    graph.setAttributeForCell(cell, 'treeRoot', '1');
-				    	cell.vertex = true;
-				
-				    	return sb.createVertexTemplateFromCells([cell], cell.geometry.width,
-					    		cell.geometry.height, cell.value);
+			    	var cell = new mxCell('Organization', new mxGeometry(0, 0, 120, 60),
+			    		'whiteSpace=wrap;html=1;align=center;treeFolding=1;treeMoving=1;' +
+			        	'container=1;recursiveResize=0;');
+				    graph.setAttributeForCell(cell, 'treeRoot', '1');
+			    	cell.vertex = true;
+			
+			    	return sb.createVertexTemplateFromCells([cell], cell.geometry.width,
+				    		cell.geometry.height, cell.value);
 				}),
 				this.addEntry('tree division', function()
 				{
-			    		var cell = new mxCell('Division', new mxGeometry(20, 40, 100, 60),
-				    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
-				    		'container=1;recursiveResize=0;treeFolding=1;');
-				    	cell.vertex = true;
-				    	
-				    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0),
-				    		'edgeStyle=elbowEdgeStyle;elbow=vertical;' +
+		    		var cell = new mxCell('Division', new mxGeometry(20, 40, 100, 60),
+			    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
+			    		'container=1;recursiveResize=0;treeFolding=1;treeMoving=1;');
+			    	cell.vertex = true;
+			    	
+			    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0),
+			    		'edgeStyle=elbowEdgeStyle;elbow=vertical;' +
 						'startArrow=none;endArrow=none;rounded=0;');
-				    	edge.geometry.setTerminalPoint(new mxPoint(0, 0), true);
+			    	edge.geometry.setTerminalPoint(new mxPoint(0, 0), true);
 					edge.geometry.relative = true;
 					edge.edge = true;
 	
@@ -1382,25 +1395,25 @@
 				}),
 				this.addEntry('tree sub sections', function()
 				{
-				    	var cell = new mxCell('Sub Section', new mxGeometry(0, 0, 100, 60),
-				    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
-				    		'container=1;recursiveResize=0;treeFolding=1;');
-				    	cell.vertex = true;
-		
-				    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=orthogonalEdgeStyle;' +
+			    	var cell = new mxCell('Sub Section', new mxGeometry(0, 0, 100, 60),
+			    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
+			    		'container=1;recursiveResize=0;treeFolding=1;treeMoving=1;');
+			    	cell.vertex = true;
+	
+			    	var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=orthogonalEdgeStyle;' +
 						'startArrow=none;endArrow=none;rounded=0;targetPortConstraint=eastwest;sourcePortConstraint=northsouth;');
 					edge.geometry.setTerminalPoint(new mxPoint(110, -40), true);
 					edge.geometry.relative = true;
 					edge.edge = true;
 	
 					cell.insertEdge(edge, false);
-		
-				    	var cell2 = new mxCell('Sub Section', new mxGeometry(120, 0, 100, 60),
-				    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
-				    		'container=1;recursiveResize=0;treeFolding=1;');
-				    	cell2.vertex = true;
-		
-				    	var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=orthogonalEdgeStyle;' +
+	
+			    	var cell2 = new mxCell('Sub Section', new mxGeometry(120, 0, 100, 60),
+			    		'whiteSpace=wrap;html=1;align=center;verticalAlign=middle;' +
+			    		'container=1;recursiveResize=0;treeFolding=1;treeMoving=1;');
+			    	cell2.vertex = true;
+	
+			    	var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=orthogonalEdgeStyle;' +
 						'startArrow=none;endArrow=none;rounded=0;targetPortConstraint=eastwest;sourcePortConstraint=northsouth;');
 					edge2.geometry.setTerminalPoint(new mxPoint(110, -40), true);
 					edge2.geometry.relative = true;

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

@@ -996,7 +996,7 @@ EditorUi.prototype.sidebarFooterHeight = 34;
  * Specifies the position of the horizontal split bar. Default is 240 or 118 for
  * screen widths <= 640px.
  */
-EditorUi.prototype.hsplitPosition = (screen.width <= 640) ? 118 : 240;
+EditorUi.prototype.hsplitPosition = (screen.width <= 640) ? 118 : ((urlParams['sidebar-entries'] != 'large') ? 212 : 240);
 
 /**
  * Specifies if animations are allowed in <executeLayout>. Default is true.

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

@@ -3388,7 +3388,7 @@ TextFormatPanel.prototype.addFont = function(container)
 		
 		var btns = [
 		        this.editorUi.toolbar.addButton('geSprite-strokecolor', mxResources.get('borderColor'),
-				mxUtils.bind(this, function()
+				mxUtils.bind(this, function(evt)
 				{
 					if (currentTable != null)
 					{
@@ -3400,23 +3400,30 @@ TextFormatPanel.prototype.addFont = function(container)
 							    });
 						this.editorUi.pickColor(color, function(newColor)
 						{
+							var targetElt = (tableCell != null && (evt == null || !mxEvent.isShiftDown(evt))) ? tableCell : currentTable;
+							
+							graph.processElements(targetElt, function(elt)
+							{
+								elt.style.border = null;
+							});
+							
 							if (newColor == null || newColor == mxConstants.NONE)
 							{
-								currentTable.removeAttribute('border');
-								currentTable.style.border = '';
-								currentTable.style.borderCollapse = '';
+								targetElt.removeAttribute('border');
+								targetElt.style.border = '';
+								targetElt.style.borderCollapse = '';
 							}
 							else
 							{
-								currentTable.setAttribute('border', '1');
-								currentTable.style.border = '1px solid ' + newColor;
-								currentTable.style.borderCollapse = 'collapse';
+								targetElt.setAttribute('border', '1');
+								targetElt.style.border = '1px solid ' + newColor;
+								targetElt.style.borderCollapse = 'collapse';
 							}
 						});
 					}
 				}), tablePanel2),
 				this.editorUi.toolbar.addButton('geSprite-fillcolor', mxResources.get('backgroundColor'),
-				mxUtils.bind(this, function()
+				mxUtils.bind(this, function(evt)
 				{
 					// Converts rgb(r,g,b) values
 					if (currentTable != null)
@@ -3428,13 +3435,20 @@ TextFormatPanel.prototype.addFont = function(container)
 							    });
 						this.editorUi.pickColor(color, function(newColor)
 						{
+							var targetElt = (tableCell != null && (evt == null || !mxEvent.isShiftDown(evt))) ? tableCell : currentTable;
+							
+							graph.processElements(targetElt, function(elt)
+							{
+								elt.style.backgroundColor = null;
+							});
+							
 							if (newColor == null || newColor == mxConstants.NONE)
 							{
-								currentTable.style.backgroundColor = '';
+								targetElt.style.backgroundColor = '';
 							}
 							else
 							{
-								currentTable.style.backgroundColor = newColor;
+								targetElt.style.backgroundColor = newColor;
 							}
 						});
 					}
@@ -3789,7 +3803,7 @@ TextFormatPanel.prototype.addFont = function(container)
 							setSelected(sup, hasParentOrOnlyChild('SUP'));
 							setSelected(sub, hasParentOrOnlyChild('SUB'));
 							
-							if (graph.cellEditor.isAllTextSelected())
+							if (!graph.cellEditor.isTableSelected())
 							{
 								var align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
 								setSelected(left, align == mxConstants.ALIGN_LEFT);
@@ -3812,7 +3826,7 @@ TextFormatPanel.prototype.addFont = function(container)
 							
 							currentTable = graph.getParentByName(node, 'TABLE', graph.cellEditor.textarea);
 							tableRow = (currentTable == null) ? null : graph.getParentByName(node, 'TR', currentTable);
-							tableCell = (currentTable == null) ? null : graph.getParentByName(node, 'TD', currentTable);
+							tableCell = (currentTable == null) ? null : graph.getParentByNames(node, ['TD', 'TH'], currentTable);
 							tableWrapper.style.display = (currentTable != null) ? '' : 'none';
 							
 							if (document.activeElement != input)

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

@@ -2953,9 +2953,10 @@ Graph.prototype.isCellFoldable = function(cell)
 	var state = this.view.getState(cell);
 	var style = (state != null) ? state.style : this.getCellStyle(cell);
 	
-	return this.foldingEnabled && !this.isCellLocked(cell) &&
+	return this.foldingEnabled && (style['treeFolding'] == '1' ||
+		(!this.isCellLocked(cell) &&
 		((this.isContainer(cell) && style['collapsible'] != '0') ||
-		(!this.isContainer(cell) && style['collapsible'] == '1'));
+		(!this.isContainer(cell) && style['collapsible'] == '1'))));
 };
 
 /**
@@ -6716,6 +6717,29 @@ if (typeof mxVertexHandler != 'undefined')
 			return node;
 		};
 		
+		/**
+		 * Returns the first ancestor of the current selection with the given name.
+		 */
+		Graph.prototype.getParentByNames = function(node, names, stopAt)
+		{
+			while (node != null)
+			{
+				if (mxUtils.indexOf(names, node.nodeName) >= 0)
+				{
+					return node;
+				}
+		
+				if (node == stopAt)
+				{
+					return null;
+				}
+				
+				node = node.parentNode;
+			}
+			
+			return node;
+		};
+		
 		/**
 		 * Selects the given node.
 		 */
@@ -7025,59 +7049,28 @@ if (typeof mxVertexHandler != 'undefined')
 			
 			return state != null && state.style['html'] == 1;
 		};
-	
+
 		/**
-		 * Returns true if all selected text (or the cursor) is not
-		 * within a block element or within the only block element.
+		 * Returns true if all selected text is inside a table element.
 		 */
-		mxCellEditor.prototype.isAllTextSelected = function()
+		mxCellEditor.prototype.isTableSelected = function()
 		{
-			var par = null;
-			
-			if (document.selection)
-			{
-				par = document.selection.createRange().parentElement();
-			}
-			else
-			{
-				var selection = window.getSelection();
-				
-				if (selection.rangeCount > 0)
-				{
-					par = selection.getRangeAt(0).commonAncestorContainer;
-				}
-			}
-			
-			var block = false;
-			var css = null;
-			
-			while (par != null && par != this.textarea)
-			{
-				css = (par.nodeType == mxConstants.NODETYPE_ELEMENT) ?
-					mxUtils.getCurrentStyle(par) : null;
-				block = block || (css != null && css.display === 'block');
-			
-				par = par.parentNode;
-
-				if (block && par.childNodes.length > 1)
-				{
-					return false;
-				}
-			}
-			
-			return true;
+			return this.graph.getParentByName(
+				this.graph.getSelectedElement(),
+				'TABLE', this.textarea) != null;
 		};
 		
 		/**
-		 * Returns true if all selected text (or the cursor) is not
-		 * within a block element or within the only block element.
+		 * Sets the alignment of the current selected cell. This sets the
+		 * alignment in the cell style, removes all alignment within the
+		 * text and invokes the built-in alignment function.
+		 * 
+		 * Only the built-in function is invoked if shift is pressed or
+		 * if table cells are selected and shift is not pressed.
 		 */
 		mxCellEditor.prototype.alignText = function(align, evt)
 		{
-			// Ignore isAllTextSelected() to produce consistent behaviour
-			// regardless of width of current selected block (if the widest
-			// block is selected the alignment changes are not visible)
-			if (evt == null || !mxEvent.isShiftDown(evt))
+			if (!this.isTableSelected() == (evt == null || !mxEvent.isShiftDown(evt)))
 			{
 				this.graph.cellEditor.setAlign(align);
 				
@@ -7360,8 +7353,9 @@ if (typeof mxVertexHandler != 'undefined')
 					window.setTimeout(mxUtils.bind(this, function()
 					{
 						// Paste from Word or Excel
-						if (this.textarea.innerHTML.indexOf('<o:OfficeDocumentSettings>') >= 0 ||
-							this.textarea.innerHTML.indexOf('<!--[if !mso]>') >= 0)
+						if (this.textarea != null &&
+							(this.textarea.innerHTML.indexOf('<o:OfficeDocumentSettings>') >= 0 ||
+							this.textarea.innerHTML.indexOf('<!--[if !mso]>') >= 0))
 						{
 							checkNode(this.textarea, clone);
 						}

src/main/webapp/js/mxgraph/Sidebar.js

@@ -182,6 +182,7 @@ Sidebar.prototype.thumbBorder = 2;
  */
 if (urlParams['sidebar-entries'] != 'large')
 {
+	Sidebar.prototype.thumbPadding = (document.documentMode >= 5) ? 0 : 1;
 	Sidebar.prototype.thumbBorder = 1;
 	Sidebar.prototype.thumbWidth = 32;
 	Sidebar.prototype.thumbHeight = 30;

src/main/webapp/js/mxgraph/Toolbar.js

@@ -450,7 +450,7 @@ Toolbar.prototype.createTextToolbar = function()
 	var elt = this.addMenuFunction('geIcon geSprite geSprite-table', mxResources.get('table'), false, mxUtils.bind(this, function(menu)
 	{
 		var elt = graph.getSelectedElement();
-		var cell = graph.getParentByName(elt, 'TD', graph.cellEditor.text2);
+		var cell = graph.getParentByNames(elt, ['TD', 'TH'], graph.cellEditor.text2);
 		var row = graph.getParentByName(elt, 'TR', graph.cellEditor.text2);
 
 		if (row == null)
@@ -469,7 +469,7 @@ Toolbar.prototype.createTextToolbar = function()
 				}
 				catch (e)
 				{
-					mxUtils.alert(mxResources.get('error') + ': ' + e.message);
+					this.editorUi.handleError(e);
 				}
 			}), null, 'geIcon geSprite geSprite-insertcolumnbefore');
 			elt.setAttribute('title', mxResources.get('insertColumnBefore'));
@@ -482,7 +482,7 @@ Toolbar.prototype.createTextToolbar = function()
 				}
 				catch (e)
 				{
-					mxUtils.alert(mxResources.get('error') + ': ' + e.message);
+					this.editorUi.handleError(e);
 				}
 			}), null, 'geIcon geSprite geSprite-insertcolumnafter');
 			elt.setAttribute('title', mxResources.get('insertColumnAfter'));
@@ -497,7 +497,7 @@ Toolbar.prototype.createTextToolbar = function()
 					}
 					catch (e)
 					{
-						mxUtils.alert(mxResources.get('error') + ': ' + e.message);
+						this.editorUi.handleError(e);
 					}
 				}
 			}), null, 'geIcon geSprite geSprite-deletecolumn');
@@ -511,7 +511,7 @@ Toolbar.prototype.createTextToolbar = function()
 				}
 				catch (e)
 				{
-					mxUtils.alert(mxResources.get('error') + ': ' + e.message);
+					this.editorUi.handleError(e);
 				}
 			}), null, 'geIcon geSprite geSprite-insertrowbefore');
 			elt.setAttribute('title', mxResources.get('insertRowBefore'));
@@ -524,7 +524,7 @@ Toolbar.prototype.createTextToolbar = function()
 				}
 				catch (e)
 				{
-					mxUtils.alert(mxResources.get('error') + ': ' + e.message);
+					this.editorUi.handleError(e);
 				}
 			}), null, 'geIcon geSprite geSprite-insertrowafter');
 			elt.setAttribute('title', mxResources.get('insertRowAfter'));
@@ -537,7 +537,7 @@ Toolbar.prototype.createTextToolbar = function()
 				}
 				catch (e)
 				{
-					mxUtils.alert(mxResources.get('error') + ': ' + e.message);
+					this.editorUi.handleError(e);
 				}
 			}), null, 'geIcon geSprite geSprite-deleterow');
 			elt.setAttribute('title', mxResources.get('deleteRow'));