simple_graph.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624
  1. // jQuery UI style "widget" for displaying a graph
  2. ////////////////////////////////////////////////////////////////////////////////
  3. //
  4. // graph
  5. //
  6. $(function()
  7. {
  8. // the widget definition, where "itop" is the namespace,
  9. // "dashboard" the widget name
  10. $.widget( "itop.simple_graph",
  11. {
  12. // default options
  13. options:
  14. {
  15. align: 'center',
  16. 'vertical-align': 'middle',
  17. source_url: null,
  18. sources: {},
  19. excluded: {},
  20. export_as_pdf: null,
  21. page_format: { label: 'Page Format:', values: { A3: 'A3', A4: 'A4', Letter: 'Letter' }, 'default': 'A4'},
  22. page_orientation: { label: 'Page Orientation:', values: { P: 'Portait', L: 'Landscape' }, 'default': 'L' },
  23. labels: {
  24. export_pdf_title: 'PDF Export Options',
  25. cancel: 'Cancel', 'export': 'Export',
  26. title: 'Document Title',
  27. include_list: 'Include the list of objects',
  28. comments: 'Comments',
  29. grouping_threshold: 'Grouping Threshold',
  30. refresh: 'Refresh'
  31. },
  32. export_as_document: null,
  33. drill_down: null,
  34. grouping_threshold: 10,
  35. excluded_classes: [],
  36. attachment_obj_class: null,
  37. attachment_obj_key: null
  38. },
  39. // the constructor
  40. _create: function()
  41. {
  42. var me = this;
  43. this.aNodes = [];
  44. this.aEdges = [];
  45. this.fZoom = 1.0;
  46. this.xOffset = 0;
  47. this.yOffset = 0;
  48. this.iTextHeight = 12;
  49. this.oPaper = Raphael(this.element.get(0), this.element.width(), this.element.height());
  50. this.element
  51. .addClass('panel-resized')
  52. .addClass('itop-simple-graph')
  53. .addClass('graph');
  54. this._create_toolkit_menu();
  55. this._build_context_menus();
  56. $(window).bind('resized', function() { var that = me; window.setTimeout(function() { that._on_resize(); }, 50); } );
  57. if (this.options.source_url != null)
  58. {
  59. this.load_from_url(this.options.source_url);
  60. }
  61. },
  62. // called when created, and later when changing options
  63. _refresh: function()
  64. {
  65. this.draw();
  66. },
  67. // events bound via _bind are removed automatically
  68. // revert other modifications here
  69. _destroy: function()
  70. {
  71. var sId = this.element.attr('id');
  72. this.element
  73. .removeClass('itop-simple-graph')
  74. .removeClass('graph');
  75. $('#tk_graph'+sId).remove();
  76. $('#graph_'+sId+'_export_as_pdf').remove();
  77. },
  78. // _setOptions is called with a hash of all options that are changing
  79. _setOptions: function()
  80. {
  81. this._superApply(arguments);
  82. },
  83. // _setOption is called for each individual option that is changing
  84. _setOption: function( key, value )
  85. {
  86. this._superApply(arguments);
  87. },
  88. draw: function()
  89. {
  90. this._updateBBox();
  91. this.auto_scale();
  92. this.oPaper.clear();
  93. for(var k in this.aNodes)
  94. {
  95. this.aNodes[k].aElements = [];
  96. this._draw_node(this.aNodes[k]);
  97. }
  98. for(var k in this.aEdges)
  99. {
  100. this.aEdges[k].aElements = [];
  101. this._draw_edge(this.aEdges[k]);
  102. }
  103. },
  104. _draw_node: function(oNode)
  105. {
  106. var iWidth = oNode.width;
  107. var iHeight = 32;
  108. var iFontSize = 10;
  109. var xPos = Math.round(oNode.x * this.fZoom + this.xOffset);
  110. var yPos = Math.round(oNode.y * this.fZoom + this.yOffset);
  111. oNode.tx = 0;
  112. oNode.ty = 0;
  113. switch(oNode.shape)
  114. {
  115. case 'disc':
  116. oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*this.fZoom / 2).attr(oNode.disc_attr));
  117. var oText = this.oPaper.text(xPos, yPos, oNode.label);
  118. oNode.text_attr['font-size'] = iFontSize * this.fZoom;
  119. oText.attr(oNode.text_attr);
  120. //oText.transform('s'+this.fZoom);
  121. oNode.aElements.push(oText);
  122. break;
  123. case 'group':
  124. oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*this.fZoom / 2).attr({fill: '#fff', 'stroke-width':0}));
  125. oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*this.fZoom / 2).attr(oNode.disc_attr));
  126. var xIcon = xPos - 18 * this.fZoom;
  127. var yIcon = yPos - 18 * this.fZoom;
  128. oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon, yIcon, 16*this.fZoom, 16*this.fZoom).attr(oNode.icon_attr));
  129. oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon + 18*this.fZoom, yIcon, 16*this.fZoom, 16*this.fZoom).attr(oNode.icon_attr));
  130. oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon + 9*this.fZoom, yIcon + 18*this.fZoom, 16*this.fZoom, 16*this.fZoom).attr(oNode.icon_attr));
  131. var oText = this.oPaper.text(xPos, yPos +2, oNode.label);
  132. oNode.text_attr['font-size'] = iFontSize * this.fZoom;
  133. oText.attr(oNode.text_attr);
  134. //oText.transform('s'+this.fZoom);
  135. var oBB = oText.getBBox();
  136. var dy = iHeight/2*this.fZoom + oBB.height/2;
  137. oText.remove();
  138. oText = this.oPaper.text(xPos, yPos +dy +2, oNode.label);
  139. oText.attr(oNode.text_attr);
  140. //oText.transform('s'+this.fZoom);
  141. oNode.aElements.push(oText);
  142. oNode.aElements.push(this.oPaper.rect( xPos - oBB.width/2 -2, yPos - oBB.height/2 + dy, oBB.width +4, oBB.height).attr({fill: '#fff', stroke: '#fff', opacity: 0.9}));
  143. oText.toFront();
  144. break;
  145. case 'icon':
  146. if(Raphael.svg)
  147. {
  148. // the colorShift plugin works only in SVG
  149. oNode.aElements.push(this.oPaper.image(oNode.icon_url, xPos - iWidth * this.fZoom/2, yPos - iHeight * this.fZoom/2, iWidth*this.fZoom, iHeight*this.fZoom).colorShift('#fff', 1));
  150. }
  151. oNode.aElements.push(this.oPaper.image(oNode.icon_url, xPos - iWidth * this.fZoom/2, yPos - iHeight * this.fZoom/2, iWidth*this.fZoom, iHeight*this.fZoom).attr(oNode.icon_attr));
  152. var oText = this.oPaper.text( xPos, yPos, oNode.label);
  153. oNode.text_attr['font-size'] = iFontSize * this.fZoom;
  154. oText.attr(oNode.text_attr);
  155. //oText.transform('S'+this.fZoom);
  156. var oBB = oText.getBBox();
  157. var dy = iHeight/2*this.fZoom + oBB.height/2;
  158. oText.remove();
  159. oText = this.oPaper.text( xPos, yPos + dy, oNode.label);
  160. oText.attr(oNode.text_attr);
  161. //oText.transform('S'+this.fZoom);
  162. oNode.aElements.push(oText);
  163. oNode.aElements.push(this.oPaper.rect( xPos - oBB.width/2 -2, yPos - oBB.height/2 + dy, oBB.width +4, oBB.height).attr({fill: '#fff', stroke: '#fff', opacity: 0.9}).toBack());
  164. break;
  165. }
  166. if (oNode.source)
  167. {
  168. oNode.aElements.push(this.oPaper.circle(xPos, yPos, 1.25*iWidth*this.fZoom / 2).attr({stroke: '#c33', 'stroke-width': 3*this.fZoom }).toBack());
  169. }
  170. if (oNode.sink)
  171. {
  172. oNode.aElements.push(this.oPaper.circle(xPos, yPos, 1.25*iWidth*this.fZoom / 2).attr({stroke: '#33c', 'stroke-width': 3*this.fZoom }).toBack());
  173. }
  174. var me = this;
  175. for(k in oNode.aElements)
  176. {
  177. var sNodeId = oNode.id;
  178. $(oNode.aElements[k].node).attr({'data-type': oNode.shape, 'data-id': oNode.id} ).attr('class', 'popupMenuTarget');
  179. oNode.aElements[k].drag(function(dx, dy, x, y, event) { me._move(sNodeId, dx, dy, x, y, event); }, function(x, y, event) { me._drag_start(sNodeId, x, y, event); }, function (event) { me._drag_end(sNodeId, event); });
  180. }
  181. },
  182. _move: function(sNodeId, dx, dy, x, y, event)
  183. {
  184. var origDx = dx / this.fZoom;
  185. var origDy = dy / this.fZoom;
  186. var oNode = this._find_node(sNodeId);
  187. oNode.x = oNode.xOrig + origDx;
  188. oNode.y = oNode.yOrig + origDy;
  189. for(k in oNode.aElements)
  190. {
  191. oNode.aElements[k].transform('t'+(oNode.tx + dx)+', '+(oNode.ty + dy));
  192. for(j in this.aEdges)
  193. {
  194. var oEdge = this.aEdges[j];
  195. if ((oEdge.source_node_id == sNodeId) || (oEdge.sink_node_id == sNodeId))
  196. {
  197. var sPath = this._get_edge_path(oEdge);
  198. oEdge.aElements[0].attr({path: sPath});
  199. }
  200. }
  201. }
  202. },
  203. _drag_start: function(sNodeId, x, y, event)
  204. {
  205. var oNode = this._find_node(sNodeId);
  206. oNode.xOrig = oNode.x;
  207. oNode.yOrig = oNode.y;
  208. },
  209. _drag_end: function(sNodeId, event)
  210. {
  211. var oNode = this._find_node(sNodeId);
  212. oNode.tx += (oNode.x - oNode.xOrig) * this.fZoom;
  213. oNode.ty += (oNode.y - oNode.yOrig) * this.fZoom;
  214. oNode.xOrig = oNode.x;
  215. oNode.yOrig = oNode.y;
  216. this._updateBBox();
  217. },
  218. _updateBBox: function()
  219. {
  220. this.options.xmin = 9999;
  221. this.options.xmax = -9999;
  222. this.options.ymin = 9999;
  223. this.options.ymax = -9999;
  224. for(var k in this.aNodes)
  225. {
  226. this.options.xmin = Math.min(this.aNodes[k].x + this.aNodes[k].tx, this.options.xmin);
  227. this.options.xmax = Math.max(this.aNodes[k].x + this.aNodes[k].tx, this.options.xmax);
  228. this.options.ymin = Math.min(this.aNodes[k].y + this.aNodes[k].ty, this.options.ymin);
  229. this.options.ymax = Math.max(this.aNodes[k].y + this.aNodes[k].ty, this.options.ymax);
  230. }
  231. },
  232. _get_edge_path: function(oEdge)
  233. {
  234. var oStart = this._find_node(oEdge.source_node_id);
  235. var oEnd = this._find_node(oEdge.sink_node_id);
  236. var iArrowSize = 5;
  237. if ((oStart == null) || (oEnd == null)) return '';
  238. var xStart = Math.round(oStart.x * this.fZoom + this.xOffset);
  239. var yStart = Math.round(oStart.y * this.fZoom + this.yOffset);
  240. var xEnd = Math.round(oEnd.x * this.fZoom + this.xOffset);
  241. var yEnd = Math.round(oEnd.y * this.fZoom + this.yOffset);
  242. var sPath = Raphael.format('M{0},{1}L{2},{3}', xStart, yStart, xEnd, yEnd);
  243. var vx = (xEnd - xStart);
  244. var vy = (yEnd - yStart);
  245. var l = Math.sqrt(vx*vx+vy*vy);
  246. vx = vx / l;
  247. vy = vy / l;
  248. var ux = -vy;
  249. var uy = vx;
  250. var lPos = Math.max(l/2, l - 40*this.fZoom);
  251. var xArrow = xStart + vx * lPos;
  252. var yArrow = yStart + vy * lPos;
  253. sPath += Raphael.format('M{0},{1}l{2},{3}M{4},{5}l{6},{7}', xArrow, yArrow, this.fZoom * iArrowSize *(-vx + ux), this.fZoom * iArrowSize *(-vy + uy), xArrow, yArrow, this.fZoom * iArrowSize *(-vx - ux), this.fZoom * iArrowSize *(-vy - uy));
  254. return sPath;
  255. },
  256. _draw_edge: function(oEdge)
  257. {
  258. var fStrokeSize = Math.max(1, 2 * this.fZoom);
  259. var sPath = this._get_edge_path(oEdge);
  260. var oAttr = $.extend(oEdge.attr);
  261. oAttr['stroke-linecap'] = 'round';
  262. oAttr['stroke-width'] = fStrokeSize;
  263. oEdge.aElements.push(this.oPaper.path(sPath).attr(oAttr).toBack());
  264. },
  265. _find_node: function(sId)
  266. {
  267. for(var k in this.aNodes)
  268. {
  269. if (this.aNodes[k].id == sId) return this.aNodes[k];
  270. }
  271. return null;
  272. },
  273. auto_scale: function()
  274. {
  275. var fMaxZoom = 1.5;
  276. var maxHeight = this.element.parent().height();
  277. // Compute the available height
  278. var element = this.element;
  279. this.element.parent().children().each(function() {
  280. if($(this).is(':visible') && !$(this).hasClass('graph') && ($(this).attr('id') != element.attr('id')))
  281. {
  282. maxHeight = maxHeight - $(this).height();
  283. }
  284. });
  285. this.element.height(maxHeight - 20);
  286. iMargin = 10;
  287. xmin = this.options.xmin - iMargin;
  288. xmax = this.options.xmax + iMargin;
  289. ymin = this.options.ymin - iMargin;
  290. ymax = this.options.ymax + iMargin;
  291. var xScale = this.element.width() / (xmax - xmin);
  292. var yScale = this.element.height() / (ymax - ymin + this.iTextHeight);
  293. this.fZoom = Math.min(xScale, yScale, fMaxZoom);
  294. switch(this.options.align)
  295. {
  296. case 'left':
  297. this.xOffset = -xmin * this.fZoom;
  298. break;
  299. case 'right':
  300. this.xOffset = (this.element.width() - (xmax - xmin) * this.fZoom);
  301. break;
  302. case 'center':
  303. this.xOffset = -xmin * this.fZoom + (this.element.width() - (xmax - xmin) * this.fZoom) / 2;
  304. break;
  305. }
  306. switch(this.options['vertical-align'])
  307. {
  308. case 'top':
  309. this.yOffset = -ymin * this.fZoom;
  310. break;
  311. case 'bottom':
  312. this.yOffset = this.element.height() - (ymax + this.iTextHeight) * this.fZoom;
  313. break;
  314. case 'middle':
  315. this.yOffset = -ymin * this.fZoom + (this.element.height() - (ymax - ymin + this.iTextHeight) * this.fZoom) / 2;
  316. break;
  317. }
  318. },
  319. add_node: function(oNode)
  320. {
  321. oNode.aElements = [];
  322. oNode.tx = 0;
  323. oNode.ty = 0;
  324. this.aNodes.push(oNode);
  325. },
  326. add_edge: function(oEdge)
  327. {
  328. oEdge.aElements = [];
  329. this.aEdges.push(oEdge);
  330. },
  331. show_group: function(sGroupId)
  332. {
  333. // Activate the 3rd tab
  334. this.element.closest('.ui-tabs').tabs("option", "active", 2);
  335. // Scroll into view the group
  336. if ($('#'+sGroupId).length > 0)
  337. {
  338. $('#'+sGroupId)[0].scrollIntoView();
  339. }
  340. },
  341. _create_toolkit_menu: function()
  342. {
  343. var sPopupMenuId = 'tk_graph'+this.element.attr('id');
  344. var sHtml = '<div class="graph_config">';
  345. var sId = this.element.attr('id');
  346. sHtml += this.options.labels.grouping_threshold+'&nbsp;<input type="text" name="g" value="'+this.options.grouping_threshold+'" id="'+sId+'_grouping_threshold" size="2">&nbsp;<button type="button" id="'+sId+'_refresh_btn">'+this.options.labels.refresh+'</button>';
  347. sHtml += '<div class="itop_popup toolkit_menu graph" style="font-size: 12px;" id="'+sPopupMenuId+'"><ul><li><img src="../images/toolkit_menu.png"><ul>';
  348. if (this.options.export_as_pdf != null)
  349. {
  350. sHtml += '<li><a href="#" id="'+sPopupMenuId+'_pdf">'+this.options.export_as_pdf.label+'</a></li>';
  351. }
  352. if (this.options.export_as_attachment != null)
  353. {
  354. sHtml += '<li><a href="#" id="'+sPopupMenuId+'_attachment">'+this.options.export_as_attachment.label+'</a></li>';
  355. }
  356. //sHtml += '<li><a href="#" id="'+sPopupMenuId+'_reload">Refresh</a></li>';
  357. sHtml += '</ul></li></ul></div>';
  358. sHtml += '</div>';
  359. this.element.before(sHtml);
  360. $('#'+sPopupMenuId+'>ul').popupmenu();
  361. var me = this;
  362. $('#'+sPopupMenuId+'_pdf').click(function() { me.export_as_pdf(); });
  363. $('#'+sPopupMenuId+'_attachment').click(function() { me.export_as_attachment(); });
  364. $('#'+sId+'_grouping_threshold').spinner({ min: 2});
  365. $('#'+sId+'_refresh_btn').button().click(function() { me.reload(); });
  366. },
  367. _build_context_menus: function()
  368. {
  369. var sId = this.element.attr('id');
  370. var me = this;
  371. $.contextMenu({
  372. selector: '#'+sId+' .popupMenuTarget',
  373. build: function(trigger, e) {
  374. // this callback is executed every time the menu is to be shown
  375. // its results are destroyed every time the menu is hidden
  376. // e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data)
  377. var sType = trigger.attr('data-type');
  378. var sNodeId = trigger.attr('data-id');
  379. var oNode = me._find_node(sNodeId);
  380. /*
  381. var sObjName = trigger.attr('data-class');
  382. var sIndex = trigger.attr('data-index');
  383. var originalEvent = e;
  384. var bHasItems = false;
  385. */
  386. var oResult = {callback: null, items: {}};
  387. switch(sType)
  388. {
  389. case 'group':
  390. var sGroupIndex = oNode.group_index;
  391. if( $('#relation_group_'+sGroupIndex).length > 0)
  392. {
  393. oResult = {
  394. callback: function(key, options) {
  395. var me = $('.itop-simple-graph').data('itopSimple_graph'); // need a live value
  396. me.show_group('relation_group_'+sGroupIndex);
  397. },
  398. items: { 'show': {name: me.options.drill_down.label } }
  399. };
  400. }
  401. break;
  402. case 'icon':
  403. var sObjClass = oNode.obj_class;
  404. var sObjKey = oNode.obj_key;
  405. oResult = {
  406. callback: function(key, options) {
  407. var me = $('.itop-simple-graph').data('itopSimple_graph'); // need a live value
  408. var sURL = me.options.drill_down.url.replace('%1$s', sObjClass).replace('%2$s', sObjKey);
  409. window.location.href = sURL;
  410. },
  411. items: { 'details': {name: me.options.drill_down.label } }
  412. };
  413. break;
  414. default:
  415. oResult = false; // No context menu
  416. }
  417. return oResult;
  418. }
  419. });
  420. },
  421. export_as_pdf: function()
  422. {
  423. this._export_dlg(this.options.labels.export_pdf_title, this.options.export_as_pdf.url, 'download_pdf');
  424. },
  425. _export_dlg: function(sTitle, sSubmitUrl, sOperation)
  426. {
  427. var oPositions = {};
  428. for(k in this.aNodes)
  429. {
  430. oPositions[this.aNodes[k].id] = {x: this.aNodes[k].x, y: this.aNodes[k].y };
  431. }
  432. var sHtmlForm = '<div id="GraphExportDlg'+this.element.attr('id')+'"><form id="graph_'+this.element.attr('id')+'_export_dlg" target="_blank" action="'+sSubmitUrl+'" method="post">';
  433. sHtmlForm += '<input type="hidden" name="g" value="'+this.options.grouping_threshold+'">';
  434. sHtmlForm += '<input type="hidden" name="positions" value="">';
  435. for(k in this.options.excluded_classes)
  436. {
  437. sHtmlForm += '<input type="hidden" name="excluded_classes[]" value="'+this.options.excluded_classes[k]+'">';
  438. }
  439. for(var k1 in this.options.sources)
  440. {
  441. for(var k2 in this.options.sources[k1])
  442. {
  443. sHtmlForm += '<input type="hidden" name="sources['+k1+'][]" value="'+this.options.sources[k1][k2]+'">';
  444. }
  445. }
  446. for(var k1 in this.options.excluded)
  447. {
  448. for(var k2 in this.options.excluded[k1])
  449. {
  450. sHtmlForm += '<input type="hidden" name="excluded['+k1+'][]" value="'+this.options.excluded[k1][k2]+'">';
  451. }
  452. }
  453. if (sOperation == 'attachment')
  454. {
  455. sHtmlForm += '<input type="hidden" name="obj_class" value="'+this.options.export_as_attachment.obj_class+'">';
  456. sHtmlForm += '<input type="hidden" name="obj_key" value="'+this.options.export_as_attachment.obj_key+'">';
  457. }
  458. sHtmlForm += '<table>';
  459. sHtmlForm += '<tr><td>'+this.options.page_format.label+'</td><td><select name="p">';
  460. for(k in this.options.page_format.values)
  461. {
  462. var sSelected = (k == this.options.page_format['default']) ? ' selected' : '';
  463. sHtmlForm += '<option value="'+k+'"'+sSelected+'>'+this.options.page_format.values[k]+'</option>';
  464. }
  465. sHtmlForm += '</select></td></tr>';
  466. sHtmlForm += '<tr><td>'+this.options.page_orientation.label+'</td><td><select name="o">';
  467. for(k in this.options.page_orientation.values)
  468. {
  469. var sSelected = (k == this.options.page_orientation['default']) ? ' selected' : '';
  470. sHtmlForm += '<option value="'+k+'"'+sSelected+'>'+this.options.page_orientation.values[k]+'</option>';
  471. }
  472. sHtmlForm += '</select></td></tr>';
  473. sHtmlForm += '<tr><td>'+this.options.labels.title+'</td><td><input name="title" value="'+this.options.labels.untitled+'" style="width: 20em;"/></td></tr>';
  474. sHtmlForm += '<tr><td>'+this.options.labels.comments+'</td><td><textarea style="width: 20em; height:5em;" name="comments"/></textarea></td></tr>';
  475. sHtmlForm += '<tr><td colspan=2><input type="checkbox" checked id="include_list_checkbox" name="include_list" value="1"><label for="include_list_checkbox">&nbsp;'+this.options.labels.include_list+'</label></td></tr>';
  476. sHtmlForm += '<table>';
  477. sHtmlForm += '</form></div>';
  478. $('body').append(sHtmlForm);
  479. $('#graph_'+this.element.attr('id')+'_export_dlg input[name="positions"]').val(JSON.stringify(oPositions));
  480. var me = this;
  481. if (sOperation == 'attachment')
  482. {
  483. $('#GraphExportDlg'+this.element.attr('id')+' form').submit(function() { return me._on_export_as_attachment(); });
  484. }
  485. $('#GraphExportDlg'+this.element.attr('id')).dialog({
  486. width: 'auto',
  487. modal: true,
  488. title: sTitle,
  489. close: function() { $(this).remove(); },
  490. buttons: [
  491. {text: this.options.labels['cancel'], click: function() { $(this).dialog('close');} },
  492. {text: this.options.labels['export'], click: function() { $('#graph_'+me.element.attr('id')+'_export_dlg').submit(); $(this).dialog('close');} },
  493. ]
  494. });
  495. },
  496. _on_resize: function()
  497. {
  498. this.element.closest('.ui-tabs').tabs({ heightStyle: "fill" });
  499. this.auto_scale();
  500. this.oPaper.setSize(this.element.width(), this.element.height());
  501. this.draw();
  502. },
  503. load: function(oData)
  504. {
  505. this.aNodes = [];
  506. this.aEdges = [];
  507. for(k in oData.nodes)
  508. {
  509. this.add_node(oData.nodes[k]);
  510. }
  511. for(k in oData.edges)
  512. {
  513. this.add_edge(oData.edges[k]);
  514. }
  515. this._updateBBox();
  516. this.auto_scale();
  517. this.oPaper.setSize(this.element.width(), this.element.height());
  518. this.draw();
  519. },
  520. load_from_url: function(sUrl)
  521. {
  522. this.options.load_from_url = sUrl;
  523. var me = this;
  524. var sId = this.element.attr('id');
  525. this.options.grouping_threshold = $('#'+sId+'_grouping_threshold').val();
  526. if (this.options.grouping_threshold < 2)
  527. {
  528. this.options.grouping_threshold = 2;
  529. $('#'+sId+'_grouping_threshold').val(this.options.grouping_threshold);
  530. }
  531. this.element.closest('.ui-tabs').tabs({ heightStyle: "fill" });
  532. this.oPaper.rect(0, 0, this.element.width(), this.element.height()).attr({fill: '#000', opacity: 0.4, 'stroke-width': 0});
  533. $.post(sUrl, {excluded_classes: this.options.excluded_classes, g: this.options.grouping_threshold, sources: this.options.sources, excluded: this.options.excluded }, function(data) {
  534. me.load(data);
  535. }, 'json');
  536. },
  537. export_as_attachment: function()
  538. {
  539. this._export_dlg(this.options.labels.export_as_attachment_title, this.options.export_as_attachment.url, 'attachment');
  540. },
  541. _on_export_as_attachment: function()
  542. {
  543. var oParams = {};
  544. var oPositions = {};
  545. var jForm = $('#GraphExportDlg'+this.element.attr('id')+' form');
  546. for(k in this.aNodes)
  547. {
  548. oPositions[this.aNodes[k].id] = {x: this.aNodes[k].x, y: this.aNodes[k].y };
  549. }
  550. oParams.positions = JSON.stringify(oPositions);
  551. oParams.sources = this.options.sources;
  552. oParams.excluded_classes = this.options.excluded_classes;
  553. oParams.title = jForm.find(':input[name="title"]').val();
  554. oParams.comments = jForm.find(':input[name="comments"]').val();
  555. oParams.include_list = jForm.find(':input[name="include_list"]:checked').length;
  556. oParams.o = jForm.find(':input[name="o"]').val();
  557. oParams.p = jForm.find(':input[name="p"]').val();
  558. oParams.obj_class = this.options.export_as_attachment.obj_class;
  559. oParams.obj_key = this.options.export_as_attachment.obj_key;
  560. var sUrl = jForm.attr('action');
  561. var sTitle = oParams.title;
  562. var jPanel = $('#attachments').closest('.ui-tabs-panel');
  563. var jTab = null;
  564. var sTabText = null;
  565. if (jPanel.length > 0)
  566. {
  567. var sTabId = jPanel.attr('id');
  568. jTab = $('li[aria-controls='+sTabId+']');
  569. sTabText = jTab.find('span').html();
  570. jTab.find('span').html(sTabText+' <img style="vertical-align:bottom" src="../images/indicator.gif">');
  571. }
  572. $.post(sUrl, oParams, function(data) {
  573. var sDownloadLink = GetAbsoluteUrlAppRoot()+'pages/ajax.render.php?operation=download_document&class=Attachment&id='+data.att_id+'&field=contents';
  574. var sIcon = GetAbsoluteUrlModulesRoot()+'itop-attachments/icons/pdf.png';
  575. $('#attachments').append('<div class="attachment" id="display_attachment_'+data.att_id+'"><a data-preview="false" href="'+sDownloadLink+'"><img src="'+sIcon+'"><br/>'+sTitle+'.pdf<input id="attachment_'+data.att_id+'" type="hidden" name="attachments[]" value="'+data.att_id+'"/></a><br/><input type="button" class="btn_hidden" value="{$sDeleteBtn}" onClick="RemoveAttachment('+data.att_id+');"/></div>');
  576. if (jTab != null)
  577. {
  578. var re = /^([^(]+)\(([0-9]+)\)(.*)$/;
  579. var aParts = re.exec(sTabText);
  580. var iPrevCount = parseInt(aParts[2], 10);
  581. jTab.find('span').html(aParts[1]+'('+(1 + iPrevCount)+')'+aParts[3]);
  582. }
  583. }, 'json');
  584. return false;
  585. },
  586. reload: function()
  587. {
  588. this.load_from_url(this.options.load_from_url);
  589. }
  590. });
  591. });