JSplumb 中文教程（前端自定义组件，流程图，拓扑图）

1. jsplumb 中文基础教程

后续更新会在仓库：jsplumb仓库地址

本文的图片是托管于七牛云的，由于使用的是测试域名，可能不知道哪天，图片就无法显示了。不过每个例子都有简单的在线demo, demo剩千图，还是能看懂的。

1.1. 什么是jsplumb？

你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用jsPlumb你可以！它是完全免费的，并根据MIT许可证提供。您可以直接从jsPlumb github网站下载框架。

该项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员。 jsPlumb由他积极开发。作为许多优秀的开发人员，他似乎更喜欢开发代码而不是编写教程，这就是为什么我提供一个简单的入门教程。

1.2. jsplumb能干什么？

那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的！

1.3. 基本概念

Souce 源节点
Target 目标节点
Anchor 锚点
Endpoint 端点
Connector 连接

2. 基础demos

2.1. 连接两个节点
jsPlumb.ready方法和jquery的ready方法差不多的功能，jsPlumb.connect用于建立连线

<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>

参数说明： jsPlumb.connect(config) return connection

2.2. 可拖动节点

使用draggable可以让节点被拖动

<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>

2.3. 连接的其他参数

可以通过connector去设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。

jsplumb连线的样式有四种

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>

2.4. 设置连接的默认值

很多连线都是相同设置的情况下，可以将配置抽离出来，作为一个单独的变量，作为connect的第二个参数传入。实际上connect的第二个参数会和第一个参数merge，作为一个整体。

<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>

2.5. 给连接加上样式

例如给连线设置不同的颜色，设置不同的粗细之类的。

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

2.6. 给连接加上箭头

箭头实际上是通过设置overlays去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。一根连线是可以添加多个箭头的。

overlays也是一个比较重要的概念，overlays可以理解为遮罩层。遮罩层不仅仅可以设置箭头，也可以设置其他内容。

overlays有五种类型，下面给出简介。

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)

2.7. 增加一个端点

addEndpoint方法可以用来增加端点

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

2.8. 拖动创建连接

如果你将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)})

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

  jsPlumb.importDefaults({ConnectionsDetachable: false})

2.9. 给端点增加样式

通过设置各种 *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)})

2.10. 限制节点拖动区域

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

jsPlumb.setContainer('id')

2.11. 给链接添加点击事件：点击删除连线

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

jsPlumb支持许多事件

jsPlumb Events列表

connection
connection
Detached
connectionMoved
click
dblclick
endpointClick
endpointDblClick
contextmenu
beforeDrop
beforeDetach
zoom
Connection Events
Endpoint Events
Overlay Events
Unbinding Events

2.12. 删除节点，包括节点相关的连接

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

2.13. 一个端点如何拖拽出多条连线

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

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

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

var common = {isSource: true,isTarget: true,connector: ['Straight'],maxConnections: -1
}jsPlumb.addEndpoint('item_left', {anchors: ['Right']
}, common)

2.14. 整个节点作为source或者target

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

jsPlumb的锚点分为四类

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

 window.jsPlumb.ready(function () {var jsPlumb = window.jsPlumbjsPlumb.makeSource('A', {endpoint:"Dot",anchor: "Continuous"})jsPlumb.makeTarget('B', {endpoint:"Dot",anchor: "Continuous"})jsPlumb.draggable('A')jsPlumb.draggable('B')})

3 jsPlumb默认配置简介

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

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

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

var common = {isSource: true,isTarget: true,connector: ['Straight'],maxConnections: -1
}jsPlumb.addEndpoint('item_left', {anchors: ['Right']
}, common)
Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
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,
PaintStyle : { strokeWidth : 8, stroke : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

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

默认参数的简介:

Anchor 锚点，即端点链接的位置
Anchors 多个锚点 [源锚点，目标锚点].
Connector 链接
ConnectionsDetachable 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开。
Container 连线的容器
DoNotThrowErrors 是否抛出错误
ConnectionOverlays 链接遮罩层
DragOptions 拖动设置
DropOptions 拖放设置
Endpoint 端点
Endpoints 数组形式的，[源端点，目标端点]
EndpointOverlays 端点遮罩层
EndpointStyle 端点样式
EndpointStyles [源端点样式，目标端点样式]
EndpointHoverStyle 端点鼠标经过的样式
EndpointHoverStyles [源端点鼠标经过样式，目标端点鼠标经过样式]
HoverPaintStyle 鼠标经过链接线时的样式
LabelStyle 标签样式
LogEnabled 是否启用日志
Overlays 连接线和端点的遮罩层样式
MaxConnections 端点最大连接线数量默认为1，设置成-1可以表示无数个链接
PaintStyle 连线样式
ReattachConnections 端点是否可以再次重新链接
RenderMode 渲染模式，默认是svg
Scope 作用域，用来区分哪些端点可以链接，作用域相同的可以链接

// 可以使用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" }]
});