[原]JointJS流程圖

時間 2020-07-07

原文原文鏈接

　　最近項目上須要用流程圖來作問題定界分析，以前有同事用jsPlumb作過，可是閱讀代碼後以爲比較麻煩，因此本身又找了一圈，找到一個叫Dagre-D3的開源類庫，畫出來的效果以下圖，Dagre-D3最大的優勢就是能夠實現自動佈局，你只須要put數據就能夠了，可是缺點就是自動佈局後的連線會比較亂，並且連線不是橫平豎直的，對於流程圖不復雜的還好，稍微複雜點畫出來的連線就無法看。最後仍是被pass了。css

jsPlumb地址：https://jsplumbtoolkit.comhtml

Dagre-D3 Git地址：https://github.com/cpettitt/dagre-d3jquery

　　後面通過一番百度，最終決定用JointJS，官網：www.jointjs.com，相比Dagre-D3和jsPlumb，JointJS的API很詳細，代碼量少，鏈接線有多種選擇，封裝了多種經常使用的形狀，並且能畫的圖不少，官方也給了一些demo能夠參考。下面是我用JointJS畫出來的流程圖：git

依賴：在官網的下載頁面都能找到github

<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>

個人demo裏還引用了bootstrap的依賴用來顯示模態框json

html代碼bootstrap

<body>
    <div id="paper" class="paper"></div>
    
    <div class="modal fade searchpanel" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="modalTitle">詳細信息</h4>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
          </div>
        </div>
      </div>
    </div>
</body>

js代碼數據結構

首先是定義畫板和畫布，這裏重寫了ElementView和LinkView，目的是爲了讓畫出來的流程圖不能被刪除和編輯app

    var graph = new joint.dia.Graph();

    var ElementView = joint.dia.ElementView.extend({
        pointerdown: function () {
            this._click = true;
            joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
        },
        pointermove: function(evt, x, y) {
            this._click = false;
            joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
        },
        pointerup: function (evt, x, y) {
            if (this._click) {
                // triggers an event on the paper and the element itself
                this.notify('cell:click', evt, x, y); 
            } else {
                joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
            }
        }
    });
    var LinkView = joint.dia.LinkView.extend({
        addVertex: function(evt, x, y) {},
        removeVertex: function(endType) {},
        pointerdown:function(evt, x, y) {}
    });
    
    //定義畫布
    var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 1200,
        height: 600,
        gridSize: 1,
        model: graph,
        elementView: ElementView,
        linkView:LinkView
    });
    //paper.$el.css('pointer-events', 'none')//去除默認樣式，使全部事件不可用

而後我寫了兩個函數分別用來建立形狀和連線，這樣寫能夠減小代碼量，官方的demo也大都是這樣寫的jsp

    //定義形狀
    var state = function(x, y, shape, background, text){
        var cell;
        if(shape==="rect"){
            cell = new joint.shapes.basic.Rect({
                position: { x: x, y: y },//座標
                size: { width: 140, height: 40 },//寬高
                attrs: { 
                    rect: {
                        fill: {
                            type: 'linearGradient',
                            stops: [
                                { offset: '0%', color: background },//漸變開始
                                { offset: '100%', color: '#fe8550' }//漸變結束
                            ],
                            attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
                        },
                        stroke: background,//邊框顏色
                        'stroke-width': 1//邊框大小
                    },
                    text: { text: text } //顯示文字
                }
            });
        } else if(shape==="ellipse"){
            cell = new joint.shapes.basic.Ellipse({
                position: { x: x, y: y },//座標
                size: { width: 140, height: 40 },//寬高
                attrs: { 
                    ellipse: {
                        fill: {
                            type: 'linearGradient',
                            stops: [
                                { offset: '0%', color: background },//漸變開始
                                { offset: '100%', color: '#FFFFFF' }//漸變結束
                            ],
                            attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
                        },
                        stroke: background,//邊框顏色
                        'stroke-width': 1//邊框大小
                    },
                    text: { text: text } //顯示文字
                }
            });
        }
        graph.addCell(cell);
        return cell;
    };
    
    //定義連線
    function link(source, target, label){
        var cell = new joint.dia.Link({ 
            source: { id: source.id },
            target: { id: target.id },
            labels: [{ position: 0.5, attrs: { text: { text: label || '', 'font-weight': 'bold' } } }],
            router: { name: 'manhattan' },//設置連線彎曲樣式 manhattan直角
            attrs: {
                '.connection': {
                    stroke: '#333333',//連線顏色
                    'stroke-width': 2//連線粗細
                },
                '.marker-target': {
                    fill: '#333333',//箭頭顏色
                    d: 'M 10 0 L 0 5 L 10 10 z'//箭頭樣式
                }
            }
        });
        graph.addCell(cell);
        return cell;
    }

最後就是咱們實際的業務代碼了，這裏咱們能夠整理一下數據結構，把數據定義成json格式，而後寫一個函數經過json直接生成流程圖，固然座標須要尋找規律本身計算一下

    //建立元素
    var start = state(500,100,"ellipse","#00FFFF", "視頻播放成功率");
    var state1 = state(500,200,"rect","#f7a07b", "GET響應成功率");
    var state2 = state(400,300,"rect","#f7a07b", "HTTP錯誤碼分析");
    var state3 = state(600,300,"rect","#f7a07b", joint.util.breakText("TCP異常和其餘緣由",{width:80}));
    var state4 = state(400,400,"rect","#f7a07b", "4XX、5XX分析");
    var state5 = state(600,400,"rect","#f7a07b", "接口以上分析");
    var state6 = state(750,400,"rect","#f7a07b", "接口如下分析");
    
    //建立連線
    link(start, state1, "");
    link(state1, state2, "≥70%");
    link(state1, state3, "<70%");
    link(state2, state4, "");
    link(state3, state5, "是");
    link(state3, state6, "否");
    
    //給全部元素添加點擊事件
    paper.on('cell:click', function (e) {
        $("#detailModal .modal-body").html("");
        var arr = $("#"+e.id+" tspan");
        if(arr.length===1){
            $("#detailModal .modal-body").append($(arr).html());
            $("#detailModal").modal();
        } else{
            var tmp="";
            $.each(arr, function(k,v){
                tmp+=$(v).html();
            });
            $("#detailModal .modal-body").append(tmp);
            $("#detailModal").modal();
        }
        
    });

後面是給每一個元素（不包含連線）添加了一個點擊事件，彈出一個模態框，顯示當前點擊的內容。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。