number.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /**
  2. * Sample plugin.
  3. */
  4. Draw.loadPlugin(function(ui) {
  5. // Adds numbered toggle property
  6. Editor.commonVertexProperties.push({name: 'numbered', dispName: 'Numbered', type: 'bool', defVal: true, isVisible: function(state, format)
  7. {
  8. var graph = format.editorUi.editor.graph;
  9. return graph.view.redrawNumberShape != null;
  10. }, onChange: function(graph, newValue)
  11. {
  12. graph.refresh();
  13. }});
  14. var graph = ui.editor.graph;
  15. var enabled = true;
  16. var counter = 0;
  17. var graphViewResetValidationState = graph.view.resetValidationState;
  18. graph.view.resetValidationState = function()
  19. {
  20. graphViewResetValidationState.apply(this, arguments);
  21. this.numberCounter = 0;
  22. };
  23. var graphViewValidateCellState = graph.view.validateCellState;
  24. graph.view.validateCellState = function(cell, recurse)
  25. {
  26. var state = graphViewValidateCellState.apply(this, arguments);
  27. recurse = (recurse != null) ? recurse : true;
  28. if (recurse && state != null && graph.model.isVertex(state.cell) &&
  29. mxUtils.getValue(state.style, 'numbered', 1) == 1)
  30. {
  31. this.numberCounter++;
  32. this.redrawNumberShape(state);
  33. }
  34. return state;
  35. };
  36. graph.view.redrawNumberShape = function(state)
  37. {
  38. var numbered = mxUtils.getValue(state.style, 'numbered', 1) == 1;
  39. var value = '<div style="padding:2px;border:1px solid gray;background:yellow;border-radius:2px;">' +
  40. (this.numberCounter) + '</div>';
  41. if (enabled && numbered && graph.model.isVertex(state.cell) &&
  42. state.shape != null && state.secondLabel == null)
  43. {
  44. state.secondLabel = new mxText(value, new mxRectangle(),
  45. mxConstants.ALIGN_LEFT, mxConstants.ALIGN_BOTTOM);
  46. // Styles the label
  47. state.secondLabel.size = 12;
  48. state.secondLabel.dialect = mxConstants.DIALECT_STRICTHTML;
  49. graph.cellRenderer.initializeLabel(state, state.secondLabel);
  50. }
  51. if (state.secondLabel != null)
  52. {
  53. if (!numbered)
  54. {
  55. state.secondLabel.destroy();
  56. state.secondLabel = null;
  57. }
  58. else
  59. {
  60. var scale = graph.getView().getScale();
  61. var bounds = new mxRectangle(state.x + state.width - 4 * scale, state.y + 4 * scale, 0, 0);
  62. state.secondLabel.value = value;
  63. state.secondLabel.state = state;
  64. state.secondLabel.scale = scale;
  65. state.secondLabel.bounds = bounds;
  66. state.secondLabel.redraw();
  67. }
  68. }
  69. };
  70. // Destroys the shape number
  71. var destroy = graph.cellRenderer.destroy;
  72. graph.cellRenderer.destroy = function(state)
  73. {
  74. destroy.apply(this, arguments);
  75. if (state.secondLabel != null)
  76. {
  77. state.secondLabel.destroy();
  78. state.secondLabel = null;
  79. }
  80. };
  81. graph.cellRenderer.getShapesForState = function(state)
  82. {
  83. return [state.shape, state.text, state.secondLabel, state.control];
  84. };
  85. // Extends View menu
  86. mxResources.parse('number=Number');
  87. // Adds action
  88. var action = ui.actions.addAction('number...', function()
  89. {
  90. enabled = !enabled;
  91. graph.refresh();
  92. });
  93. action.setToggleAction(true);
  94. action.setSelectedCallback(function() { return enabled; });
  95. var menu = ui.menus.get((urlParams['sketch'] == '1') ? 'extras' : 'view');
  96. var oldFunct = menu.funct;
  97. menu.funct = function(menu, parent)
  98. {
  99. oldFunct.apply(this, arguments);
  100. ui.menus.addMenuItems(menu, ['-', 'number'], parent);
  101. };
  102. // Forces refresh if file was loaded before plugin
  103. if (ui.getCurrentFile() != null)
  104. {
  105. graph.refresh();
  106. }
  107. });