Jsplumb使用及总结-京东云开发者社区

### 1 需求分析

最近接到的一个业务需求是这样的：左侧列表页的指标可拖动，编辑页列表间可连线，点击连线需要弹出对话框填写指标间的连接关系。点击保存后编辑页需要根据后端数据绘制dom，在父子指标间自动连线，并回显对话框的连接关系。

根据需求来看需要实现一个类工作流程设计器的功能，目前github社区存在几款可用于设计流程图的绘图框架:

##### 1.go.js

GoJS 通过自定义模板和布局来创建创建包含节点、连线、分组的复杂图表。GoJS是一个MVVM模型，也就是Model模型同View视图的双向绑定，类似于AngularJS。View部分包括了整个图表Diagram风格的定义，节点Node的定义，和连线Link的定义.它是使用Canvas进行图形的渲染.

优点：
- 图形模板以及图形对象属性与模型数据的数据绑定, 数据驱动界面更新
- 官方提供不同图形领域的DEMO

缺点：
- 是闭源收费的商业产品
- 缺乏中文文档，上手难度较大

##### 2.jsPlumb

一套开源的流程图创建工具 ，小巧精悍，使用简单。它提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等工具。jsPlumb 有社区版跟收费版，我们可使用的是社区版。

优点：
- 支持React,Vue,Angular等多种框架 
- 可高度定制化节点 
- 数据可以自动或按需加载
- 中文文档齐全，易上手

缺点：
- HTML+CSS导致难以模块复用代码
- 画布没有边界自动扩充功能

##### 3.JointJS

一个开源的、基于JavaScript的图表库，可以用来创建静态图表、完全可交互的图表、 WEB在线流程图、应用程序。

优点：
- 通过MV结构,修改modal自动更新View 
- 可以导出JSON，也能通过JSON配置导入直接生成图形

缺点：
- 常用的缩放、画布拖拽、自动布局、交互式画图等功能都没有内置，需要自行编写。
- 依赖Backbone,jQuery,Lodash

##### 4.mxGraph

是一个js绘图组件，适用在网页设计/编辑流程图、图表、网络图和普通图形的web应用程序，draw.io工具就是基于mxGraph开发的。

优点：
- 提供丰富的api满足各种业务场景 
- 不需要第三方插件，兼容性较好

缺点：
- 缺点就是介绍框架简介以及API文档不全，社区问题也较少更新。
- 相对 jsPlumb 不能使用 css 自定义节点样式，完全通过 js 完成，比较麻烦。

##### 5.GG-Editor

基于 G6 和 React 的可视化图编辑器，G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

优点：
- 支持Canvas和SVG两种渲染方式 
- 中文文档,文档比较友好上手容易

缺点：
- 只提供图形绘制能力,图形编辑能力需要自己另外开发

综上，jsplumb由于完全开源，文档也比较齐全，最终选择了jsplumb作为本次框架。

### 2 简介

#### 2.1 Jsplumb简介

jsPlumb是一个JavaScript的连接库，该项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员。它可以根据不同需求，在两个元素之间生成连线，一个很典型的应用就是绘制流程图。jsPlumb通过一种强大的声明机制，可以对端点和连接线的样式做出精确的控制，支持拖拽元素，创建/删除连接线，节点的缩放、删除，限制节点拖放区域，事件绑定等功能。它能非常方便地实现“流程图编辑器”等的功能。

#### 2.2 核心概念

- Source: 源对象。jsPlumb 通过元素的 id 属性获取对象。
- Target: 目标对象。jsPlumb 通过元素的 id 属性获取对象。Source 和 Target 都可以是任何元素，区别是，Source 是起点，Target 是终点。 例如，connector 中的箭头总是从 Source 指向 Target。
- Anchor：锚点。是 Source 和 Target 对象上可以连接 Connector 的点。Anchor 并不是一个视觉概念，它是不可见的。
- Connector: 连接线。
- Endpoint: 端点。需要注意的是，箭头并不是一种端点样式，它是通过 overlay 添加的。
- Overlay: 添加到连接线上的附件。例如箭头和标签。

### 3 安装和使用

#### 3.1 安装

```
npm install jsplumb --save
```

引用：

```javascript
import { jsPlumb } from "jsplumb";
```

#### 3.2 元素拖拽

设置元素属性draggable为true,并监听开始拖拽时的事件dragstart。

```xml
<el-button
          v-for="(item, cindex) in group"
          :id="item.id"
          :key="cindex"
          class="drag-content"
          draggable="true"
          :disabled="item.disable"
          :title="item.name"
          @dragstart.native="onDragstart($event)"
        >
```

同样的，在编辑区域可以监听dragenter事件和dragover事件来对元素进入有效区域和放下目标节点时设置相关操作。进入编辑区后，如果想要元素继续能够拖动，则可以使用jsPlumbInstance.draggable配置来设置。

```javascript
JsPlumb.draggable("elementId"); 
```

#### 3.3 节点连线

jsplumb必须等到DOM加载完成后使用：

```javascript
jsPlumb.ready(function(){  //简写
    ...
    // jsPlumb相关初始化代码
    ...
});
```

通过jsPlumb.connect(…)创建连接时动态创建，传入参数为source和target元素id或DOM元素。

![](//img1.jcloudcs.com/developer.jdcloud.com/9e00d639-588d-4b63-ba75-fba5e5b00e1b20220222140523.png)

```javascript
jsplumb.connect({ source: `model_${this.childNode.parentId}`, target: `model_${this.childNode.confId}`, connector: ['Flowchart'], anchors: ['Bottom', 'Top'], endpointStyle: this.endCircle })
```

如果想拖动创建连接，只需要给节点设置isSource和isTarget.

```javascript
  // 起点样式设置
      var startCircle = {
        anchor: [0.5, 1, 0, 1],//锚点位置
        endpoint: ['Dot', { cssClass: 'endpointcssClass' }], // 端点形状
        connectorStyle: connectorPaintStyle, // 连线样式
        connectorHoverStyle: connectorHoverStyle, // 悬浮连线样式
        isSource: true, // 是否可拖动（作为连接线起点）
        isTarget: false, // 是否可以放置（连接终点）
        ...
      }

// 终点样式设置
      var endCircle = {
        anchor: [0.5, 0, 0, -1],//锚点位置
        endpoint: ['Dot', { cssClass: 'endpointcssClass' }], // 端点形状
        connectorStyle: connectorPaintStyle, // 连线样式
        connectorHoverStyle: connectorHoverStyle, // 悬浮连线样式
        isSource: false, // 是否可拖动（作为连接线起点）
        isTarget: true, // 是否可以放置（连接终点）
        ...
      }
```

![](//img1.jcloudcs.com/developer.jdcloud.com/582184e4-ee86-444d-b969-6e61df67169820220222140818.gif)

#### 3.4 给连线添加样式

可以通过connector去设置链接线的形状、颜色、箭头等。

jsplumb连线的样式有四种
- Bezier: 贝塞尔曲线
- Flowchart: 具有90度转折点的流程线
- StateMachine: 状态机
- Straight: 直线

paintstyle的stroke可以设置连线的颜色，strokeWidth可以设置连线的宽度。

箭头实际上是通过设置overlays去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。 一根连线是可以添加多个箭头的。overlays有五种取值：
- Arrow 一个可配置的箭头
- Label 标签，可以在链接上显示文字信息
- PlainArrow 原始类型的箭头
- Diamond 菱形箭头
- Custom 自定义类型

```javascript
jsPlumb.connect({
   source: 'item_left',
   target: 'item_right',
   endpoint: 'Rectangle',//端点的形状
   connector: ['Bezier'], //连线形状
   paintStyle: { stroke: 'lightgray', strokeWidth: 3 }, //连接线样式
   overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ] //箭头样式
})
```

![](//img1.jcloudcs.com/developer.jdcloud.com/c984940b-e8c3-44e4-8b27-65a3670d6a9120220222141014.png)

#### 3.5 给连线添加点击事件

jsplumb.bind可以监听多种事件，如点击连线可以用：jsplumb.bind('click',function(info)).

info具有的属性：
- connection: 新连接，可以注册监听
- sourceId: 连接的源元素id
- targetId: 连接的目标元素id
- source: 连接的源元素
- target: 连接的目标元素
- sourceEndpoint: 连接的源端点
- targetEndpoint: 连接的目标端点

以及jsplumb.bind('connection',function(info)) 通知连接建立。

```javascript
 jsplumb.bind('connection', function(info) {
   if (info.sourceId === info.targetId) {
    jsPlumb.deleteConnection(info.connection)
    alert('节点不可自连接')
    }
   return
}

jsplumb.bind('click', function(info) {
     alert('点击连线')  
})
```

![](//img1.jcloudcs.com/developer.jdcloud.com/2998d02d-94dd-4b2f-bba0-59f934521a7d20220222141143.gif)

#### 3.6 删除节点及节点上的连线

jsplumb.remove（nodeid）可以删除相关节点及连线，nodeid为节点id。

```javascript
 // 删除结点
    removeElement(id, taskId) {
     setTimeout(function () {
          jsPlumb.remove("item_left");
        }, 5000)  //5秒后删除该节点
}
```

![](//img1.jcloudcs.com/developer.jdcloud.com/ba1baad0-37b0-4cf2-8c9b-34f00ef945c020220222141223.gif)

#### 3.7 流程图生成的数据

在项目中每拖拽一个节点进入编辑区，则向任务列表中添加一个该节点的描述对象。在点击提交按钮时，我们可以看到控制台输出的流程图数据。

![](//img1.jcloudcs.com/developer.jdcloud.com/7c4b5481-eddb-495f-b094-96245728d0ef20220222141244.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/de73c859-a80e-4dcc-b5a6-e00ac7f032f520220222141253.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/9979cc35-a3c5-452a-9359-028970840d5520220222141259.gif)

### 4 总结

通过使用Jsplumb完成了流程图的编辑，但是在具体使用过程中发现有很多地方需要使用到原生js来完成相应的功能。例如将节点拖拽到编辑区后需要自己操作dom对节点进行定位，并添加css样式等。需要注意的是由于 Jsplumb 是使用绝对定位的方式，相对定位会使绘制的图像例如 Endpoint，Connect 等会有偏移。

本案例在数据连接平台(http://dbcp.jdl.cn)中有所应用，若点击后页面一直跳转请清空缓存再重新登录。具体可以在导航栏中报表管理里的报表设置，点击表格id即可看到。最终效果如下：

![](//img1.jcloudcs.com/developer.jdcloud.com/d65fa600-de53-457f-867a-d94c89c1598720220222141327.gif)

------------

###### 自猿其说Tech-京东物流技术发展部
###### 作者：颜之婷