Editor.js 62 KB

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