index.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Grapheditor</title>
  5. <!--[if IE]>
  6. <meta http-equiv="X-UA-Compatible" content="IE=5,IE=9">
  7. <![endif]-->
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  10. <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
  11. <script type="text/javascript">
  12. var urlParams = (function (url) {
  13. var result = {};
  14. var idx = url.lastIndexOf('?');
  15. if (idx > 0) {
  16. var params = url.substring(idx + 1).split('&');
  17. for (var i = 0; i < params.length; i++) {
  18. idx = params[i].indexOf('=');
  19. if (idx > 0) {
  20. result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
  21. }
  22. }
  23. }
  24. return result;
  25. })(window.location.href);
  26. mxLoadResources = false;
  27. window.mxBasePath = "./src";
  28. </script>
  29. <script type="text/javascript" src="js/Init.js"></script>
  30. <script type="text/javascript" src="deflate/pako.min.js"></script>
  31. <script type="text/javascript" src="deflate/base64.js"></script>
  32. <script type="text/javascript" src="jscolor/jscolor.js"></script>
  33. <script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
  34. <script type="text/javascript" src="js/mxClient.js"></script>
  35. <script type="text/javascript" src="js/EditorUi.js"></script>
  36. <script type="text/javascript" src="js/Editor.js"></script>
  37. <script type="text/javascript" src="js/Sidebar.js"></script>
  38. <script type="text/javascript" src="js/Graph.js"></script>
  39. <script type="text/javascript" src="js/Format.js"></script>
  40. <script type="text/javascript" src="js/Shapes.js"></script>
  41. <script type="text/javascript" src="js/Actions.js"></script>
  42. <script type="text/javascript" src="js/Menus.js"></script>
  43. <script type="text/javascript" src="js/Toolbar.js"></script>
  44. <script type="text/javascript" src="js/Dialogs.js"></script>
  45. </head>
  46. <body class="geEditor">
  47. <script type="text/javascript">
  48. (function () {
  49. var editorUiInit = EditorUi.prototype.init;
  50. EditorUi.prototype.init = function () {
  51. editorUiInit.apply(this, arguments);
  52. this.actions.get('new').setEnabled(false);
  53. this.actions.get('export').setEnabled(false);
  54. this.actions.get('open').setEnabled(false);
  55. this.actions.get('import').setEnabled(false);
  56. this.actions.get('save').setEnabled(false);
  57. this.actions.get('saveAs').setEnabled(false);
  58. this.actions.get('export').setEnabled(false);
  59. };
  60. EditorUi.prototype.menubarHeight = 0;
  61. EditorUi.prototype.footerHeight = 0;
  62. mxResources.loadDefaultBundle = false;
  63. var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) || mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
  64. mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function (xhr) {
  65. mxResources.parse(xhr[0].getText());
  66. var themes = {};
  67. themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
  68. var editorUi = new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
  69. var graph = editorUi.editor.graph;
  70. var backupXml;
  71. var newXml;
  72. graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() {
  73. newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml());
  74. if (backupXml && backupXml.replace(/^<mxGraphModel(.*?)>/, '') == newXml.replace(/^<mxGraphModel(.*?)>/, '')) {
  75. return;
  76. }
  77. backupXml = newXml;
  78. window.parent.postMessage({
  79. act: 'change',
  80. params: {
  81. xml: newXml
  82. }
  83. }, '*');
  84. }));
  85. window.addEventListener("message", function(event){
  86. var data = event.data;
  87. switch (data.act) {
  88. case 'setXml':
  89. try {
  90. backupXml = data.params.xml;
  91. var defaultXml = mxUtils.parseXml(data.params.xml);
  92. editorUi.editor.setGraphXml(defaultXml.documentElement);
  93. } catch (e) {
  94. }
  95. break;
  96. case 'exportPNG':
  97. try {
  98. (function (name, scale, type) {
  99. name = name || '未命名';
  100. type = type || 'png';
  101. scale = scale || 1;
  102. var graph = editorUi.editor.graph;
  103. var bounds = graph.getGraphBounds();
  104. var width = Math.ceil(bounds.width / graph.view.scale * scale);
  105. var height = Math.ceil(bounds.height / graph.view.scale * scale);
  106. var source = '<?xml version="1.0" standalone="no"?>\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0))
  107. var image = new Image()
  108. image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
  109. var canvas = document.createElement('canvas')
  110. canvas.width = width
  111. canvas.height = height
  112. var context = canvas.getContext('2d')
  113. context.fillStyle = '#fff'
  114. context.fillRect(0, 0, 10000, 10000)
  115. image.onload = function () {
  116. context.drawImage(image, 0, 0)
  117. if (type == 'imageContent') {
  118. window.parent.postMessage({
  119. act: 'imageContent',
  120. params: {
  121. name: name,
  122. width: width,
  123. height: height,
  124. content: canvas.toDataURL(`image/${type}`)
  125. }
  126. }, '*');
  127. } else {
  128. var a = document.createElement('a')
  129. a.download = `${name}.${type}`
  130. a.href = canvas.toDataURL(`image/${type}`)
  131. a.click()
  132. }
  133. }
  134. })(data.params.name, data.params.scale, data.params.type);
  135. } catch (e) {
  136. }
  137. break;
  138. }
  139. });
  140. window.parent.postMessage({
  141. act: 'ready',
  142. params: {}
  143. }, '*');
  144. }, function () {
  145. document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
  146. });
  147. })();
  148. </script>
  149. </body>
  150. </html>