vue中使用gojs/jointjs

头像
lady
    阅读 17 分钟
    7

    博客文章地址：https://lry1994.github.io/stu...
    ---------------------------------------------更新 2018/8/30----------------------------------------------------------
    经过一番实践，我觉得jointjs不好用了。
    不满意点：

    1. 不能相对容器自动布局，都用的是死的像素，分辨率低的屏幕，部分图有些就看不见

    图片描述

    1. 不能滚动鼠标自己缩小放大
    2. 比较丑，也可能是我不会配色

    最终采用gojs,上面提到的问题解决方案是：把去掉水印的gojs放在自己的npm服务器上，这样就可以npm安装了！！！
    实践过程中遇到个问题

    <process-go style="height:250px"  v-if="show"  :model-data="dataObj.graph" :category="category"> </process-go>

    像这样，用v-if反复切换，会报错Cannot read property 'type' of undefined at Po (go.js?d976:1044)

    换成v-show就不会

    <process-go style="height:250px"  v-show="show"  :model-data="dataObj.graph" :category="category"> </process-go>

    但是这样的前提是show初始化是true.如果初始化为false,没有报错，但是图呈现不出来。
    原因我猜测是：show初始化为false,组件高度为0，因为默认画布就是组件容器，所以画布高度变成0，图画不出。

    最后想出个方法。v-if和v-show结合一起使用，加上$once方法，代码：

    <process-go style="height:250px" v-if="firstClick" v-show="show"  :model-data="dataObj.graph" :category="category"> </process-go>
    data(){
    return{        
        show:false,
        firstClick:false,
    }
}
created(){
    this.init();
    this.$once('firstClick',()=>{
        this.firstClick = true
    })
},
methods:{
    init(){...},
    look(){//用v-if切换会报错，只有第一次点击查看用v-if,其他用v-show
        this.$emit('firstClick');
        this.show = true;
    }
}

    重新封装了一下gojs 地址：https://github.com/LRY1994/vue-lib/blob/master/src/components/process-go/index.vue

    -------------------------------------------更新线-----------------------------------------------------------------

    因为公司项目需求，要画出相关业务的流程图，以便客户了解自己身处何处

    搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种

    flow-chart

    代码写法繁琐，不是json就可以解决，效果也比较丑,PASS

    darge-d3

    github :https://github.com/dagrejs/dagre-d3

    效果图
    图片描述

    下载里面的demo,改一下json就可以了

    // States 
var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", 
               "CANCELED", "ABOLISHED" , "DELETED","REFUNDING","REFUNDED"];
var map = ['新创建','已提交','已完成','提交失败',"交付中",
              '已取消','废除','已删除','退款中',"已退款"]
// Automatically label each of the nodes
states.forEach(function(state,index) { g.setNode(state, { label: `${map[index]}(${state})`})});

// Set up the edges
g.setEdge("NEW", "FAILED",     { label: "后台接口自动"});
g.setEdge("NEW", "SUBMITTED",   { label: "后台接口自动" });
g.setEdge("NEW", "CANCELED",   { label: "用户取消订单" });
g.setEdge("SUBMITTED","CANCELED",     { label: "用户取消订单" });
g.setEdge("SUBMITTED", "ABOLISHED",  { label: "用户超过48小时未支付，\n系统自动取消"});
g.setEdge("ABOLISHED","DELETED",      { label: "已删除" });
g.setEdge("CANCELED", "DELETED",   { label: "已删除"});
g.setEdge("FAILED",   "SUBMITTED",      { label: "后台接口自动" });

g.setEdge("SUBMITTED",   "DELIVER",     { label: "用户支付" });
g.setEdge("FINISHED",   "REFUNDING",     { label: "用户退款" });

g.setEdge("DELIVER",   "FINISHED",     { label: "交付完成" });
g.setEdge("REFUNDING",   "REFUNDED",     { label: "已退款" });
g.setEdge("REFUNDED",   "DELETED",     { label: "已删除" });
g.setEdge("DELIVER",   "REFUNDING",     { label: "用户退款" });
g.setEdge("FAILED",   "CANCELED",     { label: "用户取消订单" });

    不满意的地方：画出来的图是垂直方向的，我要的是水平方向,PASS

    gojs

    github :https://github.com/NorthwoodsSoftware/GoJS

    可以通过npm install gojs -save安装

    效果图
    图片描述

    看里面的demo我自己包装了一下

    <template>
<div>
  <p style="background-color:#d5d5d5;margin:0;padding:5px;">
    您当前处于 <span class="tip">用户提交资料</span> 步骤 
    下一步等待<span class="tip">供应商接单</span>
    <el-button type="text" v-if="show===false" @click="show=true">展开</el-button>
    <el-button type="text" v-else @click="show=false">收起</el-button>
    
  </p>
  <div id="myDiagramDiv" v-show="show"  ></div>
  </div> 
    
</template>
<style scoped>
.tip{
  color:red;
  font-size:0.8em;
  font-weight:bold;
  padding:5px;
}
#myDiagramDiv{
  height: 200px; 
  border: solid 1px #d3d3d3;
}

</style>
    <script>
window.go =require('./go.js') 
var $ = go.GraphObject.make;

import datam from './data';
export default{
  mixins:[datam],
  data(){
    return{
      myDiagram:null,
      show:true
    }
  },
  mounted(){
    this.load();
  },
  methods:{
    load(){
      this.init();
      this.addNodeTemplate(this.User);
      this.addNodeTemplate(this.Supplier);
      this.layout();
    },
    layout() {
      this.myDiagram.model = go.Model.fromJson(this.myjson);
      this.myDiagram.layoutDiagram(true);
    },

    getOption(){
      // for conciseness in defining templates

      let options={
        yellowgrad : $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
        greengrad : $(go.Brush, "Linear", { 0: "#98FB98", 1: "#9ACD32" }),
        bluegrad : $(go.Brush, "Linear", { 0: "#B0E0E6", 1: "#87CEEB" }),
        redgrad : $(go.Brush, "Linear", { 0: "#C45245", 1: "#871E1B" }),
        whitegrad : $(go.Brush, "Linear", { 0: "#F0F8FF", 1: "#E6E6FA" }),
        bigfont : "bold 8pt Helvetica, Arial, sans-serif",
        smallfont : "bold 6pt Helvetica, Arial, sans-serif",
        
      }

      return options;
    },

     textStyle(){
        return {
          margin: 6,
          wrap: go.TextBlock.WrapFit,
          textAlign: "center",
          editable: true,
          font: this.getOption()['bigfont']
        }
      },
      init(){
        this.myDiagram =
            $(go.Diagram, "myDiagramDiv",
              {
                isReadOnly: true,
                // have mouse wheel events zoom in and out instead of scroll up and down
                "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone,
                initialAutoScale: go.Diagram.Uniform,
                "linkingTool.direction": go.LinkingTool.ForwardsOnly,
                initialContentAlignment: go.Spot.Center,
                layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }),
                "undoManager.isEnabled": true
              });
              //默认节点模板
        this.myDiagram.nodeTemplate =
            $(go.Node, "Auto",
              new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
              // define the node's outer shape, which will surround the TextBlock
              $(go.Shape, "Rectangle",
                { fill: this.getOption()['yellowgrad'], stroke: "black",
                  portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
                  toEndSegmentLength: 50, fromEndSegmentLength: 40 }),
              $(go.TextBlock, "Page",
                { margin: 6,
                  font: this.getOption()['bigfont'],
                  editable: true },
                new go.Binding("text", "text").makeTwoWay()));
            // replace the default Link template in the linkTemplateMap
          this.myDiagram.linkTemplate =
                $(go.Link,  // the whole link panel
                  new go.Binding("points").makeTwoWay(),
                  { curve: go.Link.Bezier, toShortLength: 15 },
                  new go.Binding("curviness", "curviness"),
                  $(go.Shape,  // the link shape
                    { stroke: "#2F4F4F", strokeWidth: 2.5 }),
                  $(go.Shape,  // the arrowhead
                    { toArrow: "kite", fill: "#2F4F4F", stroke: null, scale: 2 })
                  );
      },
      /**
       * options:{
       *  category
       *  shape:RoundedRectangle/Rectangle
       *  shapeOptions:{
       *   fill:bluegrad/greengrad/yellowgrad/null/redgrad/whitegrad  自定义的
       *   stroke: "black",
       *   portId:""
       *   fromLinkable:true
       *   toLinkable:
       *   cursor:"pointer"
       *   fromEndSegmentLength:40
       *    toEndSegmentLength
       *    strokeWidth
       *  
       *   }
       *    textStyle:{
       *        margin: 9,
       *        maxSize: new go.Size(200, NaN),
       *        wrap: go.TextBlock.WrapFit,
        *       editable: true,
        *       textAlign: "center",
        *       font: smallfont 
        * },
       *    
       * }
       */
      addNodeTemplate(options){
        let fill = this.getOption()[options.shapeOptions.fill];
        options.shapeOptions.fill = fill;
        this.myDiagram.nodeTemplateMap.add(options.category,
          $(go.Node, "Auto",
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            $(go.Shape, options.shape,options.shapeOptions),
            $(go.TextBlock,  this.textStyle(),
              new go.Binding("text", "text").makeTwoWay())
            ));
      },

    }


}

</script>

    不满意的地方：

    1. 免费版gojs是有水印的，百度搜索“gojs如何去水印”有一堆答案，我就不写了。
    2. 因为要自己手动去掉水印，所以我只能手动下载go.js放在我自己的组件目录下，但是这个文件太大了，800+KB,npm run dev 的时候停在这里停了好久。有时候还爆出“......maximun ....500KB”的错误，我也不知道是什么原因，不知道有什么方法，有的话麻烦通知我。
    3. 代码写法有点太繁琐

    这是我自己包装的代码地址：https://github.com/LRY1994/vue-lib/tree/master/src/components/process-go

    jointjs

    github : https://github.com/clientIO/joint
    效果图
    图片描述

    可以通过npm install jointjs -save安装

    参照了很多demo和文档，用的是矩形，但是可以设置圆角的度数变成椭圆形，其他形状我就无力了。

    可以自定义矩形的样式和矩形框里面的文字样式

    //data.vue
<script>
export default {
    data(){
        var userClass = {//这个要参照SVG属性
            /**shapeStyle
             * fill:填充的背景颜色
                stroke: 边框颜色
                strokeWidth: 边框宽度
                rx: 圆角
                ry: 
             */
            shapeStyle:{//矩形样式
                fill:{
                    type: 'linearGradient',
                    stops: [
                        {offset: '0%', color: '#98FB98'},
                        {offset: '100%', color: '#9ACD32'}
                    ],
                },
                rx:150,
                ry:15
            },
            /**
             * textStyle
             *  fontWeight
             *  fontSize
             * 
             */
            textStyle:{//文本样式
                fontWeight:'bold'
            }    
        };
        return{
            graphData :{
                node:{
                    '100':{text:'用户提交资料',category:userClass},
                    '101':{text:'用户完善资料',category:userClass},
                    '102':{text:'用户确认完成',category:userClass},
                    '103':{text:'用户撤销',category:userClass},

                    '200':{text:'供应商驳回'},
                    '201':{text:'供应商接单'},
                    '202':{text:'供应商完工'},
                    '203':{text:'等待供应商处理'},

                    '300':{text:'系统交付出错'}               
                },
                edge :{//每个点都要写
                    '100': ['200','201','103'], 
                    '101': ['201'],
                    '102':[],
                    '103': ['100'],

                    '200': ['101'],              
                    '201': ['202','300'],
                    '202': ['102'],               
                    '203': ['102'], 

                    '300': ['203'],
                
                },
            }
        }
    }
}
</script>

    <template>
<div id="container">
  <p style="background-color:#EEEEEE;margin:0;padding:5px;font-size:0.9em">
    您当前处于 <span class="tip">用户提交资料</span> 步骤 
    下一步等待<span class="tip">供应商接单</span>
    <el-button type="text" v-if="show===false" @click="show=true">展开</el-button>
    <el-button type="text" v-else @click="show=false">收起</el-button>
    
  </p>
    <div id="myholder" v-show="show"></div>
</div>
</template>
    <script>
window.joint=require('jointjs');
var Shape = joint.dia.Element.define('default.Rectangle', {      
        attrs: {  
            rect: {
                refWidth: '100%',
                refHeight: '100%',
                //下面这些可以自己设置
                fill:{
                    type: 'linearGradient',
                    stops: [
                        {offset: '0%', color: '#B0E0E6'},//渐变开始
                        {offset: '100%', color: '#F0F8FF'}//渐变结束
                    ]
                },
                stroke: '#B0E0E6',
                strokeWidth: 1,
                rx: 5,//圆角
                ry: 5
            },
            text: {
                refX: '50%',
                refY: '50%',                               
                textVerticalAnchor: 'middle',
                textAnchor: 'middle',
                fontSize: 10           
            }
         }                    
    }, 
    {
         markup: '<rect/><text/>',
         setText: function(text) {                    
            return this.attr('text/text', text || '');
        },
        setShapeStyle:function(shapeStyle){
            let newstyle = Object.assign({},this.attr('rect'),shapeStyle);
            return this.attr('rect',newstyle)
        },
        
        setTextStyle:function(textStyle){
            let newstyle = Object.assign({},this.attr('text'),textStyle);
            return this.attr('text',newstyle)
        }
    }
);

var Link = joint.dia.Link.define('default.Link', {
        attrs: {
            '.connection': {
                stroke: '#2F4F4F',//线
                strokeWidth: 1,
                pointerEvents: 'none',
                targetMarker: {//箭头
                    type: 'path',
                    fill: '#2F4F4F',//填充颜色
                    stroke: '#2F4F4F',//边框颜色
                    strokeWidth:'1',
                    d: 'M 2 -2 0 0 2 2 z'//形状
                }
            }
        },
        connector: {
            name: 'rounded'
        },
        z: -1,
        weight: 1,
        minLen: 1,
        labelPosition: 'c',
        labelOffset: 10,
        labelSize: {
            width: 50,
            height: 30
        },
        labels: [{
            markup: '<rect/><text/>',
            attrs: {
                text: {
                    fill: 'gray',
                    textAnchor: 'middle',
                    refY: 5,
                    refY2: '-50%',
                    fontSize: 10,
                    cursor: 'pointer'
                },
                // rect: {
                //     fill: 'lightgray',
                //     stroke: 'gray',
                //     strokeWidth: 2,
                //     refWidth: '100%',
                //     refHeight: '100%',
                //     refX: '-50%',
                //     refY: '-50%',
                //     rx: 5,
                //     ry: 5
                // }
            },
            size: {
                width: 50, height: 10
            }
        }]

    }, {
        markup: '<path class="connection"/><g class="labels"/>',
        
        connect: function(sourceId, targetId) {
            return this.set({
                source: { id: sourceId },
                target: { id: targetId }
            });
        },

        setLabelText: function(text) {
            return this.prop('labels/0/attrs/text/text', text || '');
        }
    });



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) {}
});


export default {   
    data(){
        return{
            graph:null,
            paper:null,
            show:true
        }       
    },
    props:{
        graphData:{
            type:Object,
            required:true
        }
    },
    mounted(){
        let w = document.getElementById('container').width ; 
        this.graph = new joint.dia.Graph;
        this.paper = new joint.dia.Paper({
            el: document.getElementById('myholder'),
            width: w,
            height: 250,         
            model: this.graph,
            elementView: ElementView,//禁止拖拽
            linkView:LinkView//禁止拖拽
        });
        this.layout();
    },
    methods:{
        getWidthandHeight(label){
            let maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length,

            // Compute width/height of the rectangle based on the number
            // of lines in the label and the letter size. 0.6 * letterSize is
            // an approximation of the monospace font letter width.
             letterSize = 8,
             width = 2 * (letterSize * (0.6 * maxLineLength + 1)),
             height = 2 * ((label.split('\n').length + 1) * letterSize);
            return {width,height}
        },
        getLayoutOptions() {
            return {
                // setVertices: false,
                // setLabels: false,
                // ranker:'longer-path',//'tight-tree'/'network-simplex',
                rankDir: 'LR',
                align: 'UR',
                rankSep:0,
                edgeSep:0,
                nodeSep:0,
            };
        },
        buildGraphFromAdjacencyList(adjacencyList) {
            let elements = [],links = [],obj,size,node;
            const _this=this;
            const map=this.graphData.node;

            Object.keys(adjacencyList).forEach(function(parentId) {
                // Add element

                obj =map[parentId];
                size = _this.getWidthandHeight(obj.text);
                node =new Shape({id:parentId,size:size}).setText(obj.text);

                if(obj.category&&obj.category.shapeStyle){
                    node = node.setShapeStyle(obj.category.shapeStyle);
                }
                if(obj.category&&obj.category.textStyle){
                    node = node.setTextStyle(obj.category.textStyle);
                }

                elements.push(node);
                
                // Add links
                adjacencyList[parentId].forEach(function(childId) {
                    links.push(
                        new Link().connect(parentId, childId)// .setLabelText(parentLabel + '-' + childLabel)                                         
                    );
                });
            });

            return elements.concat(links);
        },
        layout() {            
            let cells = this.buildGraphFromAdjacencyList(this.graphData.edge);    
            this.graph.resetCells(cells);
            joint.layout.DirectedGraph.layout(this.graph, this.getLayoutOptions());
        },
    }
}
</script>

<style>
#myholder {
    border: 1px solid lightgray;
    margin-bottom:20px;
    padding-left:20px
}
.tip{
  color:#9ACD32;
  font-size:0.9em;
  font-weight:bold;
  padding:5px;
}
</style>

    这是我自己包装的代码地址：https://github.com/LRY1994/vue-lib/tree/master/src/components/process-joint

    这个目前看来还算满意

    jsplumb

    这个看了官网，不太友好，而且下载只有一个js文件，没有demo代码，不知如何下手

    参考资料：

    https://gojs.net/latest/samples/pageFlow.html
    http://www.daviddurman.com/assets/autolayout.js
    http://resources.jointjs.com/demos/layout

    vue.js
    lady
    368 声望11 粉丝
    « 上一篇
    兼容浏览器原生DOM的各种特性总结
    下一篇 »
    库文件太大，webpack打包时怎么办

    引用和评论

    推荐阅读
    头像
    图片预加载

    lady赞 1阅读 6.4k评论 1

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 3阅读 1k

    头像
    TypeScript中的Omit与Pick：何时使用

    倔强青铜三赞 1阅读 1.2k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 1阅读 1.2k

    头像
    7天撸完KTV点歌系统,含后台管理系统(完整版)

    大卫talk赞 2阅读 6.8k

    头像
    如何将豆瓣观影记录实时同步至博客中

    Meng小羽阅读 4.3k

    头像
    vue3使用百度地图

    兔子先森赞 1阅读 1.1k

    0 条评论
    得票最新