Editor.js 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254
  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. * Contains the default XML for an empty diagram.
  33. */
  34. Editor.defaultCsvValue = '##\n' +
  35. '## Example CSV import. Use ## for comments and # for configuration. Paste CSV below.\n' +
  36. '## The following names are reserved and should not be used (or ignored):\n' +
  37. '## id, tooltip, placeholder(s), link and label (see below)\n' +
  38. '##\n' +
  39. '#\n' +
  40. '## Node label with placeholders and HTML.\n' +
  41. '## Default is \'%name_of_first_column%\'.\n' +
  42. '#\n' +
  43. '# label: %name%<br><i style="color:gray;">%position%</i><br><a href="mailto:%email%">Email</a>\n' +
  44. '#\n' +
  45. '## Node style (placeholders are replaced once).\n' +
  46. '## Default is the current style for nodes.\n' +
  47. '#\n' +
  48. '# style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;\n' +
  49. '#\n' +
  50. '## Connections between rows ("from": source colum, "to": target column).\n' +
  51. '## Label, style and invert are optional. Defaults are \'\', current style and false.\n' +
  52. '## The target column may contain a comma-separated list of values.\n' +
  53. '## Multiple connect entries are allowed.\n' +
  54. '#\n' +
  55. '# connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", \\\n' +
  56. '# "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}\n' +
  57. '# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}\n' +
  58. '#\n' +
  59. '## Node width. Possible value are px or auto. Default is auto.\n' +
  60. '#\n' +
  61. '# width: auto\n' +
  62. '#\n' +
  63. '## Node height. Possible value are px or auto. Default is auto.\n' +
  64. '#\n' +
  65. '# height: auto\n' +
  66. '#\n' +
  67. '## Padding for autosize. Default is 0.\n' +
  68. '#\n' +
  69. '# padding: -26\n' +
  70. '#\n' +
  71. '## Comma-separated list of ignored columns for metadata. (These can be\n' +
  72. '## used for connections and styles but will not be added as metadata.)\n' +
  73. '#\n' +
  74. '# ignore: id,image,fill,stroke\n' +
  75. '#\n' +
  76. '## Column to be renamed to link attribute (used as link).\n' +
  77. '#\n' +
  78. '# link: url\n' +
  79. '#\n' +
  80. '## Spacing between nodes. Default is 40.\n' +
  81. '#\n' +
  82. '# nodespacing: 40\n' +
  83. '#\n' +
  84. '## Spacing between parallel edges. Default is 40.\n' +
  85. '#\n' +
  86. '# edgespacing: 40\n' +
  87. '#\n' +
  88. '## Name of layout. Possible values are auto, none, verticaltree, horizontaltree,\n' +
  89. '## verticalflow, horizontalflow, organic, circle. Default is auto.\n' +
  90. '#\n' +
  91. '# layout: auto\n' +
  92. '#\n' +
  93. '## ---- CSV below this line. First line are column names. ----\n' +
  94. 'name,position,id,location,manager,email,fill,stroke,refs,url,image\n' +
  95. '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' +
  96. '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' +
  97. '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' +
  98. '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';
  99. /**
  100. * Executes the first step for connecting to Google Drive.
  101. */
  102. Editor.prototype.editButtonLink = (urlParams['edit'] != null) ? decodeURIComponent(urlParams['edit']) : null;
  103. /**
  104. *
  105. */
  106. if (urlParams['dev'] == '1')
  107. {
  108. Editor.prototype.editBlankUrl = Editor.prototype.editBlankUrl + '&dev=1';
  109. Editor.prototype.editBlankFallbackUrl = Editor.prototype.editBlankFallbackUrl + '&dev=1';
  110. }
  111. /**
  112. * Adds support for old stylesheets and compressed files
  113. */
  114. var editorSetGraphXml = Editor.prototype.setGraphXml;
  115. Editor.prototype.setGraphXml = function(node)
  116. {
  117. node = (node != null && node.nodeName != 'mxlibrary') ? this.extractGraphModel(node) : null;
  118. if (node != null)
  119. {
  120. // Checks input for parser errors
  121. var errs = node.getElementsByTagName('parsererror');
  122. if (errs != null && errs.length > 0)
  123. {
  124. var elt = errs[0];
  125. var divs = elt.getElementsByTagName('div');
  126. if (divs != null && divs.length > 0)
  127. {
  128. elt = divs[0];
  129. }
  130. throw {message: mxUtils.getTextContent(elt)};
  131. }
  132. else if (node.nodeName == 'mxGraphModel')
  133. {
  134. var style = node.getAttribute('style') || 'default-style2';
  135. // Decodes the style if required
  136. if (urlParams['embed'] != '1' && (style == null || style == ''))
  137. {
  138. var node2 = (this.graph.themes != null) ?
  139. this.graph.themes['default-old'] :
  140. mxUtils.load(STYLE_PATH + '/default-old.xml').getDocumentElement();
  141. if (node2 != null)
  142. {
  143. var dec2 = new mxCodec(node2.ownerDocument);
  144. dec2.decode(node2, this.graph.getStylesheet());
  145. }
  146. }
  147. else if (style != this.graph.currentStyle)
  148. {
  149. var node2 = (this.graph.themes != null) ?
  150. this.graph.themes[style] :
  151. mxUtils.load(STYLE_PATH + '/' + style + '.xml').getDocumentElement()
  152. if (node2 != null)
  153. {
  154. var dec2 = new mxCodec(node2.ownerDocument);
  155. dec2.decode(node2, this.graph.getStylesheet());
  156. }
  157. }
  158. this.graph.currentStyle = style;
  159. this.graph.mathEnabled = (urlParams['math'] == '1' || node.getAttribute('math') == '1');
  160. var bgImg = node.getAttribute('backgroundImage');
  161. if (bgImg != null)
  162. {
  163. bgImg = JSON.parse(bgImg);
  164. this.graph.setBackgroundImage(new mxImage(bgImg.src, bgImg.width, bgImg.height));
  165. }
  166. else
  167. {
  168. this.graph.setBackgroundImage(null);
  169. }
  170. mxClient.NO_FO = (this.graph.mathEnabled) ? true : this.originalNoForeignObject;
  171. this.graph.setShadowVisible(node.getAttribute('shadow') == '1', false);
  172. }
  173. // Calls updateGraphComponents
  174. editorSetGraphXml.apply(this, arguments);
  175. }
  176. else
  177. {
  178. throw {
  179. message: mxResources.get('notADiagramFile') || 'Invalid data',
  180. toString: function() { return this.message; }
  181. };
  182. }
  183. };
  184. /**
  185. * Adds persistent style to file
  186. */
  187. var editorGetGraphXml = Editor.prototype.getGraphXml;
  188. Editor.prototype.getGraphXml = function(ignoreSelection)
  189. {
  190. ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true;
  191. var node = editorGetGraphXml.apply(this, arguments);
  192. // Adds the current style
  193. if (this.graph.currentStyle != null && this.graph.currentStyle != 'default-style2')
  194. {
  195. node.setAttribute('style', this.graph.currentStyle);
  196. }
  197. // Adds the background image
  198. if (this.graph.backgroundImage != null)
  199. {
  200. node.setAttribute('backgroundImage', JSON.stringify(this.graph.backgroundImage));
  201. }
  202. node.setAttribute('math', (this.graph.mathEnabled) ? '1' : '0');
  203. node.setAttribute('shadow', (this.graph.shadowVisible) ? '1' : '0');
  204. return node;
  205. };
  206. /**
  207. * Helper function to extract the graph model XML node.
  208. */
  209. Editor.prototype.extractGraphModel = function(node, allowMxFile)
  210. {
  211. if (node != null && typeof(pako) !== 'undefined')
  212. {
  213. var tmp = node.ownerDocument.getElementsByTagName('div');
  214. var divs = [];
  215. if (tmp != null && tmp.length > 0)
  216. {
  217. for (var i = 0; i < tmp.length; i++)
  218. {
  219. if (tmp[i].getAttribute('class') == 'mxgraph')
  220. {
  221. divs.push(tmp[i]);
  222. break;
  223. }
  224. }
  225. }
  226. if (divs.length > 0)
  227. {
  228. var data = divs[0].getAttribute('data-mxgraph');
  229. if (data != null)
  230. {
  231. var config = JSON.parse(data);
  232. if (config != null && config.xml != null)
  233. {
  234. var doc2 = mxUtils.parseXml(config.xml);
  235. node = doc2.documentElement;
  236. }
  237. }
  238. else
  239. {
  240. var divs2 = divs[0].getElementsByTagName('div');
  241. if (divs2.length > 0)
  242. {
  243. var data = mxUtils.getTextContent(divs2[0]);
  244. data = this.graph.decompress(data);
  245. if (data.length > 0)
  246. {
  247. var doc2 = mxUtils.parseXml(data);
  248. node = doc2.documentElement;
  249. }
  250. }
  251. }
  252. }
  253. }
  254. if (node != null && node.nodeName == 'svg')
  255. {
  256. var tmp = node.getAttribute('content');
  257. if (tmp != null && tmp.charAt(0) != '<' && tmp.charAt(0) != '%')
  258. {
  259. tmp = unescape((window.atob) ? atob(tmp) : Base64.decode(cont, tmp));
  260. }
  261. if (tmp != null && tmp.charAt(0) == '%')
  262. {
  263. tmp = decodeURIComponent(tmp);
  264. }
  265. if (tmp != null && tmp.length > 0)
  266. {
  267. node = mxUtils.parseXml(tmp).documentElement;
  268. }
  269. else
  270. {
  271. throw {message: mxResources.get('notADiagramFile')};
  272. }
  273. }
  274. if (node != null && !allowMxFile)
  275. {
  276. var diagramNode = null;
  277. if (node.nodeName == 'diagram')
  278. {
  279. diagramNode = node;
  280. }
  281. else if (node.nodeName == 'mxfile')
  282. {
  283. var diagrams = node.getElementsByTagName('diagram');
  284. if (diagrams.length > 0)
  285. {
  286. diagramNode = diagrams[Math.max(0, Math.min(diagrams.length - 1, urlParams['page'] || 0))];
  287. }
  288. }
  289. if (diagramNode != null)
  290. {
  291. var tmp = this.graph.decompress(mxUtils.getTextContent(diagramNode));
  292. if (tmp != null && tmp.length > 0)
  293. {
  294. node = mxUtils.parseXml(tmp).documentElement;
  295. }
  296. }
  297. }
  298. if (node != null && node.nodeName != 'mxGraphModel' && (!allowMxFile || node.nodeName != 'mxfile'))
  299. {
  300. node = null;
  301. }
  302. return node;
  303. };
  304. /**
  305. * Overrides reset graph.
  306. */
  307. var editorResetGraph = Editor.prototype.resetGraph;
  308. Editor.prototype.resetGraph = function()
  309. {
  310. this.graph.mathEnabled = (urlParams['math'] == '1');
  311. this.graph.view.x0 = null;
  312. this.graph.view.y0 = null;
  313. mxClient.NO_FO = (this.graph.mathEnabled) ? true : this.originalNoForeignObject;
  314. editorResetGraph.apply(this, arguments);
  315. };
  316. /**
  317. * Math support.
  318. */
  319. Editor.prototype.originalNoForeignObject = mxClient.NO_FO;
  320. var editorUpdateGraphComponents = Editor.prototype.updateGraphComponents;
  321. Editor.prototype.updateGraphComponents = function()
  322. {
  323. editorUpdateGraphComponents.apply(this, arguments);
  324. mxClient.NO_FO = (this.graph.mathEnabled && Editor.MathJaxRender != null) ? true : this.originalNoForeignObject;
  325. };
  326. /**
  327. * Initializes math typesetting and loads respective code.
  328. */
  329. Editor.initMath = function(src, config)
  330. {
  331. src = (src != null) ? src : 'https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML';
  332. Editor.mathJaxQueue = [];
  333. Editor.doMathJaxRender = function(container)
  334. {
  335. MathJax.Hub.Queue(['Typeset', MathJax.Hub, container]);
  336. };
  337. // Disables global typesetting and messages on startup, adds queue for
  338. // asynchronous rendering while MathJax is loading
  339. window.MathJax =
  340. {
  341. skipStartupTypeset: true,
  342. showMathMenu: false,
  343. messageStyle: 'none',
  344. AuthorInit: function ()
  345. {
  346. // Specification recommends using SVG over HTML-CSS if browser is known
  347. // Check if too inconsistent with image export and print output
  348. MathJax.Hub.Config(config || {
  349. jax: ['input/TeX', 'input/MathML', 'input/AsciiMath', 'output/HTML-CSS'],
  350. extensions: ['tex2jax.js', 'mml2jax.js', 'asciimath2jax.js'],
  351. TeX: {
  352. extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
  353. },
  354. // Ignores math in in-place editor
  355. tex2jax: {
  356. ignoreClass: 'mxCellEditor'
  357. },
  358. asciimath2jax: {
  359. ignoreClass: 'mxCellEditor'
  360. }
  361. });
  362. MathJax.Hub.Register.StartupHook('Begin', function()
  363. {
  364. for (var i = 0; i < Editor.mathJaxQueue.length; i++)
  365. {
  366. Editor.doMathJaxRender(Editor.mathJaxQueue[i]);
  367. }
  368. });
  369. }
  370. };
  371. // Adds global enqueue method for async rendering
  372. Editor.MathJaxRender = function(container)
  373. {
  374. // Initial rendering when MathJax finished loading
  375. if (typeof(MathJax) !== 'undefined' && typeof(MathJax.Hub) !== 'undefined')
  376. {
  377. Editor.doMathJaxRender(container);
  378. }
  379. else
  380. {
  381. Editor.mathJaxQueue.push(container);
  382. }
  383. };
  384. // Adds global clear queue method
  385. Editor.MathJaxClear = function()
  386. {
  387. Editor.mathJaxQueue = [];
  388. };
  389. // Updates typeset after changes
  390. var editorInit = Editor.prototype.init;
  391. Editor.prototype.init = function()
  392. {
  393. this.graph.addListener(mxEvent.SIZE, mxUtils.bind(this, function(sender, evt)
  394. {
  395. if (this.graph.mathEnabled)
  396. {
  397. Editor.MathJaxRender(this.graph.container);
  398. }
  399. }));
  400. };
  401. var tags = document.getElementsByTagName('script');
  402. if (tags != null && tags.length > 0)
  403. {
  404. var script = document.createElement('script');
  405. script.type = 'text/javascript';
  406. script.src = src;
  407. tags[0].parentNode.appendChild(script);
  408. }
  409. };
  410. /**
  411. * Adds a shadow filter to the given svg root.
  412. */
  413. Editor.prototype.addSvgShadow = function(svgRoot, group, createOnly)
  414. {
  415. createOnly = (createOnly != null) ? createOnly : false;
  416. var svgDoc = svgRoot.ownerDocument;
  417. var filter = (svgDoc.createElementNS != null) ?
  418. svgDoc.createElementNS(mxConstants.NS_SVG, 'filter') : svgDoc.createElement('filter');
  419. filter.setAttribute('id', this.graph.shadowId);
  420. var blur = (svgDoc.createElementNS != null) ?
  421. svgDoc.createElementNS(mxConstants.NS_SVG, 'feGaussianBlur') : svgDoc.createElement('feGaussianBlur');
  422. blur.setAttribute('in', 'SourceAlpha');
  423. blur.setAttribute('stdDeviation', '1.7');
  424. blur.setAttribute('result', 'blur');
  425. filter.appendChild(blur);
  426. var offset = (svgDoc.createElementNS != null) ?
  427. svgDoc.createElementNS(mxConstants.NS_SVG, 'feOffset') : svgDoc.createElement('feOffset');
  428. offset.setAttribute('in', 'blur');
  429. offset.setAttribute('dx', '3');
  430. offset.setAttribute('dy', '3');
  431. offset.setAttribute('result', 'offsetBlur');
  432. filter.appendChild(offset);
  433. var flood = (svgDoc.createElementNS != null) ?
  434. svgDoc.createElementNS(mxConstants.NS_SVG, 'feFlood') : svgDoc.createElement('feFlood');
  435. flood.setAttribute('flood-color', '#3D4574');
  436. flood.setAttribute('flood-opacity', '0.4');
  437. flood.setAttribute('result', 'offsetColor');
  438. filter.appendChild(flood);
  439. var composite = (svgDoc.createElementNS != null) ?
  440. svgDoc.createElementNS(mxConstants.NS_SVG, 'feComposite') : svgDoc.createElement('feComposite');
  441. composite.setAttribute('in', 'offsetColor');
  442. composite.setAttribute('in2', 'offsetBlur');
  443. composite.setAttribute('operator', 'in');
  444. composite.setAttribute('result', 'offsetBlur');
  445. filter.appendChild(composite);
  446. var feBlend = (svgDoc.createElementNS != null) ?
  447. svgDoc.createElementNS(mxConstants.NS_SVG, 'feBlend') : svgDoc.createElement('feBlend');
  448. feBlend.setAttribute('in', 'SourceGraphic');
  449. feBlend.setAttribute('in2', 'offsetBlur');
  450. filter.appendChild(feBlend);
  451. // Creates defs element if not available
  452. var defs = svgRoot.getElementsByTagName('defs');
  453. var defsElt = null;
  454. if (defs.length == 0)
  455. {
  456. defsElt = (svgDoc.createElementNS != null) ?
  457. svgDoc.createElementNS(mxConstants.NS_SVG, 'defs') : svgDoc.createElement('defs');
  458. if (svgRoot.firstChild != null)
  459. {
  460. svgRoot.insertBefore(defsElt, svgRoot.firstChild);
  461. }
  462. else
  463. {
  464. svgRoot.appendChild(defsElt);
  465. }
  466. }
  467. else
  468. {
  469. defsElt = defs[0];
  470. }
  471. defsElt.appendChild(filter);
  472. if (!createOnly)
  473. {
  474. (group || svgRoot.getElementsByTagName('g')[0]).setAttribute('filter', 'url(#' + this.graph.shadowId + ')');
  475. if (!isNaN(parseInt(svgRoot.getAttribute('width'))))
  476. {
  477. svgRoot.setAttribute('width', parseInt(svgRoot.getAttribute('width')) + 6);
  478. svgRoot.setAttribute('height', parseInt(svgRoot.getAttribute('height')) + 6);
  479. }
  480. }
  481. return filter;
  482. };
  483. /**
  484. * Return array of string values, or NULL if CSV string not well formed.
  485. */
  486. Editor.prototype.csvToArray = function(text)
  487. {
  488. var re_valid = /^\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*(?:,\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*)*$/;
  489. var re_value = /(?!\s*$)\s*(?:'([^'\\]*(?:\\[\S\s][^'\\]*)*)'|"([^"\\]*(?:\\[\S\s][^"\\]*)*)"|([^,'"\s\\]*(?:\s+[^,'"\s\\]+)*))\s*(?:,|$)/g;
  490. // Return NULL if input string is not well formed CSV string.
  491. if (!re_valid.test(text)) return null;
  492. var a = []; // Initialize array to receive values.
  493. text.replace(re_value, // "Walk" the string using replace with callback.
  494. function(m0, m1, m2, m3) {
  495. // Remove backslash from \' in single quoted values.
  496. if (m1 !== undefined) a.push(m1.replace(/\\'/g, "'"));
  497. // Remove backslash from \" in double quoted values.
  498. else if (m2 !== undefined) a.push(m2.replace(/\\"/g, '"'));
  499. else if (m3 !== undefined) a.push(m3);
  500. return ''; // Return empty string.
  501. });
  502. // Handle special case of empty last value.
  503. if (/,\s*$/.test(text)) a.push('');
  504. return a;
  505. };
  506. /**
  507. * Adds persistence for recent colors
  508. */
  509. if (window.ColorDialog)
  510. {
  511. var colorDialogAddRecentColor = ColorDialog.addRecentColor;
  512. ColorDialog.addRecentColor = function(color, max)
  513. {
  514. colorDialogAddRecentColor.apply(this, arguments);
  515. mxSettings.setRecentColors(ColorDialog.recentColors);
  516. mxSettings.save();
  517. };
  518. var colorDialogResetRecentColors = ColorDialog.resetRecentColors;
  519. ColorDialog.resetRecentColors = function()
  520. {
  521. colorDialogResetRecentColors.apply(this, arguments);
  522. mxSettings.setRecentColors(ColorDialog.recentColors);
  523. mxSettings.save();
  524. };
  525. }
  526. // Overridden to add edit shape option
  527. if (window.StyleFormatPanel != null)
  528. {
  529. var formatInit = Format.prototype.init;
  530. Format.prototype.init = function()
  531. {
  532. formatInit.apply(this, arguments);
  533. var ui = this.editorUi;
  534. ui.editor.addListener('fileLoaded', this.update);
  535. };
  536. var formatRefresh = Format.prototype.refresh;
  537. Format.prototype.refresh = function()
  538. {
  539. var ui = this.editorUi;
  540. if (ui.getCurrentFile() != null || urlParams['embed'] == '1')
  541. {
  542. formatRefresh.apply(this, arguments);
  543. }
  544. else
  545. {
  546. this.clear();
  547. }
  548. };
  549. /**
  550. * Adds autosave and math typesetting options.
  551. */
  552. var diagramFormatPanelAddOptions = DiagramFormatPanel.prototype.addOptions;
  553. DiagramFormatPanel.prototype.addOptions = function(div)
  554. {
  555. div = diagramFormatPanelAddOptions.apply(this, arguments);
  556. var ui = this.editorUi;
  557. var editor = ui.editor;
  558. var graph = editor.graph;
  559. if (graph.isEnabled())
  560. {
  561. var file = ui.getCurrentFile();
  562. if (file != null && file.isAutosaveOptional())
  563. {
  564. var opt = this.createOption(mxResources.get('autosave'), function()
  565. {
  566. return ui.editor.autosave;
  567. }, function(checked)
  568. {
  569. ui.editor.setAutosave(checked);
  570. },
  571. {
  572. install: function(apply)
  573. {
  574. this.listener = function()
  575. {
  576. apply(ui.editor.autosave);
  577. };
  578. ui.editor.addListener('autosaveChanged', this.listener);
  579. },
  580. destroy: function()
  581. {
  582. ui.editor.removeListener(this.listener);
  583. }
  584. });
  585. div.appendChild(opt);
  586. }
  587. }
  588. return div;
  589. };
  590. /**
  591. * Adds predefiend styles.
  592. */
  593. var StyleFormatPanelInit = StyleFormatPanel.prototype.init;
  594. StyleFormatPanel.prototype.init = function()
  595. {
  596. // TODO: Update sstate in Format
  597. var sstate = this.format.createSelectionState();
  598. if (sstate.style.shape != 'image')
  599. {
  600. this.container.appendChild(this.addStyles(this.createPanel()));
  601. }
  602. StyleFormatPanelInit.apply(this, arguments);
  603. };
  604. /**
  605. * Overridden to add copy and paste style.
  606. */
  607. var styleFormatPanelAddStyleOps = StyleFormatPanel.prototype.addStyleOps;
  608. StyleFormatPanel.prototype.addStyleOps = function(div)
  609. {
  610. var btn = mxUtils.button(mxResources.get('copyStyle'), mxUtils.bind(this, function(evt)
  611. {
  612. this.editorUi.actions.get('copyStyle').funct();
  613. }));
  614. btn.setAttribute('title', mxResources.get('copyStyle') + ' (' + this.editorUi.actions.get('copyStyle').shortcut + ')');
  615. btn.style.marginBottom = '2px';
  616. btn.style.width = '100px';
  617. btn.style.marginRight = '2px';
  618. div.appendChild(btn);
  619. var btn = mxUtils.button(mxResources.get('pasteStyle'), mxUtils.bind(this, function(evt)
  620. {
  621. this.editorUi.actions.get('pasteStyle').funct();
  622. }));
  623. btn.setAttribute('title', mxResources.get('pasteStyle') + ' (' + this.editorUi.actions.get('pasteStyle').shortcut + ')');
  624. btn.style.marginBottom = '2px';
  625. btn.style.width = '100px';
  626. div.appendChild(btn);
  627. mxUtils.br(div);
  628. return styleFormatPanelAddStyleOps.apply(this, arguments);
  629. };
  630. /**
  631. * Creates the buttons for the predefined styles.
  632. */
  633. StyleFormatPanel.prototype.addStyles = function(div)
  634. {
  635. var graph = this.editorUi.editor.graph;
  636. var picker = document.createElement('div');
  637. picker.style.whiteSpace = 'normal';
  638. picker.style.paddingLeft = '24px';
  639. picker.style.paddingRight = '20px';
  640. div.style.paddingLeft = '16px';
  641. div.style.paddingBottom = '6px';
  642. div.style.position = 'relative';
  643. div.appendChild(picker);
  644. var stylenames = ['plain-gray', 'plain-blue', 'plain-green', 'plain-turquoise',
  645. 'plain-orange', 'plain-yellow', 'plain-red', 'plain-pink', 'plain-purple', 'gray',
  646. 'blue', 'green', 'turquoise', 'orange', 'yellow', 'red', 'pink', 'purple'];
  647. function updateScheme(colorsets)
  648. {
  649. function addButton(colorset)
  650. {
  651. var btn = mxUtils.button('', function(evt)
  652. {
  653. graph.getModel().beginUpdate();
  654. try
  655. {
  656. var cells = graph.getSelectionCells();
  657. for (var i = 0; i < cells.length; i++)
  658. {
  659. var style = graph.getModel().getStyle(cells[i]);
  660. for (var j = 0; j < stylenames.length; j++)
  661. {
  662. style = mxUtils.removeStylename(style, stylenames[j]);
  663. }
  664. if (colorset != null)
  665. {
  666. style = mxUtils.setStyle(style, mxConstants.STYLE_FILLCOLOR, colorset['fill']);
  667. style = mxUtils.setStyle(style, mxConstants.STYLE_STROKECOLOR, colorset['stroke']);
  668. style = mxUtils.setStyle(style, mxConstants.STYLE_GRADIENTCOLOR, colorset['gradient']);
  669. }
  670. else
  671. {
  672. style = mxUtils.setStyle(style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
  673. style = mxUtils.setStyle(style, mxConstants.STYLE_STROKECOLOR, '#000000');
  674. style = mxUtils.setStyle(style, mxConstants.STYLE_GRADIENTCOLOR, null);
  675. }
  676. graph.getModel().setStyle(cells[i], style);
  677. }
  678. }
  679. finally
  680. {
  681. graph.getModel().endUpdate();
  682. }
  683. })
  684. btn.style.width = '36px';
  685. btn.style.height = '30px';
  686. btn.style.margin = '0px 6px 6px 0px';
  687. if (colorset != null)
  688. {
  689. if (colorset['gradient'] != null)
  690. {
  691. if (mxClient.IS_IE && (mxClient.IS_QUIRKS || document.documentMode < 10))
  692. {
  693. btn.style.filter = 'progid:DXImageTransform.Microsoft.Gradient('+
  694. 'StartColorStr=\'' + colorset['fill'] +
  695. '\', EndColorStr=\'' + colorset['gradient'] + '\', GradientType=0)';
  696. }
  697. else
  698. {
  699. btn.style.backgroundImage = 'linear-gradient(' + colorset['fill'] + ' 0px,' +
  700. colorset['gradient'] + ' 100%)';
  701. }
  702. }
  703. else
  704. {
  705. btn.style.backgroundColor = colorset['fill'];
  706. }
  707. btn.style.border = '1px solid ' + colorset['stroke'];
  708. }
  709. else
  710. {
  711. btn.style.backgroundColor = '#ffffff';
  712. btn.style.border = '1px solid #000000';
  713. }
  714. picker.appendChild(btn);
  715. };
  716. picker.innerHTML = '';
  717. for (var i = 0; i < colorsets.length; i++)
  718. {
  719. if (i > 0 && mxUtils.mod(i, 4) == 0)
  720. {
  721. mxUtils.br(picker);
  722. }
  723. addButton(colorsets[i]);
  724. }
  725. };
  726. if (this.editorUi.currentScheme == null)
  727. {
  728. this.editorUi.currentScheme = 0;
  729. }
  730. var schemes = [[null, {fill: '#f5f5f5', stroke: '#666666'},
  731. {fill: '#dae8fc', stroke: '#6c8ebf'}, {fill: '#d5e8d4', stroke: '#82b366'},
  732. {fill: '#ffe6cc', stroke: '#d79b00'}, {fill: '#fff2cc', stroke: '#d6b656'},
  733. {fill: '#f8cecc', stroke: '#b85450'}, {fill: '#e1d5e7', stroke: '#9673a6'}],
  734. [null,
  735. {fill: '#f5f5f5', stroke: '#666666', gradient: '#b3b3b3'},
  736. {fill: '#dae8fc', stroke: '#6c8ebf', gradient: '#7ea6e0'},
  737. {fill: '#d5e8d4', stroke: '#82b366', gradient: '#97d077'},
  738. {fill: '#ffcd28', stroke: '#d79b00', gradient: '#ffa500'},
  739. {fill: '#fff2cc', stroke: '#d6b656', gradient: '#ffd966'},
  740. {fill: '#f8cecc', stroke: '#b85450', gradient: '#ea6b66'},
  741. {fill: '#e6d0de', stroke: '#996185', gradient: '#d5739d'}],
  742. [null, {fill: '#eeeeee', stroke: '#36393d'},
  743. {fill: '#f9f7ed', stroke: '#36393d'}, {fill: '#ffcc99', stroke: '#36393d'},
  744. {fill: '#cce5ff', stroke: '#36393d'}, {fill: '#ffff88', stroke: '#36393d'},
  745. {fill: '#cdeb8b', stroke: '#36393d'}, {fill: '#ffcccc', stroke: '#36393d'}]];
  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. div.appendChild(left);
  750. mxEvent.addListener(left, 'click', mxUtils.bind(this, function()
  751. {
  752. this.editorUi.currentScheme = mxUtils.mod(this.editorUi.currentScheme - 1, schemes.length);
  753. updateScheme(schemes[this.editorUi.currentScheme]);
  754. }));
  755. var right = document.createElement('div');
  756. right.style.cssText = 'position:absolute;left:202px;top:8px;bottom:8px;width:20px;margin:4px;opacity:0.5;' +
  757. 'background-repeat:no-repeat;background-position:center center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAB2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYBuwCcAAAACnRSTlMAfCTkhhvb7cQSPH2JPgAAADZJREFUCNdjQAOMAmBKaiGY8loF5rKswsZlrVo8AUiFrTICcbIWK8A5DF1gDoMymMPApIAwHwCS0Qx/U7qCBQAAAABJRU5ErkJggg==);';
  758. div.appendChild(right);
  759. mxEvent.addListener(right, 'click', mxUtils.bind(this, function()
  760. {
  761. this.editorUi.currentScheme = mxUtils.mod(this.editorUi.currentScheme + 1, schemes.length);
  762. updateScheme(schemes[this.editorUi.currentScheme]);
  763. }));
  764. // Hover state
  765. function addHoverState(elt)
  766. {
  767. mxEvent.addListener(elt, 'mouseenter', function()
  768. {
  769. elt.style.opacity = '1';
  770. });
  771. mxEvent.addListener(elt, 'mouseleave', function()
  772. {
  773. elt.style.opacity = '0.5';
  774. });
  775. };
  776. addHoverState(left);
  777. addHoverState(right);
  778. updateScheme(schemes[this.editorUi.currentScheme]);
  779. return div;
  780. };
  781. StyleFormatPanel.prototype.addEditOps = function(div)
  782. {
  783. var ss = this.format.getSelectionState();
  784. var btn = null;
  785. if (this.editorUi.editor.graph.getSelectionCount() == 1)
  786. {
  787. btn = mxUtils.button(mxResources.get('editStyle'), mxUtils.bind(this, function(evt)
  788. {
  789. this.editorUi.actions.get('editStyle').funct();
  790. }));
  791. btn.setAttribute('title', mxResources.get('editStyle') + ' (' + this.editorUi.actions.get('editStyle').shortcut + ')');
  792. btn.style.width = '202px';
  793. btn.style.marginBottom = '2px';
  794. div.appendChild(btn);
  795. }
  796. var graph = this.editorUi.editor.graph;
  797. var state = graph.view.getState(graph.getSelectionCell());
  798. if (graph.getSelectionCount() == 1 && state != null && state.shape != null && state.shape.stencil != null)
  799. {
  800. var btn2 = mxUtils.button(mxResources.get('editShape'), mxUtils.bind(this, function(evt)
  801. {
  802. this.editorUi.actions.get('editShape').funct();
  803. }));
  804. btn2.setAttribute('title', mxResources.get('editShape'));
  805. btn2.style.marginBottom = '2px';
  806. if (btn == null)
  807. {
  808. btn2.style.width = '202px';
  809. }
  810. else
  811. {
  812. btn.style.width = '100px';
  813. btn2.style.width = '100px';
  814. btn2.style.marginLeft = '2px';
  815. }
  816. div.appendChild(btn2);
  817. }
  818. else if (ss.image)
  819. {
  820. var btn2 = mxUtils.button(mxResources.get('editImage'), mxUtils.bind(this, function(evt)
  821. {
  822. this.editorUi.actions.get('image').funct();
  823. }));
  824. btn2.setAttribute('title', mxResources.get('editImage'));
  825. btn2.style.marginBottom = '2px';
  826. if (btn == null)
  827. {
  828. btn2.style.width = '202px';
  829. }
  830. else
  831. {
  832. btn.style.width = '100px';
  833. btn2.style.width = '100px';
  834. btn2.style.marginLeft = '2px';
  835. }
  836. div.appendChild(btn2);
  837. }
  838. return div;
  839. };
  840. }
  841. /**
  842. * Changes the default stylename so that it matches the old named style
  843. * if one was specified in the XML.
  844. */
  845. Graph.prototype.defaultThemeName = 'default-style2';
  846. /**
  847. * Contains the last XML that was pasted.
  848. */
  849. Graph.prototype.lastPasteXml = null;
  850. /**
  851. * Contains the number of times the last XML was pasted.
  852. */
  853. Graph.prototype.pasteCounter = 0;
  854. /**
  855. * Graph Overrides
  856. */
  857. Graph.prototype.defaultScrollbars = urlParams['sb'] != '0';
  858. /**
  859. * Specifies if the page should be visible for new files. Default is true.
  860. */
  861. Graph.prototype.defaultPageVisible = urlParams['pv'] != '0';
  862. /**
  863. * Specifies if the page should be visible for new files. Default is true.
  864. */
  865. Graph.prototype.shadowId = 'dropShadow';
  866. /**
  867. * Enables move of bends/segments without selecting.
  868. */
  869. Graph.prototype.edgeMode = urlParams['edge'] != 'move';
  870. /**
  871. * Adds rack child layout style.
  872. */
  873. var graphInit = Graph.prototype.init;
  874. Graph.prototype.init = function()
  875. {
  876. graphInit.apply(this, arguments);
  877. // Override insert location for current mouse point
  878. var mouseEvent = null;
  879. function setMouseEvent(evt)
  880. {
  881. mouseEvent = evt;
  882. // Workaround for member not found in IE8-
  883. if (mxClient.IS_QUIRKS || document.documentMode == 7 || document.documentMode == 8)
  884. {
  885. mouseEvent = mxUtils.clone(evt);
  886. }
  887. };
  888. mxEvent.addListener(this.container, 'mouseenter', setMouseEvent);
  889. mxEvent.addListener(this.container, 'mousemove', setMouseEvent);
  890. mxEvent.addListener(this.container, 'mouseleave', function(evt)
  891. {
  892. mouseEvent = null;
  893. });
  894. // Extends getInsertPoint to use the current mouse location
  895. this.isMouseInsertPoint = function()
  896. {
  897. return mouseEvent != null;
  898. };
  899. var getInsertPoint = this.getInsertPoint;
  900. this.getInsertPoint = function()
  901. {
  902. if (mouseEvent != null)
  903. {
  904. return this.getPointForEvent(mouseEvent);
  905. }
  906. return getInsertPoint.apply(this, arguments);
  907. };
  908. var layoutManagerGetLayout = this.layoutManager.getLayout;
  909. this.layoutManager.getLayout = function(cell)
  910. {
  911. var state = this.graph.view.getState(cell);
  912. var style = (state != null) ? state.style : this.graph.getCellStyle(cell);
  913. // mxRackContainer may be undefined as it is dynamically loaded at render time
  914. if (typeof(mxRackContainer) != 'undefined' && style['childLayout'] == 'rack')
  915. {
  916. var rackLayout = new mxStackLayout(this.graph, false);
  917. rackLayout.setChildGeometry = function(child, geo)
  918. {
  919. var unitSize = 20;
  920. geo.height = Math.max(geo.height, unitSize);
  921. if (geo.height / unitSize > 1)
  922. {
  923. var mod = geo.height % unitSize;
  924. geo.height += mod > unitSize / 2 ? (unitSize - mod) : -mod;
  925. }
  926. this.graph.getModel().setGeometry(child, geo);
  927. };
  928. rackLayout.fill = true;
  929. rackLayout.unitSize = mxRackContainer.unitSize | 20;
  930. rackLayout.marginLeft = style['marginLeft'] || 0;
  931. rackLayout.marginRight = style['marginRight'] || 0;
  932. rackLayout.marginTop = style['marginTop'] || 0;
  933. rackLayout.marginBottom = style['marginBottom'] || 0;
  934. rackLayout.resizeParent = false;
  935. return rackLayout;
  936. }
  937. return layoutManagerGetLayout.apply(this, arguments);
  938. }
  939. };
  940. /**
  941. * Sets default style (used in editor.get/setGraphXml below)
  942. */
  943. var graphLoadStylesheet = Graph.prototype.loadStylesheet;
  944. Graph.prototype.loadStylesheet = function()
  945. {
  946. graphLoadStylesheet.apply(this, arguments);
  947. this.currentStyle = 'default-style2';
  948. };
  949. /**
  950. * Loads the stylesheet for this graph.
  951. */
  952. Graph.prototype.setShadowVisible = function(value, fireEvent)
  953. {
  954. if (mxClient.IS_SVG)
  955. {
  956. fireEvent = (fireEvent != null) ? fireEvent : true;
  957. this.shadowVisible = value;
  958. if (this.shadowVisible)
  959. {
  960. this.view.getDrawPane().setAttribute('filter', 'url(#' + this.shadowId + ')');
  961. }
  962. else
  963. {
  964. this.view.getDrawPane().removeAttribute('filter');
  965. }
  966. if (fireEvent)
  967. {
  968. this.fireEvent(new mxEventObject('shadowVisibleChanged'));
  969. }
  970. }
  971. };
  972. /**
  973. * Selects first unlocked layer if one exists
  974. */
  975. Graph.prototype.selectUnlockedLayer = function()
  976. {
  977. if (this.defaultParent == null)
  978. {
  979. var childCount = this.model.getChildCount(this.model.root);
  980. var cell = null;
  981. var index = 0;
  982. do
  983. {
  984. cell = this.model.getChildAt(this.model.root, index);
  985. } while (index++ < childCount && mxUtils.getValue(this.getCellStyle(cell), 'locked', '0') == '1')
  986. if (cell != null)
  987. {
  988. this.setDefaultParent(cell);
  989. }
  990. }
  991. };
  992. /**
  993. * Specifies special libraries that are loaded via dynamic JS. Add cases
  994. * where the filename cannot be worked out from the package name. The
  995. * standard scheme for this mapping is stencils/packagename.xml. If there
  996. * are multiple XML files, any JS files or any anomalies in the filename or
  997. * directory that contains the file, then an entry must be added here and
  998. * in EmbedServlet2 for the loading of the shapes to work.
  999. */
  1000. // Required to avoid 404 for mockup.xml since naming of mxgraph.mockup.anchor does not contain
  1001. // buttons even though it is defined in the mxMockupButtons.js file. This could only be fixed
  1002. // with aliases for existing shapes or aliases for basenames, but this is essentially the same.
  1003. mxStencilRegistry.libraries['mockup'] = [SHAPES_PATH + '/mockup/mxMockupButtons.js'];
  1004. mxStencilRegistry.libraries['arrows2'] = [SHAPES_PATH + '/mxArrows.js'];
  1005. mxStencilRegistry.libraries['bpmn'] = [SHAPES_PATH + '/bpmn/mxBpmnShape2.js', STENCIL_PATH + '/bpmn.xml'];
  1006. mxStencilRegistry.libraries['er'] = [SHAPES_PATH + '/er/mxER.js'];
  1007. mxStencilRegistry.libraries['ios'] = [SHAPES_PATH + '/mockup/mxMockupiOS.js'];
  1008. mxStencilRegistry.libraries['rackGeneral'] = [SHAPES_PATH + '/rack/mxRack.js', STENCIL_PATH + '/rack/general.xml'];
  1009. mxStencilRegistry.libraries['rackF5'] = [STENCIL_PATH + '/rack/f5.xml'];
  1010. mxStencilRegistry.libraries['lean_mapping'] = [SHAPES_PATH + '/mxLeanMap.js', STENCIL_PATH + '/lean_mapping.xml'];
  1011. mxStencilRegistry.libraries['basic'] = [SHAPES_PATH + '/mxBasic.js', STENCIL_PATH + '/basic.xml'];
  1012. mxStencilRegistry.libraries['ios7icons'] = [STENCIL_PATH + '/ios7/icons.xml'];
  1013. mxStencilRegistry.libraries['ios7ui'] = [SHAPES_PATH + '/ios7/mxIOS7Ui.js', STENCIL_PATH + '/ios7/misc.xml'];
  1014. mxStencilRegistry.libraries['android'] = [SHAPES_PATH + '/mxAndroid.js', STENCIL_PATH + '/android/android.xml'];
  1015. mxStencilRegistry.libraries['electrical/transmission'] = [SHAPES_PATH + '/mxElectrical.js', STENCIL_PATH + '/electrical/transmission.xml'];
  1016. mxStencilRegistry.libraries['mockup/buttons'] = [SHAPES_PATH + '/mockup/mxMockupButtons.js'];
  1017. mxStencilRegistry.libraries['mockup/containers'] = [SHAPES_PATH + '/mockup/mxMockupContainers.js'];
  1018. mxStencilRegistry.libraries['mockup/forms'] = [SHAPES_PATH + '/mockup/mxMockupForms.js'];
  1019. mxStencilRegistry.libraries['mockup/graphics'] = [SHAPES_PATH + '/mockup/mxMockupGraphics.js', STENCIL_PATH + '/mockup/misc.xml'];
  1020. mxStencilRegistry.libraries['mockup/markup'] = [SHAPES_PATH + '/mockup/mxMockupMarkup.js'];
  1021. mxStencilRegistry.libraries['mockup/misc'] = [SHAPES_PATH + '/mockup/mxMockupMisc.js', STENCIL_PATH + '/mockup/misc.xml'];
  1022. mxStencilRegistry.libraries['mockup/navigation'] = [SHAPES_PATH + '/mockup/mxMockupNavigation.js', STENCIL_PATH + '/mockup/misc.xml'];
  1023. mxStencilRegistry.libraries['mockup/text'] = [SHAPES_PATH + '/mockup/mxMockupText.js'];
  1024. mxStencilRegistry.libraries['floorplan'] = [SHAPES_PATH + '/mxFloorplan.js', STENCIL_PATH + '/floorplan.xml'];
  1025. mxStencilRegistry.libraries['bootstrap'] = [SHAPES_PATH + '/mxBootstrap.js', STENCIL_PATH + '/bootstrap.xml'];
  1026. mxStencilRegistry.libraries['gmdl'] = [SHAPES_PATH + '/mxGmdl.js', STENCIL_PATH + '/gmdl.xml'];
  1027. mxStencilRegistry.libraries['cabinets'] = [SHAPES_PATH + '/mxCabinets.js', STENCIL_PATH + '/cabinets.xml'];
  1028. mxStencilRegistry.libraries['archimate'] = [SHAPES_PATH + '/mxArchiMate.js'];
  1029. mxStencilRegistry.libraries['archimate3'] = [SHAPES_PATH + '/mxArchiMate3.js'];
  1030. mxStencilRegistry.libraries['sysml'] = [SHAPES_PATH + '/mxSysML.js'];
  1031. mxStencilRegistry.libraries['eip'] = [SHAPES_PATH + '/mxEip.js', STENCIL_PATH + '/eip.xml'];
  1032. mxStencilRegistry.libraries['networks'] = [SHAPES_PATH + '/mxNetworks.js', STENCIL_PATH + '/networks.xml'];
  1033. mxStencilRegistry.libraries['aws3d'] = [SHAPES_PATH + '/mxAWS3D.js', STENCIL_PATH + '/aws3d.xml'];
  1034. mxStencilRegistry.libraries['pid2inst'] = [SHAPES_PATH + '/pid2/mxPidInstruments.js'];
  1035. mxStencilRegistry.libraries['pid2misc'] = [SHAPES_PATH + '/pid2/mxPidMisc.js', STENCIL_PATH + '/pid/misc.xml'];
  1036. mxStencilRegistry.libraries['pid2valves'] = [SHAPES_PATH + '/pid2/mxPidValves.js'];
  1037. mxStencilRegistry.libraries['pidFlowSensors'] = [STENCIL_PATH + '/pid/flow_sensors.xml'];
  1038. // Triggers dynamic loading for markers
  1039. mxMarker.getPackageForType = function(type)
  1040. {
  1041. var name = null;
  1042. if (type != null && type.length > 0)
  1043. {
  1044. if (type.substring(0, 2) == 'ER')
  1045. {
  1046. name = 'mxgraph.er';
  1047. }
  1048. else if (type.substring(0, 5) == 'sysML')
  1049. {
  1050. name = 'mxgraph.sysml';
  1051. }
  1052. }
  1053. return name;
  1054. };
  1055. var mxMarkerCreateMarker = mxMarker.createMarker;
  1056. mxMarker.createMarker = function(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1057. {
  1058. if (type != null)
  1059. {
  1060. var f = mxMarker.markers[type];
  1061. if (f == null)
  1062. {
  1063. var name = this.getPackageForType(type);
  1064. if (name != null)
  1065. {
  1066. mxStencilRegistry.getStencil(name);
  1067. }
  1068. }
  1069. }
  1070. return mxMarkerCreateMarker.apply(this, arguments);
  1071. };
  1072. })();