jsPlumb開發流程設計器

前言

jsPlumb是一款開源軟體，但jsPlumb toolkit是收費的。

本文主要使用jsPlumb實現一些簡單的流程設計功能。

基礎學習

首先引入jsplumb.min.js。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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" }]

}

這樣我們就實現了基礎的流程設計器了，下面我們看一下功能。