# 流程画布引擎
# 功能
## 创建实例 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]]
```
### 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 内填充
```js
// 使用默认配置可简写为
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]]
// ...
```
### 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 }]
```
### 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 可选 端点类型，形状
``` html
<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>
```
```js
```
### 拖动节点 jsPlumb.draggable('elementId') 设置节点为可拖动
``` html
<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>
```
### 整个节点作为source或者target
整个节点作为source或者target， 并且将锚点设置成Continuous，那么锚点就会随着节点的位置改变而改变自己的位置。
jsPlumb的锚点分为四类
1. Static 静态 固定位置的锚点
2. Dynamic jsPlumb自动选择合适的锚点，动态锚点
3. Perimeter 边缘锚点，会根据节点形状去改变位置
4. Continuous 根据节点位置，自动调整位置的锚点
```js
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')
})
```
### 节点改变尺寸
jsplumb实际上不支持改变节点大小，实际上只能通过jquery ui resizable 方法去改变。
``` html
<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>
```
### 限制节点拖动区域 jsPlumb.setContainer('area-id')
默认情况下，节点可以被拖动到区域外边，如果想只能在区域内拖动，需要设置containment，这样节点只能在固定区域内移动。
### 节点网格对齐 设置grid属性 jsPlumb.draggable()
网格对齐实际上是设置了grid属性，使移动只能按照固定的尺寸移动。然后用一张图作为背景铺开作为网格来实现的。
``` css
#diagramContainer {
padding: 20px;
width: 80%;
height: 400px;
border: 1px solid gray;
background-image: url(xxx.jpeg);
background-repeat: repeat;
}
```
``` js
jsPlumb.draggable('item_left', {
containment: 'parent',
grid: [10, 10]
})
```
### 删除节点，包括节点相关的连接 jsPlumb.remove(elementId)
注意remove方法有些情况下是无法删除干净连线的，查看详情：https://jsplumbtoolkit.com/community/doc/removing.html
```js
// nodeId为节点id, remove方法可以删除节点以及和节点相关的连线
console.log('3 秒后移除左边节点包括它的连线')
setTimeout(function () {
jsPlumb.remove('item_left')
}, 3000)
```
## 链接线的属性(颜色、粗细、直线\曲线\状态机\90度、箭头\标签) connect
### 颜色粗细
``` js
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)
```
### 连线形状
+ Bezier: 贝塞尔曲线
+ Flowchart: 具有90度转折点的流程线
+ StateMachine: 状态机
+ Straight: 直线
``` html
<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>
```
### 箭头\标签 overlays
箭头长宽 width,length
箭头位置 location: 0.5 加在线的正中间
类型
+ Arrow 一个可配置的箭头
+ Label 标签，可以在链接上显示文字信息
+ PlainArrow 原始类型的箭头
+ Diamond 菱形箭头
+ Custom 自定义类型
``` js 中间
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)
```
## 设置链接线默认值 jsPlumb.connect({source, target}, default)
``` js
<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>
```
## 修改链接线属性
## 端点 addEndpoint(elementId, config)
### 增加端点 addEndpoint() 一个端点如何拖拽出多条连线 maxConnections属性
``` js 右侧端点
jsPlumb.ready(function () {
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
})
})
```
```js
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)
})
}
```
默认情况下，maxConnections的值是1，也就是一个端点最多只能拉出一条连线。
你也可以设置成其他值，例如5，表示最多可以有5条连线。
如果你想不限制连线的数量，那么可以将该值设置为-1
``` js 端点不限制连线条数
var common = {
isSource: true,
isTarget: true,
connector: ['Straight'],
maxConnections: -1
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)
```
### 拖动创建连接 isSource和isTarget设置成true
如果你将isSource和isTarget设置成true，那么久可以用户在拖动时，自动创建链接。
``` js
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)
})
```
一般来说拖动创建的链接，可以再次拖动，让链接断开。如果不想触发这种行为，可以设置。
```
jsPlumb.importDefaults({
ConnectionsDetachable: false
})
```
### 给端点增加样式
通过设置各种 *Style来改变链接或者端点的样式。
``` js
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)
})
```
# 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，选填
#### 给链接添加点击事件:点击删除连线
``` js
// 请单点击一下连接线,
jsPlumb.bind('click', function (conn, originalEvent) {
if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
jsPlumb.detach(conn)
}
})
```
### 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，结束拖拽的回调
``` js
stop: function(event) {
// event.el 拖动元素
// event.finalPos 结束时的位置，[x, y]
}
```
### 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中的目标端点
}
```js
// 当链接建立前
jsPlumb.bind('beforeDrop', function (info) {
var a = 10
var b = 2
if (a < b) {
console.log('链接会自动建立')
return true // 链接会自动建立
} else {
console.log('链接取消')
return false // 链接不会建立，注意，必须是false
}
})
```
### beforeDetach 分离前的检查
### zoom 节点缩放 zoom(baseZoom)
```js
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);
}
```
### Connection Events
### Endpoint Events
### Overlay Events
### Unbinding Events
## 通过编码连接endPoint 先创建端点addEndpoint()，然后连接 jsPlumb.connect({ uuids: ['fromId', 'toId'] })
```js
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)
```
## jsPlumb默认配置 importDefaults({config}) config的key首字母大写
jsPlumb的配置项有很多，如果你不主动去设置，那么jsPlumb就使用默认的配置。
另外建议你不要修改默认的配置，而是使用自定义的方式。
另外一点要注意，如果你想修改默认配置，那么使用importDefaults方法，并且属性的首字母要大写。如果你用addEndpoint, 并使用类似maxConnections的属性，那么首字母要小写。
``` js
var common = {
isSource: true,
isTarget: true,
connector: ['Straight'],
maxConnections: -1
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)
```
``` js
{
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" // 作用域，用来区分哪些端点可以链接，作用域相同的可以链接
}
```
你也可以从jsPlumb.Defaults对象中查看默认的配置。如果你想要更加个性化的设置连线，那么最好可以了解一下，它的默认设置有哪些，从而方便的来完成自己的设计需求。
```js
// 可以使用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" }]
});
```
3366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
