jsplumb使用说明自编版

1. 概述

先来说说大体流程：
1. 实例化
2. 绑定容器
3. 初始化，全局的jsplumb事件都是这里绑定
4. 设置节点并设置节点是否可拖动，同时给节点绑锚点，节点就是流图上的块块
6. 连接线并放置标签

注意：下文中出现的 id 均指的不是DOM元素的id，而是为了定义用的id

2. 实例化

使用getInstance({配置})来进行实例化，以node.js中的实例化为例

require('jsPlumb')var jsp = window.jsPlumb.getInstance({    Endpoint: 'Dot',    Connector: [ 'Straight', {} ]})

上面的代码会生成一个名为jsp的实例，配置中的含义为，点为原点，线为直线
（注意：下文中将以这个名为jsp的实例去写示例代码）

3. 容器

jsplumb的实例要绑定在一个div上，我们管这个div叫容器，因为容器里要放绝对定位的元素，所以建议给容器设置css postition:relative
绑定容器的命令如下

jsp.setContainer(DOM元素)

4. 初始化

绑定完容器后就可以初始化了，jsplumb 已知有两种初始化调用方法：ready 和 doWhileSuspended，该用哪个是个问题，我们看看这俩有什么不同

doWhileSuspended的流程：
1. 暂停绘制（实际上会判断一下是不是在绘制）
2. 执行传入的函数
3. 继续绘制

ready的流程：
1. 判断页面是否加载完成
2. 如果没有加载完成等待9毫秒，再没有再等
3. 如果完成则执行传入的函数

ready是供jsplumb自己调用的，用来等待页面加载完成再开始绘制，建议绑定动作还是应该在doWhileSuspended里面执行。

因为传入doWhileSuspended是个函数，所以要执行多个命令例如绑定各种事件需要这么写：

jsp.doWhileSuspended(function () {    // 绑定事件A    // 绑定事件B})

5. 设置节点

所谓的节点就是一群div，需要设置 postition:absolute
除此之外还需要设置拖动和绑锚点

5.1. 设置拖动

jsp.draggable(节点元素DOM, {    grid: [20, 20],    stop: function (el) {        // 停止拖拽时想执行的动作    }})

grid是拖动时的网格尺寸，设置后拖动时会自动吸附网格，方便对齐

5.2. 绑锚点

绑锚点时先要有个锚点kv，支出锚点的名称和位置的对应关系，为什么这样，因为后面要用这个锚点名称和节点组成uuid，连线使用有个uuids会用到这个uuid。

var anchors = {'Left': [0, 0.5, -1, 0],'Right': [1, 0.5, 1, 0]}

还有个锚点的额外参数

var EndpointOptions = {    endpoint: ['Dot', {radius: 7, cssClass: 'topo-show-ez-endpoint'}],    dragOptions: {radius: 0, hoverClass: 'topo-show-dragHover', cursor: 'topo-show-pointer'},    isSource: true,    isTarget: true,    reattach: false,    detachable: false,    maxConnections: 20,    connectorPaintStyle: {        strokeWidth: 2,        stroke: '#000',        joinstyle: 'round',        outlineStroke: '#000',        outlineWidth: 1    },    connectorOverlays: [    ],    events: {    }}

node_id 是用来区分节点的id

for (var key in anchors) {    jsp.addEndpoint(节点DOM, EndpointOptions, {      anchor: anchors[key],      uuid: node_id + '-' + key,      parameters: {        'name': key      }    })}

6. 连线

连线有两种方式，代码连线和手动连线

• 代码连线就是调用jsp.connect，传入参数，进行连接
• 手动连线就是使用者从锚点拉线

6.1. 代码连线

下面演示代码连线：conn是连线的数据，包含source的id（文本）, target的id（文本），anchors（数组，包含起终锚点的名称）

var connection = jsp.connect({  uuids: [conn.source + '-' + conn.anchors[0], conn.target + '-' + conn.anchors[1]],  // 是否可编辑  editable: false,  parameters: {    connId: conn.id,    connector: conn.connector  }})

如果连接成功的话connection就不是undefined

6.2. 连线额外设定

续上面的连线代码，对已经连接线做额外设定，包括样式、id以及覆盖物

// 如果有线的话if (connection) {    // 正常样式    connection.setPaintStyle({        // 设定线宽，单位px        strokeWidth: 2,        // 设定线芯的颜色        stroke: '#7faaee',        // 设定线外边的颜色        outlineStroke: 'transparent',        // 设定线外边的宽，单位px        outlineWidth: 6    })    // 鼠标hover时的样式变为    connection.setHoverPaintStyle({        stroke: '#7faaee'    })    // 设置线的id    connection.id = conn.id    //如果还要加label，都写在这里}

可能有人要问，为什么有线会有outlineStroke和outlineWidth，那个是为了鼠标好选中线准备的，毕竟线太细，鼠标很难click到，所以搞了一个又透明又宽的边出来，机智不(笑)

7. 覆盖物

覆盖物是指放在连线上面的东西，类型包括箭头和自定义元素
如果需要放更多东西，可以先创建一个覆盖物，然后使用setLabel(内容)函数替换成div之类的内容。

7.1. 代码添加label型覆盖物

connection.addOverlay(  [    'Label',    {      label: conn.name,      parameters: {        connInfo: conn,        connection: connection      },      id: 'inlabel',      location: 0.5,      cssClass: 'aLabel ' + conn.id,      visible: true,      events: {        dblclick (label) {            // 双击的回调事件        }      }    }  ])

7.2. 代码添加自定义覆盖物

connection.addOverlay(  ['Custom', {    create: function (component) {      return $(html代码)    },    // 放置在线上位置的，是个小数，从0到1    location: 0,    // 覆盖物的识别id    id: 'customOverlayone'  }])

7.3. 修改覆盖物

connection.getOverlay(覆盖物的id比如上面的customOverlayone).setLabel(替换成的html代码)

8. 存取parameters

几乎每个jsplumb元素都可以设置parameters
parameters的作用是在获得一个jsplumb元素时，可以知道额外的数据，比如鼠标点击的这个线的两头是谁，或者执行点业务动作等等，简直是最重要的东西。
设置的方法处理定义时，还能通过代码

conn.setParameter(键, 值)

如果要获取里面某个键的值

var name = conn.getParameter(name)

parameters是没有默认内容的，内容都是自己设上去的

9 绑定事件

10. 高阶技能

10.1. 切换解线顺序

10.2. 动态设置某个锚点最大连接数

10.2. 解决jsplumb初始配置污染

---

写在最后

这篇教程是给那个让我翻译jsplumb文档的人写的，嗯，说的就是你…
直接翻译你肯定看不懂，所以从头自己写了