kaishuu0123 · January 8, 2020 02:31
diff --git a/drawio_integration.html b/drawio_integration.html
 <html style="margin:0px;overflow:hidden;">
 <head>
 	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/css/bulma.css" />
 	<script type="text/javascript">
 		const DRAW_IFRAME_URL = 'https://www.draw.io/?embed=1&lang=ja';
 		let graph = null;
 		let xml = null;
 		let globalMxStyleSheet = null;

 		function bytesToString(arr)
 		{
 				var str = '';
 				for (var i = 0; i < arr.length; i++)
 				{
 						str += String.fromCharCode(arr[i]);
 				}
 				return str;
 		};

 		function decode(data) {
 			try {
 				var node = mxUtils.parseXml(data).documentElement;
 				if (node != null && node.nodeName == 'mxfile') {
 					var diagrams = node.getElementsByTagName('diagram');
 					if (diagrams.length > 0) {
 						// data = getTextContent(diagrams[0]);
 						data = diagrams[0].textContent;
 					}
 				}
 			} catch (e) {
 				// ignore
 			}

 			try {
 				data = atob(data);
 			} catch (e) {
 				console.log(e);
 				alert('atob failed: ' + e);
 				return;
 			}

 			try {
 				data = bytesToString(pako.inflateRaw(data));
 			} catch (e) {
 				console.log(e);
 				alert('inflateRaw failed: ' + e);
 				return;
 			}

 			try {
 				data = decodeURIComponent(data);
 			} catch (e) {
 				console.log(e);
 				alert('decodeURIComponent failed: ' + e);
 				return;
 			}

 			return data;
 		}

 		function mxClientOnLoad(mxStylesheet) {
 			xml = document.getElementById('mxfile').value;
 			let xmlDecoded = decode(xml)

 			var div = document.getElementById('preview');

 			if (mxStylesheet != null) {
 				globalMxStyleSheet = mxStylesheet
 			}

 			updateGraph(div, xmlDecoded)

 			window.addEventListener('resize', function () {
 				graph.fit();
 				graph.center(true, false);
 			});
 		}

 		function updateGraph(element, xml) {
 			// Removes all illegal control characters before parsing
 			let checked = [];

 			for (let i = 0; i < xml.length; i++) {
 				let code = xml.charCodeAt(i);

 				// Removes all control chars except TAB, LF and CR
 				if (code >= 32 || code == 9 || code == 10 || code == 13) {
 					checked.push(xml.charAt(i));
 				}
 			}

 			xml = checked.join('');

 			if (graph != null) {
 				graph.destroy()
 			}

 			graph = new mxGraph(element);

 			graph.resetViewOnRootChange = false;
 			graph.foldingEnabled = false;
 			// NOTE: Tooltips require CSS
 			graph.setTooltips(false);
 			graph.setEnabled(false);

 			// Loads the stylesheet
 			if (globalMxStyleSheet != null) {
 				var xmlDoc = mxUtils.parseXml(globalMxStyleSheet);
 				var dec = new mxCodec(xmlDoc);
 				dec.decode(xmlDoc.documentElement, graph.getStylesheet());
 			}

 			var xmlDoc = mxUtils.parseXml(xml);
 			var codec = new mxCodec(xmlDoc);
 			codec.decode(codec.document.documentElement, graph.getModel());
 			graph.maxFitScale = 1;
 			graph.fit();
 			graph.center(true, false);
 		}

 		function edit(url) {
 			xml = document.getElementById('mxfile').value;

 			var border = 0;
 			var iframe = document.createElement('iframe');
 			iframe.style.zIndex = '9999';
 			iframe.style.position = 'absolute';
 			iframe.style.top = border + 'px';
 			iframe.style.left = border + 'px';

 			if (border == 0) {
 				iframe.setAttribute('frameborder', '0');
 			}

 			var resize = function () {
 				iframe.setAttribute('width', document.body.clientWidth - 2 * border);
 				iframe.setAttribute('height', document.body.clientHeight - 2 * border);
 			};

 			window.addEventListener('resize', resize);
 			resize();

 			var receive = function (evt) {
 				if (evt.data == 'ready') {
 					iframe.contentWindow.postMessage(xml, '*');
 					resize();
 				} else {
 					if (evt.data.length > 0) {
 						// Update the graph
 						var xmlDoc = mxUtils.parseXml(evt.data);
 						// var codec = new mxCodec(xmlDoc);
 						// codec.decode(codec.document.documentElement, graph.getModel());
 						// graph.fit();

 						save(xmlDoc, location.pathname.substring(location.pathname.lastIndexOf("/") + 1));
 					}

 					window.removeEventListener('resize', resize);
 					window.removeEventListener('message', receive);
 					document.body.removeChild(iframe);
 				}
 			};

 			window.addEventListener('message', receive);
 			iframe.setAttribute('src', DRAW_IFRAME_URL);
 			document.body.appendChild(iframe);
 		}

 		function save(data, filename) {
 			try {
 				let xmlString = new XMLSerializer().serializeToString(data)
 				document.getElementById('mxfile').value = xmlString
 				let div = document.getElementById('preview')

 				let xmlDecoded = decode(xmlString)

 				updateGraph(div, xmlDecoded)
 			} catch (e) {
 				console.log('error', e);
 				console.log('html', data);
 			}
 		};
 	</script>
 </head>

 <body>
 	<h1 class="title">Draw.io integration demo</h1>

 	<div class="columns">
 		<div class="column">
 			<button onclick="edit();" class="button is-primary">
 				Edit
 			</button>

 			<textarea id="mxfile" class="textarea" rows="20">
 				<mxfile host="www.draw.io" modified="2020-01-07T02:27:36.350Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36" version="12.4.9" etag="14J0uzPSllv8-7iGFkXe"><diagram id="GzqZ6ak40Q6orY9AhMZG" name="Page-1">3Vvbbqs4FP2aPLYCDLk8nt7OvIw0UkeaM48UnGCVYMY4TXK+fmywCdhOjtMY6ExVVWEDBi/vy1re6Qw8bg/fSVxmv+MU5rPASw8z8DQLgoUXsb/ccGwM80AYNgSljck/GV7RTyiMnrDuUAqr3oUU45yism9McFHAhPZsMSF4379sjfP+U8t4AzXDaxLnuvUvlNKssS6D+cn+G0SbTD7Zn6+aM9tYXixmUmVxivcdE3iegUeCMW0+bQ+PMOfYSVya+17OnG1fjMCCWt0QNHd8xPlOTO7PjMA4ZTYxWEWPct7VHm3zuGBHD/sMUfhaxgk/tWerrD9Z3P8BCYWHjkm8yXeIt5CSI7tEnJ0LUIRXSIz2J4hbD8g68EYLYYzFsm7akU8zZx/E5M8AATQgtOmzO5iH8dmzZSu5saIxoa80pty4Rnn+iHNM6quBV//wiynB77BzZr0WZwyYBdeC5nt91EIdNWAADbjALLTALGWRIw5h/ob3zyfDQ21gJzJM0E9c0Jg96YFPHbFY+5ajTcFOvmFK8ZZfXaTfePAyGy5h0VhEcliacH55ETiz614Qn8aTz44I3hUp5HPwzi9AhXckgX3fYIu9gfI6kbH4/G5ZJhP+YpA/MGJvdRpBPvIoj5UhmtcTdymr2L6Q3cJG2sKilK2Yurgu/FcJ+nZWHf/1jVHvwoHn2jx3FSR81IQiXIwxYVOaG27CC4uI1cJsuMCKDIE1twwsAvOYoo9+Sb4JnKUGTokrWvOI7TYu0jHcAUgqNIo7rL6WO8wN7rCcyh1kXLqtbhfB08vbTXAubyhbXffzDO7XGq1xP1PV1HS4Uvy6mZFW1bSBtEKiDnSmPDLM42PnspJfUJ1/YaC8b9Qj2OxDM+BnS2/Lmg2EXPe/gQl5sFAma2Dky6EYuQy3iRn5zTJmREIe2IiY/xghl/h3M5ucVjezBaFlZjv0l0VxbfvMFfXpuGW6+UxK0GWWJRv/RMRPyMYDXXUkGUzeZ3yHhpNy9lvA/YmPVWNAMCo/D3RBogfwMITMGGehIc5sGYR7QqaLl5aYe//s4G6UkBiVoAe6JJnUHwx6Ta7KBP6gqxfhBR7clvSoIUUyvH3bVToxWLOfZHhi4EdqatFdyUSnLu0V2YIl6UUHrCPUE+j17CAWrCCHazoQWTgg+oM76X0kjv6uXfZ2d15Zuq5YvzsxhmPJ46uZwpFSaRWQfM7SrVQBulQp8PAeRXE5Kfdc6TkQXLkZ7MqRlAUGsq/mnoMCGzE2cSGyjWbnhQhYyC6pT3NUq/UGGdk8nF8sPQQzOct3o8HT6gI+V9QhZQ/DDxb3eiWKDJXIjxyg9T/sGpl8FBi6RteKVHWlVJH56xyh7lf5KplwmCN0/Zaiqoxpks06e+jeHpP3uslCxcbWAKTdDydk7UBXcQlBtXvymUJzb0lmiAJT834e89XGbWUX50aIvP4GRrgyCF3T1q8TiK5rRBW4kzUvx6qnxCp4SOMqqw8M344wFpeFHrhgsq4UsJCARl85i5UifoTdgUcFYd+jwMpQVXR/Cl0UFZtO1tVFhWFBjj9mUmywg1p51DpkoEaOsZIY2A6w7YuN1chRd72XSpaw7eOo6gioAzlTR0r689yqo1AX3G0jB+jJf9hGTqTuPBgaOaamhJNGTqjrxJLgBFbV7JrWeguo9awVeRR6I3KA0EYwfZXusYT2yySTO4W1hup3nWyzyZ2vdjTURo+jdHLnKxHmeLMlvLK1Z8OYbneYbkWSYf51nShY3StUw9aN1Eyij+RORoU2+ljre3NR+8mut4NMq+rUyNMLzFBN71CXnTpew2xNSaC6ZE2GQS80bGW/c/UQTtdQNBBZ0zeSRusfscPT9+qbuDz9cwJ4/hc=</diagram></mxfile>
 			</textarea>
 		</div>
 		<div class="column">
 			<figure id="preview" class="image">
 			</figure>
 		</div>
 	</div>

 	<script type="text/javascript">
 		var doc = document.documentElement.outerHTML;
 	</script>
 	<script type="text/javascript" src="https://www.draw.io/embed.js"></script>
 </body>

 </html>
	<html style="margin:0px;overflow:hidden;">
	<head>
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/css/bulma.css" />
	<script type="text/javascript">
	const DRAW_IFRAME_URL = 'https://www.draw.io/?embed=1&lang=ja';
	let graph = null;
	let xml = null;
	let globalMxStyleSheet = null;

	function bytesToString(arr)
	{
	var str = '';
	for (var i = 0; i < arr.length; i++)
	{
	str += String.fromCharCode(arr[i]);
	}
	return str;
	};

	function decode(data) {
	try {
	var node = mxUtils.parseXml(data).documentElement;
	if (node != null && node.nodeName == 'mxfile') {
	var diagrams = node.getElementsByTagName('diagram');
	if (diagrams.length > 0) {
	// data = getTextContent(diagrams[0]);
	data = diagrams[0].textContent;
	}
	}
	} catch (e) {
	// ignore
	}

	try {
	data = atob(data);
	} catch (e) {
	console.log(e);
	alert('atob failed: ' + e);
	return;
	}

	try {
	data = bytesToString(pako.inflateRaw(data));
	} catch (e) {
	console.log(e);
	alert('inflateRaw failed: ' + e);
	return;
	}

	try {
	data = decodeURIComponent(data);
	} catch (e) {
	console.log(e);
	alert('decodeURIComponent failed: ' + e);
	return;
	}

	return data;
	}

	function mxClientOnLoad(mxStylesheet) {
	xml = document.getElementById('mxfile').value;
	let xmlDecoded = decode(xml)

	var div = document.getElementById('preview');

	if (mxStylesheet != null) {
	globalMxStyleSheet = mxStylesheet
	}

	updateGraph(div, xmlDecoded)

	window.addEventListener('resize', function () {
	graph.fit();
	graph.center(true, false);
	});
	}

	function updateGraph(element, xml) {
	// Removes all illegal control characters before parsing
	let checked = [];

	for (let i = 0; i < xml.length; i++) {
	let code = xml.charCodeAt(i);

	// Removes all control chars except TAB, LF and CR
	if (code >= 32 \|\| code == 9 \|\| code == 10 \|\| code == 13) {
	checked.push(xml.charAt(i));
	}
	}

	xml = checked.join('');

	if (graph != null) {
	graph.destroy()
	}

	graph = new mxGraph(element);

	graph.resetViewOnRootChange = false;
	graph.foldingEnabled = false;
	// NOTE: Tooltips require CSS
	graph.setTooltips(false);
	graph.setEnabled(false);

	// Loads the stylesheet
	if (globalMxStyleSheet != null) {
	var xmlDoc = mxUtils.parseXml(globalMxStyleSheet);
	var dec = new mxCodec(xmlDoc);
	dec.decode(xmlDoc.documentElement, graph.getStylesheet());
	}

	var xmlDoc = mxUtils.parseXml(xml);
	var codec = new mxCodec(xmlDoc);
	codec.decode(codec.document.documentElement, graph.getModel());
	graph.maxFitScale = 1;
	graph.fit();
	graph.center(true, false);
	}

	function edit(url) {
	xml = document.getElementById('mxfile').value;

	var border = 0;
	var iframe = document.createElement('iframe');
	iframe.style.zIndex = '9999';
	iframe.style.position = 'absolute';
	iframe.style.top = border + 'px';
	iframe.style.left = border + 'px';

	if (border == 0) {
	iframe.setAttribute('frameborder', '0');
	}

	var resize = function () {
	iframe.setAttribute('width', document.body.clientWidth - 2 * border);
	iframe.setAttribute('height', document.body.clientHeight - 2 * border);
	};

	window.addEventListener('resize', resize);
	resize();

	var receive = function (evt) {
	if (evt.data == 'ready') {
	iframe.contentWindow.postMessage(xml, '*');
	resize();
	} else {
	if (evt.data.length > 0) {
	// Update the graph
	var xmlDoc = mxUtils.parseXml(evt.data);
	// var codec = new mxCodec(xmlDoc);
	// codec.decode(codec.document.documentElement, graph.getModel());
	// graph.fit();

	save(xmlDoc, location.pathname.substring(location.pathname.lastIndexOf("/") + 1));
	}

	window.removeEventListener('resize', resize);
	window.removeEventListener('message', receive);
	document.body.removeChild(iframe);
	}
	};

	window.addEventListener('message', receive);
	iframe.setAttribute('src', DRAW_IFRAME_URL);
	document.body.appendChild(iframe);
	}

	function save(data, filename) {
	try {
	let xmlString = new XMLSerializer().serializeToString(data)
	document.getElementById('mxfile').value = xmlString
	let div = document.getElementById('preview')

	let xmlDecoded = decode(xmlString)

	updateGraph(div, xmlDecoded)
	} catch (e) {
	console.log('error', e);
	console.log('html', data);
	}
	};
	</script>
	</head>

	<body>
	<h1 class="title">Draw.io integration demo</h1>

	<div class="columns">
	<div class="column">
	<button onclick="edit();" class="button is-primary">
	Edit
	</button>

	<textarea id="mxfile" class="textarea" rows="20">
	<mxfile host="www.draw.io" modified="2020-01-07T02:27:36.350Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36" version="12.4.9" etag="14J0uzPSllv8-7iGFkXe"><diagram id="GzqZ6ak40Q6orY9AhMZG" name="Page-1">3Vvbbqs4FP2aPLYCDLk8nt7OvIw0UkeaM48UnGCVYMY4TXK+fmywCdhOjtMY6ExVVWEDBi/vy1re6Qw8bg/fSVxmv+MU5rPASw8z8DQLgoUXsb/ccGwM80AYNgSljck/GV7RTyiMnrDuUAqr3oUU45yism9McFHAhPZsMSF4379sjfP+U8t4AzXDaxLnuvUvlNKssS6D+cn+G0SbTD7Zn6+aM9tYXixmUmVxivcdE3iegUeCMW0+bQ+PMOfYSVya+17OnG1fjMCCWt0QNHd8xPlOTO7PjMA4ZTYxWEWPct7VHm3zuGBHD/sMUfhaxgk/tWerrD9Z3P8BCYWHjkm8yXeIt5CSI7tEnJ0LUIRXSIz2J4hbD8g68EYLYYzFsm7akU8zZx/E5M8AATQgtOmzO5iH8dmzZSu5saIxoa80pty4Rnn+iHNM6quBV//wiynB77BzZr0WZwyYBdeC5nt91EIdNWAADbjALLTALGWRIw5h/ob3zyfDQ21gJzJM0E9c0Jg96YFPHbFY+5ajTcFOvmFK8ZZfXaTfePAyGy5h0VhEcliacH55ETiz614Qn8aTz44I3hUp5HPwzi9AhXckgX3fYIu9gfI6kbH4/G5ZJhP+YpA/MGJvdRpBPvIoj5UhmtcTdymr2L6Q3cJG2sKilK2Yurgu/FcJ+nZWHf/1jVHvwoHn2jx3FSR81IQiXIwxYVOaG27CC4uI1cJsuMCKDIE1twwsAvOYoo9+Sb4JnKUGTokrWvOI7TYu0jHcAUgqNIo7rL6WO8wN7rCcyh1kXLqtbhfB08vbTXAubyhbXffzDO7XGq1xP1PV1HS4Uvy6mZFW1bSBtEKiDnSmPDLM42PnspJfUJ1/YaC8b9Qj2OxDM+BnS2/Lmg2EXPe/gQl5sFAma2Dky6EYuQy3iRn5zTJmREIe2IiY/xghl/h3M5ucVjezBaFlZjv0l0VxbfvMFfXpuGW6+UxK0GWWJRv/RMRPyMYDXXUkGUzeZ3yHhpNy9lvA/YmPVWNAMCo/D3RBogfwMITMGGehIc5sGYR7QqaLl5aYe//s4G6UkBiVoAe6JJnUHwx6Ta7KBP6gqxfhBR7clvSoIUUyvH3bVToxWLOfZHhi4EdqatFdyUSnLu0V2YIl6UUHrCPUE+j17CAWrCCHazoQWTgg+oM76X0kjv6uXfZ2d15Zuq5YvzsxhmPJ46uZwpFSaRWQfM7SrVQBulQp8PAeRXE5Kfdc6TkQXLkZ7MqRlAUGsq/mnoMCGzE2cSGyjWbnhQhYyC6pT3NUq/UGGdk8nF8sPQQzOct3o8HT6gI+V9QhZQ/DDxb3eiWKDJXIjxyg9T/sGpl8FBi6RteKVHWlVJH56xyh7lf5KplwmCN0/Zaiqoxpks06e+jeHpP3uslCxcbWAKTdDydk7UBXcQlBtXvymUJzb0lmiAJT834e89XGbWUX50aIvP4GRrgyCF3T1q8TiK5rRBW4kzUvx6qnxCp4SOMqqw8M344wFpeFHrhgsq4UsJCARl85i5UifoTdgUcFYd+jwMpQVXR/Cl0UFZtO1tVFhWFBjj9mUmywg1p51DpkoEaOsZIY2A6w7YuN1chRd72XSpaw7eOo6gioAzlTR0r689yqo1AX3G0jB+jJf9hGTqTuPBgaOaamhJNGTqjrxJLgBFbV7JrWeguo9awVeRR6I3KA0EYwfZXusYT2yySTO4W1hup3nWyzyZ2vdjTURo+jdHLnKxHmeLMlvLK1Z8OYbneYbkWSYf51nShY3StUw9aN1Eyij+RORoU2+ljre3NR+8mut4NMq+rUyNMLzFBN71CXnTpew2xNSaC6ZE2GQS80bGW/c/UQTtdQNBBZ0zeSRusfscPT9+qbuDz9cwJ4/hc=</diagram></mxfile>
	</textarea>
	</div>
	<div class="column">
	<figure id="preview" class="image">
	</figure>
	</div>
	</div>

	<script type="text/javascript">
	var doc = document.documentElement.outerHTML;
	</script>
	<script type="text/javascript" src="https://www.draw.io/embed.js"></script>
	</body>

	</html>