davidjgraph · August 1, 2015 06:20
diff --git a/export2.html b/export2.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<script>
 		var mathJaxQueue = [];
 		
 		// Disables global typesetting and messages on startup, adds queue for
 		// asynchronous rendering while MathJax is loading
 		window.MathJax =
 		{
 			skipStartupTypeset: true,
 			messageStyle: 'none',
 			AuthorInit: function ()
 			{
 				MathJax.Hub.Register.StartupHook('Begin', function()
 				{
 					for (var i = 0; i < mathJaxQueue.length; i++)
 					{
 						MathJax.Hub.Queue(['Typeset', MathJax.Hub, mathJaxQueue[i]]);
 					}
 				});
 		    }
 		};
 	
 		// Adds global enqueue method for async rendering
 		window.MathJaxRender = function(container)
 		{
 			// Initial rendering when MathJax finished loading
 			if (typeof(MathJax) !== 'undefined' && typeof(MathJax.Hub) !== 'undefined')
 			{
 				MathJax.Hub.Queue(['Typeset', MathJax.Hub, container]);
 			}
 			else
 			{
 				mathJaxQueue.push(container);
 			}
 		}
 		
 		// No URL parameter parsing
 		var urlParams = {};
 		
 		// Removes unused dependencies
 		urlParams['analytics'] = '0';
 		urlParams['picker'] = '0';
 		urlParams['gapi'] = '0';
 		urlParams['db'] = '0';
 		
 		// Public global variables
 		var MAX_REQUEST_SIZE = 10485760;
 		var MAX_AREA = 10000 * 10000;

 		// Paths and files
 		var STENCIL_PATH = 'stencils';
 		var SHAPES_PATH = 'shapes';
 		var IMAGE_PATH = 'images';
 		// Path for images inside the diagram
 		var GRAPH_IMAGE_PATH = 'img';
 		var STYLE_PATH = 'styles';
 		var CSS_PATH = 'styles';
 		
 		// Directory for i18 files and basename for main i18n file
 		var RESOURCES_PATH = 'resources';
 		var RESOURCE_BASE = RESOURCES_PATH + '/dia';
 	
 		var isSvgBrowser = navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 9;
 		var tapAndHoldStartsConnection = true;
 		var showConnectorImg = true;
 		var isLocalStorage = false;
 		var uiTheme = null;

 		// Sets the base path, the UI language via URL param and configures the
 		// supported languages to avoid 404s. The loading of all core language
 		// resources is disabled as all required resources are in grapheditor.
 		// properties. Note that in this example the loading of two resource
 		// files (the special bundle and the default bundle) is disabled to
 		// save a GET request. This requires that all resources be present in
 		// the special bundle.
 		var mxLoadStylesheets = false;
 		var mxLoadResources = false;
 		var mxLanguage = 'en'
 		var geBasePath = 'js';
 		var mxBasePath = 'mxgraph';

 		function render(data)
 		{
 			data.border = parseInt(data.border) || 0;
 			data.w = parseInt(data.w) || 0;
 			data.h = parseInt(data.h) || 0;
 			
 			// Sets default shadow color
 			mxConstants.SHADOWCOLOR = '#d0d0d0';
 			
 			// Parses XML
 			var xmlDoc = mxUtils.parseXml(data.xml);

 			// Enables math typesetting
 			var math = xmlDoc.documentElement.getAttribute('math') == '1';
 			
 			if (math)
 			{
 				mxClient.NO_FO = true;
 			}

 			// Createa graph instance
 			var graph = new Graph(document.getElementById('graph'));
 			graph.foldingEnabled = false;
 			graph.setEnabled(false);

 			// Parses XML into graph
 			var codec = new mxCodec(xmlDoc);
 			codec.decode(xmlDoc.documentElement, graph.getModel());

 			// Loads background color
 			var bg = (data.bg != null && data.bg.length > 0) ? data.bg : xmlDoc.documentElement.getAttribute('background');

 			// Normalizes values for transparent backgrounds
 			if (bg == 'none' || bg == '')
 			{
 				bg = null;
 			}
 			
 			// Checks if export format supports transparent backgrounds
 			if (bg == null && data.format != 'gif' && data.format != 'png')
 			{
 				bg = '#ffffff';
 			}

 			// Sets background color on page
 			if (bg != null)
 			{
 				document.body.style.backgroundColor = bg;
 			}
 			
 			// Sets background image
 			var bgImg = xmlDoc.documentElement.getAttribute('backgroundImage');
 			
 			if (bgImg != null)
 			{
 				bgImg = JSON.parse(bgImg);
 				graph.setBackgroundImage(new mxImage(bgImg.src, bgImg.width, bgImg.height));
 			}
 			
 			// Sets initial value for PDF page background
 			graph.pdfPageVisible = false;
 			
 			// Handles PDF output where the output should match the page format if the page is visible
 			if (data.format == 'pdf' && xmlDoc.documentElement.getAttribute('page') == '1' && data.w == 0 && data.h == 0)
 			{
 				var pw = xmlDoc.documentElement.getAttribute('pageWidth');
 				var ph = xmlDoc.documentElement.getAttribute('pageHeight');
 				graph.pdfPageVisible = true;
 				
 				if (pw != null && ph != null)
 				{
 					graph.pageFormat = new mxRectangle(0, 0, parseFloat(pw), parseFloat(ph));
 				}
 				
 				var ps = xmlDoc.documentElement.getAttribute('pageScale');
 				
 				if (ps != null)
 				{
 					graph.pageScale = ps;
 				}
 				
 				graph.getPageSize = function()
 				{
 					return new mxRectangle(0, 0, this.pageFormat.width * this.pageScale,
 							this.pageFormat.height * this.pageScale);
 				};
 				
 				graph.getPageLayout = function()
 				{
 					var size = this.getPageSize();
 					var bounds = this.getGraphBounds();
 					
 					if (bounds.width == 0 || bounds.height == 0)
 					{
 						return new mxRectangle(0, 0, 1, 1);
 					}
 					else
 					{
 						// Computes untransformed graph bounds
 						var x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
 						var y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
 						var w = Math.floor(bounds.width / this.view.scale);
 						var h = Math.floor(bounds.height / this.view.scale);
 						
 						var x0 = Math.floor(x / size.width);
 						var y0 = Math.floor(y / size.height);
 						var w0 = Math.ceil((x + w) / size.width) - x0;
 						var h0 = Math.ceil((y + h) / size.height) - y0;
 						
 						return new mxRectangle(x0, y0, w0, h0);
 					}
 				};

 				// Fits the number of background pages to the graph
 				graph.view.getBackgroundPageBounds = function()
 				{
 					var layout = this.graph.getPageLayout();
 					var page = this.graph.getPageSize();
 					
 					return new mxRectangle(this.scale * (this.translate.x + layout.x * page.width),
 							this.scale * (this.translate.y + layout.y * page.height),
 							this.scale * layout.width * page.width,
 							this.scale * layout.height * page.height);
 				};
 			}

 			if (!graph.pdfPageVisible)
 			{
 				var b = graph.getGraphBounds();
 				
 				// Floor is needed to keep rendering crisp
 				if (data.w > 0 && data.h > 0)
 				{
 					graph.view.scaleAndTranslate(Math.min(data.w / b.width, data.h / b.height),
 						Math.floor(-b.x + data.border), Math.floor(-b.y + data.border));
 				}
 				else
 				{
 					graph.view.setTranslate(Math.floor(-b.x + data.border), Math.floor(-b.y + data.border));
 				}
 			}
 			else
 			{
 				// Disables border for PDF page export
 				data.border = 0;
 				
 				// Moves to first page in page layout
 				var layout = graph.getPageLayout();
 				var page = graph.getPageSize();
 				var dx = layout.x * page.width;
 				var dy = layout.y * page.height;
 				
 				if (dx != 0 || dy != 0)
 				{
 					graph.view.setTranslate(Math.floor(-dx), Math.floor(-dy));
 				}
 			}
 			
 			// Gets the diagram bounds and sets the document size
 			var bounds = (graph.pdfPageVisible) ? graph.view.getBackgroundPageBounds() : graph.getGraphBounds();
 			bounds.width += data.border;
 			bounds.height += data.border;
 			document.body.style.width = Math.ceil(bounds.x + bounds.width) + 'px';
 			document.body.style.height = (Math.ceil(bounds.y + bounds.height) + 1) + 'px';
 			
 			// Possible asynchronous handling for content to finish rendering
 			var waitCounter = 1;
 			
 			// Decrements waitCounter and invokes callback when finished
 			function decrementWaitCounter()
 			{
 				if (--waitCounter < 1)
 				{
 					if (typeof window.callPhantom === 'function')
 					{
 						window.callPhantom(bounds);
 					}
 				}
 			};
 			
 			// Waits for all images to finish loading
 			var imgs = document.body.getElementsByTagName('image');
 			var check = new Object();
 			waitCounter += imgs.length;

 			for (var i = 0; i < imgs.length; i++)
 			{
 				// No load events for image elements in Phantom using indirection instead
 				var src = imgs[i].getAttribute('xlink:href');
 				
 				if (check[src] == null)
 				{
 					var img = new Image();
 					img.onload = decrementWaitCounter;
 					img.onerror = decrementWaitCounter;
 					img.src = imgs[i].getAttribute('xlink:href');
 					check[src] = img;
 				}
 				else
 				{
 					decrementWaitCounter();
 				}
 			}
 			
 			// Waits for MathJax to finish rendering
 			if (math && window.MathJax.Hub != null)
 			{
 				waitCounter++;
 				window.MathJaxRender(graph.container);
 				
 				// Asynchronous callback when MathJax has finished
 				window.MathJax.Hub.Queue(function ()
 				{
 					decrementWaitCounter();
 				});
 			}

 			// Immediate return it not waiting for any content
 			decrementWaitCounter();
 		};
 	</script>
    <script src="js/mathjax/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
 	<script src="js/app.min.js"></script>
 </head>
 <body style="margin:0px;">
 	<div id="graph" style="width:100%;height:100%;"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script>
	var mathJaxQueue = [];

	// Disables global typesetting and messages on startup, adds queue for
	// asynchronous rendering while MathJax is loading
	window.MathJax =
	{
	skipStartupTypeset: true,
	messageStyle: 'none',
	AuthorInit: function ()
	{
	MathJax.Hub.Register.StartupHook('Begin', function()
	{
	for (var i = 0; i < mathJaxQueue.length; i++)
	{
	MathJax.Hub.Queue(['Typeset', MathJax.Hub, mathJaxQueue[i]]);
	}
	});
	}
	};

	// Adds global enqueue method for async rendering
	window.MathJaxRender = function(container)
	{
	// Initial rendering when MathJax finished loading
	if (typeof(MathJax) !== 'undefined' && typeof(MathJax.Hub) !== 'undefined')
	{
	MathJax.Hub.Queue(['Typeset', MathJax.Hub, container]);
	}
	else
	{
	mathJaxQueue.push(container);
	}
	}

	// No URL parameter parsing
	var urlParams = {};

	// Removes unused dependencies
	urlParams['analytics'] = '0';
	urlParams['picker'] = '0';
	urlParams['gapi'] = '0';
	urlParams['db'] = '0';

	// Public global variables
	var MAX_REQUEST_SIZE = 10485760;
	var MAX_AREA = 10000 * 10000;

	// Paths and files
	var STENCIL_PATH = 'stencils';
	var SHAPES_PATH = 'shapes';
	var IMAGE_PATH = 'images';
	// Path for images inside the diagram
	var GRAPH_IMAGE_PATH = 'img';
	var STYLE_PATH = 'styles';
	var CSS_PATH = 'styles';

	// Directory for i18 files and basename for main i18n file
	var RESOURCES_PATH = 'resources';
	var RESOURCE_BASE = RESOURCES_PATH + '/dia';

	var isSvgBrowser = navigator.userAgent.indexOf('MSIE') < 0 \|\| document.documentMode >= 9;
	var tapAndHoldStartsConnection = true;
	var showConnectorImg = true;
	var isLocalStorage = false;
	var uiTheme = null;

	// Sets the base path, the UI language via URL param and configures the
	// supported languages to avoid 404s. The loading of all core language
	// resources is disabled as all required resources are in grapheditor.
	// properties. Note that in this example the loading of two resource
	// files (the special bundle and the default bundle) is disabled to
	// save a GET request. This requires that all resources be present in
	// the special bundle.
	var mxLoadStylesheets = false;
	var mxLoadResources = false;
	var mxLanguage = 'en'
	var geBasePath = 'js';
	var mxBasePath = 'mxgraph';

	function render(data)
	{
	data.border = parseInt(data.border) \|\| 0;
	data.w = parseInt(data.w) \|\| 0;
	data.h = parseInt(data.h) \|\| 0;

	// Sets default shadow color
	mxConstants.SHADOWCOLOR = '#d0d0d0';

	// Parses XML
	var xmlDoc = mxUtils.parseXml(data.xml);

	// Enables math typesetting
	var math = xmlDoc.documentElement.getAttribute('math') == '1';

	if (math)
	{
	mxClient.NO_FO = true;
	}

	// Createa graph instance
	var graph = new Graph(document.getElementById('graph'));
	graph.foldingEnabled = false;
	graph.setEnabled(false);

	// Parses XML into graph
	var codec = new mxCodec(xmlDoc);
	codec.decode(xmlDoc.documentElement, graph.getModel());

	// Loads background color
	var bg = (data.bg != null && data.bg.length > 0) ? data.bg : xmlDoc.documentElement.getAttribute('background');

	// Normalizes values for transparent backgrounds
	if (bg == 'none' \|\| bg == '')
	{
	bg = null;
	}

	// Checks if export format supports transparent backgrounds
	if (bg == null && data.format != 'gif' && data.format != 'png')
	{
	bg = '#ffffff';
	}

	// Sets background color on page
	if (bg != null)
	{
	document.body.style.backgroundColor = bg;
	}

	// Sets background image
	var bgImg = xmlDoc.documentElement.getAttribute('backgroundImage');

	if (bgImg != null)
	{
	bgImg = JSON.parse(bgImg);
	graph.setBackgroundImage(new mxImage(bgImg.src, bgImg.width, bgImg.height));
	}

	// Sets initial value for PDF page background
	graph.pdfPageVisible = false;

	// Handles PDF output where the output should match the page format if the page is visible
	if (data.format == 'pdf' && xmlDoc.documentElement.getAttribute('page') == '1' && data.w == 0 && data.h == 0)
	{
	var pw = xmlDoc.documentElement.getAttribute('pageWidth');
	var ph = xmlDoc.documentElement.getAttribute('pageHeight');
	graph.pdfPageVisible = true;

	if (pw != null && ph != null)
	{
	graph.pageFormat = new mxRectangle(0, 0, parseFloat(pw), parseFloat(ph));
	}

	var ps = xmlDoc.documentElement.getAttribute('pageScale');

	if (ps != null)
	{
	graph.pageScale = ps;
	}

	graph.getPageSize = function()
	{
	return new mxRectangle(0, 0, this.pageFormat.width * this.pageScale,
	this.pageFormat.height * this.pageScale);
	};

	graph.getPageLayout = function()
	{
	var size = this.getPageSize();
	var bounds = this.getGraphBounds();

	if (bounds.width == 0 \|\| bounds.height == 0)
	{
	return new mxRectangle(0, 0, 1, 1);
	}
	else
	{
	// Computes untransformed graph bounds
	var x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
	var y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
	var w = Math.floor(bounds.width / this.view.scale);
	var h = Math.floor(bounds.height / this.view.scale);

	var x0 = Math.floor(x / size.width);
	var y0 = Math.floor(y / size.height);
	var w0 = Math.ceil((x + w) / size.width) - x0;
	var h0 = Math.ceil((y + h) / size.height) - y0;

	return new mxRectangle(x0, y0, w0, h0);
	}
	};

	// Fits the number of background pages to the graph
	graph.view.getBackgroundPageBounds = function()
	{
	var layout = this.graph.getPageLayout();
	var page = this.graph.getPageSize();

	return new mxRectangle(this.scale * (this.translate.x + layout.x * page.width),
	this.scale * (this.translate.y + layout.y * page.height),
	this.scale * layout.width * page.width,
	this.scale * layout.height * page.height);
	};
	}

	if (!graph.pdfPageVisible)
	{
	var b = graph.getGraphBounds();

	// Floor is needed to keep rendering crisp
	if (data.w > 0 && data.h > 0)
	{
	graph.view.scaleAndTranslate(Math.min(data.w / b.width, data.h / b.height),
	Math.floor(-b.x + data.border), Math.floor(-b.y + data.border));
	}
	else
	{
	graph.view.setTranslate(Math.floor(-b.x + data.border), Math.floor(-b.y + data.border));
	}
	}
	else
	{
	// Disables border for PDF page export
	data.border = 0;

	// Moves to first page in page layout
	var layout = graph.getPageLayout();
	var page = graph.getPageSize();
	var dx = layout.x * page.width;
	var dy = layout.y * page.height;

	if (dx != 0 \|\| dy != 0)
	{
	graph.view.setTranslate(Math.floor(-dx), Math.floor(-dy));
	}
	}

	// Gets the diagram bounds and sets the document size
	var bounds = (graph.pdfPageVisible) ? graph.view.getBackgroundPageBounds() : graph.getGraphBounds();
	bounds.width += data.border;
	bounds.height += data.border;
	document.body.style.width = Math.ceil(bounds.x + bounds.width) + 'px';
	document.body.style.height = (Math.ceil(bounds.y + bounds.height) + 1) + 'px';

	// Possible asynchronous handling for content to finish rendering
	var waitCounter = 1;

	// Decrements waitCounter and invokes callback when finished
	function decrementWaitCounter()
	{
	if (--waitCounter < 1)
	{
	if (typeof window.callPhantom === 'function')
	{
	window.callPhantom(bounds);
	}
	}
	};

	// Waits for all images to finish loading
	var imgs = document.body.getElementsByTagName('image');
	var check = new Object();
	waitCounter += imgs.length;

	for (var i = 0; i < imgs.length; i++)
	{
	// No load events for image elements in Phantom using indirection instead
	var src = imgs[i].getAttribute('xlink:href');

	if (check[src] == null)
	{
	var img = new Image();
	img.onload = decrementWaitCounter;
	img.onerror = decrementWaitCounter;
	img.src = imgs[i].getAttribute('xlink:href');
	check[src] = img;
	}
	else
	{
	decrementWaitCounter();
	}
	}

	// Waits for MathJax to finish rendering
	if (math && window.MathJax.Hub != null)
	{
	waitCounter++;
	window.MathJaxRender(graph.container);

	// Asynchronous callback when MathJax has finished
	window.MathJax.Hub.Queue(function ()
	{
	decrementWaitCounter();
	});
	}

	// Immediate return it not waiting for any content
	decrementWaitCounter();
	};
	</script>
	<script src="js/mathjax/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
	<script src="js/app.min.js"></script>
	</head>
	<body style="margin:0px;">
	<div id="graph" style="width:100%;height:100%;"></div>
	</body>
	</html>