Editor.js 39 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193
  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(mxUtils.sortCells(this.graph.model.getTopmostCells(
  422. this.graph.getSelectionCells())));
  423. }
  424. if (this.graph.view.translate.x != 0 || this.graph.view.translate.y != 0)
  425. {
  426. node.setAttribute('dx', Math.round(this.graph.view.translate.x * 100) / 100);
  427. node.setAttribute('dy', Math.round(this.graph.view.translate.y * 100) / 100);
  428. }
  429. node.setAttribute('grid', (this.graph.isGridEnabled()) ? '1' : '0');
  430. node.setAttribute('gridSize', this.graph.gridSize);
  431. node.setAttribute('guides', (this.graph.graphHandler.guidesEnabled) ? '1' : '0');
  432. node.setAttribute('tooltips', (this.graph.tooltipHandler.isEnabled()) ? '1' : '0');
  433. node.setAttribute('connect', (this.graph.connectionHandler.isEnabled()) ? '1' : '0');
  434. node.setAttribute('arrows', (this.graph.connectionArrowsEnabled) ? '1' : '0');
  435. node.setAttribute('fold', (this.graph.foldingEnabled) ? '1' : '0');
  436. node.setAttribute('page', (this.graph.pageVisible) ? '1' : '0');
  437. node.setAttribute('pageScale', this.graph.pageScale);
  438. node.setAttribute('pageWidth', this.graph.pageFormat.width);
  439. node.setAttribute('pageHeight', this.graph.pageFormat.height);
  440. if (this.graph.background != null)
  441. {
  442. node.setAttribute('background', this.graph.background);
  443. }
  444. return node;
  445. };
  446. /**
  447. * Keeps the graph container in sync with the persistent graph state
  448. */
  449. Editor.prototype.updateGraphComponents = function()
  450. {
  451. var graph = this.graph;
  452. if (graph.container != null)
  453. {
  454. graph.view.validateBackground();
  455. graph.container.style.overflow = (graph.scrollbars) ? 'auto' : 'hidden';
  456. this.fireEvent(new mxEventObject('updateGraphComponents'));
  457. }
  458. };
  459. /**
  460. * Sets the modified flag.
  461. */
  462. Editor.prototype.setModified = function(value)
  463. {
  464. this.modified = value;
  465. };
  466. /**
  467. * Sets the filename.
  468. */
  469. Editor.prototype.setFilename = function(value)
  470. {
  471. this.filename = value;
  472. };
  473. /**
  474. * Creates and returns a new undo manager.
  475. */
  476. Editor.prototype.createUndoManager = function()
  477. {
  478. var graph = this.graph;
  479. var undoMgr = new mxUndoManager();
  480. this.undoListener = function(sender, evt)
  481. {
  482. undoMgr.undoableEditHappened(evt.getProperty('edit'));
  483. };
  484. // Installs the command history
  485. var listener = mxUtils.bind(this, function(sender, evt)
  486. {
  487. this.undoListener.apply(this, arguments);
  488. });
  489. graph.getModel().addListener(mxEvent.UNDO, listener);
  490. graph.getView().addListener(mxEvent.UNDO, listener);
  491. // Keeps the selection in sync with the history
  492. var undoHandler = function(sender, evt)
  493. {
  494. var cand = graph.getSelectionCellsForChanges(evt.getProperty('edit').changes);
  495. var model = graph.getModel();
  496. var cells = [];
  497. for (var i = 0; i < cand.length; i++)
  498. {
  499. if ((model.isVertex(cand[i]) || model.isEdge(cand[i])) && graph.view.getState(cand[i]) != null)
  500. {
  501. cells.push(cand[i]);
  502. }
  503. }
  504. graph.setSelectionCells(cells);
  505. };
  506. undoMgr.addListener(mxEvent.UNDO, undoHandler);
  507. undoMgr.addListener(mxEvent.REDO, undoHandler);
  508. return undoMgr;
  509. };
  510. /**
  511. * Adds basic stencil set (no namespace).
  512. */
  513. Editor.prototype.initStencilRegistry = function() { };
  514. /**
  515. * Creates and returns a new undo manager.
  516. */
  517. Editor.prototype.destroy = function()
  518. {
  519. if (this.graph != null)
  520. {
  521. this.graph.destroy();
  522. this.graph = null;
  523. }
  524. };
  525. /**
  526. * Class for asynchronously opening a new window and loading a file at the same
  527. * time. This acts as a bridge between the open dialog and the new editor.
  528. */
  529. OpenFile = function(done)
  530. {
  531. this.producer = null;
  532. this.consumer = null;
  533. this.done = done;
  534. };
  535. /**
  536. * Registers the editor from the new window.
  537. */
  538. OpenFile.prototype.setConsumer = function(value)
  539. {
  540. this.consumer = value;
  541. this.execute();
  542. };
  543. /**
  544. * Sets the data from the loaded file.
  545. */
  546. OpenFile.prototype.setData = function(value, filename)
  547. {
  548. this.data = value;
  549. this.filename = filename;
  550. this.execute();
  551. };
  552. /**
  553. * Displays an error message.
  554. */
  555. OpenFile.prototype.error = function(msg)
  556. {
  557. this.cancel(true);
  558. mxUtils.alert(msg);
  559. };
  560. /**
  561. * Consumes the data.
  562. */
  563. OpenFile.prototype.execute = function()
  564. {
  565. if (this.consumer != null && this.data != null)
  566. {
  567. this.cancel(false);
  568. this.consumer(this.data, this.filename);
  569. }
  570. };
  571. /**
  572. * Cancels the operation.
  573. */
  574. OpenFile.prototype.cancel = function(cancel)
  575. {
  576. if (this.done != null)
  577. {
  578. this.done((cancel != null) ? cancel : true);
  579. }
  580. };
  581. /**
  582. * Static overrides
  583. */
  584. (function()
  585. {
  586. // Uses HTML for background pages (to support grid background image)
  587. mxGraphView.prototype.validateBackgroundPage = function()
  588. {
  589. var graph = this.graph;
  590. if (graph.container != null && !graph.transparentBackground)
  591. {
  592. if (graph.pageVisible)
  593. {
  594. var bounds = this.getBackgroundPageBounds();
  595. if (this.backgroundPageShape == null)
  596. {
  597. // Finds first element in graph container
  598. var firstChild = graph.container.firstChild;
  599. while (firstChild != null && firstChild.nodeType != mxConstants.NODETYPE_ELEMENT)
  600. {
  601. firstChild = firstChild.nextSibling;
  602. }
  603. if (firstChild != null)
  604. {
  605. this.backgroundPageShape = this.createBackgroundPageShape(bounds);
  606. this.backgroundPageShape.scale = 1;
  607. // Shadow filter causes problems in outline window in quirks mode. IE8 standards
  608. // also has known rendering issues inside mxWindow but not using shadow is worse.
  609. this.backgroundPageShape.isShadow = !mxClient.IS_QUIRKS;
  610. this.backgroundPageShape.dialect = mxConstants.DIALECT_STRICTHTML;
  611. this.backgroundPageShape.init(graph.container);
  612. // Required for the browser to render the background page in correct order
  613. firstChild.style.position = 'absolute';
  614. graph.container.insertBefore(this.backgroundPageShape.node, firstChild);
  615. this.backgroundPageShape.redraw();
  616. this.backgroundPageShape.node.className = 'geBackgroundPage';
  617. // Adds listener for double click handling on background
  618. mxEvent.addListener(this.backgroundPageShape.node, 'dblclick',
  619. mxUtils.bind(this, function(evt)
  620. {
  621. graph.dblClick(evt);
  622. })
  623. );
  624. // Adds basic listeners for graph event dispatching outside of the
  625. // container and finishing the handling of a single gesture
  626. mxEvent.addGestureListeners(this.backgroundPageShape.node,
  627. mxUtils.bind(this, function(evt)
  628. {
  629. graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt));
  630. }),
  631. mxUtils.bind(this, function(evt)
  632. {
  633. // Hides the tooltip if mouse is outside container
  634. if (graph.tooltipHandler != null && graph.tooltipHandler.isHideOnHover())
  635. {
  636. graph.tooltipHandler.hide();
  637. }
  638. if (graph.isMouseDown && !mxEvent.isConsumed(evt))
  639. {
  640. graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
  641. }
  642. }),
  643. mxUtils.bind(this, function(evt)
  644. {
  645. graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt));
  646. })
  647. );
  648. }
  649. }
  650. else
  651. {
  652. this.backgroundPageShape.scale = 1;
  653. this.backgroundPageShape.bounds = bounds;
  654. this.backgroundPageShape.redraw();
  655. }
  656. }
  657. else if (this.backgroundPageShape != null)
  658. {
  659. this.backgroundPageShape.destroy();
  660. this.backgroundPageShape = null;
  661. }
  662. this.validateBackgroundStyles();
  663. }
  664. };
  665. // Updates the CSS of the background to draw the grid
  666. mxGraphView.prototype.validateBackgroundStyles = function()
  667. {
  668. var graph = this.graph;
  669. var color = (graph.background == null || graph.background == mxConstants.NONE) ? '#ffffff' : graph.background;
  670. var gridColor = (this.gridColor != color.toLowerCase()) ? this.gridColor : '#ffffff';
  671. var image = 'none';
  672. var position = '';
  673. if (graph.isGridEnabled())
  674. {
  675. var phase = 10;
  676. if (mxClient.IS_SVG)
  677. {
  678. // Generates the SVG required for drawing the dynamic grid
  679. image = unescape(encodeURIComponent(this.createSvgGrid(gridColor)));
  680. image = (window.btoa) ? btoa(image) : Base64.encode(image, true);
  681. image = 'url(' + 'data:image/svg+xml;base64,' + image + ')'
  682. phase = graph.gridSize * this.scale * this.gridSteps;
  683. }
  684. else
  685. {
  686. // Fallback to grid wallpaper with fixed size
  687. image = 'url(' + this.gridImage + ')';
  688. }
  689. var x0 = 0;
  690. var y0 = 0;
  691. if (graph.view.backgroundPageShape != null)
  692. {
  693. var bds = this.getBackgroundPageBounds();
  694. x0 = 1 + bds.x;
  695. y0 = 1 + bds.y;
  696. }
  697. // Computes the offset to maintain origin for grid
  698. position = -Math.round(phase - mxUtils.mod(this.translate.x * this.scale - x0, phase)) + 'px ' +
  699. -Math.round(phase - mxUtils.mod(this.translate.y * this.scale - y0, phase)) + 'px';
  700. }
  701. var canvas = graph.view.canvas;
  702. if (canvas.ownerSVGElement != null)
  703. {
  704. canvas = canvas.ownerSVGElement;
  705. }
  706. if (graph.view.backgroundPageShape != null)
  707. {
  708. graph.view.backgroundPageShape.node.style.backgroundPosition = position;
  709. graph.view.backgroundPageShape.node.style.backgroundImage = image;
  710. graph.view.backgroundPageShape.node.style.backgroundColor = color;
  711. graph.container.className = 'geDiagramContainer geDiagramBackdrop';
  712. canvas.style.backgroundImage = 'none';
  713. canvas.style.backgroundColor = '';
  714. }
  715. else
  716. {
  717. graph.container.className = 'geDiagramContainer';
  718. canvas.style.backgroundPosition = position;
  719. canvas.style.backgroundColor = color;
  720. canvas.style.backgroundImage = image;
  721. }
  722. };
  723. // Returns the SVG required for painting the background grid.
  724. mxGraphView.prototype.createSvgGrid = function(color)
  725. {
  726. var tmp = this.graph.gridSize * this.scale;
  727. while (tmp < this.minGridSize)
  728. {
  729. tmp *= 2;
  730. }
  731. var tmp2 = this.gridSteps * tmp;
  732. // Small grid lines
  733. var d = [];
  734. for (var i = 1; i < this.gridSteps; i++)
  735. {
  736. var tmp3 = i * tmp;
  737. d.push('M 0 ' + tmp3 + ' L ' + tmp2 + ' ' + tmp3 + ' M ' + tmp3 + ' 0 L ' + tmp3 + ' ' + tmp2);
  738. }
  739. // KNOWN: Rounding errors for certain scales (eg. 144%, 121% in Chrome, FF and Safari). Workaround
  740. // in Chrome is to use 100% for the svg size, but this results in blurred grid for large diagrams.
  741. var size = tmp2;
  742. var svg = '<svg width="' + size + '" height="' + size + '" xmlns="' + mxConstants.NS_SVG + '">' +
  743. '<defs><pattern id="grid" width="' + tmp2 + '" height="' + tmp2 + '" patternUnits="userSpaceOnUse">' +
  744. '<path d="' + d.join(' ') + '" fill="none" stroke="' + color + '" opacity="0.2" stroke-width="1"/>' +
  745. '<path d="M ' + tmp2 + ' 0 L 0 0 0 ' + tmp2 + '" fill="none" stroke="' + color + '" stroke-width="1"/>' +
  746. '</pattern></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>';
  747. return svg;
  748. };
  749. // Adds panning for the grid with no page view and disabled scrollbars
  750. var mxGraphPanGraph = mxGraph.prototype.panGraph;
  751. mxGraph.prototype.panGraph = function(dx, dy)
  752. {
  753. mxGraphPanGraph.apply(this, arguments);
  754. if (this.shiftPreview1 != null)
  755. {
  756. var canvas = this.view.canvas;
  757. if (canvas.ownerSVGElement != null)
  758. {
  759. canvas = canvas.ownerSVGElement;
  760. }
  761. var phase = this.gridSize * this.view.scale * this.view.gridSteps;
  762. var position = -Math.round(phase - mxUtils.mod(this.view.translate.x * this.view.scale + dx, phase)) + 'px ' +
  763. -Math.round(phase - mxUtils.mod(this.view.translate.y * this.view.scale + dy, phase)) + 'px';
  764. canvas.style.backgroundPosition = position;
  765. }
  766. };
  767. // Draws page breaks only within the page
  768. mxGraph.prototype.updatePageBreaks = function(visible, width, height)
  769. {
  770. var scale = this.view.scale;
  771. var tr = this.view.translate;
  772. var fmt = this.pageFormat;
  773. var ps = scale * this.pageScale;
  774. var bounds2 = this.view.getBackgroundPageBounds();
  775. width = bounds2.width;
  776. height = bounds2.height;
  777. var bounds = new mxRectangle(scale * tr.x, scale * tr.y, fmt.width * ps, fmt.height * ps);
  778. // Does not show page breaks if the scale is too small
  779. visible = visible && Math.min(bounds.width, bounds.height) > this.minPageBreakDist;
  780. var horizontalCount = (visible) ? Math.ceil(height / bounds.height) - 1 : 0;
  781. var verticalCount = (visible) ? Math.ceil(width / bounds.width) - 1 : 0;
  782. var right = bounds2.x + width;
  783. var bottom = bounds2.y + height;
  784. if (this.horizontalPageBreaks == null && horizontalCount > 0)
  785. {
  786. this.horizontalPageBreaks = [];
  787. }
  788. if (this.verticalPageBreaks == null && verticalCount > 0)
  789. {
  790. this.verticalPageBreaks = [];
  791. }
  792. var drawPageBreaks = mxUtils.bind(this, function(breaks)
  793. {
  794. if (breaks != null)
  795. {
  796. var count = (breaks == this.horizontalPageBreaks) ? horizontalCount : verticalCount;
  797. for (var i = 0; i <= count; i++)
  798. {
  799. var pts = (breaks == this.horizontalPageBreaks) ?
  800. [new mxPoint(Math.round(bounds2.x), Math.round(bounds2.y + (i + 1) * bounds.height)),
  801. new mxPoint(Math.round(right), Math.round(bounds2.y + (i + 1) * bounds.height))] :
  802. [new mxPoint(Math.round(bounds2.x + (i + 1) * bounds.width), Math.round(bounds2.y)),
  803. new mxPoint(Math.round(bounds2.x + (i + 1) * bounds.width), Math.round(bottom))];
  804. if (breaks[i] != null)
  805. {
  806. breaks[i].points = pts;
  807. breaks[i].redraw();
  808. }
  809. else
  810. {
  811. var pageBreak = new mxPolyline(pts, this.pageBreakColor);
  812. pageBreak.dialect = this.dialect;
  813. pageBreak.isDashed = this.pageBreakDashed;
  814. pageBreak.pointerEvents = false;
  815. pageBreak.init(this.view.backgroundPane);
  816. pageBreak.redraw();
  817. breaks[i] = pageBreak;
  818. }
  819. }
  820. for (var i = count; i < breaks.length; i++)
  821. {
  822. breaks[i].destroy();
  823. }
  824. breaks.splice(count, breaks.length - count);
  825. }
  826. });
  827. drawPageBreaks(this.horizontalPageBreaks);
  828. drawPageBreaks(this.verticalPageBreaks);
  829. };
  830. // Disables removing relative children from parents
  831. var mxGraphHandlerShouldRemoveCellsFromParent = mxGraphHandler.prototype.shouldRemoveCellsFromParent;
  832. mxGraphHandler.prototype.shouldRemoveCellsFromParent = function(parent, cells, evt)
  833. {
  834. for (var i = 0; i < cells.length; i++)
  835. {
  836. if (this.graph.getModel().isVertex(cells[i]))
  837. {
  838. var geo = this.graph.getCellGeometry(cells[i]);
  839. if (geo != null && geo.relative)
  840. {
  841. return false;
  842. }
  843. }
  844. }
  845. return mxGraphHandlerShouldRemoveCellsFromParent.apply(this, arguments);
  846. };
  847. // Overrides to ignore hotspot only for target terminal
  848. var mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker;
  849. mxConnectionHandler.prototype.createMarker = function()
  850. {
  851. var marker = mxConnectionHandlerCreateMarker.apply(this, arguments);
  852. marker.intersects = mxUtils.bind(this, function(state, evt)
  853. {
  854. if (this.isConnecting())
  855. {
  856. return true;
  857. }
  858. return mxCellMarker.prototype.intersects.apply(marker, arguments);
  859. });
  860. return marker;
  861. };
  862. // Creates background page shape
  863. mxGraphView.prototype.createBackgroundPageShape = function(bounds)
  864. {
  865. return new mxRectangleShape(bounds, '#ffffff', '#cacaca');
  866. };
  867. // Fits the number of background pages to the graph
  868. mxGraphView.prototype.getBackgroundPageBounds = function()
  869. {
  870. var gb = this.getGraphBounds();
  871. // Computes unscaled, untranslated graph bounds
  872. var x = (gb.width > 0) ? gb.x / this.scale - this.translate.x : 0;
  873. var y = (gb.height > 0) ? gb.y / this.scale - this.translate.y : 0;
  874. var w = gb.width / this.scale;
  875. var h = gb.height / this.scale;
  876. var fmt = this.graph.pageFormat;
  877. var ps = this.graph.pageScale;
  878. var pw = fmt.width * ps;
  879. var ph = fmt.height * ps;
  880. var x0 = Math.floor(Math.min(0, x) / pw);
  881. var y0 = Math.floor(Math.min(0, y) / ph);
  882. var xe = Math.ceil(Math.max(1, x + w) / pw);
  883. var ye = Math.ceil(Math.max(1, y + h) / ph);
  884. var rows = xe - x0;
  885. var cols = ye - y0;
  886. var bounds = new mxRectangle(this.scale * (this.translate.x + x0 * pw), this.scale *
  887. (this.translate.y + y0 * ph), this.scale * rows * pw, this.scale * cols * ph);
  888. return bounds;
  889. };
  890. // Add panning for background page in VML
  891. var graphPanGraph = mxGraph.prototype.panGraph;
  892. mxGraph.prototype.panGraph = function(dx, dy)
  893. {
  894. graphPanGraph.apply(this, arguments);
  895. if ((this.dialect != mxConstants.DIALECT_SVG && this.view.backgroundPageShape != null) &&
  896. (!this.useScrollbarsForPanning || !mxUtils.hasScrollbars(this.container)))
  897. {
  898. this.view.backgroundPageShape.node.style.marginLeft = dx + 'px';
  899. this.view.backgroundPageShape.node.style.marginTop = dy + 'px';
  900. }
  901. };
  902. /**
  903. * Consumes click events for disabled menu items.
  904. */
  905. var mxPopupMenuAddItem = mxPopupMenu.prototype.addItem;
  906. mxPopupMenu.prototype.addItem = function(title, image, funct, parent, iconCls, enabled)
  907. {
  908. var result = mxPopupMenuAddItem.apply(this, arguments);
  909. if (enabled != null && !enabled)
  910. {
  911. mxEvent.addListener(result, 'mousedown', function(evt)
  912. {
  913. mxEvent.consume(evt);
  914. });
  915. }
  916. return result;
  917. };
  918. // Selects ancestors before descendants
  919. var graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
  920. mxGraphHandler.prototype.getInitialCellForEvent = function(me)
  921. {
  922. var model = this.graph.getModel();
  923. var psel = model.getParent(this.graph.getSelectionCell());
  924. var cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
  925. var parent = model.getParent(cell);
  926. if (psel == null || (psel != cell && psel != parent))
  927. {
  928. while (!this.graph.isCellSelected(cell) && !this.graph.isCellSelected(parent) &&
  929. model.isVertex(parent) && !this.graph.isContainer(parent))
  930. {
  931. cell = parent;
  932. parent = this.graph.getModel().getParent(cell);
  933. }
  934. }
  935. return cell;
  936. };
  937. // Selection is delayed to mouseup if ancestor is selected
  938. var graphHandlerIsDelayedSelection = mxGraphHandler.prototype.isDelayedSelection;
  939. mxGraphHandler.prototype.isDelayedSelection = function(cell, me)
  940. {
  941. var result = graphHandlerIsDelayedSelection.apply(this, arguments);
  942. if (!result)
  943. {
  944. var model = this.graph.getModel();
  945. var parent = model.getParent(cell);
  946. while (parent != null)
  947. {
  948. // Inconsistency for unselected parent swimlane is intended for easier moving
  949. // of stack layouts where the container title section is too far away
  950. if (this.graph.isCellSelected(parent) && model.isVertex(parent))
  951. {
  952. result = true;
  953. break;
  954. }
  955. parent = model.getParent(parent);
  956. }
  957. }
  958. return result;
  959. };
  960. // Delayed selection of parent group
  961. mxGraphHandler.prototype.selectDelayed = function(me)
  962. {
  963. if (!this.graph.popupMenuHandler.isPopupTrigger(me))
  964. {
  965. var cell = me.getCell();
  966. if (cell == null)
  967. {
  968. cell = this.cell;
  969. }
  970. // Selects folded cell for hit on folding icon
  971. var state = this.graph.view.getState(cell)
  972. if (state != null && me.isSource(state.control))
  973. {
  974. this.graph.selectCellForEvent(cell, me.getEvent());
  975. }
  976. else
  977. {
  978. var model = this.graph.getModel();
  979. var parent = model.getParent(cell);
  980. while (!this.graph.isCellSelected(parent) && model.isVertex(parent))
  981. {
  982. cell = parent;
  983. parent = model.getParent(cell);
  984. }
  985. this.graph.selectCellForEvent(cell, me.getEvent());
  986. }
  987. }
  988. };
  989. // Returns last selected ancestor
  990. mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me)
  991. {
  992. var cell = me.getCell();
  993. var model = this.graph.getModel();
  994. var parent = model.getParent(cell);
  995. while (model.isVertex(parent) && !this.graph.isContainer(parent))
  996. {
  997. if (this.graph.isCellSelected(parent))
  998. {
  999. cell = parent;
  1000. }
  1001. parent = model.getParent(parent);
  1002. }
  1003. return cell;
  1004. };
  1005. })();