jsPlumb开发流程设计器
前言
jsPlumb是一款开源软件,但jsPlumb toolkit是收费的。
本文主要使用jsPlumb实现一些简单的流程设计功能。
基础学习
首先引入jsplumb.min.js。
- <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.8.0/dist/js/jsplumb.min.js"></script>
然后编写代码如下:
- <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" }]
- }
这样我们就实现了基础的流程设计器了,下面我们看一下功能。
删除
点击链接线可以删除链接,如下图:
拖拽
拖拽节点按钮到设计器区域,如下图:
导出
点击导出按钮将当前流程的节点信息导出成json字符串,如下图
可以看到,设计器是支持一个节点发射出多个链接线的。
在导出时,我们再设计器中修改的节点名,也被同步的导出到json字符串中了。
----------------------------------------------------------------------------------------------------
到此,jsPlumb开发流程设计器就已经介绍完了。
代码已经传到Github上了,欢迎大家下载。
Github地址: https://github.com/kiba518/KibaWorkFlowDesigner_JS
----------------------------------------------------------------------------------------------------
注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!
若您觉得这篇文章还不错,请点击下方的【推荐】,非常感谢!
https://www.cnblogs.com/kiba/p/15293054.html
jsPlumb开发流程设计器的更多相关文章
- .NET 开源工作流: Slickflow流程引擎高级开发(十) -- BpmnJS流程设计器集成
前言: 在Slickflow产品开发过程中,前端流程设计器经历了几个不同的版本(jsPlumb, mxGraph等),目的是为了在设计流程时的用户体验更加良好,得到客户的好评和认可.BpmnJS流程设 ...
- activiti工作流的web流程设计器整合视频教程 SSM和独立部署
本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...
- activiti工作流的web流程设计器整合视频教程 SSM 和 独立部署
本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...
- YbSoftwareFactory 代码生成插件【十六】:Web 下灵活、强大的审批流程实现(含流程控制组件、流程设计器和表单设计器)
程序=数据结构+算法,而企业级的软件=数据+流程,流程往往千差万别,客户自身有时都搞不清楚,随时变化的情况更是家常便饭,抛开功能等不谈,需求变化很大程度上就是流程的变化,流程的变化会给开发工作造成很大 ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- activiti工作流的web流程设计器整合视频教程
本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...
- 纯JS Web在线可拖拽的流程设计器
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...
- java 工作流项目源码 SSM 框架 Activiti-master springmvc 集成web在线流程设计器
即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...
- 流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)
去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程 ...
随机推荐
- 记一次GKCTF之旅
GKCTF游记 昨天吧,去GKCTF玩了一下.题目很有意思,宝可梦也很好玩,我心情非常好,天台的风也很大...... 不多说了,把昨天认真看过的几道题记录总结一下.这里特别感谢出题的二进制师傅们,感谢 ...
- Java流程控制01——用户交互Scanner
用户交互Scanner sacnner对象 之前的语法并没有实现程序与人的交互.java.util.Scanner是Java5的新特征,我们可以通过Scanner类来获取用户的输入. 基本语法: S ...
- RHCSA_DAY08
locate与find查找 locate:/var/lib/mlocate/mlocate.db getfacl 目录 chmod权限管理 chmod(英文全拼:change mode)设置用户对文件 ...
- windows本地挂载HDFS
1.修改配置文件 进入配置文件目录: cd ${HADOOP_HOME}/etc/hadoop 修改core-site.xml: vim core-site.xml 在文件中增加以下内容: <p ...
- uname指令
以下是一台Solaris 10服务器的配置信息, bash-3.00$ uname -a SunOS NOP2-HWXX 5.10 Generic_138888-03 sun4u sparc SUNW ...
- Linux文件系统与日志文件
目录 一.inode和block 1.1.inode和block概述 1.2.inode的内容 inode包含文件的元信息: 查看inode号两种方式 目录文件的结构 1.3.inode的号码 用户通 ...
- AI中各种浮点精度概念集合:fp16,fp32,bf16,tf32,fp24,pxr24,ef32
常见的浮点类型有fp16,fp32,bf16,tf32,fp24,pxr24,ef32,能表达的数据范围主要看exponent,精度主要看fraction. 可以看出表达的数据范围看fp32,bf16 ...
- 从跨域与同源策略谈CSRF防御与绕过
之前偶然看到群里有小伙汁问这个token相关的问题,当时我酝酿了一下子,没想好怎么总结,今天来说一下 CSRF在过去还属于OWASP TOP10 ,现在已经不是了(补充一点:关于OWASP API 请 ...
- kvm虚拟化的qcow2磁盘格式的扩容方法
第一种:增加一块磁盘而另磁盘空间增大 1).先进入kvm环境,创建一块硬盘:qemu-img create -f qcow2 /home/tianke/test.qcow2 40G 2).再给增加的硬 ...
- Mysql 主从同步原理简析
在开始讲述原理的情况下,我们先来做个知识汇总,究竟什么是主从,为什么要搞主从,可以怎么实现主从,mysql主从同步的原理1.什么是主从其实主从这个概念非常简单主机就是我们平常主要用来读写的服务,我们称 ...