jsPlumb提供了一种可视化的连接web元素的方法,在浏览器种使用SVG,旧的版本(IE8↓)使用VML。
Setup
let plumbIns = jsPlumb.getInstance({ Container: "diagramContainer" })
this.plumbIns = plumbIns
。
- NPM 安装 jquery jquery-ui jsplumb
- npm install jquery jquery-ui jsplumb --save
-
import $ from "jquery" // 使用 jqueryUi resize (css记得引入) import "jquery-ui/themes/base/resizable.css" import "jquery-ui/ui/widgets/resizable" // drag drop 功能 import "jquery-ui/ui/widgets/draggable" import "jquery-ui/ui/widgets/droppable" // jsPlumb import { jsPlumb } from "jsplumb"
- 多个
jsPlumb
实例,注意在mounted
生命周期内实例化 this
Vue- 导入默认配置
plumbIns.importDefaults({ ConnectionsDetachable: false //默认情况下,垂直连接将可通过鼠标分离 })
- 查阅Wiki写入默认配置
export const visoConfig = {}
// 基本连接线样式
visoConfig.connectorPaintStyle = {
stroke: "#2E79F9",
strokeWidth: 1,
lineWidth: 2
}
// 鼠标悬浮在连接线上的样式
visoConfig.connectorHoverStyle = {
strokeWidth: 2,
strokeStyle: "#FFCB48"
}
visoConfig.baseStyle = {
endpoint: [
"Dot",
{
radius: 6,
cssClass: "endpointcssClass"
}
], // 端点的形状
connectorStyle: visoConfig.connectorPaintStyle, // 连接线的颜色,大小样式
connectorHoverStyle: visoConfig.connectorHoverStyle,
paintStyle: {
stroke: "#2E79F9",
fill: "#ffffff",
radius: 6,
strokeWidth: 2
}, // 端点的颜色样式 rgba(46, 121, 249,0.3) #2E79F9
hoverPaintStyle: {
strokeWidth: 4
},
isSource: true, // 是否可以拖动(作为连线起点)
connector: [
"Flowchart",
{
gap: 0,
coenerRadius: 0,
alwaysRespectStubs: true,
midpoint: 0.5
}
], // 连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
isTarget: true, // 是否可以放置(连线终点)
maxConnections: -1, // 设置连接点最多可以连接几条线
connectorOverlays: [
[
"Arrow",
{
location: 1,
visible: true,
width: 11,
length: 11,
direction: 1,
id: "arrow_forwards"
}
],
[
"Label",
{
location: 0.5,
id: "arrowLabel",
cssClass: "arrowLabel",
events: {
mouseover: function() {}
}
}
]
]
}
visoConfig.baseArchors = ["RightMiddle", "LeftMiddle"]
获取基础配置
javascript
复制代码
function getBaseNodeConfig(){ return Object.assign({}, visoConfig.baseStyle) }
让元素可以拖拽
containment
限制可拖拽的范围
bash
复制代码
plumbIns.draggable(id, { containment: "diagramContainer" })
为元素添加端点EndPoint
maxConnections
最大连接数isSource
只可以被连接,不能连接对方initDimensionNode
只有一个端点的元素initRootNode
拥有4个可链接的元素
arduino
复制代码
function initDimensionNode(id) { let config = this.getBaseNodeConfig() config.isSource = false config.maxConnections = 1 this.plumbIns.addEndpoint( id, { anchors: "Top", uuid: id + "-top" }, config ) }
arduino
复制代码
function initRootNode(id){ let config = this.getBaseNodeConfig() config.isTarget = false config.maxConnections = 4 this.plumbIns.addEndpoint( id, { anchors: "Bottom", uuid: id + "-bottom" }, config ) this.plumbIns.addEndpoint( id, { anchors: "Top", uuid: id + "-top" }, config ) this.plumbIns.addEndpoint( id, { anchors: "Right", uuid: id + "-right" }, config ) this.plumbIns.addEndpoint( id, { anchors: "Left", uuid: id + "-left" }, config ) }
双击删除连接
- error 在vue种调用 detach 报错 is not function
javascript
复制代码
plumbIns.bind("dblclick", conn => { if (window.prompt("确定删除所点击的链接吗? 输入1确定") === "1") { plumbIns.deleteConnection(conn) } })
修改链接种的label
- 利用css样式,切换label的class名称,更换连接的label显示
javascript
复制代码
plumbIns.bind("connection", connInfo => { // 展示弹窗 选择关系 this.showRelationModal() // console.log(connInfo.connection.getOverlay("arrowLabel")) connInfo.connection.getOverlay("arrowLabel").addClass("arrowcen") })