index.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.GroupNode = exports.Group = void 0;
  4. var GroupNode_1 = require("./GroupNode");
  5. exports.GroupNode = GroupNode_1.default;
  6. var DEFAULT_TOP_Z_INDEX = -1000;
  7. var DEFAULT_BOTTOM_Z_INDEX = -10000;
  8. var Group = /** @class */ (function () {
  9. function Group(_a) {
  10. var _this = this;
  11. var lf = _a.lf;
  12. this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
  13. this.nodeGroupMap = new Map();
  14. this.graphRendered = function (data) {
  15. // 如果节点
  16. if (data && data.nodes) {
  17. data.nodes.forEach(function (node) {
  18. if (node.children) {
  19. node.children.forEach(function (nodeId) {
  20. _this.nodeGroupMap.set(nodeId, node.id);
  21. });
  22. }
  23. });
  24. }
  25. };
  26. this.appendNodeToGroup = function (_a) {
  27. var data = _a.data;
  28. // 如果这个节点之前已经在group中了,则将其从之前的group中移除
  29. var preGroupId = _this.nodeGroupMap.get(data.id);
  30. if (preGroupId) {
  31. var preGroup = _this.lf.getNodeModelById(preGroupId);
  32. preGroup.removeChild(data.id);
  33. _this.nodeGroupMap.delete(data.id);
  34. preGroup.setAllowAppendChild(false);
  35. }
  36. // 然后再判断这个节点是否在某个group中,如果在,则将其添加到对应的group中
  37. var nodeModel = _this.lf.getNodeModelById(data.id);
  38. var bounds = nodeModel.getBounds();
  39. var group = _this.getGroup(bounds, data);
  40. if (!group)
  41. return;
  42. var isAllowAppendIn = group.isAllowAppendIn(data);
  43. if (!isAllowAppendIn) {
  44. _this.lf.emit('group:not-allowed', {
  45. group: group.getData(),
  46. node: data,
  47. });
  48. return;
  49. }
  50. group.addChild(data.id);
  51. _this.nodeGroupMap.set(data.id, group.id);
  52. group.setAllowAppendChild(false);
  53. // 如果这个节点是分组,那么将其子节点也记录下来
  54. if (nodeModel.isGroup) {
  55. data.children.forEach(function (nodeId) {
  56. _this.nodeGroupMap.set(nodeId, data.id);
  57. });
  58. _this.nodeSelected({ data: data, isSelected: false, isMultiple: false });
  59. }
  60. };
  61. this.deleteGroupChild = function (_a) {
  62. var data = _a.data;
  63. // 如果删除的是分组节点,则同时删除分组的子节点
  64. if (data.children) {
  65. data.children.forEach(function (nodeId) {
  66. _this.nodeGroupMap.delete(nodeId);
  67. _this.lf.deleteNode(nodeId);
  68. });
  69. }
  70. var groupId = _this.nodeGroupMap.get(data.id);
  71. if (groupId) {
  72. var group = _this.lf.getNodeModelById(groupId);
  73. group.removeChild(data.id);
  74. _this.nodeGroupMap.delete(data.id);
  75. }
  76. };
  77. this.setActiveGroup = function (_a) {
  78. var data = _a.data;
  79. var nodeModel = _this.lf.getNodeModelById(data.id);
  80. var bounds = nodeModel.getBounds();
  81. var newGroup = _this.getGroup(bounds, data);
  82. if (_this.activeGroup) {
  83. _this.activeGroup.setAllowAppendChild(false);
  84. }
  85. if (!newGroup || (nodeModel.isGroup && newGroup.id === data.id))
  86. return;
  87. var isAllowAppendIn = newGroup.isAllowAppendIn(data);
  88. if (!isAllowAppendIn) {
  89. return;
  90. }
  91. _this.activeGroup = newGroup;
  92. _this.activeGroup.setAllowAppendChild(true);
  93. };
  94. /**
  95. * 1. 分组节点默认在普通节点下面。
  96. * 2. 分组节点被选中后,会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。
  97. * 3. 分组节点取消选中后,不会将分组节点重置为原来的高度。
  98. * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图,所以不考虑一张流程图超过1000个分组节点的情况。
  99. */
  100. this.nodeSelected = function (_a) {
  101. var data = _a.data, isMultiple = _a.isMultiple, isSelected = _a.isSelected;
  102. var nodeModel = _this.lf.getNodeModelById(data.id);
  103. _this.toFrontGroup(nodeModel);
  104. // 重置所有的group zIndex,防止group节点zIndex增长为正。
  105. if (_this.topGroupZIndex > DEFAULT_TOP_Z_INDEX) {
  106. _this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
  107. var allGroups = _this.lf.graphModel.nodes
  108. .filter(function (node) { return node.isGroup; })
  109. .sort(function (a, b) { return a.zIndex - b.zIndex; });
  110. var preZIndex = 0;
  111. for (var i = 0; i < allGroups.length; i++) {
  112. var group = allGroups[i];
  113. if (group.zIndex !== preZIndex) {
  114. _this.topGroupZIndex++;
  115. preZIndex = group.zIndex;
  116. }
  117. group.setZIndex(_this.topGroupZIndex);
  118. }
  119. }
  120. // FIX #1004
  121. // 如果节点被多选,
  122. // 这个节点是分组,则将分组的所有子节点取消选中
  123. // 这个节点是分组的子节点,且其所属分组节点已选,则取消选中
  124. if (isMultiple && isSelected) {
  125. if (nodeModel.isGroup) {
  126. nodeModel.children.forEach(function (child) {
  127. var childModel = _this.lf.graphModel.getElement(child);
  128. childModel.setSelected(false);
  129. });
  130. }
  131. else {
  132. var groupId = _this.nodeGroupMap.get(data.id);
  133. if (groupId) {
  134. var groupModel = _this.lf.getNodeModelById(groupId);
  135. groupModel.isSelected && nodeModel.setSelected(false);
  136. }
  137. }
  138. }
  139. };
  140. this.toFrontGroup = function (model) {
  141. if (!model || !model.isGroup) {
  142. return;
  143. }
  144. _this.topGroupZIndex++;
  145. model.setZIndex(_this.topGroupZIndex);
  146. if (model.children) {
  147. model.children.forEach(function (nodeId) {
  148. var node = _this.lf.getNodeModelById(nodeId);
  149. _this.toFrontGroup(node);
  150. });
  151. }
  152. };
  153. lf.register(GroupNode_1.default);
  154. this.lf = lf;
  155. lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
  156. if (model.isGroup) { // 如果移动的是分组,那么分组的子节点也跟着移动。
  157. var nodeIds = _this.getNodeAllChild(model);
  158. lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true);
  159. return true;
  160. }
  161. var groupModel = lf.getNodeModelById(_this.nodeGroupMap.get(model.id));
  162. if (groupModel && groupModel.isRestrict) { // 如果移动的节点存在分组中,且这个分组禁止子节点移出去。
  163. var _a = model.getBounds(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
  164. var r = groupModel.isAllowMoveTo({
  165. x1: x1 + deltaX,
  166. y1: y1 + deltaY,
  167. x2: x2 + deltaX,
  168. y2: y2 + deltaY,
  169. });
  170. return r;
  171. }
  172. return true;
  173. });
  174. lf.graphModel.group = this;
  175. lf.on('node:add,node:drop,node:dnd-add', this.appendNodeToGroup);
  176. lf.on('node:delete', this.deleteGroupChild);
  177. lf.on('node:dnd-drag,node:drag', this.setActiveGroup);
  178. lf.on('node:click', this.nodeSelected);
  179. lf.on('graph:rendered', this.graphRendered);
  180. }
  181. /**
  182. * 获取一个节点内部所有的子节点,包裹分组的子节点
  183. */
  184. Group.prototype.getNodeAllChild = function (model) {
  185. var _this = this;
  186. var nodeIds = [];
  187. if (model.children) {
  188. model.children.forEach(function (nodeId) {
  189. nodeIds.push(nodeId);
  190. var nodeModel = _this.lf.getNodeModelById(nodeId);
  191. if (nodeModel.isGroup) {
  192. nodeIds = nodeIds.concat(_this.getNodeAllChild(nodeModel));
  193. }
  194. });
  195. }
  196. return nodeIds;
  197. };
  198. /**
  199. * 获取自定位置其所属分组
  200. * 当分组重合时,优先返回最上层的分组
  201. */
  202. Group.prototype.getGroup = function (bounds, nodeData) {
  203. var nodes = this.lf.graphModel.nodes;
  204. var groups = nodes.filter(function (node) { return node.isGroup && node.isInRange(bounds) && node.id !== nodeData.id; });
  205. if (groups.length === 0)
  206. return;
  207. if (groups.length === 1)
  208. return groups[0];
  209. var topGroup = groups[groups.length - 1];
  210. for (var i = groups.length - 2; i >= 0; i--) {
  211. if (groups[i].zIndex > topGroup.zIndex) {
  212. topGroup = groups[i];
  213. }
  214. }
  215. return topGroup;
  216. };
  217. /**
  218. * 获取某个节点所属的groupModel
  219. */
  220. Group.prototype.getNodeGroup = function (nodeId) {
  221. var groupId = this.nodeGroupMap.get(nodeId);
  222. if (groupId) {
  223. return this.lf.getNodeModelById(groupId);
  224. }
  225. };
  226. Group.pluginName = 'group';
  227. return Group;
  228. }());
  229. exports.Group = Group;