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