Editor.js 61 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878
  1. /**
  2. * Copyright (c) 2006-2017, JGraph Ltd
  3. * Copyright (c) 2006-2017, Gaudenz Alder
  4. */
  5. (function()
  6. {
  7. /**
  8. * Specifies the app name. Default is document.title.
  9. */
  10. Editor.prototype.appName = 'draw.io';
  11. /**
  12. * Used in the GraphViewer lightbox.
  13. */
  14. Editor.closeImage = (mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAApVBMVEUAAAD////k5OT///8AAAB1dXXMzMz9/f39/f37+/v5+fn+/v7///9iYmJaWlqFhYWnp6ejo6OHh4f////////////////7+/v5+fnx8fH///8AAAD///8bGxv7+/v5+fkoKCghISFDQ0MYGBjh4eHY2Njb29tQUFBvb29HR0c/Pz82NjYrKyu/v78SEhLu7u7s7OzV1dVVVVU7OzsVFRXAv78QEBBzqehMAAAAG3RSTlMAA/7p/vz5xZlrTiPL/v78+/v7+OXd2TYQDs8L70ZbAAABKUlEQVQoz3VS13LCMBBUXHChd8iukDslQChJ/v/TchaG4cXS+OSb1c7trU7V60OpdRz2ZtNZL4zXNlcN8BEtSG6+NxIXkeRPoBuQ1cjvZ31/VJFB10ISli6diYfH8iYO3WUNCcNlB0gTrXOtkxTo0O1aKKiBBMhhv2MNBQKoiA5wxlZo0JDzD3AYKbWacyj3fs01wxey0pyEP+R8pWKWXoqtIZ0DDg5pbki9krEKOa6LVDQsdoXEsi46Zqh69KFz7B1u7Hb2yDV8firXDKBlZ4UFiswKGRhXTS93/ECK7yxnJ3+S3y/ThpO+cfSD017nqa18aasabU0/t7d+tk0/1oMEJ1NaD67iwdF68OabFSLn+eHb0+vjy+uk8br9fdrftH0O2menfd7+AQfYM/lNjoDHAAAAAElFTkSuQmCC' : IMAGE_PATH + '/delete.png';
  15. /**
  16. *
  17. */
  18. Editor.plusImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/plus.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDdCMTdENjVCOEM4MTFFNDlCRjVBNDdCODU5NjNBNUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDdCMTdENjZCOEM4MTFFNDlCRjVBNDdCODU5NjNBNUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowN0IxN0Q2M0I4QzgxMUU0OUJGNUE0N0I4NTk2M0E1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowN0IxN0Q2NEI4QzgxMUU0OUJGNUE0N0I4NTk2M0E1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtjrjmgAAAAtSURBVHjaYvz//z8DMigvLwcLdHZ2MiKLMzEQCaivkLGsrOw/dU0cAr4GCDAARQsQbTFrv10AAAAASUVORK5CYII=';
  19. /**
  20. *
  21. */
  22. Editor.spinImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/spin.gif' : 'data:image/gif;base64,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';
  23. /**
  24. * Used in the GraphViewer lightbox.
  25. */
  26. Editor.tweetImage = (mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARlJREFUeNpi/P//PwM1ABMDlQDVDGKAeo0biMXwKOMD4ilA/AiInwDxfCBWBeIgINYDmwE1yB2Ir0Alsbl6JchONPwNiC8CsTPIDJjXuIBYG4gPAnE8EDMjGaQCxGFYLOAEYlYg/o3sNSkgfo1k2ykgLgRiIyAOwOIaGE6CmwE1SA6IZ0BNR1f8GY9BXugG2UMN+YtHEzr+Aw0OFINYgHgdCYaA8HUgZkM3CASEoYb9ItKgapQkhGQQKC0dJdKQx1CLsRoEArpAvAuI3+Ix5B8Q+2AkaiyZVgGId+MwBBQhKVhzB9QgKyDuAOJ90BSLzZBzQOyCK5uxQNnXoGlJHogfIOU7UCI9C8SbgHgjEP/ElRkZB115BBBgAPbkvQ/azcC0AAAAAElFTkSuQmCC' : IMAGE_PATH + '/tweet.png';
  27. /**
  28. * Used in the GraphViewer lightbox.
  29. */
  30. Editor.facebookImage = (mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAARVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADc6ur3AAAAFnRSTlMAYmRg2KVCC/oPq0uAcVQtHtvZuoYh/a7JUAAAAGJJREFUGNOlzkkOgCAMQNEvagvigBP3P6pRNoCJG/+myVu0RdsqxcQqQ/NFVkKQgqwDzoJ2WKajoB66atcAa0GjX0D8lJHwNGfknYJzY77LDtDZ+L74j0z26pZI2yYlMN9TL17xEd+fl1D+AAAAAElFTkSuQmCC' : IMAGE_PATH + '/facebook.png';
  31. /**
  32. * Blank 1x1 pixel transparent PNG image.
  33. */
  34. Editor.blankImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==';
  35. /**
  36. * Contains the default XML for an empty diagram.
  37. */
  38. Editor.defaultCsvValue = '##\n' +
  39. '## Example CSV import. Use ## for comments and # for configuration. Paste CSV below.\n' +
  40. '## The following names are reserved and should not be used (or ignored):\n' +
  41. '## id, tooltip, placeholder(s), link and label (see below)\n' +
  42. '##\n' +
  43. '#\n' +
  44. '## Node label with placeholders and HTML.\n' +
  45. '## Default is \'%name_of_first_column%\'.\n' +
  46. '#\n' +
  47. '# label: %name%<br><i style="color:gray;">%position%</i><br><a href="mailto:%email%">Email</a>\n' +
  48. '#\n' +
  49. '## Node style (placeholders are replaced once).\n' +
  50. '## Default is the current style for nodes.\n' +
  51. '#\n' +
  52. '# style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;\n' +
  53. '#\n' +
  54. '## Uses the given column name as the identity for cells (updates existing cells).\n' +
  55. '## Default is no identity (empty value or -).\n' +
  56. '#\n' +
  57. '# identity: -\n' +
  58. '#\n' +
  59. '## Connections between rows ("from": source colum, "to": target column).\n' +
  60. '## Label, style and invert are optional. Defaults are \'\', current style and false.\n' +
  61. '## The target column may contain a comma-separated list of values.\n' +
  62. '## Multiple connect entries are allowed.\n' +
  63. '#\n' +
  64. '# connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", \\\n' +
  65. '# "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}\n' +
  66. '# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}\n' +
  67. '#\n' +
  68. '## Node width. Possible value are px or auto. Default is auto.\n' +
  69. '#\n' +
  70. '# width: auto\n' +
  71. '#\n' +
  72. '## Node height. Possible value are px or auto. Default is auto.\n' +
  73. '#\n' +
  74. '# height: auto\n' +
  75. '#\n' +
  76. '## Padding for autosize. Default is 0.\n' +
  77. '#\n' +
  78. '# padding: -26\n' +
  79. '#\n' +
  80. '## Comma-separated list of ignored columns for metadata. (These can be\n' +
  81. '## used for connections and styles but will not be added as metadata.)\n' +
  82. '#\n' +
  83. '# ignore: id,image,fill,stroke\n' +
  84. '#\n' +
  85. '## Column to be renamed to link attribute (used as link).\n' +
  86. '#\n' +
  87. '# link: url\n' +
  88. '#\n' +
  89. '## Spacing between nodes. Default is 40.\n' +
  90. '#\n' +
  91. '# nodespacing: 40\n' +
  92. '#\n' +
  93. '## Spacing between parallel edges. Default is 40.\n' +
  94. '#\n' +
  95. '# edgespacing: 40\n' +
  96. '#\n' +
  97. '## Name of layout. Possible values are auto, none, verticaltree, horizontaltree,\n' +
  98. '## verticalflow, horizontalflow, organic, circle. Default is auto.\n' +
  99. '#\n' +
  100. '# layout: auto\n' +
  101. '#\n' +
  102. '## ---- CSV below this line. First line are column names. ----\n' +
  103. 'name,position,id,location,manager,email,fill,stroke,refs,url,image\n' +
  104. 'Evan Miller,CFO,emi,Office 1,,me@example.com,#dae8fc,#6c8ebf,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-9-2-128.png\n' +
  105. 'Edward Morrison,Brand Manager,emo,Office 2,Evan Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-10-3-128.png\n' +
  106. 'Ron Donovan,System Admin,rdo,Office 3,Evan Miller,me@example.com,#d5e8d4,#82b366,"emo,tva",https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-2-128.png\n' +
  107. 'Tessa Valet,HR Director,tva,Office 4,Evan Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-3-128.png\n';
  108. /**
  109. * Global configuration of the Editor
  110. * see https://desk.draw.io/solution/articles/16000058316
  111. */
  112. Editor.configure = function(config)
  113. {
  114. // LATER: DefaultFont and DefaultFontSize should override Graph's stylesheet,
  115. // default edge and vertex styles would have to be set before loading mxSettings
  116. Menus.prototype.defaultFonts = config.defaultFonts || Menus.prototype.defaultFonts;
  117. ColorDialog.prototype.presetColors = config.presetColors || ColorDialog.prototype.presetColors;
  118. ColorDialog.prototype.defaultColors = config.defaultColors || ColorDialog.prototype.defaultColors;
  119. StyleFormatPanel.prototype.defaultColorSchemes = config.defaultColorSchemes || StyleFormatPanel.prototype.defaultColorSchemes;
  120. };
  121. /**
  122. * Executes the first step for connecting to Google Drive.
  123. */
  124. Editor.prototype.editButtonLink = (urlParams['edit'] != null) ? decodeURIComponent(urlParams['edit']) : null;
  125. /**
  126. *
  127. */
  128. if (urlParams['dev'] == '1')
  129. {
  130. Editor.prototype.editBlankUrl = Editor.prototype.editBlankUrl + '&dev=1';
  131. Editor.prototype.editBlankFallbackUrl = Editor.prototype.editBlankFallbackUrl + '&dev=1';
  132. }
  133. /**
  134. * Adds support for old stylesheets and compressed files
  135. */
  136. var editorSetGraphXml = Editor.prototype.setGraphXml;
  137. Editor.prototype.setGraphXml = function(node)
  138. {
  139. node = (node != null && node.nodeName != 'mxlibrary') ? this.extractGraphModel(node) : null;
  140. if (node != null)
  141. {
  142. // Checks input for parser errors
  143. var errs = node.getElementsByTagName('parsererror');
  144. if (errs != null && errs.length > 0)
  145. {
  146. var elt = errs[0];
  147. var divs = elt.getElementsByTagName('div');
  148. if (divs != null && divs.length > 0)
  149. {
  150. elt = divs[0];
  151. }
  152. throw {message: mxUtils.getTextContent(elt)};
  153. }
  154. else if (node.nodeName == 'mxGraphModel')
  155. {
  156. var style = node.getAttribute('style') || 'default-style2';
  157. // Decodes the style if required
  158. if (urlParams['embed'] != '1' && (style == null || style == ''))
  159. {
  160. var node2 = (this.graph.themes != null) ?
  161. this.graph.themes['default-old'] :
  162. mxUtils.load(STYLE_PATH + '/default-old.xml').getDocumentElement();
  163. if (node2 != null)
  164. {
  165. var dec2 = new mxCodec(node2.ownerDocument);
  166. dec2.decode(node2, this.graph.getStylesheet());
  167. }
  168. }
  169. else if (style != this.graph.currentStyle)
  170. {
  171. var node2 = (this.graph.themes != null) ?
  172. this.graph.themes[style] :
  173. mxUtils.load(STYLE_PATH + '/' + style + '.xml').getDocumentElement()
  174. if (node2 != null)
  175. {
  176. var dec2 = new mxCodec(node2.ownerDocument);
  177. dec2.decode(node2, this.graph.getStylesheet());
  178. }
  179. }
  180. this.graph.currentStyle = style;
  181. this.graph.mathEnabled = (urlParams['math'] == '1' || node.getAttribute('math') == '1');
  182. var bgImg = node.getAttribute('backgroundImage');
  183. if (bgImg != null)
  184. {
  185. bgImg = JSON.parse(bgImg);
  186. this.graph.setBackgroundImage(new mxImage(bgImg.src, bgImg.width, bgImg.height));
  187. }
  188. else
  189. {
  190. this.graph.setBackgroundImage(null);
  191. }
  192. mxClient.NO_FO = (this.graph.mathEnabled) ? true : this.originalNoForeignObject;
  193. this.graph.setShadowVisible(node.getAttribute('shadow') == '1', false);
  194. }
  195. // Calls updateGraphComponents
  196. editorSetGraphXml.apply(this, arguments);
  197. }
  198. else
  199. {
  200. throw {
  201. message: mxResources.get('notADiagramFile') || 'Invalid data',
  202. toString: function() { return this.message; }
  203. };
  204. }
  205. };
  206. /**
  207. * Adds persistent style to file
  208. */
  209. var editorGetGraphXml = Editor.prototype.getGraphXml;
  210. Editor.prototype.getGraphXml = function(ignoreSelection)
  211. {
  212. ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
  213. var node = editorGetGraphXml.apply(this, arguments);
  214. // Adds the current style
  215. if (this.graph.currentStyle != null && this.graph.currentStyle != 'default-style2')
  216. {
  217. node.setAttribute('style', this.graph.currentStyle);
  218. }
  219. // Adds the background image
  220. if (this.graph.backgroundImage != null)
  221. {
  222. node.setAttribute('backgroundImage', JSON.stringify(this.graph.backgroundImage));
  223. }
  224. node.setAttribute('math', (this.graph.mathEnabled) ? '1' : '0');
  225. node.setAttribute('shadow', (this.graph.shadowVisible) ? '1' : '0');
  226. return node;
  227. };
  228. /**
  229. * Helper function to extract the graph model XML node.
  230. */
  231. Editor.prototype.isDataSvg = function(svg)
  232. {
  233. try
  234. {
  235. var svgRoot = mxUtils.parseXml(svg).documentElement;
  236. var tmp = svgRoot.getAttribute('content');
  237. if (tmp != null)
  238. {
  239. if (tmp != null && tmp.charAt(0) != '<' && tmp.charAt(0) != '%')
  240. {
  241. tmp = unescape((window.atob) ? atob(tmp) : Base64.decode(cont, tmp));
  242. }
  243. if (tmp != null && tmp.charAt(0) == '%')
  244. {
  245. tmp = decodeURIComponent(tmp);
  246. }
  247. if (tmp != null && tmp.length > 0)
  248. {
  249. var node = mxUtils.parseXml(tmp).documentElement;
  250. return node.nodeName == 'mxfile' || node.nodeName == 'mxGraphModel';
  251. }
  252. }
  253. }
  254. catch (e)
  255. {
  256. // ignore
  257. }
  258. return false;
  259. };
  260. /**
  261. * Helper function to extract the graph model XML node.
  262. */
  263. Editor.prototype.extractGraphModel = function(node, allowMxFile)
  264. {
  265. if (node != null && typeof(pako) !== 'undefined')
  266. {
  267. var tmp = node.ownerDocument.getElementsByTagName('div');
  268. var divs = [];
  269. if (tmp != null && tmp.length > 0)
  270. {
  271. for (var i = 0; i < tmp.length; i++)
  272. {
  273. if (tmp[i].getAttribute('class') == 'mxgraph')
  274. {
  275. divs.push(tmp[i]);
  276. break;
  277. }
  278. }
  279. }
  280. if (divs.length > 0)
  281. {
  282. var data = divs[0].getAttribute('data-mxgraph');
  283. if (data != null)
  284. {
  285. var config = JSON.parse(data);
  286. if (config != null && config.xml != null)
  287. {
  288. var doc2 = mxUtils.parseXml(config.xml);
  289. node = doc2.documentElement;
  290. }
  291. }
  292. else
  293. {
  294. var divs2 = divs[0].getElementsByTagName('div');
  295. if (divs2.length > 0)
  296. {
  297. var data = mxUtils.getTextContent(divs2[0]);
  298. data = this.graph.decompress(data);
  299. if (data.length > 0)
  300. {
  301. var doc2 = mxUtils.parseXml(data);
  302. node = doc2.documentElement;
  303. }
  304. }
  305. }
  306. }
  307. }
  308. if (node != null && node.nodeName == 'svg')
  309. {
  310. var tmp = node.getAttribute('content');
  311. if (tmp != null && tmp.charAt(0) != '<' && tmp.charAt(0) != '%')
  312. {
  313. tmp = unescape((window.atob) ? atob(tmp) : Base64.decode(cont, tmp));
  314. }
  315. if (tmp != null && tmp.charAt(0) == '%')
  316. {
  317. tmp = decodeURIComponent(tmp);
  318. }
  319. if (tmp != null && tmp.length > 0)
  320. {
  321. node = mxUtils.parseXml(tmp).documentElement;
  322. }
  323. else
  324. {
  325. throw {message: mxResources.get('notADiagramFile')};
  326. }
  327. }
  328. if (node != null && !allowMxFile)
  329. {
  330. var diagramNode = null;
  331. if (node.nodeName == 'diagram')
  332. {
  333. diagramNode = node;
  334. }
  335. else if (node.nodeName == 'mxfile')
  336. {
  337. var diagrams = node.getElementsByTagName('diagram');
  338. if (diagrams.length > 0)
  339. {
  340. diagramNode = diagrams[Math.max(0, Math.min(diagrams.length - 1, urlParams['page'] || 0))];
  341. }
  342. }
  343. if (diagramNode != null)
  344. {
  345. var tmp = this.graph.decompress(mxUtils.getTextContent(diagramNode));
  346. if (tmp != null && tmp.length > 0)
  347. {
  348. node = mxUtils.parseXml(tmp).documentElement;
  349. }
  350. }
  351. }
  352. if (node != null && node.nodeName != 'mxGraphModel' && (!allowMxFile || node.nodeName != 'mxfile'))
  353. {
  354. node = null;
  355. }
  356. return node;
  357. };
  358. /**
  359. * Overrides reset graph.
  360. */
  361. var editorResetGraph = Editor.prototype.resetGraph;
  362. Editor.prototype.resetGraph = function()
  363. {
  364. this.graph.mathEnabled = (urlParams['math'] == '1');
  365. this.graph.view.x0 = null;
  366. this.graph.view.y0 = null;
  367. mxClient.NO_FO = (this.graph.mathEnabled) ? true : this.originalNoForeignObject;
  368. editorResetGraph.apply(this, arguments);
  369. };
  370. /**
  371. * Math support.
  372. */
  373. Editor.prototype.originalNoForeignObject = mxClient.NO_FO;
  374. var editorUpdateGraphComponents = Editor.prototype.updateGraphComponents;
  375. Editor.prototype.updateGraphComponents = function()
  376. {
  377. editorUpdateGraphComponents.apply(this, arguments);
  378. mxClient.NO_FO = (this.graph.mathEnabled && Editor.MathJaxRender != null) ? true : this.originalNoForeignObject;
  379. };
  380. /**
  381. * Initializes math typesetting and loads respective code.
  382. */
  383. Editor.initMath = function(src, config)
  384. {
  385. src = (src != null) ? src : 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_HTMLorMML';
  386. Editor.mathJaxQueue = [];
  387. Editor.doMathJaxRender = function(container)
  388. {
  389. MathJax.Hub.Queue(['Typeset', MathJax.Hub, container]);
  390. };
  391. // Disables global typesetting and messages on startup, adds queue for
  392. // asynchronous rendering while MathJax is loading
  393. window.MathJax =
  394. {
  395. skipStartupTypeset: true,
  396. showMathMenu: false,
  397. messageStyle: 'none',
  398. AuthorInit: function ()
  399. {
  400. // Specification recommends using SVG over HTML-CSS if browser is known
  401. // Check if too inconsistent with image export and print output
  402. MathJax.Hub.Config(config || {
  403. jax: ['input/TeX', 'input/MathML', 'input/AsciiMath', 'output/HTML-CSS'],
  404. extensions: ['tex2jax.js', 'mml2jax.js', 'asciimath2jax.js'],
  405. TeX: {
  406. extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
  407. },
  408. // Ignores math in in-place editor
  409. tex2jax: {
  410. ignoreClass: 'mxCellEditor'
  411. },
  412. asciimath2jax: {
  413. ignoreClass: 'mxCellEditor'
  414. }
  415. });
  416. MathJax.Hub.Register.StartupHook('Begin', function()
  417. {
  418. for (var i = 0; i < Editor.mathJaxQueue.length; i++)
  419. {
  420. Editor.doMathJaxRender(Editor.mathJaxQueue[i]);
  421. }
  422. });
  423. }
  424. };
  425. // Adds global enqueue method for async rendering
  426. Editor.MathJaxRender = function(container)
  427. {
  428. // Initial rendering when MathJax finished loading
  429. if (typeof(MathJax) !== 'undefined' && typeof(MathJax.Hub) !== 'undefined')
  430. {
  431. Editor.doMathJaxRender(container);
  432. }
  433. else
  434. {
  435. Editor.mathJaxQueue.push(container);
  436. }
  437. };
  438. // Adds global clear queue method
  439. Editor.MathJaxClear = function()
  440. {
  441. Editor.mathJaxQueue = [];
  442. };
  443. // Updates typeset after changes
  444. var editorInit = Editor.prototype.init;
  445. Editor.prototype.init = function()
  446. {
  447. editorInit.apply(this, arguments);
  448. this.graph.addListener(mxEvent.SIZE, mxUtils.bind(this, function(sender, evt)
  449. {
  450. if (this.graph.mathEnabled)
  451. {
  452. Editor.MathJaxRender(this.graph.container);
  453. }
  454. }));
  455. };
  456. var tags = document.getElementsByTagName('script');
  457. if (tags != null && tags.length > 0)
  458. {
  459. var script = document.createElement('script');
  460. script.type = 'text/javascript';
  461. script.src = src;
  462. tags[0].parentNode.appendChild(script);
  463. }
  464. };
  465. /**
  466. * Return array of string values, or NULL if CSV string not well formed.
  467. */
  468. Editor.prototype.csvToArray = function(text)
  469. {
  470. var re_valid = /^\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*(?:,\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*)*$/;
  471. var re_value = /(?!\s*$)\s*(?:'([^'\\]*(?:\\[\S\s][^'\\]*)*)'|"([^"\\]*(?:\\[\S\s][^"\\]*)*)"|([^,'"\s\\]*(?:\s+[^,'"\s\\]+)*))\s*(?:,|$)/g;
  472. // Return NULL if input string is not well formed CSV string.
  473. if (!re_valid.test(text)) return null;
  474. var a = []; // Initialize array to receive values.
  475. text.replace(re_value, // "Walk" the string using replace with callback.
  476. function(m0, m1, m2, m3) {
  477. // Remove backslash from \' in single quoted values.
  478. if (m1 !== undefined) a.push(m1.replace(/\\'/g, "'"));
  479. // Remove backslash from \" in double quoted values.
  480. else if (m2 !== undefined) a.push(m2.replace(/\\"/g, '"'));
  481. else if (m3 !== undefined) a.push(m3);
  482. return ''; // Return empty string.
  483. });
  484. // Handle special case of empty last value.
  485. if (/,\s*$/.test(text)) a.push('');
  486. return a;
  487. };
  488. /**
  489. * Adds persistence for recent colors
  490. */
  491. if (window.ColorDialog)
  492. {
  493. var colorDialogAddRecentColor = ColorDialog.addRecentColor;
  494. ColorDialog.addRecentColor = function(color, max)
  495. {
  496. colorDialogAddRecentColor.apply(this, arguments);
  497. mxSettings.setRecentColors(ColorDialog.recentColors);
  498. mxSettings.save();
  499. };
  500. var colorDialogResetRecentColors = ColorDialog.resetRecentColors;
  501. ColorDialog.resetRecentColors = function()
  502. {
  503. colorDialogResetRecentColors.apply(this, arguments);
  504. mxSettings.setRecentColors(ColorDialog.recentColors);
  505. mxSettings.save();
  506. };
  507. }
  508. // Overridden to add edit shape option
  509. if (window.StyleFormatPanel != null)
  510. {
  511. var formatInit = Format.prototype.init;
  512. Format.prototype.init = function()
  513. {
  514. formatInit.apply(this, arguments);
  515. var ui = this.editorUi;
  516. ui.editor.addListener('fileLoaded', this.update);
  517. };
  518. var formatRefresh = Format.prototype.refresh;
  519. Format.prototype.refresh = function()
  520. {
  521. var ui = this.editorUi;
  522. if (ui.getCurrentFile() != null || urlParams['embed'] == '1')
  523. {
  524. formatRefresh.apply(this, arguments);
  525. }
  526. else
  527. {
  528. this.clear();
  529. }
  530. };
  531. /**
  532. * Adds autosave and math typesetting options.
  533. */
  534. var diagramFormatPanelAddOptions = DiagramFormatPanel.prototype.addOptions;
  535. DiagramFormatPanel.prototype.addOptions = function(div)
  536. {
  537. div = diagramFormatPanelAddOptions.apply(this, arguments);
  538. var ui = this.editorUi;
  539. var editor = ui.editor;
  540. var graph = editor.graph;
  541. if (graph.isEnabled())
  542. {
  543. var file = ui.getCurrentFile();
  544. if (file != null && file.isAutosaveOptional())
  545. {
  546. var opt = this.createOption(mxResources.get('autosave'), function()
  547. {
  548. return ui.editor.autosave;
  549. }, function(checked)
  550. {
  551. ui.editor.setAutosave(checked);
  552. },
  553. {
  554. install: function(apply)
  555. {
  556. this.listener = function()
  557. {
  558. apply(ui.editor.autosave);
  559. };
  560. ui.editor.addListener('autosaveChanged', this.listener);
  561. },
  562. destroy: function()
  563. {
  564. ui.editor.removeListener(this.listener);
  565. }
  566. });
  567. div.appendChild(opt);
  568. }
  569. }
  570. return div;
  571. };
  572. /**
  573. * Configures global color schemes.
  574. */
  575. StyleFormatPanel.prototype.defaultColorSchemes = [[null, {fill: '#f5f5f5', stroke: '#666666'},
  576. {fill: '#dae8fc', stroke: '#6c8ebf'}, {fill: '#d5e8d4', stroke: '#82b366'},
  577. {fill: '#ffe6cc', stroke: '#d79b00'}, {fill: '#fff2cc', stroke: '#d6b656'},
  578. {fill: '#f8cecc', stroke: '#b85450'}, {fill: '#e1d5e7', stroke: '#9673a6'}],
  579. [null,
  580. {fill: '#f5f5f5', stroke: '#666666', gradient: '#b3b3b3'},
  581. {fill: '#dae8fc', stroke: '#6c8ebf', gradient: '#7ea6e0'},
  582. {fill: '#d5e8d4', stroke: '#82b366', gradient: '#97d077'},
  583. {fill: '#ffcd28', stroke: '#d79b00', gradient: '#ffa500'},
  584. {fill: '#fff2cc', stroke: '#d6b656', gradient: '#ffd966'},
  585. {fill: '#f8cecc', stroke: '#b85450', gradient: '#ea6b66'},
  586. {fill: '#e6d0de', stroke: '#996185', gradient: '#d5739d'}],
  587. [null, {fill: '#eeeeee', stroke: '#36393d'},
  588. {fill: '#f9f7ed', stroke: '#36393d'}, {fill: '#ffcc99', stroke: '#36393d'},
  589. {fill: '#cce5ff', stroke: '#36393d'}, {fill: '#ffff88', stroke: '#36393d'},
  590. {fill: '#cdeb8b', stroke: '#36393d'}, {fill: '#ffcccc', stroke: '#36393d'}]];
  591. /**
  592. * Adds predefiend styles.
  593. */
  594. var StyleFormatPanelInit = StyleFormatPanel.prototype.init;
  595. StyleFormatPanel.prototype.init = function()
  596. {
  597. // TODO: Update sstate in Format
  598. var sstate = this.format.createSelectionState();
  599. if (sstate.style.shape != 'image')
  600. {
  601. this.container.appendChild(this.addStyles(this.createPanel()));
  602. }
  603. StyleFormatPanelInit.apply(this, arguments);
  604. };
  605. /**
  606. * Overridden to add copy and paste style.
  607. */
  608. var styleFormatPanelAddStyleOps = StyleFormatPanel.prototype.addStyleOps;
  609. StyleFormatPanel.prototype.addStyleOps = function(div)
  610. {
  611. var btn = mxUtils.button(mxResources.get('copyStyle'), mxUtils.bind(this, function(evt)
  612. {
  613. this.editorUi.actions.get('copyStyle').funct();
  614. }));
  615. btn.setAttribute('title', mxResources.get('copyStyle') + ' (' + this.editorUi.actions.get('copyStyle').shortcut + ')');
  616. btn.style.marginBottom = '2px';
  617. btn.style.width = '100px';
  618. btn.style.marginRight = '2px';
  619. div.appendChild(btn);
  620. var btn = mxUtils.button(mxResources.get('pasteStyle'), mxUtils.bind(this, function(evt)
  621. {
  622. this.editorUi.actions.get('pasteStyle').funct();
  623. }));
  624. btn.setAttribute('title', mxResources.get('pasteStyle') + ' (' + this.editorUi.actions.get('pasteStyle').shortcut + ')');
  625. btn.style.marginBottom = '2px';
  626. btn.style.width = '100px';
  627. div.appendChild(btn);
  628. mxUtils.br(div);
  629. return styleFormatPanelAddStyleOps.apply(this, arguments);
  630. };
  631. /**
  632. * Creates the buttons for the predefined styles.
  633. */
  634. StyleFormatPanel.prototype.addStyles = function(div)
  635. {
  636. var graph = this.editorUi.editor.graph;
  637. var picker = document.createElement('div');
  638. picker.style.whiteSpace = 'normal';
  639. picker.style.paddingLeft = '24px';
  640. picker.style.paddingRight = '20px';
  641. div.style.paddingLeft = '16px';
  642. div.style.paddingBottom = '6px';
  643. div.style.position = 'relative';
  644. div.appendChild(picker);
  645. var stylenames = ['plain-gray', 'plain-blue', 'plain-green', 'plain-turquoise',
  646. 'plain-orange', 'plain-yellow', 'plain-red', 'plain-pink', 'plain-purple', 'gray',
  647. 'blue', 'green', 'turquoise', 'orange', 'yellow', 'red', 'pink', 'purple'];
  648. function updateScheme(colorsets)
  649. {
  650. function addButton(colorset)
  651. {
  652. var btn = mxUtils.button('', function(evt)
  653. {
  654. graph.getModel().beginUpdate();
  655. try
  656. {
  657. var cells = graph.getSelectionCells();
  658. for (var i = 0; i < cells.length; i++)
  659. {
  660. var style = graph.getModel().getStyle(cells[i]);
  661. for (var j = 0; j < stylenames.length; j++)
  662. {
  663. style = mxUtils.removeStylename(style, stylenames[j]);
  664. }
  665. if (colorset != null)
  666. {
  667. style = mxUtils.setStyle(style, mxConstants.STYLE_FILLCOLOR, colorset['fill']);
  668. style = mxUtils.setStyle(style, mxConstants.STYLE_STROKECOLOR, colorset['stroke']);
  669. style = mxUtils.setStyle(style, mxConstants.STYLE_GRADIENTCOLOR, colorset['gradient']);
  670. }
  671. else
  672. {
  673. style = mxUtils.setStyle(style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
  674. style = mxUtils.setStyle(style, mxConstants.STYLE_STROKECOLOR, '#000000');
  675. style = mxUtils.setStyle(style, mxConstants.STYLE_GRADIENTCOLOR, null);
  676. }
  677. graph.getModel().setStyle(cells[i], style);
  678. }
  679. }
  680. finally
  681. {
  682. graph.getModel().endUpdate();
  683. }
  684. })
  685. btn.style.width = '36px';
  686. btn.style.height = '30px';
  687. btn.style.margin = '0px 6px 6px 0px';
  688. if (colorset != null)
  689. {
  690. if (colorset['gradient'] != null)
  691. {
  692. if (mxClient.IS_IE && (mxClient.IS_QUIRKS || document.documentMode < 10))
  693. {
  694. btn.style.filter = 'progid:DXImageTransform.Microsoft.Gradient('+
  695. 'StartColorStr=\'' + colorset['fill'] +
  696. '\', EndColorStr=\'' + colorset['gradient'] + '\', GradientType=0)';
  697. }
  698. else
  699. {
  700. btn.style.backgroundImage = 'linear-gradient(' + colorset['fill'] + ' 0px,' +
  701. colorset['gradient'] + ' 100%)';
  702. }
  703. }
  704. else
  705. {
  706. btn.style.backgroundColor = colorset['fill'];
  707. }
  708. btn.style.border = '1px solid ' + colorset['stroke'];
  709. }
  710. else
  711. {
  712. btn.style.backgroundColor = '#ffffff';
  713. btn.style.border = '1px solid #000000';
  714. }
  715. picker.appendChild(btn);
  716. };
  717. picker.innerHTML = '';
  718. for (var i = 0; i < colorsets.length; i++)
  719. {
  720. if (i > 0 && mxUtils.mod(i, 4) == 0)
  721. {
  722. mxUtils.br(picker);
  723. }
  724. addButton(colorsets[i]);
  725. }
  726. };
  727. if (this.editorUi.currentScheme == null)
  728. {
  729. this.editorUi.currentScheme = 0;
  730. }
  731. var left = document.createElement('div');
  732. left.style.cssText = 'position:absolute;left:10px;top:8px;bottom:8px;width:20px;margin:4px;opacity:0.5;' +
  733. 'background-repeat:no-repeat;background-position:center center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAB2dnZ4eHh3d3d1dXVxcXF2dnZ2dnZ2dnZxcXF2dnYmb3w1AAAACnRSTlMAfCTkhhvb7cQSPH2JPgAAADRJREFUCNdjwACMAmBKaiGYs2oJmLPKAZ3DabU8AMRTXpUKopislqFyVzCAuUZgikkBZjoAcMYLnp53P/UAAAAASUVORK5CYII=);';
  734. mxEvent.addListener(left, 'click', mxUtils.bind(this, function()
  735. {
  736. this.editorUi.currentScheme = mxUtils.mod(this.editorUi.currentScheme - 1, this.defaultColorSchemes.length);
  737. updateScheme(this.defaultColorSchemes[this.editorUi.currentScheme]);
  738. }));
  739. var right = document.createElement('div');
  740. right.style.cssText = 'position:absolute;left:202px;top:8px;bottom:8px;width:20px;margin:4px;opacity:0.5;' +
  741. 'background-repeat:no-repeat;background-position:center center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAB2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYBuwCcAAAACnRSTlMAfCTkhhvb7cQSPH2JPgAAADZJREFUCNdjQAOMAmBKaiGY8loF5rKswsZlrVo8AUiFrTICcbIWK8A5DF1gDoMymMPApIAwHwCS0Qx/U7qCBQAAAABJRU5ErkJggg==);';
  742. if (this.defaultColorSchemes.length > 1)
  743. {
  744. div.appendChild(left);
  745. div.appendChild(right);
  746. }
  747. mxEvent.addListener(right, 'click', mxUtils.bind(this, function()
  748. {
  749. this.editorUi.currentScheme = mxUtils.mod(this.editorUi.currentScheme + 1, this.defaultColorSchemes.length);
  750. updateScheme(this.defaultColorSchemes[this.editorUi.currentScheme]);
  751. }));
  752. // Hover state
  753. function addHoverState(elt)
  754. {
  755. mxEvent.addListener(elt, 'mouseenter', function()
  756. {
  757. elt.style.opacity = '1';
  758. });
  759. mxEvent.addListener(elt, 'mouseleave', function()
  760. {
  761. elt.style.opacity = '0.5';
  762. });
  763. };
  764. addHoverState(left);
  765. addHoverState(right);
  766. updateScheme(this.defaultColorSchemes[this.editorUi.currentScheme]);
  767. return div;
  768. };
  769. StyleFormatPanel.prototype.addEditOps = function(div)
  770. {
  771. var ss = this.format.getSelectionState();
  772. var btn = null;
  773. if (this.editorUi.editor.graph.getSelectionCount() == 1)
  774. {
  775. btn = mxUtils.button(mxResources.get('editStyle'), mxUtils.bind(this, function(evt)
  776. {
  777. this.editorUi.actions.get('editStyle').funct();
  778. }));
  779. btn.setAttribute('title', mxResources.get('editStyle') + ' (' + this.editorUi.actions.get('editStyle').shortcut + ')');
  780. btn.style.width = '202px';
  781. btn.style.marginBottom = '2px';
  782. div.appendChild(btn);
  783. }
  784. var graph = this.editorUi.editor.graph;
  785. var state = graph.view.getState(graph.getSelectionCell());
  786. if (graph.getSelectionCount() == 1 && state != null && state.shape != null && state.shape.stencil != null)
  787. {
  788. var btn2 = mxUtils.button(mxResources.get('editShape'), mxUtils.bind(this, function(evt)
  789. {
  790. this.editorUi.actions.get('editShape').funct();
  791. }));
  792. btn2.setAttribute('title', mxResources.get('editShape'));
  793. btn2.style.marginBottom = '2px';
  794. if (btn == null)
  795. {
  796. btn2.style.width = '202px';
  797. }
  798. else
  799. {
  800. btn.style.width = '100px';
  801. btn2.style.width = '100px';
  802. btn2.style.marginLeft = '2px';
  803. }
  804. div.appendChild(btn2);
  805. }
  806. else if (ss.image)
  807. {
  808. var btn2 = mxUtils.button(mxResources.get('editImage'), mxUtils.bind(this, function(evt)
  809. {
  810. this.editorUi.actions.get('image').funct();
  811. }));
  812. btn2.setAttribute('title', mxResources.get('editImage'));
  813. btn2.style.marginBottom = '2px';
  814. if (btn == null)
  815. {
  816. btn2.style.width = '202px';
  817. }
  818. else
  819. {
  820. btn.style.width = '100px';
  821. btn2.style.width = '100px';
  822. btn2.style.marginLeft = '2px';
  823. }
  824. div.appendChild(btn2);
  825. }
  826. return div;
  827. };
  828. }
  829. /**
  830. * Changes the default stylename so that it matches the old named style
  831. * if one was specified in the XML.
  832. */
  833. Graph.prototype.defaultThemeName = 'default-style2';
  834. /**
  835. * Contains the last XML that was pasted.
  836. */
  837. Graph.prototype.lastPasteXml = null;
  838. /**
  839. * Contains the number of times the last XML was pasted.
  840. */
  841. Graph.prototype.pasteCounter = 0;
  842. /**
  843. * Graph Overrides
  844. */
  845. Graph.prototype.defaultScrollbars = urlParams['sb'] != '0';
  846. /**
  847. * Specifies if the page should be visible for new files. Default is true.
  848. */
  849. Graph.prototype.defaultPageVisible = urlParams['pv'] != '0';
  850. /**
  851. * Specifies if the page should be visible for new files. Default is true.
  852. */
  853. Graph.prototype.shadowId = 'dropShadow';
  854. /**
  855. * Enables move of bends/segments without selecting.
  856. */
  857. Graph.prototype.edgeMode = urlParams['edge'] != 'move';
  858. /**
  859. * Adds rack child layout style.
  860. */
  861. var graphInit = Graph.prototype.init;
  862. Graph.prototype.init = function()
  863. {
  864. graphInit.apply(this, arguments);
  865. // Override insert location for current mouse point
  866. var mouseEvent = null;
  867. function setMouseEvent(evt)
  868. {
  869. mouseEvent = evt;
  870. // Workaround for member not found in IE8-
  871. if (mxClient.IS_QUIRKS || document.documentMode == 7 || document.documentMode == 8)
  872. {
  873. mouseEvent = mxUtils.clone(evt);
  874. }
  875. };
  876. mxEvent.addListener(this.container, 'mouseenter', setMouseEvent);
  877. mxEvent.addListener(this.container, 'mousemove', setMouseEvent);
  878. mxEvent.addListener(this.container, 'mouseleave', function(evt)
  879. {
  880. mouseEvent = null;
  881. });
  882. // Extends getInsertPoint to use the current mouse location
  883. this.isMouseInsertPoint = function()
  884. {
  885. return mouseEvent != null;
  886. };
  887. var getInsertPoint = this.getInsertPoint;
  888. this.getInsertPoint = function()
  889. {
  890. if (mouseEvent != null)
  891. {
  892. return this.getPointForEvent(mouseEvent);
  893. }
  894. return getInsertPoint.apply(this, arguments);
  895. };
  896. var layoutManagerGetLayout = this.layoutManager.getLayout;
  897. this.layoutManager.getLayout = function(cell)
  898. {
  899. var state = this.graph.view.getState(cell);
  900. var style = (state != null) ? state.style : this.graph.getCellStyle(cell);
  901. // mxRackContainer may be undefined as it is dynamically loaded at render time
  902. if (typeof(mxRackContainer) != 'undefined' && style['childLayout'] == 'rack')
  903. {
  904. var rackLayout = new mxStackLayout(this.graph, false);
  905. rackLayout.setChildGeometry = function(child, geo)
  906. {
  907. var unitSize = 20;
  908. geo.height = Math.max(geo.height, unitSize);
  909. if (geo.height / unitSize > 1)
  910. {
  911. var mod = geo.height % unitSize;
  912. geo.height += mod > unitSize / 2 ? (unitSize - mod) : -mod;
  913. }
  914. this.graph.getModel().setGeometry(child, geo);
  915. };
  916. rackLayout.fill = true;
  917. rackLayout.unitSize = mxRackContainer.unitSize | 20;
  918. rackLayout.marginLeft = style['marginLeft'] || 0;
  919. rackLayout.marginRight = style['marginRight'] || 0;
  920. rackLayout.marginTop = style['marginTop'] || 0;
  921. rackLayout.marginBottom = style['marginBottom'] || 0;
  922. rackLayout.resizeParent = false;
  923. return rackLayout;
  924. }
  925. return layoutManagerGetLayout.apply(this, arguments);
  926. }
  927. };
  928. /**
  929. * Sets default style (used in editor.get/setGraphXml below)
  930. */
  931. var graphLoadStylesheet = Graph.prototype.loadStylesheet;
  932. Graph.prototype.loadStylesheet = function()
  933. {
  934. graphLoadStylesheet.apply(this, arguments);
  935. this.currentStyle = 'default-style2';
  936. };
  937. /**
  938. * Adds a shadow filter to the given svg root.
  939. */
  940. Graph.prototype.addSvgShadow = function(svgRoot, group, createOnly)
  941. {
  942. createOnly = (createOnly != null) ? createOnly : false;
  943. var svgDoc = svgRoot.ownerDocument;
  944. var filter = (svgDoc.createElementNS != null) ?
  945. svgDoc.createElementNS(mxConstants.NS_SVG, 'filter') : svgDoc.createElement('filter');
  946. filter.setAttribute('id', this.shadowId);
  947. var blur = (svgDoc.createElementNS != null) ?
  948. svgDoc.createElementNS(mxConstants.NS_SVG, 'feGaussianBlur') : svgDoc.createElement('feGaussianBlur');
  949. blur.setAttribute('in', 'SourceAlpha');
  950. blur.setAttribute('stdDeviation', '1.7');
  951. blur.setAttribute('result', 'blur');
  952. filter.appendChild(blur);
  953. var offset = (svgDoc.createElementNS != null) ?
  954. svgDoc.createElementNS(mxConstants.NS_SVG, 'feOffset') : svgDoc.createElement('feOffset');
  955. offset.setAttribute('in', 'blur');
  956. offset.setAttribute('dx', '3');
  957. offset.setAttribute('dy', '3');
  958. offset.setAttribute('result', 'offsetBlur');
  959. filter.appendChild(offset);
  960. var flood = (svgDoc.createElementNS != null) ?
  961. svgDoc.createElementNS(mxConstants.NS_SVG, 'feFlood') : svgDoc.createElement('feFlood');
  962. flood.setAttribute('flood-color', '#3D4574');
  963. flood.setAttribute('flood-opacity', '0.4');
  964. flood.setAttribute('result', 'offsetColor');
  965. filter.appendChild(flood);
  966. var composite = (svgDoc.createElementNS != null) ?
  967. svgDoc.createElementNS(mxConstants.NS_SVG, 'feComposite') : svgDoc.createElement('feComposite');
  968. composite.setAttribute('in', 'offsetColor');
  969. composite.setAttribute('in2', 'offsetBlur');
  970. composite.setAttribute('operator', 'in');
  971. composite.setAttribute('result', 'offsetBlur');
  972. filter.appendChild(composite);
  973. var feBlend = (svgDoc.createElementNS != null) ?
  974. svgDoc.createElementNS(mxConstants.NS_SVG, 'feBlend') : svgDoc.createElement('feBlend');
  975. feBlend.setAttribute('in', 'SourceGraphic');
  976. feBlend.setAttribute('in2', 'offsetBlur');
  977. filter.appendChild(feBlend);
  978. // Creates defs element if not available
  979. var defs = svgRoot.getElementsByTagName('defs');
  980. var defsElt = null;
  981. if (defs.length == 0)
  982. {
  983. defsElt = (svgDoc.createElementNS != null) ?
  984. svgDoc.createElementNS(mxConstants.NS_SVG, 'defs') : svgDoc.createElement('defs');
  985. if (svgRoot.firstChild != null)
  986. {
  987. svgRoot.insertBefore(defsElt, svgRoot.firstChild);
  988. }
  989. else
  990. {
  991. svgRoot.appendChild(defsElt);
  992. }
  993. }
  994. else
  995. {
  996. defsElt = defs[0];
  997. }
  998. defsElt.appendChild(filter);
  999. if (!createOnly)
  1000. {
  1001. (group || svgRoot.getElementsByTagName('g')[0]).setAttribute('filter', 'url(#' + this.shadowId + ')');
  1002. if (!isNaN(parseInt(svgRoot.getAttribute('width'))))
  1003. {
  1004. svgRoot.setAttribute('width', parseInt(svgRoot.getAttribute('width')) + 6);
  1005. svgRoot.setAttribute('height', parseInt(svgRoot.getAttribute('height')) + 6);
  1006. }
  1007. }
  1008. return filter;
  1009. };
  1010. /**
  1011. * Loads the stylesheet for this graph.
  1012. */
  1013. Graph.prototype.setShadowVisible = function(value, fireEvent)
  1014. {
  1015. if (mxClient.IS_SVG)
  1016. {
  1017. fireEvent = (fireEvent != null) ? fireEvent : true;
  1018. this.shadowVisible = value;
  1019. if (this.shadowVisible)
  1020. {
  1021. this.view.getDrawPane().setAttribute('filter', 'url(#' + this.shadowId + ')');
  1022. }
  1023. else
  1024. {
  1025. this.view.getDrawPane().removeAttribute('filter');
  1026. }
  1027. if (fireEvent)
  1028. {
  1029. this.fireEvent(new mxEventObject('shadowVisibleChanged'));
  1030. }
  1031. }
  1032. };
  1033. /**
  1034. * Selects first unlocked layer if one exists
  1035. */
  1036. Graph.prototype.selectUnlockedLayer = function()
  1037. {
  1038. if (this.defaultParent == null)
  1039. {
  1040. var childCount = this.model.getChildCount(this.model.root);
  1041. var cell = null;
  1042. var index = 0;
  1043. do
  1044. {
  1045. cell = this.model.getChildAt(this.model.root, index);
  1046. } while (index++ < childCount && mxUtils.getValue(this.getCellStyle(cell), 'locked', '0') == '1')
  1047. if (cell != null)
  1048. {
  1049. this.setDefaultParent(cell);
  1050. }
  1051. }
  1052. };
  1053. /**
  1054. * Specifies special libraries that are loaded via dynamic JS. Add cases
  1055. * where the filename cannot be worked out from the package name. The
  1056. * standard scheme for this mapping is stencils/packagename.xml. If there
  1057. * are multiple XML files, any JS files or any anomalies in the filename or
  1058. * directory that contains the file, then an entry must be added here and
  1059. * in EmbedServlet2 for the loading of the shapes to work.
  1060. */
  1061. // Required to avoid 404 for mockup.xml since naming of mxgraph.mockup.anchor does not contain
  1062. // buttons even though it is defined in the mxMockupButtons.js file. This could only be fixed
  1063. // with aliases for existing shapes or aliases for basenames, but this is essentially the same.
  1064. mxStencilRegistry.libraries['mockup'] = [SHAPES_PATH + '/mockup/mxMockupButtons.js'];
  1065. mxStencilRegistry.libraries['arrows2'] = [SHAPES_PATH + '/mxArrows.js'];
  1066. mxStencilRegistry.libraries['bpmn'] = [SHAPES_PATH + '/bpmn/mxBpmnShape2.js', STENCIL_PATH + '/bpmn.xml'];
  1067. mxStencilRegistry.libraries['er'] = [SHAPES_PATH + '/er/mxER.js'];
  1068. mxStencilRegistry.libraries['ios'] = [SHAPES_PATH + '/mockup/mxMockupiOS.js'];
  1069. mxStencilRegistry.libraries['rackGeneral'] = [SHAPES_PATH + '/rack/mxRack.js', STENCIL_PATH + '/rack/general.xml'];
  1070. mxStencilRegistry.libraries['rackF5'] = [STENCIL_PATH + '/rack/f5.xml'];
  1071. mxStencilRegistry.libraries['lean_mapping'] = [SHAPES_PATH + '/mxLeanMap.js', STENCIL_PATH + '/lean_mapping.xml'];
  1072. mxStencilRegistry.libraries['basic'] = [SHAPES_PATH + '/mxBasic.js', STENCIL_PATH + '/basic.xml'];
  1073. mxStencilRegistry.libraries['ios7icons'] = [STENCIL_PATH + '/ios7/icons.xml'];
  1074. mxStencilRegistry.libraries['ios7ui'] = [SHAPES_PATH + '/ios7/mxIOS7Ui.js', STENCIL_PATH + '/ios7/misc.xml'];
  1075. mxStencilRegistry.libraries['android'] = [SHAPES_PATH + '/mxAndroid.js', STENCIL_PATH + '/android/android.xml'];
  1076. mxStencilRegistry.libraries['electrical/transmission'] = [SHAPES_PATH + '/mxElectrical.js', STENCIL_PATH + '/electrical/transmission.xml'];
  1077. mxStencilRegistry.libraries['mockup/buttons'] = [SHAPES_PATH + '/mockup/mxMockupButtons.js'];
  1078. mxStencilRegistry.libraries['mockup/containers'] = [SHAPES_PATH + '/mockup/mxMockupContainers.js'];
  1079. mxStencilRegistry.libraries['mockup/forms'] = [SHAPES_PATH + '/mockup/mxMockupForms.js'];
  1080. mxStencilRegistry.libraries['mockup/graphics'] = [SHAPES_PATH + '/mockup/mxMockupGraphics.js', STENCIL_PATH + '/mockup/misc.xml'];
  1081. mxStencilRegistry.libraries['mockup/markup'] = [SHAPES_PATH + '/mockup/mxMockupMarkup.js'];
  1082. mxStencilRegistry.libraries['mockup/misc'] = [SHAPES_PATH + '/mockup/mxMockupMisc.js', STENCIL_PATH + '/mockup/misc.xml'];
  1083. mxStencilRegistry.libraries['mockup/navigation'] = [SHAPES_PATH + '/mockup/mxMockupNavigation.js', STENCIL_PATH + '/mockup/misc.xml'];
  1084. mxStencilRegistry.libraries['mockup/text'] = [SHAPES_PATH + '/mockup/mxMockupText.js'];
  1085. mxStencilRegistry.libraries['floorplan'] = [SHAPES_PATH + '/mxFloorplan.js', STENCIL_PATH + '/floorplan.xml'];
  1086. mxStencilRegistry.libraries['bootstrap'] = [SHAPES_PATH + '/mxBootstrap.js', STENCIL_PATH + '/bootstrap.xml'];
  1087. mxStencilRegistry.libraries['gmdl'] = [SHAPES_PATH + '/mxGmdl.js', STENCIL_PATH + '/gmdl.xml'];
  1088. mxStencilRegistry.libraries['cabinets'] = [SHAPES_PATH + '/mxCabinets.js', STENCIL_PATH + '/cabinets.xml'];
  1089. mxStencilRegistry.libraries['archimate'] = [SHAPES_PATH + '/mxArchiMate.js'];
  1090. mxStencilRegistry.libraries['archimate3'] = [SHAPES_PATH + '/mxArchiMate3.js'];
  1091. mxStencilRegistry.libraries['sysml'] = [SHAPES_PATH + '/mxSysML.js'];
  1092. mxStencilRegistry.libraries['eip'] = [SHAPES_PATH + '/mxEip.js', STENCIL_PATH + '/eip.xml'];
  1093. mxStencilRegistry.libraries['networks'] = [SHAPES_PATH + '/mxNetworks.js', STENCIL_PATH + '/networks.xml'];
  1094. mxStencilRegistry.libraries['aws3d'] = [SHAPES_PATH + '/mxAWS3D.js', STENCIL_PATH + '/aws3d.xml'];
  1095. mxStencilRegistry.libraries['pid2inst'] = [SHAPES_PATH + '/pid2/mxPidInstruments.js'];
  1096. mxStencilRegistry.libraries['pid2misc'] = [SHAPES_PATH + '/pid2/mxPidMisc.js', STENCIL_PATH + '/pid/misc.xml'];
  1097. mxStencilRegistry.libraries['pid2valves'] = [SHAPES_PATH + '/pid2/mxPidValves.js'];
  1098. mxStencilRegistry.libraries['pidFlowSensors'] = [STENCIL_PATH + '/pid/flow_sensors.xml'];
  1099. // Triggers dynamic loading for markers
  1100. mxMarker.getPackageForType = function(type)
  1101. {
  1102. var name = null;
  1103. if (type != null && type.length > 0)
  1104. {
  1105. if (type.substring(0, 2) == 'ER')
  1106. {
  1107. name = 'mxgraph.er';
  1108. }
  1109. else if (type.substring(0, 5) == 'sysML')
  1110. {
  1111. name = 'mxgraph.sysml';
  1112. }
  1113. }
  1114. return name;
  1115. };
  1116. var mxMarkerCreateMarker = mxMarker.createMarker;
  1117. mxMarker.createMarker = function(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1118. {
  1119. if (type != null)
  1120. {
  1121. var f = mxMarker.markers[type];
  1122. if (f == null)
  1123. {
  1124. var name = this.getPackageForType(type);
  1125. if (name != null)
  1126. {
  1127. mxStencilRegistry.getStencil(name);
  1128. }
  1129. }
  1130. }
  1131. return mxMarkerCreateMarker.apply(this, arguments);
  1132. };
  1133. /**
  1134. * Constructs a new print dialog.
  1135. */
  1136. PrintDialog.prototype.create = function(editorUi, titleText)
  1137. {
  1138. var graph = editorUi.editor.graph;
  1139. var div = document.createElement('div');
  1140. var title = document.createElement('h3');
  1141. title.style.width = '100%';
  1142. title.style.textAlign = 'center';
  1143. title.style.marginTop = '0px';
  1144. mxUtils.write(title, titleText || mxResources.get('print'));
  1145. div.appendChild(title);
  1146. var pageCount = 1;
  1147. var currentPage = 1;
  1148. // Pages
  1149. var pagesSection = document.createElement('div');
  1150. pagesSection.style.cssText = 'border-bottom:1px solid lightGray;padding-bottom:12px;margin-bottom:12px;';
  1151. var allPagesRadio = document.createElement('input');
  1152. allPagesRadio.style.cssText = 'margin-right:8px;margin-bottom:8px;';
  1153. allPagesRadio.setAttribute('value', 'all');
  1154. allPagesRadio.setAttribute('type', 'radio');
  1155. allPagesRadio.setAttribute('name', 'pages-printdialog');
  1156. pagesSection.appendChild(allPagesRadio);
  1157. var span = document.createElement('span');
  1158. mxUtils.write(span, mxResources.get('printAllPages'));
  1159. pagesSection.appendChild(span);
  1160. mxUtils.br(pagesSection);
  1161. // Pages ... to ...
  1162. var pagesRadio = allPagesRadio.cloneNode(true);
  1163. allPagesRadio.setAttribute('checked', 'checked');
  1164. pagesRadio.setAttribute('value', 'range');
  1165. pagesSection.appendChild(pagesRadio);
  1166. var span = document.createElement('span');
  1167. mxUtils.write(span, mxResources.get('pages') + ':');
  1168. pagesSection.appendChild(span);
  1169. var pagesFromInput = document.createElement('input');
  1170. pagesFromInput.style.cssText = 'margin:0 8px 0 8px;'
  1171. pagesFromInput.setAttribute('value', '1');
  1172. pagesFromInput.setAttribute('type', 'number');
  1173. pagesFromInput.setAttribute('min', '1');
  1174. pagesFromInput.style.width = '50px';
  1175. pagesSection.appendChild(pagesFromInput);
  1176. var span = document.createElement('span');
  1177. mxUtils.write(span, mxResources.get('to'));
  1178. pagesSection.appendChild(span);
  1179. var pagesToInput = pagesFromInput.cloneNode(true);
  1180. pagesSection.appendChild(pagesToInput);
  1181. mxEvent.addListener(pagesFromInput, 'focus', function()
  1182. {
  1183. pagesRadio.checked = true;
  1184. });
  1185. mxEvent.addListener(pagesToInput, 'focus', function()
  1186. {
  1187. pagesRadio.checked = true;
  1188. });
  1189. function validatePageRange()
  1190. {
  1191. pagesToInput.value = Math.max(1, Math.min(pageCount, Math.max(parseInt(pagesToInput.value), parseInt(pagesFromInput.value))));
  1192. pagesFromInput.value = Math.max(1, Math.min(pageCount, Math.min(parseInt(pagesToInput.value), parseInt(pagesFromInput.value))));
  1193. };
  1194. mxEvent.addListener(pagesFromInput, 'change', validatePageRange);
  1195. mxEvent.addListener(pagesToInput, 'change', validatePageRange);
  1196. if (editorUi.pages != null)
  1197. {
  1198. pageCount = editorUi.pages.length;
  1199. if (editorUi.currentPage != null)
  1200. {
  1201. for (var i = 0; i < editorUi.pages.length; i++)
  1202. {
  1203. if (editorUi.currentPage == editorUi.pages[i])
  1204. {
  1205. currentPage = i + 1;
  1206. pagesFromInput.value = currentPage;
  1207. pagesToInput.value = currentPage;
  1208. break;
  1209. }
  1210. }
  1211. }
  1212. }
  1213. pagesFromInput.setAttribute('max', pageCount);
  1214. pagesToInput.setAttribute('max', pageCount);
  1215. if (pageCount > 1)
  1216. {
  1217. div.appendChild(pagesSection);
  1218. }
  1219. // Adjust to ...
  1220. var adjustSection = document.createElement('div');
  1221. adjustSection.style.marginBottom = '10px';
  1222. var adjustRadio = document.createElement('input');
  1223. adjustRadio.style.marginRight = '8px';
  1224. adjustRadio.setAttribute('value', 'adjust');
  1225. adjustRadio.setAttribute('type', 'radio');
  1226. adjustRadio.setAttribute('name', 'printZoom');
  1227. adjustSection.appendChild(adjustRadio);
  1228. var span = document.createElement('span');
  1229. mxUtils.write(span, mxResources.get('adjustTo'));
  1230. adjustSection.appendChild(span);
  1231. var zoomInput = document.createElement('input');
  1232. zoomInput.style.cssText = 'margin:0 8px 0 8px;';
  1233. zoomInput.setAttribute('value', '100 %');
  1234. zoomInput.style.width = '50px';
  1235. adjustSection.appendChild(zoomInput);
  1236. mxEvent.addListener(zoomInput, 'focus', function()
  1237. {
  1238. adjustRadio.checked = true;
  1239. });
  1240. div.appendChild(adjustSection);
  1241. // Fit to ...
  1242. var fitSection = pagesSection.cloneNode(false);
  1243. var fitRadio = adjustRadio.cloneNode(true);
  1244. fitRadio.setAttribute('value', 'fit');
  1245. adjustRadio.setAttribute('checked', 'checked');
  1246. var spanFitRadio = document.createElement('div');
  1247. spanFitRadio.style.cssText = 'display:inline-block;height:100%;vertical-align:top;padding-top:2px;';
  1248. spanFitRadio.appendChild(fitRadio);
  1249. fitSection.appendChild(spanFitRadio);
  1250. var table = document.createElement('table');
  1251. table.style.display = 'inline-block';
  1252. var tbody = document.createElement('tbody');
  1253. var row1 = document.createElement('tr');
  1254. var row2 = row1.cloneNode(true);
  1255. var td1 = document.createElement('td');
  1256. var td2 = td1.cloneNode(true);
  1257. var td3 = td1.cloneNode(true);
  1258. var td4 = td1.cloneNode(true);
  1259. var td5 = td1.cloneNode(true);
  1260. var td6 = td1.cloneNode(true);
  1261. td1.style.textAlign = 'right';
  1262. td4.style.textAlign = 'right';
  1263. mxUtils.write(td1, mxResources.get('fitTo'));
  1264. var sheetsAcrossInput = document.createElement('input');
  1265. sheetsAcrossInput.style.cssText = 'margin:0 8px 0 8px;';
  1266. sheetsAcrossInput.setAttribute('value', '1');
  1267. sheetsAcrossInput.setAttribute('min', '1');
  1268. sheetsAcrossInput.setAttribute('type', 'number');
  1269. sheetsAcrossInput.style.width = '40px';
  1270. td2.appendChild(sheetsAcrossInput);
  1271. var span = document.createElement('span');
  1272. mxUtils.write(span, mxResources.get('fitToSheetsAcross'));
  1273. td3.appendChild(span);
  1274. mxUtils.write(td4, mxResources.get('fitToBy'));
  1275. var sheetsDownInput = sheetsAcrossInput.cloneNode(true);
  1276. td5.appendChild(sheetsDownInput);
  1277. mxEvent.addListener(sheetsAcrossInput, 'focus', function()
  1278. {
  1279. fitRadio.checked = true;
  1280. });
  1281. mxEvent.addListener(sheetsDownInput, 'focus', function()
  1282. {
  1283. fitRadio.checked = true;
  1284. });
  1285. var span = document.createElement('span');
  1286. mxUtils.write(span, mxResources.get('fitToSheetsDown'));
  1287. td6.appendChild(span);
  1288. row1.appendChild(td1);
  1289. row1.appendChild(td2);
  1290. row1.appendChild(td3);
  1291. row2.appendChild(td4);
  1292. row2.appendChild(td5);
  1293. row2.appendChild(td6);
  1294. tbody.appendChild(row1);
  1295. tbody.appendChild(row2);
  1296. table.appendChild(tbody);
  1297. fitSection.appendChild(table);
  1298. div.appendChild(fitSection);
  1299. // Page scale ...
  1300. var pageScaleSection = document.createElement('div');
  1301. var span = document.createElement('div');
  1302. span.style.fontWeight = 'bold';
  1303. span.style.marginBottom = '12px';
  1304. mxUtils.write(span, mxResources.get('paperSize'));
  1305. pageScaleSection.appendChild(span);
  1306. var span = document.createElement('div');
  1307. span.style.marginBottom = '12px';
  1308. var accessor = PageSetupDialog.addPageFormatPanel(span, 'printdialog',
  1309. editorUi.editor.graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT);
  1310. pageScaleSection.appendChild(span);
  1311. var span = document.createElement('span');
  1312. mxUtils.write(span, mxResources.get('pageScale'));
  1313. pageScaleSection.appendChild(span);
  1314. var pageScaleInput = document.createElement('input');
  1315. pageScaleInput.style.cssText = 'margin:0 8px 0 8px;';
  1316. pageScaleInput.setAttribute('value', '100 %');
  1317. pageScaleInput.style.width = '60px';
  1318. pageScaleSection.appendChild(pageScaleInput);
  1319. div.appendChild(pageScaleSection);
  1320. // Buttons
  1321. var buttons = document.createElement('div');
  1322. buttons.style.cssText = 'text-align:right;margin:62px 0 0 0;';
  1323. // Overall scale for print-out to account for print borders in dialogs etc
  1324. function preview(print)
  1325. {
  1326. var printScale = parseInt(pageScaleInput.value) / 100;
  1327. if (isNaN(printScale))
  1328. {
  1329. printScale = 1;
  1330. pageScaleInput.value = '100 %';
  1331. }
  1332. // Workaround to match available paper size in actual print output
  1333. printScale *= 0.75;
  1334. function printGraph(thisGraph, pv, forcePageBreaks)
  1335. {
  1336. // Negative coordinates are cropped or shifted if page visible
  1337. var gb = thisGraph.getGraphBounds();
  1338. var border = 0;
  1339. var x0 = 0;
  1340. var y0 = 0;
  1341. var pf = accessor.get();
  1342. var scale = 1 / thisGraph.pageScale;
  1343. var autoOrigin = fitRadio.checked;
  1344. if (autoOrigin)
  1345. {
  1346. var h = parseInt(sheetsAcrossInput.value);
  1347. var v = parseInt(sheetsDownInput.value);
  1348. scale = Math.min((pf.height * v) / (gb.height / thisGraph.view.scale),
  1349. (pf.width * h) / (gb.width / thisGraph.view.scale));
  1350. }
  1351. else
  1352. {
  1353. scale = parseInt(zoomInput.value) / (100 * thisGraph.pageScale);
  1354. if (isNaN(scale))
  1355. {
  1356. printScale = 1 / thisGraph.pageScale;
  1357. zoomInput.value = '100 %';
  1358. }
  1359. }
  1360. // Applies print scale
  1361. pf = mxRectangle.fromRectangle(pf);
  1362. pf.width = Math.ceil(pf.width * printScale);
  1363. pf.height = Math.ceil(pf.height * printScale);
  1364. scale *= printScale;
  1365. // Starts at first visible page
  1366. if (!autoOrigin && thisGraph.pageVisible)
  1367. {
  1368. var layout = thisGraph.getPageLayout();
  1369. x0 -= layout.x * pf.width;
  1370. y0 -= layout.y * pf.height;
  1371. }
  1372. else
  1373. {
  1374. autoOrigin = true;
  1375. }
  1376. if (pv == null)
  1377. {
  1378. pv = PrintDialog.createPrintPreview(thisGraph, scale, pf, border, x0, y0, autoOrigin);
  1379. pv.pageSelector = false;
  1380. pv.mathEnabled = false;
  1381. if (typeof(MathJax) !== 'undefined')
  1382. {
  1383. // Adds class to ignore if math is disabled
  1384. var printPreviewRenderPage = pv.renderPage;
  1385. pv.renderPage = function(w, h, dx, dy, content, pageNumber)
  1386. {
  1387. var result = printPreviewRenderPage.apply(this, arguments);
  1388. if (this.graph.mathEnabled)
  1389. {
  1390. this.mathEnabled = true;
  1391. }
  1392. else
  1393. {
  1394. result.className = 'geDisableMathJax';
  1395. }
  1396. return result;
  1397. };
  1398. }
  1399. pv.open(null, null, forcePageBreaks, true);
  1400. }
  1401. else
  1402. {
  1403. var bg = thisGraph.background;
  1404. if (bg == null || bg == '' || bg == mxConstants.NONE)
  1405. {
  1406. bg = '#ffffff';
  1407. }
  1408. pv.backgroundColor = bg;
  1409. pv.autoOrigin = autoOrigin;
  1410. pv.appendGraph(thisGraph, scale, x0, y0, forcePageBreaks, true);
  1411. }
  1412. return pv;
  1413. };
  1414. var pagesFrom = pagesFromInput.value;
  1415. var pagesTo = pagesToInput.value;
  1416. var ignorePages = !allPagesRadio.checked;
  1417. var pv = null;
  1418. if (ignorePages)
  1419. {
  1420. ignorePages = pagesFrom == currentPage && pagesTo == currentPage;
  1421. }
  1422. if (!ignorePages && editorUi.pages != null && editorUi.pages.length)
  1423. {
  1424. var i0 = 0;
  1425. var imax = editorUi.pages.length - 1;
  1426. if (!allPagesRadio.checked)
  1427. {
  1428. i0 = parseInt(pagesFrom) - 1;
  1429. imax = parseInt(pagesTo) - 1;
  1430. }
  1431. for (var i = i0; i <= imax; i++)
  1432. {
  1433. var page = editorUi.pages[i];
  1434. var tempGraph = (page == editorUi.currentPage) ? graph : null;
  1435. if (tempGraph == null)
  1436. {
  1437. tempGraph = editorUi.createTemporaryGraph(graph.getStylesheet());
  1438. // Restores graph settings that are relevant for printing
  1439. var pageVisible = true;
  1440. var mathEnabled = false;
  1441. var bg = null;
  1442. var bgImage = null;
  1443. if (page.viewState == null && page.mapping == null)
  1444. {
  1445. // Workaround to extract view state from XML node
  1446. // This changes the state of the page and parses
  1447. // the XML for the graph model even if not needed.
  1448. if (page.root == null)
  1449. {
  1450. editorUi.updatePageRoot(page);
  1451. }
  1452. }
  1453. if (page.viewState != null)
  1454. {
  1455. pageVisible = page.viewState.pageVisible;
  1456. mathEnabled = page.viewState.mathEnabled;
  1457. bg = page.viewState.background;
  1458. bgImage = page.viewState.backgroundImage;
  1459. }
  1460. else if (page.mapping != null && page.mapping.diagramMap != null)
  1461. {
  1462. // Default pageVisible in realtime is true
  1463. mathEnabled = page.mapping.diagramMap.get('mathEnabled') != '0';
  1464. bg = page.mapping.diagramMap.get('background');
  1465. var temp = page.mapping.diagramMap.get('backgroundImage');
  1466. bgImage = (temp != null && temp.length > 0) ? JSON.parse(temp) : null;
  1467. }
  1468. tempGraph.background = bg;
  1469. tempGraph.backgroundImage = (bgImage != null) ? new mxImage(bgImage.src, bgImage.width, bgImage.height) : null;
  1470. tempGraph.pageVisible = pageVisible;
  1471. tempGraph.mathEnabled = mathEnabled;
  1472. // Redirects placeholders to current page
  1473. var graphGetGlobalVariable = tempGraph.getGlobalVariable;
  1474. tempGraph.getGlobalVariable = function(name)
  1475. {
  1476. if (name == 'page')
  1477. {
  1478. return page.getName();
  1479. }
  1480. else if (name == 'pagenumber')
  1481. {
  1482. return i + 1;
  1483. }
  1484. return graphGetGlobalVariable.apply(this, arguments);
  1485. };
  1486. document.body.appendChild(tempGraph.container);
  1487. editorUi.updatePageRoot(page);
  1488. tempGraph.model.setRoot(page.root);
  1489. }
  1490. pv = printGraph(tempGraph, pv, i != imax);
  1491. if (tempGraph != graph)
  1492. {
  1493. tempGraph.container.parentNode.removeChild(tempGraph.container);
  1494. }
  1495. }
  1496. }
  1497. else
  1498. {
  1499. pv = printGraph(graph);
  1500. }
  1501. if (pv.mathEnabled)
  1502. {
  1503. var doc = pv.wnd.document;
  1504. doc.writeln('<script type="text/x-mathjax-config">');
  1505. doc.writeln('MathJax.Hub.Config({');
  1506. doc.writeln('messageStyle: "none",');
  1507. doc.writeln('jax: ["input/TeX", "input/MathML", "input/AsciiMath", "output/HTML-CSS"],');
  1508. doc.writeln('extensions: ["tex2jax.js", "mml2jax.js", "asciimath2jax.js"],');
  1509. doc.writeln('TeX: {');
  1510. doc.writeln('extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"]');
  1511. doc.writeln('},');
  1512. // Ignores math in in-place editor
  1513. doc.writeln('tex2jax: {');
  1514. doc.writeln(' ignoreClass: "geDisableMathJax"');
  1515. doc.writeln('},');
  1516. doc.writeln('asciimath2jax: {');
  1517. doc.writeln(' ignoreClass: "geDisableMathJax"');
  1518. doc.writeln('}');
  1519. doc.writeln('});');
  1520. // Adds asynchronous printing when MathJax finished rendering
  1521. if (print)
  1522. {
  1523. doc.writeln('MathJax.Hub.Queue(function () {');
  1524. doc.writeln('window.print();');
  1525. doc.writeln('});');
  1526. }
  1527. doc.writeln('</script>');
  1528. doc.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>');
  1529. }
  1530. pv.closeDocument();
  1531. if (!pv.mathEnabled && print)
  1532. {
  1533. PrintDialog.printPreview(pv);
  1534. }
  1535. };
  1536. var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
  1537. {
  1538. editorUi.hideDialog();
  1539. });
  1540. cancelBtn.className = 'geBtn';
  1541. if (editorUi.editor.cancelFirst)
  1542. {
  1543. buttons.appendChild(cancelBtn);
  1544. }
  1545. if (!editorUi.isOffline())
  1546. {
  1547. var helpBtn = mxUtils.button(mxResources.get('help'), function()
  1548. {
  1549. window.open('https://desk.draw.io/support/solutions/articles/16000048947');
  1550. });
  1551. helpBtn.className = 'geBtn';
  1552. buttons.appendChild(helpBtn);
  1553. }
  1554. if (PrintDialog.previewEnabled)
  1555. {
  1556. var previewBtn = mxUtils.button(mxResources.get('preview'), function()
  1557. {
  1558. editorUi.hideDialog();
  1559. preview(false);
  1560. });
  1561. previewBtn.className = 'geBtn';
  1562. buttons.appendChild(previewBtn);
  1563. }
  1564. var printBtn = mxUtils.button(mxResources.get((!PrintDialog.previewEnabled) ? 'ok' : 'print'), function()
  1565. {
  1566. editorUi.hideDialog();
  1567. preview(true);
  1568. });
  1569. printBtn.className = 'geBtn gePrimaryBtn';
  1570. buttons.appendChild(printBtn);
  1571. if (!editorUi.editor.cancelFirst)
  1572. {
  1573. buttons.appendChild(cancelBtn);
  1574. }
  1575. div.appendChild(buttons);
  1576. this.container = div;
  1577. };
  1578. })();