基于jsplumb绘制流程图

作者: WEB小斗者 | 来源:发表于2019-03-11 18:09 被阅读0次

vue+jsPlumb实现业务流程图
jsPlumb中文文档
基于jsplumb绘制流程图
二、可视化流程图工具集成
Controller路由图表拖拉实现
jsplumb实现流程图
关于写作那些事之快速上手Mermaid流程图
流程图的简单绘制方法
【无机纳米材料科研制图——Visio 0308】Visio流程图
使用流程图模板绘制流程图的操作方法介绍

效果图

jspumb.gif

需要用到以下四个文件包

jQuery.js

jquery-ui.min.css

jquery-ui.min.js

jquery.jsPlumb-1.6.2-min.js

    <script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
    <script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jquery.jsPlumb-1.6.2-min.js"></script>

css样式代码

<style>
        body{
            text-align: center;
        }
        #root{
            width:100%;
            height:100vh;
            display: flex;
            justify-content: space-between;
        }

        #left{
            width:243px;
            height:50vh;
            padding:32px;
            border:2px solid darkgray;
            box-sizing: border-box;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
        }

        .node {
            box-shadow: 2px 2px 19px #aaa;
            border-radius:6px;
            opacity: 0.8;
            filter: alpha(opacity=80);
            border: 1px solid #346789;
            width: 150px;
            text-align: center;
            z-index: 20;
            background-color: #eeeeef;
            color: black;
            padding: 10px;
            font-size: 9pt;
            cursor: pointer;
            height: 50px;
            /*line-height: 50px;*/
            background: lightskyblue;
        }
        .node:hover {
            box-shadow: 2px 2px 19px #444;
            opacity: 0.8;
            filter: alpha(opacity=80);
        }
        .node2css{
            background:orange;
        }
        .node3css{
            background: indianred;
        }
        .node4css{
            background: greenyellow;
        }

        #right{
            width:calc(100% - 260px);
            height:100vh;
            border:2px solid olivedrab;
            box-sizing: border-box;
        }
        .content{
            border-top: 1px solid darkgrey;
        }

        #myDropDown{
            width:80px;
            height:30px;
            border:2px solid blue;
        }
        #main{
            width:100%;
            height:calc(100% - 75px);
            border:1px solid red;
        }

    </style>

HTML页面代码

 <div id="root">
    <div id="left">
        <div class="node" id="node1">流程1</div>
        <div class="node node2css" id="node2">流程2</div>
        <div class="node node3css" id="node3">流程3</div>
        <div class="node node4css" id="node4">流程4</div>
    </div>
    <div id="right">
        <h2>下方区域绘制流程图</h2>
        <div class="content" id="main"></div>
    </div>
</div>

js行为代码

<script>
        //设置左侧为可复制的
        $("#left").children().draggable({
            helper: "clone",
            scope: "zlg",
        });

        //设置右侧为拖拽存放区
        var i=0;
        $("#main").droppable({
            scope:"zlg",
            drop:function (event , ui) {
                var left = parseInt(ui.offset.left - $(this).offset().left)+268.78;
                var top = parseInt(ui.offset.top - $(this).offset().top)+81;
                var name = ui.draggable[0].id;
                switch (name) {
                    case "node1":
                        i++;
                        var id = "state_start" + i;
                        $(this).append('<div class="node" style="position: absolute" id="' + id + '" >' + $(ui.helper).html() + '</div>');
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                    case "node2":
                        i++;
                        id = "state_flow" + i;
                        $(this).append("<div class='node node2css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>");
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                    case "node3":
                        i++;
                        id = "state_decide" + i;
                        $(this).append("<div class='node node3css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>");
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                    case "node4":
                        i++;
                        id = "state_end" + i;
                        $(this).append('<div class="node node4css" style=\'position: absolute\' id="' + id + '" >' + $(ui.helper).html() + '</div>');
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                }
            }
        });

        //基本连接线样式
        var connectorPaintStyle = {
            lineWidth: 4,
            strokeStyle: "#61B7CF",
            joinstyle: "round",
            outlineColor: "white",
            outlineWidth: 2
        };

        // 鼠标悬浮在连接线上的样式
        var connectorHoverStyle = {
            lineWidth: 4,
            strokeStyle: "green",
            outlineWidth: 2,
            outlineColor: "white"
        };

        //端点的颜色样式
        var paintStyle = {
            strokeStyle: "#1e8151",
            fillStyle: "transparent",
            radius: 3,
            lineWidth:6 ,
        }

        // 鼠标悬浮在端点上的样式
        var hoverPaintStyle = {
            outlineStroke: 'lightblue'
        }

        //设置连接端点和连接线
        var hollowCircle = {
            endpoint: ["Dot", { radius: 8 }],  //端点的形状
            connectorStyle: connectorPaintStyle,
            connectorHoverStyle: connectorHoverStyle,
            paintStyle: paintStyle,
            hoverPaintStyle: hoverPaintStyle ,
            isSource: true,    //是否可以拖动（作为连线起点）
            connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
            isTarget: true,    //是否可以放置（连线终点）
            maxConnections: -1,    // 设置连接点最多可以连接几条线
            connectorOverlays:[ "Arrow",
                ["Custom", {
                    create:function(component) {
                        return $("<select id='myDropDown'>" +
                            "<option value='one'>暂未审理</option>" +
                            "<option value='two'>通过</option>" +
                            "<option value='three'>驳回</option>" +
                            "</select>");
                    },
                    location:0.7,
                    id:"customOverlay",
                }]
            ]
        };

        //鼠标进入增加一个删除的小图标
        $("#main").on("mouseenter", ".node", function () {
            $(this).append('<img src="images/close2.png"  style="position: absolute;" />');
            var widthnum = $(this).css("width").substr(0,5);
            if (widthnum <  60) {
                $("img").css("left", 67).css("top", -13);
            } else {
                $("img").css("left", 167).css("top", -12);
            }
        });
        //鼠标离开小图标消失
        $("#main").on("mouseleave", ".node", function () {
            $("img").remove();
        });
        //节点小图标的单击事件
        $("#main").on("click", "img",function () {
            if (confirm("确定要删除此节点吗?")) {
                jsPlumb.removeAllEndpoints($(this).parent().attr("id"));
                $(this).parent().remove();
            }
        });
        //连接线的双击事件
        jsPlumb.bind("dblclick", function (conn, originalEvent) {
            if (confirm("确定删除此连线吗？"))
                jsPlumb.detach(conn);
        });
        //双击节点内容区域时的事件
        function doubleclick(id) {
            $(id).dblclick(function () {
                var text = $(this).text();
                $(this).html("");
                $(this).append("<input style='width: 130px' type='text' value='" + text + "' />");
                $(this).mouseleave(function () {
                    $(this).html($("input[type='text']").val());
                });
            });
        }
    </script>

vue+jsPlumb实现业务流程图
先上效果图 1、vue引入jsPlumb 2、使用jsPlumb动态绘制流程图
jsPlumb中文文档
前言以下jsPlumb文档介绍基于jsPlumb2.1.7版本，这是一个开源的流程图或拓扑图绘制工具库，目前网上...
基于jsplumb绘制流程图
效果图需要用到以下四个文件包 jQuery.jsjquery-ui.min.cssjquery-ui.min.j...
二、可视化流程图工具集成
因为主要使用的是vue进行开发，而流程图绘制工具主要也就那么几个，jsplumb、Jtopo这些都是比较成熟的绘制...
Controller路由图表拖拉实现
基于jsPlumb实现的可拖拽自定义流程图[https://www.jq22.com/jquery-info233...
jsplumb实现流程图
本篇文章介绍使用jsplumb实现的一个流程图，将实现效果和代码贴到下面，由于初次使用jsplumb，代码写的比较...
关于写作那些事之快速上手Mermaid流程图
本文主要介绍了如何快速上手 Mermaid 流程图,不用贴图上传也不用拖拉点拽绘制,基于源码实时渲染流程图,操作简...
流程图的简单绘制方法
流程图的画法，绘制流程图的话，比如办公软件、设计软件等这类软件都可以绘制流程图的。还有专门绘制流程图的软件，使用专...
【无机纳米材料科研制图——Visio 0308】Visio流程图
此篇，我们来分享在Visio流程图模式下的流程图绘制。一、流程图模式绘制流程图 1）选择流程图模式。...
使用流程图模板绘制流程图的操作方法介绍
在绘制流程图时想要快速绘制出好看的流程图，使用流程图模板可以实现，现在绘制的流程图模板也越来越精致，专业，所以很多...