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文档的人写的，嗯，说的就是你…
直接翻译你肯定看不懂，所以从头自己写了