jsPlumb开发流程设计器

发表于 3年以前 | 总阅读数：324 次

01 前言

jsPlumb是一款开源软件，但jsPlumb toolkit是收费的。

本文主要使用jsPlumb实现一些简单的流程设计功能。

02 基础学习

首先引入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*

03 流程设计器开发

首先设计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开发流程设计器就已经介绍完了。

本文由哈喽比特于3年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/oz9_bIRFN60LL1-Pznssdw

刘强东夫妇：“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。

发布于：1年以前 | 808次阅读 | 详细内容 »

博主曝三大运营商，将集体采购百万台华为Mate60系列

日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于：1年以前 | 770次阅读 | 详细内容 »

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于：1年以前 | 756次阅读 | 详细内容 »

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。

发布于：1年以前 | 648次阅读 | 详细内容 »

威马CDO：中国每百户家庭仅17户有车

日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。

发布于：1年以前 | 589次阅读 | 详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。

发布于：1年以前 | 449次阅读 | 详细内容 »

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。

发布于：1年以前 | 446次阅读 | 详细内容 »

千万级抖音网红秀才账号被封禁

9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...

发布于：1年以前 | 445次阅读 | 详细内容 »