添加节点

业务数据

  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. /*
  2.  * @Description: X6 node 节点配置
  3.  * @Author: huhaonan@sics.ac.cn
  4.  * @Date: 2021-04-17 14:48:36
  5.  * @LastEditors: huhaonan@sics.ac.cn
  6.  * @LastEditTime: 2021-04-19 09:29:54
  7.  */
  9. // 节点新增时默认的 attrs 样式
  10. export const defaultNodeAttrs = {
  11.   body: {
  12.     // refWidth: '200%',
  13.     // refHeight: '100%',
  14.     fill: 'var(--white8)',
  15.     stroke: 'var(--white30)',
  16.     strokeWidth: 1,
  17.     strokeDasharray: '4,3'
  18.   },
  19.   label: {
  20.     textWrap: {
  21.       ellipsis: true,
  22.       width: -10
  23.     },
  24.     textAnchor: 'middle',
  25.     textVerticalAnchor: 'middle',
  26.     refX: '50%',
  27.     refY: '50%',
  28.     text: '实体待配置',
  29.     fill: 'var(--main)',
  30.     fontSize: 14
  31.   }
  32. }
  34. // 节点设置业务数据后的 attrs 样式
  35. export const hasDataNodeAttrs = {}
  37. // 节点 tool 工具
  38. export const nodeTool = [
  39.   {
  40.     // 根据节点的包围盒渲染一个包围节点的矩形
  41.     name: 'boundary',
  42.     args: {
  43.       attrs: {
  44.         fill: '#7c68fc',
  45.         stroke: 'var(--main)',
  46.         'stroke-width': 1,
  47.         'fill-opacity': 0.1
  48.       }
  49.     }
  50.   },
  51.   {
  52.     // 在指定的位置处，渲染一个删除按钮
  53.     name: 'button-remove',
  54.     args: {
  55.       x: '100%',
  56.       y: 0,
  57.       offset: { x: -10, y: 10 }
  58.     }
  59.   }
  60. ]

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. })