106 lines
3.6 KiB
HTML
106 lines
3.6 KiB
HTML
<!--[if IE]>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9"><![endif]-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Grapheditor viewer</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<style>
|
|
#graph {
|
|
position: absolute;
|
|
cursor: move;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
var STENCIL_PATH = 'stencils';
|
|
var IMAGE_PATH = 'images';
|
|
var STYLE_PATH = 'styles';
|
|
|
|
var urlParams = (function (url) {
|
|
var result = {};
|
|
var idx = url.lastIndexOf('?');
|
|
if (idx > 0) {
|
|
var params = url.substring(idx + 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);
|
|
|
|
var mxLoadResources = false;
|
|
var mxBasePath = './src';
|
|
</script>
|
|
<script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
|
|
<script type="text/javascript" src="js/mxClient.js"></script>
|
|
<script type="text/javascript" src="js/Graph.js"></script>
|
|
<script type="text/javascript" src="js/Shapes.js"></script>
|
|
</head>
|
|
<body class="geEditor">
|
|
<div id="graph"></div>
|
|
<script type="text/javascript">
|
|
(function (win) {
|
|
var graph = new Graph(document.getElementById('graph'));
|
|
|
|
graph.setTooltips(false);
|
|
graph.setEnabled(false);
|
|
graph.setPanning(true);
|
|
|
|
var style = graph.getStylesheet().getDefaultVertexStyle();
|
|
style[mxConstants.STYLE_FONTCOLOR] = "#000000";
|
|
style[mxConstants.STYLE_STROKECOLOR] = "#777777";
|
|
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
|
|
(style = graph.getStylesheet().getDefaultEdgeStyle())[mxConstants.STYLE_STROKECOLOR] = "#777777";
|
|
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
|
|
|
|
graph.panningHandler.useLeftButtonForPanning = true;
|
|
graph.panningHandler.ignoreCell = true;
|
|
graph.container.style.cursor = "move";
|
|
graph.resizeContainer = false;
|
|
graph.centerZoom = true;
|
|
graph.border = 0;
|
|
|
|
|
|
win.addEventListener("message", function (event) {
|
|
var data = event.data;
|
|
switch (data.act) {
|
|
case 'setXml':
|
|
try {
|
|
var xmlDoc = mxUtils.parseXml(data.params.xml);
|
|
var codec = new mxCodec(xmlDoc);
|
|
codec.decode(xmlDoc.documentElement, graph.getModel());
|
|
typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
|
|
// typeof data.params.scrollTop === "number" && (graph.container.scrollTop = data.params.scrollTop);
|
|
// typeof data.params.scrollLeft === "number" && (graph.container.scrollLeft = data.params.scrollLeft);
|
|
} catch (e) {
|
|
|
|
}
|
|
break;
|
|
|
|
case 'zoom':
|
|
try {
|
|
graph.zoomTo(data.params.zoom);
|
|
} catch (e) {
|
|
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
|
|
win.parent.postMessage({
|
|
act: 'ready',
|
|
params: {}
|
|
}, '*');
|
|
})(window);
|
|
</script>
|
|
</body>
|
|
</html>
|