基于 jsPlumb 的流程图编辑器的实现 （四，按钮的操作）

1.清空画布

清空画布，简单粗暴的方法就是清空html

$('#delete').click(function(){
    $('#flow-main').html('')
})

2.保存流程图

保存流程图是将流程图中的节点信息，连线信息和 label 信息序列化之后，利用 Ajax 传递到后台。节点和 label 可以利用 jQuery 直接获取 dom 信息，jsPlumb 提供了 jsPlumb.getAllConnections() 方法，可以获取连线信息。

            $('#save').click(function () {        
                var connects = [];
                $.each(jsPlumb.getAllConnections(), function (idx, connection) {
                    connects.push({
                      connectionId: connection.id,
                      pageSourceId: connection.sourceId,
                      pageTargetId: connection.targetId,
                      sourcePoint: connection.endpoints[0].anchor.type,
                      targetPoint: connection.endpoints[1].anchor.type,
                    });
                });
                var blocks = [];
                $("#flow-main .node-common").each(function (idx, elem) {
                    var $elem = $(elem);
                    console.log($elem);
                    var blockId = $elem.attr('id');
                    var blockContent = $elem.children('.node-text').html();
                    blocks.push({
                        blockId: blockId,
                        blockContent: blockContent,
                        type: $elem.data("type"),
                        blockX: parseInt($elem.css("left"), 10),
                        blockY: parseInt($elem.css("top"), 10),
                        width: parseInt($elem.width(), 10) + 24,
                        height: parseInt($elem.height(), 10) + 16,
                    });
                });
                var lineDescs = [];
                $("#flow-main .line-label").each(function (idx, elem) {
                     var $elem = $(elem);
                     var lineContent = $elem.children('.label-text').html();
                     lineDescs.push({
                         lineId: $elem.attr('id'),
                         lineContent: lineContent,
                         lineX: parseInt($elem.css("left"), 10),
                         lineY: parseInt($elem.css("top"), 10),
                         width: parseInt($elem.width(), 10) + 24,
                         height: parseInt($elem.height(), 10) + 16,
                         pathId: $elem.data("path")
                     });
                });
                var serliza = {
                    connects:connects,
                    blocks:blocks,
                    lineDescs:lineDescs
                }
                $.ajax({
                    type: "POST",
                    url: "test.json",
                    data: serliza,
                    success: function(data){
                         //保存成功之后的回调函数
                    }
                });              
            })

3.编辑

流程图可以分为可编辑和不可编辑两种状态，利用变量 isNew 区分，true 为可编辑， false 为不可编辑。默认的流程图是只可以查看，如果想要修改流程图，除了节点 label 的信息可以修改以外，还需要支持可以修改连线信息。

            $('#update').click(function(){
                isNew = true;
                $("#flow-main .node-common").each(function (idx, elem) {
                    var $elem = $(elem);
                    var id = $elem.attr('id')
                    jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, endpointStyle);
                    jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, endpointStyle);
                    jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, endpointStyle);
                    jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, endpointStyle);
                    jsPlumb.draggable(id);
                    $("#" + id).draggable({ containment: "parent",grid: [10, 10] });
                    that.nodeClick(id);
                });
                $("#flow-main .line-label").each(function (idx, elem) {
                    var $elem = $(elem);
                    var id = $elem.attr('id')
                    jsPlumb.draggable(id);
                    $elem.draggable({ containment: "parent" });  
                    that.labelClick(id);
                });
            })

编辑的时候，因为页面中已经有了一部分节点，而 _index 变量的值，并没有变化。如果继续添加节点的时候，会出现 id 冲突的情况，所以，再添加节点之前，需要判断 id 是否存在。

判断节点是否存在的方法：

        /**
         * 防止节点id重复
         * @params type Srting 节点类型
         * @params num Number 当前顺序号
         * @return id String 不重复的id
         */
        judgeId: function(type,num){
            var id = type + num;
            var doms = $('#'+id)
            if(doms.length != 0){
                _index = num + 1;
                return judgeId(type,_index);     
            }
            return type + num;
        },

4.根据数据画流程图

除了保存编辑功能外，还需要支持根据已有的数据绘制流程图的功能。

        /**
         * 根据数据画流程图
         * @params data Object 流程图数据
         */
        draw:function(data){
            var blockDoms = data.blocks;
            blockDoms.forEach(function(item,index){
                var dom = $('<div class="node-common" id="' + item.blockId + '" data-type="'+ item.type +'"><span class="node-text">'+ item.blockContent +'</span></div>')
                dom.css("left", item.blockX).css("top",item.blockY);
                dom.css("width", item.width).css("height",item.height);
                var type = item.type;
                switch (type) {
                        case "base":
                            dom.addClass('node-base');
                            break;
                        case "flow":
                            dom.addClass('node-flow');
                            break;
                        case "node":
                            dom.addClass('node-node');
                            break;
                        case "judge":
                            dom.addClass('node-judge'); 
                            break;
                    }
                $('#flow-main').append(dom);               
            })
            var connect = data.connects;
            connect.forEach(function(item,index){
                jsPlumb.ready(function(){
                    jsPlumb.connect({
                    source: item.pageSourceId,
                    target: item.pageTargetId,
                    anchor: [item.sourcePoint, item.targetPoint],
                    endpoint: ["Dot", { radius: 8 }], 
                    connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
                    connectorHoverStyle: connectorHoverStyle,
                    paintStyle: { strokeStyle: "#000000",
                                    fillStyle: "transparent",
                                    radius: 2,
                                    lineWidth: 2},
                    connector: ["Flowchart", { stub: [20, 30], gap: 5, cornerRadius: 3, alwaysRespectStubs: true }],
                    overlays: [["Arrow", { width: 10, length: 10, location: 1 }]],                
                    endpointStyle: { fillStyle: 'transparent', strokeStyle: "#000000", lineWidth: 1 ,radius: 2,},
                    isSource: false,
                    isTarget: false
                })
                })
                
            })
            var lineDescs = data.lineDescs;
            lineDescs.forEach(function(item,index){
                var dom = $('<div class="line-label label-blur" id="' + item.lineId + '" data-path="'+ item.pathId +'"><span class="label-text">'+ item.lineContent +'</span></div>')
                dom.css("left", item.lineX).css("top",item.lineY);
                dom.css("width", item.width).css("height",item.height);
                $('#flow-main').append(dom);
            })
        },

 

 

至此，流程图的基本功能已全部完成。

 

第一次写，基本功能实现，但是测试并不是十分充分，如果有问题，欢迎大家反馈，一起讨论。

 

 

项目地址：https://github.com/smile1828/demo-jsPlumb

基于 jsPlumb 的流程图编辑器的实现 （一，节点的操作）

基于 jsPlumb 的流程图编辑器的实现 （二，连接线的操作）

基于 jsPlumb 的流程图编辑器的实现 （三，document的操作）