NodeGroup.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /**
  2. * @desc : 自定义节点群组
  3. * @author : 张潇木
  4. * @date : 2023/1/6 16:38
  5. */
  6. import { Graph,Node } from '@antv/x6'
  7. export class NodeGroup extends Node {
  8. // region 属性
  9. collapsed = true //群组的状态,默认为收起
  10. expandSize = undefined //群组展开时的大小
  11. // endregion
  12. // region 构造方法
  13. postprocess() {
  14. // 特殊处理,否则会出现群组内部节点位置改变时,群组自动收起的bug
  15. // 如果存在子节点,那么不调用收起/展开方法
  16. if(!this.children){
  17. this.toggleCollapse(true)
  18. }
  19. }
  20. // endregion
  21. // region 获取当前节点展开状态
  22. isCollapsed() {
  23. return this.collapsed
  24. }
  25. // endregion
  26. // region 获取、设置当前节点展开大小
  27. getExpandSize() {
  28. return this.expandSize
  29. }
  30. setExpandSize(expandSize) {
  31. this.expandSize=expandSize
  32. }
  33. // endregion
  34. // region 收起/展开群组事件
  35. toggleCollapse(collapsed) {
  36. const target = collapsed == null ? !this.collapsed : collapsed
  37. if (target) {
  38. //收起
  39. this.attr('buttonSign', { d: 'M 1 5 9 5 M 5 1 5 9' })
  40. this.expandSize=this.getSize()
  41. this.resize(100, 40)
  42. } else {
  43. //展开
  44. this.attr('buttonSign', { d: 'M 2 5 8 5' })
  45. if (this.expandSize) {
  46. //有实际值以实际值为准
  47. this.resize(this.expandSize.width, this.expandSize.height)
  48. }else{
  49. //展开的默认值
  50. this.resize(240, 240)
  51. }
  52. }
  53. this.collapsed = target
  54. }
  55. // endregion
  56. }
  57. // region 群组配置
  58. NodeGroup.config({
  59. shape: 'rect',
  60. markup: [
  61. {
  62. tagName: 'rect',
  63. selector: 'body',
  64. },
  65. {
  66. tagName: 'image',
  67. selector: 'image',
  68. },
  69. {
  70. tagName: 'text',
  71. selector: 'text',
  72. },
  73. {
  74. tagName: 'g',
  75. selector: 'buttonGroup',
  76. children: [
  77. {
  78. tagName: 'rect',
  79. selector: 'button',
  80. attrs: {
  81. 'pointer-events': 'visiblePainted',
  82. },
  83. },
  84. {
  85. tagName: 'path',
  86. selector: 'buttonSign',
  87. attrs: {
  88. fill: 'none',
  89. 'pointer-events': 'none',
  90. },
  91. },
  92. ],
  93. },
  94. ],
  95. attrs: {
  96. body: {
  97. refWidth: '100%',
  98. refHeight: '100%',
  99. strokeWidth: 1,
  100. fill: 'rgba(95,149,255,0.05)',
  101. stroke: '#5F95FF',
  102. },
  103. image: {
  104. 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_0b51a4/afts/img/A*X4e0TrDsEiIAAAAAAAAAAAAAARQnAQ',
  105. width: 16,
  106. height: 16,
  107. x: 8,
  108. y: 12,
  109. },
  110. text: {
  111. fontSize: 12,
  112. fill: 'rgba(0,0,0,0.85)',
  113. refX: 30,
  114. refY: 15,
  115. },
  116. buttonGroup: {
  117. refX: '100%',
  118. refX2: -25,
  119. refY: 13,
  120. },
  121. button: {
  122. height: 14,
  123. width: 16,
  124. rx: 2,
  125. ry: 2,
  126. fill: '#f5f5f5',
  127. stroke: '#ccc',
  128. cursor: 'pointer',
  129. event: 'node:collapse',
  130. },
  131. buttonSign: {
  132. refX: 3,
  133. refY: 2,
  134. stroke: '#808080',
  135. },
  136. },
  137. tools:['node-editor'],
  138. })
  139. // endregion
  140. // region 注册群组节点
  141. Graph.registerNode('groupNode', NodeGroup)
  142. // endregion