index.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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(true);
  57. this.actions.get('saveAs').setEnabled(false);
  58. this.actions.get('export').setEnabled(false);
  59. };
  60. EditorUi.prototype.saveFile = function () {
  61. window.parent.postMessage({
  62. act: 'save',
  63. params: {
  64. }
  65. }, '*');
  66. };
  67. EditorUi.prototype.menubarHeight = 0;
  68. EditorUi.prototype.footerHeight = 0;
  69. mxResources.loadDefaultBundle = false;
  70. var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) || mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
  71. mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function (xhr) {
  72. mxResources.parse(xhr[0].getText());
  73. var themes = {};
  74. themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
  75. var editorUi = new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
  76. var graph = editorUi.editor.graph;
  77. var backupXml;
  78. var newXml;
  79. graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() {
  80. newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml());
  81. if (backupXml && backupXml.replace(/^<mxGraphModel(.*?)>/, '') == newXml.replace(/^<mxGraphModel(.*?)>/, '')) {
  82. return;
  83. }
  84. backupXml = newXml;
  85. window.parent.postMessage({
  86. act: 'change',
  87. params: {
  88. xml: newXml
  89. }
  90. }, '*');
  91. }));
  92. window.addEventListener("message", function(event){
  93. var data = event.data;
  94. switch (data.act) {
  95. case 'setXml':
  96. try {
  97. backupXml = data.params.xml;
  98. var defaultXml = mxUtils.parseXml(data.params.xml);
  99. editorUi.editor.setGraphXml(defaultXml.documentElement);
  100. } catch (e) {
  101. }
  102. break;
  103. case 'exportPNG':
  104. try {
  105. (function (name, scale, type) {
  106. name = name || '未命名';
  107. type = type || 'png';
  108. scale = scale || 1;
  109. var graph = editorUi.editor.graph;
  110. var bounds = graph.getGraphBounds();
  111. var width = Math.ceil(bounds.width / graph.view.scale * scale);
  112. var height = Math.ceil(bounds.height / graph.view.scale * scale);
  113. var source = '<?xml version="1.0" standalone="no"?>\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0))
  114. var image = new Image()
  115. image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
  116. var canvas = document.createElement('canvas')
  117. canvas.width = width
  118. canvas.height = height
  119. var context = canvas.getContext('2d')
  120. context.fillStyle = '#fff'
  121. context.fillRect(0, 0, 10000, 10000)
  122. image.onload = function () {
  123. context.drawImage(image, 0, 0)
  124. if (type == 'imageContent') {
  125. window.parent.postMessage({
  126. act: 'imageContent',
  127. params: {
  128. name: name,
  129. width: width,
  130. height: height,
  131. content: canvas.toDataURL(`image/${type}`)
  132. }
  133. }, '*');
  134. } else {
  135. var a = document.createElement('a')
  136. a.download = `${name}.${type}`
  137. a.href = canvas.toDataURL(`image/${type}`)
  138. a.click()
  139. }
  140. }
  141. })(data.params.name, data.params.scale, data.params.type);
  142. } catch (e) {
  143. }
  144. break;
  145. }
  146. });
  147. window.parent.postMessage({
  148. act: 'ready',
  149. params: {}
  150. }, '*');
  151. }, function () {
  152. document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
  153. });
  154. })();
  155. </script>
  156. </body>
  157. </html>