添加节点

业务数据

  1. // 添加默认节点
  2.     addNode() {
  3.       this.graph.centerContent()
  4.       // TODO 添加节点位置的计算
  5.       // 生成随机数
  7.       this.graph.addNode({
  8.         shape: 'rect', // 指定使用何种图形，默认值为 'rect'
  9.         x: 10,
  10.         y: 50,
  11.         width: 110,
  12.         height: 38,
  13.         // html | svg DOM 结构
  14.         markup: [
  15.           // svg 矩形 边框
  16.           {
  17.             tagName: 'rect',
  18.             selector: 'body'
  19.           },
  20.           // svg text 放置实体名称
  21.           {
  22.             tagName: 'text',
  23.             selector: 'label'
  24.           },
  25.           // svg text 放置实体属性
  26.           {
  27.             tagName: 'text',
  28.             selector: 'subLabel'
  29.           }
  30.         ],
  31.         // 业务数据
  32.         // data: {
  33.         //   label: 'label',
  34.         //   attributes: [{ key: '', value: '' }]
  35.         // },
  36.         // 默认样式属性
  37.         attrs: defaultNodeAttrs,
  38.         // 链接桩
  39.         ports: {
  40.           // 链接桩组定义
  41.           groups: {
  42.             left: {
  43.               position: 'left',
  44.               attrs: defaultPortAttrs
  45.             },
  46.             top: {
  47.               position: 'top',
  48.               attrs: defaultPortAttrs
  49.             },
  50.             right: {
  51.               position: 'right',
  52.               attrs: defaultPortAttrs
  53.             },
  54.             bottom: {
  55.               position: 'bottom',
  56.               attrs: defaultPortAttrs
  57.             }
  58.           },
  59.           // 链接桩
  60.           items: [
  61.             {
  62.               id: 'port1',
  63.               group: 'left', // 指定分组名称
  64.               islined: false
  65.             },
  66.             {
  67.               id: 'port2',
  68.               group: 'top' // 指定分组名称
  69.             },
  70.             {
  71.               id: 'port3',
  72.               group: 'bottom' // 指定分组名称
  73.             },
  74.             {
  75.               id: 'port4',
  76.               group: 'right' // 指定分组名称
  77.             }
  78.           ]
  79.         }
  80.       })
  81.     },
  1. import i18n from '@/lang'
  2. const $t = i18n.global.t
  4. //  默认节点宽高
  5. export const DEFAULT_NODE_WIDTH = 110
  6. export const DEFAULT_NODE_HEIGHT = 38
  7. // 配置后节点宽度
  8. export const CONFIG_NODE_WIDTH = 144
  9. // 配置后高度根据属性行动态计算
  10. export const MAX_ATTRIBUTE_LINES = 5 + 1 // 最多显示的属性行数 +  溢出行...
  11. export const LINE_HEIGHT = 22
  12. export const LABEL_FONT_SIZE = 14
  13. export const ATTR_FONT_SIZE = 12
  14. // 发现对象起始点标记图标svg path 路径
  15. export const START_POINT_ICON_PATH =
  16.   'M227.2 374.4c57.6-57.6 121.6-54.4 195.2-16l272-150.4-16-105.6 240 240-105.6-16-150.4 272c38.4 76.8 41.6 140.8-16 195.2L480 627.2l-345.6 256 256-348.8c-73.6-70.4-163.2-160-163.2-160z M134.4 905.6c-6.4 0-9.6-3.2-16-6.4-6.4-6.4-9.6-19.2-3.2-28.8l246.4-332.8c-70.4-67.2-150.4-147.2-150.4-147.2-9.6-9.6-9.6-22.4 0-28.8 57.6-57.6 124.8-64 211.2-25.6L672 195.2l-12.8-89.6c0-9.6 3.2-19.2 12.8-22.4 9.6-3.2 19.2-3.2 25.6 3.2l240 240c6.4 6.4 9.6 16 3.2 25.6-3.2 9.6-12.8 12.8-22.4 12.8l-89.6-12.8-137.6 249.6c28.8 57.6 51.2 140.8-25.6 211.2-9.6 6.4-22.4 6.4-28.8 0l-153.6-153.6-336 240c-3.2 3.2-9.6 6.4-12.8 6.4z m124.8-531.2c28.8 28.8 92.8 92.8 147.2 144 6.4 6.4 9.6 19.2 3.2 28.8l-172.8 233.6 233.6-172.8c9.6-6.4 19.2-6.4 28.8 3.2l150.4 150.4c32-41.6 32-86.4-3.2-153.6-3.2-6.4-3.2-12.8 0-19.2l150.4-272c3.2-6.4 12.8-12.8 22.4-9.6l41.6 6.4-147.2-147.2 6.4 41.6c0 9.6-3.2 16-9.6 22.4l-272 150.4c-6.4 3.2-12.8 3.2-19.2 0-70.4-38.4-118.4-38.4-160-6.4z'
  18. // 无添加按钮的节点 markup 结构
  19. const defaultNodeMarkup = [
  20.   // svg 矩形 边框
  21.   {
  22.     tagName: 'rect',
  23.     selector: 'body'
  24.   },
  25.   // svg text 放置实体名称
  26.   {
  27.     tagName: 'text',
  28.     selector: 'label'
  29.   },
  30.   // svg text 放置实体属性
  31.   {
  32.     tagName: 'text',
  33.     selector: 'attrs'
  34.   }
  35. ]
  36. // 有添加按钮的节点markup结构
  37. const hasAddBtnNodeMarkup = [
  38.   // svg 矩形 边框
  39.   {
  40.     tagName: 'rect',
  41.     selector: 'body'
  42.   },
  43.   // svg text 放置实体名称
  44.   {
  45.     tagName: 'text',
  46.     selector: 'label'
  47.   },
  48.   // svg text 放置实体属性
  49.   {
  50.     tagName: 'text',
  51.     selector: 'attrs'
  52.   },
  53.   // 右侧添加按钮
  54.   {
  55.     tagName: 'g',
  56.     attrs: {
  57.       class: 'btn add'
  58.     },
  59.     children: [
  60.       // 为优化移动端，增大点击触发范围的不可见圆环
  61.       {
  62.         tagName: 'circle',
  63.         attrs: {
  64.           class: 'hidden-circle'
  65.         }
  66.       },
  67.       // 圆环
  68.       {
  69.         tagName: 'circle',
  70.         attrs: {
  71.           class: 'add-circle'
  72.         }
  73.       },
  74.       // + 号
  75.       {
  76.         tagName: 'text',
  77.         attrs: {
  78.           class: 'add'
  79.         }
  80.       }
  81.     ]
  82.   }
  83. ]
  85. // 默认节点的 attrs 样式: 虚线边框 无右侧添加按钮
  86. const defaultNodeAttrs = {
  87.   body: {
  88.     fill: 'var(--gray-3)',
  89.     stroke: 'var(--gray-6)',
  90.     strokeWidth: 1,
  91.     strokeDasharray: '4,3',
  92.     event: 'label:modal' //自定义点击事件，点击时触发弹窗编辑
  93.   },
  94.   label: {
  95.     textAnchor: 'middle',
  96.     textVerticalAnchor: 'middle',
  97.     refX: '50%',
  98.     refY: '50%',
  99.     text: $t('dataSource.prepare.entityWaitEdit'),
  100.     fill: 'var(--gray-7)',
  101.     fontSize: LABEL_FONT_SIZE,
  102.     textWrap: {
  103.       ellipsis: true,
  104.       width: DEFAULT_NODE_WIDTH - 24,
  105.       height: LINE_HEIGHT
  106.     },
  107.     event: 'label:modal' // 自定义点击事件，点击时触发弹窗编辑
  108.   },
  109.   attrs: {
  110.     textWrap: {
  111.       ellipsis: true,
  112.       width: CONFIG_NODE_WIDTH - 24
  113.     },
  114.     event: 'label:modal'
  115.   }
  116. }
  118. // 默认节点配置数据后的样式
  119. const hasDataNodeAttrs = JSON.parse(JSON.stringify(defaultNodeAttrs))
  120. hasDataNodeAttrs.body.fill = 'var(--gray-1)'
  121. hasDataNodeAttrs.body.stroke = 'var(--primary)'
  122. hasDataNodeAttrs.label.fill = 'var(--primary)'
  124. // 默认节点在连线模式下 点击选中时的 attrs 样式
  125. const selectionNodeAttrs = JSON.parse(JSON.stringify(defaultNodeAttrs))
  126. selectionNodeAttrs.body.fill = 'var(--primary)'
  127. selectionNodeAttrs.body.stroke = 'var(--primary)'
  128. selectionNodeAttrs.body.strokeDasharray = 'none'
  129. selectionNodeAttrs.label.fill = 'var(--gray-1)'
  131. // 有右侧添加按钮的节点 attr 样式
  132. const hasAddBtnNodeAttrs = {
  133.   body: {
  134.     fill: 'var(--gray-1)',
  135.     stroke: 'var(--primary)',
  136.     strokeWidth: 1,
  137.     strokeDasharray: '4,3',
  138.     event: 'label:modal'
  139.   },
  140.   label: {
  141.     textAnchor: 'middle',
  142.     textVerticalAnchor: 'middle',
  143.     refX: '50%',
  144.     refY: '50%',
  145.     text: $t('dataSource.prepare.entityWaitEdit'),
  146.     fill: 'var(--primary)',
  147.     fontSize: LABEL_FONT_SIZE,
  148.     event: 'label:modal' // 自定义点击事件，点击时触发属性编辑弹窗
  149.   },
  150.   attrs: {
  151.     textWrap: {
  152.       ellipsis: true,
  153.       width: DEFAULT_NODE_WIDTH - 24
  154.     },
  155.     fill: 'var(--primary)',
  156.     event: 'label:modal'
  157.   },
  158.   '.btn.add': {
  159.     refDx: 0,
  160.     refY: '50%',
  161.     event: 'node:add' // 自定义点击事件，点击时添加节点
  162.   },
  163.   '.btn.add > .hidden-circle': {
  164.     r: 16,
  165.     fill: 'transparent',
  166.     stroke: 'var(--primary)',
  167.     strokeWidth: 0
  168.   },
  169.   '.btn.add > .add-circle': {
  170.     r: 7,
  171.     fill: 'var(--gray-1)',
  172.     stroke: 'var(--primary)',
  173.     strokeWidth: 1
  174.   },
  175.   '.btn.add > text': {
  176.     fontSize: 12,
  177.     stroke: 'var(--primary)',
  178.     strokeWidth: 1.5,
  179.     refDx: '-150%',
  180.     refY: '0%',
  181.     fontFamily: 'Times New Roman',
  182.     text: '+'
  183.   }
  184. }
  186. export default {
  187.   defaultNodeMarkup,
  188.   hasAddBtnNodeMarkup,
  189.   defaultNodeAttrs,
  190.   hasDataNodeAttrs,
  191.   hasAddBtnNodeAttrs,
  192.   selectionNodeAttrs
  193. }

markup 节点结构

markup 自定义事件

  1. // 监听自定义事件
  2. this.graph.on('node:add', ({ e, node }) => {
  3.   console.log('e=>', e)
  4.   if (node.id == 1) {
  5.     this.graph.addNode({
  6.       id: 2,
  7.       shape: 'rect',
  8.       width: 110,
  9.       height: 38,
  10.       x: 400,
  11.       y: 100,
  12.       // 节点 html | svg DOM 结构
  13.       markup: NODE.hasAddBtnNodeMarkup,
  14.       attrs: NODE.hasAddBtnNodeAttrs
  15.     })
  16.     this.graph.addEdge({
  17.       source: 1,
  18.       target: 2,
  19.       labels: EDGE.defaultEdge.labels,
  20.       attrs: EDGE.defaultEdge.attrs
  21.     })
  23.     this.graph.centerContent()
  24.     this.addIconSrc = require('@/assets/add2x_disabled.png')
  25.     this.lineIconSrc = require('@/assets/lined2x.png')
  26.     this.$refs.lineIcon.style.cursor = 'pointer'
  27.     this.$refs.addIcon.style.cursor = 'not-allowed'
  28.     console.log(this.graph.getNodes())
  29.   } else {
  30.     this.graph.addNode({
  31.       id: 1,
  32.       shape: 'rect',
  33.       width: 110,
  34.       height: 38,
  35.       x: 100,
  36.       y: 100,
  37.       // 节点 html | svg DOM 结构
  38.       markup: NODE.hasAddBtnNodeMarkup,
  39.       attrs: NODE.hasAddBtnNodeAttrs
  40.     })
  41.     this.graph.addEdge({
  42.       source: 2,
  43.       target: 1,
  44.       labels: EDGE.defaultEdge.labels,
  45.       attrs: EDGE.defaultEdge.attrs
  46.     })
  48.     this.graph.centerContent()
  49.     this.addIconSrc = require('@/assets/add2x_disabled.png')
  50.     this.lineIconSrc = require('@/assets/lined2x.png')
  51.     this.$refs.lineIcon.style.cursor = 'pointer'
  52.     this.$refs.addIcon.style.cursor = 'not-allowed'
  53.     console.log(this.graph.getNodes())
  54.   }
  55. })