前言

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. Guava Cache 原理分析与最佳实践

    前言 目前大部分互联网架构 Cache 已经成为了必可不少的一环.常用的方案有大家熟知的 NoSQL 数据库(Redis.Memcached),也有大量的进程内缓存比如 EhCache .Guava ...

  2. Linux 基础学习篇笔记 Linux基础知识

    哎呀,翻到第一篇,映出眼帘的标题:从Unix到Linux(我就知道学习不能急,不能像我,看个简介,就赶忙去查了,原来作者在这里给出详细的介绍了) 1.1根据书上写的,原来linux的内核是被Linus ...

  3. Golang语言系列-05-数组和切片

    数组和切片 数组 概念 数组是同一种数据类型元素的集合:数组的长度必须是常量,并且长度是数组类型的一部分,一旦定义,长度不能变 例如:[5]int 和 [10]int 是不同的数组类型 使用时可以修改 ...

  4. Redis分布式锁的原理和实现

    前言 我们之前聊过redis的,对基础不了解的可以移步查看一下: 几分钟搞定redis存储session共享--设计实现:https://www.cnblogs.com/xiongze520/p/10 ...

  5. Python小白的数学建模课-17.条件最短路径

    条件最短路径问题,指带有约束条件.限制条件的最短路径问题.例如: 顶点约束,包括必经点或禁止点的限制: 边的约束,包括必经路段.禁行路段和单向路段:无权路径长度的限制,如要求经过几步或不超过几步到达终 ...

  6. Nebula 2.5.0安装过程及遇到的坑

    2021年8月23日,Nebula 发布了最新版本:2.5.0,正好赶上新环境部署,记录一下安装过程及遇到的坑: 一.准备工作 以下安装使用nebula用户,搭建集群模式,一共三台机器:192.168 ...

  7. centos7-同步时间

    yum install -y ntp ntpdate ntpdate -u cn.pool.ntp.org # 阿里云ntp ntpdate ntp1.aliyun.com 但这样的同步,只是强制性的 ...

  8. SpringBoot-400-Bad-Request(Request-header-is-too-large)

    错误 Request header is too large 分析 请求头内容过大 解决方案 1.SpringBoot版本1.3.8.RELEASE在配置文件中添加: 如果springboot内置to ...

  9. 使用JS获取SessionStorage的值

    参考:https://www.jb51.net/article/132729.htm 获取sessionStorage的意义 首先获取它是为了将获得的信息输出或者alert():让人容易看到, 其次, ...

  10. 【springcloud】Zuul 超时、重试、并发参数设置

    转自:https://blog.csdn.net/xx326664162/article/details/83625104 一. Zuul 服务网关 服务网关 = 路由转发 + 过滤器 1.路由转发: ...