前言

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开发流程设计器的更多相关文章

  1. .NET 开源工作流: Slickflow流程引擎高级开发(十) -- BpmnJS流程设计器集成

    前言: 在Slickflow产品开发过程中,前端流程设计器经历了几个不同的版本(jsPlumb, mxGraph等),目的是为了在设计流程时的用户体验更加良好,得到客户的好评和认可.BpmnJS流程设 ...

  2. activiti工作流的web流程设计器整合视频教程 SSM和独立部署

    本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...

  3. activiti工作流的web流程设计器整合视频教程 SSM 和 独立部署

    本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...

  4. YbSoftwareFactory 代码生成插件【十六】：Web 下灵活、强大的审批流程实现（含流程控制组件、流程设计器和表单设计器）

    程序=数据结构+算法,而企业级的软件=数据+流程,流程往往千差万别,客户自身有时都搞不清楚,随时变化的情况更是家常便饭,抛开功能等不谈,需求变化很大程度上就是流程的变化,流程的变化会给开发工作造成很大 ...

  5. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  6. activiti工作流的web流程设计器整合视频教程

    本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...

  7. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  8. java 工作流项目源码 SSM 框架 Activiti-master springmvc 集成web在线流程设计器

    即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...

  9. 流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)

    去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程 ...

随机推荐

  1. Android面试6家一线大厂，这个问题是必问！

    年后面了六家大厂,每家都会问的一个问题就是Android的消息机制!可见Android的消息机制是多么重要! 消息机制之所以这么重要是因为Android应用程序是通过消息来驱动的,Android某种意 ...

  2. 从事 Android应用开发4年有余，现在工资7500。很不爽！怎么办？

    最近到某论坛看到一个帖子: 坐标北京,在一个公司从事android应用开发4年有余(毕业至今没换过公司).公司利润越来越大,工资却每年长1000,如今才到7500.琢磨着换工作,又不想扔下这四年来逐步 ...

  3. 1~n数字中1出现的个数

    1~n数字中1出现的个数 LeetCode 给定一个整数 n,计算所有小于等于 n 的非负整数中数字 1 出现的个数. 感觉挺有意思 对于一个数,我们先局部分析一下,比如123456,我们考虑百位这个 ...

  4. KMP算法的详细解释

    什么是kmp算法呢?这是一个处理字符串的算法,用来判断给出的模式串p是否存在于文本串t中(p的长度小于t). 在本文中,字符串储存在字符数组中,并且第一个字符放在下标为1的元素中. 那么如何理解kmp ...

  5. ELK+kafka docker快速搭建+.NetCore中使用

    ELK开源实时日志分析平台.ELK是Elasticsearch,Logstash,Kibana 的缩写. Elasticsearch:是个开源分布式搜索引擎,简称ESLogstash:是一个完全开源的 ...

  6. MySQL学习07（规范化数据库设计）

    规范化数据库设计 当数据库比较复杂时我们需要设计数据库 糟糕的数据库设计 : 数据冗余,存储空间浪费 数据更新和插入的异常 程序性能差 良好的数据库设计 : 节省数据的存储空间 能够保证数据的完整性 ...

  7. HCNA Routing&Switching之地址转换技术NAT

    前文我们了解了包过滤工具ACL相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15156308.html:今天我们来聊一聊地址转换技术NAT相关话题: ...

  8. XXXMapper.xml中嵌套查询

    XXXMapper.xml中嵌套查询 <resultMap id="LiveUserNocticeMap" type="com.fxkj.common.vo.Liv ...

  9. spring-boot 2.5.4，nacos 作为配置、服务发现中心，Cloud Native Buildpacks 打包镜像，GitLab CI/CD

    spring-boot 2.5.4,nacos 作为配置.服务发现中心,Cloud Native Buildpacks 打包镜像,GitLab CI/CD 本文主要介绍 Java 通过 Cloud N ...

  10. 从net到java：MyBatis快速入门

    第一:这不是net与java的对比,只是我学习java相关知识梳理的笔记. 第二:这也没有否认net,只是现在的工作需要自己会java. 第三:这不深入.只是我看了些官网和网上的视频,算是入门的总结. ...