Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

executable file 157 lines (145 sloc) 6.68 KB
<html>
<title>Draw.io Embedded (SVG DOM)</title>
<head>
<style type="text/css">
html, body, #wrapper {
height:100%;
width:100%;
margin:0;
padding:0;
border:0;
}
table#wrapper {
height:75%;
}
#wrapper td {
vertical-align:middle;
text-align:center;
cursor:pointer;
}
iframe {
border:0;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%
}
</style>
<script type="text/javascript">
var editor = 'https://www.draw.io/?embed=1&ui=min&spin=1&proto=json&configure=1';
var initial = null;
var name = null;
function edit(elt)
{
var iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', '0');
var close = function()
{
window.removeEventListener('message', receive);
document.body.removeChild(iframe);
};
var draft = localStorage.getItem('.draft-' + name);
if (draft != null)
{
draft = JSON.parse(draft);
if (!confirm("A version of this page from " + new Date(draft.lastModified) + " is available. Would you like to continue editing?"))
{
draft = null;
}
}
var receive = function(evt)
{
if (evt.data.length > 0)
{
var msg = JSON.parse(evt.data);
// If configure=1 URL parameter is used the application
// waits for this message. For configuration options see
// https://desk.draw.io/support/solutions/articles/16000058316
if (msg.event == 'configure')
{
// Configuration example
iframe.contentWindow.postMessage(JSON.stringify({action: 'configure',
config: {defaultFonts: ["Humor Sans", "Helvetica", "Times New Roman"]}}), '*');
}
else if (msg.event == 'init')
{
if (draft != null)
{
iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
autosave: 1, xml: draft.xml}), '*');
iframe.contentWindow.postMessage(JSON.stringify({action: 'status',
modified: true}), '*');
}
else
{
// Avoids unescaped < and > from innerHTML for valid XML
var svg = new XMLSerializer().serializeToString(elt.firstChild);
iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
autosave: 1, xml: svg}), '*');
}
}
else if (msg.event == 'export')
{
// Extracts SVG DOM from data URI to enable links
var svg = atob(msg.data.substring(msg.data.indexOf(',') + 1));
elt.innerHTML = svg;
localStorage.setItem(name, JSON.stringify({lastModified: new Date(), data: svg}));
localStorage.removeItem('.draft-' + name);
draft = null;
close();
}
else if (msg.event == 'autosave')
{
localStorage.setItem('.draft-' + name, JSON.stringify({lastModified: new Date(), xml: msg.xml}));
}
else if (msg.event == 'save')
{
iframe.contentWindow.postMessage(JSON.stringify({action: 'export',
format: 'xmlsvg', xml: msg.xml, spin: 'Updating page'}), '*');
localStorage.setItem('.draft-' + name, JSON.stringify({lastModified: new Date(), xml: msg.xml}));
}
else if (msg.event == 'exit')
{
localStorage.removeItem('.draft-' + name);
draft = null;
close();
}
}
};
window.addEventListener('message', receive);
iframe.setAttribute('src', editor);
document.body.appendChild(iframe);
};
function load()
{
initial = document.getElementById('diagram').innerHTML;
start();
};
function start()
{
name = (window.location.hash.length > 1) ? window.location.hash.substring(1) : 'default';
var current = localStorage.getItem(name);
if (current != null)
{
var entry = JSON.parse(current);
document.getElementById('diagram').innerHTML = entry.data;
}
else
{
document.getElementById('diagram').innerHTML = initial;
}
};
window.addEventListener('hashchange', start);
</script>
</head>
<body onload="load();">
<table id="wrapper">
<tr>
<td id="diagram" title="Double click to edit" ondblclick="edit(this);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="203px" height="64px" version="1.1" content="&lt;mxfile userAgent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36&quot; version=&quot;@DRAWIO-VERSION@&quot; editor=&quot;www.draw.io&quot;&gt;&lt;diagram id=&quot;14058d99-db58-e9f5-3aba-399879c13e25&quot; name=&quot;Page-1&quot;&gt;jZNNk4MgDIZ/jXeVbbe91n5d9tTDnimmwhSNg1jt/vpFCVWnszPLBfIkIfgmRiwr+5PhtfzCHHSUxnkfsX2Upkm62rhtIE9Pth8rDwqjcgqawEX9AMGYaKtyaBaBFlFbVS+hwKoCYReMG4PdMuyGelm15gW8gYvg+p1+q9xKTzfpeuJnUIUMlZP11nuuXNwLg21F9aKU3cbl3SUPd9GHNpLn2M0QO0QsM4jWn8o+Az1oG2Tzecc/vK93G6jsfxJY/OlTHly39PF7bK9OCKeuVuLudgkG6Ln2GSTqpLJwqbkY7M6NQcR20pbaWYk73rCyR14qPUzAGfQDrBKcHNTwZBNsunZIHMWDnCxuBAWvYgrOUKMZ38DicTmOhldDR3eF5k1Due9akDwPMBb6GSJtToAlWPN0IeR1JXxKmGMyu2ko0piYnA3EmhinOSxeN0+9cAdqRzCnto++2b/FDr8=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffcd28-1-ffa500-1-s-0"><stop offset="0%" style="stop-color:#FFCD28"/><stop offset="100%" style="stop-color:#FFA500"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffffff-0.9-ffffff-0.1-s-0"><stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.9"/><stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.1"/></linearGradient></defs><g transform="translate(0.5,0.5)"><rect x="0" y="0" width="200" height="60" rx="30" ry="30" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="0" y="0" width="200" height="60" rx="30" ry="30" fill="url(#mx-gradient-ffcd28-1-ffa500-1-s-0)" stroke="#d79b00" pointer-events="none"/><path d="M 31.5 -1 Q -1 -1 -1 31.5 L -1 24 Q 100 42 201 24 L 201 31.5 Q 201 -1 168.5 -1 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><g transform="translate(24.5,20.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="150" height="19" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 150px; white-space: nowrap; word-wrap: normal; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Double click here</div></div></foreignObject><text x="75" y="19" fill="#000000" text-anchor="middle" font-size="18px" font-family="Helvetica" font-weight="bold">Double click here</text></switch></g></g></svg></td>
</tr>
</table>
</body>
</html>
You can’t perform that action at this time.