jexelmans
/
drawio


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
							<!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);
			}
		}
	</script>
    <script src="https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
	<script>
		var urlParams = (function(url)
		{
			var result = new Object();
			var params = window.location.search.slice(1).split('&');
			
			for (var i = 0; i < params.length; i++)
			{
				idx = params[i].indexOf('=');
				
				if (idx > 0)
				{
					result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
				}
			}
			
			return result;
		})(window.location.href);
		
		// 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';
	
		// Specifies connection mode for touch devices (at least one should be 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 mxLoadResources = false;
		var mxLanguage = 'en'
		var geBasePath = 'js';
		var mxBasePath = 'mxgraph';

		function render(data)
		{
			mxConstants.SHADOWCOLOR = '#000000';
			mxConstants.SHADOW_OPACITY = 0.25;

			var graph = new Graph(document.getElementById('graph'));
			graph.foldingEnabled = false;
			graph.setEnabled(false);
			
			if (data.math)
			{
				mxClient.NO_FO = true;
			}

			var xmlDoc = mxUtils.parseXml(data.xml);
			var codec = new mxCodec(xmlDoc);
			codec.decode(xmlDoc.documentElement, graph.getModel());

			// Handles PDF output where the output should match the page format if the page is visible
			if (data.math && data.format == 'pdf' && xmlDoc.documentElement.getAttribute('page') == '1')
			{
				graph.pageVisible = true;

				var pw = xmlDoc.documentElement.getAttribute('pageWidth');
				var ph = xmlDoc.documentElement.getAttribute('pageHeight');
				
				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.pageVisible) ? this.getPageSize() : this.scrollTileSize;
					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 = bounds.x / this.view.scale - this.view.translate.x;
						var y = bounds.y / this.view.scale - this.view.translate.y;
						var w = bounds.width / this.view.scale;
						var h = 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);
				};
			}
			else if (data.crop)
			{
				var b = graph.getGraphBounds();
				graph.view.setTranslate(-b.x, -b.y);
			}
			else if (data.w != null && data.h != null)
			{
				var b = graph.getGraphBounds();
				var s = Math.floor(Math.min(data.w / b.width, data.h / b.height) * 100) / 100;
				graph.view.scaleAndTranslate(s, (data.w - b.width * s) / 2 / s - b.x,
						(data.h - b.height * s) / 2 / s - b.y);
			}
			
			if (data.math)
			{
				window.MathJaxRender(graph.container);
				
				// Asynchronous callback when MathJax has finished
				window.MathJax.Hub.Queue(function ()
				{
					if (typeof window.callPhantom === 'function')
					{
						window.callPhantom();
					}
				});
			}

			var bounds = (graph.pageVisible) ? graph.view.getBackgroundPageBounds() : graph.getGraphBounds();
			var bg = xmlDoc.documentElement.getAttribute('background');
			
			// Apply background color for direct export
			if (data.format == 'jpg' && bg == 'none')
			{
				bg = '#ffffff';
			}
			
			if (graph.pageVisible)
			{
				document.body.style.width = bounds.width + 'px';
				document.body.style.height = bounds.height + 'px';
			}
			
			document.body.style.backgroundColor = bg || '#ffffff';

			// SVG not needed for math export
			var svg = (data.math) ? '' : mxUtils.getXml(graph.getSvg());
			
			return {width: bounds.width, height: bounds.height, bg: bg, svg: svg};
		};
	</script>
	<script src="js/app.min.js"></script>
</head>
<body style="margin:0px;">
	<div id="graph"></div>
</body>
</html>