viewer.html 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!--[if IE]>
  2. <meta http-equiv="X-UA-Compatible" content="IE=5,IE=9"><![endif]-->
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <title>Grapheditor viewer</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  9. <style>
  10. #graph {
  11. position: absolute;
  12. cursor: move;
  13. left: 0;
  14. right: 0;
  15. top: 0;
  16. bottom: 0
  17. }
  18. </style>
  19. <script type="text/javascript">
  20. var STENCIL_PATH = 'stencils';
  21. var IMAGE_PATH = 'images';
  22. var STYLE_PATH = 'styles';
  23. var urlParams = (function (url) {
  24. var result = {};
  25. var idx = url.lastIndexOf('?');
  26. if (idx > 0) {
  27. var params = url.substring(idx + 1).split('&');
  28. for (var i = 0; i < params.length; i++) {
  29. idx = params[i].indexOf('=');
  30. if (idx > 0) {
  31. result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
  32. }
  33. }
  34. }
  35. return result;
  36. })(window.location.href);
  37. var mxLoadResources = false;
  38. var mxBasePath = './src';
  39. </script>
  40. <script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
  41. <script type="text/javascript" src="js/mxClient.js"></script>
  42. <script type="text/javascript" src="js/Graph.js"></script>
  43. <script type="text/javascript" src="js/Shapes.js"></script>
  44. </head>
  45. <body class="geEditor">
  46. <div id="graph"></div>
  47. <script type="text/javascript">
  48. (function (win) {
  49. var graph = new Graph(document.getElementById('graph'));
  50. graph.setTooltips(false);
  51. graph.setEnabled(false);
  52. graph.setPanning(true);
  53. var style = graph.getStylesheet().getDefaultVertexStyle();
  54. style[mxConstants.STYLE_FONTCOLOR] = "#000000";
  55. style[mxConstants.STYLE_STROKECOLOR] = "#777777";
  56. style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
  57. (style = graph.getStylesheet().getDefaultEdgeStyle())[mxConstants.STYLE_STROKECOLOR] = "#777777";
  58. style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
  59. graph.panningHandler.useLeftButtonForPanning = true;
  60. graph.panningHandler.ignoreCell = true;
  61. graph.container.style.cursor = "move";
  62. graph.resizeContainer = false;
  63. graph.centerZoom = true;
  64. graph.border = 0;
  65. win.addEventListener("message", function (event) {
  66. var data = event.data;
  67. switch (data.act) {
  68. case 'setXml':
  69. try {
  70. var xmlDoc = mxUtils.parseXml(data.params.xml);
  71. var codec = new mxCodec(xmlDoc);
  72. codec.decode(xmlDoc.documentElement, graph.getModel());
  73. typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
  74. // typeof data.params.scrollTop === "number" && (graph.container.scrollTop = data.params.scrollTop);
  75. // typeof data.params.scrollLeft === "number" && (graph.container.scrollLeft = data.params.scrollLeft);
  76. } catch (e) {
  77. }
  78. break;
  79. }
  80. });
  81. win.parent.postMessage({
  82. act: 'ready',
  83. params: {}
  84. }, '*');
  85. })(window);
  86. </script>
  87. </body>
  88. </html>