前言

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. rsa加密初探

    RSA加密算法初探 RSA加密算法是早期的非对称加密,公钥和私钥分离,公开公钥,通过确保私钥的安全来保证加密内容的安全.由麻省理工学院的罗纳德·李维斯特(Ron Rivest).阿迪·萨莫尔(Adi ...

  2. CSS样式逐li添加，执行完，清空，反复执行

    function change_light(el) { el.hide() let i = 0; function temp() { if (i > el.length - 1) { el.hi ...

  3. Java面向对象03——类与对象的创建

    类的创建与初始化对象 age: 以类的方式组织代码,以对象的组织(封装)数据  package oop.demon01.demon02; ​ // 学生类(抽象模板) public class Stu ...

  4. linux的iptables设置

    添加规则 -A 在链末尾追加一条规则 -I 在链开头或某序号前插入一条规则 查看规则 -L 列出所有规则 -n 数字显示地址和端口信息 -v 详细信息 -line-numbers 显示规则序号 删除规 ...

  5. 微信小程序及公众号H5自动化测试攻略

    目前市面上,被大家用来做移动端App UI自动化测试工具最为常见的当属: Appium Airtest 很多小伙伴在刚接触这两款工具做App UI自动化测试时,难免会问到,他们能支持微信小程序或者微信 ...

  6. Socket通信协议解析（文章摘要）

    参考网址: https://zhuanlan.zhihu.com/p/84800923 在计算机通信领域,socket 被翻译为"套接字",它是计算机之间进行通信的一种约定或一种方 ...

  7. 03.SpringMVC之器

    整体结构介绍 在Servlet的继承结构中一共有5个类,GenericServlet和HttpServlet在java中剩下的三个类HttpServletBean.FrameworkServlet和D ...

  8. Redis缓存雪崩、缓存穿透、热点key

    转载自  https://blog.csdn.net/wang0112233/article/details/79558612 https://www.sohu.com/a/230787856_231 ...

  9. vue爬坑之路1-路由跳转全新页面以及二级页面配置

    之前也在网找了一些答案,比较零碎,特此总结下,废话不多说,直接上干货! 路由跳转全新页面 首先在app.vue中先定义router-view,这是主路由. 在router的index.js中引入log ...

  10. Java全栈方向学习路线

    前端方向 前端基础 HTML --> https://www.w3school.com.cn/html/index.asp CSS --> https://www.w3school.com ...