jsPlumb开发流程设计器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

jsPlumb是一款开源软件，但jsPlumb toolkit是收费的。

本文主要使用jsPlumb实现一些简单的流程设计功能。

基础学习

首先引入jsplumb.min.js。

然后编写代码如下：

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#diagramContainer {
padding: 20px;
width: 80%;
height: 200px;
border: 1px solid gray;
}

.item {
height: 80px;
width: 80px;
border: 1px solid blue;
float: left;
}
</style>
</head>

<body>
<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.jsdelivr.net/npm/jsplumb@2.8.0/dist/js/jsplumb.min.js"></script>

<script>
/* global jsPlumb */
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Dot'
})
})
</script>
</body>

</html>

效果图如下：

可以看到，我们定义了一个容器diagramContainer，和两个div块元素，然后通过jsPlumb的connect连接函数，将两个正方形，连接到了一起。

基础学习参考网站：https://github.com/wangduanduan/jsplumb-chinese-tutorial

流程设计器开发

首先设计Html元素，设计一个左侧功能列表区域，一个右侧流程设计区域。

然后再设计三个节点拖进设计区域后释放时的样式。

代码如下：

<div id="app">
<div class="container-fluid">
<div class="row">
<div id="side-buttons" class="col-md-1 bg-info min-height ">
<div style="text-align:center;">
<h2 class="mt20 ">节点列表</h2>
<hr />
<a class="btn btn-success btn-controler btnw" href="#" data-template="tpl-Normal" role="button">
<i class="fa fa-square" aria-hidden="true"></i>
节点
</a>
<hr />
<a id="export" class="btn btn-success mt10 btnw" href="#" role="button">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
导出
</a>
</div>
</div>
<div class="min-height">
<div class="title"><p>提示：双击连接线可删除连接。</p></div>
<div id="drop-bg" class="col-md-11 bg-success min-height">

</div>
</div>
</div>
</div>
</div>

<script id="tpl-Normal" type="text/html">
<div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px; opacity: 0.6;'>

<a class='btn btn-default' href='#' role='button'>
<div>
<input type="text" value="{{comment}}" tag="{{id}}" class="nodeText" />

<span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}" style="font-size:10px;margin:0 -10px 0 0">X</span>
@*<span class="add-node pull-right" data-type="addDragNode" data-id="{{id}}" style="font-size:10px;margin:0 5px 0 0">+</span>*@
</div>
</a>
</div>
</script>

<script id="tpl-Root" type="text/html">
<div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px;opacity: 0.6;'>
<a class='btn btn-success' href='#' role='button'>
<div style="width:80px;height:30px;line-height:35px">
{{comment}}
@*<span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>*@
</div>
</a>
</div>
</script>

<script id="tpl-Exit" type="text/html">
<div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
<a class='btn btn-danger' href='#' role='button'>
<div style="width:80px;height:30px;line-height:35px">
{{comment}}
@*<span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>*@
</div>
</a>
</div>
</script>

页面效果如下：

然后编写代码实现拖拽和释放的功能。

核心代码如下：

jsPlumb.ready(
function () {
console.log("main-start")
jsPlumb.setContainer('diagramContainer') $('.btn-controler').draggable({
helper: 'clone',
scope: 'ss'
})

$(areaId).droppable({
scope: 'ss',
drop: function (event, ui) {
dropNode(ui.draggable[0].dataset.template, ui.position)
}
})

$('#app').on('click', function (event) { event.stopPropagation()
event.preventDefault()
var item = event.target.dataset if (item.type === 'deleteNode') {
var index = -1;
data.nodeList.forEach(function (node, i) {
if (node.id == item.id) {
index = i;
}
})
data.nodeList.splice(index, 1);
console.log(data.nodeList)
jsPlumb.remove(item.id)
} }) // 单点击了连接线上的X号
jsPlumb.bind('dblclick', function (conn, originalEvent) {
DataDraw.deleteLine(conn)
}) // 当链接建立
jsPlumb.bind('beforeDrop', function (info) {
console.log("beforeDrop")
console.log(info)
var isSame = false;
data.nodeList.forEach(function (node) {
if (info.sourceId == node.id) {
if (!node.data) {
node.data = []
var nextNode = {
"nextNode": info.targetId
}
node.data.push(nextNode)
}
else { node.data.forEach(function (dItem){
if (dItem.nextNode == info.targetId) {
isSame = true;
return;
}
})
if (!isSame) {
var nextNode = {
"nextNode": info.targetId
}
node.data.push(nextNode)
} } }

})
if (!isSame) {
console.log(data.nodeList)
return connectionBeforeDropCheck(info)
}
else {
console.log("节点相同")
return
}
})
console.log("main-DataDraw.draw")
DataDraw.draw(data.nodeList)
console.log("初始化节点文本事件")
initNodeTextEvent(); })

jsPlumb函数：

setContainer：设置容器。

droppable：指定该区域支持拖拽的控件。

draggable：指定该按钮可以被拖拽。

自定义函数：

DataDraw.draw初始化节点。

initNodeTextEvent设计图中的节点中的节点名称变化，同步到节点列表数组对象中，实现数据同步。

页面初始化时读取了data.js文件中的起始配置节点的数据。

data.js文件如下：

var data = {
'nodeList': [{ "id": "Start", "type": "Root", "comment": "开始", "top": 50, "left": 150, "data": [{ "nextNode": "81422cf0-00ae-11ec-b359-c13e24702355" }, { "nextNode": "779c8300-00b1-11ec-923c-fbdaa48876a6" }] }, { "id": "e1a3de30-0096-11ec-b888-ddd94967488d", "comment": "22", "top": 198, "left": 566, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "81422cf0-00ae-11ec-b359-c13e24702355", "comment": "1", "top": 634, "left": 432, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "84689a40-00ae-11ec-b359-c13e24702355", "comment": "2", "top": 628, "left": 198, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "779c8300-00b1-11ec-923c-fbdaa48876a6", "comment": "", "top": 891, "left": 617, "type": "Normal" }, { "id": "Exit", "type": "Exit", "comment": "结束", "top": 818, "left": 929 }, { "id": "a57fe0d0-00b3-11ec-99d4-39fb5d424f70", "comment": "", "top": 316, "left": 1130, "type": "Normal" }]
}

这样我们就实现了基础的流程设计器了，下面我们看一下功能。