drawio-offline/js/diagramly/graphml/mxGraphMlCodec.js

diagrams.net desktop

function mxGraphMlCodec()
{
	this.cachedRefObj = {};
};


mxGraphMlCodec.prototype.refRegexp = /^\{y\:GraphMLReference\s+(\d+)\}$/;
mxGraphMlCodec.prototype.staticRegexp = /^\{x\:Static\s+(.+)\.(.+)\}$/;

mxGraphMlCodec.prototype.decode = function (xml, callback, onError)
{
	try
	{
		var doc = mxUtils.parseXml(xml);
		
		var graphs = this.getDirectChildNamedElements(doc.documentElement, mxGraphMlConstants.GRAPH);
		
		this.initializeKeys(doc.documentElement);
		
		var mxFile = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><mxfile>";
		for (var i = 0; i < graphs.length; i++)
		{
			var pageElement = graphs[i];
	
			var graph = this.createMxGraph();
			var model = graph.getModel();
			
	        model.beginUpdate();
	        try 
	        {
		        this.nodesMap = {};
		    	this.edges = [];
		        this.importGraph(pageElement, graph, graph.getDefaultParent());
		    	
		    	for (var i = 0; i < this.edges.length; i++)
				{
		    		var edgesObj = this.edges[i];
		    		var edges = edgesObj.edges;
		    		var parent = edgesObj.parent;
		    		var dx = edgesObj.dx, dy = edgesObj.dy;
		
			    	for (var j = 0; j < edges.length; j++)
			    	{
			    		this.importEdge(edges[j], graph, parent, dx, dy);
			    	}
				}
	        }
	        catch(e)
	        {
	        	console.log(e);
	        	throw e;
	        }
	        finally
	        {
	        	model.endUpdate();
	        }
	    	
	    	//update edges' labels to convert their labels relative coordinate to ours
	        model.beginUpdate();
	        try 
	        {
	        	var cells = graph.getModel().cells;
	        	var tr = graph.view.translate;
	        	
	        	for (var id in cells)
	    		{
	        		var edge = cells[id];
	        		
	        		if (edge.edge && edge.getChildCount() > 0)
	    			{
	        			for (var i = 0; i < edge.getChildCount(); i++)
	    				{
	        				var cell = edge.children[i];
	                		var geo = cell.geometry;
	                		
	                		if (!geo.adjustIt) continue;
	                		
		        			var state = graph.view.getState(edge);
		        			var abdPs = state.absolutePoints;
		        			var p0 = abdPs[0];
		        			var pe = abdPs[abdPs.length - 1];
		        			
		        			var ratio = geo.x;
		        			var dist = geo.y;
		        			var dx = pe.x - p0.x
		        			var dy = pe.y - p0.y
		 
		        			var x = p0.x + ratio * dx;
		        			var y = p0.y + ratio * dy;
		        			
		        			var d = Math.sqrt(dx*dx + dy*dy);
		        			dx /= d;
		        			dy /= d;
		        			
		        			x -= dist * dy;
		        			y += dist * dx;
		        			
		        			var np = graph.view.getRelativePoint(state, x, y);
		        			geo.x = np.x;
		        			geo.y = np.y;
		    			}
		    		}
	    		}
	        }
	        catch(e)
	        {
	        	console.log(e);
	        	throw e;
	        }
	        finally
	        {
	        	model.endUpdate();
	        }
	    	
	        mxFile += this.processPage(graph, i+1);
		}
	
		mxFile += "</mxfile>";
		
		if (callback)
		{
			callback(mxFile);
		}
	}
    catch(e)
    {
    	if (onError) 
    	{
    		onError(e);
    	}
    }
};

mxGraphMlCodec.prototype.initializeKeys = function (graphmlElement)
{
	var keys = this.getDirectChildNamedElements(graphmlElement, mxGraphMlConstants.KEY);
	
	this.nodesKeys = {};
	this.edgesKeys = {};
	this.portsKeys = {};
	this.sharedData = {};
	
	this.nodesKeys[mxGraphMlConstants.NODE_GEOMETRY] = {}; 
	this.nodesKeys[mxGraphMlConstants.USER_TAGS] = {};
	this.nodesKeys[mxGraphMlConstants.NODE_STYLE] = {};
	this.nodesKeys[mxGraphMlConstants.NODE_LABELS] = {};
	this.nodesKeys[mxGraphMlConstants.NODE_GRAPHICS] = {};
	this.edgesKeys[mxGraphMlConstants.EDGE_GEOMETRY] = {};
	this.edgesKeys[mxGraphMlConstants.EDGE_STYLE] = {}; 
	this.edgesKeys[mxGraphMlConstants.EDGE_LABELS] = {}; 
	this.portsKeys[mxGraphMlConstants.PORT_LOCATION_PARAMETER] = {};
	this.portsKeys[mxGraphMlConstants.PORT_STYLE] = {};
	this.portsKeys[mxGraphMlConstants.PORT_VIEW_STATE] = {};
	
	var sharedDataId;
	
	for (var i = 0; i < keys.length; i++)
	{
		var keyObj = this.dataElem2Obj(keys[i]);
	
		var id = keyObj[mxGraphMlConstants.ID];
		var _for = keyObj[mxGraphMlConstants.KEY_FOR];
		var attName = keyObj[mxGraphMlConstants.KEY_NAME];
		var yType = keyObj[mxGraphMlConstants.KEY_YTYPE];
		
		if (attName == mxGraphMlConstants.SHARED_DATA) sharedDataId = id;
		
		attName = attName? attName : yType
		
		//TODO handle the defaults inside these keys
		switch (_for)
		{
			case mxGraphMlConstants.NODE:
				this.nodesKeys[attName] = {key: id, keyObj: keyObj};
			break;
			case mxGraphMlConstants.EDGE:
				this.edgesKeys[attName] = {key: id, keyObj: keyObj};
			break;
			case mxGraphMlConstants.PORT:
				this.portsKeys[attName] = {key: id, keyObj: keyObj};
			break;
			case mxGraphMlConstants.ALL:
				var obj = {key: id, keyObj: keyObj};
				this.nodesKeys[attName] = obj;
				this.edgesKeys[attName] = obj;
				this.portsKeys[attName] = obj;
			break;
		}
	}
	
	var data = this.getDirectChildNamedElements(graphmlElement, mxGraphMlConstants.DATA);
	
	for (var i = 0; i < data.length; i++)
	{
		var key = data[i].getAttribute(mxGraphMlConstants.KEY);
		
		if (key == sharedDataId)
		{
			var sharedData = this.getDirectChildNamedElements(data[i], mxGraphMlConstants.Y_SHARED_DATA);
			
			for (var j = 0; j < sharedData.length; j++)
			{
				var dataItems = this.getDirectChildElements(sharedData[j]);
				
				for (var k = 0; k < dataItems.length; k++)
				{
					var dkey = dataItems[k].getAttribute(mxGraphMlConstants.X_KEY);
					this.sharedData[dkey] = dataItems[k];
				}
			}
		}
		else
		{
			var resources = this.getDirectChildNamedElements(data[i], mxGraphMlConstants.Y_RESOURCES);
			
			for (var j = 0; j < resources.length; j++)
			{
				var dataItems = this.getDirectChildElements(resources[j]);
				
				for (var k = 0; k < dataItems.length; k++)
				{
					var dkey = dataItems[k].getAttribute(mxGraphMlConstants.ID);
					this.sharedData[dkey] = dataItems[k];
				}
			}
		}
	}
};

mxGraphMlCodec.prototype.parseAttributes = function (elem, obj) 
{
	var atts = elem.attributes;
	if (atts)
	{
		
		for (var i = 0; i < atts.length; i++)
		{
			var val = atts[i].nodeValue;
			var ref = this.refRegexp.exec(val);
			var staticMem = this.staticRegexp.exec(val);
			
			if (ref)
			{
				var key = ref[1];
				var subObj = this.cachedRefObj[key];
				
				//already cached
				if (!subObj)
				{
					subObj = {};
					subObj[this.sharedData[key].nodeName] = this.dataElem2Obj(this.sharedData[key]);
					this.cachedRefObj[key] = subObj;
				}
				
				obj[atts[i].nodeName] = subObj;
			}
			else if (staticMem)
			{
				obj[atts[i].nodeName] = {};
				obj[atts[i].nodeName][staticMem[1]] = staticMem[2];
			}
			else
			{
				obj[atts[i].nodeName] = val;
			}
		}
	}
};

mxGraphMlCodec.prototype.dataElem2Obj = function (elem) 
{
	var ref = this.getDirectFirstChildNamedElements(elem, mxGraphMlConstants.GRAPHML_REFERENCE)
					|| elem.getAttribute(mxGraphMlConstants.REFID);
	var refKey = null;
	var origElem = elem;
	var obj = {};
	
	if (ref) 
	{
		var key = (typeof ref === "string")? ref : ref.getAttribute(mxGraphMlConstants.RESOURCE_KEY);
		var cachedObj = this.cachedRefObj[key];
		
		//already cached
		if (cachedObj)
		{
			//parse all attributes to update the reference
			this.parseAttributes(elem, cachedObj);
			return cachedObj;
		}
		
		elem = this.sharedData[key];
		refKey = key;
	}

	//parse all attributes
	this.parseAttributes(elem, obj);

	for (var i = 0; i < elem.childNodes.length; i++)
	{
		var child = elem.childNodes[i]; 
		
		if (child.nodeType == 1)
		{
			var attName = child.nodeName;
			
			//Special types of node (x:List and x:Static)
			if (attName == mxGraphMlConstants.X_LIST) 
			{
				var arr = [];
				var arrayElem = this.getDirectChildElements(child);
				
				for (var j = 0; j < arrayElem.length; j++)
				{
					attName = arrayElem[j].nodeName;
					arr.push(this.dataElem2Obj(arrayElem[j]));
				}
					
				obj[attName] = arr;
			}
			else if (attName == mxGraphMlConstants.X_STATIC)
			{
				var member = child.getAttribute(mxGraphMlConstants.MEMBER);
				var dotPos = member.lastIndexOf('.');
				obj[member.substr(0, dotPos)] = member.substr(dotPos + 1);
			}
			else
			{
				var dotPos = attName.lastIndexOf(".");
				
				if (dotPos > 0)
				{
					attName = attName.substr(dotPos + 1);
				}
				
				if (obj[attName] != null)
				{
					if (!(obj[attName] instanceof Array))
					{
						obj[attName] = [obj[attName]];
					}
					
					obj[attName].push(this.dataElem2Obj(child));
				}
				else
				{
					obj[attName] = this.dataElem2Obj(child);
				}
			}
		} 
		else if ((child.nodeType == 3 || child.nodeType == 4) && child.textContent.trim())
		{
			obj["#text"] = child.textContent;
		}
	}
	
	//cache referenced objects
	if (refKey)
	{
		var tmpObj = {};
		//parse all attributes before following the reference
		this.parseAttributes(origElem, tmpObj);
		tmpObj[this.sharedData[refKey].nodeName] = obj; 
		this.cachedRefObj[refKey] = tmpObj;
		return tmpObj;
	}
	
	return obj;
};

mxGraphMlCodec.prototype.mapArray = function(arr, mapping, map)
{
	var obj = {};
	for (var k = 0; k < arr.length; k++)
	{
		if (arr[k].name)
		{
			obj[arr[k].name] = arr[k].value || arr[k]; 
		}
	}
	this.mapObject(obj, mapping, map);
}
//Use mapping information to fill the map based on obj content
//TODO yjs looks like they need special handling
mxGraphMlCodec.prototype.mapObject = function (obj, mapping, map)
{
	//defaults can be overridden by actual values later
	if (mapping.defaults)
	{
		for (var key in mapping.defaults)
		{
			map[key] = mapping.defaults[key];
		}
	}
	
	for (var key in mapping)
	{
		var parts = key.split('.');
		
		var val = obj;
		
		for (var i = 0; i < parts.length; i++)
		{
			if (!val) break;
			
			val = val[parts[i]];
		}
		
		if (val == null && obj) //some vals doesn't need to be split
		{
			val = obj[key];
		}
		
		if (val != null)
		{
			var mappingObj = mapping[key];
			if (typeof val === "string")
			{
				if (typeof mappingObj === "string")
				{
					map[mappingObj] = val.toLowerCase();
				}
				else if (typeof mappingObj === "object")
				{
					var modVal = val.toLowerCase();
					switch(mappingObj.mod)
					{
						case "color": //mxGraph support alfa in colors in the standard format
							if (val.indexOf("#") == 0 && val.length == 9)
							{
								modVal = "#" + val.substr(3) + val.substr(1,2);
							}
							else if (val == "TRANSPARENT")
							{
								modVal = "none";
							}
						break;
						case "shape":
//							console.log(val.toLowerCase());
							modVal = mxGraphMlShapesMap[val.toLowerCase()];
						break;
						case "bpmnOutline":
//							console.log(val.toLowerCase());
							modVal = mxGraphMlShapesMap.bpmnOutline[val.toLowerCase()];
						break;
						case "bpmnSymbol":
//							console.log(val.toLowerCase());
							modVal = mxGraphMlShapesMap.bpmnSymbol[val.toLowerCase()];
						break;
						case "bool":
							modVal = val == "true"? "1" : "0";
						break;
						case "scale":
							try {
								modVal = parseFloat(val) * mappingObj.scale;
							} catch(e) {
								//nothing!
							}
						break;
						case "arrow":
							modVal = mxGraphMlArrowsMap[val];
						break;
					}
					if (modVal != null)
						map[mappingObj.key] = modVal;
				}
				else
				{
					mappingObj(val, map);
				}
			}
			else if (val instanceof Array)
			{
				this.mapArray(val, mappingObj, map);
			}
			else if (val.name != null && val.value != null) //this is the case when a single y:Property is used 
			{
				this.mapArray([val], mappingObj, map);
			}
			else
			{
				this.mapObject(val, mappingObj, map);
			}
		}
	}
};

mxGraphMlCodec.prototype.createMxGraph = function ()
{
    var graph = new mxGraph();
//    graph.setExtendParents(false);
//    graph.setExtendParentsOnAdd(false);
//    graph.setConstrainChildren(false);
//    graph.setHtmlLabels(true);
//    graph.getModel().maintainEdgeParent = false;
    return graph;
}

mxGraphMlCodec.prototype.importGraph = function (pageElement, graph, parent)
{
	var nodes = this.getDirectChildNamedElements(pageElement, mxGraphMlConstants.NODE);

	var p = parent;
	var dx = 0, dy = 0;
	while (p && p.geometry)
	{
		dx += p.geometry.x;
		dy += p.geometry.y;
		
		p = p.parent;
	}

	for (var i = 0; i < nodes.length; i++)
	{
		this.importNode(nodes[i], graph, parent, dx, dy);
	}
	
	this.edges.push({
		edges: this.getDirectChildNamedElements(pageElement, mxGraphMlConstants.EDGE),
		parent: parent,
		dx: dx,
		dy: dy
	});	
};

//FIXME port 0.5, 0.5 push the edge to the other side (bpmn example)
mxGraphMlCodec.prototype.importPort = function (portElement, portsMap)
{
	var name = portElement.getAttribute(mxGraphMlConstants.PORT_NAME);
	var portObj = {};
	
	var data = this.getDirectChildNamedElements(portElement, mxGraphMlConstants.DATA);
	
	for (var i = 0; i < data.length; i++)
	{
		var d = data[i];
		var key = d.getAttribute(mxGraphMlConstants.KEY);
		
		var dataObj = this.dataElem2Obj(d);
//		console.log(dataObj);
		if (dataObj.key == this.portsKeys[mxGraphMlConstants.PORT_LOCATION_PARAMETER].key) 
		{
			this.mapObject(dataObj, {
				"y:FreeNodePortLocationModelParameter.Ratio": function(val, map)
				{
					var parts = val.split(',');
					map["pos"] = {x: parts[0], y: parts[1]};
				}
			}, portObj);
		} 
		/*
		else if (dataObj.key == this.portsKeys[mxGraphMlConstants.PORT_STYLE].key) 
		{
			
		}
		else if (dataObj.key == this.portsKeys[mxGraphMlConstants.PORT_VIEW_STATE].key) 
		{
			
		}*/
	}
	
	portsMap[name] = portObj;
};

mxGraphMlCodec.prototype.styleMap2Str = function (styleMap)
{
	var semi = "";
	var str = "";
	
	for (var key in styleMap)
	{
		str += semi + key + "=" + styleMap[key];
		semi = ";";
	}
	
	return str;
};

mxGraphMlCodec.prototype.importNode = function (nodeElement, graph, parent, dx, dy)
{
	var data = this.getDirectChildNamedElements(nodeElement, mxGraphMlConstants.DATA);
	var v;
	var id = nodeElement.getAttribute(mxGraphMlConstants.ID);
	
	var node = new mxCell();
	node.vertex = true;
	node.geometry = new mxGeometry(0,0,30,30); //some node has no geometry, this is the default

	graph.addCell(node, parent);

	var style = {graphMlID: id};
	var mlStyleObj = null;
	var mlTemplate = null;
	var mlUserTags = null;
	var lblObj = null;
	var lbls = null;
	
	for (var i = 0; i < data.length; i++)
	{
		var d = data[i];
		var dataObj = this.dataElem2Obj(d);
		
		if (dataObj.key)
		{
			if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_GEOMETRY].key) 
			{
				this.addNodeGeo(node, dataObj, dx, dy);
			} 
			else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.USER_TAGS].key) 
			{
				mlUserTags = dataObj;
			}
			else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_STYLE].key) 
			{
	//			console.log(JSON.stringify(dataObj));
				mlStyleObj = dataObj;
				if (dataObj["yjs:StringTemplateNodeStyle"])
				{
					mlTemplate = dataObj["yjs:StringTemplateNodeStyle"]["#text"];
				} 
				else
				{
					this.addNodeStyle(node, dataObj, style);
				}
			}
			else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_LABELS].key) 
			{
				lblObj = dataObj;
			}
			else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_GRAPHICS].key)
			{
				var shape = null, key = null;
				for (var key in dataObj)
				{
					if (key == "key" || key == "#text") continue;
					
					//Special case when a node has multiple graphics
					//TODO support the open/closed states
					if (key == "y:ProxyAutoBoundsNode") 
					{
						var realizers = dataObj[key]["y:Realizers"];
						if (realizers)
						{
							for (var key2 in realizers)
							{
								if (key2 == "active" || key2 == "#text") continue;
								
								shape = realizers[key2][realizers["active"]];
								dataObj = {};
								dataObj[key2] = shape;
								break;
							}
						}
					}
					else
					{
						shape = dataObj[key];
					}
					break;
				}
				if (shape)
				{
					if (shape[mxGraphMlConstants.GEOMETRY])
					{
						this.addNodeGeo(node, shape[mxGraphMlConstants.GEOMETRY], dx, dy);
					}
					
					if (shape[mxGraphMlConstants.NODE_LABEL])
					{
						lblObj = shape[mxGraphMlConstants.NODE_LABEL];
					}
				}
				mlStyleObj = dataObj;
				this.addNodeStyle(node, dataObj, style);
			}
		}
	}
	
	var ports = this.getDirectChildNamedElements(nodeElement, mxGraphMlConstants.PORT);
	var portsMap = {};
	
	for (var i = 0; i < ports.length; i++)
	{
		this.importPort(ports[i], portsMap);
	}
	
	if (mlTemplate)
	{
		this.handleTemplates(mlTemplate, mlUserTags, node, style);
	}
	
	this.handleFixedRatio(node, style);

	//handle special compound shapes
	this.handleCompoundShape(node, style, mlStyleObj, lbls);

	//fix for stroke size of zero
	if (style["strokeWidth"] == 0)
	{
		style["strokeColor"] = "none";
	}
	
	node.style = this.styleMap2Str(style);
	
	var subGraphs = this.getDirectChildNamedElements(nodeElement, mxGraphMlConstants.GRAPH);
	
	for (var i = 0; i < subGraphs.length; i++)
	{
		this.importGraph(subGraphs[i], graph, node, portsMap);
	}	

	//handle labels after node geometry is determined. It is also the last such that labels are on top
	if (lblObj)
		lbls = this.addLabels(node, lblObj, style, graph);

	this.nodesMap[id] = {node: node, ports: portsMap};
};

mxGraphMlCodec.prototype.addNodeStyle = function (node, dataObj, style)
{
	//TODO move these static mapping objects outside such that they are defined once only
	var dashStyleFn = function(val, map)
	{
		if (val == "line") return;
		
		map["dashed"] = 1;
		//map["fixDash"] = 1;
		var pattern = null;
		switch(val)
		{
			case "DashDot":
				pattern = "3 1 1 1";
			break;
			case "Dot":
				pattern = "1 1";
			break;
			case "DashDotDot":
				pattern = "3 1 1 1 1 1";
			break;
			case "Dash":
				pattern = "3 1";
			break;
			case "dotted":
				pattern = "1 3";
			break;
			case "dashed":
				pattern = "5 2";
			break;
			default:
				pattern = val.replace(/0/g, '1');
		}
		
		if (pattern)
		{
			//Some patterns in graphML has only one number
			if (pattern.indexOf(" ") < 0) 
			{
				pattern = pattern + " " + pattern;
			}
			map["dashPattern"] = pattern;
		}
	};
	
	var styleCommonMap = 
	{
		"shape": {key: "shape", mod: "shape"},
		"y:Shape.type": {key: "shape", mod: "shape"},
		"configuration": {key: "shape", mod: "shape"},
		"type": {key: "shape", mod: "shape"},
		"assetName": {key: "shape", mod: "shape"},
		"activityType": {key: "shape", mod: "shape"},
		"fill": {key: "fillColor", mod: "color"},
		"fill.yjs:SolidColorFill.color": {key: "fillColor", mod: "color"},
		"fill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"},
		"y:Fill": {
			"color": {key: "fillColor", mod: "color"},
			//"color2": {key: "gradientColor", mod: "color"}, //??
			"transparent": function(val, map)
			{
				if (val == "true")
				{
					map["fillColor"] = "none";
				}
			}
		},
		"y:BorderStyle": {
			"color": {key: "strokeColor", mod: "color"},
			"width": "strokeWidth",
			"hasColor":  function(val, map)
			{
				if (val == "false")
				{
					map["strokeColor"] = "none";
				}
			},
			"type": dashStyleFn
			//"raised": ??
		},
		"stroke": {key: "strokeColor", mod: "color"},
		"stroke.yjs:Stroke":
		{
			"dashStyle": dashStyleFn,
			"dashStyle.yjs:DashStyle.dashes": dashStyleFn,
			"fill": {key: "strokeColor", mod: "color"},
			"fill.yjs:SolidColorFill.color": {key: "strokeColor", mod: "color"},
			//"lineCap": "", //??
			"thickness.sys:Double": "strokeWidth",
			"thickness": "strokeWidth"
		}
	};

	var assetNodesStyle = mxUtils.clone(styleCommonMap);
	assetNodesStyle["defaults"] = {
		"fillColor": "#CCCCCC",
		"strokeColor": "#6881B3"
	};
	
	var bpmnActivityStyle = mxUtils.clone(styleCommonMap);
	bpmnActivityStyle["defaults"] = {
		"shape": "ext;rounded=1",
		"fillColor": "#FFFFFF",
		"strokeColor": "#000090"
	};
	
	var bpmnGatewayStyle = mxUtils.clone(styleCommonMap);
	bpmnGatewayStyle["defaults"] = {
		"shape": "rhombus;fillColor=#FFFFFF;strokeColor=#FFCD28"
	};
	
	var bpmnConversationStyle = mxUtils.clone(styleCommonMap);
	bpmnConversationStyle["defaults"] = {
		"shape": "hexagon",
		"strokeColor": "#007000"
	};
	
	var bpmnEventStyle = mxUtils.clone(styleCommonMap);
	bpmnEventStyle["defaults"] = {
		"shape": "mxgraph.bpmn.shape;perimeter=ellipsePerimeter;symbol=general",
		"outline": "standard"
	};
	bpmnEventStyle["characteristic"] = {key: "outline", mod: "bpmnOutline"};
	
	var bpmnDataObjectStyle = mxUtils.clone(styleCommonMap);
	bpmnDataObjectStyle["defaults"] = {
		"shape": "js:bpmnDataObject"
	};
	
	var bpmnDataStoreStyle = mxUtils.clone(styleCommonMap);
	bpmnDataStoreStyle["defaults"] = {
		"shape": "datastore"
	};
	
	var bpmnGroupNodeStyle = mxUtils.clone(styleCommonMap);
	bpmnGroupNodeStyle["defaults"] = {
		"shape": "swimlane;swimlaneLine=0;startSize=20;dashed=1;dashPattern=3 1 1 1;collapsible=0;rounded=1"
	};
	
	var bpmnChoreographyNodeStyle = mxUtils.clone(styleCommonMap);
	bpmnChoreographyNodeStyle["defaults"] = {
		"shape": "js:BpmnChoreography"//"swimlane;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;startSize=20;rounded=1;collapsible=0"
	};
	
	//approximation to GraphML shapes TODO improve them
	var bevelNodeStyle = mxUtils.clone(styleCommonMap);
	bevelNodeStyle["defaults"] = {
		"rounded": "1",
		"glass": "1",
		"strokeColor": "#FFFFFF"
	};
	bevelNodeStyle["inset"] = "strokeWidth";
	bevelNodeStyle["radius"] = "arcSize";
	bevelNodeStyle["drawShadow"] = {key:"shadow", mod:"bool"};
	bevelNodeStyle["color"] = {key:"fillColor", mod:"color", addGradient: "north"};
	bevelNodeStyle["color.yjs:Color.value"] = bevelNodeStyle["color"];
	
	var shinyPlateNodeStyle = mxUtils.clone(styleCommonMap);
	shinyPlateNodeStyle["defaults"] = {
		"rounded": "1",
		"arcSize": 10,
		"glass": "1",
		"shadow": "1",
		"strokeColor": "none"
		//,"rotation": -90 //TODO requires rotation!
	};
	shinyPlateNodeStyle["drawShadow"] = {key:"shadow", mod:"bool"};
	
	var demoGroupStyle = mxUtils.clone(styleCommonMap);
	demoGroupStyle["defaults"] = {
		"shape": "swimlane",
		"startSize": 20,
		"strokeWidth": 4,
		"spacingLeft": 10 //TODO can we change collapse icon to be in right side?
	};
	demoGroupStyle["isCollapsible"] = {key:"collapsible", mod:"bool"};
	demoGroupStyle["borderColor"] = {key:"strokeColor", mod:"color"};
	demoGroupStyle["folderFrontColor"] = {key:"fillColor", mod:"color"}; //TODO fillColor always match strokeColor!
//			demoGroupStyle["folderBackColor"] = {key:"fillColor", mod:"color"}; //??
	
	var collapsibleNodeStyle = mxUtils.clone(styleCommonMap);
	collapsibleNodeStyle["defaults"] = {
		"shape": "swimlane",
		"startSize": 20,
		"spacingLeft": 10 //TODO can we change collapse icon to be in right side?
	};
	collapsibleNodeStyle["yjs:PanelNodeStyle"] = {
		"color": {key:"swimlaneFillColor", mod:"color"},
		"color.yjs:Color.value": {key:"swimlaneFillColor", mod:"color"},
		"labelInsetsColor": {key:"fillColor", mod:"color"},
		"labelInsetsColor.yjs:Color.value": {key:"fillColor", mod:"color"}
	};
	
	var tableStyle = mxUtils.clone(styleCommonMap);
	tableStyle["defaults"] = {
		"shape": "js:table"
	};
	
	var imageNodeStyle = mxUtils.clone(styleCommonMap);
	imageNodeStyle["defaults"] = {
		"shape": "image"
	};
	
	imageNodeStyle["image"] = function(val, map)
	{
		map["image"] = val; 
	};
	
	var svgNodeStyle = mxUtils.clone(styleCommonMap);
	svgNodeStyle["defaults"] = {
		"shape": "image"
	};
//	svgNodeStyle["y:SVGNodeProperties"] = {
//		"usingVisualBounds": ""//??
//	};
//	y:SVGModel.svgBoundsPolicy ??
	svgNodeStyle["y:SVGModel.y:SVGContent.y:Resource.#text"] = function(val, map)
	{
		map["image"] = "data:image/svg+xml," + ((window.btoa) ? btoa(val) : Base64.encode(val)); 
	};
	
	var groupNodeStyle = mxUtils.clone(styleCommonMap);
	groupNodeStyle["defaults"] = {
		"shape": "swimlane",
		"startSize": 20
	};
	
	groupNodeStyle["y:Shape.type"] = function(val, map)
	{
		if (val == "roundrectangle")
		{
			map['rounded'] = 1;
			map['arcSize'] = 5;
		}
	};
	
	var tableNodeStyle = mxUtils.clone(styleCommonMap);
	tableNodeStyle["defaults"] = {
		"shape": "js:table2"
	};

	var genericNodeStyle = mxUtils.clone(styleCommonMap);
	genericNodeStyle["defaults"] = {
		"gradientDirection": "east"
	};
	genericNodeStyle["y:Fill"]["color2"] = {key: "gradientColor", mod: "color"};
	genericNodeStyle["y:StyleProperties.y:Property"] = {
		"com.yworks.bpmn.characteristic": {key: "outline", mod: "bpmnOutline"},
		//TODO support colors for the icon itself other than the remaining shape!
//		"com.yworks.bpmn.icon.line.color": "",
		"com.yworks.bpmn.icon.fill": {key:"gradientColor", mod:"color"},
		"com.yworks.bpmn.icon.fill2": {key:"fillColor", mod:"color"},
		"com.yworks.bpmn.type": {key: "symbol", mod: "bpmnSymbol"},
		"y.view.ShadowNodePainter.SHADOW_PAINTING": {key: "shadow", mod: "bool"},
		"doubleBorder": {key: "double", mod: "bool"},
		"com.yworks.sbgn.style.radius": {key: "arcSize", mod: "scale", scale: 2},
		"com.yworks.sbgn.style.inverse": {key: "flipV", mod: "bool"}
	};
//	console.log(dataObj);
	this.mapObject(dataObj, {
		"yjs:ShapeNodeStyle": styleCommonMap,
		"demostyle:FlowchartNodeStyle": styleCommonMap,
		"demostyle:AssetNodeStyle": assetNodesStyle,
		"bpmn:ActivityNodeStyle": bpmnActivityStyle,
		"bpmn:GatewayNodeStyle": bpmnGatewayStyle,
		"bpmn:ConversationNodeStyle": bpmnConversationStyle,
		"bpmn:EventNodeStyle": bpmnEventStyle,
		"bpmn:DataObjectNodeStyle": bpmnDataObjectStyle,
		"bpmn:DataStoreNodeStyle": bpmnDataStoreStyle,
		"bpmn:GroupNodeStyle": bpmnGroupNodeStyle,
		"bpmn:ChoreographyNodeStyle": bpmnChoreographyNodeStyle,
		"yjs:BevelNodeStyle": bevelNodeStyle,
		"yjs:ShinyPlateNodeStyle": shinyPlateNodeStyle,
		"demostyle:DemoGroupStyle": demoGroupStyle,
		"yjs:CollapsibleNodeStyleDecorator": collapsibleNodeStyle,
		"bpmn:PoolNodeStyle": tableStyle,
		"yjs:TableNodeStyle": tableStyle,
		"demotablestyle:DemoTableStyle": tableStyle,
		"yjs:ImageNodeStyle": imageNodeStyle,
		//desktop
		"y:ShapeNode": styleCommonMap,
		"y:GenericNode": genericNodeStyle,
		"y:GenericGroupNode": genericNodeStyle,
		"y:TableNode": tableNodeStyle,
		"y:SVGNode": svgNodeStyle,
		"y:GroupNode": groupNodeStyle
	}, style);
};

mxGraphMlCodec.prototype.handleTemplates = function (template, userTags, node, styleMap)
{
	if (template)
	{
		var w = node.geometry.width;
		var h = node.geometry.height;
		var header = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '+ w + ' ' + h +'"><g>';
		var footer = '</g></svg>';
		
		//TODO optimize this! probably only the text before defs has bindings
		var matches = null;
		var bindingPairs = [];
		//find template bindings
		var tempBindRegEx = /\{TemplateBinding\s+([^}]+)\}/g;
		
		while ((matches = tempBindRegEx.exec(template)) != null) 
		{
	        var replacement = "";
	        switch (matches[1])
	        {
	        	case "width":
	        		replacement = w;
	        	break;
	        	case "height":
	        		replacement = h;
	    		break;
	        }
	        
	        bindingPairs.push({match: matches[0], repl: replacement});
		}
		
		if (userTags && userTags["y:Json"])
		{
			var json = JSON.parse(userTags["y:Json"]["#text"]);
			//find user tags bindings
			var userTagBindRegEx = /\{Binding\s+([^}]+)\}/g;
			
			while ((matches = userTagBindRegEx.exec(template)) != null) 
			{
		        var parts = matches[1].split(',');
		        var val = json[parts[0]];
		        
		        if (val)
	        	{
		        	if (parts.length > 1)
	        		{
		        		if (parts[1].indexOf('Converter='))
	        			{
		        			var func = mxGraphMlConverters[parts[1].substr(11)]; //11 is the length of Converter=
		        			
		        			if (func)
	        				{
				        		var args = [val];
				        		
				        		if (parts[2])
				        		{
				        			args.push(parts[2].substr(11)); //11 is the length of Parameter=
				        		}
				        			
		        				val = func.apply(null, args)
	        				}
	        			}
	        		}
		        	
		        	bindingPairs.push({match: matches[0], repl: mxUtils.htmlEntities(val)});
	        	}
			}
		}

		for (var i = 0; i < bindingPairs.length; i++)
		{
			template = template.replace(bindingPairs[i].match, bindingPairs[i].repl);		
		}
		
		bindingPairs = [];
		//Fix text elements (TODO can it be merged with the previous step?)
		var txtRegEx = /\<text.+data-content="([^"]+).+\<\/text\>/g;
		while ((matches = txtRegEx.exec(template)) != null) 
		{
			var val = matches[0].substr(0, matches[0].length - 7) + matches[1] + "</text>"; //7 is the length of </text> 
			bindingPairs.push({match: matches[0], repl: val});
		}

		for (var i = 0; i < bindingPairs.length; i++)
		{
			template = template.replace(bindingPairs[i].match, bindingPairs[i].repl);		
		}

		var svg = header + template + footer;
		styleMap["shape"] = "image";
		styleMap["image"] = "data:image/svg+xml," + ((window.btoa) ? btoa(svg) : Base64.encode(svg));
	}
};

mxGraphMlCodec.prototype.handleCompoundShape = function (node, styleMap, mlStyleObj, lbls)
{
	var shape = styleMap["shape"];
	
	if (shape && shape.indexOf("js:") == 0)
	{
		switch(shape)
		{
			case "js:bpmnArtifactShadow":
				styleMap["shadow"] = "1";
			case "js:bpmnArtifact":
				styleMap["shape"] = styleMap["symbol"];
				delete styleMap["fillColor"];
				delete styleMap["strokeColor"];
				delete styleMap["gradientColor"];
				this.handleCompoundShape(node, styleMap, mlStyleObj, lbls)
			break;
			case "js:bpmnDataObjectShadow":
			case "js:bpmnDataObject":
				styleMap["shape"] = "note;size=16";
//				console.log(mlStyleObj);
				mlStyleObj = mlStyleObj["bpmn:DataObjectNodeStyle"] || mlStyleObj["y:GenericNode"] || mlStyleObj["y:GenericGroupNode"];
				var tmpMap = {};
				
				this.mapObject(mlStyleObj, {
					"y:StyleProperties.y:Property": {
						"com.yworks.bpmn.dataObjectType": "dataObjectType",
						"com.yworks.bpmn.marker1": "marker1"
					}
				}, tmpMap);
				
				if (mlStyleObj["collection"] == "true" || tmpMap["marker1"] == "bpmn_marker_parallel")
				{
					var cell2 = new mxCell('', new mxGeometry(0.5, 1, 10, 10), 'html=1;whiteSpace=wrap;shape=parallelMarker;');
					cell2.vertex = true;
					cell2.geometry.relative = true;
					cell2.geometry.offset = new mxPoint(-5, -10);
					node.insert(cell2);
				}
				if (mlStyleObj["type"] == "INPUT" || tmpMap["dataObjectType"] == "data_object_type_input")
				{
					var cell1 = new mxCell('', new mxGeometry(0, 0, 10, 10), 'html=1;shape=singleArrow;arrowWidth=0.4;arrowSize=0.4;');
					cell1.vertex = true;
					cell1.geometry.relative = true;
					cell1.geometry.offset = new mxPoint(2, 2);
					node.insert(cell1);
				}
				else if (mlStyleObj["type"] == "OUTPUT" || tmpMap["dataObjectType"] == "data_object_type_output")
				{
					var cell1 = new mxCell('', new mxGeometry(0, 0, 10, 10), 'html=1;shape=singleArrow;arrowWidth=0.4;arrowSize=0.4;fillColor=#000000;');
					cell1.vertex = true;
					cell1.geometry.relative = true;
					cell1.geometry.offset = new mxPoint(2, 2);
					node.insert(cell1);
				}
			break;
			case "js:BpmnChoreography":
				this.mapObject(mlStyleObj, {
					"defaults": {
						"shape": "swimlane;collapsible=0;rounded=1",
						"startSize": "20",
						"strokeColor": "#006000",
						"fillColor": "#CCCCCC"
					}
				}, styleMap);
				
				//TODO the shape should be clipped by parent borders. It should also be resized relative to its parent
				var pGeo = node.geometry;
				var cell1 = new mxCell('', new mxGeometry(0, pGeo.height - 20, pGeo.width, 20), 'strokeColor=#006000;fillColor=#777777;rounded=1');
				cell1.vertex = true;
				node.insert(cell1);
				
				//TODO handle labels accurately
				if (lbls && lbls.lblTxts)
				{
//					console.log(lbls);
					node.value = lbls.lblTxts[0];
					cell1.value = lbls.lblTxts[1];
				}
			break;
			case "js:bpmnActivityShadow":
			case "js:bpmnActivity":
				styleMap["shape"] = "ext;rounded=1";
				var tmpMap = {};
				mlStyleObj = mlStyleObj["y:GenericNode"] || mlStyleObj["y:GenericGroupNode"];
				
				this.mapObject(mlStyleObj, {
					"y:StyleProperties.y:Property": {
						"com.yworks.bpmn.taskType": "taskType",
						"com.yworks.bpmn.activityType": "activityType",
						"com.yworks.bpmn.marker1": "marker1",
						"com.yworks.bpmn.marker2": "marker2",
						"com.yworks.bpmn.marker3": "marker3",
						"com.yworks.bpmn.marker4": "marker4"
					}
				}, tmpMap);
				
				switch(tmpMap["activityType"])
				{
					case "activity_type_transaction":
						styleMap["double"] = "1";
					break;
				}
				
				switch(tmpMap["taskType"])
				{
					case "task_type_send":
						var item1 = new mxCell('', new mxGeometry(0, 0, 19, 12), 'shape=message;fillColor=#000000;strokeColor=#FFFFFF;');
						item1.geometry.offset = new mxPoint(4, 7);
						break;
					case "task_type_receive":
						var item1 = new mxCell('', new mxGeometry(0, 0, 19, 12), 'shape=message;');
						item1.geometry.offset = new mxPoint(4, 7);
						break;
					case "task_type_user":
						var item1 = new mxCell('', new mxGeometry(0, 0, 15, 15), 'shape=mxgraph.bpmn.user_task;');
						item1.geometry.offset = new mxPoint(4, 5);
						break;
					case "task_type_manual":
						var item1 = new mxCell('', new mxGeometry(0, 0, 15, 10), 'shape=mxgraph.bpmn.manual_task;');
						item1.geometry.offset = new mxPoint(4, 7);
						break;
					case "task_type_business_rule":
						var item1 = new mxCell('', new mxGeometry(0, 0, 18, 13), 'shape=mxgraph.bpmn.business_rule_task;');
						item1.geometry.offset = new mxPoint(4, 7);
						break;
					case "task_type_service":
						var item1 = new mxCell('', new mxGeometry(0, 0, 15, 15), 'shape=mxgraph.bpmn.service_task;');
						item1.geometry.offset = new mxPoint(4, 5);
						break;
					case "task_type_script":
						var item1 = new mxCell('', new mxGeometry(0, 0, 15, 15), 'shape=mxgraph.bpmn.script_task;');
						item1.geometry.offset = new mxPoint(4, 5);
						break;
				}
				
				if (item1)
				{
					item1.vertex = true;
					item1.geometry.relative = true;
					node.insert(item1);
					item1 = null;
				}
				
				var numIcons = 0;
				
				for (var i = 1; i <= 4; i++)
				{
					if (tmpMap["marker" + i])
						numIcons++;
				}

				var iconX = -7.5 * numIcons - 2 * (numIcons - 1);
				
				for (var i = 1; i <= numIcons; i++)
				{
					switch(tmpMap["marker" + i])
					{
						case "bpmn_marker_closed":
							var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=plus;part=1;');
							item1.geometry.offset = new mxPoint(iconX, -20);
							break;
						case "bpmn_marker_open":
							var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=rect;part=1;');
							item1.geometry.offset = new mxPoint(iconX, -20);
							var item2 = new mxCell('', new mxGeometry(0.5, 0.5, 8, 1), 'shape=rect;part=1;');
							item2.geometry.offset = new mxPoint(-4, -1);
							item2.geometry.relative = true;
							item2.vertex = true;
							item1.insert(item2);
							break;
						case "bpmn_marker_loop":
							var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=mxgraph.bpmn.loop;part=1;');
							item1.geometry.offset = new mxPoint(iconX, -20);
							break;
						case "bpmn_marker_parallel":
							var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=parallelMarker;part=1;');
							item1.geometry.offset = new mxPoint(iconX, -20);
							break;
						case "bpmn_marker_sequential":
							var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=parallelMarker;direction=south;part=1;');
							item1.geometry.offset = new mxPoint(iconX, -20);
							break;
						case "bpmn_marker_ad_hoc":
							var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 10), 'shape=mxgraph.bpmn.ad_hoc;strokeColor=none;flipH=1;part=1;fillColor=#000000');
							item1.geometry.offset = new mxPoint(iconX, -17);
							break;
						case "bpmn_marker_compensation":
							var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 11), 'shape=mxgraph.bpmn.compensation;part=1;');
							item1.geometry.offset = new mxPoint(iconX, -18);
							break;
					}
					item1.geometry.relative = true;
					item1.vertex = true;
					node.insert(item1);
					iconX += 20;
				}
			break;
			case "js:table":
				//TODO we need 2 passes to find the exact shift of columns/rows especially when there is rows inside rows
				//TODO Internal table strokes needs to match table strokeWidth and only be on one side
				//TODO code optimization
				styleMap["shape"] = "swimlane;collapsible=0;swimlaneLine=0";
				var tableObj = mlStyleObj["yjs:TableNodeStyle"] || mlStyleObj["demotablestyle:DemoTableStyle"];
				
				if (!tableObj && mlStyleObj["bpmn:PoolNodeStyle"])
				{
					tableObj = mlStyleObj["bpmn:PoolNodeStyle"]["yjs:TableNodeStyle"];
				}
				
//				console.log(tableObj);
				
				this.mapObject(tableObj, {
					"backgroundStyle.demotablestyle:TableBackgroundStyle": {
						"insetFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"},
						"tableBackgroundFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "swimlaneFillColor", mod: "color"},
						"tableBackgroundStroke.yjs:Stroke":{
							"fill": {key: "strokeColor", mod: "color"},
							"thickness": "strokeWidth" 
						}
					},
					"backgroundStyle.yjs:ShapeNodeStyle.fill": {key: "fillColor", mod: "color"},
					"backgroundStyle.yjs:ShapeNodeStyle.fill.yjs:SolidColorFill.color": {key: "fillColor", mod: "color"}
				}, styleMap);
				
				//Lane fill color is the same as the fill color
				styleMap["swimlaneFillColor"] = styleMap["fillColor"];
				
				tableObj = tableObj["table"]["y:Table"];
				
				var x = 0, y = 0, xShift = {x: 0}, yShift = 0;
				var insets = tableObj["Insets"];
				
				if (insets)
				{
					insets = insets.split(',');
					
					if (insets[0] != "0")
					{
						styleMap["startSize"] = insets[0];
						xShift.x = parseFloat(insets[0]);
						//x += xShift.x;						
						styleMap["horizontal"] = "0";
					} 
					else if (insets[1] != "0")
					{
						styleMap["startSize"] = insets[1];
						yShift = parseFloat(insets[1]); 
						y += yShift;
					}
				}
				else
				{
					styleMap["startSize"] = "0";
				}
				
				var defRowStyle = {};
				
				var rowMapping = {
					"Insets": function(val, map)
					{
						map["startSize"] = val.split(',')[0];
					},
					"Style.bpmn:AlternatingLeafStripeStyle": {
						"evenLeafDescriptor.bpmn:StripeDescriptor": {
							"insetFill": {key: "evenFill", mod: "color"},
							"backgroundFill": {key: "evenLaneFill", mod: "color"}
						},
						"oddLeafDescriptor.bpmn:StripeDescriptor": {
							"insetFill": {key: "oddFill", mod: "color"},
							"backgroundFill": {key: "oddLaneFill", mod: "color"}
						}
						//parentDescriptor ??
						//TODO collect common types in a special mapping hash
					},
					"Style.yjs:NodeStyleStripeStyleAdapter":{
						"demotablestyle:DemoStripeStyle": {
							"stripeInsetFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"},
							"tableLineFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "strokeColor", mod: "color"}
						},
						"yjs:ShapeNodeStyle": {
							"fill": {key: "swimlaneFillColor", mod: "color"}
						}
					},
					"Size": "height"
				};
				this.mapObject(tableObj["RowDefaults"], {
					"defaults": {
						"shape": "swimlane;collapsible=0;horizontal=0",
						"startSize": "0"
					},
					"y:StripeDefaults": rowMapping
				}, defRowStyle);

				var defColStyle = {};
				
				var colMapping = {
					"Insets": function(val, map)
					{
						map["startSize"] = val.split(',')[1];
					},
					"Style.bpmn:AlternatingLeafStripeStyle": {
						"evenLeafDescriptor.bpmn:StripeDescriptor": {
							"insetFill": {key: "evenFill", mod: "color"},
							"backgroundFill": {key: "evenLaneFill", mod: "color"}
						},
						"oddLeafDescriptor.bpmn:StripeDescriptor": {
							"insetFill": {key: "oddFill", mod: "color"},
							"backgroundFill": {key: "oddLaneFill", mod: "color"}
						}
						//parentDescriptor ??
						//TODO collect common types in a special mapping hash
					},
					"Style.yjs:NodeStyleStripeStyleAdapter":{
						"demotablestyle:DemoStripeStyle": {
							"stripeInsetFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"},
							"tableLineFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "strokeColor", mod: "color"}
						},
						"yjs:ShapeNodeStyle": {
							"fill": {key: "swimlaneFillColor", mod: "color"}
						}
					},
					"Size": "width"
				};
				
				this.mapObject(tableObj["ColumnDefaults"], {
					"defaults": {
						"shape": "swimlane;collapsible=0",
						"startSize": "0",
						"fillColor": "none"
					},
					"y:StripeDefaults": colMapping
				}, defColStyle);

				var pGeo = node.geometry;
				
				var rows = tableObj["Rows"]["y:Row"];
				y += parseFloat(defColStyle["startSize"]);
				
				var maxX = xShift.x;
				var initX = xShift.x;
				xShift.lx = xShift.x;
				
				//TODO We need two passes to determine the header size!
				if (rows)
				{
					if (!(rows instanceof Array))
						rows = [rows];
					
					for (var i = 0; i < rows.length; i++)
					{
						xShift.x = initX;
						xShift.lx = initX;
						y = this.addRow(rows[i], node, (i & 1), y, xShift, rowMapping, defRowStyle);
						maxX = Math.max(xShift.x, maxX);
					}
				}

				var columns = tableObj["Columns"]["y:Column"];
				x = maxX;//parseFloat(defRowStyle["startSize"]);
				
				if (columns)
				{
					if (!(columns instanceof Array))
						columns = [columns];
					
					for (var i = 0; i < columns.length; i++)
					{
						x = this.addColumn(columns[i], node, (i & 1), x, yShift, colMapping, defColStyle);
					}
				}
				
			break;
			case "js:table2":
				styleMap["shape"] = "swimlane;collapsible=0;swimlaneLine=0";
//				console.log(mlStyleObj);
				var tmpMap = {};
				this.mapObject(mlStyleObj, {
					"y:TableNode": {
						"y:StyleProperties.y:Property": {
							"yed.table.section.color": {key: "secColor", mod: "color"},
							"yed.table.header.height": "headerH",
							"yed.table.header.color.main": {key: "headerColor", mod: "color"},
							"yed.table.header.color.alternating": {key: "headerColorAlt", mod: "color"},
							"yed.table.lane.color.main": {key: "laneColor", mod: "color"},
							"yed.table.lane.color.alternating": {key: "laneColorAlt", mod: "color"},
							"yed.table.lane.style": "laneStyle",
							"com.yworks.bpmn.type": "isHorz",
							"POOL_LANE_COLOR_ALTERNATING": {key: "laneColorAlt", mod: "color"},
							"POOL_LANE_COLOR_MAIN": {key: "laneColor", mod: "color"},
							"POOL_LANE_STYLE": "laneStyle",
							"POOL_HEADER_COLOR_MAIN": {key: "headerColor", mod: "color"},
							"POOL_HEADER_COLOR_ALTERNATING": {key: "headerColorAlt", mod: "color"},
							"POOL_TABLE_SECTION_COLOR": {key: "secColor", mod: "color"}
//							//Not Used!
//							"y.view.tabular.TableNodePainter.ALTERNATE_ROW_STYLE": {
//								"y:SimpleStyle": {
//									"fillColor": {key: "rowAltFillColor", mod: "color"},
//									"lineColor": {key: "rowAltLineColor", mod: "color"},
//									"lineType": "rowAltlineType",
//									"lineWidth": "rowAltlineWidth"
//								}
//							},
//							"y.view.tabular.TableNodePainter.ALTERNATE_COLUMN_STYLE": {
//								"y:SimpleStyle": {
//									"fillColor": {key: "colAltFillColor", mod: "color"},
//									"lineColor": {key: "colAltLineColor", mod: "color"},
//									"lineType": "colAltlineType",
//									"lineWidth": "colAltlineWidth"
//								}
//							}
						},
						"y:Table": {
							"y:DefaultColumnInsets.top": "colHHeight",
							"y:DefaultRowInsets.left": "rowHWidth",
							"y:Insets": {
								"top": "tblHHeight",
								"left": "tblHWidth"
							}
						}
					}
				}, tmpMap);

				styleMap["swimlaneFillColor"] = styleMap["fillColor"];
				
				var isHor = tmpMap["isHorz"] == "pool_type_lane_and_column"
					|| tmpMap["isHorz"] == "pool_type_empty"
					|| tmpMap["isHorz"] == "pool_type_lane";

				var th = 0, tw = 0;
				if (isHor)
				{
					tw = parseFloat(tmpMap["tblHWidth"]);
				}
				else
				{
					th = parseFloat(tmpMap["tblHHeight"]);
				}
				
				styleMap["startSize"] = th? th : tw;
				//Assumptions: There is always rows and cols in every table
				//Also all tables seems to be not rotated
				try 
				{
					var rows = mlStyleObj["y:TableNode"]["y:Table"]["y:Rows"]["y:Row"];
					var cols = mlStyleObj["y:TableNode"]["y:Table"]["y:Columns"]["y:Column"];
					
					var atts4Rows = tmpMap["laneStyle"] == "lane.style.rows" || tmpMap["laneStyle"] == "lane_style_rows";
					
					if (!(rows instanceof Array))
						rows = [rows];
					
					if (!(cols instanceof Array))
						cols = [cols];
					
					var rowStartSize = parseFloat(tmpMap["rowHWidth"]);
					for (var i = 0; i < rows.length; i++)
					{
						if (rows[i]["y:Insets"])
							rowStartSize = Math.max(rowStartSize, 
									parseFloat(rows[i]["y:Insets"]["left"]) + parseFloat(rows[i]["y:Insets"]["right"]));
					}
					
					var colStartSize = parseFloat(tmpMap["colHHeight"]);
					for (var i = 0; i < cols.length; i++)
					{
						if (cols[i]["y:Insets"])
							colStartSize = Math.max(colStartSize, 
									parseFloat(cols[i]["y:Insets"]["top"]) + parseFloat(cols[i]["y:Insets"]["bottom"]));
					}
					
					if (atts4Rows)
					{
						this.addTbl2Rows(node, rows, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap);
						this.addTbl2Cols(node, cols, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap);
					}
					else
					{
						this.addTbl2Cols(node, cols, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap);
						this.addTbl2Rows(node, rows, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap);
					}
				}
				catch(e)
				{
					//nothing!
				}
			break;
			case "js:relationship_big_entity":
				styleMap['shape'] = "swimlane;startSize=30;rounded=1;arcSize=5;collapsible=0";
				var fill = mlStyleObj["y:GenericNode"]["y:Fill"]; 
				
				if (fill) 
				{
					styleMap['fillColor'] = fill["color2"];
					styleMap['swimlaneFillColor'] = fill["color"];
				}
			break;
			case "js:relationship_attribute":
				if (styleMap["double"] == "1")
				{
					styleMap['shape'] = "doubleEllipse";
				}
				else
				{
					styleMap['shape'] = "ellipse";
				}
			break;
		}
		
		if (shape.indexOf("Shadow") > 0) 
		{
			styleMap["shadow"] = "1";
		}
	}
};

mxGraphMlCodec.prototype.addTbl2Rows = function(node, rows, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap) 
{
	var y = th + colStartSize; 
	var isBPMN = tmpMap["isHorz"] != null;
	
	for (var i = 0; i < rows.length; i++)
	{
		var odd = i & 1;
		var cell = new mxCell();
		cell.vertex = true;
		var rowStyle = {
			"shape": "swimlane;collapsible=0;horizontal=0",
			"startSize": rowStartSize,
			"fillColor": tmpMap["secColor"] || "none",
			"swimlaneLine": (isBPMN? "0" : "1")
		};
		
		if (parseFloat(rowStyle["startSize"]) == 0)
		{
			rowStyle["fillColor"] = "none";
			rowStyle["swimlaneLine"] = "0";
		}
		
		if (atts4Rows)
		{
			var fillColor = odd? tmpMap["headerColorAlt"] : tmpMap["headerColor"];
			rowStyle["swimlaneFillColor"] = odd? tmpMap["laneColorAlt"] : tmpMap["laneColor"];
			rowStyle["fillColor"] = fillColor? fillColor : rowStyle["swimlaneFillColor"];
		}
		
		var height = parseFloat(rows[i]["height"]);
		var dh = (isBPMN && i == 0)? colStartSize : 0 ;
		cell.geometry = new mxGeometry(tw, y - dh, node.geometry.width - tw, height + dh);
		y += height;
		
//		if (lblObj)
//			this.addLabels(cell, lblObj, rowStyle)
		
		cell.style = this.styleMap2Str(rowStyle);
		node.insert(cell);
	}	
};

mxGraphMlCodec.prototype.addTbl2Cols = function(node, cols, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap) 
{
	var x = rowStartSize + tw;
	var isBPMN = tmpMap["isHorz"] != null;
	
	for (var i = 0; i < cols.length; i++)
	{
		var odd = i & 1;
		var cell = new mxCell();
		cell.vertex = true;
		var colStyle = {
			"shape": "swimlane;collapsible=0",
			"startSize": colStartSize,
			"fillColor": tmpMap["secColor"] || "none",
			"swimlaneLine": (isBPMN? "0" : "1")
		};
		
		if (parseFloat(colStyle["startSize"]) == 0)
		{
			colStyle["fillColor"] = "none";
		}
		
		if (!atts4Rows)
		{
			var fillColor = odd? tmpMap["headerColorAlt"] : tmpMap["headerColor"];
			colStyle["swimlaneFillColor"] = odd? tmpMap["laneColorAlt"] : tmpMap["laneColor"];
			colStyle["fillColor"] = fillColor? fillColor : colStyle["swimlaneFillColor"];
		}
		
		var width = parseFloat(cols[i]["width"]);
		var dw = (isBPMN && i == 0)? rowStartSize : 0 ;
		cell.geometry = new mxGeometry(x - dw, th, width + dw, node.geometry.height - th);
		x += width;
		
//		if (lblObj)
//			this.addLabels(cell, lblObj, rowStyle)
		
		cell.style = this.styleMap2Str(colStyle);
		node.insert(cell);
	}
};

mxGraphMlCodec.prototype.addRow = function(row, parent, odd, y, xShift, rowMapping, defRowStyle)
{
	var cell = new mxCell();
	cell.vertex = true;
	var rowStyle = mxUtils.clone(defRowStyle);
	this.mapObject(row, rowMapping, rowStyle);
	
	if (odd)
	{
		if (rowStyle["oddFill"]) 
			rowStyle["fillColor"] = rowStyle["oddFill"];

		if (rowStyle["oddLaneFill"])
			rowStyle["swimlaneFillColor"] = rowStyle["oddLaneFill"];
	}
	else
	{
		if (rowStyle["evenFill"]) 
			rowStyle["fillColor"] = rowStyle["evenFill"];
		
		if (rowStyle["evenLaneFill"])
			rowStyle["swimlaneFillColor"] = rowStyle["evenLaneFill"];
	}
	
	var height = parseFloat(rowStyle["height"]);
	cell.geometry = new mxGeometry(xShift.lx, y, parent.geometry.width - xShift.lx, height);

	var lblObj = row["Labels"];
	
	if (lblObj)
		this.addLabels(cell, lblObj, rowStyle)
	
	cell.style = this.styleMap2Str(rowStyle);
	parent.insert(cell);
	
	var subRow = row["y:Row"];

	xShift.lx = 0;
	if (rowStyle["startSize"])
	{
		xShift.lx = parseFloat(rowStyle["startSize"]);
		xShift.x += xShift.lx;
	}
	
	var initX = xShift.x, maxX = xShift.x, initLx = xShift.lx;
	var subY = 0;
	if (subRow)
	{
		if (!(subRow instanceof Array))