从0到1实现流程图06-连接状态篇

开始

在手动连线的过程中，还需要处理一些交互细节，比如到达连接桩附近自动吸附、可连接元素的高亮显示等，幸运的是这些都不需要我们自己去实现，X6 提供了便利的配置方式帮我们解决这些问题。

实现

连接配置

当连线到达连接桩附近时，我们希望连线会自动吸附到连接桩上面，这样交互体验会更好：

const graph = new Graph({
  connecting: {
    snap: {
      radius: 20, // 离目标 20px 的时候自动吸附
    },
  }
})

现在拖动连线到空白处放开后，会生成一条终点在空白处的连线，这种连线在流程图中是无效的连线，所以希望如果终点在空白处时，该连线自动消失：

const graph = new Graph({
  connecting: {
    allowBlank: false
  }
})

在实际业务中还需要用户根据业务逻辑来定义连线有效性，X6 根据判断的先后顺序提供了三个方法：

方法	触发时机
validateMagnet	点击 magnet 元素时根据 validateMagnet 返回值判断是否新增边
validateConnection	拖拽连线的过程中根据 validateConnection 返回值判断是否可以连接
validateEdge	当停止拖动边的时候根据 validateEdge 返回值来判断边是否生效，如果返回 false, 该边会被清除

const graph = new Graph({
  connecting: {
    validateConnection({ targetMagnet }) {
      if (targetMagnet) {
        // 只能连接 group 为 top 的连接桩
        return targetMagnet!.getAttribute('port-group') === 'top'
      }
      return false
    }
  }
})

高亮配置

从上图我们可以发现，当连接桩可以被连接的时候，当连线到达它附近时，会出现高亮的效果，这个效果其实也是可以自定义的：

const graph = new Graph({
  highlighting: {
    magnetAdsorbed: {
      name: 'stroke',
      args: {
        attrs: {
          fill: '#D06269',
          stroke: '#D06269',
        },
      },
    }
  }
})

最后

X6 的很多功能都是从实际业务场景中沉淀出来的，在一些交互细节的地方打磨的已经足够光滑，但是还有一些不够好的地方，希望能得到大家的反馈。

1. 源码：传送门
2. 记得给 X6 仓库加星