使用jsplumb绘图，实现连线

近期有个需求，实现节点之间的连线，选用的jsplumb来绘制。

我自己在实现过程中，遇到了重绘问题/加载顺序问题/自动刷新过程中保持连线正确等很多问题，查了好多资料后，得以解决，有问题的小伙伴可以一起交流。

jsplumb涉及的几个重要网址，可以作为研发过程中的依据：

 jsplumb官网：https://jsplumbtoolkit.com

 jsplumb中文（这个中文网站列出的API还是比较完善的）：https://github.com/wangduanduan/jsplumb-chinese-tutorial，https://wdd.js.org/jsplumb-chinese-tutorial/#/

jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的古董浏览器，则使用VML技术。

就该库而言，我认为有一个很重要的点，即视图与数据结构同步。jsplumb并不维护数据结构，数据结构需要自己去维护，如果页面发生改变，jsplumb会通过事件通知你。你通过事件去改变你的数据。

 

需要特别注意的一点是，jsplumb是操作dom进行运行的，必须要等dom全部加载完之后在进行渲染jsPlumb。vue开发的话，可以写在this.$nextTick方法里。流程图更新时，会重新获取dom的id。

同时需要注意：当数据改变时，流程图也要跟着改变，所以要清除之前的连接线，然后重新绘制。

清除连线调用reset方法：

let plumbIns = jsPlumb.getInstance();
plumbIns.reset();

使用该组件库最基本的配置如下代码:

private connectEle(relations) {
    // 定义默认配置
    const defaultConfig = {
      // 默认从左右选取最优锚点
      anchor: ['Left', 'Right'],
      // 连线为直线，间隙为10
      connector: ['Straight', { gap: 10 }],
      // 端点为空
      endpoint: 'Blank',
      // 设定线条样式
      paintStyle: { stroke: '#cdf1f1', strokeWidth: 2 },
      Container: 'monitor-chart-container',
    };
    this.plumbIns.ready(() => {
      relations.forEach(ele => {
        defaultConfig.paintStyle = ele.reachable
          ? { stroke: '#cdf1f1', strokeWidth: 2 }
          : { stroke: '#aaaaaa', strokeWidth: 1 };
        this.plumbIns.connect(
          {
            source: ele.source,
            target: ele.target,
          },
          defaultConfig,
        );
      });
    });
  }