Editor.js 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192
  1. /**
  2. * Copyright (c) 2006-2012, JGraph Ltd
  3. */
  4. /**
  5. * Editor constructor executed on page load.
  6. */
  7. Editor = function(chromeless, themes, model, graph)
  8. {
  9. mxEventSource.call(this);
  10. this.chromeless = (chromeless != null) ? chromeless : this.chromeless;
  11. this.initStencilRegistry();
  12. this.graph = graph || this.createGraph(themes, model);
  13. this.undoManager = this.createUndoManager();
  14. this.status = '';
  15. this.getOrCreateFilename = function()
  16. {
  17. return this.filename || mxResources.get('drawing', [Editor.pageCounter]) + '.xml';
  18. };
  19. this.getFilename = function()
  20. {
  21. return this.filename;
  22. };
  23. // Sets the status and fires a statusChanged event
  24. this.setStatus = function(value)
  25. {
  26. this.status = value;
  27. this.fireEvent(new mxEventObject('statusChanged'));
  28. };
  29. // Returns the current status
  30. this.getStatus = function()
  31. {
  32. return this.status;
  33. };
  34. // Updates modified state if graph changes
  35. this.graphChangeListener = function(sender, eventObject)
  36. {
  37. var edit = (eventObject != null) ? eventObject.getProperty('edit') : null;
  38. if (edit == null || !edit.ignoreEdit)
  39. {
  40. this.setModified(true);
  41. }
  42. };
  43. this.graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(this, function()
  44. {
  45. this.graphChangeListener.apply(this, arguments);
  46. }));
  47. // Sets persistent graph state defaults
  48. this.graph.resetViewOnRootChange = false;
  49. this.init();
  50. };
  51. /**
  52. * Counts open editor tabs (must be global for cross-window access)
  53. */
  54. Editor.pageCounter = 0;
  55. // Cross-domain window access is not allowed in FF, so if we
  56. // were opened from another domain then this will fail.
  57. (function()
  58. {
  59. try
  60. {
  61. var op = window;
  62. while (op.opener != null && typeof op.opener.Editor !== 'undefined' &&
  63. !isNaN(op.opener.Editor.pageCounter))
  64. {
  65. op = op.opener;
  66. }
  67. // Increments the counter in the first opener in the chain
  68. if (op != null)
  69. {
  70. op.Editor.pageCounter++;
  71. Editor.pageCounter = op.Editor.pageCounter;
  72. }
  73. }
  74. catch (e)
  75. {
  76. // ignore
  77. }
  78. })();
  79. /**
  80. * Specifies if local storage should be used (eg. on the iPad which has no filesystem)
  81. */
  82. Editor.useLocalStorage = typeof(Storage) != 'undefined' && mxClient.IS_IOS;
  83. /**
  84. * Images below are for lightbox and embedding toolbars.
  85. */
  86. Editor.helpImage = (mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC5BxTwAAAAH3RSTlMAlUF8boNQIE0LBgOgkGlHNSwqFIx/dGVUOjApmV9ezNACSAAAAIVJREFUGNNtjNsOgzAMQ5NeoVcKDAZs+//PXLKI8YKlWvaRU7jXuFpb9qsbdK05XILUiE8JHQox1Pv3OgFUzf1AGqWqUg+QBwLF0YAeegBlCNgRWOpB5vUfTCmeoHQ/wNdy0jLH/cM+b+wLTw4n/7ACEmHVVy8h6qy8V7MNcGowWpsNbvUFcGUEdSi1s/oAAAAASUVORK5CYII=' :
  87. IMAGE_PATH + '/help.png';
  88. /**
  89. * Sets the default font size.
  90. */
  91. Editor.checkmarkImage = (mxClient.IS_SVG) ? 'data:image/gif;base64,R0lGODlhFQAVAMQfAGxsbHx8fIqKioaGhvb29nJycvr6+sDAwJqamltbW5OTk+np6YGBgeTk5Ly8vJiYmP39/fLy8qWlpa6ursjIyOLi4vj4+N/f3+3t7fT09LCwsHZ2dubm5r6+vmZmZv///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEY4NTZERTQ5QUFBMTFFMUE5MTVDOTM5MUZGMTE3M0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEY4NTZERTU5QUFBMTFFMUE5MTVDOTM5MUZGMTE3M0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Rjg1NkRFMjlBQUExMUUxQTkxNUM5MzkxRkYxMTczRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Rjg1NkRFMzlBQUExMUUxQTkxNUM5MzkxRkYxMTczRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAB8ALAAAAAAVABUAAAVI4CeOZGmeaKqubKtylktSgCOLRyLd3+QJEJnh4VHcMoOfYQXQLBcBD4PA6ngGlIInEHEhPOANRkaIFhq8SuHCE1Hb8Lh8LgsBADs=' :
  92. IMAGE_PATH + '/checkmark.gif';
  93. /**
  94. * Images below are for lightbox and embedding toolbars.
  95. */
  96. Editor.maximizeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABXRSTlMA758vX1Pw3BoAAABJSURBVAjXY8AJQkODGBhUQ0MhbAUGBiYY24CBgRnGFmZgMISwgwwDGRhEhVVBbAVmEQYGRwMmBjIAQi/CTIRd6G5AuA3dzYQBAHj0EFdHkvV4AAAAAElFTkSuQmCC';
  97. /**
  98. * Specifies the image URL to be used for the transparent background.
  99. */
  100. Editor.zoomOutImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAElBMVEUAAAAAAAAsLCxxcXEhISFgYGChjTUxAAAAAXRSTlMAQObYZgAAAEdJREFUCNdjIAMwCQrB2YKCggJQJqMwA7MglK1owMBgqABVApITgLJZXFxgbIQ4Qj3CHIT5ggoIe5kgNkM1KSDYKBKqxPkDAPo5BAZBE54hAAAAAElFTkSuQmCC';
  101. /**
  102. * Specifies the image URL to be used for the transparent background.
  103. */
  104. Editor.zoomInImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAElBMVEUAAAAAAAAsLCwhISFxcXFgYGBavKaoAAAAAXRSTlMAQObYZgAAAElJREFUCNdjIAMwCQrB2YKCggJQJqMIA4sglK3owMzgqABVwsDMwCgAZTMbG8PYCHGEeoQ5CPMFFRD2MkFshmpSQLBRJFSJ8wcAEqcEM2uhl2MAAAAASUVORK5CYII=';
  105. /**
  106. * Specifies the image URL to be used for the transparent background.
  107. */
  108. Editor.zoomFitImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAD1BMVEUAAAAAAAAwMDBwcHBgYGC1xl09AAAAAXRSTlMAQObYZgAAAEFJREFUCNdjIAMwCQrB2YKCggJQJqMwA7MglK1owMBgqABVApITwMdGqEeYgzBfUAFhLxPEZqgmBQQbRUKFOH8AAK5OA3lA+FFOAAAAAElFTkSuQmCC';
  109. /**
  110. * Specifies the image URL to be used for the transparent background.
  111. */
  112. Editor.layersImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAaVBMVEUAAAAgICAICAgdHR0PDw8WFhYICAgLCwsXFxcvLy8ODg4uLi4iIiIqKiokJCQYGBgKCgonJycFBQUCAgIqKiocHBwcHBwODg4eHh4cHBwnJycJCQkUFBQqKiojIyMuLi4ZGRkgICAEBATOWYXAAAAAGnRSTlMAD7+fnz8/H7/ff18/77+vr5+fn39/b28fH2xSoKsAAACQSURBVBjTrYxJEsMgDARZZMAY73sgCcn/HxnhKtnk7j6oRq0psfuoyndZ/SuODkHPLzfVT6KeyPePnJ7KrnkRjWMXTn4SMnN8mXe2SSM3ts8L/ZUxxrbAULSYJJULE0Iw9pjpenoICcgcX61mGgTgtCv9Be99pzCoDhNQWQnchD1mup5++CYGcoQexajZbfwAj/0MD8ZOaUgAAAAASUVORK5CYII=';
  113. /**
  114. * Specifies the image URL to be used for the transparent background.
  115. */
  116. Editor.previousImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAh0lEQVQ4je3UsQnCUBCA4U8hpa1NsoEjpHQJS0dxADdwEMuMIJkgA1hYChbGQgMi+JC8q4L/AB/vDu7x74cWWEZhJU44RmA1zujR5GIbXF9YNrjD/Q0bDRY4fEBZ4P4LlgTnCbAf84pUM8/9hY08tMUtEoQ1LpEgrNBFglChFXR6Q6GfwwR6AGKJMF74Vtt3AAAAAElFTkSuQmCC';
  117. /**
  118. * Specifies the image URL to be used for the transparent background.
  119. */
  120. Editor.nextImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAi0lEQVQ4jeXUIQ7CUAwA0MeGxWI2yylwnALJUdBcgYvM7QYLmjOQIAkIPmJZghiIvypoUtX0tfnJL38X5ZfaEgUeUcManFBHgS0SLlhHggk3bCPBhCf2keCQR8wjwYTDp6YiZxJmOU1jGw7vGALescuBxsArNlOwd/CM1VSM/ut1qCIw+uOwiMJ+OF4CQzBCXm3hyAAAAABJRU5ErkJggg==';
  121. /**
  122. * Specifies the image URL to be used for the transparent background.
  123. */
  124. Editor.zoomOutLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA+vTcKMM96GRBHwXxi0YaX1HLrKWhiHpWEOnOr52Vb2xKSDcT19PKv5l/Ngdk8+viAAABJklEQVQ4y4WT2XaDMAxEvWD2nSSUNEnTJN3r//+9Sj7ILAY6L0ijC4ONYVZRpo6cByrz2YKSUGorGTpz71lPVHvT+avoB5wIkU/mxk8veceSuNoLg44IzziXjvpih72wKQnm8yc2UoiP/LAd8jQfe2Xf4Pq+2EyYIvv9wbzHHCgwxDdlBtWZOdqDfTCVgqpygQpsZaojVAVc9UjQxnAJDIBhiQv84tq3gMQCAVTxVoSibXJf8tMuc7e1TB/DCmejBNg/w1Y3c+AM5vv4w7xM59/oXamrHaLVqPQ+OTCnmMZxgz0SdL5zji0/ld6j88qGa5KIiBB6WeJGKfUKwSMKLuXgvl1TW0tm5R9UQL/efSDYsnzxD8CinhBsTTdugJatKpJwf8v+ADb8QmvW7AeAAAAAAElFTkSuQmCC';
  125. /**
  126. * Specifies the image URL to be used for the transparent background.
  127. */
  128. Editor.zoomInLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA+vTcKMM96GRBHwXxi0YaX1HLrKWhiHpWEOnOr52Vb2xKSDcT19PKv5l/Ngdk8+viAAABKElEQVQ4y4WT6WKCMBCENwkBwn2oFKvWqr3L+79es4EkQIDOH2d3Pxk2ABiJlB8JCXjqw4LikHVGLHTm3nM3UeVN5690GBBN0GwyV/3kkrUQR+WeKnREeKpzaXWd77CmJiXGfPIEI4V4yQ9TIW/ntlcMBe731Vts9w5TWG8F5j3mQI4hvrKpdGeYA7CX9qAcl650gVJartxRuhyHVghF8idQAIbFLvCLu28BsQEC6aKtCK6Pyb3JT7PmbmtNH8Ny56CotD/2qOs5cJbuffxgXmCib+xddVU5RNOhkvvkhTlFehzVWCOh3++MYElOhfdovaImnRYVmqDdsuhNp1QrBBE6uGC2+3ZNjGdg5B94oD+9uyVgWT79BwAxEBTWdOu3bWBVgsn/N/AHUD9IC01Oe40AAAAASUVORK5CYII=';
  129. /**
  130. * Specifies the image URL to be used for the transparent background.
  131. */
  132. Editor.actualSizeLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA+vTcKMM96GRBHwXxi0YaX1HLrKWhiHpWEOnOr52Vb2xKSDcT19PKv5l/Ngdk8+viAAABIUlEQVQ4y4WT2XqDIBCFBxDc9yTWNEnTJN3r+79eGT4BEbXnaubMr8dBBaM450dCQp4LWFAascGIRd48eB4cNYE7f6XjgGiCFs5c+dml6CFN6j1V6IQIlHPpdV/usKcmJcV88gQTRXjLD9Mhb+fWq8YG9/uCmTCFjeeDeY85UGKIUGUuqzN42kv7oCouq9oHamlzVR1lVfpAIu1QVRiW+sAv7r4FpAYIZZVsRXB9TP5Dfpo1d1trCgzz1iiptH/sUbdz4CzN9+mLeXHn3+hdddd4RDegsrvzwZwSs2GLPRJidAqCLTlVwaMPqpYMWjTWBB2WRW86pVkhSKyDK2bdt2tmagZG4sBD/evdLQHLEvQfAOKRoLCmG1FAB6uKmby+gz+REDn7O5+EwQAAAABJRU5ErkJggg==';
  133. /**
  134. * Specifies the image URL to be used for the transparent background.
  135. */
  136. Editor.layersLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAmVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/v7///+bnZkkAAAAMnRSTlMABPr8ByiD88KsTi/rvJb272mjeUA1CuPe1M/KjVxYHxMP6KZ0S9nYzGRGGRaznpGIbzaGUf0AAAHESURBVDjLbZLZYoIwEEVDgLCjbKIgAlqXqt3m/z+uNwu1rcyDhjl3ktnYL7OY254C0VX3yWFZfzDrOClbbgKxi0YDHjwl4jbnRkXxJS/C1YP3DbBhD1n7Ex4uaAqdVDb3yJ/4J/3nJD2to/ngQz/DfUvzMp4JJ5sSCaF5oXmemgQDfDxzbi+Kq4sU+vNcuAmx94JtyOP2DD4Epz2asWSCz4Z/4fECxyNj9zC9xNLHcdPEO+awDKeSaUu0W4twZQiO2hYVisTR3RCtK/c1X6t4xMEpiGqXqVntEBLolkZZsKY4QtwH6jzq67dEHlJysB1aNOD3XT7n1UkasQN59L4yC2RELMDSeCRtz3yV22Ub3ozIUTknYx8JWqDdQxbUes98cR2kZtUSveF/bAhcedwEWmlxIkpZUy4XOCb6VBjjxHvbwo/1lBAHHi2JCr0NI570QhyHq/DhJoE2lLgyA4RVe6KmZ47O/3b86MCP0HWa73A8/C3SUc5Qc1ajt6fgpXJ+RGpMvDSchepZDOOQRcZVIKcK90x2D7etqtI+56+u6n3sPriO6nfphitR4+O2m3EbM7lh3me1FM1o+LMI887rN+s3/wZdTFlpNVJiOAAAAABJRU5ErkJggg==';
  137. /**
  138. * Specifies the image URL to be used for the transparent background.
  139. */
  140. Editor.closeLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAuvAIg/dDM/QlOeuFhj0S5s4vKgzjxJRQNiLSey0AAADNSURBVDjLfZLbEoMgDEQjRRRs1XqX///QNmOHJSnjPkHOGR7IEmeoGtJZstnwjqbRfIsmgEdtPCqe9Ynz7ZSc07rE2QiSc+qv8TvjRXA2PDUm3dpe82iJhOEUfxJJo3aCv+jKmRmH4lcCjCjeh9GWOdL/GZZkXH3PYYDrHBnfc4D/RVZf5sjoC1was+Y6HQxwaUxFvq/a0Pv343VCTxfBSRiB+ab3M3eiQZXmMNBJ3Y8pGRZtYQ7DgHMXJEdPLTaN/qBjzJOBc3nmNcbsA16bMR0oLqf+AAAAAElFTkSuQmCC';
  141. /**
  142. * Specifies the image URL to be used for the transparent background.
  143. */
  144. Editor.editLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAgJsrThgAAABcSURBVBjThc6xDcAgDATAd8MQTEPW8TRUmYCGnzLRYyOlIV+dZFtvkICTFGqiJEzAG0/Uje9oL+e5Vu4F5yUYJxxqGKhQZ0eBvmgwYQLQaARKD1hbiPyDR0QOeAC31EyNe5X/kAAAAABJRU5ErkJggg==';
  145. /**
  146. * Specifies the image URL to be used for the transparent background.
  147. */
  148. Editor.previousLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMA7fci493c0MW8uJ6CZks4MxQHEZL6ewAAAFZJREFUOMvdkskRgDAMA4lDwg2B7b9XOlge/KKvdsa25KFb5XlRvxXC/DNBEv8IFNjBgGdDgXtFgTyhwDXiQAUHCvwa4Uv6mR6UR+1led2mVonvl+tML45qCQNQLIx7AAAAAElFTkSuQmCC';
  149. /**
  150. * Specifies the image URL to be used for the transparent background.
  151. */
  152. Editor.nextLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMA7fci493c0MW8uJ6CZks4MxQHEZL6ewAAAFRJREFUOMvd0skRgCAQBVEFwQ0V7fxzNQP6wI05v6pZ/kyj1b7FNgik2gQzzLcAwiUAigHOTwDHK4A1CmB5BJANJG1hQ9qafYcqFlZP3IFc9eVGrR+iIgkDQRUXIAAAAABJRU5ErkJggg==';
  153. // Editor inherits from mxEventSource
  154. mxUtils.extend(Editor, mxEventSource);
  155. /**
  156. * Stores initial state of mxClient.NO_FO.
  157. */
  158. Editor.prototype.originalNoForeignObject = mxClient.NO_FO;
  159. /**
  160. * Specifies the image URL to be used for the transparent background.
  161. */
  162. Editor.prototype.transparentImage = (mxClient.IS_SVG) ? 'data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7' :
  163. IMAGE_PATH + '/transparent.gif';
  164. /**
  165. * Specifies if the canvas should be extended in all directions. Default is true.
  166. */
  167. Editor.prototype.extendCanvas = true;
  168. /**
  169. * Specifies if the app should run in chromeless mode. Default is false.
  170. * This default is only used if the contructor argument is null.
  171. */
  172. Editor.prototype.chromeless = false;
  173. /**
  174. * Specifies the order of OK/Cancel buttons in dialogs. Default is true.
  175. * Cancel first is used on Macs, Windows/Confluence uses cancel last.
  176. */
  177. Editor.prototype.cancelFirst = true;
  178. /**
  179. * Specifies if the editor is enabled. Default is true.
  180. */
  181. Editor.prototype.enabled = true;
  182. /**
  183. * Contains the name which was used for the last save. Default value is null.
  184. */
  185. Editor.prototype.filename = null;
  186. /**
  187. * Contains the current modified state of the diagram. This is false for
  188. * new diagrams and after the diagram was saved.
  189. */
  190. Editor.prototype.modified = false;
  191. /**
  192. * Specifies if the diagram should be saved automatically if possible. Default
  193. * is true.
  194. */
  195. Editor.prototype.autosave = true;
  196. /**
  197. * Specifies the top spacing for the initial page view. Default is 0.
  198. */
  199. Editor.prototype.initialTopSpacing = 0;
  200. /**
  201. * Specifies the app name. Default is document.title.
  202. */
  203. Editor.prototype.appName = document.title;
  204. /**
  205. *
  206. */
  207. Editor.prototype.editBlankUrl = window.location.protocol + '//' + window.location.host + '/?client=1';
  208. /**
  209. *
  210. */
  211. Editor.prototype.editBlankFallbackUrl = window.location.protocol + '//' + window.location.host + '/?create=drawdata&splash=0';
  212. /**
  213. * Initializes the environment.
  214. */
  215. Editor.prototype.init = function() { };
  216. /**
  217. * Sets the XML node for the current diagram.
  218. */
  219. Editor.prototype.setAutosave = function(value)
  220. {
  221. this.autosave = value;
  222. this.fireEvent(new mxEventObject('autosaveChanged'));
  223. };
  224. /**
  225. *
  226. */
  227. Editor.prototype.getEditBlankUrl = function(params, fallback)
  228. {
  229. return ((fallback) ? this.editBlankFallbackUrl : this.editBlankUrl) + params;
  230. }
  231. /**
  232. *
  233. */
  234. Editor.prototype.editAsNew = function(xml, title)
  235. {
  236. var p = (title != null) ? '&title=' + encodeURIComponent(title) : '';
  237. if (typeof window.postMessage !== 'undefined' && (document.documentMode == null || document.documentMode >= 10))
  238. {
  239. var wnd = null;
  240. var receive = mxUtils.bind(this, function(evt)
  241. {
  242. if (evt.data == 'ready' && evt.source == wnd)
  243. {
  244. wnd.postMessage(xml, '*');
  245. mxEvent.removeListener(window, 'message', receive);
  246. }
  247. });
  248. mxEvent.addListener(window, 'message', receive);
  249. wnd = window.open(this.getEditBlankUrl(p, false));
  250. }
  251. else
  252. {
  253. // Data is pulled from global variable after tab loads
  254. window.drawdata = xml;
  255. window.open(this.getEditBlankUrl(p, true));
  256. }
  257. };
  258. /**
  259. * Sets the XML node for the current diagram.
  260. */
  261. Editor.prototype.createGraph = function(themes, model)
  262. {
  263. var graph = new Graph(null, model, null, null, themes);
  264. graph.transparentBackground = false;
  265. // Opens all links in a new window while editing
  266. if (!this.chromeless)
  267. {
  268. graph.isBlankLink = function(href)
  269. {
  270. return !this.isExternalProtocol(href);
  271. };
  272. }
  273. return graph;
  274. };
  275. /**
  276. * Sets the XML node for the current diagram.
  277. */
  278. Editor.prototype.resetGraph = function()
  279. {
  280. this.graph.gridEnabled = !this.chromeless || urlParams['grid'] == '1';
  281. this.graph.graphHandler.guidesEnabled = true;
  282. this.graph.setTooltips(true);
  283. this.graph.setConnectable(true);
  284. this.graph.foldingEnabled = true;
  285. this.graph.scrollbars = this.graph.defaultScrollbars;
  286. this.graph.pageVisible = this.graph.defaultPageVisible;
  287. this.graph.pageBreaksVisible = this.graph.pageVisible;
  288. this.graph.preferPageSize = this.graph.pageBreaksVisible;
  289. this.graph.background = this.graph.defaultGraphBackground;
  290. this.graph.pageScale = mxGraph.prototype.pageScale;
  291. this.graph.pageFormat = mxGraph.prototype.pageFormat;
  292. this.updateGraphComponents();
  293. this.graph.view.setScale(1);
  294. };
  295. /**
  296. * Sets the XML node for the current diagram.
  297. */
  298. Editor.prototype.readGraphState = function(node)
  299. {
  300. this.graph.gridEnabled = node.getAttribute('grid') != '0' && (!this.chromeless || urlParams['grid'] == '1');
  301. this.graph.gridSize = parseFloat(node.getAttribute('gridSize')) || mxGraph.prototype.gridSize;
  302. this.graph.graphHandler.guidesEnabled = node.getAttribute('guides') != '0';
  303. this.graph.setTooltips(node.getAttribute('tooltips') != '0');
  304. this.graph.setConnectable(node.getAttribute('connect') != '0');
  305. this.graph.connectionArrowsEnabled = node.getAttribute('arrows') != '0';
  306. this.graph.foldingEnabled = node.getAttribute('fold') != '0';
  307. if (this.chromeless && this.graph.foldingEnabled)
  308. {
  309. this.graph.foldingEnabled = urlParams['nav'] == '1';
  310. this.graph.cellRenderer.forceControlClickHandler = this.graph.foldingEnabled;
  311. }
  312. var ps = node.getAttribute('pageScale');
  313. if (ps != null)
  314. {
  315. this.graph.pageScale = ps;
  316. }
  317. else
  318. {
  319. this.graph.pageScale = mxGraph.prototype.pageScale;
  320. }
  321. if (!this.graph.lightbox)
  322. {
  323. var pv = node.getAttribute('page');
  324. if (pv != null)
  325. {
  326. this.graph.pageVisible = (pv != '0');
  327. }
  328. else
  329. {
  330. this.graph.pageVisible = this.graph.defaultPageVisible;
  331. }
  332. }
  333. else
  334. {
  335. this.graph.pageVisible = false;
  336. }
  337. this.graph.pageBreaksVisible = this.graph.pageVisible;
  338. this.graph.preferPageSize = this.graph.pageBreaksVisible;
  339. var pw = node.getAttribute('pageWidth');
  340. var ph = node.getAttribute('pageHeight');
  341. if (pw != null && ph != null)
  342. {
  343. this.graph.pageFormat = new mxRectangle(0, 0, parseFloat(pw), parseFloat(ph));
  344. }
  345. // Loads the persistent state settings
  346. var bg = node.getAttribute('background');
  347. if (bg != null && bg.length > 0)
  348. {
  349. this.graph.background = bg;
  350. }
  351. else
  352. {
  353. this.graph.background = this.graph.defaultGraphBackground;
  354. }
  355. };
  356. /**
  357. * Sets the XML node for the current diagram.
  358. */
  359. Editor.prototype.setGraphXml = function(node)
  360. {
  361. if (node != null)
  362. {
  363. var dec = new mxCodec(node.ownerDocument);
  364. if (node.nodeName == 'mxGraphModel')
  365. {
  366. this.graph.model.beginUpdate();
  367. try
  368. {
  369. this.graph.model.clear();
  370. this.graph.view.scale = 1;
  371. this.readGraphState(node);
  372. this.updateGraphComponents();
  373. dec.decode(node, this.graph.getModel());
  374. }
  375. finally
  376. {
  377. this.graph.model.endUpdate();
  378. }
  379. this.fireEvent(new mxEventObject('resetGraphView'));
  380. }
  381. else if (node.nodeName == 'root')
  382. {
  383. this.resetGraph();
  384. // Workaround for invalid XML output in Firefox 20 due to bug in mxUtils.getXml
  385. var wrapper = dec.document.createElement('mxGraphModel');
  386. wrapper.appendChild(node);
  387. dec.decode(wrapper, this.graph.getModel());
  388. this.updateGraphComponents();
  389. this.fireEvent(new mxEventObject('resetGraphView'));
  390. }
  391. else
  392. {
  393. throw {
  394. message: mxResources.get('cannotOpenFile'),
  395. node: node,
  396. toString: function() { return this.message; }
  397. };
  398. }
  399. }
  400. else
  401. {
  402. this.resetGraph();
  403. this.graph.model.clear();
  404. this.fireEvent(new mxEventObject('resetGraphView'));
  405. }
  406. };
  407. /**
  408. * Returns the XML node that represents the current diagram.
  409. */
  410. Editor.prototype.getGraphXml = function(ignoreSelection)
  411. {
  412. ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
  413. var node = null;
  414. if (ignoreSelection)
  415. {
  416. var enc = new mxCodec(mxUtils.createXmlDocument());
  417. node = enc.encode(this.graph.getModel());
  418. }
  419. else
  420. {
  421. node = this.graph.encodeCells(this.graph.getSelectionCells());
  422. }
  423. if (this.graph.view.translate.x != 0 || this.graph.view.translate.y != 0)
  424. {
  425. node.setAttribute('dx', Math.round(this.graph.view.translate.x * 100) / 100);
  426. node.setAttribute('dy', Math.round(this.graph.view.translate.y * 100) / 100);
  427. }
  428. node.setAttribute('grid', (this.graph.isGridEnabled()) ? '1' : '0');
  429. node.setAttribute('gridSize', this.graph.gridSize);
  430. node.setAttribute('guides', (this.graph.graphHandler.guidesEnabled) ? '1' : '0');
  431. node.setAttribute('tooltips', (this.graph.tooltipHandler.isEnabled()) ? '1' : '0');
  432. node.setAttribute('connect', (this.graph.connectionHandler.isEnabled()) ? '1' : '0');
  433. node.setAttribute('arrows', (this.graph.connectionArrowsEnabled) ? '1' : '0');
  434. node.setAttribute('fold', (this.graph.foldingEnabled) ? '1' : '0');
  435. node.setAttribute('page', (this.graph.pageVisible) ? '1' : '0');
  436. node.setAttribute('pageScale', this.graph.pageScale);
  437. node.setAttribute('pageWidth', this.graph.pageFormat.width);
  438. node.setAttribute('pageHeight', this.graph.pageFormat.height);
  439. if (this.graph.background != null)
  440. {
  441. node.setAttribute('background', this.graph.background);
  442. }
  443. return node;
  444. };
  445. /**
  446. * Keeps the graph container in sync with the persistent graph state
  447. */
  448. Editor.prototype.updateGraphComponents = function()
  449. {
  450. var graph = this.graph;
  451. if (graph.container != null)
  452. {
  453. graph.view.validateBackground();
  454. graph.container.style.overflow = (graph.scrollbars) ? 'auto' : 'hidden';
  455. this.fireEvent(new mxEventObject('updateGraphComponents'));
  456. }
  457. };
  458. /**
  459. * Sets the modified flag.
  460. */
  461. Editor.prototype.setModified = function(value)
  462. {
  463. this.modified = value;
  464. };
  465. /**
  466. * Sets the filename.
  467. */
  468. Editor.prototype.setFilename = function(value)
  469. {
  470. this.filename = value;
  471. };
  472. /**
  473. * Creates and returns a new undo manager.
  474. */
  475. Editor.prototype.createUndoManager = function()
  476. {
  477. var graph = this.graph;
  478. var undoMgr = new mxUndoManager();
  479. this.undoListener = function(sender, evt)
  480. {
  481. undoMgr.undoableEditHappened(evt.getProperty('edit'));
  482. };
  483. // Installs the command history
  484. var listener = mxUtils.bind(this, function(sender, evt)
  485. {
  486. this.undoListener.apply(this, arguments);
  487. });
  488. graph.getModel().addListener(mxEvent.UNDO, listener);
  489. graph.getView().addListener(mxEvent.UNDO, listener);
  490. // Keeps the selection in sync with the history
  491. var undoHandler = function(sender, evt)
  492. {
  493. var cand = graph.getSelectionCellsForChanges(evt.getProperty('edit').changes);
  494. var model = graph.getModel();
  495. var cells = [];
  496. for (var i = 0; i < cand.length; i++)
  497. {
  498. if ((model.isVertex(cand[i]) || model.isEdge(cand[i])) && graph.view.getState(cand[i]) != null)
  499. {
  500. cells.push(cand[i]);
  501. }
  502. }
  503. graph.setSelectionCells(cells);
  504. };
  505. undoMgr.addListener(mxEvent.UNDO, undoHandler);
  506. undoMgr.addListener(mxEvent.REDO, undoHandler);
  507. return undoMgr;
  508. };
  509. /**
  510. * Adds basic stencil set (no namespace).
  511. */
  512. Editor.prototype.initStencilRegistry = function() { };
  513. /**
  514. * Creates and returns a new undo manager.
  515. */
  516. Editor.prototype.destroy = function()
  517. {
  518. if (this.graph != null)
  519. {
  520. this.graph.destroy();
  521. this.graph = null;
  522. }
  523. };
  524. /**
  525. * Class for asynchronously opening a new window and loading a file at the same
  526. * time. This acts as a bridge between the open dialog and the new editor.
  527. */
  528. OpenFile = function(done)
  529. {
  530. this.producer = null;
  531. this.consumer = null;
  532. this.done = done;
  533. };
  534. /**
  535. * Registers the editor from the new window.
  536. */
  537. OpenFile.prototype.setConsumer = function(value)
  538. {
  539. this.consumer = value;
  540. this.execute();
  541. };
  542. /**
  543. * Sets the data from the loaded file.
  544. */
  545. OpenFile.prototype.setData = function(value, filename)
  546. {
  547. this.data = value;
  548. this.filename = filename;
  549. this.execute();
  550. };
  551. /**
  552. * Displays an error message.
  553. */
  554. OpenFile.prototype.error = function(msg)
  555. {
  556. this.cancel(true);
  557. mxUtils.alert(msg);
  558. };
  559. /**
  560. * Consumes the data.
  561. */
  562. OpenFile.prototype.execute = function()
  563. {
  564. if (this.consumer != null && this.data != null)
  565. {
  566. this.cancel(false);
  567. this.consumer(this.data, this.filename);
  568. }
  569. };
  570. /**
  571. * Cancels the operation.
  572. */
  573. OpenFile.prototype.cancel = function(cancel)
  574. {
  575. if (this.done != null)
  576. {
  577. this.done((cancel != null) ? cancel : true);
  578. }
  579. };
  580. /**
  581. * Static overrides
  582. */
  583. (function()
  584. {
  585. // Uses HTML for background pages (to support grid background image)
  586. mxGraphView.prototype.validateBackgroundPage = function()
  587. {
  588. var graph = this.graph;
  589. if (graph.container != null && !graph.transparentBackground)
  590. {
  591. if (graph.pageVisible)
  592. {
  593. var bounds = this.getBackgroundPageBounds();
  594. if (this.backgroundPageShape == null)
  595. {
  596. // Finds first element in graph container
  597. var firstChild = graph.container.firstChild;
  598. while (firstChild != null && firstChild.nodeType != mxConstants.NODETYPE_ELEMENT)
  599. {
  600. firstChild = firstChild.nextSibling;
  601. }
  602. if (firstChild != null)
  603. {
  604. this.backgroundPageShape = this.createBackgroundPageShape(bounds);
  605. this.backgroundPageShape.scale = 1;
  606. // Shadow filter causes problems in outline window in quirks mode. IE8 standards
  607. // also has known rendering issues inside mxWindow but not using shadow is worse.
  608. this.backgroundPageShape.isShadow = !mxClient.IS_QUIRKS;
  609. this.backgroundPageShape.dialect = mxConstants.DIALECT_STRICTHTML;
  610. this.backgroundPageShape.init(graph.container);
  611. // Required for the browser to render the background page in correct order
  612. firstChild.style.position = 'absolute';
  613. graph.container.insertBefore(this.backgroundPageShape.node, firstChild);
  614. this.backgroundPageShape.redraw();
  615. this.backgroundPageShape.node.className = 'geBackgroundPage';
  616. // Adds listener for double click handling on background
  617. mxEvent.addListener(this.backgroundPageShape.node, 'dblclick',
  618. mxUtils.bind(this, function(evt)
  619. {
  620. graph.dblClick(evt);
  621. })
  622. );
  623. // Adds basic listeners for graph event dispatching outside of the
  624. // container and finishing the handling of a single gesture
  625. mxEvent.addGestureListeners(this.backgroundPageShape.node,
  626. mxUtils.bind(this, function(evt)
  627. {
  628. graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt));
  629. }),
  630. mxUtils.bind(this, function(evt)
  631. {
  632. // Hides the tooltip if mouse is outside container
  633. if (graph.tooltipHandler != null && graph.tooltipHandler.isHideOnHover())
  634. {
  635. graph.tooltipHandler.hide();
  636. }
  637. if (graph.isMouseDown && !mxEvent.isConsumed(evt))
  638. {
  639. graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
  640. }
  641. }),
  642. mxUtils.bind(this, function(evt)
  643. {
  644. graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt));
  645. })
  646. );
  647. }
  648. }
  649. else
  650. {
  651. this.backgroundPageShape.scale = 1;
  652. this.backgroundPageShape.bounds = bounds;
  653. this.backgroundPageShape.redraw();
  654. }
  655. }
  656. else if (this.backgroundPageShape != null)
  657. {
  658. this.backgroundPageShape.destroy();
  659. this.backgroundPageShape = null;
  660. }
  661. this.validateBackgroundStyles();
  662. }
  663. };
  664. // Updates the CSS of the background to draw the grid
  665. mxGraphView.prototype.validateBackgroundStyles = function()
  666. {
  667. var graph = this.graph;
  668. var color = (graph.background == null || graph.background == mxConstants.NONE) ? '#ffffff' : graph.background;
  669. var gridColor = (this.gridColor != color.toLowerCase()) ? this.gridColor : '#ffffff';
  670. var image = 'none';
  671. var position = '';
  672. if (graph.isGridEnabled())
  673. {
  674. var phase = 10;
  675. if (mxClient.IS_SVG)
  676. {
  677. // Generates the SVG required for drawing the dynamic grid
  678. image = unescape(encodeURIComponent(this.createSvgGrid(gridColor)));
  679. image = (window.btoa) ? btoa(image) : Base64.encode(image, true);
  680. image = 'url(' + 'data:image/svg+xml;base64,' + image + ')'
  681. phase = graph.gridSize * this.scale * this.gridSteps;
  682. }
  683. else
  684. {
  685. // Fallback to grid wallpaper with fixed size
  686. image = 'url(' + this.gridImage + ')';
  687. }
  688. var x0 = 0;
  689. var y0 = 0;
  690. if (graph.view.backgroundPageShape != null)
  691. {
  692. var bds = this.getBackgroundPageBounds();
  693. x0 = 1 + bds.x;
  694. y0 = 1 + bds.y;
  695. }
  696. // Computes the offset to maintain origin for grid
  697. position = -Math.round(phase - mxUtils.mod(this.translate.x * this.scale - x0, phase)) + 'px ' +
  698. -Math.round(phase - mxUtils.mod(this.translate.y * this.scale - y0, phase)) + 'px';
  699. }
  700. var canvas = graph.view.canvas;
  701. if (canvas.ownerSVGElement != null)
  702. {
  703. canvas = canvas.ownerSVGElement;
  704. }
  705. if (graph.view.backgroundPageShape != null)
  706. {
  707. graph.view.backgroundPageShape.node.style.backgroundPosition = position;
  708. graph.view.backgroundPageShape.node.style.backgroundImage = image;
  709. graph.view.backgroundPageShape.node.style.backgroundColor = color;
  710. graph.container.className = 'geDiagramContainer geDiagramBackdrop';
  711. canvas.style.backgroundImage = 'none';
  712. canvas.style.backgroundColor = '';
  713. }
  714. else
  715. {
  716. graph.container.className = 'geDiagramContainer';
  717. canvas.style.backgroundPosition = position;
  718. canvas.style.backgroundColor = color;
  719. canvas.style.backgroundImage = image;
  720. }
  721. };
  722. // Returns the SVG required for painting the background grid.
  723. mxGraphView.prototype.createSvgGrid = function(color)
  724. {
  725. var tmp = this.graph.gridSize * this.scale;
  726. while (tmp < this.minGridSize)
  727. {
  728. tmp *= 2;
  729. }
  730. var tmp2 = this.gridSteps * tmp;
  731. // Small grid lines
  732. var d = [];
  733. for (var i = 1; i < this.gridSteps; i++)
  734. {
  735. var tmp3 = i * tmp;
  736. d.push('M 0 ' + tmp3 + ' L ' + tmp2 + ' ' + tmp3 + ' M ' + tmp3 + ' 0 L ' + tmp3 + ' ' + tmp2);
  737. }
  738. // KNOWN: Rounding errors for certain scales (eg. 144%, 121% in Chrome, FF and Safari). Workaround
  739. // in Chrome is to use 100% for the svg size, but this results in blurred grid for large diagrams.
  740. var size = tmp2;
  741. var svg = '<svg width="' + size + '" height="' + size + '" xmlns="' + mxConstants.NS_SVG + '">' +
  742. '<defs><pattern id="grid" width="' + tmp2 + '" height="' + tmp2 + '" patternUnits="userSpaceOnUse">' +
  743. '<path d="' + d.join(' ') + '" fill="none" stroke="' + color + '" opacity="0.2" stroke-width="1"/>' +
  744. '<path d="M ' + tmp2 + ' 0 L 0 0 0 ' + tmp2 + '" fill="none" stroke="' + color + '" stroke-width="1"/>' +
  745. '</pattern></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>';
  746. return svg;
  747. };
  748. // Adds panning for the grid with no page view and disabled scrollbars
  749. var mxGraphPanGraph = mxGraph.prototype.panGraph;
  750. mxGraph.prototype.panGraph = function(dx, dy)
  751. {
  752. mxGraphPanGraph.apply(this, arguments);
  753. if (this.shiftPreview1 != null)
  754. {
  755. var canvas = this.view.canvas;
  756. if (canvas.ownerSVGElement != null)
  757. {
  758. canvas = canvas.ownerSVGElement;
  759. }
  760. var phase = this.gridSize * this.view.scale * this.view.gridSteps;
  761. var position = -Math.round(phase - mxUtils.mod(this.view.translate.x * this.view.scale + dx, phase)) + 'px ' +
  762. -Math.round(phase - mxUtils.mod(this.view.translate.y * this.view.scale + dy, phase)) + 'px';
  763. canvas.style.backgroundPosition = position;
  764. }
  765. };
  766. // Draws page breaks only within the page
  767. mxGraph.prototype.updatePageBreaks = function(visible, width, height)
  768. {
  769. var scale = this.view.scale;
  770. var tr = this.view.translate;
  771. var fmt = this.pageFormat;
  772. var ps = scale * this.pageScale;
  773. var bounds2 = this.view.getBackgroundPageBounds();
  774. width = bounds2.width;
  775. height = bounds2.height;
  776. var bounds = new mxRectangle(scale * tr.x, scale * tr.y, fmt.width * ps, fmt.height * ps);
  777. // Does not show page breaks if the scale is too small
  778. visible = visible && Math.min(bounds.width, bounds.height) > this.minPageBreakDist;
  779. var horizontalCount = (visible) ? Math.ceil(height / bounds.height) - 1 : 0;
  780. var verticalCount = (visible) ? Math.ceil(width / bounds.width) - 1 : 0;
  781. var right = bounds2.x + width;
  782. var bottom = bounds2.y + height;
  783. if (this.horizontalPageBreaks == null && horizontalCount > 0)
  784. {
  785. this.horizontalPageBreaks = [];
  786. }
  787. if (this.verticalPageBreaks == null && verticalCount > 0)
  788. {
  789. this.verticalPageBreaks = [];
  790. }
  791. var drawPageBreaks = mxUtils.bind(this, function(breaks)
  792. {
  793. if (breaks != null)
  794. {
  795. var count = (breaks == this.horizontalPageBreaks) ? horizontalCount : verticalCount;
  796. for (var i = 0; i <= count; i++)
  797. {
  798. var pts = (breaks == this.horizontalPageBreaks) ?
  799. [new mxPoint(Math.round(bounds2.x), Math.round(bounds2.y + (i + 1) * bounds.height)),
  800. new mxPoint(Math.round(right), Math.round(bounds2.y + (i + 1) * bounds.height))] :
  801. [new mxPoint(Math.round(bounds2.x + (i + 1) * bounds.width), Math.round(bounds2.y)),
  802. new mxPoint(Math.round(bounds2.x + (i + 1) * bounds.width), Math.round(bottom))];
  803. if (breaks[i] != null)
  804. {
  805. breaks[i].points = pts;
  806. breaks[i].redraw();
  807. }
  808. else
  809. {
  810. var pageBreak = new mxPolyline(pts, this.pageBreakColor);
  811. pageBreak.dialect = this.dialect;
  812. pageBreak.isDashed = this.pageBreakDashed;
  813. pageBreak.pointerEvents = false;
  814. pageBreak.init(this.view.backgroundPane);
  815. pageBreak.redraw();
  816. breaks[i] = pageBreak;
  817. }
  818. }
  819. for (var i = count; i < breaks.length; i++)
  820. {
  821. breaks[i].destroy();
  822. }
  823. breaks.splice(count, breaks.length - count);
  824. }
  825. });
  826. drawPageBreaks(this.horizontalPageBreaks);
  827. drawPageBreaks(this.verticalPageBreaks);
  828. };
  829. // Disables removing relative children from parents
  830. var mxGraphHandlerShouldRemoveCellsFromParent = mxGraphHandler.prototype.shouldRemoveCellsFromParent;
  831. mxGraphHandler.prototype.shouldRemoveCellsFromParent = function(parent, cells, evt)
  832. {
  833. for (var i = 0; i < cells.length; i++)
  834. {
  835. if (this.graph.getModel().isVertex(cells[i]))
  836. {
  837. var geo = this.graph.getCellGeometry(cells[i]);
  838. if (geo != null && geo.relative)
  839. {
  840. return false;
  841. }
  842. }
  843. }
  844. return mxGraphHandlerShouldRemoveCellsFromParent.apply(this, arguments);
  845. };
  846. // Overrides to ignore hotspot only for target terminal
  847. var mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker;
  848. mxConnectionHandler.prototype.createMarker = function()
  849. {
  850. var marker = mxConnectionHandlerCreateMarker.apply(this, arguments);
  851. marker.intersects = mxUtils.bind(this, function(state, evt)
  852. {
  853. if (this.isConnecting())
  854. {
  855. return true;
  856. }
  857. return mxCellMarker.prototype.intersects.apply(marker, arguments);
  858. });
  859. return marker;
  860. };
  861. // Creates background page shape
  862. mxGraphView.prototype.createBackgroundPageShape = function(bounds)
  863. {
  864. return new mxRectangleShape(bounds, '#ffffff', '#cacaca');
  865. };
  866. // Fits the number of background pages to the graph
  867. mxGraphView.prototype.getBackgroundPageBounds = function()
  868. {
  869. var gb = this.getGraphBounds();
  870. // Computes unscaled, untranslated graph bounds
  871. var x = (gb.width > 0) ? gb.x / this.scale - this.translate.x : 0;
  872. var y = (gb.height > 0) ? gb.y / this.scale - this.translate.y : 0;
  873. var w = gb.width / this.scale;
  874. var h = gb.height / this.scale;
  875. var fmt = this.graph.pageFormat;
  876. var ps = this.graph.pageScale;
  877. var pw = fmt.width * ps;
  878. var ph = fmt.height * ps;
  879. var x0 = Math.floor(Math.min(0, x) / pw);
  880. var y0 = Math.floor(Math.min(0, y) / ph);
  881. var xe = Math.ceil(Math.max(1, x + w) / pw);
  882. var ye = Math.ceil(Math.max(1, y + h) / ph);
  883. var rows = xe - x0;
  884. var cols = ye - y0;
  885. var bounds = new mxRectangle(this.scale * (this.translate.x + x0 * pw), this.scale *
  886. (this.translate.y + y0 * ph), this.scale * rows * pw, this.scale * cols * ph);
  887. return bounds;
  888. };
  889. // Add panning for background page in VML
  890. var graphPanGraph = mxGraph.prototype.panGraph;
  891. mxGraph.prototype.panGraph = function(dx, dy)
  892. {
  893. graphPanGraph.apply(this, arguments);
  894. if ((this.dialect != mxConstants.DIALECT_SVG && this.view.backgroundPageShape != null) &&
  895. (!this.useScrollbarsForPanning || !mxUtils.hasScrollbars(this.container)))
  896. {
  897. this.view.backgroundPageShape.node.style.marginLeft = dx + 'px';
  898. this.view.backgroundPageShape.node.style.marginTop = dy + 'px';
  899. }
  900. };
  901. /**
  902. * Consumes click events for disabled menu items.
  903. */
  904. var mxPopupMenuAddItem = mxPopupMenu.prototype.addItem;
  905. mxPopupMenu.prototype.addItem = function(title, image, funct, parent, iconCls, enabled)
  906. {
  907. var result = mxPopupMenuAddItem.apply(this, arguments);
  908. if (enabled != null && !enabled)
  909. {
  910. mxEvent.addListener(result, 'mousedown', function(evt)
  911. {
  912. mxEvent.consume(evt);
  913. });
  914. }
  915. return result;
  916. };
  917. // Selects ancestors before descendants
  918. var graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
  919. mxGraphHandler.prototype.getInitialCellForEvent = function(me)
  920. {
  921. var model = this.graph.getModel();
  922. var psel = model.getParent(this.graph.getSelectionCell());
  923. var cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
  924. var parent = model.getParent(cell);
  925. if (psel == null || (psel != cell && psel != parent))
  926. {
  927. while (!this.graph.isCellSelected(cell) && !this.graph.isCellSelected(parent) &&
  928. model.isVertex(parent) && !this.graph.isContainer(parent))
  929. {
  930. cell = parent;
  931. parent = this.graph.getModel().getParent(cell);
  932. }
  933. }
  934. return cell;
  935. };
  936. // Selection is delayed to mouseup if ancestor is selected
  937. var graphHandlerIsDelayedSelection = mxGraphHandler.prototype.isDelayedSelection;
  938. mxGraphHandler.prototype.isDelayedSelection = function(cell, me)
  939. {
  940. var result = graphHandlerIsDelayedSelection.apply(this, arguments);
  941. if (!result)
  942. {
  943. var model = this.graph.getModel();
  944. var parent = model.getParent(cell);
  945. while (parent != null)
  946. {
  947. // Inconsistency for unselected parent swimlane is intended for easier moving
  948. // of stack layouts where the container title section is too far away
  949. if (this.graph.isCellSelected(parent) && model.isVertex(parent))
  950. {
  951. result = true;
  952. break;
  953. }
  954. parent = model.getParent(parent);
  955. }
  956. }
  957. return result;
  958. };
  959. // Delayed selection of parent group
  960. mxGraphHandler.prototype.selectDelayed = function(me)
  961. {
  962. if (!this.graph.popupMenuHandler.isPopupTrigger(me))
  963. {
  964. var cell = me.getCell();
  965. if (cell == null)
  966. {
  967. cell = this.cell;
  968. }
  969. // Selects folded cell for hit on folding icon
  970. var state = this.graph.view.getState(cell)
  971. if (state != null && me.isSource(state.control))
  972. {
  973. this.graph.selectCellForEvent(cell, me.getEvent());
  974. }
  975. else
  976. {
  977. var model = this.graph.getModel();
  978. var parent = model.getParent(cell);
  979. while (!this.graph.isCellSelected(parent) && model.isVertex(parent))
  980. {
  981. cell = parent;
  982. parent = model.getParent(cell);
  983. }
  984. this.graph.selectCellForEvent(cell, me.getEvent());
  985. }
  986. }
  987. };
  988. // Returns last selected ancestor
  989. mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me)
  990. {
  991. var cell = me.getCell();
  992. var model = this.graph.getModel();
  993. var parent = model.getParent(cell);
  994. while (model.isVertex(parent) && !this.graph.isContainer(parent))
  995. {
  996. if (this.graph.isCellSelected(parent))
  997. {
  998. cell = parent;
  999. }
  1000. parent = model.getParent(parent);
  1001. }
  1002. return cell;
  1003. };
  1004. })();