viewer.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. case 'zoom':
  80. try {
  81. graph.zoomTo(data.params.zoom);
  82. } catch (e) {
  83. }
  84. break;
  85. }
  86. });
  87. win.parent.postMessage({
  88. act: 'ready',
  89. params: {}
  90. }, '*');
  91. })(window);
  92. </script>
  93. </body>
  94. </html>