viewer.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Grapheditor viewer</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8. <script type="text/javascript">
  9. var STENCIL_PATH = 'stencils';
  10. var IMAGE_PATH = 'images';
  11. var STYLE_PATH = 'styles';
  12. var urlParams = (function(url)
  13. {
  14. var result = new Object();
  15. var idx = url.lastIndexOf('?');
  16. if (idx > 0)
  17. {
  18. var params = url.substring(idx + 1).split('&');
  19. for (var i = 0; i < params.length; i++)
  20. {
  21. idx = params[i].indexOf('=');
  22. if (idx > 0)
  23. {
  24. result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
  25. }
  26. }
  27. }
  28. return result;
  29. })(window.location.href);
  30. // Sets the base path, the UI language via URL param and configures the
  31. // supported languages to avoid 404s. The loading of all core language
  32. // resources is disabled as all required resources are in grapheditor.
  33. // properties. Note that in this example the loading of two resource
  34. // files (the special bundle and the default bundle) is disabled to
  35. // save a GET request. This requires that all resources be present in
  36. // each properties file since only one file is loaded.
  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="../../../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. Input:
  47. <br />
  48. <textarea rows="24" cols="100" id="textarea" placeholder="mxGraphModel"></textarea>
  49. <br />
  50. <button onclick="show(document.getElementById('textarea').value);return false;">Show</button>
  51. <div id="graph"></div>
  52. <script type="text/javascript">
  53. var graph = new Graph(document.getElementById('graph'));
  54. graph.resizeContainer = true;
  55. graph.setEnabled(false);
  56. function show(data)
  57. {
  58. var xmlDoc = mxUtils.parseXml(data);
  59. var codec = new mxCodec(xmlDoc);
  60. codec.decode(xmlDoc.documentElement, graph.getModel());
  61. };
  62. </script>
  63. </body>
  64. </html>