index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.SelectionSelect = void 0;
  4. var SelectionSelect = /** @class */ (function () {
  5. function SelectionSelect(_a) {
  6. var _this = this;
  7. var lf = _a.lf;
  8. this.__disabled = false;
  9. this.isDefaultStopMoveGraph = false;
  10. this.isWholeNode = true;
  11. this.isWholeEdge = true;
  12. this.__draw = function (ev) {
  13. var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
  14. _this.endPoint = { x: x1, y: y1 };
  15. var _b = _this.startPoint, x = _b.x, y = _b.y;
  16. var style = _this.wrapper.style;
  17. var left = x;
  18. var top = y;
  19. var width = x1 - x;
  20. var height = y1 - y;
  21. if (x1 < x) {
  22. left = x1;
  23. width = x - x1;
  24. }
  25. if (y1 < y) {
  26. top = y1;
  27. height = y - y1;
  28. }
  29. style.left = left + "px";
  30. style.top = top + "px";
  31. style.width = width + "px";
  32. style.height = height + "px";
  33. };
  34. this.__drawOff = function () {
  35. document.removeEventListener('mousemove', _this.__draw);
  36. document.removeEventListener('mouseup', _this.__drawOff);
  37. _this.wrapper.oncontextmenu = null;
  38. _this.__domContainer.removeChild(_this.wrapper);
  39. var _a = _this.startPoint, x = _a.x, y = _a.y;
  40. var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
  41. // 选区太小的情况就忽略
  42. if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
  43. return;
  44. }
  45. var lt = [Math.min(x, x1), Math.min(y, y1)];
  46. var rt = [Math.max(x, x1), Math.max(y, y1)];
  47. var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode, true);
  48. var group = _this.lf.graphModel.group;
  49. elements.forEach(function (element) {
  50. // 如果节点属于分组,则不不选中节点
  51. if (!group || !group.getNodeGroup(element.id)) {
  52. _this.lf.selectElementById(element.id, true);
  53. }
  54. });
  55. _this.lf.emit('selection:selected', elements);
  56. };
  57. this.lf = lf;
  58. // 初始化isDefaultStopMoveGraph取值
  59. var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
  60. this.isDefaultStopMoveGraph = stopMoveGraph;
  61. lf.openSelectionSelect = function () {
  62. _this.openSelectionSelect();
  63. };
  64. lf.closeSelectionSelect = function () {
  65. _this.closeSelectionSelect();
  66. };
  67. }
  68. SelectionSelect.prototype.render = function (lf, domContainer) {
  69. var _this = this;
  70. this.__domContainer = domContainer;
  71. lf.on('blank:mousedown', function (_a) {
  72. var e = _a.e;
  73. var config = lf.getEditConfig();
  74. // 鼠标控制滚动移动画布的时候,不能选区。
  75. if (!config.stopMoveGraph || _this.__disabled) {
  76. return;
  77. }
  78. // 禁用右键框选,修复可能导致画布出现多个框选框不消失的问题,见https://github.com/didi/LogicFlow/issues/985
  79. var isRightClick = e.button === 2;
  80. if (isRightClick) {
  81. return;
  82. }
  83. var _b = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _b.x, y = _b.y;
  84. _this.startPoint = { x: x, y: y };
  85. _this.endPoint = { x: x, y: y };
  86. var wrapper = document.createElement('div');
  87. wrapper.className = 'lf-selection-select';
  88. wrapper.oncontextmenu = function prevent(ev) {
  89. ev.preventDefault();
  90. };
  91. wrapper.style.top = _this.startPoint.y + "px";
  92. wrapper.style.left = _this.startPoint.x + "px";
  93. domContainer.appendChild(wrapper);
  94. _this.wrapper = wrapper;
  95. document.addEventListener('mousemove', _this.__draw);
  96. document.addEventListener('mouseup', _this.__drawOff);
  97. });
  98. };
  99. /**
  100. * 设置选中的灵敏度
  101. * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true
  102. * @param isWholeNode 是否要节点的全部点都在选区范围才算选中。默认true
  103. */
  104. SelectionSelect.prototype.setSelectionSense = function (isWholeEdge, isWholeNode) {
  105. if (isWholeEdge === void 0) { isWholeEdge = true; }
  106. if (isWholeNode === void 0) { isWholeNode = true; }
  107. this.isWholeEdge = isWholeEdge;
  108. this.isWholeNode = isWholeNode;
  109. };
  110. /**
  111. * 开启选区
  112. */
  113. SelectionSelect.prototype.openSelectionSelect = function () {
  114. var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
  115. if (!stopMoveGraph) {
  116. this.isDefaultStopMoveGraph = false;
  117. this.lf.updateEditConfig({
  118. stopMoveGraph: true,
  119. });
  120. }
  121. this.open();
  122. };
  123. /**
  124. * 关闭选区
  125. */
  126. SelectionSelect.prototype.closeSelectionSelect = function () {
  127. if (!this.isDefaultStopMoveGraph) {
  128. this.lf.updateEditConfig({
  129. stopMoveGraph: false,
  130. });
  131. }
  132. this.close();
  133. };
  134. SelectionSelect.prototype.open = function () {
  135. this.__disabled = false;
  136. };
  137. SelectionSelect.prototype.close = function () {
  138. this.__disabled = true;
  139. };
  140. SelectionSelect.pluginName = 'selectionSelect';
  141. return SelectionSelect;
  142. }());
  143. exports.SelectionSelect = SelectionSelect;