流程画布引擎_id, element, 或者endpoint

流程画布引擎

功能

创建实例 jsPlumb.getInstance(options) options对象中的Key首字母大写

// https://blog.csdn.net/fanlc8888/article/details/124381397
var myInstance = jsPlumb.getInstance(options)
options {
Anchor / Anchors: []
}

Anchor 连接点方向

内置连接点位置方向定义 String

Bottom: 底边中间，方向朝下，BottomCenter 的替代者
Top: 顶边中间，方向朝上，TopCenter 的替代者
Left: 左边中间，方向朝左，LeftMiddle 的替代者
Right: 右边中间，方向朝右，RightMiddle 的替代者
BottomLeft: 左下角，方向朝左下
BottomRight: 右下角，方向朝右下
TopLeft: 左上角，方向朝左上
TopRight: 右上角，方向朝右上
Center: 元素中心，方向任意
AutoDefault: 根据连线终点位置，自动从 Top, Right, Bottom, Left 中选择
Continuous: 类似 AutoDefault，待研究
ContinuousBottom: 类似 Bottom，待研究
ContinuousTop: 类似 Top，待研究
ContinuousLeft: 类似 Left，待研究
ContinuousRight: 类似 Right，待研究
Perimeter: 跟踪某些形状周长的锚点，用给定的锚点位置去逼近它，待研究

自定义连接点位置方向定义
Array

[x, y, dx, dy, ox, oy]

• x, y: 位置，基于元素左上角（x 轴朝右，y 轴朝下），(1, 1) 就是右下角，必需
• dx, dy: 方向，基于元素中心（x 轴朝右，y 轴朝下），(0, -1) 向上，(0, 1) 向下，(1, 0) 向右，(-1, 0) 向左，（0, 0） 任意，不传就是 (0, 0)。其他方向基本不用
• ox, oy: 位置偏移，基于元素左上角（x 轴朝右，y 轴朝下），单位为 px，不传就是 (0, 0)

Anchor: 'Bottom'
// or
Anchors: ['Bottom', 'Left', [1, 0.3, 1, 0]]
1
2
3

Overlays 连接点和连接线上的标签

有四种：

1. Arrow: 尾部缩进的箭头，有以下属性：

• width: Number 箭头宽度，默认 20
• length: Number 箭头长度，默认 20
• location: Number 在线条上的位置，0 在起点，1 在终点，默认 0.5
• direction: Number 方向，从起点指向终点为 1，反之为 -1
• foldback: Number 箭头尾部缩进程度，设置为 1 则尾部不缩进，小于 1 向内缩进，大于 1 向外突出，小于等于 0 取默认值。 默认 0.623
• paintStyle: Object 箭头绘制样式配置，也就是 svg 相关属性
• visible: Boolean 是否可见，默认 true

2. Diamond: 菱形，这是 Arrow 的一个特殊实例，Arrow 的 foldback 配置为 2 就变成了菱形
3. PlainArrow: 三角形，这是 Arrow 的一个特殊实例，Arrow 的 foldback 配置为 1 就变成了三角形
4. Label: 文本标签，有以下属性：

• label: String 文本值
• location: Number 在线条上的位置，0 在起点，1 在终点，默认 0.5
• cssClass: String 样式类
• visible: Boolean 是否可见，默认 true
• labelStyle: Object css 样式
  • font: String 字体
  • color: String 颜色
  • fill: String 背景
  • borderStyle: String 边框颜色
  • borderWidth: String 边框宽度
  • padding: String 内填充

// 使用默认配置可简写为
overlays: ['Arrow']
// 要调整配置则需写为：
overlays: [['Arrow', { width: 30 }]]
// 多个一起用：
overlays: [['Arrow', { location: 0.7 }], 'Diamond', ['Arrow', { location: 0.3, direction: -1 }]]
// 多个一起用时可抽取公共配置：
var arrowCommon = { foldback: 0.7, fill: color, width: 14 };
// ...
overlays: [['Arrow', { location: 0.7 }, arrowCommon], ['Arrow', { location: 0.3, direction: -1 }, arrowCommon]]
// ...

1
2
3
4
5
6
7
8
9
10
11
12

Endpoint / Endpoints 连接点类型

String，连接点类型，可用类型如下：

Dot: 圆
Rectangle: 矩形
Triangle: 三角形
Image: 图片
Blank: 空

EndpointOverlays 连接点标签 主要是文本，参考Overlays-label

EndpointStyle / EndpointStyles 连接点样式

Object | Array，连接点样式，有以下属性（svg 有的属性基本都有）：

stroke: 边线颜色
strokeWidth: 边线宽度
fill: 填充颜色
radius: 半径，Dot 专用，默认 10
width: 宽度，Rectangle、Triangle 可用，默认分别为：20、55
height: 高度，Rectangle、Triangle 可用，默认分别为：20、55
src: 图片路径，Image 必选

EndpointHoverStyle / EndpointHoverStyles 连接点 hover 样式，同上一项 EndpointStyle / EndpointStyles

PaintStyle 连接线样式，可用属性同上

HoverPaintStyle 连接线 hover 样式，可用属性同上

Connector 连接线类型，默认 Bezier

1. Straight: 直线连接，可用属性：

• stub: Integer | Array 连线两端短截线的最小长度。Integer–为连接的两端赋予同样的值，[Integer, Integer]–分别为起点、终点赋值，默认 0
• gap: Integer | Array 连线两端和端点（endpoint）所在的元素之间的间隙，与 stub，可以一起赋值也可以分别赋值，默认 0

2. Flowchart: 折线连接，可用属性：

• stub: Integer | Array 连线两端短截线的最小长度。Integer–为连接的两端赋予同样的值，[Integer, Integer]–分别为起点、终点赋值，默认 30
• gap: Integer | Array 连线两端和端点（endpoint）所在的元素之间的间隙，与 stub，可以一起赋值也可以分别赋值，默认 0
• cornerRadius: Number 连线转向处的圆角，默认 0
• alwaysRespectStubs: Boolean true–固定短截线长度；false–当两个元件彼此非常接近（小于两个短截线的总和），则调整短截线。默认 false
• midpoint: Number 设置连线的中点位置，默认 0.5

3. Bezier: Bezier 曲线连接，可用属性：

• curviness: Number 曲率，值越大，弯曲程度越大，默认 150
• stub: Integer | Array 连线两端短截线的最小长度。Integer–为连接的两端赋予同样的值，[Integer, Integer]–分别为起点、终点赋值，默认 0（实际使用没发现有什么用）

4. StateMachine: 二次 Bezier 曲线连接，可用属性：

• curviness: Number 曲率，值越大，弯曲程度越大，默认 10
• margin: Integer 连线两端和端点（endpoint）所在的元素之间的间隙，默认 5
• proximityLimit: Integer 当两个元素之间的距离小于给定距离时，曲线变直线，默认 80
• showLoopback: Boolean 同一个元素的不同端点间连接类型：true–形成回环（一个圆，起点就是终点），false–与其他一样。默认 true
• loopbackRadius: Integer 回环半径，showLoopback 为 true 时有效，默认 25

// 使用默认配置
Connector: 'Flowchart'
// 使用自定义配置
Connector: ['Flowchart', { stub: [10, 20], gap: 10, cornerRadius: 5 }]
1
2
3
4

ConnectionOverlays 连接线上的标签，可用属性同Overlays

ConnectionsDetachable Boolean 连接是否可拆卸（使用鼠标），默认 true

ReattachConnections Boolean 是否重新连接用户已使用鼠标分离然后删除的连接。 默认值为 false

Container String 容器选择器，指定 jsPlumb 的作用区

DoNotThrowErrors Boolean 是否在用户指定未知锚点，端点或连接器类型时抛出错误。默认 false

LogEnabled Boolean 是否启用 jsPlumb 日志。 默认为 false

MaxConnections Number 端点的默认最大连接数。 默认为 1 ,无限制为-1

Scope String

待研究 默认为 _jsPlumb_Default_Scope

DragOptions / DropOptions Object

拖放配置，待研究，在 connect makeTarget addEndpoint 方法中用到

节点

连接节点 connect({source, target, endpoint})

jsPlumb.connect(config) return connection

source String,Object,Endpoint 是 连线源的标识，可以是id, element, 或者Endpoint
target String,Object,Endpoint 是 连线目标的标识，可以是id, element, 或者Endpoint
endpoint String 可选 端点类型，形状

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="margin-left:50px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
        jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Dot'
        })
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1

拖动节点 jsPlumb.draggable(‘elementId’) 设置节点为可拖动

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
        jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle'
        })

        jsPlumb.draggable('item_left')
        jsPlumb.draggable('item_right')
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

整个节点作为source或者target

整个节点作为source或者target， 并且将锚点设置成Continuous，那么锚点就会随着节点的位置改变而改变自己的位置。

jsPlumb的锚点分为四类

1. Static 静态 固定位置的锚点
2. Dynamic jsPlumb自动选择合适的锚点，动态锚点
3. Perimeter 边缘锚点，会根据节点形状去改变位置
4. Continuous 根据节点位置，自动调整位置的锚点

window.jsPlumb.ready(function () {
    var jsPlumb = window.jsPlumb

    jsPlumb.makeSource('A', {
        endpoint:"Dot",
        anchor: "Continuous"
    })

    jsPlumb.makeTarget('B', {
        endpoint:"Dot",
        anchor: "Continuous"
    })

    jsPlumb.draggable('A')
    jsPlumb.draggable('B')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

节点改变尺寸

jsplumb实际上不支持改变节点大小，实际上只能通过jquery ui resizable 方法去改变。

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
</div>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="./lib/jquery.jsplumb.js"></script>

  <script>
    /* global jsPlumb, $ */
    $('.item').resizable({
      resize: function (event, ui) {
        jsPlumb.repaint(ui.helper)
      }
    })

    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle'
      })

      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

限制节点拖动区域 jsPlumb.setContainer(‘area-id’)

默认情况下，节点可以被拖动到区域外边，如果想只能在区域内拖动，需要设置containment，这样节点只能在固定区域内移动。

节点网格对齐 设置grid属性 jsPlumb.draggable()

网格对齐实际上是设置了grid属性，使移动只能按照固定的尺寸移动。然后用一张图作为背景铺开作为网格来实现的。

#diagramContainer {
  padding: 20px;
  width: 80%;
  height: 400px;
  border: 1px solid gray;
  background-image: url(xxx.jpeg);
  background-repeat: repeat;
}
1
2
3
4
5
6
7
8

jsPlumb.draggable('item_left', {
  containment: 'parent',
  grid: [10, 10]
})

1
2
3
4
5

删除节点，包括节点相关的连接 jsPlumb.remove(elementId)

注意remove方法有些情况下是无法删除干净连线的，查看详情：https://jsplumbtoolkit.com/community/doc/removing.html

// nodeId为节点id, remove方法可以删除节点以及和节点相关的连线
console.log('3 秒后移除左边节点包括它的连线')
setTimeout(function () {
  jsPlumb.remove('item_left')
}, 3000)
1
2
3
4
5

链接线的属性(颜色、粗细、直线\曲线\状态机\90度、箭头\标签) connect

颜色粗细

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)
1
2
3
4
5
6

连线形状

• Bezier: 贝塞尔曲线
• Flowchart: 具有90度转折点的流程线
• StateMachine: 状态机
• Straight: 直线

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
        jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle',
        connector: ['Bezier'],
        anchor: ['Left', 'Right']
        })

        jsPlumb.draggable('item_left')
        jsPlumb.draggable('item_right')
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

箭头\标签 overlays

箭头长宽 width,length
箭头位置 location: 0.5 加在线的正中间

类型

• Arrow 一个可配置的箭头
• Label 标签，可以在链接上显示文字信息
• PlainArrow 原始类型的箭头
• Diamond 菱形箭头
• Custom 自定义类型

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)
1
2
3
4
5
6
7

设置链接线默认值 jsPlumb.connect({source, target}, default)

<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
        var common = {
            endpoint: 'Rectangle',
            connector: ['Bezier'],
            anchor: ['Left', 'Right']
        }

        jsPlumb.connect({
            source: 'item_left',
            target: 'item_right'
        }, common)

        jsPlumb.draggable('item_left')
        jsPlumb.draggable('item_right')
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

修改链接线属性

端点 addEndpoint(elementId, config)

增加端点 addEndpoint() 一个端点如何拖拽出多条连线 maxConnections属性

jsPlumb.ready(function () {
    jsPlumb.addEndpoint('item_left', {
    anchors: ['Right']
    })
})
1
2
3
4
5

if (configMap[name].Endpoint.type === 'anchor') { // 单个锚点
  // 给节点添加锚点
  this.jsPlumbInstance.addEndpoint('node-' + id, {
    anchor: configMap[name].Endpoint.key,
    overlay: [
      ['Arrow', { width: 5, length: 2, location: 1, direction: 1, foldback: 0.623 }]
    ]
  }, this.commonLink)
} else { // 多个锚点
  configMap[name].Endpoint.key.forEach(item => {
    this.jsPlumbInstance.addEndpoint('node-' + id, {
      anchor: item,
      overlay: [
        ['Arrow', { width: 5, length: 2, location: 1, direction: 1, foldback: 0.623 }]
      ]
    }, this.commonLink)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

默认情况下，maxConnections的值是1，也就是一个端点最多只能拉出一条连线。

你也可以设置成其他值，例如5，表示最多可以有5条连线。

如果你想不限制连线的数量，那么可以将该值设置为-1

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right']
}, common)
1
2
3
4
5
6
7
8
9
10

拖动创建连接 isSource和isTarget设置成true

如果你将isSource和isTarget设置成true，那么久可以用户在拖动时，自动创建链接。

jsPlumb.ready(function () {
    jsPlumb.setContainer('diagramContainer')

    var common = {
        isSource: true,
        isTarget: true,
        connector: ['Straight']
    }

    jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
    }, common)

    jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
    }, common)

    jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
    }, common)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

一般来说拖动创建的链接，可以再次拖动，让链接断开。如果不想触发这种行为，可以设置。

  jsPlumb.importDefaults({
    ConnectionsDetachable: false
  })
1
2
3

给端点增加样式

通过设置各种 *Style来改变链接或者端点的样式。

jsPlumb.ready(function () {
    jsPlumb.setContainer('diagramContainer')
    var common = {
      isSource: true,
      isTarget: true,
      connector: 'Straight',
      endpoint: 'Dot',
      paintStyle: {
          fill: 'white',
          outlineStroke: 'blue',
          strokeWidth: 3
      },
      hoverPaintStyle: {
          outlineStroke: 'lightblue'
      },
      connectorStyle: {
          outlineStroke: 'green',
          strokeWidth: 1
      },
      connectorHoverStyle: {
          strokeWidth: 2
      }
    }

    jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
    }, common)

    jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
    }, common)

    jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
    }, common)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

jsPlumb Events列表

端点

addEndpoint(id, params, referenceParams) 将端点添加到给定元素

1. id: String | Element 作用节点 id 选择器或 DOM
2. params: Object 配置，可用属性如下：

• anchor: String | Array 锚点（连接点位置）配置，参考Anchors。String 用的是内置的或者自行注册的，Array 用的是具体的配置，如 [x, y, dx, dy, ox, oy]
• endpoint: String，连接点类型，可用类型如下：
  • Dot: 圆
  • Rectangle: 矩形
  • Triangle: 三角形
  • Image: 图片
  • Blank: 空
• paintStyle: Object，连接点样式，有以下属性（svg 有的属性基本都有）：
  • stroke: 边线颜色
  • strokeWidth: 边线宽度
  • fill: 填充颜色
  • radius: 半径，Dot 专用，默认 10
  • width: 宽度，Rectangle、Triangle 可用，默认分别为：20、55
  • height: 高度，Rectangle、Triangle 可用，默认分别为：20、55
  • src: 图片路径，Image 必选
• hoverPaintStyle: 连接点 hover 样式，同 paintStyle
• cssClass / hoverClass: 样式类及 hover 样式类
• enabled: Boolean 是否响应鼠标事件（drag / drop），默认 true
• source: String | Element 选择器或节点，用来指定作用节点，必需
• container: 同Container
• isSource: Boolean，设为 true 标记为起点，默认 false
• isTarget: Boolean，设为 true 标记为终点，默认 false
• hoverPaintStyle: Object，连接点 hover 时的样式，属性同 paintStyle
• connector: Array，连接线配置，起点可用
• connectorStyle: Object，连接线的样式，起点可用，有以下属性（svg 有的属性基本都有）：
  • stroke: 线颜色
  • strokeWidth: 线宽度
  • joinstyle: ‘round’, 不明作用
  • outlineStroke: 线边缘颜色
  • outlineWidth: 线边缘宽度
  • stroke-dasharray: 虚线配置
  • dashstyle: 同 stroke-dasharray
• connectorHoverStyle: Object，连接线 hover 时的样式，属性同 connectorStyle，起点可用
• cssClass: String 附加到 Endpoint 创建的元素的 CSS 类
• hoverClass: String 当鼠标悬停在元素或连接的线上时附加到 EndPoint 创建的元素

3. referenceParams: Object 共享配置（我们可以把多个 Endpoint 共用部分抽出来放在这里），可用属性同 params

addEndpoints(id, params, referenceParams) 将端点列表添加到给定元素，与 addEndpoint 别在于第二个参数是个数组，也就是多个端点配置

deleteEndpoint(endpoint, doNotRepaintAfterwards) 删除端点，同时会删除其连线

endpoint: String，端点 uuid 或 Endpoint（可通过 getEndpoint 方法获取）
doNotRepaintAfterwards: Boolean，是否重新绘制所有内容，默认 false，选填

getEndpoint(uuid) 根据 uuid 获取 Endpoint

事件

batch(fn, doNotRepaintAfterwards) 暂停绘图，运行给定的函数，然后重新启用绘图，doWhileSuspended 方法的替代者，jsPlumb 的大部分操作都要求放入 fn 中进行

fn: Function，给定函数
doNotRepaintAfterwards: Boolean，如果传 true，则在运行给定的函数后不会运行重绘

bind(event, callback, insertAtStart) 绑定事件

1. event: String 事件类型：

• click: 连线点击事件
• connection: 连接事件
• beforeDetach: 连接断开前事件
• connectionDetached: 连接断开事件
• connectionDrag: 连线开始拖拽事件（端点）
• connectionDragStop: 连线拖拽结束事件（端点）
• connectionMoved: 连线更换端点事件 通知已将现有连接的源或目标端点拖动到某个新位置
• 更多类型待研究

2. callback: Function 事件回调，具体传参自行研究
3. insertAtStart: 是否置顶此事件（在其它已注册事件之前触发），默认 false，选填

给链接添加点击事件:点击删除连线

// 请单点击一下连接线, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
    jsPlumb.detach(conn)
  }
})
1
2
3
4
5
6

cleanupListeners() 移除所有事件

连接与连接线

registerConnectionType(id, options) 注册连接类型

1. id: String, 连接类型的 id，确保唯一，切换类型时用到
2. options: Object, 类型配置

• connector: String, 四个取值：Straight–直线连接，Flowchart–折线连接，Bezier–Bezier 曲线连接，StateMachine–二次 Bezier 曲线连接
• paintStyle: Object, 样式
• hoverPaintStyle: Obejct, hover 时的样式
• overlays: Array

connect(params, referenceParams) 连接端点

1. params: Object，有以下属性

• source: String | Object，起点，可以是选择器或节点，也可以是 Endpoint
• target: String | Object，终点，可以是选择器或节点，也可以是 Endpoint
• uuids: Array，[source, target]，source 和 target 的合体
• type: String，自定义的类型（通过registerConnectionType(id, options)注册的）
• connector: String，连接类型，参考Connector
• editable: Boolean，是否可拆卸（用鼠标），默认 true
• 连线的相关配置都可以在此使用（比如 overlays）

deleteConnection(connection) 删除指定连接，connection 可通过 getAllConnections / getConnections 方法获取

getAllConnections() 获取所有连接

getConnections(params) 用法不明，请使用 getAllConnections

toggleVisible(el) 显示/隐藏指定节点的连线 el: String | Element，选择器或 DOM

容器 全局

getContainer() 获取容器节点

reset(doNotUnbindInstanceEventListeners) 清空所有端点、连接及事件。 doNotUnbindInstanceEventListeners: Boolean 若设为 true，事件绑定不会被移除

节点

makeSource(el, params) 将指定的 DOM 元素创建成为连接源，允许从它/它们拖动连接，而无需事先注册任何端点。建立连接后，传入此方法的端点配置将用于创建端点（如果未提供，则将使用默认端点配置）

el: String | Element，选择器或 DOM
params: Object，创建配置，有以下属性：
endpoint: String | Array，端点配置
parent: String | Element，选择器或 DOM。建立连接时添加端点的元素，如果省略，端点将被添加到el
scope: String，从此元素出发的连接线的连接的范围
dragOptions: Object，拖动配置
… 更多配置待研究

makeTarget(el, params) 将指定的 DOM 元素创建成为连接目标，而无需事先注册任何端点。建立连接后，传入此方法的端点配置将用于创建端点（如果未提供，则将使用默认端点配置）

el: String | Element，选择器或 DOM
params: Object，创建配置，有以下属性：
endpoint: String | Array，端点配置
parent: String | Element，选择器或 DOM。建立连接时添加端点的元素，如果省略，端点将被添加到el
scope: String，从此元素出发的连接线的连接的范围
dragOptions: Object，拖动配置
… 更多配置待研究

draggable(selector, options) 添加拖动功能

1. selector: 需要添加拖动的元素选择器，也就是流程图的块，可以是 DOM 列表或选择器：

• Array: jsPlumb.getSelector(‘.draw-canvas .item’) 或 document.querySelectorAll(‘.draw-canvas .item’)
• String: ‘.draw-canvas .item’

2. options: Object，拖动配置，不配置就使用全局配置（jsPlumb.getInstance({DragOptions: options})），参考 jQuery-ui 的 draggable，下面列出一些常用的：

• grid: Array, 位置对齐参数：[x, y]，越小拖动越平滑，如：[1, 1]
• containment: String，约束在指定元素或区域的边界内拖拽（支持更多类型，这里不在多列举，具体参考 jQuery-ui 的 draggable）
• stop: Function，结束拖拽的回调

stop: function(event) {
  // event.el       拖动元素
  // event.finalPos 结束时的位置，[x, y]
}
1
2
3
4

toggleDraggable(el) 切换指定节点的可拖拽状态 el: String | Element，选择器或 DOM

removeAllEndpoints(el) 移除指定节点的所有端点 el: String | Element，选择器或 DOM

remove(el) 移除指定节点及其所有端点、连线，当然也包括子节点 el: String | Element，选择器或 DOM

empty(el) 清空指定元素：属于子元素的所有端点和连接，以及子元素本身，保留属于元素本身的端点和连接。 el: String | Element 选择器或节点

getInstance(options) 创建实例

getDefaultScope() 获取默认 scope

event

connection(info, originalEvent) 连接建立后

info

{
connection: 新连接，可以注册监听
sourceId: 连接的源元素id
targetId: 连接的目标元素id
source: 连接的源元素
target: 连接的目标元素
sourceEndpoint: 连接的源端点
targetEndpoint: 连接的目标端点
}

connectionDetached(info，originalEvent) 连接断开

info

{
connection: 已分离的连接
sourceId: 分离之前连接的源元素id
targetId: 分离之前连接的目标元素id
source: 分离之前连接的源元素
target: 分离之前连接的目标元素
sourceEndpoint: 分离之前连接的源端点
targetEndpoint: 分离之前连接的目标端点
}

connectionMoved(info，originalEvent) 已将现有连接的源或目标端点拖动到某个新位置

originalEvent：断开连接的原始鼠标事件。

info

{
index: 源端点为0，目标端点为1
originalSourceId: 移动前连接的源元素id
newSourceId: 移动后连接的源元素id
originalTargetId: 移动前连接的目标元素id
newTargetId: 移动后连接的目标元素id
originalSourceEndpoint: 移动前的源端点
newSourceEndpoint: 移动后的源端点
originalTargetEndpoint: 移动前的目标端点
newTargetEndpoint: 移动后的目标端点
}

connectionAborted（connection，originalEvent）在连接到端点或目标元素之前放弃拖动连接时触发

connectionDrag（connection） 正在拖动现有连接

注：当此事件触发时，连接的目标端点是jsPlumb用于拖动的瞬态元素，随后在建立或中止连接时将从DOM中删除。

connectionDragStop(connection) 连接拖动结束

click(connection, originalEvent) 单击连接

dblclick(connection, originalEvent) 双击连接

endpointClick(connection, originalEvent) 单击端点

endpointDblClick(connection, originalEvent) 双击端点

contextmenu(connection, originalEvent) 右键单击某个给定组件jsPlumb将报告对Connections和Endpoints的右键单击

beforeDrop(info) 连接前的检查,判断是否建立连接 如果不符合条件，就不让链接建立。

有时候当用户从A端点链接到B端点时，需要做一些检查，如果不符合条件，就不让链接建立。

info

{
sourceId: 连接的源元素id
targetId: 连接的目标元素id
scope: 连接的范围
connection: 实际的Connection对象。可以访问Connection中的“端点”数组，以获取连接中涉及的端点，但注意，在拖动连接时，目标端点将始终是仅在拖动的生命周期内存在的瞬态端点。要获取正在删除的连接端点，请使用dropEndpoint。
dropEndpoint: 这是删除连接的实际端点。可能为null，因为如果在已调用makeTarget的元素上删除Connection，则不会设置它
targetEndpoint: 分离之前Connection中的目标端点
}

// 当链接建立前
jsPlumb.bind('beforeDrop', function (info) {
  var a = 10
  var b = 2
  if (a < b) {
    console.log('链接会自动建立')
    return true // 链接会自动建立
  } else {
    console.log('链接取消')
    return false // 链接不会建立，注意，必须是false
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

beforeDetach 分离前的检查

zoom 节点缩放 zoom(baseZoom)

window.jsPlumb.ready(function () {
    var jsPlumb = window.jsPlumb
    jsPlumb.setContainer("diagramContainer")

    jsPlumb.connect({
    source: 'A',
    target: 'B',
    endpoint: 'Dot'
    })
    
    var baseZoom = 1
    setInterval(() => {
    baseZoom -= 0.1
    if (baseZoom < 0.5) {
        baseZoom = 1
    }
    zoom(baseZoom)
    }, 1000)
})

function zoom (scale) {
    $("#diagramContainer").css({
        "-webkit-transform": `scale(${scale})`,
        "-moz-transform": `scale(${scale})`,
        "-ms-transform": `scale(${scale})`,
        "-o-transform": `scale(${scale})`,
        "transform": `scale(${scale})`
    })
    jsPlumb.setZoom(0.75);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Connection Events

Endpoint Events

Overlay Events

Unbinding Events

通过编码连接endPoint 先创建端点addEndpoint()，然后连接 jsPlumb.connect({ uuids: [‘fromId’, ‘toId’] })

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right'],
  uuid: 'fromId'
})

jsPlumb.addEndpoint('item_right', {
  anchors: ['Left'],
  uuid: 'toId'
})

console.log('3 秒后建立连线')
setTimeout(function () {
  jsPlumb.connect({ uuids: ['fromId', 'toId'] })
}, 3000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

jsPlumb默认配置 importDefaults({config}) config的key首字母大写

jsPlumb的配置项有很多，如果你不主动去设置，那么jsPlumb就使用默认的配置。

另外建议你不要修改默认的配置，而是使用自定义的方式。

另外一点要注意，如果你想修改默认配置，那么使用importDefaults方法，并且属性的首字母要大写。如果你用addEndpoint, 并使用类似maxConnections的属性，那么首字母要小写。

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right']
}, common)
1
2
3
4
5
6
7
8
9
10

{
  Anchor : "BottomCenter",  // 锚点，即端点链接的位置
  Anchors : [ null, null ], // 多个锚点 [源锚点，目标锚点].
  ConnectionsDetachable   : true, // 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开。
  ConnectionOverlays  : [], // 链接遮罩层
  Connector : "Bezier", // 链接
  Container : null, // 连线的容器
  DoNotThrowErrors  : false, // 是否抛出错误
  DragOptions : { }, // 拖动设置
  DropOptions : { }, // 拖放设置
  Endpoint : "Dot", // 端点
  Endpoints : [ null, null ], // 数组形式的，[源端点，目标端点]
  EndpointOverlays : [ ], // 端点遮罩层
  EndpointStyle : { fill : "#456" }, // 端点样式
  EndpointStyles : [ null, null ], //  [源端点样式，目标端点样式]
  EndpointHoverStyle : null, // 端点鼠标经过的样式
  EndpointHoverStyles : [ null, null ], // [源端点鼠标经过样式，目标端点鼠标经过样式]
  HoverPaintStyle : null, // 鼠标经过链接线时的样式
  LabelStyle : { color : "black" }, // 标签样式
  LogEnabled : false, // 是否启用日志
  Overlays : [ ], // 连接线和端点的遮罩层样式
  MaxConnections : 1, // 端点最大连接线数量默认为1， 设置成-1可以表示无数个链接
  PaintStyle : { strokeWidth : 8, stroke : "#456" }, // 连线样式
  ReattachConnections : false, // 端点是否可以再次重新链接
  RenderMode : "svg", // 渲染模式，默认是svg
  Scope : "jsPlumb_DefaultScope" // 作用域，用来区分哪些端点可以链接，作用域相同的可以链接
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

你也可以从jsPlumb.Defaults对象中查看默认的配置。如果你想要更加个性化的设置连线，那么最好可以了解一下，它的默认设置有哪些，从而方便的来完成自己的设计需求。

// 可以使用importDefaults，来重写某些默认设置
jsPlumb.importDefaults({
  PaintStyle : {
    strokeWidth:13,
    stroke: 'rgba(200,0,0,0.5)'
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [{ fill:"#225588" }, { fill:"#558822" }]
});
1
2
3
4
5
6
7
8
9
10