前言

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. “百度杯”CTF比赛 十月场-Getflag(md5碰撞+sql注入+网站绝对路径)

    进去md5碰撞,贴一下脚本代码 import hashlib def md5(value): return hashlib.md5(str(value).encode("utf-8" ...

  2. 第2篇-JVM虚拟机这样来调用Java主类的main()方法

    在前一篇 第1篇-关于JVM运行时,开篇说的简单些 中介绍了call_static().call_virtual()等函数的作用,这些函数会调用JavaCalls::call()函数.我们看Java类 ...

  3. JAVA集合体系之-开篇

    JAVA的集合体系是个庞大的知识体系,里面涵盖了,如数组结构,链表,红黑树,排序算法,线程安全等等知识点,接下来将会使用一系列的分享文章整理自己的学习心得,留的温故而知新.下图是整理出来的JAVA集合 ...

  4. [数据结构]ODT(珂朵莉树)实现及其应用，带图

    [数据结构]ODT(珂朵莉树)实现及其应用,带图 本文只发布于博客园,其他地方若出现本文均是盗版 算法引入 需要一种这样的数据结构,需要支持区间的修改,区间不同值的分别操作. 一般的,我们会想到用线段 ...

  5. Abp vNext 基础篇丨分层架构

    介绍 本章节对 ABP 框架进行一个简单的介绍,摘自ABP官方,后面会在使用过程中对各个知识点进行细致的讲解. 领域驱动设计 领域驱动设计(简称:DDD)是一种针对复杂需求的软件开发方法.将软件实现与 ...

  6. iOS-block循环引用详解和应用

    Block循环引用 什么情况下block会造成循环引用 ARC 情况下 block为了保证代码块内部对象不被提前释放,会对block中的对象进行强引用,就相当于持有了其中的对象,而如果此时block中 ...

  7. 零基础学Java之Java学习笔记（四）：运算符

    ​ 算术运算符: 算术运算符是对数值类型的变量进行运算的,在 Java 程序中使用的非常多. 运算符 说明 例子 结果 + 加法-相加运算符两侧的值 9+9 18 - 减法-左操作数减去右操作数 10 ...

  8. CentOS6与CentOS7的几点区别

    重新安装了一个CentOS7,顺便整理一下与自己之前用的CentOS6的区别 CentOS6以下简称c6  CentOS7以下简称c7 1.关于文件系统: c6 6.x使用EXT4,EXT4单个文件系 ...

  9. 真.OI宝典

    记得取模%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ...

  10. noip 模拟4

    咕 题都改不完怎么可能有空写题解啊啊啊