1. /*
    2.  * @Description: X6 ports 链接桩配置
    3.  * @Author: huhaonan@sics.cn
    4.  * @Date: 2021-04-17 11:18:21
    5.  * @LastEditors: huhaonan@sics.cn
    6.  * @LastEditTime: 2021-04-17 11:37:50
    7.  */
    9. // 链接桩默认的 attrs 样式
    10. export const defaultPortAttrs = {
    11.   circle: {
    12.     r: 6,
    13.     magnet: true, //使链接桩在连线交互时可以被连接上
    14.     stroke: 'var(--white30)',
    15.     strokeWidth: 1,
    16.     strokeDasharray: '3,2',
    17.     fill: 'rgb(19, 19, 38)'
    18.   }
    19. }
    21. // 链接桩有链接线时的 attrs 样式
    22. export const hasLinedPortAttrs = {
    23.   circle: {
    24.     r: 6,
    25.     magnet: true,
    26.     stroke: 'var(--main)',
    27.     strokeWidth: 1,
    28.     strokeDasharray: '3,0',
    29.     fill: 'rgb(19, 19, 38)'
    30.   }
    31. }
    1. // 监听连线事件 在连线后改变链接桩样式
    2.       this.graph.on('edge:connected', (args) => {
    3.         console.log('edge:connected args ==>', args)
    5.         // 被连接的节点
    6.         const target = args.currentCell
    7.         const elem = args.currentMagnet
    8.         const targetPortId = elem.getAttribute('port')
    9.         // 触发 port 重新渲染
    10.         target.setPortProp(targetPortId, 'attrs', hasLinedPortAttrs)
    12.         // 连接前的节点
    13.         const source = args.edge.getSourceCell()
    14.         const sourcePortId = args.edge.getSourcePortId()
    15.         source.setPortProp(sourcePortId, 'attrs', hasLinedPortAttrs)
    16.       })