actionsbuilder.contextMenu.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. var ActionsBuilder;
  2. (function (ActionsBuilder) {
  3. var ContextMenu = (function () {
  4. function ContextMenu(viewer) {
  5. this.showing = false;
  6. this.savedColor = Raphael.rgb(255, 255, 255);
  7. this.overColor = Raphael.rgb(140, 200, 230);
  8. this._viewer = null;
  9. this.elements = [
  10. { text: "Reduce", node: null, action: "onReduce" },
  11. { text: "Delete", node: null, action: "onRemoveNode" },
  12. { text: "Delete branch", node: null, action: "onRemoveBranch" },
  13. { text: "Connect / Disconnect", node: null, action: "onDetachAction" },
  14. { text: "Copy", node: null, action: "onCopyStructure" },
  15. { text: "Paste", node: null, action: "onPasteStructure" },
  16. { text: "", node: null, action: null }
  17. ];
  18. this._viewer = viewer;
  19. this.attachControl(this._viewer.paper.canvas);
  20. }
  21. ContextMenu.prototype.attachControl = function (element) {
  22. var _this = this;
  23. var onClick = function (event) {
  24. var x = _this._viewer.mousex;
  25. var y = _this._viewer.mousey;
  26. if (_this.showing) {
  27. for (var i = 0; i < _this.elements.length; i++) {
  28. var element = _this.elements[i];
  29. if (element.action && element.node.rect.isPointInside(x, y)) {
  30. _this._viewer.utils[element.action]();
  31. _this._viewer.update();
  32. }
  33. element.node.rect.remove();
  34. element.node.text.remove();
  35. }
  36. }
  37. _this.showing = false;
  38. };
  39. var onMouseMove = function (event) {
  40. if (_this.showing) {
  41. for (var i = 0; i < _this.elements.length; i++) {
  42. var element = _this.elements[i];
  43. if (element.text === "")
  44. continue;
  45. var x = _this._viewer.mousex;
  46. var y = _this._viewer.mousey;
  47. if (element.node.rect.isPointInside(x, y)) {
  48. element.node.rect.attr("fill", _this.overColor);
  49. }
  50. else {
  51. element.node.rect.attr("fill", _this.savedColor);
  52. }
  53. }
  54. }
  55. };
  56. var onRightClick = function (event) {
  57. var x = _this._viewer.mousex;
  58. var y = _this._viewer.mousey;
  59. _this._viewer.onClick(event);
  60. var result = _this._viewer.traverseGraph(null, x, y, true);
  61. if (result.hit) {
  62. }
  63. if (y + (ActionsBuilder.Viewer.NODE_HEIGHT * _this.elements.length) > _this._viewer.viewerElement.offsetHeight + _this._viewer.viewerElement.scrollTop) {
  64. y = (ActionsBuilder.Viewer.NODE_HEIGHT * _this.elements.length);
  65. }
  66. if (x + ActionsBuilder.Viewer.NODE_WIDTH > _this._viewer.viewerElement.offsetWidth + _this._viewer.viewerElement.scrollLeft) {
  67. x -= ActionsBuilder.Viewer.NODE_WIDTH;
  68. }
  69. if (!_this.showing) {
  70. if (_this._viewer.selectedNode === null)
  71. return;
  72. var yOffset = 10;
  73. for (var i = 0; i < _this.elements.length - 1; i++) {
  74. var element = _this.elements[i];
  75. element.node = _this._viewer._createNode(element.text, ActionsBuilder.Type.OBJECT, true);
  76. element.node.rect.attr("fill", Raphael.rgb(216, 216, 216));
  77. element.node.rect.attr("x", x);
  78. element.node.rect.attr("y", y + yOffset);
  79. element.node.text.attr("x", x + 5);
  80. element.node.text.attr("y", y + yOffset + element.node.rect.attr("height") / 2);
  81. yOffset += ActionsBuilder.Viewer.NODE_HEIGHT;
  82. }
  83. var separator = _this.elements[_this.elements.length - 1];
  84. separator.node = _this._viewer._createNode("", ActionsBuilder.Type.OBJECT, true);
  85. separator.node.rect.attr("fill", _this._viewer.getNodeColor(_this._viewer.selectedNode.type, _this._viewer.selectedNode.node.detached));
  86. separator.node.rect.attr("x", x);
  87. separator.node.rect.attr("y", y);
  88. separator.node.rect.attr("height", 10);
  89. _this.showing = true;
  90. }
  91. else {
  92. onClick(event);
  93. onRightClick(event);
  94. }
  95. window.event.returnValue = false;
  96. };
  97. document.addEventListener("click", onClick);
  98. document.addEventListener("mousemove", onMouseMove);
  99. element.addEventListener("contextmenu", onRightClick);
  100. };
  101. return ContextMenu;
  102. })();
  103. ActionsBuilder.ContextMenu = ContextMenu;
  104. })(ActionsBuilder || (ActionsBuilder = {}));