柚子快报邀请码778899分享:jsPlumb开发流程设计器
前言
jsPlumb是一款开源软件,但jsPlumb toolkit是收费的。
本文主要使用jsPlumb实现一些简单的流程设计功能。
基础学习
首先引入jsplumb.min.js。
然后编写代码如下:
#diagramContainer {
padding: 20px;
width: 80%;
height: 200px;
border: 1px solid gray;
}
.item {
height: 80px;
width: 80px;
border: 1px solid blue;
float: left;
}
/* global jsPlumb */
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Dot'
})
})
效果图如下:
可以看到,我们定义了一个容器diagramContainer,和两个div块元素,然后通过jsPlumb的connect连接函数,将两个正方形,连接到了一起。
基础学习参考网站:https://github.com/wangduanduan/jsplumb-chinese-tutorial
流程设计器开发
首先设计Html元素,设计一个左侧功能列表区域,一个右侧流程设计区域。
然后再设计三个节点拖进设计区域后释放时的样式。
代码如下:
提示:双击连接线可删除连接。
页面效果如下:
然后编写代码实现拖拽和释放的功能。
核心代码如下:
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" }]
}
这样我们就实现了基础的流程设计器了,下面我们看一下功能。
删除
点击链接线可以删除链接,如下图:
拖拽
拖拽节点按钮到设计器区域,如下图:
导出
点击导出按钮将当前流程的节点信息导出成json字符串,如下图
可以看到,设计器是支持一个节点发射出多个链接线的。
在导出时,我们再设计器中修改的节点名,也被同步的导出到json字符串中了。
----------------------------------------------------------------------------------------------------
到此,jsPlumb开发流程设计器就已经介绍完了。
代码已经传到Github上了,欢迎大家下载。
Github地址: https://github.com/kiba518/KibaWorkFlowDesigner_JS
----------------------------------------------------------------------------------------------------
注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!若您觉得这篇文章还不错,请点击下方的【推荐】,非常感谢!
https://www.cnblogs.com/kiba/p/15293054.html
柚子快报邀请码778899分享:jsPlumb开发流程设计器
发表评论