Connect.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import {
  2. getMid
  3. } from '../../layout/LayoutUtil';
  4. import {
  5. isNil,
  6. isObject
  7. } from 'min-dash';
  8. export default function Connect(eventBus, dragging, modeling, rules) {
  9. // rules
  10. function canConnect(source, target) {
  11. return rules.allowed('connection.create', {
  12. source: source,
  13. target: target
  14. });
  15. }
  16. function canConnectReverse(source, target) {
  17. return canConnect(target, source);
  18. }
  19. // event handlers
  20. eventBus.on('connect.hover', function(event) {
  21. var context = event.context,
  22. start = context.start,
  23. hover = event.hover,
  24. canExecute;
  25. // cache hover state
  26. context.hover = hover;
  27. canExecute = context.canExecute = canConnect(start, hover);
  28. // ignore hover
  29. if (isNil(canExecute)) {
  30. return;
  31. }
  32. if (canExecute !== false) {
  33. context.source = start;
  34. context.target = hover;
  35. return;
  36. }
  37. canExecute = context.canExecute = canConnectReverse(start, hover);
  38. // ignore hover
  39. if (isNil(canExecute)) {
  40. return;
  41. }
  42. if (canExecute !== false) {
  43. context.source = hover;
  44. context.target = start;
  45. }
  46. });
  47. eventBus.on([ 'connect.out', 'connect.cleanup' ], function(event) {
  48. var context = event.context;
  49. context.hover = null;
  50. context.source = null;
  51. context.target = null;
  52. context.canExecute = false;
  53. });
  54. eventBus.on('connect.end', function(event) {
  55. var context = event.context,
  56. canExecute = context.canExecute,
  57. connectionStart = context.connectionStart,
  58. connectionEnd = {
  59. x: event.x,
  60. y: event.y
  61. },
  62. source = context.source,
  63. target = context.target;
  64. if (!canExecute) {
  65. return false;
  66. }
  67. var attrs = null,
  68. hints = {
  69. connectionStart: isReverse(context) ? connectionEnd : connectionStart,
  70. connectionEnd: isReverse(context) ? connectionStart : connectionEnd
  71. };
  72. if (isObject(canExecute)) {
  73. attrs = canExecute;
  74. }
  75. context.connection = modeling.connect(source, target, attrs, hints);
  76. });
  77. // API
  78. /**
  79. * Start connect operation.
  80. *
  81. * @param {DOMEvent} event
  82. * @param {djs.model.Base} start
  83. * @param {Point} [connectionStart]
  84. * @param {boolean} [autoActivate=false]
  85. */
  86. this.start = function(event, start, connectionStart, autoActivate) {
  87. if (!isObject(connectionStart)) {
  88. autoActivate = connectionStart;
  89. connectionStart = getMid(start);
  90. }
  91. dragging.init(event, 'connect', {
  92. autoActivate: autoActivate,
  93. data: {
  94. shape: start,
  95. context: {
  96. start: start,
  97. connectionStart: connectionStart
  98. }
  99. }
  100. });
  101. };
  102. }
  103. Connect.$inject = [
  104. 'eventBus',
  105. 'dragging',
  106. 'modeling',
  107. 'rules'
  108. ];
  109. // helpers //////////
  110. export function isReverse(context) {
  111. var hover = context.hover,
  112. source = context.source,
  113. target = context.target;
  114. return hover && source && hover === source && source !== target;
  115. }