jsplumb 5.x 实践分享 @jsplumb/browser-ui
什么是 jsplumb
jsplumb 是可以让你在网站上展示图表或者甚至在浏览器应用程序中使用图表的开发框架,该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此你可以绘制你可以想到的任何类型的图表
官方文档
https://docs.jsplumbtoolkit.com/toolkit/5.x/
jsPlumb 是一个强大的JavaScript连线库，提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。同时也支持vue ，react和Angular。
组成：
- @jsplumb/core：核心包，包含管理元素之间的连接、端点的方法。与渲染器解耦，不依赖于DOM；
- @jsplumb/browser-ui：默认渲染器，使用SVG（可缩放矢量图形）连接元素。（元素较多时渲染较慢）；
- @jsplumb/connector-bezier：贝塞尔连接器（贝塞尔曲线样式的连线）；
- @jsplumb/connector-flowchart：流程图连接器；
- @jsplumb/util：实用工具包；
- @jsplumb/common：定义和接口。
jsPlumb 2.x 的文档，网上有很多相关的资料可供查询，最新版本 5.x 的资料就非常少了。最近在一个项目中由于开源问题不得不采用新版的，官方英文文档读的很吃力，笔者把自己的一点实践分享出来。
创建实例
import { newInstance } from '@jsplumb/browser-ui'
const jsplumbInstance = newInstance({
container: document.getElementById('jsplumbDemo')
})新建连线
<div id="jsplumbDemo" class="jsplumb-demo">
<div id="item-left" class="left">item left</div>
<div id="item-right" class="right">item right</div>
</div>
jsplumbInstance.connect({
cssClass: 'line-class', // 边线设置class
source: document.getElementById('item-left'),
target: document.getElementById('item-right'),
anchors: ['Right', 'Left' ], // 从source右边连接到target左边
endpoint: 'Rectangle', // 端点类形
deleteEndpointsOnDetach: false, // 连接被删除仍然保留端点
paintStyle: { // 线条填充
stroke: '#333',
strokeWidth: 2
},
hoverPaintStyle: { // 线条移入时的填充
stroke: 'red',
strokeWidth: 4
}
});注意：
- 5.x 与 2.x source、target 配置不一样，不能直接配置 Id、class，而是要元素的实例，否则会报下面的错误
TypeError: el.getAttribute is not a function
- connectors 连接器
2.x 的时候只要直接配置使用就行
- Bezier：贝塞尔曲线
- Straight：直线连接锚点
- Flowchart：垂直或水平线段组成的连线
- StateMachine：状态机连线
- Anchor：锚点
5.x 同样有这些功能，只是不在包里，需要下截依赖，对的，没错，作者做了分包优化。5.x 默认是 straight方式连线。
参考地址：https://docs.jsplumbtoolkit.com/toolkit/5.x/lib/connectors
例如：备受喜欢的 Bezier 线需要安装这个包 @jsplumb/connector-bezier
使用就比较简单了
connector: ['Bezier']事件绑定
在项目开发过程中经常需要用到绑定事件的的功能，比如：移入、移出、点击等等
import { EVENT_CONNECTION_MOUSEOVER } from '@jsplumb/browser-ui'
// 绑定鼠标移入事件
jsplumbInstance.bind(EVENT_CONNECTION_MOUSEOVER, element => {
console.log(element)
element.Connection.setPaintStyle({
stroke: 'red',
strokeWidth: 4
})
})这里的 Connection 有很多方法，比如设置颜色等等
获取所有连线
jsplumbInstance.connections
其实实例里还有很多其他的方法可用，这里就不一一举例了。
同时 5.x 重构后 jsplumbtoolkit 更加强大，对 vue、react、angular 的支持更为灵活。上面的用法还在限在使用 jsplumb 的功能，更多其他功能后面实践后再更新。
销毁
这样会把整个连接操作的 dom 元素都会删除
jsplumbInstance.destroy()删除所有连线
jsplumbInstance.deleteEveryConnection()
