flow.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /**
  2. * Flow plugin.
  3. */
  4. Draw.loadPlugin(function(ui)
  5. {
  6. // Adds resource for action
  7. mxResources.parse('toggleFlow=Toggle Flow...');
  8. // Max number of edges per page
  9. var pageSize = 20;
  10. var uiCreatePopupMenu = ui.menus.createPopupMenu;
  11. ui.menus.createPopupMenu = function(menu, cell, evt)
  12. {
  13. uiCreatePopupMenu.apply(this, arguments);
  14. var graph = ui.editor.graph;
  15. if (graph.model.isEdge(graph.getSelectionCell()))
  16. {
  17. this.addMenuItems(menu, ['-', 'toggleFlow'], null, evt);
  18. }
  19. };
  20. //
  21. // Main function
  22. //
  23. function toggleFlow(cells)
  24. {
  25. for (var i = 0; i < cells.length; i++)
  26. {
  27. if (ui.editor.graph.model.isEdge(cells[i]))
  28. {
  29. var state = ui.editor.graph.view.getState(cells[i]);
  30. if (state.shape != null)
  31. {
  32. var paths = state.shape.node.getElementsByTagName('path');
  33. if (paths.length > 1)
  34. {
  35. if (paths[1].getAttribute('class') == 'mxEdgeFlow')
  36. {
  37. paths[1].removeAttribute('class');
  38. if (mxUtils.getValue(state.style, mxConstants.STYLE_DASHED, '0') != '1')
  39. {
  40. paths[1].removeAttribute('stroke-dasharray');
  41. }
  42. }
  43. else
  44. {
  45. paths[1].setAttribute('class', 'mxEdgeFlow');
  46. if (mxUtils.getValue(state.style, mxConstants.STYLE_DASHED, '0') != '1')
  47. {
  48. paths[1].setAttribute('stroke-dasharray', '8');
  49. }
  50. }
  51. }
  52. }
  53. }
  54. }
  55. };
  56. // Adds action
  57. ui.actions.addAction('toggleFlow', function()
  58. {
  59. var cell = ui.editor.graph.getSelectionCell();
  60. if (ui.editor.graph.model.isEdge(cell))
  61. {
  62. toggleFlow(ui.editor.graph.getSelectionCells());
  63. }
  64. });
  65. // Click handler for chromeless mode
  66. if (ui.editor.isChromelessView())
  67. {
  68. ui.editor.graph.click = function(me)
  69. {
  70. if (ui.editor.graph.model.isEdge(me.getCell()))
  71. {
  72. toggleFlow([me.getCell()]);
  73. }
  74. };
  75. }
  76. try
  77. {
  78. var style = document.createElement('style')
  79. style.type = 'text/css';
  80. style.innerHTML = ['.mxEdgeFlow {',
  81. 'animation: mxEdgeFlow 0.5s linear;',
  82. 'animation-iteration-count: infinite;',
  83. '}',
  84. '@keyframes mxEdgeFlow {',
  85. 'to {',
  86. 'stroke-dashoffset: -16;',
  87. '}',
  88. '}'].join('\n');
  89. document.getElementsByTagName('head')[0].appendChild(style);
  90. }
  91. catch (e)
  92. {
  93. // ignore
  94. }
  95. });