Vue 使用 JSPlumb 绘制推拽流程图

最新推荐文章于 2024-07-16 14:59:12 发布

noBUG1209

最新推荐文章于 2024-07-16 14:59:12 发布

阅读量1k

点赞数

分类专栏： JSPlumb 文章标签： vue.js 流程图 ui js

本文链接：https://blog.csdn.net/qq_34160815/article/details/130710406

版权

JSPlumb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jsPlumb是一个库，用于在网页上创建和管理元素间的连接，支持SVG和VML渲染。文章介绍了如何设置jsPlumb实例，使用NPM安装依赖，以及配置拖拽、可连接的端点和连接线样式。此外，还讨论了双击删除连接的功能和修改连接标签的方法。

摘要由CSDN通过智能技术生成

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") })